@svadmin/ui 0.56.0 → 0.58.0

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

@@ -42,7 +42,7 @@ interface Props {
     sorters?: Sort[];
     /** Custom batch actions to render when rows are selected */
     batchActions?: Snippet<[{
-        selectedIds: string[];
+        selectedIds: (string | number)[];
     }]>;
 }
 declare const AutoTable: import("svelte").Component<Props, {}, "">;

package/dist/components/CommandPalette.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { captureAdminContext, getResources, toggleTheme } from '@svadmin/core';
+  import { captureAdminContext, getResources, toggleTheme, useNavigation } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
   import { Command } from './ui/command/index.js';
   import * as Dialog from './ui/dialog/index.js';
   import { Search, LayoutDashboard, Plus, Sun, FileText, Sparkles } from '@lucide/svelte';
+  import CanAccess from './CanAccess.svelte';
 
   const i18n = useTranslation();
 
@@ -15,6 +16,7 @@
 
   let { open = $bindable(false), onAskAI }: Props = $props();
   const adminContext = captureAdminContext();
+  const navigation = useNavigation();
   let searchValue = $state('');
 
   const resources = $derived(getResources());
@@ -95,14 +97,27 @@
             {i18n.t('common.home')}
           </Command.Item>
           {#each resources as r, _i (_i)}
-            <Command.Item
-              value={r.name}
-              onSelect={() => act(() => adminContext.navigate(`/${r.name}`))}
-              class={itemClass}
-            >
-              <FileText class="h-4 w-4 text-muted-foreground" />
-              {r.label}
-            </Command.Item>
+            {#if adminContext.accessControlProvider}
+              <CanAccess resource={r.name} action="list">
+                <Command.Item
+                  value={r.name}
+                  onSelect={() => act(() => navigation.list(r.name))}
+                  class={itemClass}
+                >
+                  <FileText class="h-4 w-4 text-muted-foreground" />
+                  {r.label}
+                </Command.Item>
+              </CanAccess>
+            {:else}
+              <Command.Item
+                value={r.name}
+                onSelect={() => act(() => navigation.list(r.name))}
+                class={itemClass}
+              >
+                <FileText class="h-4 w-4 text-muted-foreground" />
+                {r.label}
+              </Command.Item>
+            {/if}
           {/each}
         </Command.Group>
 
@@ -111,14 +126,21 @@
         <!-- Actions -->
         <Command.Group heading={i18n.t('common.actions')}>
           {#each resources as r, _i (_i)}
-            <Command.Item
-              value={"create-" + r.name}
-              onSelect={() => act(() => adminContext.navigate(`/${r.name}/create`))}
-              class={itemClass}
-            >
-              <Plus class="h-4 w-4 text-muted-foreground" />
-              {i18n.t('common.create')} {r.label}
-            </Command.Item>
+            {#if r.canCreate !== false}
+              {#if adminContext.accessControlProvider}
+                <CanAccess resource={r.name} action="create">
+                  <Command.Item value={"create-" + r.name} onSelect={() => act(() => navigation.create(r.name))} class={itemClass}>
+                    <Plus class="h-4 w-4 text-muted-foreground" />
+                    {i18n.t('common.create')} {r.label}
+                  </Command.Item>
+                </CanAccess>
+              {:else}
+                <Command.Item value={"create-" + r.name} onSelect={() => act(() => navigation.create(r.name))} class={itemClass}>
+                  <Plus class="h-4 w-4 text-muted-foreground" />
+                  {i18n.t('common.create')} {r.label}
+                </Command.Item>
+              {/if}
+            {/if}
           {/each}
           <Command.Item
             value="toggle-theme"

package/dist/components/ConfirmDialog.svelte

@@ -7,13 +7,14 @@
 
   let { open = $bindable(false), title, message = '',
     confirmText, cancelText, variant = 'danger',
-    onconfirm, oncancel } = $props<{
+    confirming = false, onconfirm, oncancel } = $props<{
     open?: boolean;
     title?: string;
     message?: string;
     confirmText?: string;
     cancelText?: string;
     variant?: 'danger' | 'warning' | 'info';
+    confirming?: boolean;
     onconfirm: () => void;
     oncancel: () => void;
   }>();
@@ -52,14 +53,14 @@
     <AlertDialog.Footer>
       <AlertDialog.Cancel>
         {#snippet child({ props })}
-          <Button variant="outline" {...props}>
+          <Button variant="outline" {...props} disabled={confirming}>
             {resolvedCancelText}
           </Button>
         {/snippet}
       </AlertDialog.Cancel>
       <AlertDialog.Action>
         {#snippet child({ props })}
-          <Button variant={variantMap[variant as keyof typeof variantMap]} {...props} onclick={handleConfirm}>
+          <Button variant={variantMap[variant as keyof typeof variantMap]} {...props} disabled={confirming} onclick={handleConfirm}>
             {resolvedConfirmText}
           </Button>
         {/snippet}

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

@@ -5,6 +5,7 @@ type $$ComponentProps = {
     confirmText?: string;
     cancelText?: string;
     variant?: 'danger' | 'warning' | 'info';
+    confirming?: boolean;
     onconfirm: () => void;
     oncancel: () => void;
 };

package/dist/components/CopilotPanel.svelte

@@ -181,16 +181,16 @@ Keep it concise, professional, and use bullet points.`;
         </h4>
         <div class="space-y-2">
           {#if ctx.currentView === 'list'}
-            <button class="w-full flex items-center gap-2 text-left p-2 rounded-lg hover:bg-muted border border-transparent hover:border-border transition-colors text-sm">
+            <button type="button" class="w-full flex items-center gap-2 text-left p-2 rounded-lg hover:bg-muted border border-transparent hover:border-border transition-colors text-sm cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
               <div class="bg-background rounded shadow-sm p-1"><Check class="h-3.5 w-3.5 text-muted-foreground" /></div>
               <span>Generate monthly report</span>
             </button>
-            <button class="w-full flex items-center gap-2 text-left p-2 rounded-lg hover:bg-muted border border-transparent hover:border-border transition-colors text-sm">
+            <button type="button" class="w-full flex items-center gap-2 text-left p-2 rounded-lg hover:bg-muted border border-transparent hover:border-border transition-colors text-sm cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
               <div class="bg-background rounded shadow-sm p-1"><Check class="h-3.5 w-3.5 text-muted-foreground" /></div>
               <span>Find anomalies in {ctx.currentResource}</span>
             </button>
           {:else if ctx.currentView === 'edit' || ctx.currentView === 'create'}
-            <button class="w-full flex items-center gap-2 text-left p-2 rounded-lg hover:bg-muted border border-transparent hover:border-border transition-colors text-sm">
+            <button type="button" class="w-full flex items-center gap-2 text-left p-2 rounded-lg hover:bg-muted border border-transparent hover:border-border transition-colors text-sm cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
               <div class="bg-background rounded shadow-sm p-1"><Check class="h-3.5 w-3.5 text-muted-foreground" /></div>
               <span>Auto-fill form from context</span>
             </button>

package/dist/components/DraggableHeader.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
   /**
    * DraggableHeader — Wraps table header cells with HTML5 Drag and Drop
-   * to enable column reorder. Persists order to localStorage.
+   * to enable column reorder. The parent owns persistence and restoration.
    *
    * Usage:
-   *   <DraggableHeader columns={columns} resourceName="posts" onReorder={handleReorder}>
+   *   <DraggableHeader columns={columns} onReorder={handleReorder}>
    *     {#snippet header(column, index)}
    *       <th>...</th>
    *     {/snippet}
@@ -18,40 +17,28 @@
     [key: string]: unknown;
   }
 
+  interface DragHeaderProps {
+    draggable: true;
+    ondragstart: (event: DragEvent) => void;
+    ondragover: (event: DragEvent) => void;
+    ondrop: (event: DragEvent) => void;
+    ondragend: () => void;
+    'data-dragging': boolean;
+    'data-drop-target': boolean;
+    class: string;
+  }
+
   interface Props {
     columns: Column[];
-    resourceName: string;
     onReorder: (newOrder: Column[]) => void;
-    header: Snippet<[Column, number, Record<string, any>]>;
+    header: Snippet<[Column, number, DragHeaderProps]>;
   }
 
-  let { columns, resourceName, onReorder, header }: Props = $props();
+  let { columns, onReorder, header }: Props = $props();
 
   let dragIndex = $state<number | null>(null);
   let dropIndex = $state<number | null>(null);
 
-  let _restored = false;
-  $effect(() => {
-    if (_restored || columns.length === 0) return;
-    const storageKey = `svadmin-colorder-${resourceName}`;
-    if (typeof window === 'undefined') return;
-    _restored = true;
-    try {
-      const saved = localStorage.getItem(storageKey);
-      if (saved) {
-        const savedOrder: string[] = JSON.parse(saved);
-        const reordered = savedOrder
-          .map(id => columns.find(c => c.id === id))
-          .filter((c): c is Column => c !== undefined);
-        // Add any new columns not in saved order
-        const remaining = columns.filter(c => !savedOrder.includes(c.id));
-        if (reordered.length > 0) {
-          onReorder([...reordered, ...remaining]);
-        }
-      }
-    } catch { /* ignore */ }
-  });
-
   function handleDragStart(e: DragEvent, index: number) {
     dragIndex = index;
     if (e.dataTransfer) {
@@ -80,14 +67,6 @@
     const [moved] = newColumns.splice(dragIndex, 1);
     newColumns.splice(index, 0, moved);
 
-    // Persist to localStorage
-    const storageKey = `svadmin-colorder-${resourceName}`;
-    if (typeof window !== 'undefined') {
-      try {
-        localStorage.setItem(storageKey, JSON.stringify(newColumns.map(c => c.id)));
-      } catch { /* ignore */ }
-    }
-
     onReorder(newColumns);
     dragIndex = null;
     dropIndex = null;

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

@@ -1,9 +1,9 @@
 /**
    * DraggableHeader — Wraps table header cells with HTML5 Drag and Drop
-   * to enable column reorder. Persists order to localStorage.
+   * to enable column reorder. The parent owns persistence and restoration.
    *
    * Usage:
-   *   <DraggableHeader columns={columns} resourceName="posts" onReorder={handleReorder}>
+   *   <DraggableHeader columns={columns} onReorder={handleReorder}>
    *     {#snippet header(column, index)}
    *       <th>...</th>
    *     {/snippet}
@@ -14,11 +14,20 @@ interface Column {
     id: string;
     [key: string]: unknown;
 }
+interface DragHeaderProps {
+    draggable: true;
+    ondragstart: (event: DragEvent) => void;
+    ondragover: (event: DragEvent) => void;
+    ondrop: (event: DragEvent) => void;
+    ondragend: () => void;
+    'data-dragging': boolean;
+    'data-drop-target': boolean;
+    class: string;
+}
 interface Props {
     columns: Column[];
-    resourceName: string;
     onReorder: (newOrder: Column[]) => void;
-    header: Snippet<[Column, number, Record<string, any>]>;
+    header: Snippet<[Column, number, DragHeaderProps]>;
 }
 declare const DraggableHeader: import("svelte").Component<Props, {}, "">;
 type DraggableHeader = ReturnType<typeof DraggableHeader>;

package/dist/components/EditPage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { captureAdminContext, getResource } from '@svadmin/core';
+  import { getResource, useNavigation } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
 
   import type { Snippet } from 'svelte';
@@ -35,7 +35,7 @@
     onSuccess,
     class: className = '',
   }: Props = $props();
-  const adminContext = captureAdminContext();
+  const navigation = useNavigation();
   let navigateGuard = $state<(fn: () => void) => void>((fn) => fn());
 
   const resource = $derived(getResource(resourceName));
@@ -47,14 +47,14 @@
   <PageHeader
     title={pageTitle}
     {density}
-    onBack={() => navigateGuard(() => adminContext.navigate(`/${resourceName}`))}
+    onBack={() => navigateGuard(() => navigation.list(resourceName))}
   >
     {#snippet actions()}
       <ListButton resource={resourceName} hideText onBeforeNavigate={navigateGuard} />
       <ShowButton resource={resourceName} recordItemId={id} hideText onBeforeNavigate={navigateGuard} />
       <RefreshButton resource={resourceName} hideText />
       {#if showDelete !== false}
-        <DeleteButton resource={resourceName} recordItemId={id} hideText onSuccess={() => adminContext.navigate(`/${resourceName}`)} />
+        <DeleteButton resource={resourceName} recordItemId={id} hideText onSuccess={() => navigation.list(resourceName)} />
       {/if}
       {#if headerActions}
         {@render headerActions()}

package/dist/components/EmptyState.svelte

@@ -17,7 +17,7 @@
 </script>
 
 <div
-  class="flex flex-col items-center justify-center p-8 text-center min-h-[300px] bg-card/50 rounded-lg shadow-sm"
+  class="flex flex-col items-center justify-center rounded-lg bg-card/50 px-8 py-10 text-center shadow-sm"
   in:scale={{ start: 0.95, duration: 250, opacity: 0 }}
 >
   <div class="h-20 w-20 rounded-full bg-muted flex items-center justify-center mb-4">

package/dist/components/ErrorComponent.svelte

@@ -19,7 +19,7 @@
   }>();
 </script>
 
-<div class="flex flex-col items-center justify-center p-8 text-center min-h-[300px]">
+<div class="flex flex-col items-center justify-center px-8 py-10 text-center">
   <Alert.Root variant="destructive" class="max-w-md text-left">
     <AlertTriangle class="h-5 w-5" />
     <Alert.Title>{title}</Alert.Title>

package/dist/components/FieldRenderer.svelte

@@ -17,6 +17,7 @@
   import TooltipButton from './TooltipButton.svelte';
   import ComboboxField from './ComboboxField.svelte';
   import ArrayField from './fields/ArrayField.svelte';
+  import MediaThumbnail from './content/MediaThumbnail.svelte';
   import { Plus, X } from '@lucide/svelte';
   import type { Snippet } from 'svelte';
   import { getRichTextEditor } from '../editor-config.svelte.js';
@@ -429,7 +430,7 @@
             {disabled}
           />
           {#if url}
-            <img src={url} alt="preview" class="h-9 w-9 rounded object-cover border" />
+            <div class="size-9 shrink-0"><MediaThumbnail src={url} alt="preview" size="full" fit="cover" showOverlay={false} /></div>
           {/if}
           <TooltipButton tooltip={i18n.t('common.removeImage')} variant="ghost" size="icon" class="h-8 w-8 shrink-0" onclick={() => removeImage(i)}>
             <X class="h-3.5 w-3.5" />

package/dist/components/ListPage.svelte

@@ -1,15 +1,11 @@
 <script lang="ts">
-  import { captureAdminContext, getResource } from '@svadmin/core';
-  import { useTranslation } from '@svadmin/core/i18n';
+  import { getResource } from '@svadmin/core';
 
   import type { Snippet } from 'svelte';
   import type { FieldDefinition } from '@svadmin/core';
   import PageHeader from './PageHeader.svelte';
   import AutoTable from './AutoTable.svelte';
-  import { Button } from './ui/button/index.js';
-  import { Plus } from '@lucide/svelte';
-
-  const i18n = useTranslation();
+  import CreateButton from './buttons/CreateButton.svelte';
 
   interface Props {
     resourceName: string;
@@ -25,7 +21,7 @@
     /** Optional filter toolbar slot between status tabs and table */
     filterToolbar?: Snippet;
     /** Passthrough: custom batch actions to render when rows are selected */
-    batchActions?: Snippet<[{ selectedIds: string[] }]>;
+    batchActions?: Snippet<[{ selectedIds: (string | number)[] }]>;
     /** Passthrough: custom cell renderer per field */
     cellRenderer?: Snippet<[{ field: FieldDefinition; value: unknown; record: Record<string, unknown> }]>;
     /** Passthrough: custom row actions */
@@ -53,8 +49,6 @@
     expandedRowRender,
     class: className = '',
   }: Props = $props();
-  const adminContext = captureAdminContext();
-
   const resource = $derived(getResource(resourceName));
   const pageTitle = $derived(title ?? resource.label);
   const showCreate = $derived(canCreate ?? resource.canCreate !== false);
@@ -64,9 +58,7 @@
   <PageHeader title={pageTitle} {density}>
     {#snippet actions()}
       {#if showCreate}
-        <Button size={density === 'compact' ? 'sm' : 'default'} onclick={() => adminContext.navigate(`/${resourceName}/create`)}>
-          <Plus class="h-4 w-4" data-icon="inline-start" /> {i18n.t('common.create')}
-        </Button>
+        <CreateButton resource={resourceName} />
       {/if}
       {#if headerActions}
         {@render headerActions()}

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

@@ -15,7 +15,7 @@ interface Props {
     filterToolbar?: Snippet;
     /** Passthrough: custom batch actions to render when rows are selected */
     batchActions?: Snippet<[{
-        selectedIds: string[];
+        selectedIds: (string | number)[];
     }]>;
     /** Passthrough: custom cell renderer per field */
     cellRenderer?: Snippet<[{

package/dist/components/RecordDetailDrawer.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import { captureAdminContext, getResource, useCan, useNavigation, useShow } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { Eye, Pencil } from '@lucide/svelte';
+  import CanAccess from './CanAccess.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<{
+    resourceName: string;
+    open?: boolean;
+    recordId?: string | number;
+    onClose?: () => void;
+  }>();
+
+  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="divide-y divide-border/60" aria-label={i18n.t('common.loading')}>
+      {#each showFields.slice(0, 6) as field (field.key)}
+        <div class="grid gap-2 py-4 sm:grid-cols-[minmax(8rem,1fr)_2fr] sm:gap-6">
+          <Skeleton class="h-4 w-24" />
+          <Skeleton class="h-4 w-full max-w-64" />
+        </div>
+      {/each}
+    </div>
+  {:else if !canReadRecord}
+    <div class="py-12 text-center" data-svadmin-access-denied>
+      <p class="text-sm text-muted-foreground">{i18n.t('common.accessDenied')}</p>
+    </div>
+  {:else if query.data?.data}
+    {@const record = query.data.data as Record<string, unknown>}
+    <dl class="divide-y divide-border/60">
+      {#each showFields as field (field.key)}
+        {@const value = record[field.key]}
+        {@const DisplayComponent = getDisplayComponent(field.type)}
+        <div class="grid gap-1.5 py-4 sm:grid-cols-[minmax(8rem,1fr)_2fr] sm:gap-6">
+          <dt class="text-xs font-medium text-muted-foreground sm:text-sm">{field.label}</dt>
+          <dd class="min-w-0 break-words text-sm text-foreground">
+            {#if DisplayComponent && value != null}
+              <DisplayComponent {value} options={field.options} resourceName={field.resource} />
+            {:else}
+              {value != null ? String(value) : '—'}
+            {/if}
+          </dd>
+        </div>
+      {/each}
+    </dl>
+  {:else}
+    <div class="py-12 text-center">
+      <p class="text-sm text-muted-foreground">{i18n.t('common.noData')}</p>
+      {#if query.isError}
+        <p class="mt-2 text-sm text-destructive">{(query.error as Error)?.message ?? i18n.t('common.operationFailed')}</p>
+      {/if}
+    </div>
+  {/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="h-4 w-4" data-icon="inline-start" />
+          {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="h-4 w-4" data-icon="inline-start" />
+          {i18n.t('common.edit')}
+        </Button>
+      </CanAccess>
+    {/if}
+  {/snippet}
+</DetailDrawer>

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

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

package/dist/components/ResourceAccessGuard.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import type { Action } from '@svadmin/core';
+  import { captureAdminContext, useCan } from '@svadmin/core';
+  import type { Snippet } from 'svelte';
+  import DataState from './content/DataState.svelte';
+
+  interface Props {
+    resourceName: string;
+    action: Action;
+    id?: string | number;
+    requireSourceRead?: boolean;
+    children: Snippet;
+  }
+
+  let {
+    resourceName,
+    action,
+    id,
+    requireSourceRead = false,
+    children,
+  }: Props = $props();
+
+  const adminContext = captureAdminContext();
+  const resource = $derived(adminContext.getResource(resourceName));
+  const accessControlEnabled = $derived(Boolean(adminContext.accessControlProvider));
+  const actionAllowedByResource = $derived(
+    action === 'create'
+      ? resource.canCreate !== false
+      : action === 'edit'
+        ? resource.canEdit !== false
+        : action === 'show'
+          ? resource.canShow !== false
+          : true,
+  );
+  const sourceReadAllowedByResource = $derived(!requireSourceRead || resource.canShow !== false);
+  const params = $derived(id === undefined ? undefined : { id });
+  const permission = useCan(() => ({
+    resource: resourceName,
+    action,
+    params,
+    queryOptions: { enabled: accessControlEnabled },
+  }));
+  const sourceReadPermission = useCan(() => ({
+    resource: resourceName,
+    action: 'show',
+    params,
+    queryOptions: { enabled: accessControlEnabled && requireSourceRead },
+  }));
+  const permissionPending = $derived(
+    accessControlEnabled
+      && (permission.isLoading || (requireSourceRead && sourceReadPermission.isLoading)),
+  );
+  const allowed = $derived(
+    actionAllowedByResource
+      && sourceReadAllowedByResource
+      && (!accessControlEnabled || permission.allowed)
+      && (!requireSourceRead || !accessControlEnabled || sourceReadPermission.allowed),
+  );
+  const denialReason = $derived(permission.reason ?? sourceReadPermission.reason);
+</script>
+
+{#if permissionPending}
+  <DataState state="loading" />
+{:else if allowed}
+  {@render children()}
+{:else}
+  <DataState state="forbidden" description={denialReason} />
+{/if}

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

@@ -0,0 +1,12 @@
+import type { Action } from '@svadmin/core';
+import type { Snippet } from 'svelte';
+interface Props {
+    resourceName: string;
+    action: Action;
+    id?: string | number;
+    requireSourceRead?: boolean;
+    children: Snippet;
+}
+declare const ResourceAccessGuard: import("svelte").Component<Props, {}, "">;
+type ResourceAccessGuard = ReturnType<typeof ResourceAccessGuard>;
+export default ResourceAccessGuard;

package/dist/components/ResourceOperationsPage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { captureAdminContext } from '@svadmin/core';
+  import { getResource, useCan, useNavigation } from '@svadmin/core';
   import type { Component } from 'svelte';
   import AutoTable from './AutoTable.svelte';
   import { Badge } from './ui/badge/index.js';
@@ -75,7 +75,10 @@
     highlightsLabel = 'Focus queue',
     workspaceStyle = 'operations',
   }: Props = $props();
-  const adminContext = captureAdminContext();
+  const navigation = useNavigation();
+  const resource = $derived(getResource(resourceName));
+  const createPermission = useCan(() => ({ resource: resourceName, action: 'create' }));
+  const showCreate = $derived(resource.canCreate !== false && createPermission.allowed);
 </script>
 
 <div class="space-y-6" data-svadmin-resource-operations={resourceName} data-svadmin-workspace-style={workspaceStyle} data-svadmin-layout-identity={workspaceStyle}>
@@ -84,7 +87,9 @@
       {#if Icon}<span class="flex size-9 shrink-0 items-center justify-center rounded-md border border-border bg-card text-primary"><Icon class="size-4" /></span>{/if}
       <div class="min-w-0"><Badge variant="outline">{eyebrow}</Badge><h1 class="mt-2 text-xl font-semibold text-foreground">{title}</h1><p class="mt-1 max-w-3xl text-sm leading-6 text-muted-foreground">{description}</p></div>
     </div>
-    <Button class="shrink-0" size="sm" onclick={() => adminContext.navigate(`/${resourceName}/create`)}>{actionLabel}</Button>
+    {#if showCreate}
+      <Button class="shrink-0" size="sm" onclick={() => navigation.create(resourceName)}>{actionLabel}</Button>
+    {/if}
   </header>
 
   {#if workspaceStyle === 'inventory'}