create-rezi 0.1.0-alpha.49 → 0.1.0-alpha.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-rezi",
-  "version": "0.1.0-alpha.49",
+  "version": "0.1.0-alpha.50",
   "description": "Scaffold a Rezi terminal UI app.",
   "license": "Apache-2.0",
   "homepage": "https://rezitui.dev",
@@ -28,6 +28,6 @@
     "bun": ">=1.3.0"
   },
   "devDependencies": {
-    "@rezi-ui/testkit": "0.1.0-alpha.49"
+    "@rezi-ui/testkit": "0.1.0-alpha.50"
   }
 }

package/templates/animation-lab/README.md

@@ -15,7 +15,7 @@ Scaffolded with `create-rezi` using the **__TEMPLATE_LABEL__** template.
 
 - `src/types.ts`: animation state and action contracts.
 - `src/theme.ts`: template identity constants.
-- `src/helpers/state.ts`: layout resolver + reducer transitions.
+- `src/helpers/state.ts`: viewport normalization + reducer transitions.
 - `src/helpers/keybindings.ts`: key to command resolver.
 - `src/screens/reactor-lab.ts`: reactor field screen renderer.
 - `src/main.ts`: app bootstrap, resize handling, animation loop.

package/templates/animation-lab/src/__tests__/reducer.test.ts

@@ -23,8 +23,8 @@ test("animation lab reducer applies viewport", () => {
 
   assert.equal(resized.viewportCols, 70);
   assert.equal(resized.viewportRows, 20);
-  assert.ok(resized.panelWidth <= 66);
-  assert.ok(resized.panelHeight <= 18);
+  assert.equal("panelWidth" in resized, false);
+  assert.equal("panelHeight" in resized, false);
 });
 
 test("animation lab reducer supports nudge and phase cycle", () => {

package/templates/animation-lab/src/__tests__/render.test.ts

@@ -1,7 +1,7 @@
 import assert from "node:assert/strict";
 import test from "node:test";
 import { createTestRenderer } from "@rezi-ui/core/testing";
-import { createInitialState } from "../helpers/state.js";
+import { createInitialState, reduceAnimationLabState } from "../helpers/state.js";
 import { renderReactorLab } from "../screens/reactor-lab.js";
 
 test("animation lab screen renders core sections", () => {
@@ -13,3 +13,17 @@ test("animation lab screen renders core sections", () => {
   assert.match(output, /Animation Lab/);
   assert.match(output, /controls: space\/p autoplay/);
 });
+
+test("animation lab screen renders after compact viewport resize", () => {
+  const initial = createInitialState({ cols: 140, rows: 48 });
+  const compact = reduceAnimationLabState(initial, {
+    type: "apply-viewport",
+    cols: 68,
+    rows: 20,
+  });
+  const renderer = createTestRenderer({ viewport: { cols: 68, rows: 20 } });
+  const output = renderer.render(renderReactorLab(compact)).toText();
+
+  assert.match(output, /Animation Lab/);
+  assert.match(output, /controls: space\/p autoplay/);
+});

package/templates/animation-lab/src/helpers/state.ts

@@ -31,36 +31,25 @@ function toPositiveInt(value: number | undefined, fallback: number): number {
   return value;
 }
 
-function resolveLayout(
+function resolveViewport(
   cols: number,
   rows: number,
 ): Readonly<{
   viewportCols: number;
   viewportRows: number;
-  panelWidth: number;
-  panelHeight: number;
 }> {
   const viewportCols = clamp(toPositiveInt(cols, 96), 20, 500);
   const viewportRows = clamp(toPositiveInt(rows, 32), 10, 200);
-
-  const maxPanelWidth = Math.max(20, viewportCols - 4);
-  const panelWidth = maxPanelWidth < 44 ? maxPanelWidth : clamp(maxPanelWidth, 44, 140);
-
-  const maxPanelHeight = Math.max(8, viewportRows - 4);
-  const panelHeight = maxPanelHeight < 18 ? maxPanelHeight : clamp(maxPanelHeight, 18, 40);
-
-  return Object.freeze({ viewportCols, viewportRows, panelWidth, panelHeight });
+  return Object.freeze({ viewportCols, viewportRows });
 }
 
 export function createInitialState(viewport?: Viewport): AnimationLabState {
-  const layout = resolveLayout(viewport?.cols ?? 96, viewport?.rows ?? 32);
+  const layout = resolveViewport(viewport?.cols ?? 96, viewport?.rows ?? 32);
   return Object.freeze({
     tick: 0,
     phase: 0,
     viewportCols: layout.viewportCols,
     viewportRows: layout.viewportRows,
-    panelWidth: layout.panelWidth,
-    panelHeight: layout.panelHeight,
     panelOpacity: 0.9,
     driftTarget: 0.15,
     fluxTarget: 0.58,
@@ -97,8 +86,6 @@ function advanceState(previous: AnimationLabState): AnimationLabState {
     phase: previous.phase,
     viewportCols: previous.viewportCols,
     viewportRows: previous.viewportRows,
-    panelWidth: previous.panelWidth,
-    panelHeight: previous.panelHeight,
     panelOpacity: clamp(panelOpacityTarget, 0.3, 1),
     driftTarget,
     fluxTarget,
@@ -109,12 +96,10 @@ function advanceState(previous: AnimationLabState): AnimationLabState {
 }
 
 function applyViewport(previous: AnimationLabState, cols: number, rows: number): AnimationLabState {
-  const layout = resolveLayout(cols, rows);
+  const layout = resolveViewport(cols, rows);
   if (
     previous.viewportCols === layout.viewportCols &&
-    previous.viewportRows === layout.viewportRows &&
-    previous.panelWidth === layout.panelWidth &&
-    previous.panelHeight === layout.panelHeight
+    previous.viewportRows === layout.viewportRows
   ) {
     return previous;
   }
@@ -123,8 +108,6 @@ function applyViewport(previous: AnimationLabState, cols: number, rows: number):
     ...previous,
     viewportCols: layout.viewportCols,
     viewportRows: layout.viewportRows,
-    panelWidth: layout.panelWidth,
-    panelHeight: layout.panelHeight,
   });
 }
 

package/templates/animation-lab/src/screens/reactor-lab.ts

@@ -1,10 +1,14 @@
 import {
   defineWidget,
+  heightConstraints,
+  rgb,
   ui,
   useSequence,
   useSpring,
   useStagger,
   useTransition,
+  visibilityConstraints,
+  widthConstraints,
   type CanvasContext,
   type VNode,
 } from "@rezi-ui/core";
@@ -12,46 +16,46 @@ import { APP_NAME, PRODUCT_TAGLINE, TEMPLATE_LABEL } from "../theme.js";
 import type { AnimationLabState } from "../types.js";
 
 type Palette = Readonly<{
-  title: Readonly<{ r: number; g: number; b: number }>;
+  title: number;
   accent: string;
   core: string;
   hot: string;
   wave: string;
-  module: Readonly<{ r: number; g: number; b: number }>;
+  module: number;
 }>;
 
 const PALETTES: readonly Palette[] = Object.freeze([
   Object.freeze({
-    title: Object.freeze({ r: 120, g: 225, b: 255 }),
+    title: rgb(120, 225, 255),
     accent: "#80dfff",
     core: "#62ffd2",
     hot: "#ffd28a",
     wave: "#98ffc2",
-    module: Object.freeze({ r: 204, g: 232, b: 244 }),
+    module: rgb(204, 232, 244),
   }),
   Object.freeze({
-    title: Object.freeze({ r: 173, g: 198, b: 255 }),
+    title: rgb(173, 198, 255),
     accent: "#9fb4ff",
     core: "#7ee6ff",
     hot: "#ffb26b",
     wave: "#c4ff8f",
-    module: Object.freeze({ r: 214, g: 222, b: 245 }),
+    module: rgb(214, 222, 245),
   }),
   Object.freeze({
-    title: Object.freeze({ r: 160, g: 255, b: 205 }),
+    title: rgb(160, 255, 205),
     accent: "#84ffd4",
     core: "#65f5b2",
     hot: "#ffc66f",
     wave: "#9cf4ff",
-    module: Object.freeze({ r: 209, g: 239, b: 224 }),
+    module: rgb(209, 239, 224),
   }),
   Object.freeze({
-    title: Object.freeze({ r: 255, g: 212, b: 150 }),
+    title: rgb(255, 212, 150),
     accent: "#ffd48e",
     core: "#ffc871",
     hot: "#ff8c6a",
     wave: "#a7ffe3",
-    module: Object.freeze({ r: 240, g: 224, b: 208 }),
+    module: rgb(240, 224, 208),
   }),
 ]);
 
@@ -390,8 +394,8 @@ type CommandDeckProps = Readonly<{
   key?: string;
   tick: number;
   phase: number;
-  panelWidth: number;
-  panelHeight: number;
+  viewportCols: number;
+  viewportRows: number;
   driftTarget: number;
   fluxTarget: number;
   orbitTarget: number;
@@ -432,11 +436,13 @@ const CommandDeck = defineWidget<CommandDeckProps>((props, ctx): VNode => {
   });
 
   const palette = paletteForPhase(props.phase);
-  const compact = props.panelWidth < 72 || props.panelHeight < 26;
-  const sidePanelWidth = compact ? clamp(Math.floor(props.panelWidth * 0.31), 14, 20) : 22;
-  const leftPanelWidth = clamp(props.panelWidth - sidePanelWidth - 2, 20, 64);
+  const shellWidth = clamp(props.viewportCols - 4, 20, 140);
+  const shellHeight = clamp(props.viewportRows - 4, 8, 40);
+  const compact = shellWidth < 72 || shellHeight < 26;
+  const sidePanelWidth = compact ? clamp(Math.floor(shellWidth * 0.31), 14, 20) : 22;
+  const leftPanelWidth = clamp(shellWidth - sidePanelWidth - 2, 20, 64);
   const coreCanvasWidth = clamp(leftPanelWidth - 4, 14, 48);
-  const coreCanvasHeight = clamp(Math.floor(props.panelHeight * 0.24), 7, 13);
+  const coreCanvasHeight = clamp(Math.floor(shellHeight * 0.24), 7, 13);
   const sideCanvasWidth = clamp(sidePanelWidth - 4, 8, 18);
   const spectrumHeight = compact ? 8 : 10;
   const streamChartHeight = compact ? 4 : 6;
@@ -496,8 +502,8 @@ const CommandDeck = defineWidget<CommandDeckProps>((props, ctx): VNode => {
         width: moduleProgressWidth,
         variant: "blocks",
         showPercent: false,
-        style: { fg: { r: 122, g: 255, b: 203 } },
-        trackStyle: { fg: { r: 58, g: 86, b: 82 } },
+        style: { fg: rgb(122, 255, 203) },
+        trackStyle: { fg: rgb(58, 86, 82) },
       }),
     ]);
   });
@@ -526,7 +532,7 @@ const CommandDeck = defineWidget<CommandDeckProps>((props, ctx): VNode => {
           ]),
           ui.text(PRODUCT_TAGLINE, {
             key: "core-tagline",
-            style: { fg: { r: 152, g: 176, b: 200 } },
+            style: { fg: rgb(152, 176, 200) },
           }),
           ui.row({ key: "beacon-lane", gap: 0 }, [
             ui.spacer({ key: "beacon-spacer", size: beaconLane }),
@@ -546,7 +552,7 @@ const CommandDeck = defineWidget<CommandDeckProps>((props, ctx): VNode => {
               [
                 ui.text("◆", {
                   key: "beacon-dot",
-                  style: { fg: { r: 255, g: 228, b: 158 } },
+                  style: { fg: rgb(255, 228, 158) },
                 }),
               ],
             ),
@@ -585,7 +591,7 @@ const CommandDeck = defineWidget<CommandDeckProps>((props, ctx): VNode => {
               width: sparklineWidth,
               highRes: true,
               blitter: "braille",
-              style: { fg: { r: 132, g: 246, b: 198 } },
+              style: { fg: rgb(132, 246, 198) },
             }),
           ]),
         ],
@@ -596,6 +602,8 @@ const CommandDeck = defineWidget<CommandDeckProps>((props, ctx): VNode => {
             key: "spectrum-radar-panel",
             border: "single",
             width: sidePanelWidth,
+            // Helper-first visibility over `expr("if(viewport.w < 70, 0, 1)")`.
+            display: visibilityConstraints.viewportWidthAtLeast(70),
             p: 1,
             transition: {
               duration: 300,
@@ -606,7 +614,7 @@ const CommandDeck = defineWidget<CommandDeckProps>((props, ctx): VNode => {
           [
             ui.text("Spectrum and Radar", {
               key: "spectrum-radar-title",
-              style: { fg: { r: 174, g: 232, b: 255 } },
+              style: { fg: rgb(174, 232, 255) },
             }),
             ui.canvas({
               key: "spectrum-radar-canvas",
@@ -632,6 +640,8 @@ const CommandDeck = defineWidget<CommandDeckProps>((props, ctx): VNode => {
             key: "stream-panel",
             border: "single",
             width: sidePanelWidth,
+            // Helper-first visibility over `expr("if(viewport.h < 24, 0, 1)")`.
+            display: visibilityConstraints.viewportHeightAtLeast(24),
             p: 1,
             transition: {
               duration: 320,
@@ -642,7 +652,7 @@ const CommandDeck = defineWidget<CommandDeckProps>((props, ctx): VNode => {
           [
             ui.text("Telemetry Streams", {
               key: "stream-title",
-              style: { fg: { r: 154, g: 198, b: 255 } },
+              style: { fg: rgb(154, 198, 255) },
             }),
             ui.lineChart({
               key: "stream-chart",
@@ -681,6 +691,8 @@ const CommandDeck = defineWidget<CommandDeckProps>((props, ctx): VNode => {
       {
         key: "modules-panel",
         border: "single",
+        // Helper-first visibility over `expr("if(viewport.h < 22, 0, 1)")`.
+        display: visibilityConstraints.viewportHeightAtLeast(22),
         p: 1,
         transition: {
           duration: 260,
@@ -691,7 +703,7 @@ const CommandDeck = defineWidget<CommandDeckProps>((props, ctx): VNode => {
       [
         ui.text("Module Sync Rails", {
           key: "modules-title",
-          style: { fg: { r: 153, g: 255, b: 213 } },
+          style: { fg: rgb(153, 255, 213) },
         }),
         ui.column({ key: "modules-list", gap: 0 }, moduleRows),
       ],
@@ -702,7 +714,7 @@ const CommandDeck = defineWidget<CommandDeckProps>((props, ctx): VNode => {
       ).padStart(3, "0")}%  drift=${drift.toFixed(2)}  burst=${String(Math.round(burst * 100)).padStart(3, "0")}%`,
       {
         key: "metrics-readout",
-        style: { fg: { r: 138, g: 166, b: 193 } },
+        style: { fg: rgb(138, 166, 193) },
       },
     ),
   ]);
@@ -718,15 +730,16 @@ export function renderReactorLab(state: AnimationLabState): VNode {
       ui.text("•", { key: "brand-dot" }),
       ui.text("Animation Lab", {
         key: "brand-name",
-        style: { fg: { r: 150, g: 225, b: 255 } },
+        style: { fg: rgb(150, 225, 255) },
       }),
     ]),
     ui.box(
       {
         key: "stage-shell",
         border: "double",
-        width: state.panelWidth,
-        height: state.panelHeight,
+        // Helper-first viewport clamping over fragile raw `clamp(...)` expression strings.
+        width: widthConstraints.clampedViewportMinus({ minus: 4, min: 20, max: 140 }),
+        height: heightConstraints.clampedViewportMinus({ minus: 4, min: 8, max: 40 }),
         opacity: state.panelOpacity,
         p: 1,
         transition: {
@@ -740,8 +753,8 @@ export function renderReactorLab(state: AnimationLabState): VNode {
           key: "command-deck",
           tick: state.tick,
           phase: state.phase,
-          panelWidth: state.panelWidth,
-          panelHeight: state.panelHeight,
+          viewportCols: state.viewportCols,
+          viewportRows: state.viewportRows,
           driftTarget: state.driftTarget,
           fluxTarget: state.fluxTarget,
           orbitTarget: state.orbitTarget,
@@ -756,7 +769,7 @@ export function renderReactorLab(state: AnimationLabState): VNode {
       )}  controls: space/p autoplay, enter step, arrows tune vectors, b burst, m palette, r random, q quit`,
       {
         key: "footer",
-        style: { fg: { r: 130, g: 150, b: 180 } },
+        style: { fg: rgb(130, 150, 180) },
       },
     ),
   ]);

package/templates/animation-lab/src/types.ts

@@ -3,8 +3,6 @@ export type AnimationLabState = Readonly<{
   phase: number;
   viewportCols: number;
   viewportRows: number;
-  panelWidth: number;
-  panelHeight: number;
   panelOpacity: number;
   driftTarget: number;
   fluxTarget: number;

package/templates/cli-tool/src/screens/logs.ts

@@ -57,9 +57,9 @@ export function renderLogsScreen(
               ? {}
               : { levelFilter: Object.freeze(["info", "warn", "error"] as const) }),
             onScroll: (scrollTop) => deps.dispatch({ type: "set-scroll-top", scrollTop }),
-            onEntryToggle: (entryId, expanded) =>
+            onChange: (entryId, expanded) =>
               deps.dispatch({ type: "set-entry-expanded", entryId, expanded }),
-            onClear: () => deps.dispatch({ type: "clear-logs" }),
+            onPress: () => deps.dispatch({ type: "clear-logs" }),
           }),
         ]),
         ui.panel({ title: "Recent entries", style: styles.panelStyle }, [

package/templates/dashboard/src/screens/overview.ts

@@ -1,5 +1,5 @@
 import type { VNode } from "@rezi-ui/core";
-import { ui, when } from "@rezi-ui/core";
+import { groupConstraints, heightConstraints, ui, when, widthConstraints } from "@rezi-ui/core";
 import {
   filterLabel,
   fleetCounts,
@@ -34,6 +34,22 @@ export function renderOverviewScreen(state: DashboardState, handlers: DashboardS
   const health = statusBadge(overallStatus(state.services));
   const theme = themeSpec(state.themeName);
 
+  // Helper-first constraints: sibling label equalization via max_sibling(#id.min_w) and intrinsic-aware modals.
+  function inspectorRow(label: string, value: string): VNode {
+    return ui.row({ key: label, gap: 2, wrap: true, items: "center" }, [
+      ui.box(
+        {
+          id: "inspector-key",
+          width: groupConstraints.maxSiblingMinWidth("inspector-key"),
+          border: "none",
+          p: 0,
+        },
+        [ui.text(label, { style: styles.mutedStyle })],
+      ),
+      ui.text(value),
+    ]);
+  }
+
   const serviceRows: readonly VNode[] =
     visible.length === 0
       ? [ui.text("No services match the current filter.", { style: styles.mutedStyle })]
@@ -70,10 +86,10 @@ export function renderOverviewScreen(state: DashboardState, handlers: DashboardS
             ui.tag(service.owner, { variant: "default" }),
             ui.tag(service.region, { variant: "info" }),
           ]),
-          ui.text(`Latency: ${formatLatency(service.latencyMs)}`),
-          ui.text(`Error Rate: ${formatErrorRate(service.errorRate)}`),
-          ui.text(`Traffic: ${formatTraffic(service.trafficRpm)}`),
-          ui.text(`Update rate: ${updateRate} Hz`, { style: styles.mutedStyle }),
+          inspectorRow("Latency", formatLatency(service.latencyMs)),
+          inspectorRow("Error Rate", formatErrorRate(service.errorRate)),
+          inspectorRow("Traffic", formatTraffic(service.trafficRpm)),
+          inspectorRow("Update rate", `${updateRate} Hz`),
           ui.sparkline(service.history, { width: 18, min: 0, max: 220 }),
         ]);
       },
@@ -182,7 +198,9 @@ export function renderOverviewScreen(state: DashboardState, handlers: DashboardS
     ui.modal({
       id: "dashboard-help",
       title: `${PRODUCT_NAME} Commands`,
-      width: 70,
+      // Helper-first intrinsic sizing: this modal adapts to its content but stays within viewport bounds.
+      width: widthConstraints.clampedIntrinsicPlus({ pad: 8, min: 44, max: "parent" }),
+      height: heightConstraints.clampedIntrinsicPlus({ pad: 4, min: 10, max: "parent" }),
       backdrop: "none",
       returnFocusTo: "help",
       content: ui.column({ gap: 1 }, [

package/templates/starship/src/__tests__/render.test.ts

@@ -2,7 +2,7 @@ import assert from "node:assert/strict";
 import test from "node:test";
 import type { RouteRenderContext, RouterApi } from "@rezi-ui/core";
 import { createTestRenderer } from "@rezi-ui/core/testing";
-import { createInitialState } from "../helpers/state.js";
+import { createInitialState, reduceStarshipState } from "../helpers/state.js";
 import { renderBridgeScreen } from "../screens/bridge.js";
 import { renderCargoScreen } from "../screens/cargo.js";
 import { renderCommsScreen } from "../screens/comms.js";
@@ -70,6 +70,22 @@ test("bridge screen renders core markers", () => {
   assert.match(output, /Route Health/);
 });
 
+test("bridge screen remains deterministic in compact viewport", () => {
+  const state = reduceStarshipState(createInitialState(0), {
+    type: "set-viewport",
+    cols: 76,
+    rows: 30,
+  });
+  const renderer = createTestRenderer({ viewport: { cols: 76, rows: 30 } });
+  const output = renderer
+    .render(renderBridgeScreen(createContext(state, "bridge"), createDeps()))
+    .toText();
+
+  assert.match(output, /Bridge Overview/);
+  assert.doesNotMatch(output, /Navigation/);
+  assert.doesNotMatch(output, /Route Health/);
+});
+
 test("engineering screen renders core markers", () => {
   const state = createInitialState(0);
   const renderer = createTestRenderer({ viewport: { cols: 140, rows: 48 } });

package/templates/starship/src/helpers/layout.ts

@@ -7,10 +7,6 @@ export type ResponsiveLayout = Readonly<{
   stackRightRail: boolean;
   compactSidebar: boolean;
   hideNonCritical: boolean;
-  sidebarWidth: number;
-  crewMasterWidth: number;
-  chartWidth: number;
-  canvasWidth: number;
 }>;
 
 export type ViewportSnapshot = Readonly<{
@@ -24,14 +20,21 @@ function clamp(value: number, min: number, max: number): number {
   return value;
 }
 
+function toPositiveInt(value: number, fallback: number): number {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    return fallback;
+  }
+  if (value >= 0) return Math.floor(value);
+  return Math.ceil(value);
+}
+
 export function resolveLayout(viewport: ViewportSnapshot): ResponsiveLayout {
-  const width = Math.max(40, Math.floor(viewport.width));
-  const height = Math.max(18, Math.floor(viewport.height));
+  const width = clamp(toPositiveInt(viewport.width, 96), 40, 500);
+  const height = clamp(toPositiveInt(viewport.height, 32), 18, 200);
   const wide = width >= 120;
   const stackRightRail = width < 120;
   const compactSidebar = width < 90;
   const hideNonCritical = width < 80 || height < 26;
-  const sidebarWidth = compactSidebar ? 18 : 34;
 
   return Object.freeze({
     width,
@@ -40,10 +43,6 @@ export function resolveLayout(viewport: ViewportSnapshot): ResponsiveLayout {
     stackRightRail,
     compactSidebar,
     hideNonCritical,
-    sidebarWidth,
-    crewMasterWidth: wide ? 60 : 100,
-    chartWidth: clamp(Math.floor(width * (wide ? 0.5 : 0.9)), 28, 132),
-    canvasWidth: clamp(Math.floor(width * (wide ? 0.48 : 0.9)), 26, 116),
   });
 }
 

package/templates/starship/src/main.ts

@@ -195,7 +195,7 @@ async function stopApp(code = 0): Promise<void> {
   } catch {
     // Ignore stop races.
   }
-  frameAuditGlobal.__reziFrameAuditContext = undefined;
+  frameAuditGlobal.__reziFrameAuditContext = () => Object.freeze({});
   stopResolve?.();
   stopResolve = null;
 }

package/templates/starship/src/screens/bridge.ts

@@ -131,8 +131,8 @@ const BridgeCommandDeck = defineWidget<BridgeCommandDeckProps>((props, ctx): VNo
 
   const selected = selectedCrew(props.state);
   const subsystemNames = props.state.subsystems.map((item) => item.name);
-  const chartWidth = layout.chartWidth;
-  const schematicWidth = layout.canvasWidth;
+  const chartWidth = clamp(Math.floor(layout.width * (layout.wide ? 0.5 : 0.9)), 28, 132);
+  const schematicWidth = clamp(Math.floor(layout.width * (layout.wide ? 0.48 : 0.9)), 26, 116);
   const schematicHeight = clamp(Math.floor(contentRows * 0.38), 8, 14);
   const showGaugeRow = contentRows >= 28;
   const showSparkline = contentRows >= 24;
@@ -326,7 +326,7 @@ const BridgeCommandDeck = defineWidget<BridgeCommandDeckProps>((props, ctx): VNo
     showSystemsPanel: contentRows >= 60,
   });
   const commandRegion = showCommandSummary
-    ? ui.row({ gap: SPACE.sm, items: "stretch", width: "100%" }, [
+    ? ui.row({ gap: SPACE.sm, items: "stretch", width: "full" }, [
         ui.box({ border: "none", p: 0, flex: 2 }, [commandDeck]),
         ui.box({ border: "none", p: 0, flex: 1 }, [commandSummary]),
       ])
@@ -498,18 +498,18 @@ const BridgeCommandDeck = defineWidget<BridgeCommandDeckProps>((props, ctx): VNo
 
   const showSchematicRail = layout.wide && !layout.hideNonCritical && contentRows >= 28;
   const telemetryRegion = showSchematicRail
-    ? ui.row({ gap: SPACE.sm, items: "stretch", wrap: false, width: "100%" }, [
+    ? ui.row({ gap: SPACE.sm, items: "stretch", wrap: false, width: "full" }, [
         ui.box({ border: "none", p: 0, flex: 2 }, [telemetryPanel]),
         ui.box({ border: "none", p: 0, flex: 1 }, [schematicPanel]),
       ])
     : telemetryPanel;
 
   if (veryCompactHeight) {
-    return ui.column({ gap: SPACE.sm, width: "100%" }, [commandDeck]);
+    return ui.column({ gap: SPACE.sm, width: "full" }, [commandDeck]);
   }
 
   if (compactHeight) {
-    return ui.column({ gap: SPACE.sm, width: "100%" }, [
+    return ui.column({ gap: SPACE.sm, width: "full" }, [
       commandDeck,
       surfacePanel(
         tokens,
@@ -532,10 +532,10 @@ const BridgeCommandDeck = defineWidget<BridgeCommandDeckProps>((props, ctx): VNo
   }
 
   if (constrainedHeight) {
-    return ui.column({ gap: SPACE.sm, width: "100%" }, [commandDeck, telemetryPanel]);
+    return ui.column({ gap: SPACE.sm, width: "full" }, [commandDeck, telemetryPanel]);
   }
 
-  return ui.column({ gap: SPACE.sm, width: "100%" }, [
+  return ui.column({ gap: SPACE.sm, width: "full" }, [
     commandRegion,
     telemetryRegion,
     ...(contentRows >= 60 ? [systemsPanel] : []),
@@ -554,7 +554,7 @@ export function renderBridgeScreen(
     title: "Bridge Overview",
     context,
     deps,
-    body: ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [
+    body: ui.column({ gap: SPACE.sm, width: "full", height: "full" }, [
       BridgeCommandDeck({ key: "bridge-command-deck", state, dispatch: deps.dispatch }),
     ]),
   });

package/templates/starship/src/screens/cargo.ts

@@ -22,6 +22,12 @@ function categoryLabel(category: CargoItem["category"]): string {
   return "Ordnance";
 }
 
+function clamp(value: number, min: number, max: number): number {
+  if (value < min) return min;
+  if (value > max) return max;
+  return value;
+}
+
 export function renderCargoScreen(
   context: RouteRenderContext<StarshipState>,
   deps: RouteDeps,
@@ -30,7 +36,7 @@ export function renderCargoScreen(
     title: "Cargo Hold",
     context,
     deps,
-    body: ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [
+    body: ui.column({ gap: SPACE.sm, width: "full", height: "full" }, [
       CargoDeck({
         key: "cargo-deck",
         state: context.state,
@@ -53,6 +59,7 @@ const CargoDeck = defineWidget<CargoDeckProps>((props, ctx): VNode => {
     width: state.viewportCols,
     height: state.viewportRows,
   });
+  const chartWidth = clamp(Math.floor(layout.width * (layout.wide ? 0.5 : 0.9)), 28, 132);
   const cargo = sortedCargo(state);
   const summary = cargoSummary(cargo);
   const totalItems = cargo.length;
@@ -62,7 +69,7 @@ const CargoDeck = defineWidget<CargoDeckProps>((props, ctx): VNode => {
       : cargo.reduce((sum, item) => sum + item.priority, 0) / Math.max(1, cargo.length);
   const selected =
     (state.selectedCargoId && cargo.find((item) => item.id === state.selectedCargoId)) || cargo[0] || null;
-  const nameWidth = Math.max(12, Math.min(24, layout.chartWidth - 14));
+  const nameWidth = Math.max(12, Math.min(24, chartWidth - 14));
   const showMetricsPanel = !layout.hideNonCritical && layout.height >= 40;
   const showSelectedPanel = !layout.hideNonCritical && layout.height >= 48;
 
@@ -99,7 +106,7 @@ const CargoDeck = defineWidget<CargoDeckProps>((props, ctx): VNode => {
     });
 
   if (layout.height <= 28) {
-    return ui.column({ gap: SPACE.sm, width: "100%" }, [
+    return ui.column({ gap: SPACE.sm, width: "full" }, [
       surfacePanel(tokens, "Cargo Snapshot", [
         sectionHeader(tokens, "Compact Cargo View", "Expand terminal height for full manifest + charts"),
         ui.row({ gap: SPACE.xs, wrap: true }, [
@@ -188,7 +195,7 @@ const CargoDeck = defineWidget<CargoDeckProps>((props, ctx): VNode => {
     ui.barChart(chartItems, { orientation: "horizontal", showValues: true }),
     ui.scatter({
       id: "cargo-scatter",
-      width: Math.max(32, layout.chartWidth + 6),
+      width: Math.max(32, chartWidth + 6),
       height: 10,
       points: scatterPoints,
       blitter: "braille",
@@ -308,7 +315,7 @@ const CargoDeck = defineWidget<CargoDeckProps>((props, ctx): VNode => {
     { tone: "base" },
   );
 
-  return ui.column({ gap: SPACE.sm, width: "100%" }, [
+  return ui.column({ gap: SPACE.sm, width: "full" }, [
     controlsPanel,
     showMetricsPanel
       ? ui.row({ gap: SPACE.sm, wrap: true, items: "stretch" }, [

package/templates/starship/src/screens/comms.ts

@@ -73,7 +73,7 @@ const CommsDeck = defineWidget<CommsDeckProps>((props, ctx): VNode => {
   };
 
   if (compactHeight) {
-    return ui.column({ gap: SPACE.sm, width: "100%" }, [
+    return ui.column({ gap: SPACE.sm, width: "full" }, [
       surfacePanel(tokens, "Channel Controls", [
         sectionHeader(tokens, "Compact Comms View", "Expand terminal height for full traffic console"),
         ui.tabs({
@@ -165,7 +165,7 @@ const CommsDeck = defineWidget<CommsDeckProps>((props, ctx): VNode => {
             focusedStyle: { fg: tokens.text.primary, bg: tokens.bg.panel.elevated, bold: true },
             onScroll: (scrollTop) => props.dispatch({ type: "set-comms-scroll", scrollTop }),
             expandedEntries: state.expandedMessageIds,
-            onEntryToggle: (entryId, expanded) =>
+            onChange: (entryId, expanded) =>
               props.dispatch({
                 type: "toggle-message-expanded",
                 messageId: entryId,
@@ -259,7 +259,7 @@ const CommsDeck = defineWidget<CommsDeckProps>((props, ctx): VNode => {
     }) ?? ui.text(""),
   ]);
 
-  return ui.column({ gap: SPACE.sm, width: "100%" }, [
+  return ui.column({ gap: SPACE.sm, width: "full" }, [
     show(
       state.activeChannel === "emergency",
       ui.callout("Emergency channel monitored with elevated priority.", {
@@ -462,7 +462,7 @@ export function renderCommsScreen(
     title: "Communications",
     context,
     deps,
-    body: ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [
+    body: ui.column({ gap: SPACE.sm, width: "full", height: "full" }, [
       CommsDeck({
         key: "comms-deck",
         state: context.state,

package/templates/starship/src/screens/crew.ts

@@ -1,9 +1,12 @@
 import {
+  conditionalConstraints,
   defineWidget,
+  heightConstraints,
   maybe,
   show,
   ui,
   useAsync,
+  visibilityConstraints,
   type RouteRenderContext,
   type VNode,
 } from "@rezi-ui/core";
@@ -36,6 +39,12 @@ function validateCriticalDepartments(crew: readonly CrewMember[]): string | null
   return null;
 }
 
+function clamp(value: number, min: number, max: number): number {
+  if (value < min) return min;
+  if (value > max) return max;
+  return value;
+}
+
 type CrewDeckProps = Readonly<{
   key?: string;
   state: StarshipState;
@@ -48,6 +57,7 @@ const CrewDeck = defineWidget<CrewDeckProps>((props, ctx): VNode => {
     width: props.state.viewportCols,
     height: props.state.viewportRows,
   });
+  const chartWidth = clamp(Math.floor(layout.width * (layout.wide ? 0.5 : 0.9)), 28, 132);
   const compactHeight = layout.height < 34;
   const showDetailPane = layout.height >= 38;
   const visible = visibleCrew(props.state);
@@ -194,7 +204,7 @@ const CrewDeck = defineWidget<CrewDeckProps>((props, ctx): VNode => {
     ...tableSkin(tokens),
   });
 
-  const detailPanel = ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [
+  const detailPanel = ui.column({ gap: SPACE.sm, width: "full", height: "full" }, [
     maybe(selected, (member) =>
       surfacePanel(
         tokens,
@@ -208,7 +218,7 @@ const CrewDeck = defineWidget<CrewDeckProps>((props, ctx): VNode => {
           ]),
           progressRow(tokens, "Efficiency", member.efficiency / 100, {
             labelWidth: 12,
-            width: Math.max(18, layout.chartWidth - 10),
+            width: Math.max(18, chartWidth - 10),
             tone: member.efficiency < 45 ? "warning" : "success",
             trend: member.efficiency >= 50 ? 1 : -1,
           }),
@@ -301,12 +311,12 @@ const CrewDeck = defineWidget<CrewDeckProps>((props, ctx): VNode => {
     ),
   ]);
 
-  const manifestBlock = ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [
+  const manifestBlock = ui.column({ gap: SPACE.sm, width: "full", height: "full" }, [
     ui.box(
       {
         border: "none",
         p: 0,
-        width: "100%",
+        width: "full",
         flex: 1,
         minHeight: 10,
         overflow: "hidden",
@@ -328,8 +338,8 @@ const CrewDeck = defineWidget<CrewDeckProps>((props, ctx): VNode => {
           {
             id: ctx.id("crew-master-detail"),
             gap: SPACE.sm,
-            width: "100%",
-            height: "100%",
+            width: "full",
+            height: "full",
             items: "stretch",
             wrap: false,
           },
@@ -338,8 +348,13 @@ const CrewDeck = defineWidget<CrewDeckProps>((props, ctx): VNode => {
               {
                 border: "none",
                 p: 0,
-                width: layout.crewMasterWidth,
-                height: "100%",
+                // Helper-first responsive sizing: wide terminals get a stable master width, narrow gets fallback width.
+                width: conditionalConstraints.ifThenElse(
+                  visibilityConstraints.viewportWidthAtLeast(120),
+                  60,
+                  100,
+                ),
+                height: "full",
                 overflow: "hidden",
               },
               [manifestBlock],
@@ -349,7 +364,7 @@ const CrewDeck = defineWidget<CrewDeckProps>((props, ctx): VNode => {
                 border: "none",
                 p: 0,
                 flex: 1,
-                height: "100%",
+                height: "full",
                 overflow: "hidden",
               },
               [detailPanel],
@@ -358,19 +373,24 @@ const CrewDeck = defineWidget<CrewDeckProps>((props, ctx): VNode => {
         )
       : manifestBlock
     : showDetailPane
-      ? ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [
+      ? ui.column({ gap: SPACE.sm, width: "full", height: "full" }, [
           ui.box(
-            { border: "none", p: 0, width: "100%", flex: 1, minHeight: 10, overflow: "hidden" },
+            { border: "none", p: 0, width: "full", flex: 1, minHeight: 10, overflow: "hidden" },
             [manifestBlock],
           ),
           ui.box(
-            { border: "none", p: 0, width: "100%", flex: 1, minHeight: 10, overflow: "hidden" },
+            { border: "none", p: 0, width: "full", flex: 1, minHeight: 10, overflow: "hidden" },
             [detailPanel],
           ),
         ])
       : manifestBlock;
 
-  const operationsPanelMaxHeight = Math.max(12, Math.min(22, Math.floor(layout.height * 0.34)));
+  // Helper-first viewport-derived sizing (clamp 12..22 at 34% of viewport height).
+  const operationsPanelHeightExpr = heightConstraints.clampedPercentOfViewport({
+    ratio: 0.34,
+    min: 12,
+    max: 22,
+  });
   debugSnapshot("crew.render", {
     viewportCols: props.state.viewportCols,
     viewportRows: props.state.viewportRows,
@@ -380,15 +400,15 @@ const CrewDeck = defineWidget<CrewDeckProps>((props, ctx): VNode => {
     totalPages,
     pageDataCount: pageData.length,
     showDetailPane,
-    operationsPanelMaxHeight,
+    operationsPanelHeight: operationsPanelHeightExpr.source,
     editingCrew: props.state.editingCrew,
   });
   const operationsPanel = ui.box(
     {
       border: "none",
       p: 0,
-      width: "100%",
-      height: operationsPanelMaxHeight,
+      width: "full",
+      height: operationsPanelHeightExpr,
       overflow: "scroll",
     },
     [
@@ -502,7 +522,7 @@ const CrewDeck = defineWidget<CrewDeckProps>((props, ctx): VNode => {
     ],
   );
 
-  return ui.column({ gap: SPACE.md, width: "100%", height: "100%" }, [
+  return ui.column({ gap: SPACE.md, width: "full", height: "full" }, [
     operationsPanel,
     show(
       asyncCrew.loading,
@@ -519,7 +539,7 @@ const CrewDeck = defineWidget<CrewDeckProps>((props, ctx): VNode => {
         {
           border: "none",
           p: 0,
-          width: "100%",
+          width: "full",
           flex: 1,
           minHeight: 12,
           overflow: "hidden",
@@ -535,7 +555,7 @@ export function renderCrewScreen(context: RouteRenderContext<StarshipState>, dep
     title: "Crew Manifest",
     context,
     deps,
-    body: ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [
+    body: ui.column({ gap: SPACE.sm, width: "full", height: "full" }, [
       CrewDeck({
         key: "crew-deck",
         state: context.state,

package/templates/starship/src/screens/engineering.ts

@@ -5,6 +5,7 @@ import {
   useSequence,
   useSpring,
   useStagger,
+  widthConstraints,
   type CanvasContext,
   type NodeState,
   type RouteRenderContext,
@@ -28,6 +29,12 @@ function buildSubsystemChildren(subsystems: readonly Subsystem[]): Map<string |
   return map;
 }
 
+function clamp(value: number, min: number, max: number): number {
+  if (value < min) return min;
+  if (value > max) return max;
+  return value;
+}
+
 type ReactorPalette = Readonly<{
   background: string;
   border: string;
@@ -105,6 +112,8 @@ const EngineeringDeck = defineWidget<EngineeringDeckProps>((props, ctx): VNode =
   const leftPanePanelCount = 1 + (showSecondaryPanels ? 1 : 0);
   const rightPanePanelCount = 1 + (showSecondaryPanels ? 2 : 0);
   const reactorCanvasHeight = Math.max(8, Math.min(14, Math.floor(contentRows * 0.42)));
+  const chartWidth = clamp(Math.floor(layout.width * (layout.wide ? 0.5 : 0.9)), 28, 132);
+  const canvasWidth = clamp(Math.floor(layout.width * (layout.wide ? 0.48 : 0.9)), 26, 116);
   debugSnapshot("engineering.layout", {
     viewportCols: props.state.viewportCols,
     viewportRows: props.state.viewportRows,
@@ -214,7 +223,7 @@ const EngineeringDeck = defineWidget<EngineeringDeckProps>((props, ctx): VNode =
     : surfacePanel(tokens, "Reactor Schematic", [
         ui.canvas({
           id: ctx.id("reactor-canvas"),
-          width: Math.max(32, layout.canvasWidth),
+          width: Math.max(32, canvasWidth),
           height: reactorCanvasHeight,
           blitter: "braille",
           draw: (canvas) => {
@@ -272,7 +281,7 @@ const EngineeringDeck = defineWidget<EngineeringDeckProps>((props, ctx): VNode =
       ...(selectedSubsystemId ? { selected: selectedSubsystemId } : {}),
       showLines: true,
       indentSize: 2,
-      onToggle: (node) => props.dispatch({ type: "toggle-subsystem", subsystemId: node.id }),
+      onChange: (node) => props.dispatch({ type: "toggle-subsystem", subsystemId: node.id }),
       onSelect: (node) => setSelectedSubsystemId(node.id),
       renderNode: (node, depth, state: NodeState) =>
         ui.row({ gap: SPACE.xs, wrap: false }, [
@@ -310,7 +319,7 @@ const EngineeringDeck = defineWidget<EngineeringDeckProps>((props, ctx): VNode =
         ui.column({ key: subsystem.id, gap: SPACE.xs }, [
           progressRow(tokens, subsystem.name, subsystem.power / 100, {
             labelWidth: 18,
-            width: Math.max(22, layout.chartWidth - 8),
+            width: Math.max(22, chartWidth - 8),
             tone: subsystem.health < props.state.alertThreshold ? "warning" : "default",
             trend: subsystem.health < props.state.alertThreshold ? -1 : 1,
           }),
@@ -318,7 +327,7 @@ const EngineeringDeck = defineWidget<EngineeringDeckProps>((props, ctx): VNode =
             ? [
                 progressRow(tokens, "Boot", stagger[index] ?? 0, {
                   labelWidth: 18,
-                  width: Math.max(22, layout.chartWidth - 8),
+                  width: Math.max(22, chartWidth - 8),
                   tone: "success",
                   trend: 1,
                 }),
@@ -332,7 +341,7 @@ const EngineeringDeck = defineWidget<EngineeringDeckProps>((props, ctx): VNode =
   const thermalPanel = surfacePanel(tokens, "Thermal Map", [
     ui.heatmap({
       id: ctx.id("engineering-heatmap"),
-      width: Math.max(30, layout.chartWidth),
+      width: Math.max(30, chartWidth),
       height: 10,
       data: heatmapData,
       colorScale: "inferno",
@@ -372,40 +381,40 @@ const EngineeringDeck = defineWidget<EngineeringDeckProps>((props, ctx): VNode =
   ]);
 
   const leftPane = showSecondaryPanels
-    ? ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [
-        ui.box({ border: "none", p: 0, width: "100%", flex: 3, minHeight: 12 }, [reactorPanel]),
-        ui.box({ border: "none", p: 0, width: "100%", flex: 2, minHeight: 10, overflow: "hidden" }, [
+    ? ui.column({ gap: SPACE.sm, width: "full", height: "full" }, [
+        ui.box({ border: "none", p: 0, width: "full", flex: 3, minHeight: 12 }, [reactorPanel]),
+        ui.box({ border: "none", p: 0, width: "full", flex: 2, minHeight: 10, overflow: "hidden" }, [
           treePanel,
         ]),
       ])
-    : ui.column({ gap: SPACE.sm, width: "100%" }, [reactorPanel]);
+    : ui.column({ gap: SPACE.sm, width: "full" }, [reactorPanel]);
   const rightPane = showSecondaryPanels
-    ? ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [
-        ui.box({ border: "none", p: 0, width: "100%", flex: 3, minHeight: 12, overflow: "hidden" }, [
+    ? ui.column({ gap: SPACE.sm, width: "full", height: "full" }, [
+        ui.box({ border: "none", p: 0, width: "full", flex: 3, minHeight: 12, overflow: "hidden" }, [
           powerPanel,
         ]),
-        ui.box({ border: "none", p: 0, width: "100%", flex: 2, minHeight: 10 }, [thermalPanel]),
-        ui.box({ border: "none", p: 0, width: "100%", flex: 2, minHeight: 10, overflow: "hidden" }, [
+        ui.box({ border: "none", p: 0, width: "full", flex: 2, minHeight: 10 }, [thermalPanel]),
+        ui.box({ border: "none", p: 0, width: "full", flex: 2, minHeight: 10, overflow: "hidden" }, [
           diagnosticsPanel,
         ]),
       ])
-    : ui.column({ gap: SPACE.sm, width: "100%" }, [powerPanel]);
+    : ui.column({ gap: SPACE.sm, width: "full" }, [powerPanel]);
 
   const responsiveDeckMinHeight = Math.max(
     16,
     contentRows - (showControlsSummary ? 12 : 10) - (showSecondaryPanels ? 0 : 2),
   );
   const responsiveDeckBody = useWideRow
-    ? ui.row({ gap: SPACE.sm, items: "stretch", width: "100%" }, [
+    ? ui.row({ gap: SPACE.sm, items: "stretch", width: "full" }, [
         ui.box({ border: "none", p: 0, flex: 2 }, [leftPane]),
         ui.box({ border: "none", p: 0, flex: 3 }, [rightPane]),
       ])
-    : ui.column({ gap: SPACE.sm, width: "100%" }, [leftPane, rightPane]);
+    : ui.column({ gap: SPACE.sm, width: "full" }, [leftPane, rightPane]);
   const responsiveDeck = ui.box(
     {
       border: "none",
       p: 0,
-      width: "100%",
+      width: "full",
       flex: 1,
       minHeight: responsiveDeckMinHeight,
       overflow: "scroll",
@@ -475,12 +484,13 @@ const EngineeringDeck = defineWidget<EngineeringDeckProps>((props, ctx): VNode =
   );
 
   const controlsRegion = showControlsSummary
-    ? ui.row({ gap: SPACE.sm, items: "start", width: "100%", wrap: false }, [
+    ? ui.row({ gap: SPACE.sm, items: "start", width: "full", wrap: false }, [
         ui.box(
           {
             border: "none",
             p: 0,
-            width: Math.max(56, Math.floor(layout.width * 0.62)),
+            // Helper-first: replaces raw `expr("max(56, viewport.w * 0.62)")`.
+            width: widthConstraints.minViewportPercent({ ratio: 0.62, min: 56 }),
           },
           [controlsPanel],
         ),
@@ -488,7 +498,8 @@ const EngineeringDeck = defineWidget<EngineeringDeckProps>((props, ctx): VNode =
           {
             border: "none",
             p: 0,
-            width: Math.max(34, Math.floor(layout.width * 0.34)),
+            // Helper-first: replaces raw `expr("max(34, viewport.w * 0.34)")`.
+            width: widthConstraints.minViewportPercent({ ratio: 0.34, min: 34 }),
           },
           [controlsSummary],
         ),
@@ -507,14 +518,14 @@ const EngineeringDeck = defineWidget<EngineeringDeckProps>((props, ctx): VNode =
   });
 
   if (veryCompactHeight) {
-    return ui.column({ gap: SPACE.sm, width: "100%" }, [controlsPanel]);
+    return ui.column({ gap: SPACE.sm, width: "full" }, [controlsPanel]);
   }
 
   if (compactHeight) {
-    return ui.column({ gap: SPACE.sm, width: "100%" }, [controlsPanel, reactorPanel]);
+    return ui.column({ gap: SPACE.sm, width: "full" }, [controlsPanel, reactorPanel]);
   }
 
-  return ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [
+  return ui.column({ gap: SPACE.sm, width: "full", height: "full" }, [
     controlsRegion,
     responsiveDeck,
   ]);
@@ -528,7 +539,7 @@ export function renderEngineeringScreen(
     title: "Engineering Deck",
     context,
     deps,
-    body: ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [
+    body: ui.column({ gap: SPACE.sm, width: "full", height: "full" }, [
       EngineeringDeck({
         key: "engineering-deck",
         state: context.state,

package/templates/starship/src/screens/primitives.ts

@@ -66,7 +66,7 @@ export function surfacePanel(
       border: "rounded",
       p: options?.p ?? SPACE.sm,
       gap: options?.gap ?? SPACE.sm,
-      ...(fill ? { width: "100%" } : {}),
+      ...(fill ? { width: "full" } : {}),
       style: { bg: colors.background, fg: tokens.text.primary },
       borderStyle: { fg: colors.border, bg: colors.background },
       inheritStyle: { fg: tokens.text.primary },

package/templates/starship/src/screens/settings.ts

@@ -159,7 +159,7 @@ const SettingsDeck = defineWidget<SettingsDeckProps>((props, ctx): VNode => {
   ], { tone: "base" });
 
   return ui.layers([
-    ui.column({ gap: SPACE.md, width: "100%" }, [
+    ui.column({ gap: SPACE.md, width: "full" }, [
       settingsForm,
       layout.hideNonCritical
         ? surfacePanel(tokens, "Theme Snapshot", [
@@ -209,7 +209,7 @@ function settingsRightRail(state: StarshipState, deps: RouteDeps): VNode {
       subtitle: activeTheme.label,
       actions: [ui.badge("Preview", { variant: "info" })],
     }),
-    body: ui.column({ gap: SPACE.xs, width: "100%", height: "100%" }, [
+    body: ui.column({ gap: SPACE.xs, width: "full", height: "full" }, [
       ui.breadcrumb({
         items: [{ label: "Bridge" }, { label: "Settings" }, { label: "Theme Preview" }],
       }),
@@ -228,7 +228,7 @@ function settingsRightRail(state: StarshipState, deps: RouteDeps): VNode {
     }),
   });
 
-  return ui.column({ gap: SPACE.sm, width: "100%" }, [
+  return ui.column({ gap: SPACE.sm, width: "full" }, [
     surfacePanel(tokens, "Theme Preview", [
       sectionHeader(tokens, "Theme Modes", "Changes apply instantly across the console"),
       ui.grid(
@@ -277,7 +277,7 @@ export function renderSettingsScreen(
     title: "Ship Settings",
     context,
     deps,
-    body: ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [
+    body: ui.column({ gap: SPACE.sm, width: "full", height: "full" }, [
       SettingsDeck({
         key: "settings-deck",
         state: context.state,

package/templates/starship/src/screens/shell.ts

@@ -1,5 +1,6 @@
 import {
   ui,
+  visibilityConstraints,
   type CommandItem,
   type CommandSource,
   type RegisteredBinding,
@@ -149,12 +150,15 @@ export function renderShell(options: ShellOptions): VNode {
   });
   const compactHeight = layout.height <= 34;
   const minimalHeight = layout.height <= 30;
-  const showBreadcrumbStrip = !compactHeight;
-  const showTabsStrip = !minimalHeight;
   const showSidebar = !minimalHeight && layout.width >= 78;
   const showRouteHealth = !compactHeight && showSidebar;
   const showToastOverlay = !compactHeight && state.toasts.length > 0;
-  const showRightRail = Boolean(options.rightRail && !layout.hideNonCritical && layout.height >= 40);
+  const showRightRail = Boolean(
+    options.rightRail && !layout.hideNonCritical && layout.height >= 40 && layout.width >= 80,
+  );
+  const sidebarWidth = layout.compactSidebar ? 18 : 34;
+  // Helper-first constraints (readable intent) over raw `expr("if(viewport.w < ...)")` strings.
+  const rightRailDisplay = visibilityConstraints.viewportAtLeast({ width: 80, height: 40 });
   debugSnapshot("shell.layout", {
     route: options.context.router.currentRoute().id,
     viewportCols: state.viewportCols,
@@ -298,7 +302,7 @@ export function renderShell(options: ShellOptions): VNode {
     {
       border: "none",
       p: SPACE.xs,
-      width: "100%",
+      width: "full",
       style: { bg: tokens.bg.panel.inset, fg: tokens.text.primary },
       inheritStyle: { fg: tokens.text.primary },
     },
@@ -337,7 +341,7 @@ export function renderShell(options: ShellOptions): VNode {
     {
       border: "none",
       p: SPACE.xs,
-      width: "100%",
+      width: "full",
       style: { bg: tokens.bg.panel.inset, fg: tokens.text.primary },
       inheritStyle: { fg: tokens.text.primary },
     },
@@ -394,17 +398,33 @@ export function renderShell(options: ShellOptions): VNode {
   const bodyMain = ui.column(
     {
       gap: SPACE.sm,
-      width: "100%",
-      height: "100%",
+      width: "full",
+      height: "full",
     },
     [
-      ...(showBreadcrumbStrip ? [breadcrumbStrip] : []),
-      ...(showTabsStrip ? [tabsStrip] : []),
       ui.box(
         {
           border: "none",
           p: 0,
-          width: "100%",
+          width: "full",
+          display: visibilityConstraints.viewportHeightAtLeast(35),
+        },
+        [breadcrumbStrip],
+      ),
+      ui.box(
+        {
+          border: "none",
+          p: 0,
+          width: "full",
+          display: visibilityConstraints.viewportHeightAtLeast(31),
+        },
+        [tabsStrip],
+      ),
+      ui.box(
+        {
+          border: "none",
+          p: 0,
+          width: "full",
           flex: 1,
           style: { bg: tokens.bg.app, fg: tokens.text.primary },
           inheritStyle: { fg: tokens.text.primary },
@@ -414,12 +434,22 @@ export function renderShell(options: ShellOptions): VNode {
     ],
   );
 
-  const rightRailNode = showRightRail ? options.rightRail ?? null : null;
+  const rightRailNode = showRightRail
+    ? ui.box(
+        {
+          border: "none",
+          p: 0,
+          width: "full",
+          display: rightRailDisplay,
+        },
+        [options.rightRail],
+      )
+    : null;
   const bodyWithRail =
     rightRailNode
       ? layout.stackRightRail
-        ? ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [bodyMain, rightRailNode])
-        : ui.row({ gap: SPACE.sm, items: "stretch", width: "100%", height: "100%" }, [
+        ? ui.column({ gap: SPACE.sm, width: "full", height: "full" }, [bodyMain, rightRailNode])
+        : ui.row({ gap: SPACE.sm, items: "stretch", width: "full", height: "full" }, [
             ui.box({ flex: 2, border: "none", p: 0 }, [bodyMain]),
             ui.box({ flex: 1, border: "none", p: 0 }, [rightRailNode]),
           ])
@@ -456,7 +486,7 @@ export function renderShell(options: ShellOptions): VNode {
     {
       border: "none",
       p: 0,
-      width: "100%",
+      width: "full",
       style: { bg: tokens.bg.panel.base, fg: tokens.text.primary },
       inheritStyle: { fg: tokens.text.primary },
     },
@@ -467,8 +497,8 @@ export function renderShell(options: ShellOptions): VNode {
     {
       border: "none",
       p: 0,
-      width: "100%",
-      height: "100%",
+      width: "full",
+      height: "full",
       style: { bg: tokens.bg.app, fg: tokens.text.primary },
       inheritStyle: { fg: tokens.text.primary },
     },
@@ -479,8 +509,8 @@ export function renderShell(options: ShellOptions): VNode {
     {
       border: "none",
       p: 0,
-      width: "100%",
-      height: "100%",
+      width: "full",
+      height: "full",
       style: { bg: tokens.bg.app, fg: tokens.text.primary },
       inheritStyle: { fg: tokens.text.primary },
     },
@@ -509,8 +539,8 @@ export function renderShell(options: ShellOptions): VNode {
       {
         border: "none",
         p: 0,
-        width: "100%",
-        height: "100%",
+        width: "full",
+        height: "full",
         style: { bg: tokens.bg.app, fg: tokens.text.primary },
         inheritStyle: { fg: tokens.text.primary },
       },
@@ -522,7 +552,7 @@ export function renderShell(options: ShellOptions): VNode {
           ...(showSidebar
             ? {
                 sidebar: {
-                  width: layout.sidebarWidth,
+                  width: sidebarWidth,
                   content: sidebarContent,
                 },
               }
@@ -588,7 +618,7 @@ export function renderShell(options: ShellOptions): VNode {
               background: tokens.bg.panel.elevated,
               foreground: tokens.text.primary,
             },
-            onDismiss: (id) => options.deps.dispatch({ type: "dismiss-toast", toastId: id }),
+            onClose: (id) => options.deps.dispatch({ type: "dismiss-toast", toastId: id }),
           }),
         })
       : null,
@@ -612,7 +642,7 @@ export function renderShell(options: ShellOptions): VNode {
             sources: commandSources,
             selectedIndex: state.commandIndex,
             placeholder: "Type command or route",
-            onQueryChange: (query) => options.deps.dispatch({ type: "set-command-query", query }),
+            onChange: (query) => options.deps.dispatch({ type: "set-command-query", query }),
             onSelectionChange: (index) =>
               options.deps.dispatch({ type: "set-command-index", index }),
             onSelect: (item) => {