@svadmin/ui 0.36.0 → 0.38.0

package/dist/app.css

@@ -1,9 +1,9 @@
 /* Typography — Inter font for clean, modern look */
 
-/* @svadmin/ui — Design Tokens (Elygate-inspired)
+/* @svadmin/ui — Design Tokens (clean admin shell)
  * Auto-imported by AdminApp. Can be overridden by consumer's CSS.
  *
- * Based on Elygate dashboard style: Indigo primary, light glassmorphism,
+ * Clean dashboard style: indigo primary, light glassmorphism,
  * professional admin aesthetic with subtle depth.
  */
 
@@ -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);
@@ -253,7 +253,7 @@
     --chart-1: oklch(0.541 0.281 293.009);
   }
 
-  /* Stripe-inspired Soft Shadows — premium, multi-layered depth */
+  /* Soft shadows — premium, multi-layered depth */
   [data-slot="button"],
   [data-slot="input"],
   [data-slot="select-trigger"],
@@ -263,7 +263,7 @@
     box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 0 0 1px rgb(0 0 0 / 0.02);
   }
 
-  /* Stripe-style: form inputs use card background instead of transparent */
+  /* Form inputs use card background instead of transparent */
   [data-slot="input"],
   [data-slot="textarea"],
   [data-slot="select"] {
@@ -271,7 +271,7 @@
   }
   
   [data-slot="card"] {
-    /* Classic Stripe soft shadow: faint ambient + directional drop */
+    /* Classic soft shadow: faint ambient + directional drop */
     box-shadow: 0 2px 5px -1px rgb(0 0 0 / 0.04), 0 1px 1px -1px rgb(0 0 0 / 0.04), 0 0 0 1px rgb(0 0 0 / 0.02);
   }
 
@@ -333,7 +333,7 @@ button:active:not(:disabled) {
 .dark ::-webkit-scrollbar-thumb { background: oklch(0.35 0 0); }
 .dark ::-webkit-scrollbar-thumb:hover { background: oklch(0.45 0 0); }
 
-/* ① Card Hover Elevation Lift — Stripe-style float on hover */
+/* Card Hover Elevation Lift — subtle float on hover */
 [data-slot="card"] {
   transition: box-shadow 0.2s ease, transform 0.2s ease;
 }
@@ -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;
@@ -1245,16 +1199,16 @@ main {
   }
 
   .layout-clean-flat main [data-slot="card"] {
-    border-left: 0 !important;
-    border-right: 0 !important;
-    border-radius: 0 !important;
+    border-left: 1px solid color-mix(in oklch, var(--border) 72%, transparent) !important;
+    border-right: 1px solid color-mix(in oklch, var(--border) 72%, transparent) !important;
+    border-radius: 0.5rem !important;
   }
 
   .layout-clean-flat main [data-slot="card-header"],
   .layout-clean-flat main [data-slot="card-content"],
   .layout-clean-flat main [data-slot="card-footer"] {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
+    padding-left: 1rem !important;
+    padding-right: 1rem !important;
   }
 
   .layout-clean-flat main > div[class*="space-y"] > section:first-child {
@@ -1275,6 +1229,24 @@ main {
   .layout-clean-flat [data-svadmin-form-actions] {
     width: 100% !important;
   }
+
+  .layout-clean-flat [data-svadmin-table-card],
+  .layout-clean-flat [data-svadmin-show-card],
+  .layout-clean-flat [data-svadmin-form-card] {
+    border-left: 1px solid color-mix(in oklch, var(--border) 72%, transparent) !important;
+    border-right: 1px solid color-mix(in oklch, var(--border) 72%, transparent) !important;
+    border-radius: 0.5rem !important;
+  }
+
+  .layout-clean-flat [data-svadmin-table-card] [data-slot="card-header"],
+  .layout-clean-flat [data-svadmin-table-card] [data-slot="card-content"],
+  .layout-clean-flat [data-svadmin-show-card] [data-slot="card-header"],
+  .layout-clean-flat [data-svadmin-show-card] [data-slot="card-content"],
+  .layout-clean-flat [data-svadmin-form-card] [data-slot="card-header"],
+  .layout-clean-flat [data-svadmin-form-card] [data-slot="card-content"] {
+    padding-left: 1rem !important;
+    padding-right: 1rem !important;
+  }
 }
 
 @media (min-width: 768px) and (max-width: 1023px) {
@@ -1375,15 +1347,15 @@ main {
   }
 
   .layout-clean-flat [data-svadmin-content-page] [data-slot="card"] {
-    border-left: 0 !important;
-    border-right: 0 !important;
-    border-radius: 0 !important;
+    border-left: 1px solid var(--svadmin-content-border) !important;
+    border-right: 1px solid var(--svadmin-content-border) !important;
+    border-radius: 0.5rem !important;
   }
 
   .layout-clean-flat [data-svadmin-content-page] [data-slot="card-content"],
   .layout-clean-flat [data-svadmin-content-page] [data-slot="card-header"] {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
+    padding-left: 1rem !important;
+    padding-right: 1rem !important;
   }
 
   .layout-clean-flat [data-svadmin-content-page] [class*="grid-cols-3"] {

package/dist/components/AdminApp.svelte

@@ -235,46 +235,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/AutoForm.svelte

@@ -44,17 +44,14 @@
   const hasGroups = $derived(formFields.some(f => f.group));
   const groups = $derived((() => {
     if (!hasGroups) return [];
-    const result: Array<{ name: string; fields: FieldDefinition[] }> = [];
+    const order: string[] = [];
+    const map = new Map<string, FieldDefinition[]>();
     for (const f of formFields) {
       const g = f.group ?? '';
-      let group = result.find(item => item.name === g);
-      if (!group) {
-        group = { name: g, fields: [] };
-        result.push(group);
-      }
-      group.fields.push(f);
+      if (!map.has(g)) { order.push(g); map.set(g, []); }
+      (map.get(g) ?? []).push(f);
     }
-    return result;
+    return order.map(g => ({ name: g, fields: map.get(g) ?? [] }));
   })());
 
   // ─── Default values from field metadata ───────────────────────────
@@ -135,37 +132,26 @@
   }
 </script>
 
-<div class="space-y-6" data-svadmin-form-shell>
-  <div class="border-b border-border/60 pb-5" data-svadmin-form-header>
-    <div class="flex flex-wrap items-center gap-4">
-      <TooltipButton
-        tooltip={t('common.back')}
-        onclick={() => guardNavigate(() => navigate(`/${resourceName}`))}
-        class="h-10 w-10"
-      >
-        <ArrowLeft class="h-5 w-5" />
-      </TooltipButton>
-      <div class="min-w-0 flex-1">
-        <h1 class="truncate text-2xl font-semibold tracking-tight text-foreground">{pageTitle}</h1>
-        <div class="mt-2 flex flex-wrap items-center gap-2">
-          <Badge variant="secondary" class="rounded-full px-2.5 py-0.5 text-[0.6875rem] font-semibold">
-            {mode === 'create' ? t('common.create') : mode === 'show' ? t('common.detail') : t('common.edit')}
-          </Badge>
-          <p class="text-sm text-muted-foreground">{resource.label}</p>
-        </div>
-      </div>
-      {#if headerContent}
-        {@render headerContent()}
-      {/if}
-      {#if form.isTainted()}
-        <Badge variant="outline" class="border-warning/30 bg-warning/10 text-warning-foreground">{t('common.unsaved')}</Badge>
-      {/if}
-    </div>
+<div class="space-y-6">
+  <div class="flex items-center gap-4">
+    <TooltipButton
+      tooltip={t('common.back')}
+      onclick={() => guardNavigate(() => navigate(`/${resourceName}`))}
+    >
+      <ArrowLeft class="h-5 w-5" />
+    </TooltipButton>
+    <h1 class="text-xl font-semibold text-foreground">{pageTitle}</h1>
+    {#if headerContent}
+      {@render headerContent()}
+    {/if}
+    {#if form.isTainted()}
+      <Badge variant="outline" class="border-warning/30 bg-warning/10 text-warning-foreground">{t('common.unsaved')}</Badge>
+    {/if}
   </div>
 
   {#if form.loading}
-    <div class="max-w-4xl space-y-6">
-      <div class="space-y-5 border-y border-border/60 py-6">
+    <div class="max-w-3xl space-y-6">
+      <div class="rounded-lg shadow-sm ring-1 ring-border/10 p-6 space-y-5">
         {#each Array(4) as _, _i (_i)}
           <div class="space-y-2">
             <Skeleton class="h-4 w-24" />
@@ -175,7 +161,7 @@
       </div>
     </div>
   {:else}
-    <form onsubmit={(e: Event) => { e.preventDefault(); handleSubmit(); }} class="max-w-5xl space-y-6" data-svadmin-form-settings>
+    <form onsubmit={(e: Event) => { e.preventDefault(); handleSubmit(); }} class="max-w-3xl space-y-6">
       {#if submitError}
         <div transition:slide={{ duration: 300, axis: 'y' }} class="svadmin-shake">
           <Alert.Root variant="destructive">
@@ -187,15 +173,15 @@
 
       {#if hasGroups}
         {#each groups as group, _i (_i)}
-          <Card.Root class="border-border/60 bg-card shadow-none" data-svadmin-form-card>
+          <Card.Root class="border-border/40 shadow-sm">
             {#if group.name}
               <Card.Header>
-                <Card.Title class="text-base font-semibold">{group.name}</Card.Title>
+                <Card.Title class="text-lg">{group.name}</Card.Title>
               </Card.Header>
             {/if}
-            <Card.Content class="px-4 py-0 sm:px-6" data-svadmin-form-content>
+            <Card.Content class="space-y-5 px-4 sm:px-6 pb-4 sm:pb-6 pt-0">
               {#each group.fields as field (field.key)}
-                <div data-svadmin-form-row class:border-destructive={!!form.errors[field.key]}>
+                <div class:border-destructive={!!form.errors[field.key]}>
                   {#if fieldRenderer}
                     {@render fieldRenderer({ field, value: form.values[field.key], onchange: (val: unknown) => form.setFieldValue(field.key, val) })}
                   {:else}
@@ -215,10 +201,10 @@
           </Card.Root>
         {/each}
       {:else}
-        <Card.Root class="border-border/60 bg-card shadow-none" data-svadmin-form-card>
-          <Card.Content class="px-4 py-0 sm:px-6" data-svadmin-form-content>
+        <Card.Root class="border-border/40 shadow-sm">
+          <Card.Content class="space-y-5 px-4 pt-5 pb-4 sm:px-6 sm:pt-6 sm:pb-6">
             {#each formFields as field (field.key)}
-              <div data-svadmin-form-row class:border-destructive={!!form.errors[field.key]}>
+              <div class:border-destructive={!!form.errors[field.key]}>
                 {#if fieldRenderer}
                   {@render fieldRenderer({ field, value: form.values[field.key], onchange: (val: unknown) => form.setFieldValue(field.key, val) })}
                 {:else}
@@ -238,11 +224,11 @@
         </Card.Root>
       {/if}
 
-      <div class="sticky bottom-4 z-10 flex flex-wrap items-center gap-3 border-t border-border/60 bg-background/95 p-3 backdrop-blur" data-svadmin-form-actions>
+      <div class="flex items-center gap-3">
         {#if formActions}
           {@render formActions({ isLoading: form.submitting, onSubmit: handleSubmit })}
         {:else if !isReadonly}
-          <Button type="submit" disabled={form.submitting} class="h-10 px-5">
+          <Button type="submit" disabled={form.submitting}>
             {#if form.submitting}
               <Loader2 class="h-4 w-4 animate-spin" data-icon="inline-start" />
             {:else}
@@ -253,7 +239,6 @@
           <Button
             type="button"
             variant="outline"
-            class="h-10 rounded-xl"
             onclick={() => guardNavigate(() => navigate(`/${resourceName}`))}
           >
             {t('common.cancel')}