@svadmin/ui 0.31.0 → 0.32.0

package/dist/components/FieldRenderer.svelte

@@ -20,11 +20,11 @@
   import type { Snippet } from 'svelte';
   import { getRichTextEditor } from '../editor-config.svelte.js';
 
-  let { field, value, onchange, children } = $props<{
+  let { field, value, onchange, disabled, children } = $props<{
     field: FieldDefinition;
     value: unknown;
     onchange: (val: unknown) => void;
-    /** Optional custom renderer snippet */
+    disabled?: boolean;
     children?: Snippet;
   }>();
 
@@ -98,6 +98,7 @@
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLInputElement).value)}
       required={field.required}
+      {disabled}
       placeholder={t('field.enterValue', { label: field.label })}
     />
 
@@ -108,6 +109,7 @@
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLInputElement).value)}
       required={field.required}
+      {disabled}
       placeholder="name@example.com"
     />
 
@@ -118,6 +120,7 @@
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLInputElement).value)}
       required={field.required}
+      {disabled}
       placeholder="https://"
     />
 
@@ -128,6 +131,7 @@
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLInputElement).value)}
       required={field.required}
+      {disabled}
       placeholder="+1 (555) 000-0000"
     />
 
@@ -139,6 +143,7 @@
         value={strVal || '#000000'}
         oninput={(e) => onchange((e.target as HTMLInputElement).value)}
         class="h-10 w-14 cursor-pointer rounded-md border border-input bg-background p-1"
+        disabled={disabled}
       />
       <Input
         type="text"
@@ -146,6 +151,7 @@
         oninput={(e) => onchange((e.target as HTMLInputElement).value)}
         placeholder="#000000"
         class="max-w-32 font-mono text-sm"
+        {disabled}
       />
       {#if strVal}
         <span
@@ -160,8 +166,12 @@
       id={field.key}
       type="number"
       value={String(numVal)}
-      oninput={(e) => onchange(parseFloat((e.target as HTMLInputElement).value) || 0)}
+      oninput={(e) => {
+        const v = (e.target as HTMLInputElement).value;
+        onchange(v === '' ? null : Number(v));
+      }}
       required={field.required}
+      {disabled}
     />
 
   {:else if field.type === 'richtext'}
@@ -173,6 +183,7 @@
         placeholder={t('field.enterValue', { label: field.label })}
         preset="full"
         onchange={(html: string) => onchange(html)}
+        {disabled}
       />
     {:else}
       <Textarea
@@ -180,6 +191,7 @@
         value={strVal}
         oninput={(e) => onchange((e.target as HTMLTextAreaElement).value)}
         required={field.required}
+        {disabled}
         rows={10}
         placeholder={t('field.enterValue', { label: field.label })}
         class="resize-y"
@@ -192,6 +204,7 @@
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLTextAreaElement).value)}
       required={field.required}
+      {disabled}
       rows={4}
       placeholder={t('field.enterValue', { label: field.label })}
       class="resize-y"
@@ -206,24 +219,31 @@
       optionLabel={field.optionLabel ?? 'title'}
       optionValue={field.optionValue ?? 'id'}
       placeholder={t('field.selectPlaceholder')}
+      {disabled}
     />
 
   {:else if field.type === 'select'}
     {#if (field.options?.length ?? 0) > 8}
-      <!-- Many options → use ComboboxField-style search -->
-      <ComboboxField
+      <select
         id={field.key}
-        resource=""
-        value={value as string | number | null}
-        onchange={(v) => onchange(v)}
-        searchable={false}
-      />
+        class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+        value={strVal}
+        onchange={(e) => onchange((e.target as HTMLSelectElement).value)}
+        required={field.required}
+        disabled={disabled}
+      >
+        <option value="">{t('field.selectPlaceholder')}</option>
+        {#each field.options ?? [] as opt}
+          <option value={opt.value}>{opt.label}</option>
+        {/each}
+      </select>
     {:else}
       <Select
         id={field.key}
         value={strVal}
         onchange={(e) => onchange((e.target as HTMLSelectElement).value)}
         required={field.required}
+        {disabled}
         placeholder={t('field.selectPlaceholder')}
       >
         {#each field.options ?? [] as opt}
@@ -244,6 +264,7 @@
             id={`${field.key}-${opt.value}`}
             checked={multiVal.includes(opt.value)}
             onCheckedChange={() => toggleMulti(opt.value)}
+            disabled={disabled}
           />
           {opt.label}
         </label>
@@ -270,6 +291,7 @@
         id={field.key}
         checked={boolVal}
         onCheckedChange={(v) => onchange(v)}
+        disabled={disabled}
       />
       <span class="text-sm text-muted-foreground">{boolVal ? t('common.yes') : t('common.no')}</span>
     </div>
@@ -294,6 +316,7 @@
         type="text"
         placeholder={t('field.tagsPlaceholder')}
         onkeydown={handleTagKeydown}
+        {disabled}
       />
     </div>
 
@@ -304,6 +327,7 @@
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLInputElement).value)}
       required={field.required}
+      {disabled}
     />
 
   {:else if field.type === 'images'}
@@ -317,6 +341,7 @@
             oninput={(e) => updateImage(i, (e.target as HTMLInputElement).value)}
             placeholder="https://example.com/image.jpg"
             class="flex-1"
+            {disabled}
           />
           {#if url}
             <img src={url} alt="preview" class="h-9 w-9 rounded object-cover border" />
@@ -342,6 +367,7 @@
           // keep raw text until valid JSON
         }
       }}
+      {disabled}
       rows={6}
       class="resize-y font-mono text-xs"
     />
@@ -352,6 +378,7 @@
       type="text"
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLInputElement).value)}
+      {disabled}
     />
   {/if}
 </div>

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

@@ -5,7 +5,7 @@ type $$ComponentProps = {
     field: FieldDefinition;
     value: unknown;
     onchange: (val: unknown) => void;
-    /** Optional custom renderer snippet */
+    disabled?: boolean;
     children?: Snippet;
 };
 declare const FieldRenderer: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/Header.svelte

@@ -26,12 +26,11 @@
     siteUrl?: string;
   }>();
 
-  // Retrieve optional component overrides from registry
-  const registry = getComponentRegistry() || {} as any;
-  const CustomBreadcrumbs = registry.Breadcrumbs;
-  const CustomThemeToggle = registry.ThemeToggle;
-  const CustomUserMenu = registry.UserMenu;
-  const CustomNotificationPanel = registry.NotificationPanel;
+  const registry = $derived(getComponentRegistry() || {} as any);
+  const CustomBreadcrumbs = $derived(registry.Breadcrumbs);
+  const CustomThemeToggle = $derived(registry.ThemeToggle);
+  const CustomUserMenu = $derived(registry.UserMenu);
+  const CustomNotificationPanel = $derived(registry.NotificationPanel);
 </script>
 
 <header class="sticky top-0 z-30 flex h-14 w-full shrink-0 items-center justify-between bg-card/60 backdrop-blur-md px-4 md:px-6">

package/dist/components/Layout.svelte

@@ -2,7 +2,6 @@
   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';
@@ -12,7 +11,7 @@
   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 { getPath } from '../router-state.svelte.js';
   import { Skeleton } from './ui/skeleton/index.js';
   import { Button } from './ui/button/index.js';
   import * as Sheet from './ui/sheet/index.js';
@@ -150,7 +149,7 @@
 
       <!-- Content area -->
       <main class="flex-1 overflow-y-auto p-6 md:p-8">
-        {#key currentPath()}
+        {#key getPath()}
           <div in:fly={{ x: 20, duration: 150 }} out:fade={{ duration: 80 }}>
             {@render children()}
           </div>
@@ -158,8 +157,14 @@
       </main>
     </div>
   </div>
-  <CommandPalette bind:open={commandOpen} />
+  <CommandPalette 
+    bind:open={commandOpen} 
+    onAskAI={(q) => {
+      if (typeof window !== 'undefined') {
+        window.dispatchEvent(new CustomEvent('svadmin:ask-ai', { detail: q }));
+      }
+    }}
+  />
   <KeyboardShortcuts bind:open={shortcutsOpen} />
   <ChatDialog />
-  <Toast />
 {/if}

package/dist/components/LiveIndicator.svelte

@@ -23,9 +23,15 @@
   type StatusKey = 'connected' | 'connecting' | 'disconnected';
   const cfg = $derived(statusConfigs[status as StatusKey]);
 
+  let now = $state(Date.now());
+  $effect(() => {
+    const itv = setInterval(() => { now = Date.now(); }, 1000);
+    return () => clearInterval(itv);
+  });
+
   const timeSinceEvent = $derived(
     lastEvent?.timestamp
-      ? Math.floor((Date.now() - lastEvent.timestamp) / 1000)
+      ? Math.floor((now - lastEvent.timestamp) / 1000)
       : null
   );
 </script>

package/dist/components/LoginPage.svelte

@@ -38,7 +38,7 @@
     socialProviders?: SocialProvider[];
   }>();
 
-  const login = useLogin();
+  const login = useLogin({ errorMessage: false });
   const authProvider = getAuthProvider();
 
   let identifier = $state('');

package/dist/components/NavigateToResource.svelte

@@ -4,9 +4,11 @@
   
   const { menuItems } = useMenu();
 
+  let navigated = false;
   $effect(() => {
-    // Automatically navigate to the first defined resource
-    if (menuItems.length > 0) {
+    // Navigate to first resource ONCE — avoid infinite re-triggers
+    if (!navigated && menuItems.length > 0) {
+      navigated = true;
       navigate(menuItems[0].route);
     }
   });

package/dist/components/PermissionMatrix.svelte

@@ -15,7 +15,7 @@
     isGranted,
     
     // Interactive states
-    selectedRole = $bindable(roles[0]?.code || ''),
+    selectedRole = $bindable(''),
     loading = false,
     
     // Feedback and alerts (passed down from upper business logic)
@@ -44,6 +44,11 @@
     onToggle: (role: string, resource: string, action: string, grant: boolean) => void;
   } = $props();
 
+  $effect(() => {
+    if (!selectedRole && roles.length > 0) {
+      selectedRole = roles[0].code;
+    }
+  });
 </script>
 
 <div class="h-full flex flex-col pt-2">

package/dist/components/ShowPage.svelte

@@ -73,5 +73,14 @@
         {/each}
       </Card.Content>
     </Card.Root>
+  {:else}
+    <Card.Root class="overflow-hidden border-border/40 shadow-sm">
+      <Card.Content class="p-8 text-center">
+        <p class="text-muted-foreground">{t('common.noData')}</p>
+        {#if query.isError}
+          <p class="text-sm text-destructive mt-2">{(query.error as Error)?.message ?? t('common.operationFailed')}</p>
+        {/if}
+      </Card.Content>
+    </Card.Root>
   {/if}
 </div>

package/dist/components/Sidebar.svelte

@@ -80,10 +80,11 @@
   let navItems = $state.raw<NavItem[]>([]);
 
   $effect(() => {
-    // Re-run when locale or resources change
     const localeVal = getLocale();
+    const currentResources = getResources();
+    let cancelled = false;
 
-    Promise.all(resources.map(async (r) => {
+    Promise.all(currentResources.map(async (r) => {
       try {
         const { can } = await canAccessAsync(r.name, 'list');
         return { r, can };
@@ -91,6 +92,7 @@
         return { r, can: false };
       }
     })).then(results => {
+      if (cancelled) return;
       const items: NavItem[] = [{ path: '/', label: t('common.home'), Icon: LayoutDashboard }];
       for (const { r, can } of results) {
         if (can) {
@@ -104,6 +106,8 @@
       }
       navItems = items;
     });
+
+    return () => { cancelled = true; };
   });
 
   /** Toggle between available locales */
@@ -254,9 +258,10 @@
                 {@const active = isActive(item.path)}
                 <a
                   href={effectiveRouteMode === 'hash' ? `#${item.path}` : item.path}
-                  class="flex items-center gap-3 rounded-lg px-3 {pyClassGroupItem} text-sm font-medium transition-all duration-200
+                  onclick={(e) => { e.preventDefault(); navigate(item.path); }}
+                  class="flex items-center gap-3 rounded-xl px-3 {pyClassGroupItem} text-sm font-medium transition-all duration-300
                   {active
-                    ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active'
+                    ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active shadow-[0_2px_12px_rgb(0,0,0,0.08)] ring-1 ring-border/20 translate-x-1'
                     : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
                 >
                   <item.Icon class="h-4 w-4 flex-shrink-0" />
@@ -277,10 +282,11 @@
                   <a
                     {...props}
                     href={effectiveRouteMode === 'hash' ? `#${item.path}` : item.path}
-                    class="flex items-center justify-center gap-3 rounded-lg px-3 {pyClass} text-sm font-medium transition-all duration-200
+                    onclick={(e) => { e.preventDefault(); navigate(item.path); }}
+                    class="flex items-center justify-center gap-3 rounded-xl px-3 {pyClass} text-sm font-medium transition-all duration-300
                     {active
-                      ? 'bg-sidebar-accent text-sidebar-accent-foreground'
-                      : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
+                      ? 'bg-sidebar-accent text-sidebar-accent-foreground shadow-[0_2px_12px_rgb(0,0,0,0.08)] ring-1 ring-border/20'
+                      : 'text-sidebar-foreground/60 hover:bg-sidebar-accent/40 hover:text-sidebar-foreground'}"
                   >
                     <item.Icon class="h-4 w-4 flex-shrink-0" />
                   </a>
@@ -293,9 +299,10 @@
           {:else}
             <a
               href={effectiveRouteMode === 'hash' ? `#${item.path}` : item.path}
-              class="flex items-center gap-3 rounded-lg px-3 {pyClass} text-sm font-medium transition-all duration-200
+              onclick={(e) => { e.preventDefault(); navigate(item.path); }}
+              class="flex items-center gap-3 rounded-xl px-3 {pyClass} text-sm font-medium transition-all duration-300
               {active
-                ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active'
+                ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active shadow-[0_2px_12px_rgb(0,0,0,0.08)] ring-1 ring-border/20 translate-x-1'
                 : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
             >
               <item.Icon class="h-4 w-4 flex-shrink-0" />

package/dist/components/SidebarItem.svelte

@@ -102,7 +102,7 @@
           rel={isExternal ? 'noopener noreferrer' : undefined}
           class="flex items-center justify-center rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200
           {active
-            ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+            ? 'bg-card text-sidebar-primary shadow-sm ring-1 ring-foreground/5'
             : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
         >
           <Icon class="h-4 w-4 flex-shrink-0" />
@@ -121,7 +121,7 @@
     rel={isExternal ? 'noopener noreferrer' : undefined}
     class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200
     {active
-      ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active'
+      ? 'bg-card text-sidebar-primary shadow-sm ring-1 ring-foreground/5 font-semibold before:absolute before:left-0 before:top-2 before:bottom-2 before:w-[3px] before:bg-primary before:rounded-r-md overflow-hidden relative'
       : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
     style="padding-left: {12 + depth * 12}px"
   >

package/dist/components/SmartSuggest.svelte

@@ -49,10 +49,20 @@
     return '';
   });
 
+  import { getChatProvider } from '@svadmin/core';
+
   const suffixText = $derived(ghostText ? ghostText.slice(value.length) : '');
 
+  const resolvedProvider = $derived(provider ?? (() => {
+    try {
+      return getChatProvider();
+    } catch {
+      return null;
+    }
+  })());
+
   async function predict() {
-    if (!provider || !value.trim()) {
+    if (!resolvedProvider || !value.trim()) {
       suggestion = '';
       return;
     }
@@ -70,7 +80,7 @@ Provide ONLY the most likely completion of the exact phrase the user is typing.
 Include the user's input in your returned string. 
 Do not include any other text, Markdown formatting, quotes, or explanations.`;
 
-      const result = provider.sendMessage(
+      const result = resolvedProvider.sendMessage(
         [{ id: 'prompt', role: 'user', content: prompt, timestamp: Date.now() }],
         { signal: abortController.signal }
       );

package/dist/components/StepsForm.svelte

@@ -67,12 +67,12 @@
   });
 
   const totalSteps = $derived(steps.length);
-  const progressValue = $derived(((form.currentStep + 1) / totalSteps) * 100);
-  const isLastStep = $derived(form.currentStep >= totalSteps - 1);
+  const progressValue = $derived(((form.steps.currentStep + 1) / totalSteps) * 100);
+  const isLastStep = $derived(form.steps.currentStep >= totalSteps - 1);
 
   // Fields for the current step
   const currentFields = $derived(
-    steps[form.currentStep]?.fields
+    steps[form.steps.currentStep]?.fields
       .map(key => resource.fields.find(f => f.key === key))
       .filter((f): f is FieldDefinition => f != null && f.key !== primaryKey) ?? []
   );
@@ -81,15 +81,11 @@
   function validateCurrentStep(): boolean {
     let valid = true;
     form.clearErrors();
-    for (const field of currentFields) {
-      const value = form.values[field.key];
-      if (field.required && (value === undefined || value === null || value === '')) {
-        form.setFieldError(field.key, t('validation.required'));
-        valid = false;
-      } else if (field.validate) {
-        const msg = field.validate(value);
-        if (msg) {
-          form.setFieldError(field.key, msg);
+    const errors = validator(form.values);
+    if (errors) {
+      for (const field of currentFields) {
+        if (errors[field.key]) {
+          form.setFieldError(field.key, errors[field.key]);
           valid = false;
         }
       }
@@ -101,7 +97,7 @@
     if (!validateCurrentStep()) return;
 
     if (!isLastStep) {
-      form.next();
+      form.steps.nextStep();
       return;
     }
 
@@ -118,17 +114,17 @@
         <Button
           variant="ghost"
           type="button"
-          class="flex items-center gap-2 transition-colors h-auto py-1 px-2 {i === form.currentStep ? 'text-primary font-semibold' : 'text-muted-foreground'}"
-          onclick={() => form.gotoStep(i)}
+          class="flex items-center gap-2 transition-colors h-auto py-1 px-2 {i === form.steps.currentStep ? 'text-primary font-semibold' : 'text-muted-foreground'}"
+          onclick={() => form.steps.gotoStep(i)}
         >
           <span
             class="flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium transition-colors"
-            class:bg-primary={i <= form.currentStep}
-            class:text-primary-foreground={i <= form.currentStep}
-            class:bg-muted={i > form.currentStep}
-            class:text-muted-foreground={i > form.currentStep}
+            class:bg-primary={i <= form.steps.currentStep}
+            class:text-primary-foreground={i <= form.steps.currentStep}
+            class:bg-muted={i > form.steps.currentStep}
+            class:text-muted-foreground={i > form.steps.currentStep}
           >
-            {#if i < form.currentStep}
+            {#if i < form.steps.currentStep}
               <Check class="h-3.5 w-3.5" />
             {:else}
               {i + 1}
@@ -137,7 +133,7 @@
           <span class="hidden sm:inline">{step.title}</span>
         </Button>
         {#if i < steps.length - 1}
-          <div class="flex-1 mx-2 h-px bg-border" class:bg-primary={i < form.currentStep}></div>
+          <div class="flex-1 mx-2 h-px bg-border" class:bg-primary={i < form.steps.currentStep}></div>
         {/if}
       {/each}
     </div>
@@ -147,13 +143,13 @@
   <!-- Step content -->
   <Card.Root>
     <Card.CardHeader>
-      <Card.CardTitle>{steps[form.currentStep]?.title ?? ''}</Card.CardTitle>
+      <Card.CardTitle>{steps[form.steps.currentStep]?.title ?? ''}</Card.CardTitle>
       <Badge variant="outline" class="w-fit">
-        {t('common.step')} {form.currentStep + 1} / {totalSteps}
+        {t('common.step')} {form.steps.currentStep + 1} / {totalSteps}
       </Badge>
     </Card.CardHeader>
     <Card.CardContent>
-      {#key form.currentStep}
+      {#key form.steps.currentStep}
         <form class="space-y-5" onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} in:fly={{ x: 30, duration: 250 }}>
         {#each currentFields as field (field.key)}
           <FieldRenderer
@@ -170,10 +166,10 @@
           <Button
             type="button"
             variant="outline"
-            onclick={() => form.currentStep === 0 ? navigate(`/${resourceName}`) : form.prev()}
+            onclick={() => form.steps.currentStep === 0 ? navigate(`/${resourceName}`) : form.steps.prevStep()}
           >
             <ArrowLeft class="h-4 w-4" data-icon="inline-start" />
-            {form.currentStep === 0 ? t('common.cancel') : t('common.back')}
+            {form.steps.currentStep === 0 ? t('common.cancel') : t('common.back')}
           </Button>
 
           <Button type="submit" disabled={form.submitting}>

package/dist/components/TenantSwitcher.svelte

@@ -7,7 +7,7 @@
 
   let {
     tenants = [],
-    currentTenantId = $bindable(''),
+    currentTenantId = $bindable(undefined as string | undefined),
     collapsed = false,
     onSwitch,
     headerSnippet,
@@ -74,7 +74,7 @@
             {/if}
           </div>
           <span class="flex-1 truncate">{tenant.name}</span>
-          {#if tenant.id === currentTenantId}
+          {#if tenant.id === currentTenant?.id}
             <Check class="h-4 w-4 text-primary" />
           {/if}
         </DropdownMenu.Item>

package/dist/components/VirtualTable.svelte

@@ -66,11 +66,13 @@
   style="height: {containerHeight}px;"
   onscroll={handleScroll}
 >
-  <div style="position: relative; height: {totalHeight}px; width: 100%;">
-    {#each visibleItems as { item, index, offsetY } (index)}
-      <div style="position: absolute; top: {offsetY}px; left: 0; right: 0; height: {rowHeight}px;">
+  <table class="w-full relative" style="border-spacing: 0;">
+    <tbody style="display: block;">
+      <tr style="height: {visibleRange.start * rowHeight}px; border: none; padding: 0; display: block;"></tr>
+      {#each visibleItems as { item, index } (index)}
         {@render row(item, index)}
-      </div>
-    {/each}
-  </div>
+      {/each}
+      <tr style="height: {Math.max(0, (items.length - visibleRange.end - 1) * rowHeight)}px; border: none; padding: 0; display: block;"></tr>
+    </tbody>
+  </table>
 </div>

package/dist/components/VoiceInput.svelte

@@ -89,6 +89,18 @@
       isListening = false;
       if (onend) onend();
     };
+
+    return () => {
+      if (recognition) {
+        isListening = false;
+        recognition.onend = () => {};
+        recognition.stop();
+        recognition.onstart = null;
+        recognition.onresult = null;
+        recognition.onerror = null;
+        recognition.onend = null;
+      }
+    };
   });
 
   function toggleListening(e?: MouseEvent) {

package/dist/components/ui/dialog/dialog-content.svelte

@@ -28,7 +28,7 @@
 		bind:ref
 		data-slot="dialog-content"
 		class={cn(
-			"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-lg p-6 text-sm ring-1 duration-100 sm:max-w-lg fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-98 data-[state=open]:zoom-in-98 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-6 text-sm ring-1 duration-300 sm:max-w-lg fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none shadow-2xl",
 			className
 		)}
 		{...restProps}

package/dist/components/ui/dialog/dialog-overlay.svelte

@@ -12,6 +12,6 @@
 <DialogPrimitive.Overlay
 	bind:ref
 	data-slot="dialog-overlay"
-	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50", className)}
+	class={cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/20 duration-200 backdrop-blur-sm fixed inset-0 isolate z-50", className)}
 	{...restProps}
 />

package/dist/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -15,7 +15,8 @@
 		...restProps
 	}: Props = $props();
 
-	let isOpen = $derived(getContext<() => boolean>("svadmin-dropdown-open")?.() ?? true);
+	const getOpen = getContext<() => boolean>("svadmin-dropdown-open");
+	let isOpen = $derived(getOpen?.() ?? true);
 </script>
 
 {#if isOpen}