@svadmin/ui 0.3.0 → 0.5.0

package/src/components/Breadcrumbs.svelte

@@ -2,15 +2,12 @@
   import { getResources } from '@svadmin/core';
   import { currentPath } from '@svadmin/core/router';
   import { t } from '@svadmin/core/i18n';
+  import * as Breadcrumb from './ui/breadcrumb/index.js';
 
   const resources = getResources();
   let path = $state(currentPath());
 
-  $effect(() => {
-    function onHash() { path = currentPath(); }
-    window.addEventListener('hashchange', onHash);
-    return () => window.removeEventListener('hashchange', onHash);
-  });
+  function onHashChange() { path = currentPath(); }
 
   interface Crumb { label: string; href: string; }
 
@@ -37,17 +34,23 @@
   });
 </script>
 
+<svelte:window onhashchange={onHashChange} />
+
 {#if crumbs.length > 1}
-  <nav class="mb-4 flex items-center gap-1.5 text-sm text-gray-500">
-    {#each crumbs as crumb, i}
-      {#if i > 0}
-        <span class="text-gray-300">/</span>
-      {/if}
-      {#if i === crumbs.length - 1}
-        <span class="font-medium text-gray-700">{crumb.label}</span>
-      {:else}
-        <a href={crumb.href} class="hover:text-primary transition">{crumb.label}</a>
-      {/if}
-    {/each}
-  </nav>
+  <Breadcrumb.Root class="mb-4">
+    <Breadcrumb.List>
+      {#each crumbs as crumb, i}
+        {#if i > 0}
+          <Breadcrumb.Separator />
+        {/if}
+        <Breadcrumb.Item>
+          {#if i === crumbs.length - 1}
+            <Breadcrumb.Page>{crumb.label}</Breadcrumb.Page>
+          {:else}
+            <Breadcrumb.Link href={crumb.href}>{crumb.label}</Breadcrumb.Link>
+          {/if}
+        </Breadcrumb.Item>
+      {/each}
+    </Breadcrumb.List>
+  </Breadcrumb.Root>
 {/if}

package/src/components/CanAccess.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { canAccess } from '@svadmin/core/permissions';
-  import type { Action } from '@svadmin/core/permissions';
+  import { useCan } from '@svadmin/core';
+  import type { Action } from '@svadmin/core';
 
   let { resource, action, params, children, fallback } = $props<{
     resource: string;
@@ -11,10 +11,12 @@
     fallback?: Snippet;
   }>();
 
-  const result = $derived(canAccess(resource, action, params));
+  const can = $derived(useCan(resource, action, params));
 </script>
 
-{#if result.can}
+{#if can.isLoading}
+  <!-- Loading: nothing rendered -->
+{:else if can.allowed}
   {@render children()}
 {:else if fallback}
   {@render fallback()}

package/src/components/ComboboxField.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  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[];
+  }
+
+  let {
+    resource,
+    value = null,
+    onchange,
+    optionLabel = 'title',
+    optionValue = 'id',
+    placeholder = 'Select...',
+    searchable = true,
+    onSearch,
+  }: Props = $props();
+
+  const { options, query, onSearchChange } = useSelect({
+    resource,
+    optionLabel,
+    optionValue,
+    onSearch: 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(v: string) {
+    searchInputValue = v;
+    onSearchChange(v);
+  }
+</script>
+
+<div class="relative">
+  <Button
+    variant="outline"
+    type="button"
+    class="w-full justify-between font-normal"
+    onclick={() => { open = !open; }}
+  >
+    {#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
+              value={searchInputValue}
+              onValueChange={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

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import { getResources } 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 } from 'lucide-svelte';
+
+  let { open = $bindable(false) } = $props<{ open?: boolean }>();
+  let searchValue = $state('');
+
+  const resources = getResources();
+
+  function close() {
+    open = false;
+    searchValue = '';
+  }
+
+  function act(fn: () => void) {
+    fn();
+    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={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-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">
+          {t('common.noData')}
+        </Command.Empty>
+
+        <!-- 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

@@ -2,23 +2,41 @@
   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 = 'Configuration Required', missingVars = [], envTemplate = '' } = $props<{
+  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);
-      copied = { ...copied, [key]: true };
-      setTimeout(() => {
-        copied = { ...copied, [key]: false };
-      }, 2000);
+      setCopied(key);
     } catch {
       console.warn('[svadmin] clipboard API unavailable');
     }
@@ -30,63 +48,68 @@
   }
 </script>
 
-<div class="config-error-page">
-  <div class="config-error-container">
-    <Card.Card class="config-error-card">
-      <Card.CardHeader class="config-error-header">
-        <div class="config-error-icon">
+<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-destructive/[0.05] via-background to-destructive/[0.03] p-4">
+  <div class="w-full max-w-[480px]">
+    <Card.Card class="backdrop-blur-xl border-border/50 shadow-[0_8px_32px_hsl(var(--destructive)/0.08),0_2px_8px_hsl(0_0%_0%/0.06)]">
+      <Card.CardHeader class="text-center pb-2">
+        <div class="inline-flex items-center justify-center w-14 h-14 rounded-[14px] bg-destructive/10 text-destructive mx-auto mb-3">
           <AlertTriangle class="h-7 w-7" />
         </div>
-        <Card.CardTitle class="text-xl font-bold">{title}</Card.CardTitle>
+        <Card.CardTitle class="text-xl font-bold">{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="env-var-list">
-            {#each missingVars as v (v.key)}
-              <div class="env-var-row">
-                <div class="env-var-info">
-                  <code class="env-var-key">{v.key}</code>
+          <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="env-var-desc">{v.description}</span>
+                    <span class="text-[0.6875rem] text-muted-foreground">{v.description}</span>
                   {/if}
                 </div>
-                <button
-                  class="copy-btn"
+                <TooltipButton
+                  tooltip={t('common.copy')}
+                  variant="ghost"
+                  size="icon"
+                  class="h-7 w-7 shrink-0"
                   onclick={() => copyToClipboard(`${v.key}=`, v.key)}
-                  title="Copy"
                 >
                   {#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}
-                </button>
+                </TooltipButton>
               </div>
             {/each}
           </div>
         {/if}
 
         {#if envTemplate}
-          <div class="env-template">
-            <div class="env-template-header">
+          <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>
-              <button
-                class="copy-btn"
+              <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">Copied!</span>
+                  <span class="text-xs">{t('common.copied')}</span>
                 {:else}
                   <Copy class="h-3.5 w-3.5" />
-                  <span class="text-xs">Copy All</span>
+                  <span class="text-xs">{t('common.copyAll')}</span>
                 {/if}
-              </button>
+              </TooltipButton>
             </div>
-            <pre class="env-template-code">{envTemplate}</pre>
+            <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}
 
@@ -95,130 +118,9 @@
         </p>
 
         <Button variant="outline" class="w-full" onclick={() => window.location.reload()}>
-          Reload Page
+          {t('config.reloadButton')}
         </Button>
       </Card.CardContent>
     </Card.Card>
   </div>
 </div>
-
-<style>
-  .config-error-page {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: linear-gradient(135deg, hsl(var(--destructive) / 0.05) 0%, hsl(var(--background)) 50%, hsl(var(--destructive) / 0.03) 100%);
-    padding: 1rem;
-  }
-
-  .config-error-container {
-    width: 100%;
-    max-width: 480px;
-  }
-
-  :global(.config-error-card) {
-    backdrop-filter: blur(20px);
-    border: 1px solid hsl(var(--border) / 0.5);
-    box-shadow: 0 8px 32px hsl(var(--destructive) / 0.08), 0 2px 8px hsl(0 0% 0% / 0.06);
-  }
-
-  :global(.config-error-header) {
-    text-align: center;
-    padding-bottom: 0.5rem;
-  }
-
-  .config-error-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 56px;
-    height: 56px;
-    border-radius: 14px;
-    background: hsl(var(--destructive) / 0.1);
-    color: hsl(var(--destructive));
-    margin: 0 auto 0.75rem;
-  }
-
-  .env-var-list {
-    border: 1px solid hsl(var(--border));
-    border-radius: 0.5rem;
-    overflow: hidden;
-  }
-
-  .env-var-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.625rem 0.75rem;
-    border-bottom: 1px solid hsl(var(--border) / 0.5);
-    gap: 0.5rem;
-  }
-  .env-var-row:last-child {
-    border-bottom: none;
-  }
-
-  .env-var-info {
-    display: flex;
-    flex-direction: column;
-    gap: 0.125rem;
-    min-width: 0;
-  }
-
-  .env-var-key {
-    font-size: 0.8125rem;
-    font-weight: 600;
-    color: hsl(var(--foreground));
-    font-family: monospace;
-  }
-
-  .env-var-desc {
-    font-size: 0.6875rem;
-    color: hsl(var(--muted-foreground));
-  }
-
-  .copy-btn {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0.25rem 0.5rem;
-    color: hsl(var(--muted-foreground));
-    border-radius: 0.25rem;
-    transition: all 0.15s;
-    flex-shrink: 0;
-  }
-  .copy-btn:hover {
-    color: hsl(var(--foreground));
-    background: hsl(var(--muted) / 0.5);
-  }
-
-  .env-template {
-    border: 1px solid hsl(var(--border));
-    border-radius: 0.5rem;
-    overflow: hidden;
-  }
-
-  .env-template-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.5rem 0.75rem;
-    background: hsl(var(--muted) / 0.5);
-    border-bottom: 1px solid hsl(var(--border) / 0.5);
-  }
-
-  .env-template-code {
-    padding: 0.75rem;
-    font-size: 0.75rem;
-    font-family: monospace;
-    line-height: 1.6;
-    color: hsl(var(--foreground));
-    background: hsl(var(--muted) / 0.2);
-    margin: 0;
-    white-space: pre-wrap;
-    word-break: break-all;
-  }
-</style>

package/src/components/ConfirmDialog.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import * as Dialog from './ui/dialog/index.js';
+  import * as AlertDialog from './ui/alert-dialog/index.js';
   import { Button } from './ui/button/index.js';
   import { t } from '@svadmin/core/i18n';
 
@@ -27,19 +27,27 @@
   const resolvedCancelText = $derived(cancelText ?? t('common.cancel'));
 </script>
 
-<Dialog.Root bind:open onOpenChange={(v: boolean) => { if (!v) oncancel(); }}>
-  <Dialog.Content showCloseButton={false} class="sm:max-w-md">
-    <Dialog.Header>
-      <Dialog.Title>{resolvedTitle}</Dialog.Title>
-      <Dialog.Description>{message}</Dialog.Description>
-    </Dialog.Header>
-    <Dialog.Footer>
-      <Button variant="outline" onclick={oncancel}>
-        {resolvedCancelText}
-      </Button>
-      <Button variant={variantMap[variant as keyof typeof variantMap]} onclick={onconfirm}>
-        {resolvedConfirmText}
-      </Button>
-    </Dialog.Footer>
-  </Dialog.Content>
-</Dialog.Root>
+<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/CreatePage.svelte

@@ -7,6 +7,7 @@
   import AutoForm from './AutoForm.svelte';
   import { ArrowLeft } from 'lucide-svelte';
   import { Button } from './ui/button/index.js';
+  import TooltipButton from './TooltipButton.svelte';
 
   interface Props {
     resourceName: string;
@@ -29,9 +30,9 @@
 <div class="space-y-6 {className}">
   <PageHeader title={pageTitle}>
     {#snippet actions()}
-      <Button variant="ghost" size="icon" onclick={() => navigate(`/${resourceName}`)}>
+      <TooltipButton tooltip={t('common.back')} onclick={() => navigate(`/${resourceName}`)}>
         <ArrowLeft class="h-5 w-5" />
-      </Button>
+      </TooltipButton>
       {#if headerActions}
         {@render headerActions()}
       {/if}