@tensor_1/tokens 2.44.0 → 2.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.44.0",
+  "version": "2.45.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",
   "sideEffects": [

package/styles/components/dashboard-canvas.css

@@ -85,14 +85,15 @@
   }
 
   /* ── Narrow: one column in reading order ───────────────────────────────────── */
+  /* A container query styles the container's descendants, never the container itself, so the
+     canvas keeps its fixed rows here: each item spans as many of them as it has on the wide
+     canvas, which makes it exactly as tall as there, gaps included, and the next item starts
+     below it. */
   @container uix-dashboard-canvas (max-width: 35.99rem) {
-    .uix-dashboard-canvas { grid-auto-rows: auto; }
     .uix-dashboard-canvas__item {
       grid-column: 1 / -1;
-      grid-row: auto;
+      grid-row: auto / span var(--uix-dashboard-canvas-h, 1);
       order: var(--uix-dashboard-canvas-order, 0);
-      /* As tall as its rows on the wide canvas, gaps included. */
-      min-block-size: calc(var(--uix-dashboard-canvas-h, 1) * var(--uix-dashboard-canvas-row) + (var(--uix-dashboard-canvas-h, 1) - 1) * var(--dashboard-canvas-gap));
     }
     .uix-dashboard-canvas__handle,
     .uix-dashboard-canvas__preview { display: none; }

package/styles/components/relationship-graph.css

@@ -54,5 +54,21 @@
   .uix-relationship-graph__collapse { position:absolute; height:22px; padding:0 var(--uix-space-2); border:1px dashed var(--uix-border-strong); border-radius:var(--uix-radius-pill); background:var(--uix-surface); color:var(--uix-text-muted); font-size:var(--uix-text-meta); cursor:pointer; }
   .uix-relationship-graph__collapse:focus-visible { outline:2px solid var(--uix-ring); outline-offset:2px; }
   .uix-relationship-graph--compact .uix-relationship-graph__item { padding:var(--uix-space-1) var(--uix-space-2); }
+  /* Map controls (controls="compact", TENSOR HAR-2501): an icon cluster in the map's corner,
+     the map itself focusable, and a full-screen state that covers the page. */
+  .uix-relationship-graph--map .uix-relationship-graph__viewport:focus-visible { outline:2px solid var(--uix-ring); outline-offset:2px; }
+  .uix-relationship-graph__controls { position:absolute; right:var(--uix-space-3); bottom:var(--uix-space-3); z-index:var(--uix-z-raised, 1); display:flex; align-items:center; gap:var(--uix-space-2); }
+  .uix-relationship-graph__control-cluster { display:flex; padding:var(--uix-space-1); border:1px solid var(--uix-border-strong); border-radius:var(--uix-radius-md); background:var(--uix-surface); box-shadow:var(--uix-shadow-sm); }
+  .uix-relationship-graph__control { display:inline-grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:var(--uix-radius-sm); background:transparent; color:var(--uix-text-muted); cursor:pointer; }
+  .uix-relationship-graph__control:hover:not(:disabled) { background:var(--uix-bg-hover); color:var(--uix-text); }
+  .uix-relationship-graph__control:focus-visible { outline:2px solid var(--uix-ring); outline-offset:1px; }
+  .uix-relationship-graph__control:disabled { opacity:.45; cursor:not-allowed; }
+  .uix-relationship-graph__control svg { width:16px; height:16px; }
+  .uix-relationship-graph__zoom-level { padding:0 var(--uix-space-1); border-radius:var(--uix-radius-sm); background:color-mix(in srgb, var(--uix-bg-subtle) 85%, transparent); color:var(--uix-text-muted); font-size:var(--uix-text-meta); font-variant-numeric:tabular-nums; white-space:nowrap; }
+  .uix-relationship-graph__hint { position:absolute; left:var(--uix-space-3); bottom:var(--uix-space-3); z-index:var(--uix-z-raised, 1); max-width:calc(100% - 15rem); margin:0; overflow:hidden; color:var(--uix-text-muted); font-size:var(--uix-text-meta); white-space:nowrap; text-overflow:ellipsis; pointer-events:none; }
+  .uix-relationship-graph__toast { position:absolute; top:var(--uix-space-3); left:50%; z-index:var(--uix-z-toast, 3); max-width:calc(100% - 2 * var(--uix-space-3)); margin:0; padding:var(--uix-space-1) var(--uix-space-3); border-radius:var(--uix-radius-sm); background:var(--uix-text); color:var(--uix-surface); font-size:var(--uix-text-meta); transform:translateX(-50%); pointer-events:none; }
+  .uix-relationship-graph--fullscreen { position:fixed; inset:0; z-index:var(--uix-z-overlay, 1000); display:flex; flex-direction:column; padding:var(--uix-space-4); background:var(--uix-bg-app, var(--uix-surface)); }
+  .uix-relationship-graph--fullscreen .uix-relationship-graph__viewport { flex:1; min-height:0; height:auto; }
+  @media (max-width:640px) { .uix-relationship-graph__hint { display:none; } }
   @media (forced-colors: active) { .uix-relationship-graph__link path { stroke:CanvasText; } .uix-relationship-graph__link polygon { fill:CanvasText; } .uix-relationship-graph__item { border-color:ButtonText; } }
 }