@tensor_1/tokens 2.5.0 → 2.6.0

package/README.md

@@ -56,9 +56,24 @@ The following CSS primitives (and their `@tensor_1/react` wrappers) are the inte
 | Primitive | CSS file | Key `--uix-*` tokens |
 |---|---|---|
 | Row selection | `table.css` `tr[aria-selected]` | `--uix-row-selected-bg` |
+| Table column sizing | `table.css` `.uix-col--w-*` / `--flex` / `--truncate` / `--num` · `<Table fixed>` | `--uix-col-w-xs…xl`, `--uix-col-title-min` |
+| Selection bulk bar | `table.css` `.uix-bulkbar` · `<BulkBar>` | `--uix-brand-muted`, `--uix-accent` |
+| Row hover actions / kebab | `table.css` `.uix-table__actions` / `.uix-rowact` · `<RowActions>` / `<RowAction>` | `--uix-bg-active`, `--uix-text-muted` |
+| Expandable row detail | `table.css` `.uix-table__detail` / `.uix-kv` · `<ExpandToggle>` | `--uix-bg-subtle` |
+| Inline cell edit | `table.css` `.uix-cell-edit` | `--uix-ring`, `--uix-success` |
+| Column resize grip | `table.css` `.uix-table__resize` | `--uix-accent` |
+| Search-match highlight | `table.css` `.uix-mark` · `<Mark>` / `<Highlighted>` | `--uix-warning-bg`, `--uix-warning` |
+| Cell content vocabulary | `table.css` `.uix-cell-strong` / `-sub` / `-mono` · `<CellStrong>` / `<CellSub>` | `--uix-text-muted`, `--uix-font-mono` |
+| Responsive table ladder | `table.css` `.uix-table--priority` / `--cards` | `--uix-border`, `--uix-surface`, `--uix-shadow-sm` |
+| Record compare view | `table.css` `.uix-compare` | `--uix-border`, `--uix-surface`, `--uix-bg-subtle` |
 | Utilization / threshold bar | `meter.css` · `<Meter>` | `--uix-attention`, `--uix-overdue`, `--uix-warning`, `--uix-danger` |
 | Triage inbox | `inbox.css` · `<Inbox>` / `<InboxItem>` | `--uix-brand-muted`, `--uix-accent` (accent stripe) |
 | Status + SLA + priority pill | `status-pill.css` · `<StatusPill>` | `--uix-sla-ok/at-risk/breached`, `--uix-p1`…`--uix-p5`, `--uix-attention`, `--uix-overdue` |
 | Entity detail related-panels | `<DetailLayout>` (`@tensor_1/react`) | `--uix-surface`, `--uix-border` |
+| App-shell nav width tiers | `app-shell.css` `.uix-shell[data-nav="full\|rail\|hidden"]` · `<AppShell nav>` | `--uix-sidebar-w`, `--uix-sidebar-w-rail` |
+| Shell focus / full-bleed | `app-shell.css` `.uix-shell[data-focus]` / `.uix-shell__main--bleed` · `<AppShell focus mainBleed>` | `--uix-z-overlay`, `--uix-space-7` |
+| Table logic engine | `@tensor_1/react` `table-engine` (multiSort / applyFilters / searchRows / serializeView / virtualWindow / selection) | — behaviour primitive; keeps vanilla + React grids identical |
 
 If you reach for `var(--uix-danger)` or `var(--uix-warning)` to render SLA urgency or severity, use `<StatusPill tone="sla-breached">` or `<StatusPill tone="p1">` instead — the component handles WCAG contrast, dark mode, and brand overrides; a raw literal does not.
+
+Likewise, don't fork the data grid: a product-local `data-table.tsx` (bespoke sort/filter/selection/resize + hand-coded column widths) should be replaced by `<Table>` + the subcomponents above, composed over the framework-agnostic `table-engine` (or the `useTable` hook). Sorting, filtering, search highlighting, saved views, and virtualization then match the vanilla styleguide exactly, and every visual affordance re-themes with the tokens listed here.

package/build/css/components.css

@@ -351,17 +351,39 @@
 /* uix app shell — sidebar + topbar + content grid. Depends only on --uix-* tokens. */
 @layer uix.components {
   .uix-shell {
+    position: relative;
     display: grid;
     grid-template-columns: var(--uix-sidebar-w) 1fr;
     grid-template-rows: var(--uix-topbar-h) 1fr;
     height: 100%; min-height: 360px;
     border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); overflow: hidden;
-    transition: grid-template-columns var(--uix-dur) var(--uix-ease-out);
+    transition: grid-template-columns var(--uix-dur) var(--uix-ease-out), grid-template-rows var(--uix-dur) var(--uix-ease-out);
   }
-  .uix-shell__sidebar { grid-row: 1 / 3; background: var(--uix-bg-subtle); border-right: 1px solid var(--uix-border); overflow-y: auto; }
+  .uix-shell__sidebar { grid-row: 1 / 3; background: var(--uix-bg-subtle); border-right: 1px solid var(--uix-border); overflow-y: auto; overflow-x: hidden; }
   .uix-shell__topbar { grid-column: 2; display: flex; align-items: center; gap: var(--uix-space-3); padding: 0 var(--uix-space-6); background: var(--uix-bg-app); border-bottom: 1px solid var(--uix-border); }
   .uix-shell__main { grid-column: 2; overflow: auto; padding: var(--uix-space-7); background: var(--uix-bg-app); }
-  .uix-shell[data-collapsed] { grid-template-columns: 56px 1fr; }
+
+  /* ── nav width tiers ──────────────────────────────────────────────────────────
+     Progressive reveal for wide, many-column tables: full (default) → rail (icon
+     only) → hidden (0). data-collapsed stays a back-compat alias for the rail. */
+  .uix-shell[data-nav="rail"], .uix-shell[data-collapsed] { grid-template-columns: var(--uix-sidebar-w-rail) 1fr; }
+  .uix-shell[data-nav="hidden"] { grid-template-columns: 0 1fr; }
+
+  /* ── focus / immersive mode ───────────────────────────────────────────────────
+     A table-scoped escape hatch: hide the sidebar AND the topbar so a dense grid
+     uses the whole frame. The app toggles [data-focus] (from a toolbar maximize
+     control) and restores the previous nav state + focus on Esc. */
+  .uix-shell[data-focus] { grid-template-columns: 0 1fr; grid-template-rows: 0 1fr; }
+  .uix-shell[data-focus] .uix-shell__topbar { display: none; }
+
+  /* a floating host for the "exit focus" affordance (Esc also exits) */
+  .uix-shell__focus-exit { position: absolute; top: var(--uix-space-3); right: var(--uix-space-3); z-index: var(--uix-z-overlay); }
+
+  /* ── full-bleed main ──────────────────────────────────────────────────────────
+     Opt-in per surface: a genuinely wide grid drops the content gutter and runs
+     edge to edge, reclaiming 2 x --uix-space-7. Not the default — most pages want
+     the gutter. Pair with a frozen identifier column for horizontal scroll. */
+  .uix-shell__main--bleed { padding: 0; }
 }
 /* uix sidebar nav — items, favorites, collapsible sub-items, collapsed rail. Depends only on --uix-* tokens. */
 @layer uix.components {
@@ -415,7 +437,7 @@
   .uix-subitem .uix-navitem__label::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--uix-text-muted); margin-right: var(--uix-space-3); vertical-align: middle; }
 
   /* collapsed rail */
-  .uix-sidebar[data-collapsed] { width: 56px; }
+  .uix-sidebar[data-collapsed], .uix-sidebar[data-nav="rail"] { width: var(--uix-sidebar-w-rail); }
   .uix-sidebar[data-collapsed] .uix-navitem__label,
   .uix-sidebar[data-collapsed] .uix-navitem__badge,
   .uix-sidebar[data-collapsed] .uix-navitem__star,

package/build/css/styles.css

@@ -647,17 +647,39 @@
 /* uix app shell — sidebar + topbar + content grid. Depends only on --uix-* tokens. */
 @layer uix.components {
   .uix-shell {
+    position: relative;
     display: grid;
     grid-template-columns: var(--uix-sidebar-w) 1fr;
     grid-template-rows: var(--uix-topbar-h) 1fr;
     height: 100%; min-height: 360px;
     border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); overflow: hidden;
-    transition: grid-template-columns var(--uix-dur) var(--uix-ease-out);
+    transition: grid-template-columns var(--uix-dur) var(--uix-ease-out), grid-template-rows var(--uix-dur) var(--uix-ease-out);
   }
-  .uix-shell__sidebar { grid-row: 1 / 3; background: var(--uix-bg-subtle); border-right: 1px solid var(--uix-border); overflow-y: auto; }
+  .uix-shell__sidebar { grid-row: 1 / 3; background: var(--uix-bg-subtle); border-right: 1px solid var(--uix-border); overflow-y: auto; overflow-x: hidden; }
   .uix-shell__topbar { grid-column: 2; display: flex; align-items: center; gap: var(--uix-space-3); padding: 0 var(--uix-space-6); background: var(--uix-bg-app); border-bottom: 1px solid var(--uix-border); }
   .uix-shell__main { grid-column: 2; overflow: auto; padding: var(--uix-space-7); background: var(--uix-bg-app); }
-  .uix-shell[data-collapsed] { grid-template-columns: 56px 1fr; }
+
+  /* ── nav width tiers ──────────────────────────────────────────────────────────
+     Progressive reveal for wide, many-column tables: full (default) → rail (icon
+     only) → hidden (0). data-collapsed stays a back-compat alias for the rail. */
+  .uix-shell[data-nav="rail"], .uix-shell[data-collapsed] { grid-template-columns: var(--uix-sidebar-w-rail) 1fr; }
+  .uix-shell[data-nav="hidden"] { grid-template-columns: 0 1fr; }
+
+  /* ── focus / immersive mode ───────────────────────────────────────────────────
+     A table-scoped escape hatch: hide the sidebar AND the topbar so a dense grid
+     uses the whole frame. The app toggles [data-focus] (from a toolbar maximize
+     control) and restores the previous nav state + focus on Esc. */
+  .uix-shell[data-focus] { grid-template-columns: 0 1fr; grid-template-rows: 0 1fr; }
+  .uix-shell[data-focus] .uix-shell__topbar { display: none; }
+
+  /* a floating host for the "exit focus" affordance (Esc also exits) */
+  .uix-shell__focus-exit { position: absolute; top: var(--uix-space-3); right: var(--uix-space-3); z-index: var(--uix-z-overlay); }
+
+  /* ── full-bleed main ──────────────────────────────────────────────────────────
+     Opt-in per surface: a genuinely wide grid drops the content gutter and runs
+     edge to edge, reclaiming 2 x --uix-space-7. Not the default — most pages want
+     the gutter. Pair with a frozen identifier column for horizontal scroll. */
+  .uix-shell__main--bleed { padding: 0; }
 }
 /* uix sidebar nav — items, favorites, collapsible sub-items, collapsed rail. Depends only on --uix-* tokens. */
 @layer uix.components {
@@ -711,7 +733,7 @@
   .uix-subitem .uix-navitem__label::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--uix-text-muted); margin-right: var(--uix-space-3); vertical-align: middle; }
 
   /* collapsed rail */
-  .uix-sidebar[data-collapsed] { width: 56px; }
+  .uix-sidebar[data-collapsed], .uix-sidebar[data-nav="rail"] { width: var(--uix-sidebar-w-rail); }
   .uix-sidebar[data-collapsed] .uix-navitem__label,
   .uix-sidebar[data-collapsed] .uix-navitem__badge,
   .uix-sidebar[data-collapsed] .uix-navitem__star,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "UIx v2 design tokens — the --uix-* contract for house products (Tensor, POSx, SHOPx). One DTCG source -> CSS variables, Tailwind theme, and typed TS constants.",
   "type": "module",
   "license": "UNLICENSED",