@camstack/ui-library 1.2.0 → 1.2.2

package/dist/composites/pipeline-matrix-shared.d.ts

@@ -70,6 +70,12 @@ export type CellState = {
     readonly kind: 'enabled';
     readonly modelId: string;
     readonly overridden?: boolean;
+    /**
+     * Step-tree device jump (phase 1): a short label of the OTHER same-node
+     * device this step runs on (operator manual override). Renders a subtle
+     * "→ label" badge on the cell.
+     */
+    readonly jumpTo?: string;
 } | {
     readonly kind: 'disabled';
     readonly overridden?: boolean;
@@ -77,6 +83,12 @@ export type CellState = {
     readonly kind: 'na';
 } | {
     readonly kind: 'skip';
+    /**
+     * Step-tree device jump (phase 1): this device's format can't run the
+     * step, but it AUTO-jumps to this labelled same-node device — renders a
+     * subtle "→ label" badge in place of the "⚠ skip" degrade marker.
+     */
+    readonly jumpTo?: string;
 };
 /**
  * Fixed column geometry (rem). Both matrices use CSS-grid STATIC track widths
@@ -94,14 +106,25 @@ export interface FlatRow {
 export declare function flattenTree(nodes: readonly StepTreeNode[]): readonly FlatRow[];
 /**
  * Layout decision for the responsive A↔B switch. Pure so it can be unit-tested
- * in isolation from the DOM.
+ * in isolation from the DOM. An unmeasured container (`width <= 0`) always
+ * defaults to the wide matrix so there is no first-paint flash into the
+ * fallback.
  *
- * Returns `true` (single-node fallback) when there is MORE than one node but
- * the container is too narrow to show the step column plus at least TWO node
- * columns side by side. An unmeasured container (`width <= 0`) defaults to the
- * wide matrix so there is no first-paint flash into the fallback.
+ * Two regimes, because the sticky step column occludes the scroll area on a
+ * narrow viewport:
+ *   - MULTI-node (`nodeCount >= 2`): fall back when the container can't show the
+ *     step column plus at least TWO node columns side by side — the fallback
+ *     picks ONE node.
+ *   - SINGLE node expanded into `columnCount` device sub-columns (the per-node
+ *     BASE matrix): the wide grid pins a `sticky left-0` step column (`stepColPx`
+ *     wide); on a phone that column covers nearly the whole viewport, so the
+ *     horizontal-scroll area behind it shows only slivers of each device column
+ *     and no column can be brought fully into view. Fall back to the FLUID
+ *     single-node layout whenever all `columnCount` device columns can't sit
+ *     beside the step column without scrolling. `columnCount` defaults to
+ *     `nodeCount` (one column per node) for the multi-node consumers.
  */
-export declare function shouldUseSingleNode(width: number, nodeCount: number, stepColPx: number, agentColPx?: number): boolean;
+export declare function shouldUseSingleNode(width: number, nodeCount: number, stepColPx: number, agentColPx?: number, columnCount?: number): boolean;
 export declare function SlotHeading({ slot }: {
     readonly slot: PipelineSlot;
 }): import("react").JSX.Element;

package/dist/index.cjs

@@ -14669,16 +14669,27 @@ function flattenTree(nodes) {
 }
 /**
 * Layout decision for the responsive A↔B switch. Pure so it can be unit-tested
-* in isolation from the DOM.
-*
-* Returns `true` (single-node fallback) when there is MORE than one node but
-* the container is too narrow to show the step column plus at least TWO node
-* columns side by side. An unmeasured container (`width <= 0`) defaults to the
-* wide matrix so there is no first-paint flash into the fallback.
-*/
-function shouldUseSingleNode(width, nodeCount, stepColPx, agentColPx = 208) {
-	if (nodeCount <= 1) return false;
+* in isolation from the DOM. An unmeasured container (`width <= 0`) always
+* defaults to the wide matrix so there is no first-paint flash into the
+* fallback.
+*
+* Two regimes, because the sticky step column occludes the scroll area on a
+* narrow viewport:
+*   - MULTI-node (`nodeCount >= 2`): fall back when the container can't show the
+*     step column plus at least TWO node columns side by side — the fallback
+*     picks ONE node.
+*   - SINGLE node expanded into `columnCount` device sub-columns (the per-node
+*     BASE matrix): the wide grid pins a `sticky left-0` step column (`stepColPx`
+*     wide); on a phone that column covers nearly the whole viewport, so the
+*     horizontal-scroll area behind it shows only slivers of each device column
+*     and no column can be brought fully into view. Fall back to the FLUID
+*     single-node layout whenever all `columnCount` device columns can't sit
+*     beside the step column without scrolling. `columnCount` defaults to
+*     `nodeCount` (one column per node) for the multi-node consumers.
+*/
+function shouldUseSingleNode(width, nodeCount, stepColPx, agentColPx = 208, columnCount = nodeCount) {
 	if (width <= 0) return false;
+	if (nodeCount <= 1) return width < stepColPx + agentColPx * columnCount;
 	return width < stepColPx + agentColPx * 2;
 }
 var SLOT_LABEL = {
@@ -14797,7 +14808,12 @@ function renderCellContent(state) {
 				className: "font-mono text-foreground truncate",
 				children: state.modelId
 			}),
-			state.overridden && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			state.jumpTo !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "ml-auto shrink-0 text-[8px] font-semibold text-sky-500",
+				title: `runs on ${state.jumpTo}`,
+				children: ["→ ", state.jumpTo]
+			}),
+			state.overridden && state.jumpTo === void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "ml-auto shrink-0 text-[8px] font-semibold uppercase text-amber-500",
 				children: "ovr"
 			})
@@ -14818,14 +14834,24 @@ function renderCellContent(state) {
 			})
 		]
 	});
-	if (state.kind === "skip") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: "flex min-w-0 items-center gap-1 text-amber-500",
-		title: "Gated on for this camera, but no compatible model on this node — click to provision",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-amber-500 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "truncate font-medium",
-			children: "⚠ skip"
-		})]
-	});
+	if (state.kind === "skip") {
+		if (state.jumpTo !== void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "flex min-w-0 items-center gap-1 text-sky-500",
+			title: `no build for this device — auto-jumps to ${state.jumpTo}`,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-sky-500 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "truncate font-medium",
+				children: ["→ ", state.jumpTo]
+			})]
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "flex min-w-0 items-center gap-1 text-amber-500",
+			title: "Gated on for this camera, but no compatible model on this node — click to provision",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-amber-500 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "truncate font-medium",
+				children: "⚠ skip"
+			})]
+		});
+	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		className: "flex min-w-0 items-center gap-1 text-foreground-subtle/70",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-muted shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -15209,7 +15235,7 @@ function DeviceStepMatrix({ tree, agents, gateFor, getCellState, onCellClick, se
 		return () => RO?.disconnect();
 	}, []);
 	const nodes = (0, react$1.useMemo)(() => groupAgentColumns(agents), [agents]);
-	const single = shouldUseSingleNode(width, nodes.length, STEP_COL_PX);
+	const single = shouldUseSingleNode(width, nodes.length, STEP_COL_PX, 208, agents.length);
 	const selectedNode = (0, react$1.useMemo)(() => {
 		if (nodes.length === 0) return null;
 		return nodes.find((n) => n.agentNodeId === fallbackNodeId) ?? nodes[0] ?? null;
@@ -15218,7 +15244,7 @@ function DeviceStepMatrix({ tree, agents, gateFor, getCellState, onCellClick, se
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: containerRef,
 		className: "w-full space-y-2",
-		children: [single && selectedNode && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NodeSelectorBar, {
+		children: [single && selectedNode && nodes.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NodeSelectorBar, {
 			nodes,
 			selected: selectedNode.agentNodeId,
 			onSelect: onFallbackNodeChange

package/dist/index.js

@@ -14645,16 +14645,27 @@ function flattenTree(nodes) {
 }
 /**
 * Layout decision for the responsive A↔B switch. Pure so it can be unit-tested
-* in isolation from the DOM.
-*
-* Returns `true` (single-node fallback) when there is MORE than one node but
-* the container is too narrow to show the step column plus at least TWO node
-* columns side by side. An unmeasured container (`width <= 0`) defaults to the
-* wide matrix so there is no first-paint flash into the fallback.
-*/
-function shouldUseSingleNode(width, nodeCount, stepColPx, agentColPx = 208) {
-	if (nodeCount <= 1) return false;
+* in isolation from the DOM. An unmeasured container (`width <= 0`) always
+* defaults to the wide matrix so there is no first-paint flash into the
+* fallback.
+*
+* Two regimes, because the sticky step column occludes the scroll area on a
+* narrow viewport:
+*   - MULTI-node (`nodeCount >= 2`): fall back when the container can't show the
+*     step column plus at least TWO node columns side by side — the fallback
+*     picks ONE node.
+*   - SINGLE node expanded into `columnCount` device sub-columns (the per-node
+*     BASE matrix): the wide grid pins a `sticky left-0` step column (`stepColPx`
+*     wide); on a phone that column covers nearly the whole viewport, so the
+*     horizontal-scroll area behind it shows only slivers of each device column
+*     and no column can be brought fully into view. Fall back to the FLUID
+*     single-node layout whenever all `columnCount` device columns can't sit
+*     beside the step column without scrolling. `columnCount` defaults to
+*     `nodeCount` (one column per node) for the multi-node consumers.
+*/
+function shouldUseSingleNode(width, nodeCount, stepColPx, agentColPx = 208, columnCount = nodeCount) {
 	if (width <= 0) return false;
+	if (nodeCount <= 1) return width < stepColPx + agentColPx * columnCount;
 	return width < stepColPx + agentColPx * 2;
 }
 var SLOT_LABEL = {
@@ -14773,7 +14784,12 @@ function renderCellContent(state) {
 				className: "font-mono text-foreground truncate",
 				children: state.modelId
 			}),
-			state.overridden && /* @__PURE__ */ jsx("span", {
+			state.jumpTo !== void 0 && /* @__PURE__ */ jsxs("span", {
+				className: "ml-auto shrink-0 text-[8px] font-semibold text-sky-500",
+				title: `runs on ${state.jumpTo}`,
+				children: ["→ ", state.jumpTo]
+			}),
+			state.overridden && state.jumpTo === void 0 && /* @__PURE__ */ jsx("span", {
 				className: "ml-auto shrink-0 text-[8px] font-semibold uppercase text-amber-500",
 				children: "ovr"
 			})
@@ -14794,14 +14810,24 @@ function renderCellContent(state) {
 			})
 		]
 	});
-	if (state.kind === "skip") return /* @__PURE__ */ jsxs("span", {
-		className: "flex min-w-0 items-center gap-1 text-amber-500",
-		title: "Gated on for this camera, but no compatible model on this node — click to provision",
-		children: [/* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-amber-500 shrink-0" }), /* @__PURE__ */ jsx("span", {
-			className: "truncate font-medium",
-			children: "⚠ skip"
-		})]
-	});
+	if (state.kind === "skip") {
+		if (state.jumpTo !== void 0) return /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 items-center gap-1 text-sky-500",
+			title: `no build for this device — auto-jumps to ${state.jumpTo}`,
+			children: [/* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-sky-500 shrink-0" }), /* @__PURE__ */ jsxs("span", {
+				className: "truncate font-medium",
+				children: ["→ ", state.jumpTo]
+			})]
+		});
+		return /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 items-center gap-1 text-amber-500",
+			title: "Gated on for this camera, but no compatible model on this node — click to provision",
+			children: [/* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-amber-500 shrink-0" }), /* @__PURE__ */ jsx("span", {
+				className: "truncate font-medium",
+				children: "⚠ skip"
+			})]
+		});
+	}
 	return /* @__PURE__ */ jsxs("span", {
 		className: "flex min-w-0 items-center gap-1 text-foreground-subtle/70",
 		children: [/* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-muted shrink-0" }), /* @__PURE__ */ jsx("span", {
@@ -15185,7 +15211,7 @@ function DeviceStepMatrix({ tree, agents, gateFor, getCellState, onCellClick, se
 		return () => RO?.disconnect();
 	}, []);
 	const nodes = useMemo(() => groupAgentColumns(agents), [agents]);
-	const single = shouldUseSingleNode(width, nodes.length, STEP_COL_PX);
+	const single = shouldUseSingleNode(width, nodes.length, STEP_COL_PX, 208, agents.length);
 	const selectedNode = useMemo(() => {
 		if (nodes.length === 0) return null;
 		return nodes.find((n) => n.agentNodeId === fallbackNodeId) ?? nodes[0] ?? null;
@@ -15194,7 +15220,7 @@ function DeviceStepMatrix({ tree, agents, gateFor, getCellState, onCellClick, se
 	return /* @__PURE__ */ jsxs("div", {
 		ref: containerRef,
 		className: "w-full space-y-2",
-		children: [single && selectedNode && /* @__PURE__ */ jsx(NodeSelectorBar, {
+		children: [single && selectedNode && nodes.length > 1 && /* @__PURE__ */ jsx(NodeSelectorBar, {
 			nodes,
 			selected: selectedNode.agentNodeId,
 			onSelect: onFallbackNodeChange

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",