create-mantiq 0.7.0 → 0.7.2

package/stubs/tailwind-only/react/src/pages/account/security.tsx.stub

@@ -0,0 +1,91 @@
+import { useState } from 'react'
+import { AccountLayout } from './layout.tsx'
+
+interface SecurityProps {
+  appName?: string
+  currentUser?: { id: number; name: string; email: string } | null
+  navigate: (href: string) => void
+  [key: string]: any
+}
+
+export default function Security({ appName, currentUser, navigate }: SecurityProps) {
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [saved, setSaved] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSave = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    if (newPassword.length < 8) { setError('Password must be at least 8 characters.'); return }
+    if (newPassword !== confirmPassword) { setError('Passwords do not match.'); return }
+    setSaving(true)
+    await new Promise(r => setTimeout(r, 500))
+    setSaving(false)
+    setSaved(true)
+    setCurrentPassword('')
+    setNewPassword('')
+    setConfirmPassword('')
+    setTimeout(() => setSaved(false), 3000)
+  }
+
+  return (
+    <AccountLayout appName={appName} currentUser={currentUser} navigate={navigate} activePath="/account/security">
+      <div className="space-y-8">
+        <div>
+          <h3 className="text-lg font-medium text-gray-900 dark:text-gray-50">Security</h3>
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            Manage your password and security settings.
+          </p>
+        </div>
+
+        {/* Change Password */}
+        <form onSubmit={handleSave} className="space-y-4">
+          <div className="space-y-2">
+            <label htmlFor="current" className="text-sm font-medium text-gray-900 dark:text-gray-50">Current password</label>
+            <input id="current" type="password" value={currentPassword} onChange={e => setCurrentPassword(e.target.value)} autoComplete="current-password" className="w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm outline-none ring-emerald-500 transition focus:border-emerald-500 focus:ring-2 dark:border-gray-700 dark:bg-gray-900" />
+          </div>
+          <div className="space-y-2">
+            <label htmlFor="new" className="text-sm font-medium text-gray-900 dark:text-gray-50">New password</label>
+            <input id="new" type="password" value={newPassword} onChange={e => setNewPassword(e.target.value)} autoComplete="new-password" className="w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm outline-none ring-emerald-500 transition focus:border-emerald-500 focus:ring-2 dark:border-gray-700 dark:bg-gray-900" />
+          </div>
+          <div className="space-y-2">
+            <label htmlFor="confirm" className="text-sm font-medium text-gray-900 dark:text-gray-50">Confirm password</label>
+            <input id="confirm" type="password" value={confirmPassword} onChange={e => setConfirmPassword(e.target.value)} autoComplete="new-password" className="w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm outline-none ring-emerald-500 transition focus:border-emerald-500 focus:ring-2 dark:border-gray-700 dark:bg-gray-900" />
+          </div>
+          {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+          <div className="flex items-center gap-3">
+            <button type="submit" disabled={saving} className="rounded-md bg-emerald-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-emerald-700 disabled:opacity-50">
+              {saving ? 'Saving...' : 'Update password'}
+            </button>
+            {saved && <span className="text-sm text-gray-500 dark:text-gray-400">Password updated.</span>}
+          </div>
+        </form>
+
+        {/* 2FA */}
+        <div className="space-y-3">
+          <div>
+            <h4 className="text-sm font-medium text-gray-900 dark:text-gray-50">Two-factor authentication</h4>
+            <p className="text-sm text-gray-500 dark:text-gray-400">Add an additional layer of security to your account.</p>
+          </div>
+          <div className="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-950">
+            <h5 className="text-sm font-medium text-gray-900 dark:text-gray-50">Authenticator app</h5>
+            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">Use an authenticator app to generate one-time codes.</p>
+            <button type="button" disabled className="mt-3 rounded-md border border-gray-200 px-3 py-1.5 text-sm font-medium text-gray-500 opacity-50 dark:border-gray-700 dark:text-gray-400">Enable 2FA</button>
+          </div>
+        </div>
+
+        {/* Delete Account */}
+        <div className="space-y-3">
+          <div>
+            <h4 className="text-sm font-medium text-gray-900 dark:text-gray-50">Delete account</h4>
+            <p className="text-sm text-gray-500 dark:text-gray-400">Permanently remove your account and all associated data. This action cannot be undone.</p>
+          </div>
+          <button type="button" disabled className="rounded-md bg-red-600 px-3 py-1.5 text-sm font-medium text-white opacity-50">Delete account</button>
+        </div>
+      </div>
+    </AccountLayout>
+  )
+}

package/stubs/tailwind-only/react/src/style.css.stub

@@ -0,0 +1,14 @@
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
+@layer base {
+  body {
+    @apply bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-50;
+  }
+}
+
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-up { animation: fadeUp 0.4s ease-out; }

package/stubs/tailwind-only/svelte/src/lib/components/layout/app-sidebar.svelte.stub

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import NavGroup from './nav-group.svelte'
+  import NavUser from './nav-user.svelte'
+  import { sidebarData } from './sidebar-data'
+  import { PanelLeft } from 'lucide-svelte'
+
+  let {
+    user,
+    appName,
+    activePath,
+    navigate,
+    onLogout,
+    open = $bindable(true),
+    mobileOpen = $bindable(false),
+  }: {
+    user: { name: string; email: string; role?: string }
+    appName: string
+    activePath: string
+    navigate: (href: string) => void
+    onLogout: () => void
+    open: boolean
+    mobileOpen: boolean
+  } = $props()
+</script>
+
+<!-- Desktop sidebar -->
+<aside
+  class="fixed inset-y-0 left-0 z-20 hidden lg:flex flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 {open ? 'w-64' : 'w-16'}"
+>
+  <!-- Header -->
+  <div class="flex h-14 items-center gap-3 border-b border-sidebar-border px-4">
+    <button
+      type="button"
+      onclick={() => navigate('/dashboard')}
+      class="flex items-center gap-3 overflow-hidden"
+    >
+      <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground text-xs font-bold">
+        M
+      </div>
+      {#if open}
+        <div class="grid text-left text-sm leading-tight">
+          <span class="truncate font-semibold">{appName}</span>
+          <span class="truncate text-xs text-muted-foreground">Admin Panel</span>
+        </div>
+      {/if}
+    </button>
+  </div>
+
+  <!-- Navigation -->
+  <nav class="flex-1 overflow-y-auto px-3 py-4 space-y-6">
+    {#each sidebarData as group}
+      <NavGroup {group} {activePath} {navigate} collapsed={!open} />
+    {/each}
+  </nav>
+
+  <!-- Footer -->
+  <div class="border-t border-sidebar-border p-3">
+    <NavUser {user} {navigate} {onLogout} collapsed={!open} />
+  </div>
+
+  <!-- Rail toggle -->
+  <button
+    type="button"
+    onclick={() => open = !open}
+    class="absolute -right-3 top-20 flex h-6 w-6 items-center justify-center rounded-full border border-sidebar-border bg-sidebar text-sidebar-foreground hover:bg-sidebar-accent"
+    aria-label={open ? 'Collapse sidebar' : 'Expand sidebar'}
+  >
+    <PanelLeft class="h-3.5 w-3.5" />
+  </button>
+</aside>
+
+<!-- Mobile sidebar -->
+<aside
+  class="fixed inset-y-0 left-0 z-40 flex w-64 flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-transform duration-200 lg:hidden {mobileOpen ? 'translate-x-0' : '-translate-x-full'}"
+>
+  <!-- Header -->
+  <div class="flex h-14 items-center gap-3 border-b border-sidebar-border px-4">
+    <button
+      type="button"
+      onclick={() => navigate('/dashboard')}
+      class="flex items-center gap-3"
+    >
+      <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground text-xs font-bold">
+        M
+      </div>
+      <div class="grid text-left text-sm leading-tight">
+        <span class="truncate font-semibold">{appName}</span>
+        <span class="truncate text-xs text-muted-foreground">Admin Panel</span>
+      </div>
+    </button>
+  </div>
+
+  <!-- Navigation -->
+  <nav class="flex-1 overflow-y-auto px-3 py-4 space-y-6">
+    {#each sidebarData as group}
+      <NavGroup {group} {activePath} {navigate} collapsed={false} />
+    {/each}
+  </nav>
+
+  <!-- Footer -->
+  <div class="border-t border-sidebar-border p-3">
+    <NavUser {user} {navigate} {onLogout} collapsed={false} />
+  </div>
+</aside>

package/stubs/tailwind-only/svelte/src/lib/components/layout/authenticated-layout.svelte.stub

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { post } from '$lib/api'
+  import AppSidebar from './app-sidebar.svelte'
+  import type { Snippet } from 'svelte'
+
+  let {
+    children,
+    currentUser = null,
+    appName = 'Mantiq',
+    navigate,
+    activePath,
+  }: {
+    children: Snippet
+    currentUser?: { name: string; email: string; role?: string } | null
+    appName?: string
+    navigate: (href: string) => void
+    activePath: string
+  } = $props()
+
+  const user = $derived(currentUser ?? { name: 'User', email: 'user@example.com' })
+
+  async function handleLogout() {
+    await post('/logout', {})
+    navigate('/login')
+  }
+
+  let sidebarOpen = $state(true)
+  let mobileOpen = $state(false)
+</script>
+
+<div class="flex min-h-screen">
+  <AppSidebar
+    {user}
+    {appName}
+    {activePath}
+    {navigate}
+    onLogout={handleLogout}
+    bind:open={sidebarOpen}
+    bind:mobileOpen={mobileOpen}
+  />
+  <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+  {#if mobileOpen}
+    <div
+      class="fixed inset-0 z-30 bg-black/50 lg:hidden"
+      onclick={() => mobileOpen = false}
+    ></div>
+  {/if}
+  <div class="flex flex-1 flex-col {sidebarOpen ? 'lg:ml-64' : 'lg:ml-16'} transition-[margin] duration-200">
+    {@render children()}
+  </div>
+</div>

package/stubs/tailwind-only/svelte/src/lib/components/layout/header.svelte.stub

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte'
+  import { cn } from '$lib/utils'
+  import ThemeToggle from './theme-toggle.svelte'
+  import { Menu, Search } from 'lucide-svelte'
+  import type { Snippet } from 'svelte'
+
+  let {
+    fixed = false,
+    navigate,
+    children,
+    class: className,
+  }: {
+    fixed?: boolean
+    navigate?: (href: string) => void
+    children?: Snippet
+    class?: string
+  } = $props()
+
+  let offset = $state(0)
+
+  function onScroll() {
+    offset = document.body.scrollTop || document.documentElement.scrollTop
+  }
+
+  onMount(() => {
+    document.addEventListener('scroll', onScroll, { passive: true })
+  })
+
+  onDestroy(() => {
+    if (typeof window !== 'undefined') {
+      document.removeEventListener('scroll', onScroll)
+    }
+  })
+</script>
+
+<header
+  class={cn(
+    'flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear',
+    fixed && 'sticky top-0 z-10 bg-background',
+    offset > 10 && fixed ? 'border-b' : '',
+    className,
+  )}
+>
+  <div class="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
+    <!-- Mobile menu trigger (dispatches custom event) -->
+    <button
+      type="button"
+      class="inline-flex h-8 w-8 items-center justify-center rounded-md text-sm font-medium hover:bg-accent lg:hidden"
+      onclick={() => {
+        const evt = new CustomEvent('toggle-mobile-sidebar', { bubbles: true })
+        document.dispatchEvent(evt)
+      }}
+      aria-label="Toggle sidebar"
+    >
+      <Menu class="h-4 w-4" />
+    </button>
+    <div class="mx-1 hidden h-4 w-px bg-border md:block"></div>
+    {#if children}
+      {@render children()}
+    {/if}
+    <div class="ms-auto flex items-center gap-2">
+      <ThemeToggle />
+    </div>
+  </div>
+</header>

package/stubs/tailwind-only/svelte/src/lib/components/layout/main.svelte.stub

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { cn } from '$lib/utils'
+  import type { Snippet } from 'svelte'
+
+  let {
+    fixed = false,
+    class: className,
+    children,
+  }: {
+    fixed?: boolean
+    class?: string
+    children: Snippet
+  } = $props()
+</script>
+
+<main
+  class={cn(
+    'peer-[.header-fixed]/header:mt-16',
+    fixed && 'flex flex-grow flex-col overflow-hidden',
+    className,
+  )}
+>
+  <div class="px-4 py-6 lg:px-6">
+    {@render children()}
+  </div>
+</main>

package/stubs/tailwind-only/svelte/src/lib/components/layout/nav-group.svelte.stub

@@ -0,0 +1,131 @@
+<script lang="ts">
+  import { ChevronRight, ExternalLink } from 'lucide-svelte'
+  import type { NavGroup as NavGroupData } from './sidebar-data'
+
+  let {
+    group,
+    activePath,
+    navigate,
+    collapsed = false,
+  }: {
+    group: NavGroupData
+    activePath: string
+    navigate: (href: string) => void
+    collapsed?: boolean
+  } = $props()
+
+  function isActive(itemUrl: string, active: string): boolean {
+    if (itemUrl === active) return true
+    const itemBase = itemUrl.split('?')[0]
+    const activeBase = active.split('?')[0]
+    return itemBase === activeBase
+  }
+
+  function isGroupActive(items: NavGroupData['items'][number]['items'], active: string): boolean {
+    if (!items) return false
+    return items.some((sub) => isActive(sub.url, active))
+  }
+
+  // Track which collapsible groups are open
+  let openGroups = $state<Set<string>>(new Set())
+
+  // Auto-open groups that have active children
+  $effect(() => {
+    for (const item of group.items) {
+      if (item.items && isGroupActive(item.items, activePath)) {
+        openGroups.add(item.title)
+        openGroups = new Set(openGroups)
+      }
+    }
+  })
+
+  function toggleGroup(title: string) {
+    if (openGroups.has(title)) {
+      openGroups.delete(title)
+    } else {
+      openGroups.add(title)
+    }
+    openGroups = new Set(openGroups)
+  }
+</script>
+
+<div>
+  {#if !collapsed}
+    <p class="mb-2 px-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">
+      {group.title}
+    </p>
+  {/if}
+  <ul class="space-y-1">
+    {#each group.items as item}
+      {#if item.items && item.items.length > 0}
+        <!-- Group with sub-items -->
+        <li>
+          <button
+            type="button"
+            onclick={() => toggleGroup(item.title)}
+            class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors hover:bg-sidebar-accent {isGroupActive(item.items, activePath) ? 'bg-sidebar-accent text-sidebar-accent-foreground' : 'text-sidebar-foreground'}"
+            title={collapsed ? item.title : undefined}
+          >
+            <item.icon class="h-4 w-4 shrink-0" />
+            {#if !collapsed}
+              <span class="flex-1 text-left">{item.title}</span>
+              <ChevronRight class="h-4 w-4 transition-transform duration-200 {openGroups.has(item.title) ? 'rotate-90' : ''}" />
+            {/if}
+          </button>
+          {#if !collapsed && openGroups.has(item.title)}
+            <ul class="ml-6 mt-1 space-y-1 border-l border-sidebar-border pl-3">
+              {#each item.items as sub}
+                <li>
+                  <button
+                    type="button"
+                    onclick={() => navigate(sub.url)}
+                    class="block w-full rounded-md px-3 py-1.5 text-left text-sm transition-colors hover:bg-sidebar-accent {isActive(sub.url, activePath) ? 'bg-sidebar-accent text-sidebar-accent-foreground font-medium' : 'text-muted-foreground'}"
+                  >
+                    {sub.title}
+                  </button>
+                </li>
+              {/each}
+            </ul>
+          {/if}
+        </li>
+      {:else if item.external}
+        <!-- External link -->
+        <li>
+          <a
+            href={item.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-sidebar-foreground transition-colors hover:bg-sidebar-accent"
+            title={collapsed ? item.title : undefined}
+          >
+            <item.icon class="h-4 w-4 shrink-0" />
+            {#if !collapsed}
+              <span class="flex-1">{item.title}</span>
+              <ExternalLink class="h-3 w-3 text-muted-foreground" />
+            {/if}
+          </a>
+        </li>
+      {:else}
+        <!-- Regular nav item -->
+        <li>
+          <button
+            type="button"
+            onclick={() => navigate(item.url)}
+            class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors hover:bg-sidebar-accent {isActive(item.url, activePath) ? 'bg-sidebar-accent text-sidebar-accent-foreground font-medium' : 'text-sidebar-foreground'}"
+            title={collapsed ? item.title : undefined}
+          >
+            <item.icon class="h-4 w-4 shrink-0" />
+            {#if !collapsed}
+              <span class="flex-1 text-left">{item.title}</span>
+              {#if item.badge}
+                <span class="ml-auto inline-flex items-center rounded bg-secondary px-1.5 py-0 text-[10px] font-medium text-secondary-foreground">
+                  {item.badge}
+                </span>
+              {/if}
+            {/if}
+          </button>
+        </li>
+      {/if}
+    {/each}
+  </ul>
+</div>

package/stubs/tailwind-only/svelte/src/lib/components/layout/nav-user.svelte.stub

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import {
+    ChevronsUpDown,
+    LogOut,
+    User,
+    Settings,
+  } from 'lucide-svelte'
+
+  let {
+    user,
+    navigate,
+    onLogout,
+    collapsed = false,
+  }: {
+    user: { name: string; email: string; role?: string }
+    navigate: (href: string) => void
+    onLogout: () => void
+    collapsed?: boolean
+  } = $props()
+
+  let menuOpen = $state(false)
+
+  function getInitials(name: string) {
+    return name
+      .split(' ')
+      .map((n) => n[0])
+      .join('')
+      .toUpperCase()
+      .slice(0, 2)
+  }
+
+  function handleClickOutside(e: MouseEvent) {
+    const target = e.target as HTMLElement
+    if (!target.closest('[data-nav-user-menu]')) {
+      menuOpen = false
+    }
+  }
+
+  $effect(() => {
+    if (menuOpen) {
+      document.addEventListener('click', handleClickOutside, true)
+      return () => document.removeEventListener('click', handleClickOutside, true)
+    }
+  })
+</script>
+
+<div class="relative" data-nav-user-menu>
+  <button
+    type="button"
+    onclick={() => menuOpen = !menuOpen}
+    class="flex w-full items-center gap-3 rounded-lg px-2 py-2 text-left text-sm hover:bg-sidebar-accent transition-colors"
+  >
+    <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted text-xs font-semibold">
+      {getInitials(user.name)}
+    </div>
+    {#if !collapsed}
+      <div class="grid flex-1 text-left text-sm leading-tight">
+        <span class="truncate font-semibold">{user.name}</span>
+        <span class="truncate text-xs text-muted-foreground">{user.email}</span>
+      </div>
+      <ChevronsUpDown class="ml-auto h-4 w-4 text-muted-foreground" />
+    {/if}
+  </button>
+
+  {#if menuOpen}
+    <div class="absolute bottom-full left-0 mb-1 w-56 rounded-lg border border-border bg-popover p-1 shadow-lg z-50">
+      <div class="flex items-center gap-2 px-2 py-1.5 text-sm">
+        <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted text-xs font-semibold">
+          {getInitials(user.name)}
+        </div>
+        <div class="grid flex-1 text-left text-sm leading-tight">
+          <span class="truncate font-semibold">{user.name}</span>
+          <span class="truncate text-xs text-muted-foreground">{user.email}</span>
+        </div>
+      </div>
+      <div class="my-1 h-px bg-border"></div>
+      <button
+        type="button"
+        onclick={() => { menuOpen = false; navigate('/account/profile') }}
+        class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-accent transition-colors"
+      >
+        <User class="h-4 w-4" />
+        Account
+      </button>
+      <button
+        type="button"
+        onclick={() => { menuOpen = false; navigate('/account/preferences') }}
+        class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-accent transition-colors"
+      >
+        <Settings class="h-4 w-4" />
+        Settings
+      </button>
+      <div class="my-1 h-px bg-border"></div>
+      <button
+        type="button"
+        onclick={() => { menuOpen = false; onLogout() }}
+        class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-destructive hover:bg-accent transition-colors"
+      >
+        <LogOut class="h-4 w-4" />
+        Sign out
+      </button>
+    </div>
+  {/if}
+</div>

package/stubs/tailwind-only/svelte/src/lib/components/layout/sidebar-data.ts.stub

@@ -0,0 +1,57 @@
+import {
+  Home,
+  Users,
+  Settings,
+  User,
+  Lock,
+  Palette,
+  BookOpen,
+  Github,
+  type Component,
+} from 'lucide-svelte'
+
+export interface NavItem {
+  title: string
+  url: string
+  icon: Component
+  badge?: string
+  external?: boolean
+  items?: NavItem[]
+}
+
+export interface NavGroup {
+  title: string
+  items: NavItem[]
+}
+
+export const sidebarData: NavGroup[] = [
+  {
+    title: 'General',
+    items: [
+      { title: 'Dashboard', url: '/dashboard', icon: Home },
+      { title: 'Users', url: '/users', icon: Users },
+    ],
+  },
+  {
+    title: 'Documentation',
+    items: [
+      { title: 'Docs', url: 'https://github.com/mantiqjs/mantiq#readme', icon: BookOpen, external: true },
+      { title: 'GitHub', url: 'https://github.com/mantiqjs/mantiq', icon: Github, external: true },
+    ],
+  },
+  {
+    title: 'Account',
+    items: [
+      {
+        title: 'Settings',
+        url: '/account/profile',
+        icon: Settings,
+        items: [
+          { title: 'Profile', url: '/account/profile', icon: User },
+          { title: 'Security', url: '/account/security', icon: Lock },
+          { title: 'Preferences', url: '/account/preferences', icon: Palette },
+        ],
+      },
+    ],
+  },
+]

package/stubs/tailwind-only/svelte/src/lib/components/layout/theme-toggle.svelte.stub

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { Sun, Moon } from 'lucide-svelte'
+
+  let isDark = $state(
+    typeof document !== 'undefined'
+      ? document.documentElement.classList.contains('dark')
+      : false
+  )
+
+  function toggleTheme() {
+    const dark = document.documentElement.classList.toggle('dark')
+    localStorage.setItem('theme', dark ? 'dark' : 'light')
+    isDark = dark
+  }
+</script>
+
+<button
+  type="button"
+  onclick={toggleTheme}
+  class="inline-flex h-8 w-8 items-center justify-center rounded-md text-sm font-medium hover:bg-accent transition-colors"
+  aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+>
+  {#if isDark}
+    <Sun class="h-4 w-4" />
+  {:else}
+    <Moon class="h-4 w-4" />
+  {/if}
+</button>