@svadmin/ui 0.57.0 → 0.58.0

package/dist/components/TenantSwitcher.svelte

@@ -31,6 +31,7 @@
     <DropdownMenu.Trigger>
       {#snippet child({ props }: { props: Record<string, unknown> })}
         <button
+          type="button"
           {...props}
           class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left transition-colors hover:bg-sidebar-accent/50
             {collapsed ? 'justify-center' : ''}"

package/dist/components/Toast.svelte

@@ -1,8 +1,17 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { Toaster, toast as sonner, type ToasterProps } from 'svelte-sonner';
-  import { getResolvedTheme, getToastQueue, consumeToastQueue, getPromiseQueue, consumePromiseQueue } from '@svadmin/core';
+  import {
+    consumePromiseQueue,
+    consumeToastQueue,
+    getPromiseQueue,
+    getResolvedTheme,
+    getToastQueue,
+    getToasts,
+    removeToast,
+  } from '@svadmin/core';
   import { registerToastHost, type ToastHostRegistration } from './toast-host.svelte.js';
+  import UndoableNotification from './UndoableNotification.svelte';
 
   let host = $state<ToastHostRegistration | null>(null);
   const isActiveHost = $derived(host?.isActive() ?? false);
@@ -56,8 +65,33 @@
       },
     }
   } satisfies ToasterProps);
+
+  function undo(id: number, callback?: () => void): void {
+    removeToast(id);
+    callback?.();
+  }
+
+  function commit(id: number, callback?: () => void): void {
+    removeToast(id);
+    callback?.();
+  }
 </script>
 
 {#if isActiveHost}
   <Toaster {...toasterProps} />
+  <div
+    class="pointer-events-none fixed bottom-4 left-4 right-4 z-[100] flex flex-col-reverse gap-2 sm:bottom-6 sm:left-1/2 sm:right-auto sm:w-[min(32rem,calc(100vw-3rem))] sm:-translate-x-1/2"
+    data-svadmin-undo-stack
+  >
+    {#each getToasts().slice(-3) as item (item.id)}
+      <UndoableNotification
+        message={item.message}
+        duration={item.duration}
+        embedded
+        managedExternally
+        onUndo={() => undo(item.id, item.onUndo)}
+        onTimeout={() => commit(item.id, item.onTimeout)}
+      />
+    {/each}
+  </div>
 {/if}

package/dist/components/UndoableNotification.svelte

@@ -8,9 +8,11 @@
 
   const i18n = useTranslation();
 
-  let { message, duration = 5000, onUndo, onTimeout } = $props<{
+  let { message, duration = 5000, embedded = false, managedExternally = false, onUndo, onTimeout } = $props<{
     message: string;
     duration?: number;
+    embedded?: boolean;
+    managedExternally?: boolean;
     onUndo: () => void;
     onTimeout: () => void;
   }>();
@@ -27,7 +29,7 @@
       if (remaining <= 0) {
         remaining = 0;
         clearInterval(interval);
-        if (!dismissed) {
+        if (!dismissed && !managedExternally) {
           dismissed = true;
           onTimeout();
         }
@@ -51,17 +53,21 @@
 
 {#if !dismissed}
   <div
-    class="fixed bottom-6 left-1/2 -translate-x-1/2 z-[100] min-w-80 max-w-lg rounded-lg border bg-card shadow-lg overflow-hidden"
+    class={embedded
+      ? 'pointer-events-auto relative w-full overflow-hidden rounded-lg border bg-card shadow-lg'
+      : 'fixed bottom-4 left-4 right-4 z-[100] overflow-hidden rounded-lg border bg-card shadow-lg sm:bottom-6 sm:left-1/2 sm:right-auto sm:w-[min(32rem,calc(100vw-3rem))] sm:-translate-x-1/2'}
+    role="status"
+    aria-live="polite"
     transition:slide={{ duration: 250 }}
   >
-    <div class="flex items-center justify-between px-4 py-3 gap-3">
-      <p class="text-sm text-foreground">{message}</p>
+    <div class="flex items-center justify-between gap-3 px-4 py-3">
+      <p class="min-w-0 break-words text-sm text-foreground">{message}</p>
       <div class="flex items-center gap-1 flex-shrink-0">
         <Button variant="ghost" size="sm" onclick={handleUndo} class="font-semibold text-primary">
           <Undo2 class="h-3.5 w-3.5 mr-1" />
           {i18n.t('common.undo')}
         </Button>
-        <Button variant="ghost" size="icon" class="h-7 w-7" onclick={handleDismiss}>
+        <Button variant="ghost" size="icon" class="h-7 w-7" onclick={handleDismiss} aria-label={i18n.t('common.close')}>
           <X class="h-3.5 w-3.5" />
         </Button>
       </div>

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

@@ -1,6 +1,8 @@
 type $$ComponentProps = {
     message: string;
     duration?: number;
+    embedded?: boolean;
+    managedExternally?: boolean;
     onUndo: () => void;
     onTimeout: () => void;
 };

package/dist/components/buttons/CloneButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { useNavigation, useCan, useTranslation } from '@svadmin/core';
+  import { getResource, useNavigation, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Copy } from '@lucide/svelte';
   import type { ButtonAccessControl } from './access-control';
@@ -27,6 +27,13 @@
   }>();
 
   const nav = useNavigation();
+  const resourceDefinition = $derived.by(() => {
+    try {
+      return getResource(resource);
+    } catch {
+      return null;
+    }
+  });
   const can = useCan(() => ({
     resource,
     action: 'create',
@@ -34,8 +41,8 @@
     meta: accessControl?.meta,
     queryOptions: { enabled: accessControl?.enabled ?? true }
   }));
-  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
   const displayText = $derived(label ?? i18n.t('common.clone'));
+  const hidden = $derived(resourceDefinition?.canCreate === false || (accessControl?.hideIfUnauthorized && !can.allowed));
 </script>
 
 {#if !hidden}

package/dist/components/buttons/CreateButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { useNavigation, useCan, useTranslation } from '@svadmin/core';
+  import { getResource, useNavigation, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Plus } from '@lucide/svelte';
   import type { ButtonAccessControl } from './access-control';
@@ -24,6 +24,13 @@
   }>();
 
   const nav = useNavigation();
+  const resourceDefinition = $derived.by(() => {
+    try {
+      return getResource(resource);
+    } catch {
+      return null;
+    }
+  });
   const can = useCan(() => ({
     resource,
     action: 'create',
@@ -31,8 +38,8 @@
     meta: accessControl?.meta,
     queryOptions: { enabled: accessControl?.enabled ?? true }
   }));
-  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
   const displayText = $derived(label ?? i18n.t('common.create'));
+  const hidden = $derived(resourceDefinition?.canCreate === false || (accessControl?.hideIfUnauthorized && !can.allowed));
 </script>
 
 {#if !hidden}

package/dist/components/buttons/DeleteButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { useDelete, useCan, useTranslation } from '@svadmin/core';
+  import { getResource, useDelete, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Trash2 } from '@lucide/svelte';
   import type { ButtonAccessControl } from './access-control';
@@ -31,6 +31,13 @@
   }>();
 
   const deleteMut = useDelete({ get resource() { return resource; }, get mutationMode() { return undoable ? 'undoable' as const : 'pessimistic' as const; } });
+  const resourceDefinition = $derived.by(() => {
+    try {
+      return getResource(resource);
+    } catch {
+      return null;
+    }
+  });
   const can = useCan(() => ({
     resource,
     action: 'delete',
@@ -38,8 +45,8 @@
     meta: accessControl?.meta,
     queryOptions: { enabled: accessControl?.enabled ?? true }
   }));
-  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
   const displayText = $derived(label ?? i18n.t('common.delete'));
+  const hidden = $derived(resourceDefinition?.canDelete === false || (accessControl?.hideIfUnauthorized && !can.allowed));
   let confirming = $state(false);
 
   async function handleDelete() {

package/dist/components/buttons/EditButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { useNavigation, useCan, useTranslation } from '@svadmin/core';
+  import { getResource, useNavigation, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Pencil } from '@lucide/svelte';
   import type { ButtonAccessControl } from './access-control';
@@ -27,6 +27,13 @@
   }>();
 
   const nav = useNavigation();
+  const resourceDefinition = $derived.by(() => {
+    try {
+      return getResource(resource);
+    } catch {
+      return null;
+    }
+  });
   const can = useCan(() => ({
     resource,
     action: 'edit',
@@ -34,8 +41,8 @@
     meta: accessControl?.meta,
     queryOptions: { enabled: accessControl?.enabled ?? true }
   }));
-  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
   const displayText = $derived(label ?? i18n.t('common.edit'));
+  const hidden = $derived(resourceDefinition?.canEdit === false || (accessControl?.hideIfUnauthorized && !can.allowed));
 </script>
 
 {#if !hidden}

package/dist/components/buttons/ListButton.svelte

@@ -19,7 +19,7 @@
   const res = $derived((() => {
     try { return getResource(resourceName); } catch { return null; }
   })());
-  const displayLabel = $derived(label ?? res?.label ?? i18n.t('common.list') ?? resourceName);
+  const displayLabel = $derived(label ?? (hideText ? i18n.t('common.backToList') : (res?.label ?? i18n.t('common.list') ?? resourceName)));
 
   function navigateToList() {
     const navigate = () => nav.list(resourceName);

package/dist/components/buttons/ShowButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { useNavigation, useCan, useTranslation } from '@svadmin/core';
+  import { getResource, useNavigation, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Eye } from '@lucide/svelte';
   import type { ButtonAccessControl } from './access-control';
@@ -29,6 +29,13 @@
   }>();
 
   const nav = useNavigation();
+  const resourceDefinition = $derived.by(() => {
+    try {
+      return getResource(resource);
+    } catch {
+      return null;
+    }
+  });
   const can = useCan(() => ({
     resource,
     action: 'show',
@@ -36,7 +43,7 @@
     meta: accessControl?.meta,
     queryOptions: { enabled: accessControl?.enabled ?? true }
   }));
-  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
+  const hidden = $derived(resourceDefinition?.canShow === false || (accessControl?.hideIfUnauthorized && !can.allowed));
   const displayText = $derived(label ?? i18n.t('common.detail'));
 
   function navigateToRecord() {

package/dist/components/saved-list-views.d.ts

@@ -0,0 +1,35 @@
+import type { Filter, Sort } from '@svadmin/core';
+export interface SavedListViewState {
+    search: string;
+    filters: Filter[];
+    sorters: Sort[];
+    pagination: {
+        current: number;
+        pageSize: number;
+    };
+    columnVisibility: Record<string, boolean>;
+    columnOrder: string[];
+}
+export interface SavedListView {
+    id: string;
+    name: string;
+    state: SavedListViewState;
+}
+export interface ListPreferenceScope {
+    resourceName: string;
+    providerName: string;
+    tenantIdentity?: string | number;
+}
+export declare function readSavedListViews(raw: string | null, allowedColumnIds: Set<string>): SavedListView[];
+export declare function serializeSavedListViews(views: SavedListView[]): string;
+export declare function cloneSavedListViewState(state: SavedListViewState): SavedListViewState;
+export declare function listPreferenceScopeId(scope: ListPreferenceScope): string;
+export declare function canMigrateLegacyListPreferences(scope: ListPreferenceScope): boolean;
+export declare function savedListViewsStorageKey(scope: ListPreferenceScope): string;
+export declare function activeSavedListViewStorageKey(scope: ListPreferenceScope): string;
+export declare function columnVisibilityStorageKey(scope: ListPreferenceScope): string;
+export declare function columnOrderStorageKey(scope: ListPreferenceScope): string;
+export declare function legacySavedListViewsStorageKey(resourceName: string): string;
+export declare function legacyActiveSavedListViewStorageKey(resourceName: string): string;
+export declare function legacyColumnVisibilityStorageKey(resourceName: string): string;
+export declare function legacyColumnOrderStorageKey(resourceName: string): string;

package/dist/components/saved-list-views.js

@@ -0,0 +1,168 @@
+const STORAGE_VERSION = 1;
+const MAX_SAVED_VIEWS = 25;
+const MAX_FILTER_NODES = 200;
+const CRUD_OPERATORS = new Set([
+    'eq', 'ne', 'lt', 'gt', 'lte', 'gte',
+    'contains', 'ncontains', 'startswith', 'endswith',
+    'in', 'nin', 'null', 'nnull', 'between', 'nbetween',
+]);
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function isPositiveInteger(value, max) {
+    return typeof value === 'number' && Number.isInteger(value) && value > 0 && value <= max;
+}
+function parseFilter(value, allowedFieldIds, budget, depth = 0) {
+    if (depth > 20 || budget.remaining-- <= 0 || !isRecord(value))
+        return undefined;
+    if (typeof value.field === 'string') {
+        if (!allowedFieldIds.has(value.field) || typeof value.operator !== 'string' || !CRUD_OPERATORS.has(value.operator) || !('value' in value)) {
+            return undefined;
+        }
+        return {
+            field: value.field,
+            operator: value.operator,
+            value: value.value,
+        };
+    }
+    if ((value.operator !== 'and' && value.operator !== 'or') || !Array.isArray(value.value))
+        return undefined;
+    const children = value.value.map((entry) => parseFilter(entry, allowedFieldIds, budget, depth + 1));
+    if (children.some((entry) => entry === undefined))
+        return undefined;
+    return { operator: value.operator, value: children };
+}
+function parseSorters(value, allowedFieldIds) {
+    const sorters = [];
+    for (const sorter of value) {
+        if (!isRecord(sorter) || typeof sorter.field !== 'string' || !allowedFieldIds.has(sorter.field))
+            return undefined;
+        if (sorter.order !== 'asc' && sorter.order !== 'desc')
+            return undefined;
+        sorters.push({ field: sorter.field, order: sorter.order });
+    }
+    return sorters;
+}
+function parseColumnVisibility(value, allowedColumnIds) {
+    if (!isRecord(value))
+        return undefined;
+    const visibility = {};
+    for (const [columnId, visible] of Object.entries(value)) {
+        if (!allowedColumnIds.has(columnId) || typeof visible !== 'boolean')
+            continue;
+        visibility[columnId] = visible;
+    }
+    return visibility;
+}
+function parseColumnOrder(value, allowedColumnIds) {
+    if (!Array.isArray(value))
+        return undefined;
+    return [...new Set(value.filter((columnId) => (typeof columnId === 'string' && allowedColumnIds.has(columnId))))];
+}
+function parseState(value, allowedColumnIds) {
+    if (!isRecord(value))
+        return undefined;
+    if (typeof value.search !== 'string' || value.search.length > 1_000)
+        return undefined;
+    if (!Array.isArray(value.filters) || !Array.isArray(value.sorters))
+        return undefined;
+    if (!isRecord(value.pagination) || !isPositiveInteger(value.pagination.current, 1_000_000) || !isPositiveInteger(value.pagination.pageSize, 1_000)) {
+        return undefined;
+    }
+    const allowedFieldIds = new Set([...allowedColumnIds].filter((columnId) => !columnId.startsWith('_')));
+    const filterBudget = { remaining: MAX_FILTER_NODES };
+    const filters = value.filters.map((entry) => parseFilter(entry, allowedFieldIds, filterBudget));
+    if (filters.some((entry) => entry === undefined))
+        return undefined;
+    const sorters = parseSorters(value.sorters, allowedFieldIds);
+    const columnVisibility = parseColumnVisibility(value.columnVisibility, allowedColumnIds);
+    const columnOrder = parseColumnOrder(value.columnOrder, allowedColumnIds);
+    if (!sorters || !columnVisibility || !columnOrder)
+        return undefined;
+    return {
+        search: value.search,
+        filters: filters,
+        sorters,
+        pagination: {
+            current: value.pagination.current,
+            pageSize: value.pagination.pageSize,
+        },
+        columnVisibility,
+        columnOrder,
+    };
+}
+export function readSavedListViews(raw, allowedColumnIds) {
+    if (!raw)
+        return [];
+    try {
+        const parsed = JSON.parse(raw);
+        if (!isRecord(parsed) || parsed.version !== STORAGE_VERSION || !Array.isArray(parsed.views))
+            return [];
+        const views = [];
+        const seenIds = new Set();
+        for (const entry of parsed.views.slice(0, MAX_SAVED_VIEWS)) {
+            if (!isRecord(entry) || typeof entry.id !== 'string' || !entry.id.trim() || entry.id.length > 120)
+                continue;
+            if (seenIds.has(entry.id))
+                continue;
+            if (typeof entry.name !== 'string' || !entry.name.trim() || entry.name.length > 60)
+                continue;
+            const state = parseState(entry.state, allowedColumnIds);
+            if (!state)
+                continue;
+            seenIds.add(entry.id);
+            views.push({ id: entry.id, name: entry.name.trim(), state });
+        }
+        return views;
+    }
+    catch (error) {
+        if (error instanceof SyntaxError)
+            return [];
+        throw error;
+    }
+}
+export function serializeSavedListViews(views) {
+    return JSON.stringify({ version: STORAGE_VERSION, views: views.slice(0, MAX_SAVED_VIEWS) });
+}
+export function cloneSavedListViewState(state) {
+    return JSON.parse(JSON.stringify(state));
+}
+function encodeScopeValue(value) {
+    if (value === undefined)
+        return 'u';
+    return `${typeof value === 'number' ? 'n' : 's'}:${encodeURIComponent(String(value))}`;
+}
+export function listPreferenceScopeId(scope) {
+    return [
+        `r:${encodeURIComponent(scope.resourceName)}`,
+        `p:${encodeURIComponent(scope.providerName)}`,
+        `t:${encodeScopeValue(scope.tenantIdentity)}`,
+    ].join('|');
+}
+export function canMigrateLegacyListPreferences(scope) {
+    return scope.providerName === 'default' && scope.tenantIdentity === undefined;
+}
+export function savedListViewsStorageKey(scope) {
+    return `svadmin-list-views-v2-${listPreferenceScopeId(scope)}`;
+}
+export function activeSavedListViewStorageKey(scope) {
+    return `svadmin-list-view-active-v2-${listPreferenceScopeId(scope)}`;
+}
+export function columnVisibilityStorageKey(scope) {
+    return `svadmin-columns-v2-${listPreferenceScopeId(scope)}`;
+}
+export function columnOrderStorageKey(scope) {
+    return `svadmin-colorder-v2-${listPreferenceScopeId(scope)}`;
+}
+export function legacySavedListViewsStorageKey(resourceName) {
+    return `svadmin-list-views-${resourceName}`;
+}
+export function legacyActiveSavedListViewStorageKey(resourceName) {
+    return `svadmin-list-view-active-${resourceName}`;
+}
+export function legacyColumnVisibilityStorageKey(resourceName) {
+    return `svadmin-columns-${resourceName}`;
+}
+export function legacyColumnOrderStorageKey(resourceName) {
+    return `svadmin-colorder-${resourceName}`;
+}

package/dist/index.d.ts

@@ -15,6 +15,8 @@ export { default as EmptyState } from './components/EmptyState.svelte';
 export { default as StatsCard } from './components/StatsCard.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
 export { default as ResourceOperationsPage } from './components/ResourceOperationsPage.svelte';
+export { default as RecordDetailDrawer } from './components/RecordDetailDrawer.svelte';
+export { default as ResourceAccessGuard } from './components/ResourceAccessGuard.svelte';
 export { default as LoginPage } from './components/LoginPage.svelte';
 export { default as AuthPageShell } from './components/AuthPageShell.svelte';
 export { default as RegisterPage } from './components/RegisterPage.svelte';

package/dist/index.js

@@ -18,6 +18,8 @@ export { default as EmptyState } from './components/EmptyState.svelte';
 export { default as StatsCard } from './components/StatsCard.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
 export { default as ResourceOperationsPage } from './components/ResourceOperationsPage.svelte';
+export { default as RecordDetailDrawer } from './components/RecordDetailDrawer.svelte';
+export { default as ResourceAccessGuard } from './components/ResourceAccessGuard.svelte';
 export { default as LoginPage } from './components/LoginPage.svelte';
 export { default as AuthPageShell } from './components/AuthPageShell.svelte';
 export { default as RegisterPage } from './components/RegisterPage.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.57.0",
+  "version": "0.58.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -39,7 +39,7 @@
     "./components/*": "./dist/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.41.1",
+    "@svadmin/core": "^0.42.0",
     "@tanstack/svelte-query": "^6.1.38",
     "highlight.js": "^11.11.1",
     "isomorphic-dompurify": "^3.22.0",