@svadmin/ui 0.37.0 → 0.38.1

package/dist/app.css

@@ -48,11 +48,11 @@
     --warning-foreground: oklch(0.3 0.08 60);
     --info: oklch(0.6 0.15 250);
     --info-foreground: oklch(0.985 0 0);
-    --sidebar: oklch(1 0 0 / 80%);
-    --sidebar-foreground: oklch(0.13 0.02 265);
+    --sidebar: oklch(0.985 0.002 264);
+    --sidebar-foreground: oklch(0.23 0.02 265);
     --sidebar-primary: oklch(0.488 0.243 264.376);
     --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.94 0.025 264);
+    --sidebar-accent: oklch(0.955 0.012 264);
     --sidebar-accent-foreground: oklch(0.33 0.17 264);
     --sidebar-border: oklch(0.935 0.005 264);
     --sidebar-ring: oklch(0.488 0.243 264.376);
@@ -89,11 +89,11 @@
     --warning-foreground: oklch(0.25 0.05 60);
     --info: oklch(0.65 0.15 250);
     --info-foreground: oklch(0.985 0 0);
-    --sidebar: oklch(0.16 0.015 265 / 80%);
-    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar: oklch(0.17 0.015 265);
+    --sidebar-foreground: oklch(0.92 0.005 264);
     --sidebar-primary: oklch(0.585 0.233 264);
     --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.488 0.243 264.376 / 10%);
+    --sidebar-accent: oklch(0.488 0.243 264.376 / 12%);
     --sidebar-accent-foreground: oklch(0.7 0.15 264);
     --sidebar-border: oklch(0.27 0.02 265);
     --sidebar-ring: oklch(0.55 0.18 264);
@@ -521,13 +521,30 @@ main {
   right: 0;
 }
 /* Mirror sidebar margins for RTL */
-[dir="rtl"] .md\:ml-64 {
+[dir="rtl"] .sidebar-content-expanded {
   margin-left: 0;
-  margin-right: 16rem;
+  margin-right: 252px;
 }
-[dir="rtl"] .md\:ml-16 {
+[dir="rtl"] .sidebar-content-collapsed {
   margin-left: 0;
-  margin-right: 4rem;
+  margin-right: 70px;
+}
+
+/* ── Sidebar Menu Item Styles ── */
+.sidebar-menu-item {
+  position: relative;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sidebar-menu-item-active {
+  position: relative;
+}
+
+.sidebar-scroll [data-radix-scroll-area-viewport] > div {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 /* ⑰ Accessibility Minimum Touch Target — Apple HIG 44px minimum */
@@ -711,117 +728,54 @@ main {
   background-color: rgba(43, 43, 64, 0.3) !important;
 }
 
-/* Sidebar layout adjustments */
-.layout-clean-flat [data-sidebar="sidebar"] {
-  background: #ffffff !important;
+/* Sidebar layout adjustments for clean-flat theme */
+.layout-clean-flat aside {
+  background: #fafbfc !important;
   color: #181c32 !important;
-  border-right: 1px solid #f1f3f7 !important;
+  border-right-color: #f1f3f7 !important;
   box-shadow: none !important;
 }
-.dark.layout-clean-flat [data-sidebar="sidebar"],
-.dark .layout-clean-flat [data-sidebar="sidebar"] {
+.dark.layout-clean-flat aside,
+.dark .layout-clean-flat aside {
   background: #1e1e2d !important;
   color: #a1a5b7 !important;
-  border-right: 1px solid #2b2b40 !important;
-}
-
-.layout-clean-flat [data-sidebar="group-label"] {
-  font-size: 0.9375rem !important;
-  font-weight: 650 !important;
-  text-transform: none;
-  letter-spacing: 0;
-  color: #a1a5b7 !important;
-  padding: 0.5rem 0.5rem 0.375rem !important;
+  border-right-color: #2b2b40 !important;
 }
 
-.layout-clean-flat [data-sidebar="menu-button"] {
+.layout-clean-flat .sidebar-menu-item {
   color: #5e6278 !important;
   border-radius: 0.5rem !important;
   transition: color 0.15s ease, background-color 0.15s ease !important;
-  font-weight: 500 !important;
   box-shadow: none !important;
 }
 
-.layout-clean-flat [data-sidebar="menu-button"]:hover {
+.layout-clean-flat .sidebar-menu-item:hover {
   background: transparent !important;
   color: #181c32 !important;
 }
-.dark.layout-clean-flat [data-sidebar="menu-button"]:hover,
-.dark .layout-clean-flat [data-sidebar="menu-button"]:hover {
+.dark.layout-clean-flat .sidebar-menu-item:hover,
+.dark .layout-clean-flat .sidebar-menu-item:hover {
   background: transparent !important;
   color: #f1f6ff !important;
 }
 
-.layout-clean-flat [data-sidebar="menu-button"]:hover > svg {
-  opacity: 0.85 !important;
-}
-
-.layout-clean-flat [data-sidebar="menu-button"][data-active="true"] {
+.layout-clean-flat .sidebar-menu-item-active {
   background: transparent !important;
   color: #3e97ff !important;
   font-weight: 600 !important;
   box-shadow: none !important;
-  outline: none !important;
 }
-.dark.layout-clean-flat [data-sidebar="menu-button"][data-active="true"],
-.dark .layout-clean-flat [data-sidebar="menu-button"][data-active="true"] {
+.dark.layout-clean-flat .sidebar-menu-item-active,
+.dark .layout-clean-flat .sidebar-menu-item-active {
   background: transparent !important;
   color: #3e97ff !important;
 }
 
-.layout-clean-flat [data-sidebar="menu-button"][data-active="true"] svg {
+.layout-clean-flat .sidebar-menu-item-active svg {
   color: #3e97ff !important;
   opacity: 1 !important;
 }
 
-.layout-clean-flat [data-sidebar="menu-button"] [data-sidebar="menu-icon"],
-.layout-clean-flat [data-sidebar="menu-sub-button"] [data-sidebar="menu-icon"],
-.layout-clean-flat [data-sidebar="menu-button"][data-active="true"] [data-sidebar="menu-icon"],
-.layout-clean-flat [data-sidebar="menu-sub-button"][data-active="true"] [data-sidebar="menu-icon"] {
-  background: transparent !important;
-  color: inherit !important;
-  box-shadow: none !important;
-  outline: none !important;
-}
-
-.layout-clean-flat [data-sidebar="menu-sub"] {
-  margin-left: 0 !important;
-  padding-left: 0 !important;
-  border-left: 0 !important;
-}
-
-.layout-clean-flat [data-sidebar="menu-sub-button"] {
-  color: #5e6278 !important;
-  border-radius: 0.5rem !important;
-  font-size: 0.8125rem !important;
-  font-weight: 400 !important;
-  transition: color 0.15s ease, background-color 0.15s ease !important;
-  box-shadow: none !important;
-}
-
-.layout-clean-flat [data-sidebar="menu-sub-button"]:hover {
-  background: transparent !important;
-  color: #181c32 !important;
-}
-.dark.layout-clean-flat [data-sidebar="menu-sub-button"]:hover,
-.dark .layout-clean-flat [data-sidebar="menu-sub-button"]:hover {
-  background: transparent !important;
-  color: #f1f6ff !important;
-}
-
-.layout-clean-flat [data-sidebar="menu-sub-button"][data-active="true"] {
-  background: transparent !important;
-  color: #3e97ff !important;
-  font-weight: 500 !important;
-  box-shadow: none !important;
-  outline: none !important;
-}
-.dark.layout-clean-flat [data-sidebar="menu-sub-button"][data-active="true"],
-.dark .layout-clean-flat [data-sidebar="menu-sub-button"][data-active="true"] {
-  background: transparent !important;
-  color: #3e97ff !important;
-}
-
 /* Button & input styles override under clean-flat layout */
 .layout-clean-flat [data-slot="button"][data-variant="default"] {
   background: #3e97ff !important;

package/dist/components/AdminApp.svelte

@@ -117,27 +117,16 @@
     Skeleton: Skeleton as unknown as ComponentRegistry['Skeleton'],
   };
 
-  // Merge and keep a local reference — setContext is only visible to *children*,
-  // so we must use the local variable for lookups within this component.
-  const mergedComponents: ComponentRegistry = { ...defaultComponents, ...userComponents };
-  setComponentRegistry(mergedComponents);
-
   // Resolve router provider (default to hash)
+  const mergedComponents = $derived.by((): ComponentRegistry => ({ ...defaultComponents, ...userComponents }));
   const resolvedRouter = $derived(routerProvider ?? createHashRouterProvider());
   const resolvedRouteMode = $derived(routeMode ?? (routerProvider ? 'auto' : 'hash'));
 
-  // Set up initial context synchronously so children can access resources immediately during first render
-  setDataProvider(dataProvider);
-  if (authProvider) setAuthProvider(authProvider);
-  if (taskProvider) setTaskProvider(taskProvider);
-  setResources(resources);
-  setRouterProvider(resolvedRouter);
-  if (locale) setLocale(locale);
-  if (userThemeConfig) configureTheme(userThemeConfig);
-  if (defaultTheme) setTheme(defaultTheme);
+  function syncComponentRegistry() {
+    setComponentRegistry(mergedComponents);
+  }
 
-  // Set up context — use $effect so prop changes are tracked
-  $effect.pre(() => {
+  function syncAppContext() {
     setDataProvider(dataProvider);
     if (authProvider) setAuthProvider(authProvider);
     if (taskProvider) setTaskProvider(taskProvider);
@@ -146,7 +135,15 @@
     if (locale) setLocale(locale);
     if (userThemeConfig) configureTheme(userThemeConfig);
     if (defaultTheme) setTheme(defaultTheme);
-  });
+  }
+
+  // Set up initial context synchronously so children can access resources immediately during first render.
+  syncComponentRegistry();
+  syncAppContext();
+
+  // Set up context — use $effect so prop changes are tracked
+  $effect.pre(syncComponentRegistry);
+  $effect.pre(syncAppContext);
 
   const queryClient = $derived(providedQueryClient ?? new QueryClient({
     defaultOptions: {
@@ -155,11 +152,13 @@
     },
   }));
 
-  // Initialize router with provider synchronously
-  initRouter(resolvedRouter);
-  $effect.pre(() => {
+  function syncRouter() {
     initRouter(resolvedRouter);
-  });
+  }
+
+  // Initialize router with provider synchronously
+  syncRouter();
+  $effect.pre(syncRouter);
 
   // Reactive getters for route state
   const route = $derived(getRoute());
@@ -235,46 +234,50 @@
     <Layout {title} {menu} {siteUrl} routeMode={resolvedRouteMode}>
       {#key route + (params.resource ?? '') + (params.id ?? '') + (params.variant ?? '') + (params.columns ?? '')}
       <div class="svadmin-page-enter">
-      {#if route === '/2fa'}
+      {#if route === '/2fa' || route === '/authentication/branded/2fa'}
         <TwoFactorAuthPage />
       {:else if route === '/public-profile'}
         <PublicProfilePage variant="default" initialTab="projects" />
       {:else if route === '/public-profile/projects/:columns'}
-        <PublicProfilePage variant="default" initialTab="projects" columns={params.columns === '3' ? 3 : 2} />
+        <PublicProfilePage variant="default" initialTab="projects" columns={params.columns?.includes('3') ? 3 : 2} />
       {:else if route === '/public-profile/activity'}
         <PublicProfilePage variant="default" initialTab="activity" />
       {:else if route === '/public-profile/teams'}
         <PublicProfilePage variant="default" initialTab="teams" />
       {:else if route === '/public-profile/profiles/:variant'}
         <PublicProfilePage variant={(params.variant === 'company' || params.variant === 'gamer' || params.variant === 'default' ? params.variant : 'default') as 'company' | 'gamer' | 'default'} />
-      {:else if route === '/account/get-started'}
+      {:else if route === '/account/get-started' || route === '/account/home/get-started'}
         <GetStartedPage />
-      {:else if route === '/account/company-profile'}
+      {:else if route === '/account/home/user-profile'}
+        <SettingsPage />
+      {:else if route === '/account/company-profile' || route === '/account/home/company-profile'}
         <CompanyProfilePage />
-      {:else if route === '/account/settings-plain'}
+      {:else if route === '/account/settings-plain' || route === '/account/home/settings-plain'}
         <SettingsPlainPage />
-      {:else if route === '/account/settings-sidebar'}
+      {:else if route === '/account/settings-sidebar' || route === '/account/home/settings-sidebar'}
         <SettingsSidebarPage />
-      {:else if route === '/account/settings-enterprise'}
+      {:else if route === '/account/settings-enterprise' || route === '/account/home/settings-enterprise'}
         <SettingsEnterprisePage />
-      {:else if route === '/account/import-members'}
+      {:else if route === '/account/:tab'}
+        <SettingsPage />
+      {:else if route === '/account/import-members' || route === '/account/members/import-members'}
         <ImportMembersPage />
-      {:else if route === '/account/members-starter'}
+      {:else if route === '/account/members-starter' || route === '/account/members/members-starter'}
         <MembersStarterPage />
-      {:else if route === '/account/team-members'}
+      {:else if route === '/account/team-members' || route === '/account/members/team-members'}
         <TeamMembersPage />
-      {:else if route === '/account/security-log'}
+      {:else if route === '/account/security-log' || route === '/account/security/security-log'}
         <SecurityLogPage />
-      {:else if route === '/network/user-cards'}
+      {:else if route === '/network/user-cards' || route === '/network/user-cards/nft'}
         <UserCardsNFTPage />
-      {:else if route === '/network/team-crew'}
+      {:else if route === '/network/team-crew' || route === '/network/user-table/team-crew'}
         <TeamCrewTablePage />
       {:else if route.startsWith('/settings')}
         <SettingsPage />
       {:else if route === '/500' || (route === '/:resource' && params.resource === '500')}
         {@const ErrorComp = mergedComponents.ErrorPage || ErrorPage}
         <ErrorComp status="500" />
-      {:else if route === '/' || route === ''}
+      {:else if route === '/' || route === '' || route === '/inventory-dashboard'}
         {#if dashboard}
           {@render dashboard()}
         {:else}

package/dist/components/CanAccess.svelte

@@ -3,15 +3,16 @@
   import { useCan } from '@svadmin/core';
   import type { Action } from '@svadmin/core';
 
-  let { resource, action, params, children, fallback } = $props<{
+  let { resource, action, params, meta, children, fallback } = $props<{
     resource: string;
     action: Action;
     params?: Record<string, unknown>;
+    meta?: Record<string, unknown>;
     children: Snippet;
     fallback?: Snippet;
   }>();
 
-  const can = useCan(() => ({ resource, action, params }));
+  const can = useCan(() => ({ resource, action, params, meta }));
 </script>
 
 {#if can.isLoading}

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

@@ -4,6 +4,7 @@ type $$ComponentProps = {
     resource: string;
     action: Action;
     params?: Record<string, unknown>;
+    meta?: Record<string, unknown>;
     children: Snippet;
     fallback?: Snippet;
 };

package/dist/components/CreateInferencer.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  // CreateInferencer — 基于资源定义零配置渲染创建表单
+  import CreatePage from './CreatePage.svelte';
+
+  interface Props {
+    resourceName: string;
+    class?: string;
+  }
+
+  let { resourceName, class: className = '' }: Props = $props();
+</script>
+
+<CreatePage {resourceName} class={className} />

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

@@ -0,0 +1,7 @@
+interface Props {
+    resourceName: string;
+    class?: string;
+}
+declare const CreateInferencer: import("svelte").Component<Props, {}, "">;
+type CreateInferencer = ReturnType<typeof CreateInferencer>;
+export default CreateInferencer;

package/dist/components/EditInferencer.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  // EditInferencer — 基于资源定义零配置渲染编辑表单
+  // 从 URL 自动提取 :id 参数
+  import EditPage from './EditPage.svelte';
+  import { useParsed } from '@svadmin/core';
+
+  interface Props {
+    resourceName: string;
+    /** 可选：显式指定 id，默认从 URL 解析 */
+    id?: string | number;
+    class?: string;
+  }
+
+  let { resourceName, id, class: className = '' }: Props = $props();
+  const parsed = useParsed();
+  const resolvedId = $derived(id ?? parsed.id ?? '');
+</script>
+
+{#if resolvedId}
+  <EditPage {resourceName} id={resolvedId} class={className} />
+{/if}

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

@@ -0,0 +1,9 @@
+interface Props {
+    resourceName: string;
+    /** 可选：显式指定 id，默认从 URL 解析 */
+    id?: string | number;
+    class?: string;
+}
+declare const EditInferencer: import("svelte").Component<Props, {}, "">;
+type EditInferencer = ReturnType<typeof EditInferencer>;
+export default EditInferencer;

package/dist/components/Header.svelte

@@ -35,7 +35,7 @@
   const CustomNotificationPanel = registry.NotificationPanel;
 </script>
 
-<header class="sticky top-0 z-30 flex h-14 w-full shrink-0 items-center justify-between bg-card/60 backdrop-blur-md px-4 md:px-6">
+<header class="sticky top-0 z-30 flex h-[70px] w-full shrink-0 items-center justify-between border-b border-border/40 bg-background/95 backdrop-blur-sm px-4 md:px-6">
   <div class="flex items-center gap-4">
     {#if children}
       {@render children()}
@@ -64,10 +64,10 @@
     {/if}
 
     {#if showSearch && onSearchClick}
-      <Button variant="outline" size="sm" onclick={onSearchClick} class="gap-2 text-muted-foreground h-8 px-3">
+      <Button variant="outline" size="sm" onclick={onSearchClick} class="gap-2 text-muted-foreground h-9 px-3 rounded-lg border-border/60">
         <Search class="h-3.5 w-3.5" />
-        <span class="hidden sm:inline text-xs">Search...</span>
-        <kbd class="hidden sm:inline-flex items-center gap-0.5 rounded border bg-muted px-1.5 py-0.5 text-[10px] font-medium font-mono text-muted-foreground">
+        <span class="hidden sm:inline text-xs">{t('common.search')}...</span>
+        <kbd class="hidden sm:inline-flex items-center gap-0.5 rounded border bg-muted/60 px-1.5 py-0.5 text-[10px] font-medium font-mono text-muted-foreground">
           <span class="text-xs">⌘</span>K
         </kbd>
       </Button>

package/dist/components/Layout.svelte

@@ -7,7 +7,6 @@
   import CommandPalette from './CommandPalette.svelte';
   import KeyboardShortcuts from './KeyboardShortcuts.svelte';
   import ChatDialog from './ChatDialog.svelte';
-  import TooltipButton from './TooltipButton.svelte';
   import { t } from '@svadmin/core/i18n';
   import { getAuthProvider, getTaskProvider } from '@svadmin/core';
   import type { Identity, MenuItem, TaskProvider, TaskRecord } from '@svadmin/core';
@@ -17,6 +16,7 @@
   import * as Sheet from './ui/sheet/index.js';
   import { Menu } from '@lucide/svelte';
   import { getComponentRegistry } from '../component-registry.svelte.js';
+  import { Button } from './ui/button/index.js';
 
   let commandOpen = $state(false);
   let shortcutsOpen = $state(false);
@@ -105,7 +105,7 @@
 />
 {#if loading}
   <div class="flex h-screen" in:fade={{ duration: 150 }}>
-    <div class="hidden md:block w-64 bg-sidebar/80 p-4 space-y-4">
+    <div class="hidden md:block w-[252px] bg-sidebar/80 p-4 space-y-4">
       <Skeleton class="h-8 w-32" />
       <div class="space-y-2 mt-6">
         {#each Array(5) as _, _i (_i)}
@@ -138,8 +138,10 @@
 
     <div
       class="flex-1 flex flex-col overflow-hidden transition-all duration-300"
-      class:md:ml-64={!collapsed}
-      class:md:ml-16={collapsed}
+      class:md:ml-[252px]={!collapsed}
+      class:sidebar-content-expanded={!collapsed}
+      class:md:ml-[70px]={collapsed}
+      class:sidebar-content-collapsed={collapsed}
     >
       <!-- Header with mobile hamburger -->
       <Header
@@ -149,9 +151,17 @@
       >
         {#snippet children()}
           <!-- Mobile hamburger -->
-          <TooltipButton tooltip={t('common.menu')} class="md:hidden" onclick={() => { mobileMenuOpen = true; }}>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            class="md:hidden gap-1.5 px-2.5"
+            aria-label={t('common.menu')}
+            onclick={() => { mobileMenuOpen = true; }}
+          >
             <Menu class="h-5 w-5" />
-          </TooltipButton>
+            <span class="text-xs">{t('common.menu')}</span>
+          </Button>
         {/snippet}
         {#snippet rightActions()}
           {#if taskProvider}
@@ -162,13 +172,16 @@
         {/snippet}
       </Header>
 
-      <!-- Content area -->
-      <main class="flex-1 overflow-y-auto p-6 md:p-8">
-        {#key getPath()}
-          <div in:fly={{ x: 20, duration: 150 }} out:fade={{ duration: 80 }}>
-            {@render children()}
-          </div>
-        {/key}
+      <!-- Content area: responsive padding + centered max-width container
+           so wide screens don't stretch content indefinitely (avoids sparse layouts) -->
+      <main class="flex-1 overflow-y-auto bg-muted/30 px-4 py-5 sm:px-5 md:px-7.5 md:py-7">
+        <div class="mx-auto w-full max-w-[1600px]">
+          {#key getPath()}
+            <div in:fly={{ x: 20, duration: 150 }} out:fade={{ duration: 80 }}>
+              {@render children()}
+            </div>
+          {/key}
+        </div>
       </main>
     </div>
   </div>

package/dist/components/ListInferencer.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  // ListInferencer — 基于资源定义零配置渲染列表视图
+  // 直接复用 ListPage + AutoTable，不需要手写任何页面代码。
+  import ListPage from './ListPage.svelte';
+
+  interface Props {
+    resourceName: string;
+    class?: string;
+  }
+
+  let { resourceName, class: className = '' }: Props = $props();
+</script>
+
+<ListPage {resourceName} class={className} />

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

@@ -0,0 +1,7 @@
+interface Props {
+    resourceName: string;
+    class?: string;
+}
+declare const ListInferencer: import("svelte").Component<Props, {}, "">;
+type ListInferencer = ReturnType<typeof ListInferencer>;
+export default ListInferencer;

package/dist/components/ResourceInferencer.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  // ResourceInferencer — 一站式零配置 CRUD 渲染器
+  // 根据 URL action（list/create/edit/show）自动分发到对应的 Inferencer 组件。
+  // 用法：<ResourceInferencer resourceName="posts" />
+  import { useParsed } from '@svadmin/core';
+  import ListInferencer from './ListInferencer.svelte';
+  import CreateInferencer from './CreateInferencer.svelte';
+  import EditInferencer from './EditInferencer.svelte';
+  import ShowInferencer from './ShowInferencer.svelte';
+
+  interface Props {
+    resourceName: string;
+    class?: string;
+  }
+
+  let { resourceName, class: className = '' }: Props = $props();
+  const parsed = useParsed();
+</script>
+
+{#if parsed.action === 'create'}
+  <CreateInferencer {resourceName} class={className} />
+{:else if parsed.action === 'edit'}
+  <EditInferencer {resourceName} class={className} />
+{:else if parsed.action === 'show'}
+  <ShowInferencer {resourceName} class={className} />
+{:else}
+  <ListInferencer {resourceName} class={className} />
+{/if}

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

@@ -0,0 +1,7 @@
+interface Props {
+    resourceName: string;
+    class?: string;
+}
+declare const ResourceInferencer: import("svelte").Component<Props, {}, "">;
+type ResourceInferencer = ReturnType<typeof ResourceInferencer>;
+export default ResourceInferencer;