@svadmin/ui 0.29.3 → 0.30.0

package/dist/components/Layout.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { fade, fly } from 'svelte/transition';
+  import Sidebar from './Sidebar.svelte';
+  import Toast from './Toast.svelte';
+  import Header from './Header.svelte';
+  import CommandPalette from './CommandPalette.svelte';
+  import KeyboardShortcuts from './KeyboardShortcuts.svelte';
+  import ChatDialog from './ChatDialog.svelte';
+  import TooltipButton from './TooltipButton.svelte';
+  import { t } from '@svadmin/core/i18n';
+  import { getAuthProvider } from '@svadmin/core';
+  import type { Identity, MenuItem } from '@svadmin/core';
+  import { navigate } from '@svadmin/core/router';
+  import { currentPath } from '@svadmin/core/router';
+  import { Skeleton } from './ui/skeleton/index.js';
+  import { Button } from './ui/button/index.js';
+  import * as Sheet from './ui/sheet/index.js';
+  import { Menu } from '@lucide/svelte';
+
+  let commandOpen = $state(false);
+  let shortcutsOpen = $state(false);
+  let mobileMenuOpen = $state(false);
+
+  let { children, title = 'Admin', menu, siteUrl, routeMode = 'auto' }: { children: Snippet; title?: string; menu?: MenuItem[]; siteUrl?: string; routeMode?: 'hash' | 'path' | 'auto' } = $props();
+
+  let hasAuth = true;
+  let auth: ReturnType<typeof getAuthProvider> | null = null;
+  try {
+    auth = getAuthProvider();
+  } catch {
+    hasAuth = false;
+  }
+  let loading = $state(true);
+  let identity = $state<Identity | null>(null);
+
+  $effect(() => {
+    if (!auth) {
+      loading = false;
+      return;
+    }
+    (async () => {
+      try {
+        const { authenticated, redirectTo } = await auth.check();
+        if (!authenticated) {
+          navigate(redirectTo ?? '/login');
+          return;
+        }
+        identity = await auth.getIdentity();
+      } finally {
+        loading = false;
+      }
+    })();
+  });
+
+  async function handleLogout() {
+    if (!auth) return;
+    const result = await auth.logout();
+    if (result.success) {
+      navigate(result.redirectTo ?? '/login');
+    }
+  }
+
+  let collapsed = $state(false);
+
+  // Swipe gesture for mobile menu
+  let touchStartX = $state(0);
+  let touchEndX = $state(0);
+
+  function handleTouchStart(e: TouchEvent) {
+    if (e.touches.length === 1) {
+      touchStartX = e.touches[0].clientX;
+      touchEndX = e.touches[0].clientX;
+    }
+  }
+
+  function handleTouchMove(e: TouchEvent) {
+    if (e.touches.length === 1) {
+      touchEndX = e.touches[0].clientX;
+    }
+  }
+
+  function handleTouchEnd() {
+    // Only trigger swipe-to-open if starting near the left edge (e.g., within 30px)
+    // and swiping right by at least 50px
+    if (touchStartX < 30 && touchEndX - touchStartX > 50) {
+      mobileMenuOpen = true;
+    }
+  }
+</script>
+
+<svelte:window 
+  onkeydown={(e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); commandOpen = true; }
+    if (e.key === '?' && !['INPUT', 'TEXTAREA', 'SELECT'].includes((e.target as HTMLElement)?.tagName)) { e.preventDefault(); shortcutsOpen = true; }
+  }}
+  ontouchstart={handleTouchStart}
+  ontouchmove={handleTouchMove}
+  ontouchend={handleTouchEnd}
+/>
+{#if loading}
+  <div class="flex h-screen" in:fade={{ duration: 150 }}>
+    <div class="hidden md:block w-64 bg-sidebar/80 p-4 space-y-4">
+      <Skeleton class="h-8 w-32" />
+      <div class="space-y-2 mt-6">
+        {#each Array(5) as _}
+          <Skeleton class="h-9 w-full rounded-lg" />
+        {/each}
+      </div>
+    </div>
+    <div class="flex-1 p-8 space-y-6">
+      <Skeleton class="h-8 w-48" />
+      <div class="space-y-3">
+        {#each Array(4) as _}
+          <Skeleton class="h-12 w-full" />
+        {/each}
+      </div>
+    </div>
+  </div>
+{:else}
+  <div class="flex h-screen bg-background" in:fade={{ duration: 200, delay: 50 }}>
+    <!-- Desktop sidebar -->
+    <div class="hidden md:block">
+      <Sidebar {collapsed} {identity} {title} {menu} {routeMode} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
+    </div>
+
+    <!-- Mobile sidebar via Sheet -->
+    <Sheet.Root bind:open={mobileMenuOpen} side="left">
+      <div class="md:hidden">
+        <Sidebar collapsed={false} {identity} {title} {menu} {routeMode} onToggle={() => { mobileMenuOpen = false; }} onLogout={handleLogout} />
+      </div>
+    </Sheet.Root>
+
+    <div
+      class="flex-1 flex flex-col overflow-hidden transition-all duration-300"
+      class:md:ml-64={!collapsed}
+      class:md:ml-16={collapsed}
+    >
+      <!-- Header with mobile hamburger -->
+      <Header
+        {siteUrl}
+        showSearch={true}
+        onSearchClick={() => { commandOpen = true; }}
+      >
+        {#snippet children()}
+          <!-- Mobile hamburger -->
+          <TooltipButton tooltip={t('common.menu')} class="md:hidden" onclick={() => { mobileMenuOpen = true; }}>
+            <Menu class="h-5 w-5" />
+          </TooltipButton>
+        {/snippet}
+      </Header>
+
+      <!-- Content area -->
+      <main class="flex-1 overflow-y-auto p-6 md:p-8">
+        {#key currentPath()}
+          <div in:fly={{ x: 20, duration: 150 }} out:fade={{ duration: 80 }}>
+            {@render children()}
+          </div>
+        {/key}
+      </main>
+    </div>
+  </div>
+  <CommandPalette bind:open={commandOpen} />
+  <KeyboardShortcuts bind:open={shortcutsOpen} />
+  <ChatDialog />
+  <Toast />
+{/if}

package/dist/components/Layout.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { MenuItem } from '@svadmin/core';
+type $$ComponentProps = {
+    children: Snippet;
+    title?: string;
+    menu?: MenuItem[];
+    siteUrl?: string;
+    routeMode?: 'hash' | 'path' | 'auto';
+};
+declare const Layout: import("svelte").Component<$$ComponentProps, {}, "">;
+type Layout = ReturnType<typeof Layout>;
+export default Layout;

package/dist/components/ListPage.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { getResource } from '@svadmin/core';
+  import { navigate } from '@svadmin/core/router';
+  import { t } from '@svadmin/core/i18n';
+  import type { Snippet } from 'svelte';
+  import type { FieldDefinition } from '@svadmin/core';
+  import PageHeader from './PageHeader.svelte';
+  import AutoTable from './AutoTable.svelte';
+  import { Button } from './ui/button/index.js';
+  import { Plus } from '@lucide/svelte';
+
+  interface Props {
+    resourceName: string;
+    title?: string;
+    canCreate?: boolean;
+    /** Passthrough: enable row selection checkboxes */
+    selectable?: boolean;
+    /** Passthrough: custom header actions */
+    headerActions?: Snippet;
+    /** Passthrough: custom cell renderer per field */
+    cellRenderer?: Snippet<[{ field: FieldDefinition; value: unknown; record: Record<string, unknown> }]>;
+    /** Passthrough: custom row actions */
+    rowActions?: Snippet<[{ record: Record<string, unknown>; id: string | number }]>;
+    /** Passthrough: custom empty state */
+    emptyState?: Snippet;
+    /** Passthrough: expandable row content */
+    expandedRowRender?: Snippet<[{ record: Record<string, unknown> }]>;
+    class?: string;
+  }
+
+  let {
+    resourceName,
+    title,
+    canCreate,
+    selectable,
+    headerActions,
+    cellRenderer,
+    rowActions,
+    emptyState,
+    expandedRowRender,
+    class: className = '',
+  }: Props = $props();
+
+  const resource = $derived(getResource(resourceName));
+  const pageTitle = $derived(title ?? resource.label);
+  const showCreate = $derived(canCreate ?? resource.canCreate !== false);
+</script>
+
+<div class="space-y-6 {className}">
+  <PageHeader title={pageTitle}>
+    {#snippet actions()}
+      {#if showCreate}
+        <Button onclick={() => navigate(`/${resourceName}/create`)}>
+          <Plus class="h-4 w-4" data-icon="inline-start" /> {t('common.create')}
+        </Button>
+      {/if}
+      {#if headerActions}
+        {@render headerActions()}
+      {/if}
+    {/snippet}
+  </PageHeader>
+
+  <AutoTable
+    {resourceName}
+    {selectable}
+    defaultCellRenderer={cellRenderer}
+    {rowActions}
+    {emptyState}
+    {expandedRowRender}
+  />
+</div>

package/dist/components/ListPage.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+import type { FieldDefinition } from '@svadmin/core';
+interface Props {
+    resourceName: string;
+    title?: string;
+    canCreate?: boolean;
+    /** Passthrough: enable row selection checkboxes */
+    selectable?: boolean;
+    /** Passthrough: custom header actions */
+    headerActions?: Snippet;
+    /** Passthrough: custom cell renderer per field */
+    cellRenderer?: Snippet<[{
+        field: FieldDefinition;
+        value: unknown;
+        record: Record<string, unknown>;
+    }]>;
+    /** Passthrough: custom row actions */
+    rowActions?: Snippet<[{
+        record: Record<string, unknown>;
+        id: string | number;
+    }]>;
+    /** Passthrough: custom empty state */
+    emptyState?: Snippet;
+    /** Passthrough: expandable row content */
+    expandedRowRender?: Snippet<[{
+        record: Record<string, unknown>;
+    }]>;
+    class?: string;
+}
+declare const ListPage: import("svelte").Component<Props, {}, "">;
+type ListPage = ReturnType<typeof ListPage>;
+export default ListPage;

package/dist/components/LiveIndicator.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+  import { Wifi, WifiOff, Loader2 } from '@lucide/svelte';
+  import { Badge } from './ui/badge/index.js';
+
+  let {
+    status = 'disconnected',
+    resource = '',
+    lastEvent = null,
+    showDetails = false,
+  } = $props<{
+    status: 'connecting' | 'connected' | 'disconnected';
+    resource?: string;
+    lastEvent?: { type: string; timestamp?: number } | null;
+    showDetails?: boolean;
+  }>();
+
+  const statusConfigs = {
+    connected: { variant: 'default' as const, dotClass: 'bg-success', label: 'Live', icon: Wifi },
+    connecting: { variant: 'secondary' as const, dotClass: 'bg-warning', label: 'Connecting...', icon: Loader2 as typeof Wifi },
+    disconnected: { variant: 'destructive' as const, dotClass: 'bg-destructive', label: 'Offline', icon: WifiOff },
+  } as const;
+  type StatusKey = 'connected' | 'connecting' | 'disconnected';
+  const cfg = $derived(statusConfigs[status as StatusKey]);
+
+  const timeSinceEvent = $derived(
+    lastEvent?.timestamp
+      ? Math.floor((Date.now() - lastEvent.timestamp) / 1000)
+      : null
+  );
+</script>
+
+{#key status}
+  <div transition:fade={{ duration: 200 }}>
+    <Badge variant={cfg.variant} class="gap-1.5 select-none" title={cfg.label}>
+      <span class="relative flex h-2 w-2">
+        <span class="{cfg.dotClass} rounded-full h-2 w-2"></span>
+        {#if status === 'connected'}
+          <span class="absolute inset-0 rounded-full {cfg.dotClass} opacity-40 animate-ping"></span>
+        {/if}
+      </span>
+      <span class="text-[0.6875rem] font-semibold uppercase tracking-wide">{cfg.label}</span>
+
+      {#if showDetails && resource}
+        <span class="text-[0.625rem] font-mono opacity-70">{resource}</span>
+      {/if}
+
+      {#if showDetails && lastEvent}
+        <span class="text-[0.625rem] opacity-70">
+          {lastEvent.type}
+          {#if timeSinceEvent !== null && timeSinceEvent < 60}
+            <span class="opacity-60">{timeSinceEvent}s ago</span>
+          {/if}
+        </span>
+      {/if}
+    </Badge>
+  </div>
+{/key}

package/dist/components/LiveIndicator.svelte.d.ts

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    status: 'connecting' | 'connected' | 'disconnected';
+    resource?: string;
+    lastEvent?: {
+        type: string;
+        timestamp?: number;
+    } | null;
+    showDetails?: boolean;
+};
+declare const LiveIndicator: import("svelte").Component<$$ComponentProps, {}, "">;
+type LiveIndicator = ReturnType<typeof LiveIndicator>;
+export default LiveIndicator;

package/dist/components/LoginPage.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+  import { useLogin, getAuthProvider } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import { navigate } from '@svadmin/core/router';
+  import { Button } from './ui/button/index.js';
+  import { Input } from './ui/input/index.js';
+  import { Label } from './ui/label/index.js';
+  import * as Card from './ui/card/index.js';
+  import * as Alert from './ui/alert/index.js';
+  import PasswordInput from './PasswordInput.svelte';
+  import { Separator } from './ui/separator/index.js';
+  import { LogIn, User, Loader2, AlertCircle } from '@lucide/svelte';
+
+  /**
+   * Social provider config for the login page.
+   * Each entry renders a button that calls `onClick()` when clicked.
+   *
+   * @example
+   * ```ts
+   * const socialProviders = [
+   *   { name: 'Google', icon: '🔵', onClick: () => googleAuth.login({}) },
+   *   { name: 'GitHub', icon: '🐙', onClick: () => githubAuth.login({}) },
+   * ];
+   * ```
+   */
+  interface SocialProvider {
+    /** Display name (e.g., 'Google') */
+    name: string;
+    /** Icon character, emoji, or SVG string */
+    icon?: string;
+    /** Handler to initiate social login */
+    onClick: () => void | Promise<void>;
+  }
+
+  let { title = 'Admin', onSuccess, socialProviders = [] } = $props<{
+    title?: string;
+    onSuccess?: () => void;
+    socialProviders?: SocialProvider[];
+  }>();
+
+  const login = useLogin();
+  const authProvider = getAuthProvider();
+
+  let identifier = $state('');
+  let password = $state('');
+  let error = $state('');
+
+  async function handleSubmit(e: Event) {
+    e.preventDefault();
+    error = '';
+
+    if (!identifier) { error = t('auth.usernameOrEmailRequired'); return; }
+    if (!password) { error = t('auth.passwordRequired'); return; }
+
+    const result = await login.mutate({ email: identifier, username: identifier, password });
+    if (result.success) {
+      onSuccess?.();
+    } else {
+      error = result.error?.message ?? t('common.loginFailed');
+    }
+  }
+</script>
+
+<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-100 via-blue-50/30 to-indigo-50/40 dark:from-slate-950 dark:via-slate-900 dark:to-indigo-950/20 p-4">
+  <div class="w-full max-w-[380px]">
+    <Card.Card>
+      <Card.CardHeader class="text-center pb-2">
+        <div class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 text-primary mx-auto mb-3">
+          <LogIn class="h-5 w-5" />
+        </div>
+        <Card.CardTitle class="text-xl">{t('auth.welcomeBack')}</Card.CardTitle>
+        <p class="text-sm text-muted-foreground">{t('auth.welcomeMessage')}</p>
+      </Card.CardHeader>
+      <Card.CardContent>
+        <form onsubmit={handleSubmit} class="space-y-4">
+          {#if error}
+            <Alert.Root variant="destructive">
+              <AlertCircle class="h-4 w-4" />
+              <Alert.Description>{error}</Alert.Description>
+            </Alert.Root>
+          {/if}
+
+          <div class="space-y-2">
+            <Label for="login-identifier">{t('auth.usernameOrEmail')}</Label>
+            <div class="relative">
+              <User class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none z-[1]" />
+              <Input
+                id="login-identifier"
+                type="text"
+                placeholder={t('auth.identifierPlaceholder')}
+                bind:value={identifier}
+                class="pl-9"
+                autocomplete="username"
+              />
+            </div>
+          </div>
+
+          <div>
+            <div class="flex items-center justify-between mb-2">
+              <Label for="login-password">{t('auth.password')}</Label>
+              {#if authProvider.forgotPassword}
+                <Button variant="link" class="text-xs h-auto p-0" onclick={() => navigate('/forgot-password')}>
+                  {t('auth.forgotPasswordLink')}
+                </Button>
+              {/if}
+            </div>
+            <PasswordInput
+              id="login-password"
+              label=""
+              bind:value={password}
+              autocomplete="current-password"
+            />
+          </div>
+
+          <Button type="submit" class="w-full" disabled={login.isLoading}>
+            {#if login.isLoading}
+              <Loader2 class="h-4 w-4 animate-spin mr-2" />
+            {/if}
+            {t('auth.loginButton')}
+          </Button>
+        </form>
+
+        {#if socialProviders.length > 0}
+          <div class="relative my-5">
+            <Separator />
+            <span class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-3 text-xs text-muted-foreground">
+              {t('auth.orContinueWith')}
+            </span>
+          </div>
+
+          <div class="grid gap-2" class:grid-cols-2={socialProviders.length >= 2}>
+            {#each socialProviders as provider (provider.name)}
+              <Button
+                variant="outline"
+                class="w-full"
+                onclick={provider.onClick}
+              >
+                {#if provider.icon}
+                  <span class="mr-2">{provider.icon}</span>
+                {/if}
+                {provider.name}
+              </Button>
+            {/each}
+          </div>
+        {/if}
+
+        {#if authProvider.register}
+          <div class="flex items-center justify-center gap-1 mt-5 pt-5 border-t">
+            <span class="text-sm text-muted-foreground">{t('auth.noAccount')}</span>
+            <Button variant="link" class="text-sm h-auto p-0 font-medium" onclick={() => navigate('/register')}>
+              {t('auth.register')}
+            </Button>
+          </div>
+        {/if}
+      </Card.CardContent>
+    </Card.Card>
+
+    <p class="text-xs text-muted-foreground mt-4 text-center">
+      Powered by {title}
+    </p>
+  </div>
+</div>
+

package/dist/components/LoginPage.svelte.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Social provider config for the login page.
+ * Each entry renders a button that calls `onClick()` when clicked.
+ *
+ * @example
+ * ```ts
+ * const socialProviders = [
+ *   { name: 'Google', icon: '🔵', onClick: () => googleAuth.login({}) },
+ *   { name: 'GitHub', icon: '🐙', onClick: () => githubAuth.login({}) },
+ * ];
+ * ```
+ */
+interface SocialProvider {
+    /** Display name (e.g., 'Google') */
+    name: string;
+    /** Icon character, emoji, or SVG string */
+    icon?: string;
+    /** Handler to initiate social login */
+    onClick: () => void | Promise<void>;
+}
+type $$ComponentProps = {
+    title?: string;
+    onSuccess?: () => void;
+    socialProviders?: SocialProvider[];
+};
+declare const LoginPage: import("svelte").Component<$$ComponentProps, {}, "">;
+type LoginPage = ReturnType<typeof LoginPage>;
+export default LoginPage;

package/dist/components/MarkdownRenderer.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+  import * as markedPkg from "marked";
+  import * as markedHighlightPkg from "marked-highlight";
+  import * as hljsPkg from "highlight.js";
+  import * as DOMPurifyPkg from "isomorphic-dompurify";
+  import { Check, Copy } from '@lucide/svelte';
+  import { Button } from "./ui/button/index.js";
+
+  const Marked = markedPkg.Marked;
+  const markedHighlight = markedHighlightPkg.markedHighlight;
+  const hljsModule = hljsPkg.default || hljsPkg;
+  const DOMPurify = 'default' in DOMPurifyPkg ? DOMPurifyPkg.default : DOMPurifyPkg;
+
+  // Only safely import css if hljs exists
+  if (hljsModule && Object.keys(hljsModule).length > 0) {
+    // @ts-ignore
+    import("highlight.js/styles/github-dark.css").catch(() => {});
+  }
+
+  interface Props {
+    /** The raw markdown string to render */
+    content: string;
+    /** Whether to enable streaming/typing effect styling */
+    streaming?: boolean;
+    /** Custom class for the container */
+    class?: string;
+  }
+
+  let { content, streaming = false, class: className = "" }: Props = $props();
+
+  const hasMarkdownDeps = !!(Marked && Object.keys(DOMPurify || {}).length > 0);
+
+  // Configure marked with syntax highlighting if available
+  const markedObj = hasMarkdownDeps ? new Marked(
+    markedHighlight({
+      langPrefix: "hljs language-",
+      highlight(code: string, lang: string) {
+        const language = hljsModule.getLanguage && hljsModule.getLanguage(lang) ? lang : "plaintext";
+        return hljsModule.highlight ? hljsModule.highlight(code, { language }).value : code;
+      },
+    }),
+  ) : null;
+
+  // Render HTML safely
+  const html = $derived(
+    hasMarkdownDeps
+      ? DOMPurify.sanitize(markedObj!.parse(content || "") as string)
+      : `<div style="white-space: pre-wrap">${String(content || "").replace(/</g, "&lt;").replace(/>/g, "&gt;")}</div>`
+  );
+
+  // Handle copy code blocks
+  let copiedBlock = $state<string | null>(null);
+
+  function handleCopy(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    const button = target.closest(".copy-btn");
+    if (!button) return;
+
+    const pre = button.closest(".code-block-wrapper")?.querySelector("pre");
+    if (!pre) return;
+
+    const code = pre.textContent || "";
+    navigator.clipboard.writeText(code);
+
+    const id = Math.random().toString(36);
+    copiedBlock = id;
+    button.setAttribute("data-copied-id", id);
+
+    setTimeout(() => {
+      if (copiedBlock === id) copiedBlock = null;
+    }, 2000);
+  }
+
+  // Inject copy buttons into the HTML after rendering
+  // We do this via action instead of raw string manipulation for safety
+  function enhanceCodeBlocks(node: HTMLElement, _: string) {
+    return {
+      update(newHtml: string) {
+        // Find all pre > code blocks that don't have wrappers yet
+        const pres = node.querySelectorAll("pre:not(.enhanced)");
+        pres.forEach((pre) => {
+          pre.classList.add("enhanced");
+          const wrapper = document.createElement("div");
+          wrapper.className =
+            "code-block-wrapper group relative my-4 rounded-md bg-foreground/95";
+
+          const header = document.createElement("div");
+          header.className =
+            "flex items-center justify-between px-4 py-2 text-xs text-zinc-400 border-b border-zinc-800";
+
+          const lang =
+            Array.from(pre.querySelector("code")?.classList || [])
+              .find((c) => c.startsWith("language-"))
+              ?.replace("language-", "") || "Code";
+          header.innerHTML = `
+            <span>${lang}</span>
+            <button class="copy-btn hover:text-white transition-colors flex items-center gap-1">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
+            </button>
+          `;
+
+          pre.replaceWith(wrapper);
+          wrapper.appendChild(header);
+
+          const scrollContainer = document.createElement("div");
+          scrollContainer.className = "overflow-x-auto p-4";
+          scrollContainer.appendChild(pre);
+          wrapper.appendChild(scrollContainer);
+        });
+
+        // Add event listener for copy buttons
+        node.addEventListener("click", handleCopy);
+      },
+      destroy() {
+        node.removeEventListener("click", handleCopy);
+      },
+    };
+  }
+</script>
+
+<div 
+  class="prose prose-sm dark:prose-invert max-w-none wrap-break-word {className}"
+  class:streaming={streaming}
+  use:enhanceCodeBlocks={html}
+>
+  {@html html}
+</div>