@svadmin/ui 0.70.0 → 0.73.0

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

@@ -1,7 +1,12 @@
+import { type ResourceRendering } from '../rendering/index.js';
+import type { AutoTableGridState } from './auto-table-grid.js';
 import type { BaseRecord, FieldDefinition, Sort } from '@svadmin/core';
 import type { Snippet } from 'svelte';
 interface Props {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
+    /** 可选主体渲染器：不替换资源、权限、工具栏和持久化逻辑。 */
+    gridBody?: Snippet<[AutoTableGridState]>;
     selectable?: boolean;
     density?: 'compact' | 'comfortable';
     showHeader?: boolean;
@@ -50,6 +55,7 @@ interface Props {
         total: number;
         visibleColumnsCount: number;
     }]>;
+    deleteVariables?: unknown;
 }
 declare const AutoTable: import("svelte").Component<Props, {}, "">;
 type AutoTable = ReturnType<typeof AutoTable>;

package/dist/components/BoundRecordDetailDrawer.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+  import type { ResourceRendering } from '../rendering/index.js';
+  import { definedOptions } from '@svadmin/core/options';
+
+  import { useCan, useNavigation, type FieldDefinition } from '@svadmin/core';
+  import { useRecordDetail } from './record-detail.svelte';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { Copy, Check, Eye, Pencil, RefreshCw } from '@lucide/svelte';
+  import DetailDrawer from './DetailDrawer.svelte';
+  import FieldDisplay from './FieldDisplay.svelte';
+  import { Button } from './ui/button/index.js';
+  import { Skeleton } from './ui/skeleton/index.js';
+
+  let {
+    resourceName,
+    rendering,
+    open = $bindable(false),
+    recordId,
+    onClose,
+  }: {
+    resourceName: string;
+    rendering?: ResourceRendering | undefined;
+    open?: boolean;
+    recordId: string | number;
+    onClose?: () => void;
+  } = $props();
+
+  const i18n = useTranslation();
+  const navigation = useNavigation();
+  const detail = useRecordDetail(() => ({ resourceName, id: recordId, rendering }));
+  const resource = $derived(detail.resource);
+  const showFields = $derived(detail.fields);
+  const fieldGroups = $derived.by(() => {
+    const groups = new Map<string, FieldDefinition[]>();
+    for (const field of showFields) {
+      const label = field.group ?? '';
+      const fields = groups.get(label) ?? [];
+      fields.push(field);
+      groups.set(label, fields);
+    }
+    return [...groups].map(([label, fields]) => ({ label, fields }));
+  });
+  let copyState = $state<'idle' | 'copied' | 'error'>('idle');
+  $effect(() => { void recordId; void resourceName; copyState = 'idle'; });
+  const permissionPending = $derived(detail.checkingPermission);
+  const canReadRecord = $derived(detail.canRead);
+  const query = detail.query;
+  const editPermission = useCan(() => ({
+    resource: resourceName, action: 'edit', id: recordId,
+    queryOptions: { enabled: canReadRecord && resource.canEdit !== false },
+  }));
+
+  function navigateTo(action: 'show' | 'edit'): void {
+    if (!canReadRecord || !query.isSuccess || (action === 'edit' &&
+      (resource.canEdit === false || editPermission.allowed !== true))) return;
+    navigation[action](resourceName, recordId);
+    open = false;
+  }
+
+  async function copyId(): Promise<void> {
+    if (!canReadRecord || !query.isSuccess) return;
+    const id = recordId;
+    try {
+      await navigator.clipboard.writeText(String(id));
+      if (recordId === id) copyState = 'copied';
+    } catch {
+      if (recordId === id) copyState = 'error';
+    }
+  }
+</script>
+
+{#snippet fieldsList(fields: FieldDefinition[])}
+  {#if query.isSuccess}
+    {@const record = detail.rendering ? detail.rendering.record(query.data.data) : query.data.data}
+    <dl class="svadmin-u-fa6acbf81d74 svadmin-u-d2c3932343f5">
+      {#each fields as field (field.key)}
+        <div class="svadmin-u-f3c543ad5fe9 svadmin-u-58284b4ea568 svadmin-u-cb11fec3bb46 svadmin-u-d9bdd3d643a2 svadmin-u-022e8076dfea">
+          <dt class="svadmin-u-359090c2d529 svadmin-u-2689f3958069 svadmin-u-bfa603190748 svadmin-u-e2327d142859">{field.label}</dt>
+          <dd class="svadmin-u-7e0b7cdf1a94 svadmin-u-170cee3ff4e4 svadmin-u-fc7473ca09eb svadmin-u-d4108abe6359">
+            <FieldDisplay type={field.type} value={record[field.key]} options={field.options} resourceName={field.resource} />
+          </dd>
+        </div>
+      {/each}
+    </dl>
+  {/if}
+{/snippet}
+
+<DetailDrawer
+  bind:open
+  data-svadmin-rendering-resource={detail.rendering?.resource.name}
+  data-svadmin-rendering-kind={detail.rendering ? 'detail-drawer' : undefined}
+  title="{resource.label} {i18n.t('common.detail')}"
+  description={`#${recordId}`}
+  closeLabel={i18n.t('common.close')}
+  width="w-full sm:max-w-xl"
+  {...definedOptions({ onClose })}
+  data-svadmin-record-detail
+>
+  {#snippet extra()}
+    {#if canReadRecord && query.isSuccess}
+      <Button type="button" variant="ghost" size="icon" onclick={copyId}
+        title={i18n.t('common.copyId')} aria-label={i18n.t('common.copyId')}>
+        {#if copyState === 'copied'}
+          <Check class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
+        {:else}
+          <Copy class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
+        {/if}
+      </Button>
+      <span role="status">{copyState === 'copied' ? i18n.t('common.copied') : copyState === 'error' ? i18n.t('common.operationFailed') : ''}</span>
+    {/if}
+  {/snippet}
+  {#if permissionPending || (canReadRecord && query.isLoading)}
+    <div class="svadmin-u-fa6acbf81d74 svadmin-u-d2c3932343f5" role="status" aria-live="polite" aria-label={i18n.t('common.loading')} aria-busy="true">
+      {#each showFields.slice(0, 6) as field (field.key)}
+        <div class="svadmin-u-f3c543ad5fe9 svadmin-u-77a2a20e90d4 svadmin-u-cb11fec3bb46 svadmin-u-d9bdd3d643a2 svadmin-u-022e8076dfea">
+          <Skeleton class="svadmin-u-11e59c6d5f6b svadmin-u-69da7e4ff95d" />
+          <Skeleton class="svadmin-u-11e59c6d5f6b svadmin-u-6da6a3c3f741 svadmin-u-35b2f3aff60f" />
+        </div>
+      {/each}
+    </div>
+  {:else if !canReadRecord}
+    <div class="svadmin-u-61357c0c2f29 svadmin-u-ca6bf63030aa" data-svadmin-access-denied>
+      <p class="svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('common.accessDenied')}</p>
+    </div>
+  {:else if query.isError}
+    <div role="alert">
+      <p>{i18n.t('common.operationFailed')}</p>
+      <Button type="button" variant="ghost" size="icon" title={i18n.t('common.retry')}
+        aria-label={i18n.t('common.retry')} disabled={query.isFetching} onclick={detail.refresh}>
+        <RefreshCw class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
+      </Button>
+    </div>
+  {:else if query.isSuccess}
+    {#key `${resourceName}:${recordId}`}
+      {#each fieldGroups as group, index (group.label)}
+        {#if group.label}
+          <details open={index === 0} class="record-detail-group">
+            <summary>{group.label}</summary>
+            {@render fieldsList(group.fields)}
+          </details>
+        {:else}
+          {@render fieldsList(group.fields)}
+        {/if}
+      {/each}
+    {/key}
+  {:else}
+    <div class="svadmin-u-61357c0c2f29 svadmin-u-ca6bf63030aa">
+      <p class="svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('common.noData')}</p>
+    </div>
+  {/if}
+
+  {#snippet footer()}
+    {#if canReadRecord && query.isSuccess}
+        <Button type="button" variant="outline" onclick={() => navigateTo('show')}>
+          <Eye class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" data-icon="inline-start" aria-hidden="true" />
+          {i18n.t('common.openFullDetail')}
+        </Button>
+    {/if}
+    {#if canReadRecord && query.isSuccess && resource.canEdit !== false && editPermission.allowed === true}
+        <Button type="button" onclick={() => navigateTo('edit')}>
+          <Pencil class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" data-icon="inline-start" aria-hidden="true" />
+          {i18n.t('common.edit')}
+        </Button>
+    {/if}
+  {/snippet}
+</DetailDrawer>
+
+<style>
+  .record-detail-group { border-bottom: 1px solid var(--border); }
+  .record-detail-group summary { cursor: pointer; padding: 12px 0; font-weight: 500; }
+  .record-detail-group summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+</style>

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

@@ -0,0 +1,11 @@
+import type { ResourceRendering } from '../rendering/index.js';
+type $$ComponentProps = {
+    resourceName: string;
+    rendering?: ResourceRendering | undefined;
+    open?: boolean;
+    recordId: string | number;
+    onClose?: () => void;
+};
+declare const BoundRecordDetailDrawer: import("svelte").Component<$$ComponentProps, {}, "open">;
+type BoundRecordDetailDrawer = ReturnType<typeof BoundRecordDetailDrawer>;
+export default BoundRecordDetailDrawer;

package/dist/components/Breadcrumbs.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import { captureAdminContext, getResources, type MenuItem } from '@svadmin/core';
   import { getPath } from '../router-state.svelte.js';
   import { useTranslation } from '@svadmin/core/i18n';
@@ -16,7 +18,7 @@
   interface Crumb { label: string; href?: string; }
 
   function normalizePath(path: string): string {
-    const normalized = path.replace(/^#/, '').split(/[?#]/)[0].replace(/\/$/, '');
+    const normalized = path.replace(/^#/, '').replace(/[?#].*$/, '').replace(/\/$/, '');
     return normalized || '/';
   }
 
@@ -39,10 +41,10 @@
     const menuTrail = menu ? findMenuTrail(menu, currentPathname) : undefined;
     if (menuTrail) {
       for (const item of menuTrail) {
-        result.push({
+        result.push(definedOptions({
           label: item.label ?? item.name,
           href: item.href ? adminContext.formatLink(normalizePath(item.href)) : undefined,
-        });
+        }));
       }
       return result;
     }
@@ -56,6 +58,7 @@
 
     for (let i = 0; i < segments.length; i++) {
        const seg = segments[i];
+       if (seg === undefined) continue;
        currentPath += `/${seg}`;
 
        if (resourceNames.includes(seg)) {
@@ -73,7 +76,7 @@
           currentPath += `/${id}`; // advance path by id
           result.push({ label: `${actionLabel} #${id}`, href: adminContext.formatLink(currentPath) });
           i++; // skip next segment since we consumed the id
-       } else if (i > 0 && resourceNames.includes(segments[i-1])) {
+       } else if (i > 0 && resourceNames.some((name) => name === segments[i-1])) {
           // This is a parent ID (e.g. /teams/123/users) and we are not an action
           result.push({ label: `#${seg}`, href: adminContext.formatLink(currentPath) });
        }

package/dist/components/CancelTaskButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { captureAdminContext, queryKeyMatches } from '@svadmin/core';
+  import { captureAdminContext, queryKeyMatches, withValidatedTaskProvider } from '@svadmin/core';
   import { useQueryClient } from '@tanstack/svelte-query';
   import { useTranslation } from '@svadmin/core/i18n';
 
@@ -34,23 +34,27 @@
 
   async function handleCancel() {
     if (!taskProvider?.cancel || pending) return;
+    const scopedTaskId = taskId;
+    const scope = adminContext.queryKeyMatcher();
     pending = true;
     try {
-      await taskProvider.cancel(taskId);
+      const provider = withValidatedTaskProvider(taskProvider);
+      if (!provider.cancel) return;
+      await provider.cancel(scopedTaskId);
       await Promise.all([
         queryClient.invalidateQueries({
           predicate: (query) => queryKeyMatches(query.queryKey, {
-            ...adminContext.queryKeyMatcher(),
+            ...scope,
             kind: 'task',
             action: 'list',
           }),
         }),
         queryClient.invalidateQueries({
           predicate: (query) => queryKeyMatches(query.queryKey, {
-            ...adminContext.queryKeyMatcher(),
+            ...scope,
             kind: 'task',
             action: 'one',
-            id: taskId,
+            id: scopedTaskId,
           }),
         }),
       ]);

package/dist/components/ColumnHeaderFilter.svelte

@@ -136,14 +136,15 @@
             bind:value={filterVal}
             class="svadmin-u-d1c57777d8b6 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="">All</option>
-            <option value="true">Yes / True</option>
-            <option value="false">No / False</option>
+            <option value="">{i18n.t('common.all')}</option>
+            <option value="true">{i18n.t('common.yesTrue')}</option>
+            <option value="false">{i18n.t('common.noFalse')}</option>
           </select>
         {:else if field.type === 'date'}
           <input
             id="header_filter_val_{field.key}"
             type="date"
+            lang={i18n.locale}
             bind:value={filterVal}
             class="svadmin-u-d1c57777d8b6 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"
           />

package/dist/components/ColumnSettings.svelte

@@ -82,6 +82,7 @@
 
     const next = [...columns];
     const [moved] = next.splice(index, 1);
+    if (moved === undefined) return;
     next.splice(targetIndex, 0, moved);
 
     columns = next;

package/dist/components/ComboboxField.svelte

@@ -1,36 +1,38 @@
 <script lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
+  import { definedReactiveOptions } from '@svadmin/core/options';
+
   import { useTranslation } from '@svadmin/core/i18n';
-  import { useSelect } from '@svadmin/core';
-  import type { Filter } from '@svadmin/core';
+  import { useResourceContract, useSelect } from '@svadmin/core';
+  import type { BaseRecord, Filter } from '@svadmin/core';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+  import type { ButtonProps } from './ui/button/index.js';
   import { Button } from './ui/button/index.js';
-  import TooltipButton from './TooltipButton.svelte';
   import { Command } from './ui/command/index.js';
   import { Skeleton } from './ui/skeleton/index.js';
-  import { ChevronsUpDown, Check, X, Search } from '@lucide/svelte';
+  import { ChevronsUpDown, Check, X, Search, RotateCw } from '@lucide/svelte';
 
   const i18n = useTranslation();
 
   function clickOutside(node: HTMLElement) {
     const handler = (e: MouseEvent) => {
-      if (!node.contains(e.target as Node)) open = false;
+      if (e.target instanceof Node && !node.contains(e.target)) open = false;
     };
     document.addEventListener('click', handler, true);
     return { destroy() { document.removeEventListener('click', handler, true); } };
   }
 
-  interface Props {
+  interface Props extends Omit<HTMLButtonAttributes, 'value' | 'onchange' | 'children' | 'onclick' | 'type'> {
     resource: string;
-    value?: string | number | null;
-    onchange?: (value: string | number | null) => void;
+    value?: string | number | null | (string | number)[];
+    onchange?: (value: string | number | null | (string | number)[]) => void;
     optionLabel?: string;
     optionValue?: string;
     placeholder?: string;
     searchable?: boolean;
+    multiple?: boolean;
     onSearch?: (value: string) => Filter[];
     id?: string;
     class?: string;
-    [key: string]: any;
   }
 
   let {
@@ -41,68 +43,130 @@
     optionValue = 'id',
     placeholder = 'Select...',
     searchable = true,
+    multiple = false,
     onSearch,
+    disabled = false,
     ...restProps
   }: Props = $props();
 
-  const { options, query, onSearchChange } = useSelect({
-    get resource() { return resource; },
-    get optionLabel() { return optionLabel; },
-    get optionValue() { return optionValue; },
-    get onSearch() { return onSearch ?? (searchable ? (v: string) => v ? [{ field: optionLabel, operator: 'contains' as const, value: v }] : [] : undefined); },
+  const buttonRestProps = $derived(restProps as Omit<ButtonProps, 'children' | 'variant' | 'size'>);
+
+  const binding = useResourceContract(() => resource);
+  const defaultSearch = $derived.by(() => {
+    const field = optionLabel;
+    return (v: string): Filter[] => v ? [{ field, operator: 'contains', value: v }] : [];
   });
+  const select = useSelect(definedReactiveOptions({
+    get resource() { return binding.resource; },
+    get dataProviderName() { return binding.dataProviderName; },
+    get optionLabel() { return optionLabel; },
+    get optionValue() {
+      const field = optionValue;
+      return (row: BaseRecord) => {
+        const candidate = row[field];
+        if (typeof candidate === 'string' || (typeof candidate === 'number' && Number.isFinite(candidate))) return candidate;
+        throw new TypeError('Invalid select value field');
+      };
+    },
+    get projectionKey() { return `combobox:${optionLabel}:${optionValue}`; },
+    get defaultValue() {
+      if (Array.isArray(value)) return value;
+      return value === null || value === undefined ? [] : [value];
+    },
+    get onSearch() { return onSearch ?? (searchable ? defaultSearch : undefined); },
+  }));
 
   let open = $state(false);
   let searchInputValue = $state('');
+  $effect(() => {
+    void binding.resource;
+    void binding.dataProviderName;
+    void binding.meta;
+    searchInputValue = '';
+    open = false;
+  });
 
-  const selectedLabel = $derived(
-    (options as { label: string; value: string | number }[])?.find(
-      (o: { label: string; value: string | number }) => o.value === value
-    )?.label ?? ''
+  const selectedValues = $derived(
+    Array.isArray(value) ? value : value === null || value === undefined ? [] : [value],
   );
+  const selectedLabels = $derived(selectedValues.flatMap(selectedValue => {
+    const option = select.options.find(candidate => candidate.value === selectedValue);
+    return option ? [option.label] : [];
+  }));
+  const selectedLabel = $derived(selectedLabels.join(', '));
 
   function handleSelect(optValue: string | number) {
+    if (multiple) {
+      const next = selectedValues.includes(optValue)
+        ? selectedValues.filter(selectedValue => selectedValue !== optValue)
+        : [...selectedValues, optValue];
+      onchange?.(next);
+      return;
+    }
     onchange?.(optValue === value ? null : optValue);
     open = false;
     searchInputValue = '';
+    select.onSearchChange('');
   }
 
   function handleClear(e: Event) {
     e.stopPropagation();
-    onchange?.(null);
+    onchange?.(multiple ? [] : null);
     open = false;
     searchInputValue = '';
+    select.onSearchChange('');
   }
 
   function handleSearchInput(e: Event) {
-    const v = (e.currentTarget as HTMLInputElement).value;
+    if (!(e.currentTarget instanceof HTMLInputElement)) return;
+    const v = e.currentTarget.value;
     searchInputValue = v;
-    onSearchChange(v);
+    select.onSearchChange(v);
   }
 </script>
 
 <div class="svadmin-u-d89972fe17d6" use:clickOutside>
+  <div class="select-control">
   <Button
     variant="outline"
     type="button"
     class="svadmin-u-6da6a3c3f741 svadmin-u-8ef2268efbbc svadmin-u-8ecebc9f80e6"
     onclick={() => { open = !open; }}
-    {...restProps}
+    {...buttonRestProps}
+    {disabled}
+    aria-haspopup="listbox"
+    aria-expanded={open}
+    aria-multiselectable={multiple || undefined}
+    aria-busy={select.isFetching}
+    aria-invalid={select.isError}
   >
     {#if selectedLabel}
       <span class="svadmin-u-f283ea9bea0e">{selectedLabel}</span>
-      <TooltipButton tooltip={i18n.t('common.clear')} size="icon-sm" class="svadmin-u-cd0d9c512cdc svadmin-u-72470489ff4e svadmin-u-f58b02572ab2" onclick={handleClear}>
-        <X class="svadmin-u-6a60c09e6aaa svadmin-u-9cea05671a29" />
-      </TooltipButton>
     {:else}
       <span class="svadmin-u-bfa603190748">{placeholder}</span>
     {/if}
     <ChevronsUpDown class="svadmin-u-fb56d9cff341 svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-012fbd121f37 svadmin-u-0b8c506a0596" />
   </Button>
+  {#if selectedValues.length}
+    <Button type="button" variant="ghost" size="icon-sm" {disabled}
+      title={i18n.t('common.clear')} aria-label={i18n.t('common.clear')} onclick={handleClear}>
+      <X class="svadmin-u-6a60c09e6aaa svadmin-u-9cea05671a29" />
+    </Button>
+  {/if}
+  </div>
+  {#if select.isError}
+    <div role="alert" class="select-error">
+      <span>Unable to load options.</span>
+      <Button type="button" variant="ghost" size="icon-sm" disabled={disabled || select.isFetching}
+        title={i18n.t('common.retry')} aria-label={i18n.t('common.retry')} onclick={() => select.refetch()}>
+        <RotateCw class="svadmin-u-6a60c09e6aaa svadmin-u-9cea05671a29" />
+      </Button>
+    </div>
+  {/if}
 
   {#if open}
     <div class="svadmin-u-da4dbfbc4fdc svadmin-u-181b286668b5 svadmin-u-b6b02c0ebef6 svadmin-u-6da6a3c3f741 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e541d86d1ec8 svadmin-u-06bbb43166db">
-      <Command.Root class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-2cd02d11d1af svadmin-u-421ac2be5045 svadmin-u-e541d86d1ec8 svadmin-u-9b13e8ae5c9c">
+      <Command.Root shouldFilter={false} class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-2cd02d11d1af svadmin-u-421ac2be5045 svadmin-u-e541d86d1ec8 svadmin-u-9b13e8ae5c9c">
         {#if searchable}
           <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-65fdbade2025 svadmin-u-d5eab218aa34">
             <Search class="svadmin-u-82cc6c6581cd svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-012fbd121f37 svadmin-u-0b8c506a0596" />
@@ -114,22 +178,28 @@
             />
           </div>
         {/if}
-        <Command.List class="svadmin-u-558f64349245 svadmin-u-92bf82f493b1 svadmin-u-eb6a3cef9686">
-          <Command.Empty class="svadmin-u-cb11fec3bb46 svadmin-u-ca6bf63030aa svadmin-u-359090c2d529 svadmin-u-bfa603190748">
-            No results.
-          </Command.Empty>
-          {#if query.isLoading}
+        <Command.List
+          role="listbox"
+          aria-multiselectable={multiple || undefined}
+          class="svadmin-u-558f64349245 svadmin-u-92bf82f493b1 svadmin-u-eb6a3cef9686"
+        >
+          {#if select.isLoading}
             {#each Array(3) as _, _i (_i)}
               <div class="svadmin-u-d5eab218aa34 svadmin-u-ec0091ee009b"><Skeleton class="svadmin-u-cd0d9c512cdc svadmin-u-6da6a3c3f741" /></div>
             {/each}
-          {:else}
-            {#each (options as { label: string; value: string | number }[]) ?? [] as opt, _i (_i)}
+          {:else if !select.isError}
+            {#if !select.options.length}
+              <Command.Empty class="svadmin-u-cb11fec3bb46 svadmin-u-ca6bf63030aa svadmin-u-359090c2d529 svadmin-u-bfa603190748">
+                No results.
+              </Command.Empty>
+            {/if}
+            {#each select.options as opt (opt.value)}
               <Command.Item
-                value={opt.label}
+                value={`${typeof opt.value}:${opt.value}`}
                 onSelect={() => handleSelect(opt.value)}
                 class="svadmin-u-d89972fe17d6 svadmin-u-60fbb7713999 svadmin-u-50ca6ba56aa3 svadmin-u-7f6912283f11 svadmin-u-3960ffc248d9 svadmin-u-36d4469299aa svadmin-u-d5eab218aa34 svadmin-u-ec0091ee009b svadmin-u-fc7473ca09eb svadmin-u-df37b1fd9495 svadmin-u-99afb1cc3b47 svadmin-u-529780e25268"
               >
-                <Check class="svadmin-u-d2347e8497a9 svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c {value === opt.value ? 'svadmin-u-3972e98dc84f' : 'svadmin-u-7065497e1ca0'}" />
+                <Check class="svadmin-u-d2347e8497a9 svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c {selectedValues.includes(opt.value) ? 'svadmin-u-3972e98dc84f' : 'svadmin-u-7065497e1ca0'}" />
                 {opt.label}
               </Command.Item>
             {/each}
@@ -139,3 +209,15 @@
     </div>
   {/if}
 </div>
+
+<style>
+  .select-control, .select-error {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+  .select-error {
+    color: var(--destructive);
+    font-size: 0.875rem;
+  }
+</style>

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

@@ -1,16 +1,17 @@
 import type { Filter } from '@svadmin/core';
-interface Props {
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLButtonAttributes, 'value' | 'onchange' | 'children' | 'onclick' | 'type'> {
     resource: string;
-    value?: string | number | null;
-    onchange?: (value: string | number | null) => void;
+    value?: string | number | null | (string | number)[];
+    onchange?: (value: string | number | null | (string | number)[]) => void;
     optionLabel?: string;
     optionValue?: string;
     placeholder?: string;
     searchable?: boolean;
+    multiple?: boolean;
     onSearch?: (value: string) => Filter[];
     id?: string;
     class?: string;
-    [key: string]: any;
 }
 declare const ComboboxField: import("svelte").Component<Props, {}, "">;
 type ComboboxField = ReturnType<typeof ComboboxField>;

package/dist/components/CreatePage.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import type { ResourceRendering } from '../rendering/index.js';
+  import { definedOptions } from '@svadmin/core/options';
+
   import { getResource, captureAdminContext } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
   import type { Snippet } from 'svelte';
@@ -10,6 +13,7 @@
 
   interface Props {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     title?: string;
     density?: 'compact' | 'comfortable';
     columns?: 1 | 2 | 3 | 4;
@@ -20,6 +24,7 @@
 
   let {
     resourceName,
+    rendering,
     title,
     density = 'comfortable',
     columns = 1,
@@ -49,12 +54,13 @@
   </PageHeader>
 
   <AutoForm
+    {rendering}
     {resourceName}
     mode="create"
     {density}
     {columns}
     showHeader={false}
     onNavigationGuardReady={(guard) => navigateGuard = guard}
-    {onSuccess}
+    {...definedOptions({ "onSuccess": onSuccess })}
   />
 </div>

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

@@ -1,6 +1,8 @@
+import type { ResourceRendering } from '../rendering/index.js';
 import type { Snippet } from 'svelte';
 interface Props {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     title?: string;
     density?: 'compact' | 'comfortable';
     columns?: 1 | 2 | 3 | 4;