@fasl-work/caos-app-shell 0.22.0 → 0.23.0

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## [0.23.000] - 2026-11-06
+
+### Added
+- Add the `StoryFrame.mobileStageMinHeight` option for products whose mobile scene, controls and three required callouts need a taller stage. The default remains 300 px and the panel stays below the stage. the product template's story showed the need when the 390 × 844 gate could not keep its plot labels, scrub control and callouts visible together.
+
 ## [0.22.000] - 2026-11-06
 
 ### Added

package/VERSION

@@ -1 +1 @@
-0.22.000
+0.23.000

package/dist/index.d.ts

@@ -1417,13 +1417,14 @@ interface StoryFrameProps {
         exit: BiText;
     }>;
     autoAdvanceMs?: number;
+    mobileStageMinHeight?: number;
     className?: string;
 }
 /**
  * A guided 3 to 6 step story over the same state as a product App. The product owns each step's real view and panel;
  * the shell owns the stepper, deep links, keyboard behavior, pause-on-interaction, and semantic structure (ADR-0082).
  */
-declare function StoryFrame({ steps, activeId, onStepChange, onExit, labels, autoAdvanceMs, className }: StoryFrameProps): react.JSX.Element | null;
+declare function StoryFrame({ steps, activeId, onStepChange, onExit, labels, autoAdvanceMs, mobileStageMinHeight, className }: StoryFrameProps): react.JSX.Element | null;
 
 type CalloutState = 'alarm' | 'warning' | 'normal' | 'selected' | 'inactive';
 interface SceneCalloutDef {

package/dist/index.js

@@ -4160,7 +4160,10 @@ var DEFAULT_LABELS = {
   pause: { en: "Pause story", es: "Pausar historia" },
   exit: { en: "Return to exploration", es: "Volver a explorar" }
 };
-function StoryFrame({ steps, activeId, onStepChange, onExit, labels = {}, autoAdvanceMs = 5e3, className }) {
+function StoryFrame({ steps, activeId, onStepChange, onExit, labels = {}, autoAdvanceMs = 5e3, mobileStageMinHeight = 300, className }) {
+  if (!Number.isInteger(mobileStageMinHeight) || mobileStageMinHeight < 300 || mobileStageMinHeight > 900) {
+    throw new RangeError("StoryFrame mobileStageMinHeight must be an integer from 300 through 900 CSS pixels");
+  }
   const lang = useShellLang();
   const [playing, setPlaying] = useState(false);
   const activeIndex = Math.max(0, steps.findIndex((step) => step.id === activeId));
@@ -4204,7 +4207,7 @@ function StoryFrame({ steps, activeId, onStepChange, onExit, labels = {}, autoAd
     }
   }
   if (!active) return null;
-  return /* @__PURE__ */ jsxs("section", { className: ["caos-story", "page-body", "wide", className].filter(Boolean).join(" "), "data-story": "", "data-story-step": active.id, "data-step-accent": active.accent, "aria-label": pick(copy.steps, lang), tabIndex: 0, onKeyDown, children: [
+  return /* @__PURE__ */ jsxs("section", { className: ["caos-story", "page-body", "wide", className].filter(Boolean).join(" "), style: { "--caos-story-stage-minimum": `${mobileStageMinHeight}px` }, "data-story": "", "data-story-step": active.id, "data-step-accent": active.accent, "aria-label": pick(copy.steps, lang), tabIndex: 0, onKeyDown, children: [
     /* @__PURE__ */ jsxs("header", { className: "caos-story-header", children: [
       /* @__PURE__ */ jsxs("div", { className: "caos-story-heading", children: [
         /* @__PURE__ */ jsxs("span", { className: "caos-story-verb", children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fasl-work/caos-app-shell",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "Shared web-app shell, workbench primitives, content primitives, design system and measured gate for the CAOS / Faena public apps (ADR-0016, ADR-0017, ADR-0071).",
   "license": "MIT",
   "author": "Felipe Santibáñez-Leal",

package/styles.css

@@ -1044,9 +1044,9 @@ svg.lucide { flex: none; }
   .caos-story button { min-height: 34px; padding: .3rem .5rem; font-size: .78rem; white-space: nowrap; }
   .caos-story-stepper { grid-auto-columns: minmax(90px, 1fr); grid-auto-flow: column; grid-template-columns: unset; overflow-x: auto; }
   .caos-story-step-headline { display: none; }
-  .caos-story-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(46dvh, 1fr) auto; }
+  .caos-story-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(max(46dvh, var(--caos-story-stage-minimum, 300px)), auto) auto; }
   .caos-story-panel { max-height: 30dvh; }
-  .caos-story-stage { min-height: 300px; }
+  .caos-story-stage { min-height: max(300px, var(--caos-story-stage-minimum, 300px)); }
   .caos-scene-callout { padding: .25rem .35rem; }
 }
 @media (prefers-reduced-motion: reduce) {