Initial commit: Hermes Chat App with Svelte 5 + shadcn-svelte

src/lib/components/ui/avatar/avatar-fallback.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { cn } from "$lib/utils.js";
+  import type { HTMLSpanAttributes } from "svelte/elements";
+  import { onMount } from "svelte";
+
+  let { class: className = "", delayMs = 0, children, ...rest }: HTMLSpanAttributes & { delayMs?: number } = $props();
+  let visible = $state(false);
+
+  onMount(() => {
+    const timer = setTimeout(() => { visible = true; }, delayMs);
+    return () => clearTimeout(timer);
+  });
+</script>
+{#if visible}
+  <span class={cn("flex h-full w-full items-center justify-center rounded-full bg-muted text-xs font-medium", className)} {...rest}>
+    {@render children?.()}
+  </span>
+{/if}

src/lib/components/ui/avatar/avatar-image.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { cn } from "$lib/utils.js";
+  import type { HTMLImgAttributes } from "svelte/elements";
+
+  let { class: className = "", ...rest }: HTMLImgAttributes = $props();
+</script>
+<img class={cn("aspect-square h-full w-full", className)} {...rest} />

src/lib/components/ui/avatar/avatar.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { cn } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let { class: className = "", children, ...rest }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+<div class={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)} {...rest}>
+  {@render children?.()}
+</div>

src/lib/components/ui/avatar/index.ts

@@ -0,0 +1,3 @@
+export { default as Avatar } from "./avatar.svelte";
+export { default as AvatarImage } from "./avatar-image.svelte";
+export { default as AvatarFallback } from "./avatar-fallback.svelte";