@svadmin/ui 0.29.3 → 0.30.0

package/dist/components/CommandPalette.svelte

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

@@ -0,0 +1,8 @@
+interface Props {
+    open?: boolean;
+    /** Callback fired when user selects "Ask AI" with a query string */
+    onAskAI?: (query: string) => void;
+}
+declare const CommandPalette: import("svelte").Component<Props, {}, "open">;
+type CommandPalette = ReturnType<typeof CommandPalette>;
+export default CommandPalette;

package/dist/components/ConfigErrorScreen.svelte

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

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    title?: string;
+    missingVars?: {
+        key: string;
+        description?: string;
+    }[];
+    envTemplate?: string;
+};
+declare const ConfigErrorScreen: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConfigErrorScreen = ReturnType<typeof ConfigErrorScreen>;
+export default ConfigErrorScreen;

package/dist/components/ConfirmDialog.svelte

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

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    open?: boolean;
+    title?: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+    variant?: 'danger' | 'warning' | 'info';
+    onconfirm: () => void;
+    oncancel: () => void;
+};
+declare const ConfirmDialog: import("svelte").Component<$$ComponentProps, {}, "open">;
+type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
+export default ConfirmDialog;

package/dist/components/CopilotPanel.svelte

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

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

package/dist/components/CreatePage.svelte

@@ -0,0 +1,39 @@
+<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>

package/dist/components/CreatePage.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    resourceName: string;
+    title?: string;
+    headerActions?: Snippet;
+    class?: string;
+}
+declare const CreatePage: import("svelte").Component<Props, {}, "">;
+type CreatePage = ReturnType<typeof CreatePage>;
+export default CreatePage;