@svadmin/ui 0.29.1 → 0.29.2

package/src/components/InferencerPanel.svelte

@@ -1,192 +0,0 @@
-<script lang="ts">
-  import { getDataProvider, getResources, inferResource } from '@svadmin/core';
-  import type { InferResult } from '@svadmin/core';
-  import { Button } from './ui/button/index.js';
-  import { Input } from './ui/input/index.js';
-  import { Badge } from './ui/badge/index.js';
-  import * as Card from './ui/card/index.js';
-  import * as Table from './ui/table/index.js';
-  import * as Alert from './ui/alert/index.js';
-  import { Skeleton } from './ui/skeleton/index.js';
-  import { ScrollArea } from './ui/scroll-area/index.js';
-  import { Select } from './ui/select/index.js';
-  import { Wand2, Copy, Check, RefreshCw, Loader2, AlertCircle } from '@lucide/svelte';
-
-  const dataProvider = getDataProvider();
-  const resources = getResources();
-
-  let selectedResource = $state('');
-  let inferResult = $state<InferResult | null>(null);
-  let loading = $state(false);
-  let error = $state<string | null>(null);
-  let copied = $state(false);
-  let customEndpoint = $state('');
-  let copyTimer: ReturnType<typeof setTimeout> | undefined;
-
-  $effect(() => {
-    return () => { if (copyTimer) clearTimeout(copyTimer); };
-  });
-
-  async function runInference() {
-    const resourceName = customEndpoint.trim() || selectedResource;
-    if (!resourceName) return;
-
-    loading = true;
-    error = null;
-    inferResult = null;
-
-    try {
-      const response = await dataProvider.getList({
-        resource: resourceName,
-        pagination: { current: 1, pageSize: 25 },
-      });
-
-      if (!response.data || response.data.length === 0) {
-        error = `No data returned from "${resourceName}". The API must return at least one record to infer fields.`;
-        return;
-      }
-
-      inferResult = inferResource(
-        resourceName,
-        response.data as Record<string, unknown>[],
-      );
-    } catch (e: unknown) {
-      error = e instanceof Error ? e.message : 'Failed to fetch data for inference.';
-    } finally {
-      loading = false;
-    }
-  }
-
-  function copyCode() {
-    if (!inferResult) return;
-    navigator.clipboard.writeText(inferResult.code);
-    copied = true;
-    if (copyTimer) clearTimeout(copyTimer);
-    copyTimer = setTimeout(() => { copied = false; }, 2000);
-  }
-
-  const typeVariants: Record<string, 'default' | 'secondary' | 'outline' | 'destructive'> = {
-    text: 'secondary',
-    number: 'default',
-    boolean: 'outline',
-    date: 'secondary',
-    email: 'default',
-    url: 'outline',
-    image: 'secondary',
-    images: 'secondary',
-    textarea: 'outline',
-    json: 'secondary',
-    tags: 'default',
-    select: 'outline',
-    relation: 'destructive',
-    color: 'secondary',
-    phone: 'default',
-  };
-</script>
-
-<Card.Root>
-  <Card.CardHeader class="pb-3">
-    <Card.CardTitle class="flex items-center gap-2 text-base">
-      <Wand2 class="h-4 w-4" />
-      Resource Inferencer
-    </Card.CardTitle>
-  </Card.CardHeader>
-  <Card.CardContent class="space-y-4">
-    <!-- Resource selector -->
-    <div class="flex gap-2">
-      <Select
-        class="flex-1"
-        bind:value={selectedResource}
-        placeholder="— Select a resource —"
-      >
-        {#each resources as res}
-          <option value={res.name}>{res.label} ({res.name})</option>
-        {/each}
-      </Select>
-      <span class="flex items-center text-xs text-muted-foreground">or</span>
-      <Input
-        type="text"
-        class="w-36"
-        placeholder="custom endpoint"
-        bind:value={customEndpoint}
-      />
-    </div>
-
-    <Button size="sm" onclick={runInference} disabled={loading || (!selectedResource && !customEndpoint.trim())}>
-      {#if loading}
-        <Loader2 class="h-3 w-3 animate-spin" data-icon="inline-start" />
-        Inferring...
-      {:else}
-        <RefreshCw class="h-3 w-3" data-icon="inline-start" />
-        Infer Fields
-      {/if}
-    </Button>
-
-    {#if error}
-      <Alert.Root variant="destructive">
-        <AlertCircle class="h-4 w-4" />
-        <Alert.Description>{error}</Alert.Description>
-      </Alert.Root>
-    {/if}
-
-    {#if loading}
-      <div class="space-y-2">
-        {#each Array(4) as _}
-          <Skeleton class="h-8 w-full" />
-        {/each}
-      </div>
-    {/if}
-
-    {#if inferResult}
-      <!-- Field table -->
-      <ScrollArea class="max-h-80">
-        <Table.Root>
-          <Table.Header>
-            <Table.Row class="bg-muted/50">
-              <Table.Head>Field</Table.Head>
-              <Table.Head>Type</Table.Head>
-              <Table.Head class="text-center">List</Table.Head>
-              <Table.Head class="text-center">Form</Table.Head>
-            </Table.Row>
-          </Table.Header>
-          <Table.Body>
-            {#each inferResult.fields as field}
-              <Table.Row>
-                <Table.Cell class="font-mono text-xs">{field.key}</Table.Cell>
-                <Table.Cell>
-                  <Badge variant={typeVariants[field.type] ?? 'secondary'}>
-                    {field.type}
-                    {#if field.resource}→ {field.resource}{/if}
-                  </Badge>
-                </Table.Cell>
-                <Table.Cell class="text-center">{field.showInList ? '✓' : '—'}</Table.Cell>
-                <Table.Cell class="text-center">{field.showInForm ? '✓' : '—'}</Table.Cell>
-              </Table.Row>
-            {/each}
-          </Table.Body>
-        </Table.Root>
-      </ScrollArea>
-
-      <!-- Generated code -->
-      <div class="rounded-lg border overflow-hidden">
-        <div class="flex items-center justify-between bg-muted px-3 py-1.5 text-xs text-muted-foreground">
-          <span>Generated ResourceDefinition</span>
-          <Button variant="ghost" size="sm" class="h-6 text-xs gap-1" onclick={copyCode}>
-            {#if copied}
-              <Check class="h-3 w-3 text-emerald-500" />
-              <span class="text-emerald-500">Copied!</span>
-            {:else}
-              <Copy class="h-3 w-3" />
-              Copy
-            {/if}
-          </Button>
-        </div>
-        <pre class="max-h-64 overflow-auto bg-muted/30 p-3 text-xs text-foreground font-mono">{inferResult.code}</pre>
-      </div>
-
-      <p class="text-xs text-muted-foreground">
-        Inferred {inferResult.fields.length} fields from sample data. Copy the code above into your <code class="bg-muted px-1 rounded text-foreground">resources.ts</code> file.
-      </p>
-    {/if}
-  </Card.CardContent>
-</Card.Root>

package/src/components/InfiniteList.svelte

@@ -1,93 +0,0 @@
-<script lang="ts">
-  import { fade, fly } from 'svelte/transition';
-  import { useInfiniteList } from '@svadmin/core';
-  import type { BaseRecord, Sort, Filter } from '@svadmin/core';
-  import type { Snippet } from 'svelte';
-  import { t } from '@svadmin/core/i18n';
-  import { Skeleton } from './ui/skeleton/index.js';
-  import { Button } from './ui/button/index.js';
-  import { Loader2 } from '@lucide/svelte';
-  import { intersect } from '../actions.js';
-
-  interface Props<T extends BaseRecord = BaseRecord> {
-    resource: string;
-    pageSize?: number;
-    sorters?: Sort[];
-    filters?: Filter[];
-    /** Render each item */
-    children: Snippet<[{ item: T; index: number }]>;
-    /** Custom empty state */
-    empty?: Snippet;
-    /** Custom loading skeleton */
-    loadingSkeleton?: Snippet;
-  }
-
-  let {
-    resource,
-    pageSize = 20,
-    sorters,
-    filters,
-    children,
-    empty,
-    loadingSkeleton,
-  }: Props = $props();
-
-  const { query } = useInfiniteList({
-    get resource() { return resource; },
-    get pagination() { return { pageSize }; },
-    get sorters() { return sorters; },
-    get filters() { return filters; },
-  });
-
-  const allItems = $derived(
-    (query.data as { pages?: { data: BaseRecord[] }[] })?.pages?.flatMap(p => p.data) ?? []
-  );
-
-  const hasNextPage = $derived(query.hasNextPage ?? false);
-  const isFetchingNextPage = $derived(query.isFetchingNextPage ?? false);
-
-  function loadMore() {
-    if (hasNextPage && !isFetchingNextPage) {
-      query.fetchNextPage();
-    }
-  }
-</script>
-
-<div class="space-y-2">
-  {#if query.isLoading}
-    {#if loadingSkeleton}
-      {@render loadingSkeleton()}
-    {:else}
-      <div class="space-y-3">
-        {#each Array(5) as _}
-          <Skeleton class="h-16 w-full rounded-lg" />
-        {/each}
-      </div>
-    {/if}
-  {:else if allItems.length === 0}
-    {#if empty}
-      {@render empty()}
-    {:else}
-      <p class="text-center text-sm text-muted-foreground py-8">{t('empty.title')}</p>
-    {/if}
-  {:else}
-    {#each allItems as item, index}
-      <div in:fade={{ duration: 200, delay: index < 20 ? index * 30 : 0 }}>
-        {@render children({ item, index })}
-      </div>
-    {/each}
-
-    {#if isFetchingNextPage}
-      <div class="flex justify-center py-4">
-        <Loader2 class="h-5 w-5 animate-spin text-muted-foreground" />
-      </div>
-    {/if}
-
-    {#if hasNextPage}
-      <!-- Sentinel for infinite scroll -->
-      <div use:intersect={loadMore} class="h-1"></div>
-    {:else}
-      <p class="text-center text-xs text-muted-foreground py-2">{t('empty.noMore')}</p>
-    {/if}
-  {/if}
-</div>

package/src/components/InlineEdit.svelte

@@ -1,88 +0,0 @@
-<script lang="ts">
-  import { useUpdate } from '@svadmin/core';
-  import type { FieldDefinition } from '@svadmin/core';
-
-  interface Props {
-    resourceName: string;
-    recordId: string | number;
-    field: FieldDefinition;
-    value: unknown;
-    /** Callback after successful save */
-    onSave?: (newValue: unknown) => void;
-  }
-
-  let { resourceName, recordId, field, value, onSave }: Props = $props();
-
-  let editing = $state(false);
-  let editValue = $state('');
-  let inputRef = $state<HTMLInputElement | null>(null);
-  let saving = $state(false);
-  const displayValue = $derived(String(value ?? ''));
-
-  const { mutation } = useUpdate({ get resource() { return resourceName; } });
-
-  function startEdit() {
-    if (field.type === 'number' || field.type === 'text' || field.type === 'url' || field.type === 'email') {
-      editing = true;
-      editValue = displayValue;
-      // Focus input on next tick
-      setTimeout(() => inputRef?.focus(), 0);
-    }
-  }
-
-  async function save() {
-    if (!editing || saving) return;
-    const newValue = field.type === 'number' ? Number(editValue) : editValue;
-    if (newValue === value) {
-      editing = false;
-      return;
-    }
-    saving = true;
-    try {
-      await mutation.mutateAsync({
-        id: recordId,
-        resource: resourceName,
-        variables: { [field.key]: newValue },
-      });
-      editing = false;
-      onSave?.(newValue);
-    } catch {
-      // Keep editing on error
-    } finally {
-      saving = false;
-    }
-  }
-
-  function cancel() {
-    editing = false;
-    editValue = displayValue;
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === 'Enter') save();
-    if (e.key === 'Escape') cancel();
-  }
-</script>
-
-{#if editing}
-  <input
-    bind:this={inputRef}
-    type={field.type === 'number' ? 'number' : 'text'}
-    bind:value={editValue}
-    onkeydown={handleKeydown}
-    onblur={save}
-    disabled={saving}
-    class="h-7 w-full rounded border bg-background px-2 text-sm outline-none ring-1 ring-primary/50 focus:ring-2 focus:ring-primary transition-all"
-  />
-{:else}
-  <span
-    class="inline-block cursor-pointer rounded px-1 py-0.5 -mx-1 hover:bg-accent/50 transition-colors"
-    ondblclick={startEdit}
-    title="Double-click to edit"
-    role="button"
-    tabindex="0"
-    onkeydown={(e) => { if (e.key === 'Enter' || e.key === 'F2') startEdit(); }}
-  >
-    {value ?? '—'}
-  </span>
-{/if}

package/src/components/InsightCard.svelte

@@ -1,98 +0,0 @@
-<script lang="ts">
-  import { getChatProvider } from '@svadmin/core';
-  import { Sparkles, RefreshCcw, Loader2 } from '@lucide/svelte';
-  import { Button } from './ui/button/index.js';
-  import MarkdownRenderer from './MarkdownRenderer.svelte';
-
-  interface Props {
-    title?: string;
-    context: string;
-    autoFetch?: boolean;
-    class?: string;
-  }
-
-  let { title = 'AI Insights', context, autoFetch = true, class: className = '' }: Props = $props();
-
-  const provider = $derived(getChatProvider());
-
-  let isPredicting = $state(false);
-  let insightText = $state('');
-  let abortController: AbortController | null = null;
-  let hasFetchedForContext = $state('');
-
-  $effect(() => {
-    if (autoFetch && context && provider && hasFetchedForContext !== context) {
-      hasFetchedForContext = context;
-      getInsights();
-    }
-  });
-
-  export async function getInsights() {
-    if (!provider || !context) return;
-    
-    isPredicting = true;
-    insightText = '';
-    
-    if (abortController) abortController.abort();
-    abortController = new AbortController();
-
-    const prompt = `Based on the following data/context, generate 3 concise, highly professional insights. 
-Use bullet points. Do not include introductory text like "Here are the insights".
-
-Data Context:
-${context}`;
-
-    try {
-      const result = provider.sendMessage(
-        [{ id: 'insights', role: 'user', 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.';
-      }
-    } finally {
-      isPredicting = false;
-    }
-  }
-</script>
-
-<div class="rounded-xl border bg-card text-card-foreground shadow-sm flex flex-col {className}">
-  <div class="flex items-center justify-between p-4 border-b">
-    <div class="flex items-center gap-2 font-medium">
-      <Sparkles class="h-4 w-4 text-amber-500" />
-      {title}
-    </div>
-    <Button variant="ghost" size="icon-sm" class="h-6 w-6" onclick={getInsights} disabled={isPredicting || !provider}>
-      <RefreshCcw class="h-3 w-3 {isPredicting ? 'animate-spin' : ''}" />
-    </Button>
-  </div>
-  
-  <div class="p-4 flex-1">
-    {#if !provider}
-      <div class="text-sm text-muted-foreground italic flex items-center justify-center h-full">
-        ChatProvider not configured.
-      </div>
-    {:else if isPredicting && !insightText}
-      <div class="flex items-center justify-center gap-2 text-sm text-muted-foreground h-full py-4">
-        <Loader2 class="h-4 w-4 animate-spin" /> Analyzing data...
-      </div>
-    {:else if !insightText}
-      <div class="text-sm text-muted-foreground italic flex items-center justify-center h-full">
-        No insights available. Click refresh to analyze.
-      </div>
-    {:else}
-      <div class="text-sm 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>

package/src/components/KeyboardShortcuts.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-  import { t } from '@svadmin/core/i18n';
-  import * as Dialog from './ui/dialog/index.js';
-
-  let { open = $bindable(false) }: { open?: boolean } = $props();
-
-  interface Shortcut {
-    keys: string[];
-    label: string;
-  }
-
-  const shortcuts: { group: string; items: Shortcut[] }[] = [
-    {
-      group: 'Navigation',
-      items: [
-        { keys: ['⌘', 'K'], label: 'Open command palette' },
-        { keys: ['?'], label: 'Show keyboard shortcuts' },
-      ],
-    },
-    {
-      group: 'Table',
-      items: [
-        { keys: ['⌘', 'F'], label: 'Focus search' },
-        { keys: ['Esc'], label: 'Close dialog / cancel' },
-      ],
-    },
-    {
-      group: 'Theme',
-      items: [
-        { keys: ['⌘', 'D'], label: 'Toggle dark mode' },
-      ],
-    },
-  ];
-</script>
-
-<Dialog.Root bind:open>
-  <Dialog.Content class="max-w-md">
-    <Dialog.Header>
-      <Dialog.Title>{t('common.keyboardShortcuts') || 'Keyboard Shortcuts'}</Dialog.Title>
-    </Dialog.Header>
-    <div class="space-y-4 py-2">
-      {#each shortcuts as group}
-        <div>
-          <h4 class="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2">{group.group}</h4>
-          <div class="space-y-1.5">
-            {#each group.items as shortcut}
-              <div class="flex items-center justify-between py-1">
-                <span class="text-sm text-foreground">{shortcut.label}</span>
-                <div class="flex items-center gap-1">
-                  {#each shortcut.keys as key}
-                    <kbd class="inline-flex h-5 min-w-5 items-center justify-center rounded border bg-muted px-1.5 text-[10px] font-medium font-mono text-muted-foreground">{key}</kbd>
-                  {/each}
-                </div>
-              </div>
-            {/each}
-          </div>
-        </div>
-      {/each}
-    </div>
-  </Dialog.Content>
-</Dialog.Root>

package/src/components/Layout.svelte

@@ -1,167 +0,0 @@
-<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 }: { children: Snippet; title?: string; menu?: MenuItem[]; siteUrl?: 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);
-
-  $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} 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} 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}