@svadmin/ui 0.70.0 → 0.72.0

package/dist/components/InlineEdit.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
-  import { useUpdate } from '@svadmin/core';
+  import { useUpdate, useResourceContract, captureAdminContext, captureAuthSession, useCan, HttpError, useTranslation } from '@svadmin/core';
   import type { FieldDefinition } from '@svadmin/core';
-  import { Loader2 } from '@lucide/svelte';
+  import { definedReactiveOptions } from '@svadmin/core/options';
+  import { untrack } from 'svelte';
+  import { Check, X, Loader2 } from '@lucide/svelte';
+  import { Button } from './ui/button/index.js';
+  import FieldDisplay from './FieldDisplay.svelte';
+  import { inlineDisplayValue, parseInlineValue } from '../inline-value';
 
   interface Props {
     resourceName: string;
@@ -14,53 +19,103 @@
 
   let { resourceName, recordId, field, value, onSave }: Props = $props();
 
+  const context = captureAdminContext();
+  const binding = useResourceContract(() => resourceName);
+  const i18n = useTranslation();
+  const permission = useCan(() => ({ resource: resourceName, action: 'edit', id: recordId }));
+  const { mutation } = useUpdate(definedReactiveOptions({
+    get resource() { return binding.resource; },
+    get id() { return recordId; },
+  }));
+  const display = $derived(inlineDisplayValue(field.type, value));
+  const session = $derived(captureAuthSession(context.authProvider));
+  const editable = $derived(session.available && context.getResource(resourceName).canEdit !== false && field.showInEdit !== false &&
+    field.key !== 'id' && permission.allowed === true && display !== undefined);
+  const scope = $derived({
+    contract: binding.resource, id: recordId, field: field.key, type: field.type, editable,
+    provider: context.providers?.[binding.dataProviderName], meta: binding.meta,
+    tenant: context.tenantCacheKey?.__svadminTenant,
+    auth: context.authProvider, session,
+  });
   let editing = $state(false);
   let editValue = $state('');
   let inputRef = $state<HTMLInputElement | null>(null);
+  let editorRef = $state<HTMLDivElement | null>(null);
   let saving = $state(false);
-  let savePending = false;
-  const displayValue = $derived(String(value ?? ''));
+  let failure = $state<'input' | 'request' | null>(null);
+  let active: object | undefined;
+  let editingScope = $state.raw<typeof scope>();
   const fieldLabel = $derived(field.label || field.key);
 
-  const { mutation } = useUpdate({ get resource() { return resourceName; } });
+  $effect(() => {
+    void scope;
+    editing = false;
+    editValue = '';
+    saving = false;
+    failure = null;
+    active = undefined;
+    editingScope = undefined;
+  });
+  $effect(() => () => { active = undefined; });
+  $effect(() => {
+    const node = inputRef;
+    if (editing && node) untrack(() => node.focus());
+  });
 
   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);
-    }
+    if (!editable || !display || saving || !session.isCurrent()) return;
+    editingScope = scope;
+    failure = null;
+    editValue = display.text;
+    editing = true;
   }
 
   async function save() {
-    if (!editing || saving || savePending) return;
-    const newValue = field.type === 'number' ? (editValue.trim() === '' ? null : (() => { const n = Number(editValue); return isNaN(n) ? value : n; })()) : editValue;
-    if (newValue === value) {
+    if (!editing || saving || !editable || editingScope !== scope || !session.isCurrent()) return;
+    let newValue: string | number | null;
+    try { newValue = parseInlineValue(field.type, editValue); }
+    catch { failure = 'input'; return; }
+    if (newValue === display?.value) {
       editing = false;
       return;
     }
-    savePending = true;
+    const current = scope;
+    const fieldKey = field.key;
+    const callback = onSave;
+    const token = {};
+    active = token;
     saving = true;
+    failure = null;
+    let succeeded = false;
+    let savedValue: unknown;
     try {
-      await mutation.mutateAsync({
-        id: recordId,
-        resource: resourceName,
-        variables: { [field.key]: newValue },
+      const result = await mutation.mutateAsync({
+        variables: { [fieldKey]: newValue }, dataProviderName: binding.dataProviderName,
       });
-      editing = false;
-      onSave?.(newValue);
-    } catch {
-      // Keep editing on error
+      if (active === token && scope === current && current.session.isCurrent()) {
+        editing = false;
+        succeeded = true;
+        savedValue = result.data[fieldKey];
+      }
+    } catch (error) {
+      if (active === token && scope === current && current.session.isCurrent()) {
+        failure = error instanceof HttpError && error.code === 'INVALID_RESOURCE_INPUT' ? 'input' : 'request';
+      }
     } finally {
-      saving = false;
-      savePending = false;
+      if (active === token && scope === current && current.session.isCurrent()) {
+        active = undefined;
+        saving = false;
+      }
     }
+    if (succeeded && scope === current && current.session.isCurrent()) callback?.(savedValue);
   }
 
   function cancel() {
+    if (saving) return;
     editing = false;
-    editValue = displayValue;
+    failure = null;
+    editingScope = undefined;
+    editValue = display?.text ?? '';
   }
 
   function handleKeydown(e: KeyboardEvent) {
@@ -71,38 +126,53 @@
     if (e.key === 'Escape') cancel();
   }
 
-  function handleBlur() {
-    if (!savePending) save();
+  function handleBlur(event: FocusEvent) {
+    if (event.relatedTarget instanceof Node && editorRef?.contains(event.relatedTarget)) return;
+    if (!saving) void save();
   }
 </script>
 
-{#if editing}
-  <div class="svadmin-u-d89972fe17d6 svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-6da6a3c3f741">
+{#if editing && editingScope === scope && session.isCurrent()}
+  <div bind:this={editorRef} class="svadmin-u-d89972fe17d6 svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-6da6a3c3f741">
     <input
       bind:this={inputRef}
-      type={field.type === 'number' ? 'number' : 'text'}
+      type="text"
+      inputmode={field.type === 'number' ? 'decimal' : field.type === 'email' ? 'email' : field.type === 'url' ? 'url' : 'text'}
       bind:value={editValue}
       onkeydown={handleKeydown}
       onblur={handleBlur}
       disabled={saving}
       aria-label={fieldLabel}
-      class="svadmin-u-d0a52b312f7d svadmin-u-6da6a3c3f741 svadmin-u-07389a777c1f svadmin-u-ca6bcd4b6f3f svadmin-u-e6f9e383a762 svadmin-u-d5eab218aa34 svadmin-u-fc7473ca09eb svadmin-u-df37b1fd9495 svadmin-u-3daca9af0861 svadmin-u-f42e9fee68a1 svadmin-u-608dd26cd5ba svadmin-u-1a5f9520d7fa svadmin-u-0fe7d7d814d0 svadmin-u-d463b664011d"
+      aria-invalid={failure !== null}
+      class="svadmin-u-d0a52b312f7d svadmin-u-7e0b7cdf1a94 svadmin-u-36e579c0b41c svadmin-u-07389a777c1f svadmin-u-ca6bcd4b6f3f svadmin-u-e6f9e383a762 svadmin-u-d5eab218aa34 svadmin-u-fc7473ca09eb svadmin-u-df37b1fd9495 svadmin-u-3daca9af0861 svadmin-u-f42e9fee68a1 svadmin-u-608dd26cd5ba svadmin-u-1a5f9520d7fa svadmin-u-0fe7d7d814d0 svadmin-u-d463b664011d"
     />
-    {#if saving}
-      <span class="svadmin-u-da4dbfbc4fdc svadmin-u-7b2d63937d23 svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-a4326536b8f5" role="status" aria-label="Saving...">
-        <Loader2 class="svadmin-u-783b0d9d1e2c svadmin-u-afbdd13a380e svadmin-u-bfa603190748" aria-hidden="true" />
-      </span>
-    {/if}
+    <Button type="button" variant="ghost" size="icon-sm" disabled={saving} title={i18n.t('common.save')}
+      aria-label={i18n.t('common.save')} aria-busy={saving} onclick={save}>
+      {#if saving}
+        <Loader2 class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-afbdd13a380e" role="status" aria-label="Saving..." />
+      {:else}
+        <Check class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
+      {/if}
+    </Button>
+    <Button type="button" variant="ghost" size="icon-sm" disabled={saving} title={i18n.t('common.cancel')}
+      aria-label={i18n.t('common.cancel')} onclick={cancel}>
+      <X class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
+    </Button>
   </div>
-{:else}
-  <span
+  {#if failure}
+    <p role="alert">{i18n.t(failure === 'input' ? 'validation.invalidFormat' : 'common.operationFailed')}</p>
+  {/if}
+{:else if editable && display}
+  <button type="button"
     class="svadmin-u-52083e7da442 svadmin-u-3960ffc248d9 svadmin-u-34516836730d svadmin-u-07389a777c1f svadmin-u-45d828117213 svadmin-u-465609a240a8 svadmin-u-76610325273f svadmin-u-fc7473ca09eb svadmin-u-d4108abe6359 svadmin-u-2a6233dc87a9 svadmin-u-f10f771f87e9 svadmin-u-793c80e97ffb svadmin-u-9c1295a6914a svadmin-u-ce4edccf4cbb svadmin-u-ceb69a6b0e5f"
     ondblclick={startEdit}
-    title={`Double-click to edit ${fieldLabel}`}
-    role="button"
-    tabindex="0"
+    onclick={startEdit}
+    title={`${i18n.t('common.edit')} ${fieldLabel}`}
+    aria-label={`${i18n.t('common.edit')} ${fieldLabel}`}
     onkeydown={(e) => { if (e.key === 'Enter' || e.key === 'F2') { e.preventDefault(); startEdit(); } }}
   >
-    {value != null && value !== '' ? String(value) : '—'}
-  </span>
+    {display.text || '—'}
+  </button>
+{:else}
+  <FieldDisplay type={field.type} {value} options={field.options} resourceName={field.resource} />
 {/if}

package/dist/components/JsonSchemaForm.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+  import { useTranslation } from '@svadmin/core/i18n';
+
   import { Button } from './ui/button/index.js';
   import { Loader2 } from '@lucide/svelte';
   import { cn } from '../utils.js';
@@ -19,6 +22,8 @@
     class: className = '',
   }: Props = $props();
 
+  const i18n = useTranslation();
+
   let isSubmitting = $state(false);
 
   interface FieldMeta {
@@ -32,18 +37,18 @@
   }
 
   const properties = $derived.by<FieldMeta[]>(() => {
-    const propsObj = (schema.properties ?? {}) as Record<string, Record<string, unknown>>;
-    const requiredKeys = Array.isArray(schema.required) ? (schema.required as string[]) : [];
+    const propsObj = (schema['properties'] ?? {}) as Record<string, Record<string, unknown>>;
+    const requiredKeys = Array.isArray(schema['required']) ? (schema['required'] as string[]) : [];
 
-    return Object.entries(propsObj).map(([key, propDef]) => ({
+    return Object.entries(propsObj).map(([key, propDef]) => (definedOptions({
       key,
-      title: String(propDef.title ?? key),
-      description: propDef.description ? String(propDef.description) : undefined,
-      type: String(propDef.type ?? 'string'),
-      enum: Array.isArray(propDef.enum) ? (propDef.enum as Array<string | number>) : undefined,
+      title: String(propDef['title'] ?? key),
+      description: propDef['description'] ? String(propDef['description']) : undefined,
+      type: String(propDef['type'] ?? 'string'),
+      enum: Array.isArray(propDef['enum']) ? (propDef['enum'] as Array<string | number>) : undefined,
       required: requiredKeys.includes(key),
-      default: propDef.default,
-    }));
+      default: propDef['default'],
+    })));
   });
 
   async function handleSubmit(e: SubmitEvent) {
@@ -68,11 +73,11 @@
   onsubmit={handleSubmit}
   class={cn('svadmin-u-3e7ce58d64fa svadmin-u-a217b4eaa918 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-0478c89a150f svadmin-u-cef5b893cf23 svadmin-u-359090c2d529', className)}
 >
-  {#if schema.title}
+  {#if schema['title']}
     <div class="svadmin-u-f4cc511ff0c1 svadmin-u-65fdbade2025 svadmin-u-05faf5c801ff">
-      <h3 class="svadmin-u-fc7473ca09eb svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{schema.title}</h3>
-      {#if schema.description}
-        <p class="svadmin-u-359090c2d529 svadmin-u-bfa603190748 svadmin-u-15e1b1f444fe">{schema.description}</p>
+      <h3 class="svadmin-u-fc7473ca09eb svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{schema['title']}</h3>
+      {#if schema['description']}
+        <p class="svadmin-u-359090c2d529 svadmin-u-bfa603190748 svadmin-u-15e1b1f444fe">{schema['description']}</p>
       {/if}
     </div>
   {/if}
@@ -99,7 +104,7 @@
             onchange={(e) => updateValue(field.key, e.currentTarget.value)}
             class="svadmin-u-ed8a5df7b2fb svadmin-u-6da6a3c3f741 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-d5eab218aa34 svadmin-u-359090c2d529 svadmin-u-f10f771f87e9 svadmin-u-3e94a98e1466 svadmin-u-9c1295a6914a"
           >
-            <option value="">Select an option...</option>
+            <option value="">{i18n.t('common.selectOption')}</option>
             {#each field.enum as option (option)}
               <option value={String(option)}>{option}</option>
             {/each}

package/dist/components/Layout.svelte

@@ -7,6 +7,8 @@
 </script>
 
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
 /* eslint-disable svelte/no-useless-children-snippet */
   import type { Snippet } from 'svelte';
   import { fade, fly } from 'svelte/transition';
@@ -18,7 +20,7 @@
   import { useTranslation } from '@svadmin/core/i18n';
 
   import { captureAdminContext } from '@svadmin/core';
-  import type { Identity, MenuItem, TaskProvider, TaskRecord } from '@svadmin/core';
+  import type { Identity, MenuItem } from '@svadmin/core';
   import { getPath } from '../router-state.svelte.js';
   import { Skeleton } from './ui/skeleton/index.js';
   import * as Sheet from './ui/sheet/index.js';
@@ -42,7 +44,7 @@
   const auth = $derived(adminContext.authProvider);
   let loading = $state(true);
   let identity = $state<Identity | null>(null);
-  const taskProvider = $derived(adminContext.taskProvider as TaskProvider<TaskRecord> | undefined);
+  const taskProvider = $derived(adminContext.taskProvider ?? undefined);
   const TaskQueueComponent = getComponentRegistry()?.TaskQueueDrawer;
 
   $effect(() => {
@@ -94,10 +96,10 @@
   let touchEndX = $state(0);
 
   function ownsLayoutEvent(event: Event): boolean {
-    const target = event.target instanceof HTMLElement ? event.target : document.activeElement as HTMLElement | null;
+    const target = event.target instanceof Element ? event.target : document.activeElement;
     const owner = target
       ?.closest<HTMLElement>('[data-svadmin-layout-scope]')
-      ?.dataset.svadminLayoutScope;
+      ?.dataset['svadminLayoutScope'];
     if (owner) return owner === layoutScope;
     return document.querySelectorAll('[data-svadmin-layout-scope]').length === 1;
   }
@@ -108,7 +110,7 @@
       e.preventDefault();
       commandOpen = true;
     }
-    if (e.key === '?' && !['INPUT', 'TEXTAREA', 'SELECT'].includes((e.target as HTMLElement)?.tagName)) {
+    if (e.key === '?' && !(e.target instanceof Element && ['INPUT', 'TEXTAREA', 'SELECT'].includes(e.target.tagName))) {
       e.preventDefault();
       shortcutsOpen = true;
     }
@@ -116,16 +118,18 @@
 
   function handleTouchStart(e: TouchEvent) {
     if (!ownsLayoutEvent(e)) return;
-    if (e.touches.length === 1) {
-      touchStartX = e.touches[0].clientX;
-      touchEndX = e.touches[0].clientX;
+    const touch = e.touches.item(0);
+    if (e.touches.length === 1 && touch) {
+      touchStartX = touch.clientX;
+      touchEndX = touch.clientX;
     }
   }
 
   function handleTouchMove(e: TouchEvent) {
     if (!ownsLayoutEvent(e)) return;
-    if (e.touches.length === 1) {
-      touchEndX = e.touches[0].clientX;
+    const touch = e.touches.item(0);
+    if (e.touches.length === 1 && touch) {
+      touchEndX = touch.clientX;
     }
   }
 
@@ -180,7 +184,7 @@
 
     <!-- Desktop sidebar -->
     <div class="svadmin-u-99d72c7fc3e2 svadmin-u-9d60be3a6d80">
-      <Sidebar {collapsed} {identity} {title} {menu} {routeMode} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
+      <Sidebar {collapsed} {identity} {title} {...definedOptions({ "menu": menu })} {routeMode} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
     </div>
 
     <!-- Mobile sidebar via Sheet -->
@@ -193,7 +197,7 @@
     >
       <Sheet.Title id={`${layoutScope}-mobile-navigation-title`} class="svadmin-u-2daa8e5e2f2e">{title}</Sheet.Title>
       <div class="svadmin-u-e477a6af4cb6">
-        <Sidebar collapsed={false} {identity} {title} {menu} {routeMode} onToggle={() => { mobileMenuOpen = false; }} onLogout={handleLogout} />
+        <Sidebar collapsed={false} {identity} {title} {...definedOptions({ "menu": menu })} {routeMode} onToggle={() => { mobileMenuOpen = false; }} onLogout={handleLogout} />
       </div>
     </Sheet.Root>
 
@@ -206,8 +210,8 @@
     >
       <!-- Header with mobile hamburger -->
       <Header
-        {siteUrl}
-        {menu}
+        {...definedOptions({ "siteUrl": siteUrl })}
+        {...definedOptions({ "menu": menu })}
         showSearch={true}
         showThemeToggle={true}
         onSearchClick={() => { commandOpen = true; }}
@@ -255,7 +259,7 @@
   </div>
   <CommandPalette
     bind:open={commandOpen}
-    onAskAI={aiAssistant ? handleAskAI : undefined}
+    {...definedOptions({ "onAskAI": aiAssistant ? handleAskAI : undefined })}
   />
   <KeyboardShortcuts bind:open={shortcutsOpen} />
 {/if}

package/dist/components/LazyTaskQueueDrawer.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import type TaskQueueDrawer from './TaskQueueDrawer.svelte';
+  import { definedOptions } from '@svadmin/core/options';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { ListTodo, RotateCcw } from '@lucide/svelte';
+  import { Button } from './ui/button/index.js';
+
+  let { open = $bindable(false), taskProvider, title, initialTab }: ComponentProps<typeof TaskQueueDrawer> = $props();
+  const i18n = useTranslation();
+  const load = () => import('./TaskQueueDrawer.svelte');
+  let module = $state(load());
+  const resolvedTitle = $derived(title ?? i18n.t('task.drawerTitle'));
+</script>
+
+{#await module}
+  <Button variant="ghost" size="icon" disabled aria-busy="true" aria-label={resolvedTitle}>
+    <ListTodo class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
+  </Button>
+{:then { default: Drawer }}
+  <Drawer bind:open {...definedOptions({ taskProvider, title, initialTab })} />
+{:catch}
+  <Button variant="ghost" size="icon" aria-label={`${resolvedTitle}: ${i18n.t('common.retry')}`} onclick={() => module = load()}>
+    <RotateCcw class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
+  </Button>
+{/await}

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

@@ -0,0 +1,8 @@
+declare const LazyTaskQueueDrawer: import("svelte").Component<{
+    open?: boolean;
+    taskProvider?: import("@svadmin/core").TaskProvider<import("@svadmin/core").TaskRecord>;
+    title?: string;
+    initialTab?: "dlq" | "tasks";
+}, {}, "open">;
+type LazyTaskQueueDrawer = ReturnType<typeof LazyTaskQueueDrawer>;
+export default LazyTaskQueueDrawer;

package/dist/components/ListPage.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import { getResource } from '@svadmin/core';
 
   import type { Snippet } from 'svelte';
@@ -82,11 +84,10 @@
     {resourceName}
     showHeader={false}
     {density}
-    {selectable}
-    {batchActions}
-    defaultCellRenderer={cellRenderer}
-    {rowActions}
-    {emptyState}
-    {expandedRowRender}
+    {...definedOptions({ "selectable": selectable })}
+    {...definedOptions({ batchActions })}
+    {...definedOptions({ "defaultCellRenderer": cellRenderer })}
+    {...definedOptions({ "rowActions": rowActions })}
+    {...definedOptions({ emptyState, expandedRowRender })}
   />
 </div>

package/dist/components/MasterDetailView.svelte

@@ -18,7 +18,7 @@
 
   let {
     items = [],
-    selectedId = $bindable(items[0]?.id as (string | number | undefined)),
+    selectedId = $bindable(items[0]?.['id'] as (string | number | undefined)),
     idKey = 'id',
     titleKey = 'title',
     subtitleKey = 'subtitle',
@@ -80,7 +80,7 @@
             {@render itemSnippet(item, isSelected)}
           {:else}
             <div class={cn('svadmin-u-e83a7042bc91 svadmin-u-f283ea9bea0e', isSelected ? 'svadmin-u-20aaf08a7ed1' : 'svadmin-u-d4108abe6359')}>
-              {item[titleKey] ?? item.name ?? `Item #${item[idKey]}`}
+              {item[titleKey] ?? item['name'] ?? `Item #${item[idKey]}`}
             </div>
             {#if item[subtitleKey]}
               <div class="svadmin-u-d058ca6de60f svadmin-u-bfa603190748 svadmin-u-f283ea9bea0e svadmin-u-15e1b1f444fe">
@@ -108,7 +108,7 @@
         <div class="svadmin-u-3e7ce58d64fa">
           <div class="svadmin-u-7fcf9124b5df svadmin-u-65fdbade2025 svadmin-u-05faf5c801ff">
             <h3 class="svadmin-u-4ee734926ff6 svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">
-              {activeItem[titleKey] ?? activeItem.name ?? `Item #${activeItem[idKey]}`}
+              {activeItem[titleKey] ?? activeItem['name'] ?? `Item #${activeItem[idKey]}`}
             </h3>
             {#if activeItem[subtitleKey]}
               <p class="svadmin-u-359090c2d529 svadmin-u-bfa603190748 svadmin-u-15e1b1f444fe">{activeItem[subtitleKey]}</p>

package/dist/components/MediaLibraryModal.svelte

@@ -3,6 +3,7 @@
   import { Button } from './ui/button/index.js';
   import { Badge } from './ui/badge/index.js';
   import { Upload, Image as ImageIcon, Check, Search, Folder } from '@lucide/svelte';
+  import { useTranslation } from '@svadmin/core/i18n';
   import { cn } from '../utils.js';
 
   export interface MediaItem {
@@ -38,6 +39,8 @@
     class: className = '',
   }: Props = $props();
 
+  const i18n = useTranslation();
+
   let activeCategory = $state('All');
   let searchQuery = $state('');
   let localSelected = $state<string[]>([...selectedUrls]);
@@ -111,7 +114,7 @@
           <input
             type="text"
             bind:value={searchQuery}
-            placeholder="Search media..."
+            placeholder={i18n.t('common.search')}
             class="svadmin-u-d1c57777d8b6 svadmin-u-6da6a3c3f741 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-d2d2d97dd0c8 svadmin-u-aa2c13a5e1b4 svadmin-u-359090c2d529 svadmin-u-f10f771f87e9 svadmin-u-3e94a98e1466 svadmin-u-9c1295a6914a"
           />
         </div>
@@ -120,7 +123,7 @@
           <input type="file" multiple class="svadmin-u-99d72c7fc3e2" onchange={handleFileInput} />
           <span class="svadmin-u-52083e7da442 svadmin-u-3960ffc248d9 svadmin-u-44ee8ba0a421 svadmin-u-d1c57777d8b6 svadmin-u-0b91436debbd svadmin-u-421ac2be5045 svadmin-u-ba939ea82d8b svadmin-u-5064267f78e3 svadmin-u-359090c2d529 svadmin-u-2689f3958069 svadmin-u-35b680bc2a46 svadmin-u-34516836730d">
             <Upload class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
-            Upload
+            {i18n.t('common.upload')}
           </span>
         </label>
       </div>

package/dist/components/MentionsInput.svelte

@@ -65,7 +65,7 @@
 
     for (const trig of triggers) {
       const idx = textBeforeCursor.lastIndexOf(trig);
-      if (idx !== -1 && (idx === 0 || /\s/.test(textBeforeCursor[idx - 1]))) {
+      if (idx !== -1 && (idx === 0 || /\s/.test(textBeforeCursor.charAt(idx - 1)))) {
         const query = textBeforeCursor.slice(idx + 1);
         if (!/\s/.test(query)) {
           matchTrigger = trig;
@@ -117,8 +117,9 @@
       selectedIndex = (selectedIndex - 1 + activeOptions.length) % activeOptions.length;
     } else if (e.key === 'Enter' || e.key === 'Tab') {
       e.preventDefault();
-      if (activeOptions[selectedIndex]) {
-        insertMention(activeOptions[selectedIndex]);
+      const selectedOption = activeOptions[selectedIndex];
+      if (selectedOption) {
+        insertMention(selectedOption);
       }
     } else if (e.key === 'Escape') {
       showDropdown = false;

package/dist/components/NavigateToResource.svelte

@@ -7,9 +7,10 @@
   let navigated = false;
   $effect(() => {
     // Navigate to first resource ONCE — avoid infinite re-triggers
-    if (!navigated && menuItems.length > 0) {
+    const firstMenuItem = menuItems[0];
+    if (!navigated && firstMenuItem) {
       navigated = true;
-      adminContext.navigate(menuItems[0].route);
+      adminContext.navigate(firstMenuItem.route);
     }
   });
 </script>

package/dist/components/PermissionMatrix.svelte

@@ -48,8 +48,9 @@
   } = $props();
 
   $effect(() => {
-    if (!selectedRole && roles.length > 0) {
-      selectedRole = roles[0].code;
+    const firstRole = roles[0];
+    if (!selectedRole && firstRole) {
+      selectedRole = firstRole.code;
     }
   });
 </script>
@@ -163,7 +164,7 @@
             {/if}
             {#each resources as resource, i (i)}
               <!-- Section Grouping Header -->
-              {#if resource.section && (i === 0 || resource.section !== resources[i-1].section)}
+              {#if resource.section && (i === 0 || resource.section !== resources[i-1]?.section)}
                 <tr class="svadmin-u-989c466fdbe7">
                   <td colspan="{actions.length + 1}" class="svadmin-u-f0faeb26d656 svadmin-u-03b4dd7f172b svadmin-u-359090c2d529 svadmin-u-69450ef1487e svadmin-u-20aaf08a7ed1">{resource.section}</td>
                 </tr>

package/dist/components/ProfilePage.svelte

@@ -232,14 +232,14 @@
                 <p class="svadmin-u-42536e69e639 svadmin-u-e83a7042bc91 svadmin-u-f283ea9bea0e">{identity.data.name ?? '—'}</p>
               </div>
 
-              {#if identity.data.email || identity.data.username}
+              {#if identity.data.email || identity.data['username']}
                 <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">
                   {#if identity.data.email}
                     <Mail class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-012fbd121f37" />
                   {:else}
                     <User class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-012fbd121f37" />
                   {/if}
-                  <span class="svadmin-u-f283ea9bea0e">{identity.data.email || identity.data.username}</span>
+                  <span class="svadmin-u-f283ea9bea0e">{identity.data.email || identity.data['username']}</span>
                 </div>
               {/if}
 

package/dist/components/QuickEditDrawer.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { captureAdminContext } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import AutoForm from './AutoForm.svelte';
+  import DetailDrawer from './DetailDrawer.svelte';
+
+  let { resourceName, recordId, onClose }: {
+    resourceName: string;
+    recordId: string | number;
+    onClose: () => void;
+  } = $props();
+  const context = captureAdminContext();
+  const i18n = useTranslation();
+  const resource = $derived(context.getResource(resourceName));
+  let open = $state(true);
+  let guardClose = $state<(close: () => void) => void>(() => {});
+</script>
+
+<DetailDrawer
+  bind:open
+  title={`${i18n.t('common.edit')} ${resource.label}`}
+  description={`#${recordId}`}
+  closeLabel={i18n.t('common.close')}
+  {onClose}
+  onCloseRequest={(close) => guardClose(close)}
+  data-svadmin-quick-edit
+>
+  <AutoForm
+    {resourceName}
+    id={recordId}
+    mode="edit"
+    density="compact"
+    showHeader={false}
+    redirect={false}
+    onSuccess={onClose}
+    onCancel={onClose}
+    onNavigationGuardReady={(guard) => guardClose = guard}
+  />
+</DetailDrawer>

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

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    resourceName: string;
+    recordId: string | number;
+    onClose: () => void;
+};
+declare const QuickEditDrawer: import("svelte").Component<$$ComponentProps, {}, "">;
+type QuickEditDrawer = ReturnType<typeof QuickEditDrawer>;
+export default QuickEditDrawer;