@svadmin/ui 0.37.0 → 0.38.0

package/dist/components/SidebarItem.svelte

@@ -2,12 +2,14 @@
   import type { MenuItem } from '@svadmin/core';
   import * as Collapsible from './ui/collapsible/index.js';
   import * as Tooltip from './ui/tooltip/index.js';
+  import { Badge } from './ui/badge/index.js';
   import SidebarItem from './SidebarItem.svelte';
   import {
     LayoutDashboard, FileText, Users, Settings, Home,
     ChevronDown, Folder, ExternalLink, Repeat, ClipboardCheck, SlidersHorizontal, AlertTriangle,
-    Mail, Send, ShoppingBag, Briefcase, Building2, Calendar, Bell, Clock, Trash2, Palette, Layout,
+    Mail, Map as MapIcon, MessageSquare, Send, ShoppingBag, Star, Briefcase, Building2, Calendar, Bell, Clock, Tag, Trash2, Palette, Layout,
     Download, ListTodo, TrendingUp, Sparkles, Images, Bot, Key, KeyRound, CreditCard, BookOpen, Wrench, Shield,
+    Circle,
   } from '@lucide/svelte';
 
   import { formatLink } from '@svadmin/core/router';
@@ -32,13 +34,17 @@
     'sliders-horizontal': SlidersHorizontal,
     'alert-triangle': AlertTriangle,
     mail: Mail,
+    map: MapIcon,
+    'message-square': MessageSquare,
     send: Send,
     'shopping-bag': ShoppingBag,
+    star: Star,
     briefcase: Briefcase,
     building: Building2,
     calendar: Calendar,
     bell: Bell,
     clock: Clock,
+    tag: Tag,
     trash: Trash2,
     palette: Palette,
     layout: Layout,
@@ -57,7 +63,7 @@
   };
 
   function getIcon(name?: unknown): typeof LayoutDashboard {
-    if (!name) return depth === 0 ? Settings : Folder;
+    if (!name) return depth === 0 ? Settings : Circle;
     if (typeof name !== 'string') return name as typeof LayoutDashboard;
     return iconMap[name] ?? Settings;
   }
@@ -68,11 +74,12 @@
 
   function isActive(itemHref: string | undefined): boolean {
     if (!itemHref) return false;
-    if (itemHref === '/') return currentPath === '/';
-    return currentPath.startsWith(itemHref) && (currentPath.length === itemHref.length || currentPath[itemHref.length] === '/');
+    const baseHref = itemHref.replace(/^#/, '').split(/[?#]/)[0] || '/';
+    const baseCurrentPath = currentPath.replace(/^#/, '').split(/[?#]/)[0] || '/';
+    if (baseHref === '/') return baseCurrentPath === '/';
+    return baseCurrentPath.startsWith(baseHref) && (baseCurrentPath.length === baseHref.length || baseCurrentPath[baseHref.length] === '/');
   }
 
-  /** Check if any child (recursively) is active — used to auto-open parent groups */
   function hasActiveChild(menuItem: MenuItem): boolean {
     if (isActive(menuItem.href)) return true;
     return menuItem.children?.some((c: MenuItem) => hasActiveChild(c)) ?? false;
@@ -85,42 +92,73 @@
 
   const finalHref = $derived(isExternal ? item.href : (item.href ? formatLink(item.href) : undefined));
 
-  // Track open state — auto-open if a child is active
   let isOpen = $state(false);
   $effect(() => { if (childActive) isOpen = true; });
 
   const Icon = $derived(getIcon(item.icon));
   const label = $derived(getLabel(item));
+  const soon = $derived(Boolean((item.meta as { soon?: boolean } | undefined)?.soon));
+
+  const isTopLevel = $derived(depth === 0);
+  const indentPx = $derived(isTopLevel ? 10 : 10 + depth * 16);
 </script>
 
 {#if item.meta?.hidden}
-  <!-- hidden item, render nothing -->
+  <!-- hidden -->
 {:else if hasChildren && !collapsed}
-  <!-- Parent node with children: render as collapsible group -->
-  <Collapsible.Root bind:open={isOpen}>
-    <Collapsible.Trigger
-      class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200
-      {childActive
-        ? 'text-sidebar-foreground bg-sidebar-accent/30'
-        : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
-      style="padding-left: {12 + depth * 12}px"
-    >
-      <span class="flex items-center gap-3">
-        <Icon class="h-4 w-4 flex-shrink-0" />
-        <span>{label}</span>
-      </span>
-      <ChevronDown class="h-3.5 w-3.5 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
-    </Collapsible.Trigger>
-    <Collapsible.Content>
-      <div class="mt-0.5 space-y-0.5" style="padding-left: {depth > 0 ? 0 : 0}px">
-        {#each item.children as child, _i (_i)}
-          <SidebarItem item={child} {currentPath} {collapsed} depth={depth + 1} />
-        {/each}
-      </div>
-    </Collapsible.Content>
-  </Collapsible.Root>
+  {#if isTopLevel}
+    <div class="mt-3 first:mt-0">
+      <Collapsible.Root bind:open={isOpen}>
+        <Collapsible.Trigger
+          class="sidebar-menu-item flex w-full items-center justify-between rounded-md py-[7px] text-[13px] font-medium transition-colors duration-150
+          {childActive
+            ? 'text-sidebar-foreground'
+            : 'text-sidebar-foreground/70 hover:text-sidebar-foreground'}"
+          style="padding-left: {indentPx}px; padding-right: 10px"
+        >
+          <span class="flex items-center gap-2.5">
+            <Icon class="h-[18px] w-[18px] flex-shrink-0 {childActive ? 'text-primary' : 'text-sidebar-foreground/50'}" />
+            <span>{label}</span>
+          </span>
+          <ChevronDown class="h-3.5 w-3.5 text-sidebar-foreground/40 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
+        </Collapsible.Trigger>
+        <Collapsible.Content>
+          <div class="relative mt-[2px]">
+            <div class="absolute left-[19px] top-0 bottom-0 w-px bg-border/60"></div>
+            <div class="space-y-[1px]">
+              {#each item.children as child, _i (_i)}
+                <SidebarItem item={child} {currentPath} {collapsed} depth={depth + 1} />
+              {/each}
+            </div>
+          </div>
+        </Collapsible.Content>
+      </Collapsible.Root>
+    </div>
+  {:else}
+    <Collapsible.Root bind:open={isOpen}>
+      <Collapsible.Trigger
+        class="sidebar-menu-item flex w-full items-center justify-between rounded-md py-[6px] text-[13px] font-normal transition-colors duration-150
+        {childActive
+          ? 'text-primary font-medium'
+          : 'text-sidebar-foreground/65 hover:text-sidebar-foreground'}"
+        style="padding-left: {indentPx}px; padding-right: 10px"
+      >
+        <span class="flex items-center gap-2.5">
+          <Circle class="h-[5px] w-[5px] flex-shrink-0 {childActive ? 'fill-primary text-primary' : 'fill-sidebar-foreground/30 text-sidebar-foreground/30'}" />
+          <span>{label}</span>
+        </span>
+        <ChevronDown class="h-3 w-3 text-sidebar-foreground/35 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
+      </Collapsible.Trigger>
+      <Collapsible.Content>
+        <div class="space-y-[1px] mt-[1px]">
+          {#each item.children as child, _i (_i)}
+            <SidebarItem item={child} {currentPath} {collapsed} depth={depth + 1} />
+          {/each}
+        </div>
+      </Collapsible.Content>
+    </Collapsible.Root>
+  {/if}
 {:else if collapsed}
-  <!-- Collapsed sidebar: icon-only with tooltip -->
   <Tooltip.Root>
     <Tooltip.Trigger>
       {#snippet child({ props }: { props: Record<string, unknown> })}
@@ -129,12 +167,12 @@
           href={finalHref}
           target={isExternal ? '_blank' : undefined}
           rel={isExternal ? 'noopener noreferrer' : undefined}
-          class="flex items-center justify-center rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200
+          class="sidebar-menu-item flex items-center justify-center rounded-md px-2 py-[7px] transition-colors duration-150
           {active
-            ? 'bg-card text-sidebar-primary shadow-sm ring-1 ring-foreground/5'
-            : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
+            ? 'sidebar-menu-item-active bg-sidebar-accent text-primary'
+            : 'text-sidebar-foreground/50 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
         >
-          <Icon class="h-4 w-4 flex-shrink-0" />
+          <Icon class="h-[18px] w-[18px] flex-shrink-0" />
         </a>
       {/snippet}
     </Tooltip.Trigger>
@@ -143,21 +181,45 @@
     </Tooltip.Content>
   </Tooltip.Root>
 {:else}
-  <!-- Leaf node: render as a link -->
-  <a
-    href={finalHref}
-    target={isExternal ? '_blank' : undefined}
-    rel={isExternal ? 'noopener noreferrer' : undefined}
-    class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200
-    {active
-      ? 'bg-card text-sidebar-primary shadow-sm ring-1 ring-foreground/5 font-semibold before:absolute before:left-0 before:top-2 before:bottom-2 before:w-[3px] before:bg-primary before:rounded-r-md overflow-hidden relative'
-      : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
-    style="padding-left: {12 + depth * 12}px"
-  >
-    <Icon class="h-4 w-4 flex-shrink-0" />
-    <span class="flex-1">{label}</span>
-    {#if isExternal}
-      <ExternalLink class="h-3 w-3 opacity-50" />
-    {/if}
-  </a>
+  {#if isTopLevel}
+    <a
+      href={finalHref}
+      target={isExternal ? '_blank' : undefined}
+      rel={isExternal ? 'noopener noreferrer' : undefined}
+      class="sidebar-menu-item flex items-center gap-2.5 rounded-md py-[7px] text-[13px] font-medium transition-colors duration-150
+      {active
+        ? 'sidebar-menu-item-active text-primary bg-sidebar-accent'
+        : 'text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent/50'}"
+      style="padding-left: {indentPx}px; padding-right: 10px"
+    >
+      <Icon class="h-[18px] w-[18px] flex-shrink-0 {active ? 'text-primary' : 'text-sidebar-foreground/50'}" />
+      <span class="flex-1">{label}</span>
+      {#if soon}
+        <Badge variant="secondary" class="h-[18px] px-1.5 text-[10px] font-medium">Soon</Badge>
+      {/if}
+      {#if isExternal}
+        <ExternalLink class="h-3 w-3 opacity-40" />
+      {/if}
+    </a>
+  {:else}
+    <a
+      href={finalHref}
+      target={isExternal ? '_blank' : undefined}
+      rel={isExternal ? 'noopener noreferrer' : undefined}
+      class="sidebar-menu-item flex items-center gap-2.5 rounded-md py-[6px] text-[13px] font-normal transition-colors duration-150
+      {active
+        ? 'sidebar-menu-item-active text-primary font-medium'
+        : 'text-sidebar-foreground/65 hover:text-sidebar-foreground'}"
+      style="padding-left: {indentPx}px; padding-right: 10px"
+    >
+      <Circle class="h-[5px] w-[5px] flex-shrink-0 {active ? 'fill-primary text-primary' : 'fill-sidebar-foreground/30 text-sidebar-foreground/30'}" />
+      <span class="flex-1">{label}</span>
+      {#if soon}
+        <Badge variant="secondary" class="h-[18px] px-1.5 text-[10px] font-medium">Soon</Badge>
+      {/if}
+      {#if isExternal}
+        <ExternalLink class="h-3 w-3 opacity-40" />
+      {/if}
+    </a>
+  {/if}
 {/if}

package/dist/components/account/TeamMembersPage.svelte

@@ -46,13 +46,19 @@
   };
 
   const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+
+  function statusLabel(status: TeamMember['status']) {
+    if (status === 'active') return t('account.active');
+    if (status === 'invited') return t('account.invited');
+    return t('account.inactive');
+  }
 </script>
 
 <div class="space-y-6" data-svadmin-content-page="account">
   <div class="flex items-start justify-between gap-4">
     <div>
-      <h2 class="text-xl font-semibold text-foreground">{t('account.membersStarter')}</h2>
-      <p class="mt-1 text-sm text-muted-foreground">{t('account.membersStarterDescription')}</p>
+      <h2 class="text-xl font-semibold text-foreground">{t('account.teamMembers')}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{t('account.teamMembersDescription')}</p>
     </div>
     <Button size="sm">
       <UserPlus class="h-4 w-4 mr-1" />{t('account.inviteMember')}
@@ -82,7 +88,7 @@
               <p class="text-xs text-muted-foreground truncate">{member.email}</p>
               <div class="mt-2 flex flex-wrap gap-1.5">
                 <span class="rounded-full px-2 py-0.5 text-[10px] font-semibold {roleColors[member.role]}">{member.role}</span>
-                <span class="rounded-full px-2 py-0.5 text-[10px] font-semibold {statusColors[member.status]}">{member.status}</span>
+                <span class="rounded-full px-2 py-0.5 text-[10px] font-semibold {statusColors[member.status]}">{statusLabel(member.status)}</span>
               </div>
               <div class="mt-2 flex items-center justify-between">
                 <span class="text-xs text-muted-foreground">{member.department}</span>

package/dist/components/buttons/CloneButton.svelte

@@ -2,17 +2,25 @@
   import { useNavigation, useCan, t } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Copy } from '@lucide/svelte';
+  import type { ButtonAccessControl } from './access-control';
+  import { withRecordId } from './access-control';
 
   let { resource, recordItemId, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
     resource: string;
     recordItemId: string | number;
     hideText?: boolean;
-    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
+    accessControl?: ButtonAccessControl;
     class?: string;
   }>();
 
   const nav = useNavigation();
-  const can = useCan(() => ({ resource, action: 'create', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const can = useCan(() => ({
+    resource,
+    action: 'create',
+    params: withRecordId(accessControl?.params, recordItemId),
+    meta: accessControl?.meta,
+    queryOptions: { enabled: accessControl?.enabled ?? true }
+  }));
   const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
 </script>
 

package/dist/components/buttons/CloneButton.svelte.d.ts

@@ -1,11 +1,9 @@
+import type { ButtonAccessControl } from './access-control';
 type $$ComponentProps = {
     resource: string;
     recordItemId: string | number;
     hideText?: boolean;
-    accessControl?: {
-        enabled?: boolean;
-        hideIfUnauthorized?: boolean;
-    };
+    accessControl?: ButtonAccessControl;
     class?: string;
 };
 declare const CloneButton: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/buttons/CreateButton.svelte

@@ -2,16 +2,23 @@
   import { useNavigation, useCan, t } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Plus } from '@lucide/svelte';
+  import type { ButtonAccessControl } from './access-control';
 
   let { resource, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
     resource: string;
     hideText?: boolean;
-    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
+    accessControl?: ButtonAccessControl;
     class?: string;
   }>();
 
   const nav = useNavigation();
-  const can = useCan(() => ({ resource, action: 'create', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const can = useCan(() => ({
+    resource,
+    action: 'create',
+    params: accessControl?.params,
+    meta: accessControl?.meta,
+    queryOptions: { enabled: accessControl?.enabled ?? true }
+  }));
   const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
 </script>
 

package/dist/components/buttons/CreateButton.svelte.d.ts

@@ -1,10 +1,8 @@
+import type { ButtonAccessControl } from './access-control';
 type $$ComponentProps = {
     resource: string;
     hideText?: boolean;
-    accessControl?: {
-        enabled?: boolean;
-        hideIfUnauthorized?: boolean;
-    };
+    accessControl?: ButtonAccessControl;
     class?: string;
 };
 declare const CreateButton: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/buttons/DeleteButton.svelte

@@ -2,6 +2,8 @@
   import { useDelete, useCan, t } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Trash2 } from '@lucide/svelte';
+  import type { ButtonAccessControl } from './access-control';
+  import { withRecordId } from './access-control';
 
   let {
     resource, recordItemId, hideText = false,
@@ -10,14 +12,20 @@
     resource: string;
     recordItemId: string | number;
     hideText?: boolean;
-    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
+    accessControl?: ButtonAccessControl;
     onSuccess?: () => void;
     undoable?: boolean;
     class?: string;
   }>();
 
   const deleteMut = useDelete({ get resource() { return resource; }, get mutationMode() { return undoable ? 'undoable' as const : 'pessimistic' as const; } });
-  const can = useCan(() => ({ resource, action: 'delete', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const can = useCan(() => ({
+    resource,
+    action: 'delete',
+    params: withRecordId(accessControl?.params, recordItemId),
+    meta: accessControl?.meta,
+    queryOptions: { enabled: accessControl?.enabled ?? true }
+  }));
   const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
   let confirming = $state(false);
 

package/dist/components/buttons/DeleteButton.svelte.d.ts

@@ -1,11 +1,9 @@
+import type { ButtonAccessControl } from './access-control';
 type $$ComponentProps = {
     resource: string;
     recordItemId: string | number;
     hideText?: boolean;
-    accessControl?: {
-        enabled?: boolean;
-        hideIfUnauthorized?: boolean;
-    };
+    accessControl?: ButtonAccessControl;
     onSuccess?: () => void;
     undoable?: boolean;
     class?: string;

package/dist/components/buttons/EditButton.svelte

@@ -2,17 +2,25 @@
   import { useNavigation, useCan, t } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Pencil } from '@lucide/svelte';
+  import type { ButtonAccessControl } from './access-control';
+  import { withRecordId } from './access-control';
 
   let { resource, recordItemId, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
     resource: string;
     recordItemId: string | number;
     hideText?: boolean;
-    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
+    accessControl?: ButtonAccessControl;
     class?: string;
   }>();
 
   const nav = useNavigation();
-  const can = useCan(() => ({ resource, action: 'edit', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const can = useCan(() => ({
+    resource,
+    action: 'edit',
+    params: withRecordId(accessControl?.params, recordItemId),
+    meta: accessControl?.meta,
+    queryOptions: { enabled: accessControl?.enabled ?? true }
+  }));
   const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
 </script>
 

package/dist/components/buttons/EditButton.svelte.d.ts

@@ -1,11 +1,9 @@
+import type { ButtonAccessControl } from './access-control';
 type $$ComponentProps = {
     resource: string;
     recordItemId: string | number;
     hideText?: boolean;
-    accessControl?: {
-        enabled?: boolean;
-        hideIfUnauthorized?: boolean;
-    };
+    accessControl?: ButtonAccessControl;
     class?: string;
 };
 declare const EditButton: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/buttons/ExportButton.svelte

@@ -2,16 +2,23 @@
   import { useExport, useCan, t } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Download } from '@lucide/svelte';
+  import type { ButtonAccessControl } from './access-control';
 
   let { resource, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
     resource: string;
     hideText?: boolean;
-    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
+    accessControl?: ButtonAccessControl;
     class?: string;
   }>();
 
   const { triggerExport, isLoading } = useExport({ get resource() { return resource; } });
-  const can = useCan(() => ({ resource, action: 'export', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const can = useCan(() => ({
+    resource,
+    action: 'export',
+    params: accessControl?.params,
+    meta: accessControl?.meta,
+    queryOptions: { enabled: accessControl?.enabled ?? true }
+  }));
   const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
 </script>
 

package/dist/components/buttons/ExportButton.svelte.d.ts

@@ -1,10 +1,8 @@
+import type { ButtonAccessControl } from './access-control';
 type $$ComponentProps = {
     resource: string;
     hideText?: boolean;
-    accessControl?: {
-        enabled?: boolean;
-        hideIfUnauthorized?: boolean;
-    };
+    accessControl?: ButtonAccessControl;
     class?: string;
 };
 declare const ExportButton: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/buttons/ImportButton.svelte

@@ -2,12 +2,13 @@
   import { useImport, useCan, t } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Upload } from '@lucide/svelte';
+  import type { ButtonAccessControl } from './access-control';
 
   let { resource, hideText = false, onFinish, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
     resource: string;
     hideText?: boolean;
     onFinish?: (result: { succeeded: unknown[]; errored: { request: unknown; error: unknown }[] }) => void;
-    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
+    accessControl?: ButtonAccessControl;
     class?: string;
   }>();
 
@@ -31,7 +32,13 @@
     }
   }
 
-  const can = useCan(() => ({ resource, action: 'import', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const can = useCan(() => ({
+    resource,
+    action: 'import',
+    params: accessControl?.params,
+    meta: accessControl?.meta,
+    queryOptions: { enabled: accessControl?.enabled ?? true }
+  }));
   const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
 </script>
 

package/dist/components/buttons/ImportButton.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { ButtonAccessControl } from './access-control';
 type $$ComponentProps = {
     resource: string;
     hideText?: boolean;
@@ -8,10 +9,7 @@ type $$ComponentProps = {
             error: unknown;
         }[];
     }) => void;
-    accessControl?: {
-        enabled?: boolean;
-        hideIfUnauthorized?: boolean;
-    };
+    accessControl?: ButtonAccessControl;
     class?: string;
 };
 declare const ImportButton: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/buttons/ShowButton.svelte

@@ -2,17 +2,25 @@
   import { useNavigation, useCan, t } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Eye } from '@lucide/svelte';
+  import type { ButtonAccessControl } from './access-control';
+  import { withRecordId } from './access-control';
 
   let { resource, recordItemId, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
     resource: string;
     recordItemId: string | number;
     hideText?: boolean;
-    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
+    accessControl?: ButtonAccessControl;
     class?: string;
   }>();
 
   const nav = useNavigation();
-  const can = useCan(() => ({ resource, action: 'show', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const can = useCan(() => ({
+    resource,
+    action: 'show',
+    params: withRecordId(accessControl?.params, recordItemId),
+    meta: accessControl?.meta,
+    queryOptions: { enabled: accessControl?.enabled ?? true }
+  }));
   const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
 </script>
 

package/dist/components/buttons/ShowButton.svelte.d.ts

@@ -1,11 +1,9 @@
+import type { ButtonAccessControl } from './access-control';
 type $$ComponentProps = {
     resource: string;
     recordItemId: string | number;
     hideText?: boolean;
-    accessControl?: {
-        enabled?: boolean;
-        hideIfUnauthorized?: boolean;
-    };
+    accessControl?: ButtonAccessControl;
     class?: string;
 };
 declare const ShowButton: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/buttons/access-control.d.ts

@@ -0,0 +1,7 @@
+export interface ButtonAccessControl {
+    enabled?: boolean;
+    hideIfUnauthorized?: boolean;
+    params?: Record<string, unknown>;
+    meta?: Record<string, unknown>;
+}
+export declare function withRecordId(params: Record<string, unknown> | undefined, recordItemId: string | number | undefined): Record<string, unknown> | undefined;

package/dist/components/buttons/access-control.js

@@ -0,0 +1,5 @@
+export function withRecordId(params, recordItemId) {
+    return recordItemId === undefined
+        ? params
+        : { id: recordItemId, ...params };
+}

package/dist/components/ui/sheet/sheet.svelte

@@ -54,10 +54,10 @@
 		bind:this={ref}
 		data-slot="sheet"
 		class={cn(
-			"fixed z-50 flex flex-col gap-4 bg-background p-6 shadow-lg transition-transform",
+			"fixed z-50 flex translate-x-0 flex-col gap-4 bg-background p-6 shadow-lg",
 			side === "right"
-				? "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l animate-in slide-in-from-right"
-				: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r animate-in slide-in-from-left",
+				? "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l"
+				: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r",
 			className
 		)}
 		{...restProps}

package/dist/index.d.ts

@@ -28,6 +28,11 @@ export { default as UpdatePasswordPage } from './components/UpdatePasswordPage.s
 export { default as ProfilePage } from './components/ProfilePage.svelte';
 export { default as ConfigErrorScreen } from './components/ConfigErrorScreen.svelte';
 export { default as InferencerPanel } from './components/InferencerPanel.svelte';
+export { default as ListInferencer } from './components/ListInferencer.svelte';
+export { default as CreateInferencer } from './components/CreateInferencer.svelte';
+export { default as EditInferencer } from './components/EditInferencer.svelte';
+export { default as ShowInferencer } from './components/ShowInferencer.svelte';
+export { default as ResourceInferencer } from './components/ResourceInferencer.svelte';
 export { default as LiveIndicator } from './components/LiveIndicator.svelte';
 export { default as ListPage } from './components/ListPage.svelte';
 export { default as CreatePage } from './components/CreatePage.svelte';

package/dist/index.js

@@ -31,6 +31,11 @@ export { default as UpdatePasswordPage } from './components/UpdatePasswordPage.s
 export { default as ProfilePage } from './components/ProfilePage.svelte';
 export { default as ConfigErrorScreen } from './components/ConfigErrorScreen.svelte';
 export { default as InferencerPanel } from './components/InferencerPanel.svelte';
+export { default as ListInferencer } from './components/ListInferencer.svelte';
+export { default as CreateInferencer } from './components/CreateInferencer.svelte';
+export { default as EditInferencer } from './components/EditInferencer.svelte';
+export { default as ShowInferencer } from './components/ShowInferencer.svelte';
+export { default as ResourceInferencer } from './components/ResourceInferencer.svelte';
 export { default as LiveIndicator } from './components/LiveIndicator.svelte';
 export { default as ListPage } from './components/ListPage.svelte';
 export { default as CreatePage } from './components/CreatePage.svelte';