feat: docker compose maybe

node_modules/@skeletonlabs/skeleton/dist/components/Avatar/Avatar.svelte

@@ -0,0 +1,44 @@
+<script>export let initials = "AB";
+export let fill = "fill-token";
+export let src = "";
+export let fallback = "";
+export let action = () => {
+};
+export let actionParams = "";
+export let background = "bg-surface-400-500-token";
+export let width = "w-16";
+export let border = "";
+export let rounded = "rounded-full";
+export let shadow = "";
+export let cursor = "";
+let cBase = "flex aspect-square text-surface-50 font-semibold justify-center items-center overflow-hidden isolate";
+let cImage = "w-full h-full object-cover";
+$:
+  classesBase = `${cBase} ${background} ${width} ${border} ${rounded} ${shadow} ${cursor} ${$$props.class ?? ""}`;
+function prunedRestProps() {
+  delete $$restProps.class;
+  return $$restProps;
+}
+</script>
+
+<!-- FIXME: resolve a11y warnings -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<figure class="avatar {classesBase}" data-testid="avatar" on:click on:keydown on:keyup on:keypress>
+	{#if src}
+		<img
+			class="avatar-image {cImage}"
+			style={$$props.style ?? ''}
+			{src}
+			alt={$$props.alt || ''}
+			use:action={actionParams}
+			on:error={() => (src = fallback)}
+			{...prunedRestProps()}
+		/>
+	{:else}
+		<svg class="avatar-initials w-full h-full" viewBox="0 0 512 512">
+			<text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-weight="bold" font-size={150} class="avatar-text {fill}">
+				{String(initials).substring(0, 2).toUpperCase()}
+			</text>
+		</svg>
+	{/if}
+</figure>

node_modules/@skeletonlabs/skeleton/dist/components/Avatar/Avatar.svelte.d.ts

@@ -0,0 +1,46 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Action } from 'svelte/action';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        /** Initials only - Provide up to two text characters.*/
+        initials?: string | undefined;
+        /** Initials only - Provide classes to set the SVG text fill color.*/
+        fill?: string | undefined;
+        /** Provide the avatar image element source.*/
+        src?: string | undefined;
+        /** Provide the fallback image element source.*/
+        fallback?: string | undefined;
+        /** Image only. Provide a Svelte action reference, such as `filter`.*/
+        action?: Action<HTMLElement, string, Record<never, any>> | undefined;
+        /** Image only. Provide Svelte action params, such as Apollo.*/
+        actionParams?: string | undefined;
+        /** Provide classes to set background styles.*/
+        background?: string | undefined;
+        /** Provide classes to set avatar width.*/
+        width?: string | undefined;
+        /** Provide classes to set border styles.*/
+        border?: string | undefined;
+        /** Provide classes to set rounded style.*/
+        rounded?: string | undefined;
+        /** Provide classes to set shadow styles.*/
+        shadow?: string | undefined;
+        /** Provide classes to set cursor styles.*/
+        cursor?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+        keypress: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AvatarProps = typeof __propDef.props;
+export type AvatarEvents = typeof __propDef.events;
+export type AvatarSlots = typeof __propDef.slots;
+export default class Avatar extends SvelteComponentTyped<AvatarProps, AvatarEvents, AvatarSlots> {
+}
+export {};