@svadmin/ui 0.29.3 → 0.30.0

package/dist/components/InferencerPanel.svelte

@@ -0,0 +1,192 @@
+<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/dist/components/InferencerPanel.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const InferencerPanel: import("svelte").Component<Record<string, never>, {}, "">;
+type InferencerPanel = ReturnType<typeof InferencerPanel>;
+export default InferencerPanel;

package/dist/components/InfiniteList.svelte

@@ -0,0 +1,93 @@
+<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/dist/components/InfiniteList.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { BaseRecord, Sort, Filter } from '@svadmin/core';
+import type { Snippet } from 'svelte';
+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;
+}
+declare const InfiniteList: import("svelte").Component<Props<BaseRecord>, {}, "">;
+type InfiniteList = ReturnType<typeof InfiniteList>;
+export default InfiniteList;

package/dist/components/InlineEdit.svelte

@@ -0,0 +1,88 @@
+<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/dist/components/InlineEdit.svelte.d.ts

@@ -0,0 +1,12 @@
+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;
+}
+declare const InlineEdit: import("svelte").Component<Props, {}, "">;
+type InlineEdit = ReturnType<typeof InlineEdit>;
+export default InlineEdit;

package/dist/components/InsightCard.svelte

@@ -0,0 +1,98 @@
+<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/dist/components/InsightCard.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    title?: string;
+    context: string;
+    autoFetch?: boolean;
+    class?: string;
+}
+declare const InsightCard: import("svelte").Component<Props, {
+    getInsights: () => Promise<void>;
+}, "">;
+type InsightCard = ReturnType<typeof InsightCard>;
+export default InsightCard;

package/dist/components/KeyboardShortcuts.svelte

@@ -0,0 +1,61 @@
+<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/dist/components/KeyboardShortcuts.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    open?: boolean;
+};
+declare const KeyboardShortcuts: import("svelte").Component<$$ComponentProps, {}, "open">;
+type KeyboardShortcuts = ReturnType<typeof KeyboardShortcuts>;
+export default KeyboardShortcuts;