@svadmin/ui 0.36.0 → 0.38.0

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

@@ -6,7 +6,6 @@ type $$ComponentProps = {
     onToggle: () => void;
     onLogout: () => void;
     menu?: MenuItem[];
-    /** 'hash' for SPA hash routing, 'path' for SvelteKit/filesystem routing, 'auto' to detect */
     routeMode?: 'hash' | 'path' | 'auto';
 };
 declare const Sidebar: import("svelte").Component<$$ComponentProps, {}, "">;

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,
-    Barcode, FolderTree, Building2, Warehouse, BriefcaseBusiness, Handshake, UserRoundCheck,
-    CalendarCheck, KeyRound, MapPinned,
+    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';
@@ -22,6 +24,7 @@
   const iconMap: Record<string, typeof LayoutDashboard> = {
     dashboard: LayoutDashboard,
     posts: FileText,
+    file: FileText,
     users: Users,
     settings: Settings,
     home: Home,
@@ -30,21 +33,38 @@
     'clipboard-check': ClipboardCheck,
     'sliders-horizontal': SlidersHorizontal,
     'alert-triangle': AlertTriangle,
-    'barcode': Barcode,
-    'folder-tree': FolderTree,
-    'building-2': Building2,
-    'warehouse': Warehouse,
-    'briefcase-business': BriefcaseBusiness,
-    handshake: Handshake,
-    'user-round-check': UserRoundCheck,
-    'calendar-check': CalendarCheck,
+    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,
+    download: Download,
+    'list-todo': ListTodo,
+    'trending-up': TrendingUp,
+    sparkles: Sparkles,
+    images: Images,
+    bot: Bot,
+    key: Key,
     'key-round': KeyRound,
-    'map-pinned': MapPinned,
+    'credit-card': CreditCard,
+    'book-open': BookOpen,
+    wrench: Wrench,
+    shield: Shield,
   };
 
-  function getIcon(name?: string | typeof LayoutDashboard): typeof LayoutDashboard {
-    if (!name) return depth === 0 ? Settings : Folder;
-    if (typeof name !== 'string') return name; // if it's already a component
+  function getIcon(name?: unknown): typeof LayoutDashboard {
+    if (!name) return depth === 0 ? Settings : Circle;
+    if (typeof name !== 'string') return name as typeof LayoutDashboard;
     return iconMap[name] ?? Settings;
   }
 
@@ -54,95 +74,91 @@
 
   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;
   }
 
-  function getItemBadge(menuItem: MenuItem): string | undefined {
-    const meta = menuItem.meta as (MenuItem['meta'] & { badge?: unknown }) | undefined;
-    return typeof meta?.badge === 'string' ? meta.badge : undefined;
-  }
-
-  function aggregateBadges(menuItems: MenuItem[] | undefined): string | undefined {
-    const total = menuItems?.reduce((sum, menuItem) => {
-      const ownBadge = Number(getItemBadge(menuItem));
-      const childBadge = Number(aggregateBadges(menuItem.children));
-      return sum + (Number.isFinite(ownBadge) ? ownBadge : 0) + (Number.isFinite(childBadge) ? childBadge : 0);
-    }, 0) ?? 0;
-
-    return total > 0 ? String(total) : undefined;
-  }
-
   const hasChildren = $derived(item.children && item.children.length > 0);
   const active = $derived(isActive(item.href));
   const childActive = $derived(hasActiveChild(item));
   const isExternal = $derived(item.target === '_blank' || item.href?.startsWith('http'));
-  const badge = $derived(getItemBadge(item));
-  const childrenBadge = $derived(aggregateBadges(item.children));
 
   const finalHref = $derived(isExternal ? item.href : (item.href ? formatLink(item.href) : undefined));
-  // Auto-open the active branch once, then respect manual collapse/expand.
-  let isOpen = $state(false);
-  let touchedOpen = $state(false);
-
-  function setOpen(nextOpen: boolean) {
-    touchedOpen = true;
-    isOpen = nextOpen;
-  }
 
-  $effect(() => {
-    if (childActive && !touchedOpen && !isOpen) isOpen = true;
-  });
+  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 open={isOpen} onOpenChange={setOpen}>
-    <Collapsible.Trigger
-      class="flex w-full items-center justify-between rounded-xl px-3 {depth === 1 ? 'py-1.5' : 'py-2'} text-sm font-medium transition-all duration-200
-      {childActive
-        ? 'text-primary font-semibold'
-        : 'text-sidebar-foreground/68 hover:bg-sidebar-accent/45 hover:text-sidebar-foreground'}"
-      style="padding-left: {depth === 0 ? 12 : 4 + (depth - 1) * 12}px"
-      data-sidebar={depth === 0 ? "menu-button" : "menu-sub-button"}
-      data-active={childActive ? "true" : "false"}
-    >
-      <span class="flex items-center gap-3">
-        <Icon class="h-4 w-4 flex-shrink-0" />
-        <span>{label}</span>
-      </span>
-      <span class="ml-2 flex items-center gap-2">
-        {#if childrenBadge}
-          <span class="rounded-full {childActive ? 'bg-primary/12 text-primary' : 'bg-sidebar-accent text-sidebar-foreground/60'} px-2 py-0.5 text-[10px] font-semibold">{childrenBadge}</span>
-        {/if}
-        <ChevronDown class="h-3.5 w-3.5 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
-      </span>
-    </Collapsible.Trigger>
-    <Collapsible.Content>
-      <div
-        class="mt-0.5 {depth >= 1 ? 'divide-y divide-border/45' : 'space-y-0'}"
-        style="padding-left: {depth > 0 ? 0 : 0}px"
-        data-sidebar="menu-sub"
+  {#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"
       >
-        {#each item.children as child, _i (_i)}
-          <SidebarItem item={child} {currentPath} {collapsed} depth={depth + 1} />
-        {/each}
-      </div>
-    </Collapsible.Content>
-  </Collapsible.Root>
+        <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> })}
@@ -151,14 +167,12 @@
           href={finalHref}
           target={isExternal ? '_blank' : undefined}
           rel={isExternal ? 'noopener noreferrer' : undefined}
-          class="mx-auto flex h-10 w-10 items-center justify-center text-sm font-medium transition-colors duration-200
+          class="sidebar-menu-item flex items-center justify-center rounded-md px-2 py-[7px] transition-colors duration-150
           {active
-            ? 'text-primary'
-            : 'text-sidebar-foreground/68 hover:text-sidebar-foreground'}"
-          data-sidebar={depth === 0 ? "menu-button" : "menu-sub-button"}
-          data-active={active ? "true" : "false"}
+            ? '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>
@@ -167,26 +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="relative flex items-center gap-3 px-3 {depth === 1 ? 'py-1.5' : 'py-2'} text-sm font-medium transition-all duration-200 {depth >= 2 ? 'first:rounded-t-xl last:rounded-b-xl' : 'rounded-xl'}
-    {active
-      ? 'text-primary font-semibold'
-      : 'text-sidebar-foreground/68 hover:bg-sidebar-accent/45 hover:text-sidebar-foreground'}"
-    style="padding-left: {12 + depth * 12}px"
-    data-sidebar={depth === 0 ? "menu-button" : "menu-sub-button"}
-    data-active={active ? "true" : "false"}
-  >
-    <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}
-    {#if badge}
-      <span class="rounded-full {active ? 'bg-primary/12 text-primary' : 'bg-sidebar-accent text-sidebar-foreground/60'} px-2 py-0.5 text-[10px] font-semibold">{badge}</span>
-    {/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, {}, "">;