@svadmin/ui 0.0.1

package/src/components/Header.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { Identity } from '@svadmin/core';
+  import { toggleTheme, getResolvedTheme } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import { Button } from './ui/button/index.js';
+  import { Sun, Moon, Bell, Search } from 'lucide-svelte';
+
+  interface Props {
+    identity?: Identity | null;
+    title?: string;
+    showSearch?: boolean;
+    actions?: Snippet;
+    class?: string;
+  }
+
+  let {
+    identity,
+    title = '',
+    showSearch = false,
+    actions,
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<header class="sticky top-0 z-20 flex h-14 items-center gap-4 border-b border-border bg-background/95 px-6 backdrop-blur supports-[backdrop-filter]:bg-background/60 {className}">
+  {#if title}
+    <h2 class="text-lg font-semibold text-foreground">{title}</h2>
+  {/if}
+
+  <div class="flex-1"></div>
+
+  {#if showSearch}
+    <div class="relative hidden md:block">
+      <Search class="absolute left-2.5 top-2 h-4 w-4 text-muted-foreground" />
+      <input
+        type="search"
+        placeholder={t('common.search')}
+        class="h-8 w-64 rounded-lg border border-input bg-background pl-8 pr-3 text-sm outline-none focus:border-ring focus:ring-1 focus:ring-ring"
+      />
+    </div>
+  {/if}
+
+  {#if actions}
+    {@render actions()}
+  {/if}
+
+  <!-- Theme toggle -->
+  <Button variant="ghost" size="icon-sm" onclick={toggleTheme} title={t('common.toggleTheme')}>
+    {#if getResolvedTheme() === 'dark'}
+      <Sun class="h-4 w-4" />
+    {:else}
+      <Moon class="h-4 w-4" />
+    {/if}
+  </Button>
+
+  <!-- User info -->
+  {#if identity}
+    <div class="flex items-center gap-2">
+      <div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-sm font-medium text-primary">
+        {identity.name?.charAt(0).toUpperCase() ?? 'U'}
+      </div>
+      <span class="hidden text-sm font-medium text-foreground md:inline">{identity.name}</span>
+    </div>
+  {/if}
+</header>

package/src/components/Layout.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { onMount } from 'svelte';
+  import Sidebar from './Sidebar.svelte';
+  import Toast from './Toast.svelte';
+  import Breadcrumbs from './Breadcrumbs.svelte';
+  import { getAuthProvider } from '@svadmin/core';
+  import type { Identity } from '@svadmin/core';
+  import { navigate } from '@svadmin/core/router';
+  import { Loader2 } from 'lucide-svelte';
+
+  let { children, title = 'Admin' }: { children: Snippet; title?: string } = $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);
+
+  onMount(async () => {
+    if (!auth) {
+      loading = false;
+      return;
+    }
+    const { authenticated, redirectTo } = await auth.check();
+    if (!authenticated) {
+      navigate(redirectTo ?? '/login');
+      return;
+    }
+    identity = await auth.getIdentity();
+    loading = false;
+  });
+
+  async function handleLogout() {
+    if (!auth) return;
+    const result = await auth.logout();
+    if (result.success) {
+      navigate(result.redirectTo ?? '/login');
+    }
+  }
+
+  let collapsed = $state(false);
+</script>
+
+{#if loading}
+  <div class="flex h-screen items-center justify-center">
+    <Loader2 class="h-8 w-8 animate-spin text-primary" />
+  </div>
+{:else}
+  <div class="flex h-screen">
+    <Sidebar {collapsed} {identity} {title} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
+    <main
+      class="flex-1 overflow-y-auto p-6 transition-all duration-300"
+      class:ml-64={!collapsed}
+      class:ml-16={collapsed}
+    >
+      <Breadcrumbs />
+      {@render children()}
+    </main>
+  </div>
+  <Toast />
+{/if}

package/src/components/PageHeader.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Breadcrumbs from './Breadcrumbs.svelte';
+
+  interface Props {
+    title: string;
+    description?: string;
+    actions?: Snippet;
+    showBreadcrumbs?: boolean;
+    class?: string;
+  }
+
+  let {
+    title,
+    description,
+    actions,
+    showBreadcrumbs = true,
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div class="space-y-4 {className}">
+  {#if showBreadcrumbs}
+    <Breadcrumbs />
+  {/if}
+  <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+    <div>
+      <h1 class="text-2xl font-bold tracking-tight text-foreground">{title}</h1>
+      {#if description}
+        <p class="text-sm text-muted-foreground">{description}</p>
+      {/if}
+    </div>
+    {#if actions}
+      <div class="flex items-center gap-2">
+        {@render actions()}
+      </div>
+    {/if}
+  </div>
+</div>

package/src/components/ShowPage.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { useShow, getResource } from '@svadmin/core';
+  import type { FieldDefinition } from '@svadmin/core';
+  import { navigate } from '@svadmin/core/router';
+  import { t, getLocale } from '@svadmin/core/i18n';
+  import { Button } from './ui/button/index.js';
+  import * as Card from './ui/card/index.js';
+  import { ArrowLeft, Pencil, Loader2 } from 'lucide-svelte';
+
+  let { resourceName, id } = $props<{ resourceName: string; id: string | number }>();
+
+  const resource = getResource(resourceName);
+  const showFields = resource.fields.filter(f => f.showInShow !== false);
+
+  const query = useShow({ resource: resourceName, id });
+
+  function formatValue(field: FieldDefinition, value: unknown): string {
+    if (value == null) return '—';
+    if (field.type === 'boolean') return value ? t('common.yes') : t('common.no');
+    if (field.type === 'date') return new Date(value as string).toLocaleDateString(getLocale());
+    if (field.type === 'json') return JSON.stringify(value, null, 2);
+    if (field.type === 'tags' && Array.isArray(value)) return (value as string[]).join(', ');
+    if (field.type === 'select' && field.options) {
+      const opt = field.options.find(o => o.value === value);
+      return opt?.label ?? String(value);
+    }
+    return String(value);
+  }
+</script>
+
+<div class="space-y-6">
+  <div class="flex items-center justify-between">
+    <div class="flex items-center gap-4">
+      <Button variant="ghost" size="icon" onclick={() => navigate(`/${resourceName}`)}>
+        <ArrowLeft class="h-5 w-5" />
+      </Button>
+      <h1 class="text-2xl font-bold text-foreground">{resource.label} {t('common.detail')}</h1>
+    </div>
+    {#if resource.canEdit !== false}
+      <Button onclick={() => navigate(`/${resourceName}/edit/${id}`)}>
+        <Pencil class="h-4 w-4" data-icon="inline-start" /> {t('common.edit')}
+      </Button>
+    {/if}
+  </div>
+
+  {#if $query.isLoading}
+    <div class="flex h-64 items-center justify-center">
+      <Loader2 class="h-6 w-6 animate-spin text-primary" />
+    </div>
+  {:else if $query.data}
+    <Card.Root>
+      <Card.Content class="divide-y divide-border p-0">
+        {#each showFields as field}
+          {@const value = ($query.data as Record<string, unknown>)[field.key]}
+          <div class="flex px-6 py-4">
+            <div class="w-1/3 text-sm font-medium text-muted-foreground">{field.label}</div>
+            <div class="w-2/3 text-sm text-foreground">
+              {#if field.type === 'image' && value}
+                <img src={value as string} alt={field.label} class="h-20 w-20 rounded-lg object-cover" />
+              {:else if field.type === 'json' && value}
+                <pre class="rounded-lg bg-muted p-3 text-xs overflow-auto max-h-40">{formatValue(field, value)}</pre>
+              {:else}
+                {formatValue(field, value)}
+              {/if}
+            </div>
+          </div>
+        {/each}
+      </Card.Content>
+    </Card.Root>
+  {/if}
+</div>

package/src/components/Sidebar.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+  import { getResources } from '@svadmin/core';
+  import type { Identity } from '@svadmin/core';
+  import { currentPath, navigate } from '@svadmin/core/router';
+  import { t } from '@svadmin/core/i18n';
+  import { toggleTheme, getResolvedTheme } from '@svadmin/core';
+  import { Button } from './ui/button/index.js';
+  import * as Tooltip from './ui/tooltip/index.js';
+  import { Separator } from './ui/separator/index.js';
+  import {
+    LayoutDashboard, FileText, Users, Settings, Home,
+    ChevronLeft, ChevronRight, LogOut, Sun, Moon
+  } from 'lucide-svelte';
+
+  let { collapsed, identity, title, onToggle, onLogout } = $props<{
+    collapsed: boolean;
+    identity: Identity | null;
+    title: string;
+    onToggle: () => void;
+    onLogout: () => void;
+  }>();
+
+  const resources = getResources();
+
+  const iconMap: Record<string, typeof LayoutDashboard> = {
+    dashboard: LayoutDashboard,
+    posts: FileText,
+    users: Users,
+    settings: Settings,
+    home: Home,
+  };
+
+  interface NavItem {
+    path: string;
+    label: string;
+    Icon: typeof LayoutDashboard;
+  }
+
+  const navItems: NavItem[] = [
+    { path: '/', label: t('common.home'), Icon: LayoutDashboard },
+    ...resources.map(r => ({
+      path: `/${r.name}`,
+      label: r.label,
+      Icon: iconMap[r.name] ?? Settings,
+    })),
+  ];
+
+  // Track current hash for active state
+  let path = $state(currentPath());
+  $effect(() => {
+    function onHash() { path = currentPath(); }
+    window.addEventListener('hashchange', onHash);
+    return () => window.removeEventListener('hashchange', onHash);
+  });
+
+  function isActive(itemPath: string): boolean {
+    if (itemPath === '/') return path === '/';
+    return path.startsWith(itemPath);
+  }
+</script>
+
+<aside
+  class="fixed inset-y-0 left-0 z-30 flex flex-col bg-sidebar border-r border-sidebar-border transition-all duration-300"
+  class:w-64={!collapsed}
+  class:w-16={collapsed}
+>
+  <!-- Logo -->
+  <div class="flex h-16 items-center justify-between border-b border-sidebar-border px-4">
+    {#if !collapsed}
+      <span class="text-lg font-bold text-sidebar-primary">{title}</span>
+    {:else}
+      <span class="text-lg font-bold text-sidebar-primary">{title.charAt(0)}</span>
+    {/if}
+    <Button variant="ghost" size="icon-sm" onclick={onToggle}>
+      {#if collapsed}
+        <ChevronRight class="h-4 w-4" />
+      {:else}
+        <ChevronLeft class="h-4 w-4" />
+      {/if}
+    </Button>
+  </div>
+
+  <!-- Nav -->
+  <nav class="flex-1 overflow-y-auto py-4 px-2 space-y-1">
+    {#each navItems as item}
+      {@const active = isActive(item.path)}
+      {#if collapsed}
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <a
+                {...props}
+                href={`#${item.path}`}
+                class="flex items-center justify-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors"
+                class:bg-sidebar-accent={active}
+                class:text-sidebar-accent-foreground={active}
+                class:text-sidebar-foreground={!active}
+                class:hover:bg-sidebar-accent={!active}
+              >
+                <item.Icon class="h-5 w-5 flex-shrink-0" />
+              </a>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content side="right">
+            {item.label}
+          </Tooltip.Content>
+        </Tooltip.Root>
+      {:else}
+        <a
+          href={`#${item.path}`}
+          class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors"
+          class:bg-sidebar-accent={active}
+          class:text-sidebar-accent-foreground={active}
+          class:text-sidebar-foreground={!active}
+          class:hover:bg-sidebar-accent={!active}
+        >
+          <item.Icon class="h-5 w-5 flex-shrink-0" />
+          <span>{item.label}</span>
+        </a>
+      {/if}
+    {/each}
+  </nav>
+
+  <!-- Footer -->
+  <Separator class="bg-sidebar-border" />
+  <div class="p-3 space-y-1">
+    {#if !collapsed && identity}
+      <div class="flex items-center gap-3 rounded-lg px-2 py-2">
+        <div class="flex h-8 w-8 items-center justify-center rounded-full bg-sidebar-accent text-sm font-medium text-sidebar-accent-foreground">
+          {identity.name?.charAt(0).toUpperCase() ?? 'U'}
+        </div>
+        <div class="flex-1 min-w-0">
+          <p class="truncate text-sm font-medium text-sidebar-foreground">{identity.name}</p>
+        </div>
+        <Button variant="ghost" size="icon-sm" onclick={toggleTheme} class="text-sidebar-foreground" title={t('common.toggleTheme')}>
+          {#if getResolvedTheme() === 'dark'}
+            <Sun class="h-4 w-4" />
+          {:else}
+            <Moon class="h-4 w-4" />
+          {/if}
+        </Button>
+        <Button variant="ghost" size="icon-sm" onclick={onLogout} class="text-sidebar-foreground hover:text-destructive" title={t('common.logout')}>
+          <LogOut class="h-4 w-4" />
+        </Button>
+      </div>
+    {:else if collapsed}
+      <Button variant="ghost" size="icon" onclick={toggleTheme} class="w-full text-sidebar-foreground" title={t('common.toggleTheme')}>
+        {#if getResolvedTheme() === 'dark'}
+          <Sun class="h-5 w-5" />
+        {:else}
+          <Moon class="h-5 w-5" />
+        {/if}
+      </Button>
+      <Button variant="ghost" size="icon" onclick={onLogout} class="w-full text-sidebar-foreground hover:text-destructive" title={t('common.logout')}>
+        <LogOut class="h-5 w-5" />
+      </Button>
+    {:else}
+      <div class="flex gap-1">
+        <Button variant="ghost" size="icon" onclick={toggleTheme} class="flex-1 text-sidebar-foreground" title={t('common.toggleTheme')}>
+          {#if getResolvedTheme() === 'dark'}
+            <Sun class="h-5 w-5" />
+          {:else}
+            <Moon class="h-5 w-5" />
+          {/if}
+        </Button>
+      </div>
+    {/if}
+  </div>
+</aside>

package/src/components/StatsCard.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { Loader2 } from 'lucide-svelte';
+
+  interface Props {
+    label: string;
+    value: string | number;
+    icon?: typeof Loader2;
+    trend?: { value: number; label?: string };
+    loading?: boolean;
+    class?: string;
+  }
+
+  let {
+    label,
+    value,
+    icon: Icon,
+    trend,
+    loading = false,
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div class="flex items-center gap-4 rounded-xl border border-border bg-card p-5 shadow-sm {className}">
+  {#if Icon}
+    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 text-primary">
+      <Icon class="h-6 w-6" />
+    </div>
+  {/if}
+  <div class="flex-1 min-w-0">
+    <p class="text-sm text-muted-foreground">{label}</p>
+    {#if loading}
+      <Loader2 class="mt-1 h-5 w-5 animate-spin text-muted-foreground" />
+    {:else}
+      <div class="flex items-baseline gap-2">
+        <p class="text-2xl font-bold text-foreground">{value}</p>
+        {#if trend}
+          <span
+            class="text-xs font-medium {trend.value >= 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'}"
+          >
+            {trend.value >= 0 ? '↑' : '↓'}{Math.abs(trend.value)}%
+            {#if trend.label}
+              <span class="text-muted-foreground">{trend.label}</span>
+            {/if}
+          </span>
+        {/if}
+      </div>
+    {/if}
+  </div>
+</div>

package/src/components/Toast.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { getToasts, removeToast } from '@svadmin/core/toast';
+  import { Button } from './ui/button/index.js';
+  import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-svelte';
+
+  const iconMap = {
+    success: CheckCircle,
+    error: AlertCircle,
+    info: Info,
+    warning: AlertTriangle,
+  };
+  const colorMap = {
+    success: 'bg-green-50 border-green-200 text-green-800',
+    error: 'bg-red-50 border-red-200 text-red-800',
+    info: 'bg-blue-50 border-blue-200 text-blue-800',
+    warning: 'bg-amber-50 border-amber-200 text-amber-800',
+  };
+
+  const toasts = $derived(getToasts());
+</script>
+
+{#if toasts.length > 0}
+  <div class="fixed top-4 right-4 z-50 flex flex-col gap-2 max-w-sm">
+    {#each toasts as t (t.id)}
+      {@const Icon = iconMap[t.type]}
+      <div
+        class="flex items-start gap-3 rounded-lg border px-4 py-3 shadow-lg animate-slide-in {colorMap[t.type]}"
+        role="alert"
+      >
+        <Icon class="h-5 w-5 flex-shrink-0 mt-0.5" />
+        <p class="flex-1 text-sm font-medium">{t.message}</p>
+        <Button variant="ghost" size="icon-xs" onclick={() => removeToast(t.id)} class="flex-shrink-0 -mr-2 -mt-1">
+          <X class="h-4 w-4" />
+        </Button>
+      </div>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  @keyframes slide-in {
+    from { transform: translateX(100%); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
+  }
+  .animate-slide-in {
+    animation: slide-in 0.2s ease-out;
+  }
+</style>

package/src/components/ui/alert/alert-description.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: Props = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-description"
+	class={cn("col-start-2 text-sm [&_p]:leading-relaxed text-muted-foreground", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/components/ui/alert/alert-title.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type Props = WithElementRef<HTMLAttributes<HTMLHeadingElement>>;
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: Props = $props();
+</script>
+
+<h5
+	bind:this={ref}
+	data-slot="alert-title"
+	class={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</h5>

package/src/components/ui/alert/alert.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const alertVariants = tv({
+		base: "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+		variants: {
+			variant: {
+				default: "bg-card text-foreground",
+				destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+				warning: "border-amber-500/50 text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/20 [&>svg]:text-current",
+				success: "border-emerald-500/50 text-emerald-700 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/20 [&>svg]:text-current",
+			},
+		},
+		defaultVariants: { variant: "default" },
+	});
+
+	export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+</script>
+
+<script lang="ts">
+	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: AlertVariant;
+	};
+
+	let {
+		ref = $bindable(null),
+		variant = "default",
+		class: className,
+		children,
+		...restProps
+	}: Props = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert"
+	role="alert"
+	class={cn(alertVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/components/ui/alert/index.ts

@@ -0,0 +1,14 @@
+import Alert, { type AlertVariant, alertVariants } from "./alert.svelte";
+import AlertTitle from "./alert-title.svelte";
+import AlertDescription from "./alert-description.svelte";
+
+export {
+	Alert,
+	AlertTitle,
+	AlertDescription,
+	Alert as Root,
+	AlertTitle as Title,
+	AlertDescription as Description,
+	alertVariants,
+	type AlertVariant,
+};

package/src/components/ui/avatar/avatar.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLImgAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const avatarVariants = tv({
+		base: "relative flex shrink-0 overflow-hidden rounded-full",
+		variants: {
+			size: {
+				default: "size-10",
+				sm: "size-8",
+				lg: "size-12",
+				xl: "size-16",
+			},
+		},
+		defaultVariants: { size: "default" },
+	});
+
+	export type AvatarSize = VariantProps<typeof avatarVariants>["size"];
+
+	type Props = WithElementRef<HTMLImgAttributes> & {
+		size?: AvatarSize;
+		fallback?: string;
+	};
+
+	let {
+		ref = $bindable(null),
+		src,
+		alt = "",
+		size = "default",
+		fallback,
+		class: className,
+		...restProps
+	}: Props = $props();
+
+	let imgError = $state(false);
+</script>
+
+{#if src && !imgError}
+	<span class={cn(avatarVariants({ size }), className)}>
+		<img
+			bind:this={ref}
+			data-slot="avatar"
+			{src}
+			{alt}
+			class="aspect-square h-full w-full object-cover"
+			onerror={() => { imgError = true; }}
+			{...restProps}
+		/>
+	</span>
+{:else}
+	<span
+		data-slot="avatar-fallback"
+		class={cn(
+			avatarVariants({ size }),
+			"flex items-center justify-center bg-muted text-muted-foreground font-medium text-sm",
+			className
+		)}
+	>
+		{fallback ?? alt?.charAt(0).toUpperCase() ?? "?"}
+	</span>
+{/if}

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

@@ -0,0 +1,2 @@
+import Root from "./avatar.svelte";
+export { Root, Root as Avatar };