@svadmin/ui 0.70.0 → 0.73.0

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/ShowInferencer.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { ResourceRendering } from '../rendering/index.js';
   // ShowInferencer renders a detail page from the resource definition with no page-specific configuration.
   // The :id parameter is extracted from the URL automatically.
   import ShowPage from './ShowPage.svelte';
@@ -6,16 +7,17 @@
 
   interface Props {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     /** Optional explicit id; defaults to the value parsed from the URL. */
     id?: string | number;
     class?: string;
   }
 
-  let { resourceName, id, class: className = '' }: Props = $props();
+  let { resourceName, rendering, id, class: className = '' }: Props = $props();
   const parsed = useParsed();
   const resolvedId = $derived(id ?? parsed.id ?? '');
 </script>
 
 {#if resolvedId}
-  <ShowPage {resourceName} id={resolvedId} class={className} />
+  <ShowPage {rendering} {resourceName} id={resolvedId} class={className} />
 {/if}

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

@@ -1,5 +1,7 @@
+import type { ResourceRendering } from '../rendering/index.js';
 interface Props {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     /** Optional explicit id; defaults to the value parsed from the URL. */
     id?: string | number;
     class?: string;

package/dist/components/ShowPage.svelte

@@ -1,20 +1,24 @@
 <script lang="ts">
-  import { useNavigation, useShow, getResource } from '@svadmin/core';
+  import type { ResourceRendering } from '../rendering/index.js';
+  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();
 
   interface Props {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     id: string | number;
     density?: 'compact' | 'comfortable';
     layout?: 'list' | 'grid';
@@ -27,6 +31,7 @@
 
   let {
     resourceName,
+    rendering,
     id,
     density = 'comfortable',
     layout = 'list',
@@ -40,10 +45,11 @@
   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, rendering }));
+  const activeRendering = $derived(detail.rendering);
+  const resource = $derived(detail.resource);
+  const showFields = $derived(detail.fields);
+  const query = detail.query;
 
   const gridColumnClass = $derived.by(() => {
     switch (columns) {
@@ -55,7 +61,7 @@
   });
 </script>
 
-<div class="{isCompact ? 'svadmin-u-6ed543e2fbbb' : 'svadmin-u-3e7ce58d64fa'} {className}">
+<div data-svadmin-rendering-resource={activeRendering?.resource.name} data-svadmin-rendering-kind={activeRendering ? 'show' : undefined} class="{isCompact ? 'svadmin-u-6ed543e2fbbb' : 'svadmin-u-3e7ce58d64fa'} {className}">
   <PageHeader
     title="{resource.label} {i18n.t('common.detail')} #{id}"
     {density}
@@ -63,23 +69,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 +100,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 = activeRendering ? activeRendering.record(query.data.data) : 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 +137,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 +160,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/ShowPage.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;
     id: string | number;
     density?: 'compact' | 'comfortable';
     layout?: 'list' | 'grid';

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;
@@ -307,10 +309,10 @@
   aria-label="Sidebar navigation"
   class="svadmin-u-7bc555991dba svadmin-u-5f89f14a26db svadmin-u-c78facc7a0a6 svadmin-u-0f2fff0ae96e svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-5ceb636bd9f3 svadmin-u-6ee2d41e2d2d svadmin-u-0fe7d7d814d0 svadmin-u-7890552ecd63"
   style="background-color: var(--sidebar);"
-  class:w-[252px]={!collapsed}
-  class:w-[70px]={collapsed}
+  class:svadmin-sidebar--expanded={!collapsed}
+  class:svadmin-sidebar--collapsed={collapsed}
 >
-  <div class="svadmin-u-60fbb7713999 svadmin-u-07017cde3e97 svadmin-u-3960ffc248d9 svadmin-u-012fbd121f37" class:px-5={!collapsed} class:justify-center={collapsed}>
+  <div class="svadmin-u-60fbb7713999 svadmin-u-07017cde3e97 svadmin-u-3960ffc248d9 svadmin-u-012fbd121f37" class:svadmin-u-d139dd09e38d={!collapsed} class:svadmin-u-86843cf1e227={collapsed}>
     {#if !collapsed}
       <a href={formatSidebarLink('/')} class="group svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-7e9a2a250cc3" onclick={(e) => { e.preventDefault(); adminContext.navigate('/'); }}>
         <SvadminLogo />
@@ -329,7 +331,7 @@
   </div>
 
   <ScrollArea class="svadmin-u-36e579c0b41c sidebar-scroll">
-  <nav aria-label="Main menu" class="svadmin-u-9fcd8a13827e" class:px-[10px]={!collapsed} class:px-2={collapsed}>
+  <nav aria-label="Main menu" class="svadmin-u-9fcd8a13827e" class:svadmin-u-7597e11b4d4b={!collapsed} class:svadmin-u-d5eab218aa34={collapsed}>
     {#if menu && menu.length > 0}
       <div class="svadmin-u-a26339f4b89e">
         {#each customMenuItems as item (item.name)}
@@ -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"
@@ -509,7 +511,7 @@
         <Tooltip.Root>
           <Tooltip.Trigger>
             {#snippet child({ props }: { props: Record<string, unknown> })}
-              <Button {...props} variant="ghost" size="icon" onclick={onToggle} class="svadmin-u-ed8a5df7b2fb svadmin-u-2bbcfc3b5179 svadmin-u-421ac2be5045 svadmin-u-68d55a736ff4 svadmin-u-55d1f8b9d318 svadmin-u-646e10356266">
+              <Button {...props} aria-label={i18n.t('common.toggleSidebar')} variant="ghost" size="icon" onclick={onToggle} class="svadmin-u-ed8a5df7b2fb svadmin-u-2bbcfc3b5179 svadmin-u-421ac2be5045 svadmin-u-68d55a736ff4 svadmin-u-55d1f8b9d318 svadmin-u-646e10356266">
                 <ChevronRight class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
               </Button>
             {/snippet}

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) {