@svadmin/ui 0.70.0 → 0.72.0

package/dist/components/RecordDetailDrawer.svelte

@@ -1,121 +1,27 @@
 <script lang="ts">
-  import { captureAdminContext, getResource, useCan, useNavigation, useShow } from '@svadmin/core';
+  import { definedOptions } from '@svadmin/core/options';
+  import { captureAdminContext } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
-  import { Eye, Pencil } from '@lucide/svelte';
-  import CanAccess from './CanAccess.svelte';
+  import BoundRecordDetailDrawer from './BoundRecordDetailDrawer.svelte';
   import DetailDrawer from './DetailDrawer.svelte';
-  import { getDisplayComponent } from './fieldComponentMap';
-  import { Button } from './ui/button/index.js';
-  import { Skeleton } from './ui/skeleton/index.js';
 
-  let {
-    resourceName,
-    open = $bindable(false),
-    recordId,
-    onClose,
-  } = $props<{
+  let { resourceName, open = $bindable(false), recordId, onClose }: {
     resourceName: string;
     open?: boolean;
     recordId?: string | number;
     onClose?: () => void;
-  }>();
-
+  } = $props();
+  const context = captureAdminContext();
   const i18n = useTranslation();
-  const adminContext = captureAdminContext();
-  const navigation = useNavigation();
-  const resource = $derived(getResource(resourceName));
-  const showFields = $derived(resource.fields.filter((field) => field.showInShow !== false));
-  const accessControlEnabled = $derived(!!adminContext.accessControlProvider);
-  const showPermission = useCan(() => ({
-    resource: resourceName,
-    action: 'show',
-    params: recordId == null ? undefined : { id: recordId },
-    queryOptions: { enabled: open && recordId != null && accessControlEnabled },
-  }));
-  const permissionPending = $derived(
-    accessControlEnabled && open && recordId != null && showPermission.isLoading
-  );
-  const canReadRecord = $derived(
-    resource.canShow !== false && (!accessControlEnabled || (!permissionPending && showPermission.allowed))
-  );
-  const query = useShow({
-    get resource() { return resourceName; },
-    get id() { return recordId; },
-    get queryOptions() { return { enabled: open && recordId != null && canReadRecord }; },
-  });
-
-  function navigateTo(action: 'show' | 'edit'): void {
-    if (recordId == null) return;
-    navigation[action](resourceName, recordId);
-    open = false;
-  }
 </script>
 
-<DetailDrawer
-  bind:open
-  title="{resource.label} {i18n.t('common.detail')}"
-  description={recordId == null ? undefined : `#${recordId}`}
-  closeLabel={i18n.t('common.close')}
-  width="w-full sm:max-w-xl"
-  {onClose}
-  data-svadmin-record-detail
->
-  {#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.data?.data}
-    {@const record = query.data.data as Record<string, unknown>}
-    <dl class="svadmin-u-fa6acbf81d74 svadmin-u-d2c3932343f5">
-      {#each showFields as field (field.key)}
-        {@const value = record[field.key]}
-        {@const DisplayComponent = getDisplayComponent(field.type)}
-        <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">
-            {#if DisplayComponent && value != null}
-              <DisplayComponent {value} options={field.options} resourceName={field.resource} />
-            {:else}
-              {value != null ? String(value) : '—'}
-            {/if}
-          </dd>
-        </div>
-      {/each}
-    </dl>
+{#if open}
+  {#if recordId != null}
+    <BoundRecordDetailDrawer {resourceName} {recordId} bind:open {...definedOptions({ onClose })} />
   {:else}
-    <div class="svadmin-u-61357c0c2f29 svadmin-u-ca6bf63030aa">
-      <p class="svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('common.noData')}</p>
-      {#if query.isError}
-        <p class="svadmin-u-50d0d216a2f8 svadmin-u-fc7473ca09eb svadmin-u-811148b13d1e">{(query.error as Error)?.message ?? i18n.t('common.operationFailed')}</p>
-      {/if}
-    </div>
+    <DetailDrawer bind:open title="{context.getResource(resourceName).label} {i18n.t('common.detail')}"
+      closeLabel={i18n.t('common.close')} {...definedOptions({ onClose })} data-svadmin-record-detail>
+      <p>{i18n.t('common.noData')}</p>
+    </DetailDrawer>
   {/if}
-
-  {#snippet footer()}
-    {#if canReadRecord && recordId != null && resource.canShow !== false}
-      <CanAccess resource={resourceName} action="show" params={{ id: recordId }}>
-        <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>
-      </CanAccess>
-    {/if}
-    {#if canReadRecord && recordId != null && resource.canEdit !== false}
-      <CanAccess resource={resourceName} action="edit" params={{ id: recordId }}>
-        <Button onclick={() => navigateTo('edit')}>
-          <Pencil class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" data-icon="inline-start" aria-hidden="true" />
-          {i18n.t('common.edit')}
-        </Button>
-      </CanAccess>
-    {/if}
-  {/snippet}
-</DetailDrawer>
+{/if}

package/dist/components/RecordRowActions.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { useCan } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { Eye, Pencil, PanelRight, Trash2 } from '@lucide/svelte';
+  import RowActions, { type RowActionItem } from './RowActions.svelte';
+  import TooltipButton from './TooltipButton.svelte';
+
+  let { resourceName, id, canShow, canEdit, canDelete, onShow, onEdit, onQuickEdit, onDelete }: {
+    resourceName: string;
+    id: string | number;
+    canShow: boolean;
+    canEdit: boolean;
+    canDelete: boolean;
+    onShow: () => void;
+    onEdit: () => void;
+    onQuickEdit: () => void;
+    onDelete: () => void;
+  } = $props();
+  const i18n = useTranslation();
+  const show = useCan(() => ({ resource: resourceName, action: 'show', id, queryOptions: { enabled: canShow } }));
+  const edit = useCan(() => ({ resource: resourceName, action: 'edit', id, queryOptions: { enabled: canEdit } }));
+  const remove = useCan(() => ({ resource: resourceName, action: 'delete', id, queryOptions: { enabled: canDelete } }));
+  // 编辑保持为可见主按钮；删除和快速编辑放入更多菜单。
+  const actions = $derived<RowActionItem[]>([
+    { label: i18n.t('common.quickEdit'), icon: PanelRight, hidden: !canEdit || edit.allowed !== true, onclick: onQuickEdit },
+    { label: i18n.t('common.delete'), icon: Trash2, hidden: !canDelete || remove.allowed !== true, danger: true, onclick: onDelete },
+  ]);
+</script>
+
+<RowActions {actions} maxVisible={0} moreLabel={i18n.t('common.moreActions')}>
+  {#if canShow && show.allowed === true}
+    <TooltipButton tooltip={i18n.t('common.detail')} variant="ghost" size="icon-sm" onclick={onShow}>
+      <Eye class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
+    </TooltipButton>
+  {/if}
+  {#if canEdit && edit.allowed === true}
+    <TooltipButton tooltip={i18n.t('common.edit')} variant="ghost" size="icon-sm" onclick={onEdit}>
+      <Pencil class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
+    </TooltipButton>
+  {/if}
+</RowActions>

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

@@ -0,0 +1,14 @@
+type $$ComponentProps = {
+    resourceName: string;
+    id: string | number;
+    canShow: boolean;
+    canEdit: boolean;
+    canDelete: boolean;
+    onShow: () => void;
+    onEdit: () => void;
+    onQuickEdit: () => void;
+    onDelete: () => void;
+};
+declare const RecordRowActions: import("svelte").Component<$$ComponentProps, {}, "">;
+type RecordRowActions = ReturnType<typeof RecordRowActions>;
+export default RecordRowActions;

package/dist/components/ResourceAccessGuard.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import type { Action } from '@svadmin/core';
   import { captureAdminContext, useCan } from '@svadmin/core';
   import type { Snippet } from 'svelte';
@@ -34,18 +36,18 @@
   );
   const sourceReadAllowedByResource = $derived(!requireSourceRead || resource.canShow !== false);
   const params = $derived(id === undefined ? undefined : { id });
-  const permission = useCan(() => ({
+  const permission = useCan(() => (definedOptions({
     resource: resourceName,
     action,
     params,
     queryOptions: { enabled: accessControlEnabled },
-  }));
-  const sourceReadPermission = useCan(() => ({
+  })));
+  const sourceReadPermission = useCan(() => (definedOptions({
     resource: resourceName,
     action: 'show',
     params,
     queryOptions: { enabled: accessControlEnabled && requireSourceRead },
-  }));
+  })));
   const permissionPending = $derived(
     accessControlEnabled
       && (permission.isLoading || (requireSourceRead && sourceReadPermission.isLoading)),
@@ -64,5 +66,5 @@
 {:else if allowed}
   {@render children()}
 {:else}
-  <DataState state="forbidden" description={denialReason} />
+  <DataState state="forbidden" {...definedOptions({ "description": denialReason })} />
 {/if}

package/dist/components/RetryTaskButton.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 handleRetry() {
     if (!taskProvider?.retry || pending) return;
+    const scopedTaskId = taskId;
+    const scope = adminContext.queryKeyMatcher();
     pending = true;
     try {
-      await taskProvider.retry(taskId);
+      const provider = withValidatedTaskProvider(taskProvider);
+      if (!provider.retry) return;
+      await provider.retry(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/RowActions.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import { Ellipsis } from '@lucide/svelte';
   import { tick, type Component, type Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
@@ -143,7 +145,7 @@
   {#each visibleActions as action (action)}
     {#if action.href}
       <Button
-        variant={resolvedVariant(action)}
+        {...definedOptions({ "variant": resolvedVariant(action) })}
         size="sm"
         href={action.href}
         disabled={action.disabled}
@@ -158,7 +160,7 @@
       </Button>
     {:else}
       <Button
-        variant={resolvedVariant(action)}
+        {...definedOptions({ "variant": resolvedVariant(action) })}
         size="sm"
         onclick={action.onclick}
         disabled={action.disabled}
@@ -188,7 +190,7 @@
           {#if action.href}
             <Button
               href={action.href}
-              variant={resolvedVariant(action)}
+              {...definedOptions({ "variant": resolvedVariant(action) })}
               size="sm"
               disabled={action.disabled}
               onclick={(event) => handleOverflowAction(action, event)}

package/dist/components/SensitiveDataMask.svelte

@@ -48,10 +48,10 @@
           : '********';
       case 'email': {
         const parts = val.split('@');
-        if (parts.length === 2) {
-          const name = parts[0];
+        const [name, domain] = parts;
+        if (parts.length === 2 && name && domain) {
           const maskedName = name.length > 2 ? `${name[0]}***${name.slice(-1)}` : `${name[0]}***`;
-          return `${maskedName}@${parts[1]}`;
+          return `${maskedName}@${domain}`;
         }
         return '***@***.***';
       }

package/dist/components/SettingsPage.svelte

@@ -108,7 +108,7 @@
   const i18n = useTranslation();
 
   let activeKey = $derived.by(() => {
-    const tab = getParams().tab;
+    const tab = getParams()['tab'];
     if (!tab) return "profile";
     const alias = tab === "api-keys" ? "api" : tab === "audit-logs" ? "audit" : tab;
     if (sectionKeys.has(alias)) return alias;

package/dist/components/ShowPage.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
-  import { useNavigation, useShow, getResource } from '@svadmin/core';
+  import { useNavigation } from '@svadmin/core';
+  import { useRecordDetail } from './record-detail.svelte';
   import { useTranslation } from '@svadmin/core/i18n';
   import type { Snippet } from 'svelte';
   import * as Card from './ui/card/index.js';
   import { Skeleton } from './ui/skeleton/index.js';
   import PageHeader from './PageHeader.svelte';
-  import { getDisplayComponent } from './fieldComponentMap.js';
+  import FieldDisplay from './FieldDisplay.svelte';
   import EditButton from './buttons/EditButton.svelte';
   import DeleteButton from './buttons/DeleteButton.svelte';
   import CloneButton from './buttons/CloneButton.svelte';
-  import RefreshButton from './buttons/RefreshButton.svelte';
+  import { Button } from './ui/button/index.js';
+  import { RefreshCw } from '@lucide/svelte';
 
   const i18n = useTranslation();
 
@@ -40,10 +42,10 @@
   const navigation = useNavigation();
   const isCompact = $derived(density === 'compact');
 
-  const resource = $derived(getResource(resourceName));
-  const showFields = $derived(resource.fields.filter(f => f.showInShow !== false));
-
-  const query = useShow({ get resource() { return resourceName; }, get id() { return id; } });
+  const detail = useRecordDetail(() => ({ resourceName, id }));
+  const resource = $derived(detail.resource);
+  const showFields = $derived(detail.fields);
+  const query = detail.query;
 
   const gridColumnClass = $derived.by(() => {
     switch (columns) {
@@ -63,23 +65,27 @@
     backLabel={i18n.t('common.backToList')}
   >
     {#snippet actions()}
-      {#if resource.canEdit !== false}
+      {#if detail.canRead && query.isSuccess && resource.canEdit !== false}
         <EditButton resource={resourceName} recordItemId={id} hideText />
       {/if}
-      {#if resource.canCreate !== false}
+      {#if detail.canRead && query.isSuccess && resource.canCreate !== false}
         <CloneButton resource={resourceName} recordItemId={id} hideText />
       {/if}
-      {#if resource.canDelete !== false}
+      {#if detail.canRead && query.isSuccess && resource.canDelete !== false}
         <DeleteButton resource={resourceName} recordItemId={id} hideText onSuccess={() => navigation.list(resourceName)} />
       {/if}
-      <RefreshButton resource={resourceName} hideText />
+      <Button type="button" variant="ghost" size="icon" title={i18n.t('common.refresh')}
+        aria-label={i18n.t('common.refresh')} aria-busy={query.isFetching}
+        disabled={!detail.canRead || query.isFetching} onclick={detail.refresh}>
+        <RefreshCw class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
+      </Button>
       {#if headerActions}
         {@render headerActions()}
       {/if}
     {/snippet}
   </PageHeader>
 
-  {#if query.isLoading}
+  {#if detail.checkingPermission || query.isLoading}
     <Card.Root class="svadmin-u-2cd02d11d1af svadmin-u-6ee2d41e2d2d svadmin-u-438b2237b8d6">
       <Card.Content class="svadmin-u-8a539c7fe216">
         {#each showFields.slice(0, 6) as _, i (i)}
@@ -90,26 +96,33 @@
         {/each}
       </Card.Content>
     </Card.Root>
-  {:else if query.data?.data}
+  {:else if !detail.canRead}
+    <p role="status" data-svadmin-access-denied>{i18n.t('common.accessDenied')}</p>
+  {: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}
+    {@const record = query.data.data}
     {#if layout === 'grid'}
       <Card.Root class="svadmin-u-2cd02d11d1af svadmin-u-6ee2d41e2d2d svadmin-u-438b2237b8d6">
         <Card.Content class="svadmin-u-8a539c7fe216">
           <dl class="svadmin-u-f3c543ad5fe9 svadmin-u-fa6acbf81d74 svadmin-u-3533cbce9e93 svadmin-u-4d9da416df16 {gridColumnClass}">
             {#each showFields as field, i (i)}
-              {@const value = ((query.data as { data: Record<string, unknown> }).data as Record<string, unknown>)[field.key]}
-              {@const DisplayComponent = getDisplayComponent(field.type)}
+              {@const value = record[field.key]}
               <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed {bordered ? 'svadmin-u-65fdbade2025 svadmin-u-5ceb636bd9f3 svadmin-u-cdf6e054e5e0 svadmin-u-b4cf72cd1cd8 svadmin-u-eb6e8b881acd svadmin-u-1884518576f2' : 'svadmin-u-eb6e8b881acd svadmin-u-1884518576f2 svadmin-u-65fdbade2025 svadmin-u-945ecb9a9005'}">
                 <dt class="svadmin-u-359090c2d529 svadmin-u-2689f3958069 svadmin-u-bfa603190748 svadmin-u-65281709dacf">{field.label}</dt>
                 <dd class="svadmin-u-359090c2d529 svadmin-u-e2327d142859 svadmin-u-d4108abe6359 svadmin-u-2689f3958069 svadmin-u-170cee3ff4e4">
-                  {#if DisplayComponent && value != null}
-                    <DisplayComponent
-                      {value}
-                      options={field.options}
-                      resourceName={field.resource}
-                    />
-                  {:else}
-                    {value != null ? String(value) : '—'}
-                  {/if}
+                  <FieldDisplay
+                    type={field.type}
+                    {value}
+                    options={field.options}
+                    resourceName={field.resource}
+                  />
                 </dd>
               </div>
             {/each}
@@ -120,20 +133,16 @@
       <Card.Root class="svadmin-u-2cd02d11d1af svadmin-u-6ee2d41e2d2d svadmin-u-438b2237b8d6">
         <Card.Content class="svadmin-u-8a539c7fe216 svadmin-u-fa6acbf81d74 svadmin-u-3533cbce9e93">
           {#each showFields as field, i (i)}
-            {@const value = ((query.data as { data: Record<string, unknown> }).data as Record<string, unknown>)[field.key]}
-            {@const DisplayComponent = getDisplayComponent(field.type)}
+            {@const value = record[field.key]}
             <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-020ba687fa12 {isCompact ? 'svadmin-u-f0faeb26d656 svadmin-u-03b4dd7f172b svadmin-u-cc06a6575385 svadmin-u-7209fd2a90e7' : 'svadmin-u-f0faeb26d656 svadmin-u-7a9aabfcd059 svadmin-u-1b2d54a3fd12 svadmin-u-4701b613ff95'} {i % 2 === 1 ? 'svadmin-u-8a25a995eb8e' : ''}">
               <div class="svadmin-u-b03f3c253900 {isCompact ? 'svadmin-u-359090c2d529' : 'svadmin-u-359090c2d529 svadmin-u-e2327d142859'} svadmin-u-2689f3958069 svadmin-u-bfa603190748 svadmin-u-65281709dacf svadmin-u-84bdd56b0e81">{field.label}</div>
               <div class="svadmin-u-6b3526212209 {isCompact ? 'svadmin-u-359090c2d529 svadmin-u-e2327d142859' : 'svadmin-u-fc7473ca09eb'} svadmin-u-d4108abe6359">
-                {#if DisplayComponent && value != null}
-                  <DisplayComponent
-                    {value}
-                    options={field.options}
-                    resourceName={field.resource}
-                  />
-                {:else}
-                  {value != null ? String(value) : '—'}
-                {/if}
+                <FieldDisplay
+                  type={field.type}
+                  {value}
+                  options={field.options}
+                  resourceName={field.resource}
+                />
               </div>
             </div>
           {/each}
@@ -147,9 +156,6 @@
     <Card.Root class="svadmin-u-2cd02d11d1af svadmin-u-6ee2d41e2d2d svadmin-u-438b2237b8d6">
       <Card.Content class="svadmin-u-845f53365c8d svadmin-u-ca6bf63030aa">
         <p class="svadmin-u-bfa603190748">{i18n.t('common.noData')}</p>
-        {#if query.isError}
-          <p class="svadmin-u-fc7473ca09eb svadmin-u-811148b13d1e svadmin-u-50d0d216a2f8">{(query.error as Error)?.message ?? i18n.t('common.operationFailed')}</p>
-        {/if}
       </Card.Content>
     </Card.Root>
   {/if}

package/dist/components/Sidebar.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import { captureAdminContext } from '@svadmin/core';
   import type { AccessControlProvider, Action, Identity, MenuItem } from '@svadmin/core';
   import { getPath } from '../router-state.svelte.js';
@@ -107,11 +109,11 @@
   async function checkAccess(provider: AccessControlProvider | null, resource: string, action: Action): Promise<boolean> {
     if (!provider) return true;
 
-    const result = await provider.can({
+    const result = await provider.can(definedOptions({
       resource,
       action,
       meta: adminContext.getProviderMeta(resource),
-    });
+    }));
     return Array.isArray(result) ? (result[0]?.can ?? false) : result.can;
   }
 
@@ -132,11 +134,11 @@
   }
 
   function snapshotCustomMenuItems(menuItems: MenuItem[]): MenuItem[] {
-    return menuItems.map((menuItem) => ({
+    return menuItems.map((menuItem) => (definedOptions({
       ...menuItem,
       meta: menuItem.meta ? { ...menuItem.meta } : undefined,
       children: menuItem.children ? snapshotCustomMenuItems(menuItem.children) : undefined,
-    }));
+    })));
   }
 
   async function visibleCustomMenuItem(menuItem: MenuItem, provider: AccessControlProvider | null): Promise<MenuItem | null> {
@@ -188,12 +190,12 @@
       const items: NavItem[] = [{ path: '/', label: homeLabel, Icon: LayoutDashboard }];
       for (const { r, can } of results) {
         if (can) {
-          items.push({
+          items.push(definedOptions({
             path: `/${r.name}`,
             label: r.label,
             Icon: (typeof r.icon === 'string' ? iconMap[r.icon] : r.icon) ?? iconMap[r.name] ?? Settings,
             group: r.group,
-          });
+          }));
         }
       }
       navItems = items;
@@ -454,14 +456,14 @@
       <div class="svadmin-u-0e17f2bd9074 svadmin-u-7fcf9124b5df svadmin-u-6b7d6e21ccbd">
         <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-7e9a2a250cc3 svadmin-u-5f22e64f2282 svadmin-u-7660b450905a svadmin-u-ceb69a6b0e5f svadmin-u-ace81495deee svadmin-u-34516836730d">
           <Avatar
-            src={(identity as Record<string, unknown>).avatar as string | undefined}
+            src={(identity as Record<string, unknown>)['avatar'] as string | undefined}
             alt={identity.name ?? 'User'}
             fallback={identity.name?.charAt(0).toUpperCase() ?? 'U'}
             size="sm"
           />
           <div class="svadmin-u-36e579c0b41c svadmin-u-7e0b7cdf1a94">
             <p class="svadmin-u-f283ea9bea0e svadmin-u-a14daebf7748 svadmin-u-2689f3958069 svadmin-u-a7a63217e098">{identity.name}</p>
-            <p class="svadmin-u-f283ea9bea0e svadmin-u-d058ca6de60f svadmin-u-5f1ff8fe8768">{((identity as Record<string, unknown>).role || (identity as Record<string, unknown>).roleName) ?? 'User'}</p>
+            <p class="svadmin-u-f283ea9bea0e svadmin-u-d058ca6de60f svadmin-u-5f1ff8fe8768">{((identity as Record<string, unknown>)['role'] || (identity as Record<string, unknown>)['roleName']) ?? 'User'}</p>
           </div>
           <button
             class="svadmin-u-d0a52b312f7d svadmin-u-cbbf90f9a828 svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-421ac2be5045 svadmin-u-3e3534b4c5df svadmin-u-646e10356266 svadmin-u-0b48b877be2a svadmin-u-ceb69a6b0e5f"

package/dist/components/SplitPaneLayout.svelte

@@ -35,10 +35,12 @@
       if (!containerEl) return;
       const rect = containerEl.getBoundingClientRect();
 
+      const pointer = 'touches' in ev ? ev.touches.item(0) : ev;
+      if (!pointer) return;
       const clientPos =
         direction === 'horizontal'
-          ? ('touches' in ev ? ev.touches[0].clientX - rect.left : ev.clientX - rect.left)
-          : ('touches' in ev ? ev.touches[0].clientY - rect.top : ev.clientY - rect.top);
+          ? pointer.clientX - rect.left
+          : pointer.clientY - rect.top;
       const totalSize = direction === 'horizontal' ? rect.width : rect.height;
 
       if (totalSize > 0) {