@svadmin/ui 0.29.0 → 0.29.2

package/src/components/ComboboxField.svelte

@@ -1,129 +0,0 @@
-<script lang="ts">
-  import { t } from '@svadmin/core/i18n';
-  import { useSelect } from '@svadmin/core';
-  import type { Filter } from '@svadmin/core';
-  import { Button } from './ui/button/index.js';
-  import TooltipButton from './TooltipButton.svelte';
-  import { Badge } from './ui/badge/index.js';
-  import { Command } from 'cmdk-sv';
-  import { Skeleton } from './ui/skeleton/index.js';
-  import { ChevronsUpDown, Check, X, Search } from '@lucide/svelte';
-
-  interface Props {
-    resource: string;
-    value?: string | number | null;
-    onchange?: (value: string | number | null) => void;
-    optionLabel?: string;
-    optionValue?: string;
-    placeholder?: string;
-    searchable?: boolean;
-    onSearch?: (value: string) => Filter[];
-    id?: string;
-    class?: string;
-    [key: string]: any;
-  }
-
-  let {
-    resource,
-    value = null,
-    onchange,
-    optionLabel = 'title',
-    optionValue = 'id',
-    placeholder = 'Select...',
-    searchable = true,
-    onSearch,
-    ...restProps
-  }: Props = $props();
-
-  const { options, query, onSearchChange } = useSelect({
-    get resource() { return resource; },
-    get optionLabel() { return optionLabel; },
-    get optionValue() { return optionValue; },
-    get onSearch() { return onSearch ?? (searchable ? (v: string) => v ? [{ field: optionLabel, operator: 'contains' as const, value: v }] : [] : undefined); },
-  });
-
-  let open = $state(false);
-  let searchInputValue = $state('');
-
-  const selectedLabel = $derived(
-    (options as { label: string; value: string | number }[])?.find(
-      (o: { label: string; value: string | number }) => o.value === value
-    )?.label ?? ''
-  );
-
-  function handleSelect(optValue: string | number) {
-    onchange?.(optValue === value ? null : optValue);
-    open = false;
-    searchInputValue = '';
-  }
-
-  function handleClear(e: Event) {
-    e.stopPropagation();
-    onchange?.(null);
-  }
-
-  function handleSearchInput(e: Event) {
-    const v = (e.currentTarget as HTMLInputElement).value;
-    searchInputValue = v;
-    onSearchChange(v);
-  }
-</script>
-
-<div class="relative">
-  <Button
-    variant="outline"
-    type="button"
-    class="w-full justify-between font-normal"
-    onclick={() => { open = !open; }}
-    {...restProps}
-  >
-    {#if selectedLabel}
-      <span class="truncate">{selectedLabel}</span>
-      <TooltipButton tooltip={t('common.clear')} size="icon-sm" class="h-5 w-5 ml-1" onclick={handleClear}>
-        <X class="h-3 w-3" />
-      </TooltipButton>
-    {:else}
-      <span class="text-muted-foreground">{placeholder}</span>
-    {/if}
-    <ChevronsUpDown class="ml-auto h-4 w-4 shrink-0 opacity-50" />
-  </Button>
-
-  {#if open}
-    <div class="absolute z-50 mt-1 w-full rounded-md border bg-popover shadow-lg">
-      <Command.Root class="flex flex-col overflow-hidden rounded-md bg-popover text-popover-foreground">
-        {#if searchable}
-          <div class="flex items-center border-b px-2">
-            <Search class="mr-1.5 h-3.5 w-3.5 shrink-0 opacity-50" />
-            <Command.Input
-              bind:value={searchInputValue}
-              oninput={handleSearchInput}
-              placeholder="Search..."
-              class="flex h-9 w-full bg-transparent py-2 text-sm outline-none placeholder:text-muted-foreground"
-            />
-          </div>
-        {/if}
-        <Command.List class="max-h-48 overflow-y-auto p-1">
-          <Command.Empty class="py-4 text-center text-xs text-muted-foreground">
-            No results.
-          </Command.Empty>
-          {#if query.isLoading}
-            {#each Array(3) as _}
-              <div class="px-2 py-1.5"><Skeleton class="h-5 w-full" /></div>
-            {/each}
-          {:else}
-            {#each (options as { label: string; value: string | number }[]) ?? [] as opt}
-              <Command.Item
-                value={opt.label}
-                onSelect={() => handleSelect(opt.value)}
-                class="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground"
-              >
-                <Check class="mr-2 h-3.5 w-3.5 {value === opt.value ? 'opacity-100' : 'opacity-0'}" />
-                {opt.label}
-              </Command.Item>
-            {/each}
-          {/if}
-        </Command.List>
-      </Command.Root>
-    </div>
-  {/if}
-</div>

package/src/components/CommandPalette.svelte

@@ -1,135 +0,0 @@
-<script lang="ts">
-  import { getResources, getAgentProvider, getChatProvider } from '@svadmin/core';
-  import { navigate } from '@svadmin/core/router';
-  import { t } from '@svadmin/core/i18n';
-  import { toggleTheme } from '@svadmin/core';
-  import { Command } from 'cmdk-sv';
-  import * as Dialog from './ui/dialog/index.js';
-  import { Search, LayoutDashboard, Plus, Sun, FileText, Bot, Sparkles } from '@lucide/svelte';
-
-  interface Props {
-    open?: boolean;
-    /** Callback fired when user selects "Ask AI" with a query string */
-    onAskAI?: (query: string) => void;
-  }
-
-  let { open = $bindable(false), onAskAI }: Props = $props();
-  let searchValue = $state('');
-
-  const resources = getResources();
-  const hasAI = $derived(!!(getAgentProvider() || getChatProvider()));
-
-  function close() {
-    open = false;
-    searchValue = '';
-  }
-
-  function act(fn: () => void) {
-    fn();
-    close();
-  }
-
-  function askAI() {
-    const query = searchValue.trim();
-    if (onAskAI && query) {
-      onAskAI(query);
-    }
-    close();
-  }
-
-  const itemClass = 'relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50';
-</script>
-
-<Dialog.Dialog bind:open>
-  <Dialog.DialogContent class="overflow-hidden p-0 sm:max-w-[560px]">
-    <Command.Root class="flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground [&_[data-cmdk-group-heading]]:text-muted-foreground [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:py-1.5 [&_[data-cmdk-group-heading]]:text-xs [&_[data-cmdk-group-heading]]:font-semibold [&_[data-cmdk-group-heading]]:uppercase [&_[data-cmdk-group-heading]]:tracking-wider">
-      <div class="flex items-center border-b px-3" data-cmdk-input-wrapper="">
-        <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
-        <Command.Input
-          bind:value={searchValue}
-          placeholder={hasAI ? (t('commandPalette.searchOrAsk') || 'Search or ask AI...') : t('common.search')}
-          class="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
-        />
-        <kbd class="ml-2 text-[10px] font-mono font-medium text-muted-foreground bg-muted px-1.5 py-0.5 rounded border border-border">ESC</kbd>
-      </div>
-      <Command.List class="max-h-[320px] overflow-y-auto overflow-x-hidden p-1">
-        <Command.Empty class="py-6 text-center text-sm text-muted-foreground">
-          {#if hasAI && searchValue.trim()}
-            <button
-              class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-primary/10 text-primary hover:bg-primary/20 transition-colors cursor-pointer text-sm font-medium"
-              onclick={askAI}
-            >
-              <Sparkles class="h-3.5 w-3.5" />
-              {t('commandPalette.askAI') || 'Ask AI'}: "{searchValue.trim()}"
-            </button>
-          {:else}
-            {t('common.noData')}
-          {/if}
-        </Command.Empty>
-
-        <!-- AI -->
-        {#if hasAI && searchValue.trim()}
-          <Command.Group heading="AI">
-            <Command.Item
-              value="ask-ai-{searchValue}"
-              onSelect={askAI}
-              class={itemClass}
-            >
-              <Sparkles class="h-4 w-4 text-primary" />
-              <span class="text-primary font-medium">{t('commandPalette.askAI') || 'Ask AI'}</span>
-              <span class="text-muted-foreground truncate ml-1">"{searchValue.trim()}"</span>
-            </Command.Item>
-          </Command.Group>
-          <Command.Separator class="mx-1 my-1 h-px bg-border" />
-        {/if}
-
-        <!-- Navigation -->
-        <Command.Group heading={t('common.home')}>
-          <Command.Item
-            value="home"
-            onSelect={() => act(() => navigate('/'))}
-            class={itemClass}
-          >
-            <LayoutDashboard class="h-4 w-4 text-muted-foreground" />
-            {t('common.home')}
-          </Command.Item>
-          {#each resources as r}
-            <Command.Item
-              value={r.name}
-              onSelect={() => act(() => navigate(`/${r.name}`))}
-              class={itemClass}
-            >
-              <FileText class="h-4 w-4 text-muted-foreground" />
-              {r.label}
-            </Command.Item>
-          {/each}
-        </Command.Group>
-
-        <Command.Separator class="mx-1 my-1 h-px bg-border" />
-
-        <!-- Actions -->
-        <Command.Group heading={t('common.actions')}>
-          {#each resources as r}
-            <Command.Item
-              value="create-{r.name}"
-              onSelect={() => act(() => navigate(`/${r.name}/create`))}
-              class={itemClass}
-            >
-              <Plus class="h-4 w-4 text-muted-foreground" />
-              {t('common.create')} {r.label}
-            </Command.Item>
-          {/each}
-          <Command.Item
-            value="toggle-theme"
-            onSelect={() => act(() => toggleTheme())}
-            class={itemClass}
-          >
-            <Sun class="h-4 w-4 text-muted-foreground" />
-            {t('common.toggleTheme')}
-          </Command.Item>
-        </Command.Group>
-      </Command.List>
-    </Command.Root>
-  </Dialog.DialogContent>
-</Dialog.Dialog>
-

package/src/components/ConfigErrorScreen.svelte

@@ -1,126 +0,0 @@
-<script lang="ts">
-  import { t } from '@svadmin/core/i18n';
-  import { AlertTriangle, Copy, CheckCircle } from '@lucide/svelte';
-  import { Button } from './ui/button/index.js';
-  import TooltipButton from './TooltipButton.svelte';
-  import * as Card from './ui/card/index.js';
-
-  let { title, missingVars = [], envTemplate = '' } = $props<{
-    title?: string;
-    missingVars?: { key: string; description?: string }[];
-    envTemplate?: string;
-  }>();
-
-  const displayTitle = $derived(title ?? t('config.missingEnvTitle'));
-
-  let copied = $state<Record<string, boolean>>({});
-  let copyTimers = $state<Record<string, ReturnType<typeof setTimeout>>>({});
-
-  function setCopied(key: string) {
-    copied = { ...copied, [key]: true };
-    // Clear previous timer for this key if any
-    if (copyTimers[key]) clearTimeout(copyTimers[key]);
-    const timer = setTimeout(() => {
-      copied = { ...copied, [key]: false };
-    }, 2000);
-    copyTimers = { ...copyTimers, [key]: timer };
-  }
-
-  // Cleanup all timers on destroy
-  $effect(() => {
-    return () => {
-      Object.values(copyTimers).forEach(clearTimeout);
-    };
-  });
-
-  async function copyToClipboard(text: string, key: string) {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(key);
-    } catch {
-      console.warn('[svadmin] clipboard API unavailable');
-    }
-  }
-
-  async function copyAll() {
-    const text = envTemplate || missingVars.map((v: { key: string }) => `${v.key}=`).join('\n');
-    await copyToClipboard(text, '__all__');
-  }
-</script>
-
-<div class="min-h-screen flex items-center justify-center bg-background p-4">
-  <div class="w-full max-w-[480px]">
-    <Card.Card>
-      <Card.CardHeader class="text-center pb-2">
-        <div class="inline-flex items-center justify-center w-12 h-12 rounded-lg bg-destructive/10 text-destructive mx-auto mb-3">
-          <AlertTriangle class="h-6 w-6" />
-        </div>
-        <Card.CardTitle class="text-xl">{displayTitle}</Card.CardTitle>
-        <p class="text-sm text-muted-foreground">
-          {t('config.missingEnvDescription')}
-        </p>
-      </Card.CardHeader>
-      <Card.CardContent class="space-y-4">
-        {#if missingVars.length > 0}
-          <div class="rounded-lg border overflow-hidden">
-            {#each missingVars as v, i (v.key)}
-              <div class="flex items-center justify-between px-3 py-2.5 gap-2 {i < missingVars.length - 1 ? 'border-b border-border/50' : ''}">
-                <div class="flex flex-col gap-0.5 min-w-0">
-                  <code class="text-[0.8125rem] font-semibold text-foreground font-mono">{v.key}</code>
-                  {#if v.description}
-                    <span class="text-[0.6875rem] text-muted-foreground">{v.description}</span>
-                  {/if}
-                </div>
-                <TooltipButton
-                  tooltip={t('common.copy')}
-                  variant="ghost"
-                  size="icon"
-                  class="h-7 w-7 shrink-0"
-                  onclick={() => copyToClipboard(`${v.key}=`, v.key)}
-                >
-                  {#if copied[v.key]}
-                    <CheckCircle class="h-3.5 w-3.5 text-green-500" />
-                  {:else}
-                    <Copy class="h-3.5 w-3.5" />
-                  {/if}
-                </TooltipButton>
-              </div>
-            {/each}
-          </div>
-        {/if}
-
-        {#if envTemplate}
-          <div class="rounded-lg border overflow-hidden">
-            <div class="flex items-center justify-between px-3 py-2 bg-muted/50 border-b border-border/50">
-              <span class="text-xs font-medium text-muted-foreground">{t('config.envFilePath')}</span>
-              <TooltipButton
-                tooltip={t('common.copyAll')}
-                variant="ghost"
-                size="sm"
-                class="h-7 gap-1"
-                onclick={copyAll}
-              >
-                {#if copied['__all__']}
-                  <CheckCircle class="h-3.5 w-3.5 text-green-500" />
-                  <span class="text-xs">{t('common.copied')}</span>
-                {:else}
-                  <Copy class="h-3.5 w-3.5" />
-                  <span class="text-xs">{t('common.copyAll')}</span>
-                {/if}
-              </TooltipButton>
-            </div>
-            <pre class="px-3 py-3 text-xs font-mono leading-relaxed text-foreground bg-muted/20 m-0 whitespace-pre-wrap break-all">{envTemplate}</pre>
-          </div>
-        {/if}
-
-        <p class="text-xs text-muted-foreground text-center mt-4">
-          {t('config.reload')}
-        </p>
-
-        <Button variant="outline" class="w-full" onclick={() => window.location.reload()}>
-          {t('config.reloadButton')}
-        </Button>
-      </Card.CardContent>
-    </Card.Card>
-  </div>
-</div>

package/src/components/ConfirmDialog.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">
-  import * as AlertDialog from './ui/alert-dialog/index.js';
-  import { Button } from './ui/button/index.js';
-  import { t } from '@svadmin/core/i18n';
-
-  let { open = $bindable(false), title, message = '',
-    confirmText, cancelText, variant = 'danger',
-    onconfirm, oncancel } = $props<{
-    open?: boolean;
-    title?: string;
-    message?: string;
-    confirmText?: string;
-    cancelText?: string;
-    variant?: 'danger' | 'warning' | 'info';
-    onconfirm: () => void;
-    oncancel: () => void;
-  }>();
-
-  const variantMap = {
-    danger: 'destructive' as const,
-    warning: 'destructive' as const,
-    info: 'default' as const,
-  };
-
-  const resolvedTitle = $derived(title ?? t('common.confirmAction'));
-  const resolvedConfirmText = $derived(confirmText ?? t('common.confirm'));
-  const resolvedCancelText = $derived(cancelText ?? t('common.cancel'));
-</script>
-
-<AlertDialog.Root bind:open onOpenChange={(v: boolean) => { if (!v) oncancel(); }}>
-  <AlertDialog.Content>
-    <AlertDialog.Header>
-      <AlertDialog.Title>{resolvedTitle}</AlertDialog.Title>
-      <AlertDialog.Description>{message}</AlertDialog.Description>
-    </AlertDialog.Header>
-    <AlertDialog.Footer>
-      <AlertDialog.Cancel>
-        {#snippet child({ props })}
-          <Button variant="outline" {...props} onclick={oncancel}>
-            {resolvedCancelText}
-          </Button>
-        {/snippet}
-      </AlertDialog.Cancel>
-      <AlertDialog.Action>
-        {#snippet child({ props })}
-          <Button variant={variantMap[variant as keyof typeof variantMap]} {...props} onclick={onconfirm}>
-            {resolvedConfirmText}
-          </Button>
-        {/snippet}
-      </AlertDialog.Action>
-    </AlertDialog.Footer>
-  </AlertDialog.Content>
-</AlertDialog.Root>

package/src/components/CopilotPanel.svelte

@@ -1,163 +0,0 @@
-<script lang="ts">
-  import { getChatProvider, getChatContext } from '@svadmin/core';
-  import { Sparkles, X, ChevronRight, Check, RefreshCcw } from '@lucide/svelte';
-  import { fade, slide } from 'svelte/transition';
-  import { Button } from './ui/button/index.js';
-  import MarkdownRenderer from './MarkdownRenderer.svelte';
-  import TooltipButton from './TooltipButton.svelte';
-
-  let { open = $bindable(false) } = $props<{ open?: boolean }>();
-
-  const provider = $derived(getChatProvider());
-  const ctx = $derived(getChatContext());
-
-  let isPredicting = $state(false);
-  let insightText = $state('');
-  let abortController: AbortController | null = null;
-  let hasFetchedForContext = $state('');
-
-  // Automatically request insights when the context changes
-  $effect(() => {
-    if (!open || !provider) return;
-    
-    // Create a context hash to avoid refetching for the same page
-    const currentHash = `${ctx.currentResource}-${ctx.currentView}-${ctx.selectedRecordId}`;
-    if (hasFetchedForContext === currentHash) return;
-    
-    hasFetchedForContext = currentHash;
-    getInsights();
-  });
-
-  async function getInsights() {
-    if (!provider) return;
-    
-    isPredicting = true;
-    insightText = '';
-    
-    if (abortController) abortController.abort();
-    abortController = new AbortController();
-
-    const prompt = `Analyze the current context and provide 3 quick insights or context-aware suggestions for the admin user.
-Resource: ${ctx.currentResource}
-View: ${ctx.currentView}
-Record ID: ${ctx.selectedRecordId || 'None'}
-Keep it concise, professional, and use bullet points.`;
-
-    try {
-      const result = provider.sendMessage(
-        [{ id: 'insights', role: 'system', content: prompt, timestamp: Date.now() }],
-        { signal: abortController.signal }
-      );
-
-      if (Symbol.asyncIterator in result) {
-        for await (const chunk of result as AsyncIterable<string>) {
-          insightText += chunk;
-        }
-      } else {
-        insightText = await result;
-      }
-    } catch (err: unknown) {
-      if (err instanceof Error && err.name !== 'AbortError') {
-        insightText = 'Failed to generate insights for this context.';
-      }
-    } finally {
-      isPredicting = false;
-    }
-  }
-</script>
-
-{#if open}
-  <div 
-    class="fixed right-0 top-14 bottom-0 w-80 bg-card border-l shadow-2xl z-40 flex flex-col"
-    transition:slide={{ axis: 'x', duration: 300 }}
-  >
-    <!-- Header -->
-    <div class="h-14 flex items-center justify-between px-4 border-b bg-muted/20">
-      <div class="flex items-center gap-2 font-medium">
-        <Sparkles class="h-4 w-4 text-primary" />
-        Copilot Sidebar
-      </div>
-      <TooltipButton tooltip="Close panel" variant="ghost" size="icon-sm" onclick={() => open = false}>
-        <X class="h-4 w-4" />
-      </TooltipButton>
-    </div>
-
-    <!-- Context Meta -->
-    <div class="px-4 py-3 border-b bg-muted/10 text-xs text-muted-foreground flex flex-col gap-1">
-      <div class="flex items-center gap-2">
-        <span class="w-16">Resource:</span>
-        <span class="font-mono text-foreground">{ctx.currentResource || 'Dashboard'}</span>
-      </div>
-      <div class="flex items-center gap-2">
-        <span class="w-16">View:</span>
-        <span class="font-mono text-foreground capitalize">{ctx.currentView || 'List'}</span>
-      </div>
-      {#if ctx.selectedRecordId}
-        <div class="flex items-center gap-2">
-          <span class="w-16">Record ID:</span>
-          <span class="font-mono text-foreground">{ctx.selectedRecordId}</span>
-        </div>
-      {/if}
-    </div>
-
-    <!-- Content Area -->
-    <div class="flex-1 overflow-y-auto p-4 space-y-6">
-      
-      <!-- Smart Insights Section -->
-      <div>
-        <h4 class="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-3 flex items-center justify-between">
-          Smart Insights
-          {#if isPredicting}
-            <span class="flex items-center gap-1 text-[10px] text-primary normal-case font-medium">
-              <div class="h-1 w-1 bg-primary rounded-full animate-bounce delay-75"></div>
-              <div class="h-1 w-1 bg-primary rounded-full animate-bounce delay-150"></div>
-              <div class="h-1 w-1 bg-primary rounded-full animate-bounce delay-300"></div>
-            </span>
-          {:else}
-            <Button variant="ghost" size="icon-sm" class="h-5 w-5 hover:bg-muted" onclick={getInsights}>
-              <RefreshCcw class="h-3 w-3" />
-            </Button>
-          {/if}
-        </h4>
-        
-        <div class="text-sm">
-          {#if !insightText && !isPredicting}
-            <div class="text-muted-foreground italic text-center py-4 bg-muted/30 rounded-lg border border-dashed">
-              No insights loaded.
-            </div>
-          {:else}
-            <div class="bg-primary/5 p-3 rounded-xl border border-primary/10 prose prose-sm dark:prose-invert prose-p:my-1 prose-ul:my-1 prose-li:my-0.5">
-              <MarkdownRenderer content={insightText} streaming={isPredicting} />
-            </div>
-          {/if}
-        </div>
-      </div>
-
-      <!-- Quick Actions (Example static definitions for the copilot) -->
-      <div>
-        <h4 class="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-3">
-          Suggested Actions
-        </h4>
-        <div class="space-y-2">
-          {#if ctx.currentView === 'list'}
-            <button class="w-full flex items-center gap-2 text-left p-2 rounded-lg hover:bg-muted border border-transparent hover:border-border transition-colors text-sm">
-              <div class="bg-background rounded shadow-sm p-1"><Check class="h-3.5 w-3.5 text-muted-foreground" /></div>
-              <span>Generate monthly report</span>
-            </button>
-            <button class="w-full flex items-center gap-2 text-left p-2 rounded-lg hover:bg-muted border border-transparent hover:border-border transition-colors text-sm">
-              <div class="bg-background rounded shadow-sm p-1"><Check class="h-3.5 w-3.5 text-muted-foreground" /></div>
-              <span>Find anomalies in {ctx.currentResource}</span>
-            </button>
-          {:else if ctx.currentView === 'edit' || ctx.currentView === 'create'}
-            <button class="w-full flex items-center gap-2 text-left p-2 rounded-lg hover:bg-muted border border-transparent hover:border-border transition-colors text-sm">
-              <div class="bg-background rounded shadow-sm p-1"><Check class="h-3.5 w-3.5 text-muted-foreground" /></div>
-              <span>Auto-fill form from context</span>
-            </button>
-          {:else}
-            <div class="text-muted-foreground text-sm py-2 text-center">No precise actions for this view</div>
-          {/if}
-        </div>
-      </div>
-    </div>
-  </div>
-{/if}

package/src/components/CreatePage.svelte

@@ -1,39 +0,0 @@
-<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 PageHeader from './PageHeader.svelte';
-  import AutoForm from './AutoForm.svelte';
-  import ListButton from './buttons/ListButton.svelte';
-
-  interface Props {
-    resourceName: string;
-    title?: string;
-    headerActions?: Snippet;
-    class?: string;
-  }
-
-  let {
-    resourceName,
-    title,
-    headerActions,
-    class: className = '',
-  }: Props = $props();
-
-  const resource = $derived(getResource(resourceName));
-  const pageTitle = $derived(title ?? `${t('common.create')}${resource.label}`);
-</script>
-
-<div class="space-y-6 {className}">
-  <PageHeader title={pageTitle}>
-    {#snippet actions()}
-      <ListButton resource={resourceName} hideText />
-      {#if headerActions}
-        {@render headerActions()}
-      {/if}
-    {/snippet}
-  </PageHeader>
-
-  <AutoForm {resourceName} mode="create" />
-</div>