@ashley-shrok/viewmodel-shell 5.1.0 → 5.1.2

package/dist/index.d.ts

@@ -530,7 +530,8 @@ export interface TableRow {
      *  cell (right). A previous version typed this as `ButtonNode[]` and called
      *  the button renderer blindly, silently dropping non-button entries. */
     actions?: (ButtonNode | CheckboxNode)[];
-    /** Row lifecycle STATE (NOT severity — that's `tone`). A freeform, app-extensible token; the framework ships styling for `done`, `disabled`, `running`. Emits .vms-table__row--{state}. Orthogonal to `tone`. */
+    /** Row lifecycle STATE (NOT severity — that's `tone`). A freeform, app-extensible token; the framework ships styling for `done`, `disabled`, `running`. Emits .vms-table__row--{state}. Orthogonal to `tone`.
+     *  APPEARANCE ONLY — `state` dims/tints the row and NEVER affects clickability or the cursor. Clickability is governed solely by `action`: a `state:"disabled"` row that ALSO sets `action` is dimmed AND still clickable (pointer cursor + hover + role=button), e.g. an already-paid invoice line shown muted but still openable for details. To make a row literally non-clickable, omit `action` (optionally still dim it with `state`). */
     state?: string;
     /** Semantic intent/severity — the universal status tone axis (closed). Emits .vms-table__row--{tone} (subtle tinted row background, reusing the shared tokens). Omitted = neutral. */
     tone?: "danger" | "warning" | "success" | "info";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ashley-shrok/viewmodel-shell",
-  "version": "5.1.0",
-  "description": "A server-driven UI framework where the wire format is structured enough that agents can build full-stack apps without ever opening a browser and all UI tests are pure unit tests with no browser runtime. Server returns a JSON tree of typed nodes; a thin TypeScript adapter renders it to DOM. Backend-agnostic — a .NET reference backend ships with the repo, but any language can produce the JSON contract.",
+  "version": "5.1.2",
+  "description": "A server-driven UI framework where the wire format is structured enough that agents can build full-stack apps without ever opening a browser and all UI tests are pure unit tests with no browser runtime. Server returns a JSON tree of typed nodes; a thin TypeScript adapter renders it to DOM. Backend-agnostic \u2014 a .NET reference backend ships with the repo, but any language can produce the JSON contract.",
   "type": "module",
   "license": "MIT",
   "author": "ashley-shrok",

package/styles/default.css

@@ -938,11 +938,16 @@ select.vms-field__input  { cursor: pointer; padding-right: var(--vms-space-xl);
   outline-offset: -2px;
 }
 /* Row STATE (lifecycle) — done/disabled/running framework-styled; apps can add
-   more .vms-table__row--{state} rules. */
+   more .vms-table__row--{state} rules. `state` is an APPEARANCE axis ONLY — it
+   dims/tints the row and NEVER affects clickability or cursor. Clickability is
+   governed solely by `row.action` (→ .vms-table__row--clickable → pointer +
+   hover + role=button). So a `state:"disabled"` row that ALSO has `row.action`
+   is dimmed AND still clickable, and correctly shows the pointer cursor — the
+   dim is a visual cue (e.g. an already-paid invoice line you can still open to
+   view details), not a behavioral disable. To make a row literally NOT
+   clickable, omit `row.action` (optionally still dim it with `state`). */
 .vms-table__row--done     { opacity: 0.6; }
 .vms-table__row--disabled { opacity: 0.55; color: var(--vms-text-muted); }
-.vms-table__row--disabled.vms-table__row--clickable { cursor: default; }
-.vms-table__row--disabled.vms-table__row--clickable:hover { background: transparent; }
 .vms-table__row--running  { background: color-mix(in srgb, var(--vms-accent) 8%, transparent); }
 /* Row TONE (severity) — the universal status axis (was the old critical/danger;
    critical → danger). Tints derive from theme vars (color-mix), so a custom
@@ -954,6 +959,13 @@ select.vms-field__input  { cursor: pointer; padding-right: var(--vms-space-xl);
 .vms-table__link { color: var(--vms-accent); text-decoration: none; }
 .vms-table__link:hover { text-decoration: underline; }
 
+/* Trailing per-row actions cell (row.actions[] ButtonNodes). Keep the buttons on
+   one line and give adjacent buttons breathing room — without this rule they
+   render flush against each other. Margin-adjacency (not `display:flex` on the
+   <td>) so the cell stays a proper table-cell and column widths are unaffected. */
+.vms-table__td--actions { white-space: nowrap; }
+.vms-table__td--actions .vms-button + .vms-button { margin-left: var(--vms-space-sm); }
+
 /* Selection — leading checkbox column + selected-row tint. The tint derives
    from --vms-accent via color-mix, so a custom :root theme recolors it
    automatically (same pattern as the status variants above). Selected wins
@@ -1130,6 +1142,15 @@ select.vms-field__input  { cursor: pointer; padding-right: var(--vms-space-xl);
   --_badge-tone: var(--vms-text-muted);
   display: inline-flex;
   align-items: center;
+  /* Hug content in ANY parent layout. A badge is semantically inline, but as a flex
+     item it is BLOCKIFIED (inline-flex → flex) and a stack section's align-items:stretch
+     would then stretch it to full width. Giving it a definite cross-size (fit-content)
+     opts out of that stretch — align-items:stretch only stretches items whose cross size
+     is `auto`. We deliberately DON'T use align-self:start: that would top-anchor a badge
+     in a `row` section (align-items:center) since a child's align-self beats the parent's
+     align-items. width:fit-content only touches the main-axis size, so a badge hugs in a
+     stack AND stays vertically centered in a row. Inert for an inline-in-flow badge. */
+  width: fit-content;
   /* Center the pill on the surrounding text instead of baselining it (an
      inline-flex pill otherwise hangs below the baseline of adjacent text). */
   vertical-align: middle;