@svadmin/ui 0.84.1 → 0.86.0

package/dist/app.theme.css

@@ -5522,23 +5522,16 @@
     --container-xs: 20rem;
     --container-sm: 24rem;
     --container-xl: 36rem;
-    --container-2xl: 42rem;
     --container-3xl: 48rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
-    --text-base: 1rem;
-    --text-base--line-height: calc(1.5 / 1);
-    --text-lg: 1.125rem;
-    --text-lg--line-height: calc(1.75 / 1.125);
-    --text-xl: 1.25rem;
-    --text-xl--line-height: calc(1.75 / 1.25);
     --text-2xl: 1.5rem;
     --text-2xl--line-height: calc(2 / 1.5);
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
-    --leading-tight: 1.25;
+    --radius-md: calc(var(--radius) - 2px);
     --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
     --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
@@ -5605,6 +5598,9 @@
   .mt-3 {
     margin-top: calc(var(--spacing) * 3);
   }
+  .mt-\[var\(--svadmin-space-1\)\] {
+    margin-top: var(--svadmin-space-1);
+  }
   .block {
     display: block;
   }
@@ -5653,9 +5649,6 @@
   .w-full {
     width: 100%;
   }
-  .max-w-2xl {
-    max-width: var(--container-2xl);
-  }
   .max-w-3xl {
     max-width: var(--container-3xl);
   }
@@ -5665,9 +5658,6 @@
   .max-w-\[64rem\] {
     max-width: 64rem;
   }
-  .max-w-\[65ch\] {
-    max-width: 65ch;
-  }
   .max-w-\[74rem\] {
     max-width: 74rem;
   }
@@ -5677,6 +5667,9 @@
   .max-w-\[92rem\] {
     max-width: 92rem;
   }
+  .max-w-\[var\(--svadmin-measure\)\] {
+    max-width: var(--svadmin-measure);
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -5695,8 +5688,8 @@
   .flex-1 {
     flex: 1;
   }
-  .flex-\[1_1_16rem\] {
-    flex: 1 1 16rem;
+  .flex-\[1_1_var\(--svadmin-chrome-basis\)\] {
+    flex: 1 1 var(--svadmin-chrome-basis);
   }
   .flex-shrink {
     flex-shrink: 1;
@@ -5770,15 +5763,14 @@
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
-  :where(.space-y-0\.5 > :not(:last-child)) {
-    --tw-space-y-reverse: 0;
-    margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
-    margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
+  .gap-\[var\(--svadmin-space-2\)\] {
+    gap: var(--svadmin-space-2);
   }
-  :where(.space-y-1 > :not(:last-child)) {
-    --tw-space-y-reverse: 0;
-    margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
-    margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
+  .gap-\[var\(--svadmin-space-3\)\] {
+    gap: var(--svadmin-space-3);
+  }
+  .gap-\[var\(--svadmin-space-5\)\] {
+    gap: var(--svadmin-space-5);
   }
   :where(.space-y-2 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
@@ -5805,6 +5797,21 @@
     margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
     margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
   }
+  :where(.space-y-\[var\(--svadmin-space-1\)\] > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(var(--svadmin-space-1) * var(--tw-space-y-reverse));
+    margin-block-end: calc(var(--svadmin-space-1) * calc(1 - var(--tw-space-y-reverse)));
+  }
+  :where(.space-y-\[var\(--svadmin-space-3\)\] > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(var(--svadmin-space-3) * var(--tw-space-y-reverse));
+    margin-block-end: calc(var(--svadmin-space-3) * calc(1 - var(--tw-space-y-reverse)));
+  }
+  :where(.space-y-\[var\(--svadmin-space-5\)\] > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(var(--svadmin-space-5) * var(--tw-space-y-reverse));
+    margin-block-end: calc(var(--svadmin-space-5) * calc(1 - var(--tw-space-y-reverse)));
+  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -5895,9 +5902,6 @@
   .p-0 {
     padding: 0px;
   }
-  .p-3 {
-    padding: calc(var(--spacing) * 3);
-  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -5910,6 +5914,9 @@
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
+  .px-\[var\(--svadmin-space-4\)\] {
+    padding-inline: var(--svadmin-space-4);
+  }
   .py-1 {
     padding-block: var(--spacing);
   }
@@ -5919,9 +5926,6 @@
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
-  .py-4 {
-    padding-block: calc(var(--spacing) * 4);
-  }
   .py-5 {
     padding-block: calc(var(--spacing) * 5);
   }
@@ -5931,6 +5935,15 @@
   .py-\[7px\] {
     padding-block: 7px;
   }
+  .py-\[var\(--svadmin-space-1\)\] {
+    padding-block: var(--svadmin-space-1);
+  }
+  .py-\[var\(--svadmin-space-3\)\] {
+    padding-block: var(--svadmin-space-3);
+  }
+  .py-\[var\(--svadmin-space-4\)\] {
+    padding-block: var(--svadmin-space-4);
+  }
   .text-left {
     text-align: left;
   }
@@ -5938,22 +5951,10 @@
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
   }
-  .text-base {
-    font-size: var(--text-base);
-    line-height: var(--tw-leading, var(--text-base--line-height));
-  }
-  .text-lg {
-    font-size: var(--text-lg);
-    line-height: var(--tw-leading, var(--text-lg--line-height));
-  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
-  .text-xl {
-    font-size: var(--text-xl);
-    line-height: var(--tw-leading, var(--text-xl--line-height));
-  }
   .text-xs {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
@@ -5961,17 +5962,32 @@
   .text-\[0\.8125rem\] {
     font-size: 0.8125rem;
   }
-  .leading-5 {
-    --tw-leading: calc(var(--spacing) * 5);
-    line-height: calc(var(--spacing) * 5);
+  .text-\[length\:var\(--svadmin-text-body\)\] {
+    font-size: var(--svadmin-text-body);
+  }
+  .text-\[length\:var\(--svadmin-text-caption\)\] {
+    font-size: var(--svadmin-text-caption);
+  }
+  .text-\[length\:var\(--svadmin-text-label\)\] {
+    font-size: var(--svadmin-text-label);
+  }
+  .text-\[length\:var\(--svadmin-text-section\)\] {
+    font-size: var(--svadmin-text-section);
+  }
+  .text-\[length\:var\(--svadmin-text-title\)\] {
+    font-size: var(--svadmin-text-title);
   }
   .leading-6 {
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
   }
-  .leading-tight {
-    --tw-leading: var(--leading-tight);
-    line-height: var(--leading-tight);
+  .leading-\[var\(--svadmin-leading-body\)\] {
+    --tw-leading: var(--svadmin-leading-body);
+    line-height: var(--svadmin-leading-body);
+  }
+  .leading-\[var\(--svadmin-leading-tight\)\] {
+    --tw-leading: var(--svadmin-leading-tight);
+    line-height: var(--svadmin-leading-tight);
   }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
@@ -6095,15 +6111,9 @@
   .\[--svadmin-metric-state-border-width\:3px\] {
     --svadmin-metric-state-border-width: 3px;
   }
-  .\[--svadmin-metric-state-height\:4\.5rem\] {
-    --svadmin-metric-state-height: 4.5rem;
-  }
   .\[--svadmin-metric-state-height\:6rem\] {
     --svadmin-metric-state-height: 6rem;
   }
-  .\[--svadmin-metric-state-padding\:0\.75rem\] {
-    --svadmin-metric-state-padding: 0.75rem;
-  }
   .\[--svadmin-metric-state-padding\:1\.25rem\] {
     --svadmin-metric-state-padding: 1.25rem;
   }
@@ -6122,11 +6132,8 @@
   .\[--svadmin-status-color\:var\(--warning\)\] {
     --svadmin-status-color: var(--warning);
   }
-  .\[--svadmin-table-state-height\:6rem\] {
-    --svadmin-table-state-height: 6rem;
-  }
-  .\[--svadmin-table-state-height\:8rem\] {
-    --svadmin-table-state-height: 8rem;
+  .\[--svadmin-table-state-height\:var\(--svadmin-table-state-min-h\)\] {
+    --svadmin-table-state-height: var(--svadmin-table-state-min-h);
   }
   .\[writing-mode\:vertical-rl\] {
     writing-mode: vertical-rl;
@@ -6207,33 +6214,17 @@
   .\[\&_\[data-command-group-heading\]\]\:uppercase [data-command-group-heading] {
     text-transform: uppercase;
   }
-  .\[\&\[data-slot\=table-cell\]\]\:py-1[data-slot=table-cell] {
-    padding-block: var(--spacing);
-  }
-  .\[\&\[data-slot\=table-cell\]\]\:py-2[data-slot=table-cell] {
-    padding-block: calc(var(--spacing) * 2);
-  }
-  .\[\&\[data-slot\=table-cell\]\]\:text-sm[data-slot=table-cell] {
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-  }
-  .\[\&\[data-slot\=table-cell\]\]\:text-xs[data-slot=table-cell] {
-    font-size: var(--text-xs);
-    line-height: var(--tw-leading, var(--text-xs--line-height));
-  }
-  .\[\&\[data-slot\=table-head\]\]\:py-1[data-slot=table-head] {
-    padding-block: var(--spacing);
+  .\[\&\[data-slot\=table-cell\]\]\:py-\[var\(--svadmin-space-2\)\][data-slot=table-cell] {
+    padding-block: var(--svadmin-space-2);
   }
-  .\[\&\[data-slot\=table-head\]\]\:py-2[data-slot=table-head] {
-    padding-block: calc(var(--spacing) * 2);
+  .\[\&\[data-slot\=table-cell\]\]\:text-\[length\:var\(--svadmin-text-body\)\][data-slot=table-cell] {
+    font-size: var(--svadmin-text-body);
   }
-  .\[\&\[data-slot\=table-head\]\]\:text-sm[data-slot=table-head] {
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
+  .\[\&\[data-slot\=table-head\]\]\:py-\[var\(--svadmin-space-2\)\][data-slot=table-head] {
+    padding-block: var(--svadmin-space-2);
   }
-  .\[\&\[data-slot\=table-head\]\]\:text-xs[data-slot=table-head] {
-    font-size: var(--text-xs);
-    line-height: var(--tw-leading, var(--text-xs--line-height));
+  .\[\&\[data-slot\=table-head\]\]\:text-\[length\:var\(--svadmin-text-body\)\][data-slot=table-head] {
+    font-size: var(--svadmin-text-body);
   }
 }
 @property --tw-rotate-x {
@@ -6471,25 +6462,32 @@
   }
 }
 @layer components {
+  /*
+   * The skip link uses a generated translate-y utility, whose composite
+   * translate declaration is invalid when no x-axis value is present.
+   * Keep this accessibility control hidden until focus without relying on
+   * the host application's utility CSS implementation.
+   */
+  [data-svadmin-skip-link] {
+    transform: translateY(calc(-100% - var(--svadmin-space-4)));
+  }
+  [data-svadmin-skip-link]:focus,
+  [data-svadmin-skip-link]:focus-visible {
+    transform: translateY(0);
+  }
+
   .svadmin-page-header {
-    --svadmin-page-header-gap: 0.5rem;
+    --svadmin-page-header-gap: var(--svadmin-space-2);
     min-width: 0;
   }
-  .svadmin-page-header[data-density="compact"] {
-    --svadmin-page-header-gap: 0.375rem;
-  }
   .svadmin-page-header__breadcrumbs {
-    margin-bottom: 1rem;
-  }
-  .svadmin-page-header[data-density="compact"] .svadmin-page-header__breadcrumbs {
-    margin-bottom: 0.375rem;
-    font-size: 0.75rem;
+    margin-bottom: var(--svadmin-space-4);
   }
   .svadmin-page-header__row, .svadmin-filter-toolbar__row {
     display: flex;
     flex-direction: column;
     min-width: 0;
-    gap: 0.5rem;
+    gap: var(--svadmin-space-2);
   }
   .svadmin-page-header__row {
     gap: var(--svadmin-page-header-gap);
@@ -6498,7 +6496,7 @@
     display: flex;
     align-items: center;
     min-width: 0;
-    gap: 0.625rem;
+    gap: var(--svadmin-space-3);
   }
   .svadmin-page-header__text {
     min-width: 0;
@@ -6508,7 +6506,7 @@
     flex-wrap: wrap;
     align-items: center;
     min-width: 0;
-    gap: 0.5rem;
+    gap: var(--svadmin-space-2);
   }
   .svadmin-page-header__tags, .svadmin-page-header__actions {
     max-width: 100%;
@@ -6517,24 +6515,17 @@
   .svadmin-page-header__title {
     min-width: 0;
     color: var(--foreground);
-    font-size: 1.25rem;
+    font-size: var(--svadmin-text-title);
     font-weight: 600;
-    line-height: 1.75rem;
+    line-height: var(--svadmin-leading-tight);
     overflow-wrap: anywhere;
   }
   .svadmin-page-header__description {
     color: var(--muted-foreground);
-    font-size: 0.875rem;
-    line-height: 1.25rem;
+    font-size: var(--svadmin-text-body);
+    line-height: var(--svadmin-leading-body);
     overflow-wrap: anywhere;
   }
-  .svadmin-page-header[data-density="compact"] .svadmin-page-header__title {
-    font-size: 1.125rem;
-  }
-  .svadmin-page-header[data-density="compact"] .svadmin-page-header__description {
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
   .svadmin-page-header .svadmin-page-header__back {
     flex-shrink: 0;
     color: var(--muted-foreground);
@@ -6543,14 +6534,14 @@
     color: var(--foreground);
   }
   .svadmin-page-header .svadmin-page-header__back-icon {
-    width: 1rem;
-    height: 1rem;
+    width: var(--svadmin-space-4);
+    height: var(--svadmin-space-4);
   }
   .svadmin-breadcrumbs {
     min-width: 0;
   }
   .svadmin-breadcrumbs--spaced {
-    margin-bottom: 1rem;
+    margin-bottom: var(--svadmin-space-4);
   }
   .svadmin-breadcrumbs__item {
     display: inline-flex;
@@ -6561,16 +6552,11 @@
     color: var(--muted-foreground);
   }
   .svadmin-filter-toolbar {
-    --svadmin-filter-control-height: 2.25rem;
-    --svadmin-filter-control-font: 0.875rem;
-    --svadmin-filter-search-icon-size: 1rem;
+    --svadmin-filter-control-height: var(--svadmin-control-h);
+    --svadmin-filter-control-font: var(--svadmin-text-body);
+    --svadmin-filter-search-icon-size: var(--svadmin-space-4);
     min-width: 0;
   }
-  .svadmin-filter-toolbar[data-density="compact"] {
-    --svadmin-filter-control-height: 2rem;
-    --svadmin-filter-control-font: 0.75rem;
-    --svadmin-filter-search-icon-size: 0.875rem;
-  }
   .svadmin-filter-toolbar__search {
     position: relative;
     min-width: 0;
@@ -6578,60 +6564,57 @@
   .svadmin-filter-toolbar__search-icon {
     position: absolute;
     top: 50%;
-    inset-inline-start: 0.75rem;
+    inset-inline-start: var(--svadmin-space-3);
     width: var(--svadmin-filter-search-icon-size);
     height: var(--svadmin-filter-search-icon-size);
     color: var(--muted-foreground);
     transform: translateY(-50%);
     pointer-events: none;
   }
-  .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__input {
+  .svadmin-filter-toolbar .svadmin-filter-toolbar__input {
     height: var(--svadmin-filter-control-height);
-    padding-inline: 2.25rem;
+    padding-inline: calc(var(--svadmin-space-5) + var(--svadmin-space-3));
     font-size: var(--svadmin-filter-control-font);
-    line-height: 1rem;
+    line-height: var(--svadmin-leading-tight);
   }
-  .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__clear {
+  .svadmin-filter-toolbar .svadmin-filter-toolbar__clear {
     position: absolute;
     top: 50%;
-    inset-inline-end: 0.25rem;
+    inset-inline-end: var(--svadmin-space-1);
     transform: translateY(-50%);
   }
-  .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__toggle {
+  .svadmin-filter-toolbar .svadmin-filter-toolbar__toggle {
     flex-shrink: 0;
-    gap: 0.375rem;
+    gap: var(--svadmin-space-2);
     height: var(--svadmin-filter-control-height);
     font-size: var(--svadmin-filter-control-font);
     max-width: 100%;
     white-space: normal;
     overflow-wrap: anywhere;
   }
-  .svadmin-filter-toolbar[data-density="compact"] .svadmin-filter-toolbar__toggle {
-    padding-inline: 0.625rem;
-  }
   .svadmin-filter-toolbar .svadmin-filter-toolbar__control-icon {
-    width: 0.875rem;
-    height: 0.875rem;
+    width: var(--svadmin-space-3);
+    height: var(--svadmin-space-3);
   }
   .svadmin-filter-toolbar .svadmin-filter-toolbar__chevron {
-    width: 0.75rem;
-    height: 0.75rem;
-    margin-inline-start: 0.125rem;
+    width: var(--svadmin-space-3);
+    height: var(--svadmin-space-3);
+    margin-inline-start: var(--svadmin-space-1);
     color: var(--muted-foreground);
   }
-  .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__count {
-    height: 1rem;
-    min-height: 1rem;
-    min-width: 1rem;
-    margin-inline-start: 0.125rem;
-    padding: 0 0.25rem;
-    font-size: 0.625rem;
+  .svadmin-filter-toolbar .svadmin-filter-toolbar__count {
+    height: var(--svadmin-space-4);
+    min-height: var(--svadmin-space-4);
+    min-width: var(--svadmin-space-4);
+    margin-inline-start: var(--svadmin-space-1);
+    padding: 0 var(--svadmin-space-1);
+    font-size: var(--svadmin-text-caption);
     font-weight: 600;
     line-height: 1;
     font-variant-numeric: tabular-nums;
   }
   .svadmin-filter-toolbar .svadmin-filter-toolbar-advanced {
-    margin-top: 0.5rem;
+    margin-top: var(--svadmin-space-2);
     border: 1px solid var(--border);
     @supports (color: color-mix(in lab, red, red)) {
       border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
@@ -6641,7 +6624,7 @@
     @supports (color: color-mix(in lab, red, red)) {
       background: color-mix(in oklch, var(--muted) 20%, transparent);
     }
-    padding: 0.75rem;
+    padding: var(--svadmin-space-3);
     overflow-wrap: anywhere;
   }
   @media (min-width: 640px) {
@@ -6654,13 +6637,317 @@
       justify-content: space-between;
     }
     .svadmin-page-header__heading {
-      flex: 1 1 16rem;
+      flex: 1 1 var(--svadmin-chrome-basis);
     }
     .svadmin-filter-toolbar__search {
-      flex: 1 1 14rem;
+      flex: 1 1 var(--svadmin-chrome-basis);
     }
   }
 }
+/* Router-agnostic application shell.
+ *
+ * Every length, size and color here comes from a token. That is the contract
+ * hosts rely on: a host with its own router composes the shell with snippets and
+ * overrides tokens, instead of re-implementing sidebar, topbar and page
+ * composition in bespoke CSS. See docs/components/app-shell.md. */
+@layer components {
+  .svadmin-app-shell {
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    grid-template-columns: minmax(0, 1fr);
+    min-height: 100dvh;
+    background: var(--background);
+    color: var(--foreground);
+    font-size: var(--svadmin-text-body);
+    line-height: var(--svadmin-leading-body);
+  }
+  .svadmin-app-shell[data-width="narrow"] {
+    --svadmin-shell-max: 48rem;
+  }
+  .svadmin-app-shell[data-width="wide"] {
+    --svadmin-shell-max: 92rem;
+  }
+  .svadmin-app-shell[data-width="full"] {
+    --svadmin-shell-max: none;
+  }
+  .svadmin-app-shell[data-sidebar="true"] {
+    grid-template-columns: var(--svadmin-shell-sidebar-w) minmax(0, 1fr);
+    grid-template-areas:
+      "topbar topbar"
+      "sidebar main"
+      "sidebar footer";
+  }
+  .svadmin-app-shell[data-collapsed="true"] {
+    --svadmin-shell-sidebar-w: var(--svadmin-shell-sidebar-w-collapsed);
+  }
+  .svadmin-app-shell[data-aside="true"] .svadmin-app-shell__body {
+    grid-template-columns: minmax(0, 1fr) minmax(0, var(--svadmin-shell-aside-w));
+  }
+
+  .svadmin-app-shell__skip {
+    position: fixed;
+    z-index: 60;
+    inset-block-start: var(--svadmin-space-2);
+    inset-inline-start: var(--svadmin-space-2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--card);
+    padding: var(--svadmin-space-2) var(--svadmin-space-3);
+    color: var(--foreground);
+    font-size: var(--svadmin-text-caption);
+    font-weight: 600;
+    transform: translateY(calc(-1 * (var(--svadmin-space-6) + var(--svadmin-space-5))));
+  }
+  .svadmin-app-shell__skip:focus-visible {
+    transform: none;
+    outline: var(--svadmin-focus-width) solid var(--ring);
+    outline-offset: var(--svadmin-focus-offset);
+  }
+
+  .svadmin-app-shell__topbar {
+    grid-area: topbar;
+    display: flex;
+    align-items: center;
+    gap: var(--svadmin-space-3);
+    min-width: 0;
+    min-height: var(--svadmin-shell-topbar-h);
+    border-bottom: 1px solid var(--border);
+    background: var(--card);
+    padding-inline: var(--svadmin-shell-gutter);
+  }
+  .svadmin-app-shell__topbar-start,
+  .svadmin-app-shell__topbar-end {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    gap: var(--svadmin-space-2);
+  }
+  .svadmin-app-shell__topbar-main {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    min-width: 0;
+    gap: var(--svadmin-space-3);
+  }
+  .svadmin-app-shell__topbar-end {
+    flex: 0 0 auto;
+    justify-content: flex-end;
+  }
+
+  .svadmin-app-shell__sidebar {
+    grid-area: sidebar;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    border-inline-end: 1px solid var(--sidebar-border, var(--border));
+    background: var(--sidebar, var(--card));
+    color: var(--sidebar-foreground, var(--foreground));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+  .svadmin-app-shell__sidebar-inner {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--svadmin-space-2);
+    min-width: 0;
+    padding: var(--svadmin-space-3) var(--svadmin-space-2);
+  }
+
+  .svadmin-app-shell__main {
+    grid-area: main;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+  }
+  .svadmin-app-shell__body {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-items: start;
+    gap: var(--svadmin-section-gap);
+    width: 100%;
+    max-width: var(--svadmin-shell-max);
+    margin-inline: auto;
+    padding: var(--svadmin-shell-gutter);
+    min-width: 0;
+  }
+  .svadmin-app-shell__content {
+    display: grid;
+    gap: var(--svadmin-section-gap);
+    min-width: 0;
+  }
+  .svadmin-app-shell__aside {
+    display: grid;
+    gap: var(--svadmin-section-gap);
+    min-width: 0;
+  }
+
+  .svadmin-app-shell__footer {
+    grid-area: footer;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--svadmin-space-2);
+    width: 100%;
+    max-width: var(--svadmin-shell-max);
+    margin-inline: auto;
+    border-top: 1px solid var(--border);
+    padding: var(--svadmin-space-3) var(--svadmin-shell-gutter);
+    color: var(--muted-foreground);
+    font-size: var(--svadmin-text-caption);
+  }
+
+  /* The mobile navigation trigger only exists below the sidebar breakpoint. */
+  .svadmin-app-shell__mobile-toggle {
+    display: none;
+  }
+  .svadmin-app-shell__scrim {
+    display: none;
+  }
+
+  @media (max-width: 63.999rem) {
+    .svadmin-app-shell[data-sidebar="true"] {
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-areas:
+        "topbar"
+        "main"
+        "footer";
+    }
+    .svadmin-app-shell[data-aside="true"] .svadmin-app-shell__body {
+      grid-template-columns: minmax(0, 1fr);
+    }
+    .svadmin-app-shell__mobile-toggle {
+      display: inline-flex;
+    }
+    .svadmin-app-shell__sidebar {
+      position: fixed;
+      z-index: 45;
+      inset-block: var(--svadmin-shell-topbar-h) 0;
+      inset-inline-start: 0;
+      width: var(--svadmin-shell-sidebar-w);
+      max-width: 85vw;
+      box-shadow: var(--shadow-overlay);
+      transform: translateX(-100%);
+      visibility: hidden;
+      transition: transform var(--svadmin-motion-standard) var(--svadmin-motion-easing), visibility var(--svadmin-motion-standard);
+    }
+    [dir="rtl"] .svadmin-app-shell__sidebar {
+      transform: translateX(100%);
+    }
+    .svadmin-app-shell[data-mobile-open="true"] .svadmin-app-shell__sidebar {
+      transform: none;
+      visibility: visible;
+    }
+    .svadmin-app-shell[data-mobile-open="true"] .svadmin-app-shell__scrim {
+      display: block;
+      position: fixed;
+      z-index: 40;
+      inset: var(--svadmin-shell-topbar-h) 0 0;
+      border: 0;
+      background: var(--foreground);
+      opacity: 0.28;
+      cursor: pointer;
+    }
+  }
+
+  /* 窄视口下页面容器自己承担横向留白，外壳不再重复叠加。 */
+  @media (max-width: 40rem) {
+    .svadmin-app-shell {
+      --svadmin-shell-gutter: var(--svadmin-space-4);
+    }
+  }
+}
+/* Data panel: the recurring "titled surface with a body" container.
+ *
+ * Hosts previously hand-rolled this block per page, which is how a project ends
+ * up with three panel paddings and two radii. Every length here is a token. */
+@layer components {
+  .svadmin-data-panel {
+    --svadmin-panel-padding: var(--svadmin-space-5);
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-content: start;
+    min-width: 0;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    background: var(--card);
+    color: var(--card-foreground);
+    overflow: hidden;
+  }
+  .svadmin-data-panel[data-padding="compact"] {
+    --svadmin-panel-padding: var(--svadmin-space-4);
+  }
+  .svadmin-data-panel[data-padding="none"] {
+    --svadmin-panel-padding: 0;
+  }
+
+  .svadmin-data-panel__header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--svadmin-space-3);
+    min-width: 0;
+    padding: var(--svadmin-panel-padding);
+    padding-block-end: 0;
+  }
+  .svadmin-data-panel[data-padding="none"] .svadmin-data-panel__header {
+    padding: var(--svadmin-space-4) var(--svadmin-space-5);
+    border-bottom: 1px solid var(--border);
+  }
+  .svadmin-data-panel__heading {
+    display: grid;
+    gap: var(--svadmin-space-1);
+    min-width: 0;
+    flex: 1 1 0;
+  }
+  .svadmin-data-panel__title {
+    margin: 0;
+    color: var(--foreground);
+    font-size: var(--svadmin-text-section);
+    font-weight: 600;
+    line-height: var(--svadmin-leading-tight);
+    overflow-wrap: anywhere;
+  }
+  .svadmin-data-panel__description {
+    max-width: var(--svadmin-measure);
+    margin: 0;
+    color: var(--muted-foreground);
+    font-size: var(--svadmin-text-body);
+    line-height: var(--svadmin-leading-body);
+    overflow-wrap: anywhere;
+  }
+  .svadmin-data-panel__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--svadmin-space-2);
+    flex: 0 0 auto;
+  }
+  .svadmin-data-panel__body {
+    display: grid;
+    gap: var(--svadmin-space-4);
+    min-width: 0;
+    padding: var(--svadmin-panel-padding);
+  }
+  .svadmin-data-panel[data-padding="none"] .svadmin-data-panel__body {
+    gap: 0;
+  }
+  .svadmin-data-panel__footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--svadmin-space-2);
+    padding: var(--svadmin-space-3) var(--svadmin-space-5);
+    border-top: 1px solid var(--border);
+    color: var(--muted-foreground);
+    font-size: var(--svadmin-text-caption);
+  }
+}
 
 /* 保留状态对比度和 clean-flat 卡片表现，颜色始终来自宿主 token。 */
 .svadmin-product-status[data-slot="badge"] {
@@ -6739,6 +7026,41 @@
     --svadmin-shadow-control: 0 1px 2px rgb(15 23 42 / 0.04);
     --svadmin-shadow-surface: 0 1px 2px rgb(15 23 42 / 0.035);
     --svadmin-shadow-surface-hover: 0 2px 5px rgb(15 23 42 / 0.06);
+
+    /* Size rhythm. Single source of truth for control, row, spacing and type
+     * sizes; components read these tokens and hosts override the token instead
+     * of re-writing component CSS. Values stay on the 4px grid from DESIGN.md
+     * (xs 4, sm 8, md 16, lg 24, xl 32). */
+    --svadmin-control-h-sm: 1.75rem; /* 28px */
+    --svadmin-control-h: 2.25rem; /* 36px */
+    --svadmin-control-h-lg: 2.5rem; /* 40px */
+    --svadmin-row-h: 3rem; /* 48px */
+    --svadmin-table-head-h: 2.75rem; /* 44px */
+    --svadmin-table-state-min-h: 8rem; /* 128px */
+    --svadmin-space-1: 0.25rem; /* 4px */
+    --svadmin-space-2: 0.5rem; /* 8px */
+    --svadmin-space-3: 0.75rem; /* 12px */
+    --svadmin-space-4: 1rem; /* 16px */
+    --svadmin-space-5: 1.5rem; /* 24px */
+    --svadmin-space-6: 2rem; /* 32px */
+    --svadmin-section-gap: var(--svadmin-space-5);
+    --svadmin-text-caption: 0.75rem; /* 12px */
+    --svadmin-text-label: 0.8125rem; /* 13px */
+    --svadmin-text-body: 0.875rem; /* 14px */
+    --svadmin-text-section: 1rem; /* 16px */
+    --svadmin-text-title: 1.25rem; /* 20px */
+    --svadmin-leading-tight: 1.25;
+    --svadmin-leading-snug: 1.35;
+    --svadmin-leading-body: 1.5;
+    --svadmin-focus-width: 2px;
+    --svadmin-measure: 65ch;
+    --svadmin-shell-sidebar-w: 15rem;
+    --svadmin-shell-sidebar-w-collapsed: 3.5rem;
+    --svadmin-shell-topbar-h: 3.5rem;
+    --svadmin-shell-gutter: var(--svadmin-space-5);
+    --svadmin-shell-max: 74rem;
+    --svadmin-chrome-basis: 16rem;
+    --svadmin-shell-aside-w: 22rem;
     --svadmin-shadow-overlay: 0 20px 52px rgb(15 23 42 / 0.18), 0 6px 16px rgb(15 23 42 / 0.1);
   }
 
@@ -7164,15 +7486,15 @@ h6,
 }
 
 :is([data-slot="button"], .svadmin-button):is([data-size="default"], .svadmin-button-size--default),
-:is([data-svadmin-button], .svadmin-button):is([data-size="default"], .svadmin-button-size--default) { min-height: 2.25rem; padding: 0 0.75rem; }
+:is([data-svadmin-button], .svadmin-button):is([data-size="default"], .svadmin-button-size--default) { min-height: var(--svadmin-control-h); padding: 0 0.75rem; }
 :is([data-slot="button"], .svadmin-button):is([data-size="xs"], .svadmin-button-size--xs),
 :is([data-svadmin-button], .svadmin-button):is([data-size="xs"], .svadmin-button-size--xs) { min-height: 1.5rem; padding: 0 0.5rem; font-size: 0.75rem; }
 :is([data-slot="button"], .svadmin-button):is([data-size="sm"], .svadmin-button-size--sm),
 :is([data-svadmin-button], .svadmin-button):is([data-size="sm"], .svadmin-button-size--sm) { min-height: 2rem; padding: 0 0.75rem; font-size: 0.8rem; }
 :is([data-slot="button"], .svadmin-button):is([data-size="lg"], .svadmin-button-size--lg),
-:is([data-svadmin-button], .svadmin-button):is([data-size="lg"], .svadmin-button-size--lg) { min-height: 2.5rem; padding: 0 1rem; }
+:is([data-svadmin-button], .svadmin-button):is([data-size="lg"], .svadmin-button-size--lg) { min-height: var(--svadmin-control-h-lg); padding: 0 1rem; }
 :is([data-slot="button"], .svadmin-button):is([data-size="icon"], .svadmin-button-size--icon),
-:is([data-svadmin-button], .svadmin-button):is([data-size="icon"], .svadmin-button-size--icon) { width: 2.25rem; height: 2.25rem; }
+:is([data-svadmin-button], .svadmin-button):is([data-size="icon"], .svadmin-button-size--icon) { width: var(--svadmin-control-h); height: var(--svadmin-control-h); }
 :is([data-slot="button"], .svadmin-button):is([data-size="icon-xs"], .svadmin-button-size--icon-xs),
 :is([data-svadmin-button], .svadmin-button):is([data-size="icon-xs"], .svadmin-button-size--icon-xs) { width: 1.5rem; height: 1.5rem; }
 :is([data-slot="button"], .svadmin-button):is([data-size="icon-sm"], .svadmin-button-size--icon-sm),
@@ -7624,7 +7946,7 @@ main {
 .svadmin-input {
   width: 100%;
   min-width: 0;
-  height: 2.25rem;
+  height: var(--svadmin-control-h);
   border: 1px solid var(--border);
   border-radius: 0.5rem;
   background: transparent;
@@ -7714,15 +8036,17 @@ main {
 }
 
 .svadmin-table-cell {
-  padding: 0.5rem;
+  height: var(--svadmin-row-h);
+  padding: var(--svadmin-space-2);
+  font-size: var(--svadmin-text-label);
   vertical-align: middle;
   white-space: nowrap;
 }
 
 .svadmin-table-cell[data-density="compact"] {
-  height: 2rem;
-  padding: 0.25rem 0.5rem;
-  font-size: 0.75rem;
+  height: calc(var(--svadmin-row-h) - var(--svadmin-space-4));
+  padding: var(--svadmin-space-1) var(--svadmin-space-2);
+  font-size: var(--svadmin-text-caption);
 }
 
 .svadmin-table-cell[data-sticky="right"],
@@ -8048,9 +8372,9 @@ main {
 }
 
 .svadmin-table-caption {
-  margin-top: 1rem;
+  margin-top: var(--svadmin-space-4);
   color: var(--muted-foreground);
-  font-size: 0.875rem;
+  font-size: var(--svadmin-text-body);
 }
 
 .svadmin-table-footer {
@@ -8207,7 +8531,7 @@ main {
 
 .svadmin-select {
   width: 100%;
-  height: 2.25rem;
+  height: var(--svadmin-control-h);
   border: 1px solid var(--border);
   border-radius: 0.5rem;
   padding: 0.375rem 0.75rem;
@@ -8244,7 +8568,7 @@ main {
 .svadmin-tabs-list {
   display: inline-flex;
   width: fit-content;
-  height: 2.25rem;
+  height: var(--svadmin-control-h);
   align-items: center;
   justify-content: center;
   gap: 0.25rem;
@@ -8591,7 +8915,7 @@ main {
 .svadmin-navigation-trigger {
   display: inline-flex;
   width: max-content;
-  height: 2.25rem;
+  height: var(--svadmin-control-h);
   align-items: center;
   justify-content: center;
   gap: 0.25rem;
@@ -8991,19 +9315,20 @@ main {
 }
 
 .svadmin-table-head {
-  height: 2.25rem;
-  padding: 0.5rem;
+  height: var(--svadmin-table-head-h);
+  padding: var(--svadmin-space-2);
   color: var(--foreground);
   text-align: left;
   vertical-align: middle;
+  font-size: var(--svadmin-text-caption);
   font-weight: 500;
   white-space: nowrap;
 }
 
 .svadmin-table-head[data-density="compact"] {
-  height: 2rem;
-  padding: 0.25rem 0.5rem;
-  font-size: 0.75rem;
+  height: calc(var(--svadmin-table-head-h) - var(--svadmin-space-3));
+  padding: var(--svadmin-space-1) var(--svadmin-space-2);
+  font-size: var(--svadmin-text-caption);
 }
 
 .svadmin-table-head[data-sticky="right"],
@@ -9053,8 +9378,8 @@ main {
 }
 
 .svadmin-pagination-icon {
-  width: 1rem;
-  height: 1rem;
+  width: var(--svadmin-space-4);
+  height: var(--svadmin-space-4);
 }
 
 @keyframes svadmin-menu-enter {
@@ -9356,11 +9681,11 @@ details[data-svadmin-filter][open] > :not(summary),
 }
 
 .layout-clean-flat [data-svadmin-table-head] [data-slot="table-head"] {
-  height: 2.75rem;
+  height: var(--svadmin-table-head-h);
   border-bottom-color: var(--svadmin-border);
   background: var(--svadmin-surface-muted);
   color: var(--svadmin-text-muted);
-  font-size: 0.75rem;
+  font-size: var(--svadmin-text-caption);
   font-weight: 600;
   letter-spacing: 0;
   text-transform: none;
@@ -9371,10 +9696,10 @@ details[data-svadmin-filter][open] > :not(summary),
 }
 
 .layout-clean-flat [data-svadmin-table-row] [data-slot="table-cell"] {
-  height: 3rem;
+  height: var(--svadmin-row-h);
   border-bottom-color: var(--svadmin-border);
   color: var(--svadmin-text);
-  font-size: 0.8125rem;
+  font-size: var(--svadmin-text-label);
 }
 
 .layout-clean-flat [data-svadmin-table-head] [data-slot="table-head"][data-density="compact"],
@@ -9426,19 +9751,19 @@ details[data-svadmin-filter][open] > :not(summary),
   border-bottom: 1px solid var(--svadmin-border);
   border-radius: 0;
   background: transparent;
-  padding: 0.75rem 0;
+  padding: var(--svadmin-space-3) 0;
   box-shadow: none;
 }
 
 .layout-clean-flat [data-svadmin-table-toolbar] [data-slot="input"] {
-  height: 2.625rem;
+  height: var(--svadmin-control-h-lg);
   background: var(--svadmin-surface-muted);
 }
 
 .layout-clean-flat [data-svadmin-list-actions] :is([data-slot="button"], .svadmin-button),
 .layout-clean-flat [data-svadmin-table-toolbar] :is([data-slot="button"], .svadmin-button),
 .layout-clean-flat [data-svadmin-form-actions] :is([data-slot="button"], .svadmin-button) {
-  height: 2.5rem;
+  height: var(--svadmin-control-h-lg);
   flex-shrink: 0;
 }