@elaraai/east-ui-components 1.0.6 → 1.0.8

package/dist/index.js

@@ -7,7 +7,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { memo as memo$2, useMemo, useId, useCallback, useState, useEffect, createContext, useContext, useSyncExternalStore, useRef, useLayoutEffect, useReducer, Component, Fragment as Fragment$1 } from "react";
 import { match, equalFor, BlobType, encodeBeast2For, decodeBeast2For, none, some, variant, printFor, compareFor } from "@elaraai/east";
-import { Text as Text$2, Code as Code$1, Heading as Heading$1, Link as Link$1, Highlight as Highlight$1, Mark as Mark$1, List as List$1, CodeBlock, Numeric, Note, Button as Button$1, IconButton as IconButton$1, CopyButton, CloseButton as CloseButton$1, Toggle, ButtonGroup, Sparkline, State, Slice, sliceMatches, sliceSeries, sliceBreakdown, sliceFields, sliceDimensions, SliceApplyImpl, Select as Select$1, Input as Input$1, TagsInput as TagsInput$1, Chart, Box as Box$1, Flex as Flex$1, Stack as Stack$1, Separator as Separator$1, Grid as Grid$1, Splitter as Splitter$1, Sticky, ScrollArea as ScrollArea$1, ChipRail, Accordion as Accordion$1, Carousel as Carousel$1, Tabs as Tabs$1, SegmentGroup as SegmentGroup$1, Collapsible as Collapsible$1, Disclosure, OptionList, DataList as DataList$1, Matrix, Pagination as Pagination$1, Table as Table$1, Icon, TreeView as TreeView$1, Gantt, Planner, Breadcrumb as Breadcrumb$1, NavList, Badge as Badge$1, Tag as Tag$1, Avatar as Avatar$1, Stat as Stat$1, MetricChip, EditableChip, Kbd as Kbd$1, Meter, SegmentedMeter, BarStrip, Trace, Library as Library$1, Roster, Calendar, Schematic, Blend, AvatarGroup as AvatarGroup$1, Checkbox as Checkbox$1, RadioGroup as RadioGroup$1, RadioCardGroup, TimeRangeInput, DateRangeInput, Switch as Switch$1, Combobox as Combobox$1, Slider as Slider$1, Field as Field$1, Textarea as Textarea$1, FileUpload as FileUpload$1, Progress as Progress$1, EmptyState as EmptyState$1, Skeleton as Skeleton$1, Status, Banner, Card as Card$1, Tooltip as Tooltip$2, Menu as Menu$1, Popover as Popover$1, HoverCard as HoverCard$1, Dialog as Dialog$1, Drawer as Drawer$1, ActionBar as ActionBar$1, ToggleTip, CommandPalette, dialog_open, drawer_open, Hotkey, UIComponentType, Clipboard as Clipboard$1, Download, Share } from "@elaraai/east-ui/internal";
+import { Text as Text$2, Code as Code$1, Heading as Heading$1, Link as Link$1, Highlight as Highlight$1, Mark as Mark$1, List as List$1, CodeBlock, Numeric, Note, Button as Button$1, IconButton as IconButton$1, CopyButton, CloseButton as CloseButton$1, Toggle, ButtonGroup, Sparkline, State, Slice, sliceMatches, sliceSeries, sliceBreakdown, sliceFields, sliceDimensions, SliceApplyImpl, Select as Select$1, Input as Input$1, TagsInput as TagsInput$1, Chart, Box as Box$1, Flex as Flex$1, Stack as Stack$1, Separator as Separator$1, Grid as Grid$1, Splitter as Splitter$1, Sticky, ScrollArea as ScrollArea$1, ChipRail, Accordion as Accordion$1, Carousel as Carousel$1, Tabs as Tabs$1, Story, SegmentGroup as SegmentGroup$1, Collapsible as Collapsible$1, Disclosure, OptionList, DataList as DataList$1, Matrix, Pagination as Pagination$1, Table as Table$1, Icon, TreeView as TreeView$1, Gantt, Planner, Breadcrumb as Breadcrumb$1, NavList, Badge as Badge$1, Tag as Tag$1, Avatar as Avatar$1, Stat as Stat$1, MetricChip, EditableChip, Kbd as Kbd$1, Meter, SegmentedMeter, BarStrip, Trace, Library as Library$1, Roster, Calendar, Schematic, Blend, AvatarGroup as AvatarGroup$1, Checkbox as Checkbox$1, RadioGroup as RadioGroup$1, RadioCardGroup, TimeRangeInput, DateRangeInput, Switch as Switch$1, Combobox as Combobox$1, Slider as Slider$1, Field as Field$1, Textarea as Textarea$1, FileUpload as FileUpload$1, Progress as Progress$1, EmptyState as EmptyState$1, Skeleton as Skeleton$1, Status, Banner, Card as Card$1, Tooltip as Tooltip$2, Menu as Menu$1, Popover as Popover$1, HoverCard as HoverCard$1, Dialog as Dialog$1, Drawer as Drawer$1, ActionBar as ActionBar$1, ToggleTip, CommandPalette, dialog_open, drawer_open, Hotkey, UIComponentType, Clipboard as Clipboard$1, Download, Share } from "@elaraai/east-ui/internal";
 import { SliceApplyImpl as SliceApplyImpl2 } from "@elaraai/east-ui/internal";
 import { formatDateTime, tokenizeDateTimeFormat, decodeBeast2For as decodeBeast2For$1, IRType, compileFunctionIR } from "@elaraai/east/internal";
 import { registerReactiveTracker, registerPlatformImplementation, subscribeTrackers, getTrackersVersion, getReactiveTrackers, getRegisteredPlatformImplementations } from "./platform.js";
@@ -47422,8 +47422,8 @@ function Plot({ node: node2, style, brush, onBrushEnd, brushKey }) {
       const maxSize = sizeVals.length ? Math.max(...sizeVals) : 0;
       const sizeScale = maxSize > 0 ? createSqrtScale({ domain: [0, maxSize], range: [0, 16] }) : void 0;
       const sizeR = sizeScale ? (v2) => Math.max(3, sizeScale(v2) ?? 3) : void 0;
-      const render3 = (w2) => {
-        const svgH = f2.height - legendH;
+      const render3 = (w2, hOverride) => {
+        const svgH = (hOverride ?? f2.height) - legendH;
         const innerW = Math.max(0, w2 - margin.left - margin.right);
         const innerH = Math.max(0, svgH - margin.top - margin.bottom);
         const mkY = (dom2, dMin, dMax) => dom2 ? createLinearScale({ domain: dom2, range: [innerH, 0] }) : createLinearScale({ domain: [Math.min(0, dMin), dMax || 1], range: [innerH, 0], nice: true });
@@ -47529,6 +47529,9 @@ function Plot({ node: node2, style, brush, onBrushEnd, brushKey }) {
           ] }) })
         ] });
       };
+      if (f2.height <= 0) {
+        return /* @__PURE__ */ jsx(ParentSize, { children: ({ width, height }) => render3(width || 320, height || 240) });
+      }
       return explicitW !== void 0 ? render3(explicitW) : /* @__PURE__ */ jsx(ParentSize, { children: ({ width }) => render3(width || 320) });
     }
   }, null);
@@ -49652,6 +49655,596 @@ const EastChakraTabs = memo$2(function EastChakraTabs2({ value, storageKey }) {
     }
   );
 }, (prev, next) => tabsEqual(prev.value, next.value) && prev.storageKey === next.storageKey);
+const storyEqual = equalFor(Story.Types.Story);
+const storyStepEqual = equalFor(Story.Types.Step);
+const storyProgressEqual = equalFor(Story.Types.Progress);
+function isStaticForScrollport(value) {
+  return getSomeorUndefined(value.activeStep) !== void 0;
+}
+const TRIGGER_LINE = 0.38;
+const NAV_OFFSET = 0.3;
+const STACK_BREAKPOINT = 720;
+const STEP_RUNWAY_VH = { compact: 36, default: 52, long: 72 };
+const DEFAULT_STAGE_HEIGHT = "420px";
+const STACKED_STAGE_CAP = "280px";
+let warnedNonStepChild = false;
+function extractSteps(children) {
+  const steps = [];
+  for (const child of children) {
+    const tagged = child;
+    if (tagged.type === "StoryStep") {
+      const step = tagged.value;
+      steps.push({
+        id: step.id,
+        eyebrow: getSomeorUndefined(step.eyebrow),
+        title: getSomeorUndefined(step.title),
+        stage: getSomeorUndefined(step.stage),
+        body: step.body
+      });
+    } else if (!warnedNonStepChild) {
+      warnedNonStepChild = true;
+      console.warn(`Story: skipping non-StoryStep child (got '${tagged.type}'). Story children should be Story.Step components.`);
+    }
+  }
+  return steps;
+}
+function keyframeOwner(steps, active) {
+  var _a2;
+  for (let i2 = Math.min(active, steps.length - 1); i2 >= 0; i2--) {
+    if (((_a2 = steps[i2]) == null ? void 0 : _a2.stage) !== void 0) return i2;
+  }
+  return -1;
+}
+function getScrollParent(el) {
+  let p2 = (el == null ? void 0 : el.parentElement) ?? null;
+  while (p2) {
+    const oy = getComputedStyle(p2).overflowY;
+    if (oy === "auto" || oy === "scroll") return p2;
+    p2 = p2.parentElement;
+  }
+  return null;
+}
+function useActiveBindingValue(binding) {
+  const subscribe2 = useCallback((cb) => {
+    if (!binding) return () => {
+    };
+    return getStore().subscribe(cb);
+  }, [binding]);
+  const getSnapshot2 = useCallback(() => binding ? Number(binding.read()) : -1, [binding]);
+  const snapshot = useSyncExternalStore(subscribe2, getSnapshot2, getSnapshot2);
+  return binding ? snapshot : void 0;
+}
+const StoryChromeRow = memo$2(function StoryChromeRow2({ title, count: count2, active, sticky, onNavigate }) {
+  const meterMode = count2 > 12;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      display: "flex",
+      alignItems: "center",
+      gap: "3",
+      paddingX: "4",
+      paddingY: "2",
+      borderBottomWidth: "1px",
+      borderColor: "border.subtle",
+      background: "bg.surface",
+      position: sticky ? "sticky" : "relative",
+      top: sticky ? "0" : void 0,
+      zIndex: sticky ? 3 : void 0,
+      "data-scope": "story-progress",
+      children: [
+        title !== void 0 && /* @__PURE__ */ jsx(
+          Box,
+          {
+            fontFamily: "mono",
+            fontSize: "9.5px",
+            fontWeight: "600",
+            letterSpacing: "0.18em",
+            textTransform: "uppercase",
+            color: "fg.muted",
+            children: title
+          }
+        ),
+        meterMode ? /* @__PURE__ */ jsx(Box, { width: "64px", height: "4px", borderRadius: "full", background: "border.strong", position: "relative", overflow: "hidden", children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            position: "absolute",
+            insetY: "0",
+            left: "0",
+            width: `${count2 > 0 ? (active + 1) / count2 * 100 : 0}%`,
+            background: "colorPalette.solid",
+            colorPalette: "brand",
+            transition: "width 200ms ease-out"
+          }
+        ) }) : /* @__PURE__ */ jsx(Box, { display: "flex", gap: "1.5", alignItems: "center", children: Array.from({ length: count2 }, (_2, i2) => /* @__PURE__ */ jsx(
+          Box,
+          {
+            as: "button",
+            "aria-label": `Go to step ${i2 + 1}`,
+            width: "6px",
+            height: "6px",
+            borderRadius: "full",
+            cursor: onNavigate ? "pointer" : "default",
+            background: i2 === active ? "colorPalette.solid" : "border.strong",
+            opacity: i2 < active ? 0.5 : 1,
+            colorPalette: "brand",
+            transition: "background 200ms ease-out",
+            onClick: onNavigate ? () => onNavigate(i2) : void 0
+          },
+          i2
+        )) }),
+        /* @__PURE__ */ jsxs(Box, { marginLeft: "auto", fontFamily: "mono", fontSize: "11px", color: "fg.subtle", fontVariantNumeric: "tabular-nums", children: [
+          /* @__PURE__ */ jsx(Box, { as: "span", color: "fg", fontWeight: "600", children: active + 1 }),
+          ` / ${count2}`
+        ] }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            as: "button",
+            "aria-label": "Previous step",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "22px",
+            height: "22px",
+            borderWidth: "1px",
+            borderColor: "border.strong",
+            borderRadius: "sm",
+            background: "bg.surface",
+            color: "fg.muted",
+            fontSize: "11px",
+            cursor: "pointer",
+            _hover: { borderColor: "fg.muted", color: "fg" },
+            onClick: onNavigate ? () => onNavigate(active - 1) : void 0,
+            children: "↑"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            as: "button",
+            "aria-label": "Next step",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "22px",
+            height: "22px",
+            borderWidth: "1px",
+            borderColor: "border.strong",
+            borderRadius: "sm",
+            background: "bg.surface",
+            color: "fg.muted",
+            fontSize: "11px",
+            cursor: "pointer",
+            _hover: { borderColor: "fg.muted", color: "fg" },
+            onClick: onNavigate ? () => onNavigate(active + 1) : void 0,
+            children: "↓"
+          }
+        )
+      ]
+    }
+  );
+});
+const StoryStepBlock = memo$2(function StoryStepBlock2({ step, index: index2, total, state, minHeight, storageKey, onActivate }) {
+  const pad2 = (n2) => String(n2).padStart(2, "0");
+  const eyebrowText = step.eyebrow !== void 0 ? `${pad2(index2 + 1)} / ${pad2(total)} · ${step.eyebrow}` : `${pad2(index2 + 1)} / ${pad2(total)}`;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      position: "relative",
+      paddingY: "4",
+      paddingLeft: "26px",
+      display: "flex",
+      flexDirection: "column",
+      minHeight,
+      boxSizing: "border-box",
+      opacity: state === "active" ? 1 : 0.45,
+      transition: "opacity 200ms ease-out",
+      cursor: onActivate && state !== "active" ? "pointer" : void 0,
+      onClick: onActivate && state !== "active" ? () => onActivate(index2) : void 0,
+      "data-story-step": step.id,
+      "data-state": state,
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            position: "absolute",
+            left: "4px",
+            top: index2 === 0 ? "22px" : "0",
+            bottom: index2 === total - 1 ? void 0 : "0",
+            height: index2 === total - 1 ? "22px" : void 0,
+            width: "2px",
+            background: "border.subtle"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            position: "absolute",
+            left: "0",
+            top: "18px",
+            width: "10px",
+            height: "10px",
+            borderRadius: "full",
+            boxSizing: "border-box",
+            borderWidth: "2px",
+            colorPalette: "brand",
+            borderColor: state === "upcoming" ? "border.strong" : "colorPalette.solid",
+            background: state === "active" ? "colorPalette.solid" : "bg.surface",
+            transition: "all 200ms ease-out"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            fontFamily: "mono",
+            fontSize: "9.5px",
+            fontWeight: "600",
+            letterSpacing: "0.18em",
+            textTransform: "uppercase",
+            colorPalette: "brand",
+            color: state === "active" ? "colorPalette.fg" : "fg.subtle",
+            marginBottom: "1.5",
+            children: eyebrowText
+          }
+        ),
+        step.title !== void 0 && /* @__PURE__ */ jsx(
+          Box,
+          {
+            fontSize: "17px",
+            fontWeight: "600",
+            letterSpacing: "-0.01em",
+            lineHeight: "1.3",
+            color: "fg",
+            marginBottom: "2",
+            children: step.title
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { fontSize: "13px", lineHeight: "1.55", color: "fg.muted", maxWidth: "46ch", flex: "1 1 auto", minHeight: "0", children: step.body.map((child, i2) => /* @__PURE__ */ jsx(EastChakraComponent, { value: child, storageKey: `${storageKey}.body.${i2}` }, i2)) })
+      ]
+    }
+  );
+}, (prev, next) => prev.index === next.index && prev.total === next.total && prev.state === next.state && prev.minHeight === next.minHeight && prev.storageKey === next.storageKey && prev.step === next.step);
+const EastChakraStory = memo$2(function EastChakraStory2({ value, storageKey }) {
+  var _a2, _b, _c;
+  const steps = useMemo(() => extractSteps(value.steps), [value.steps]);
+  const total = steps.length;
+  const style = getSomeorUndefined(value.style);
+  const layoutPref = (style ? (_a2 = getSomeorUndefined(style.layout)) == null ? void 0 : _a2.type : void 0) ?? "rail-left";
+  const stageHeight = (style ? getSomeorUndefined(style.stageHeight) : void 0) ?? DEFAULT_STAGE_HEIGHT;
+  const stepLength = (style ? (_b = getSomeorUndefined(style.stepLength)) == null ? void 0 : _b.type : void 0) ?? "default";
+  const runwayVh = STEP_RUNWAY_VH[stepLength] ?? STEP_RUNWAY_VH["default"];
+  const scrollportHeight = style ? getSomeorUndefined(style.height) : void 0;
+  const ownScrollport = scrollportHeight !== void 0 && !isStaticForScrollport(value);
+  const title = getSomeorUndefined(value.title);
+  const staticActiveId = getSomeorUndefined(value.activeStep);
+  const isStatic = staticActiveId !== void 0;
+  const activeBinding = useMemo(() => getSomeorUndefined(value.active), [value.active]);
+  const progressBinding = useMemo(() => getSomeorUndefined(value.progress), [value.progress]);
+  const onStepEnterFn = useMemo(() => getSomeorUndefined(value.onStepEnter), [value.onStepEnter]);
+  const onStepExitFn = useMemo(() => getSomeorUndefined(value.onStepExit), [value.onStepExit]);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const fadeMs = prefersReducedMotion ? 120 : 200;
+  const rootRef = useRef(null);
+  const railRef = useRef(null);
+  const layoutRef = useRef("rail-left");
+  const occlusionBottom = useCallback((viewTop) => {
+    const root2 = rootRef.current;
+    let bottom = viewTop;
+    if (!root2) return bottom;
+    const chrome = root2.querySelector('[data-scope="story-progress"]');
+    if (chrome) bottom = Math.max(bottom, chrome.getBoundingClientRect().bottom);
+    if (layoutRef.current === "stacked") {
+      const stage2 = root2.querySelector('[data-scope="story-stage"]');
+      if (stage2) bottom = Math.max(bottom, stage2.getBoundingClientRect().bottom);
+    }
+    return bottom;
+  }, []);
+  const clamp2 = useCallback((i2) => Math.max(0, Math.min(total - 1, i2)), [total]);
+  const initialActive = isStatic ? Math.max(0, steps.findIndex((s2) => s2.id === staticActiveId)) : clamp2(activeBinding ? Number(activeBinding.read()) : 0);
+  const [active, setActive] = useState(initialActive);
+  const activeRef = useRef(active);
+  activeRef.current = active;
+  useEffect(() => {
+    if (isStatic) {
+      setActive(Math.max(0, steps.findIndex((s2) => s2.id === staticActiveId)));
+    } else {
+      setActive((prev) => Math.max(0, Math.min(total - 1, prev)));
+    }
+  }, [value, total]);
+  const applyActive = useCallback((next) => {
+    var _a3, _b2;
+    const clamped = Math.max(0, Math.min(total - 1, next));
+    const prev = activeRef.current;
+    if (clamped === prev) return;
+    setActive(clamped);
+    const prevId = (_a3 = steps[prev]) == null ? void 0 : _a3.id;
+    const nextId = (_b2 = steps[clamped]) == null ? void 0 : _b2.id;
+    queueMicrotask(() => {
+      if (activeBinding) activeBinding.write(BigInt(clamped));
+      if (onStepExitFn && prevId !== void 0) onStepExitFn(prevId);
+      if (onStepEnterFn && nextId !== void 0) onStepEnterFn(nextId);
+    });
+  }, [total, steps, activeBinding, onStepEnterFn, onStepExitFn]);
+  const resolveScroller = useCallback(() => {
+    if (ownScrollport) return rootRef.current;
+    return getScrollParent(rootRef.current);
+  }, [ownScrollport]);
+  const navigateTo = useCallback((index2) => {
+    var _a3, _b2;
+    const clamped = Math.max(0, Math.min(total - 1, index2));
+    applyActive(clamped);
+    const stepEl = (_b2 = railRef.current) == null ? void 0 : _b2.querySelector(`[data-story-step="${CSS.escape(((_a3 = steps[clamped]) == null ? void 0 : _a3.id) ?? "")}"]`);
+    if (!stepEl) return;
+    const behavior = prefersReducedMotion ? "auto" : "smooth";
+    const scroller = resolveScroller();
+    const rect = stepEl.getBoundingClientRect();
+    const viewTop = scroller ? scroller.getBoundingClientRect().top : 0;
+    const viewBottom = viewTop + (scroller ? scroller.clientHeight : window.innerHeight);
+    const occ = Math.min(occlusionBottom(viewTop), viewBottom);
+    const navLine = layoutRef.current === "stacked" ? occ + (viewBottom - occ) * NAV_OFFSET : Math.max(occ, viewTop + (viewBottom - viewTop) * NAV_OFFSET);
+    if (scroller) {
+      scroller.scrollBy({ top: rect.top - navLine, behavior });
+    } else {
+      window.scrollBy({ top: rect.top - navLine, behavior });
+    }
+  }, [total, steps, applyActive, prefersReducedMotion, resolveScroller, occlusionBottom]);
+  const bindingValue = useActiveBindingValue(isStatic ? void 0 : activeBinding);
+  useEffect(() => {
+    if (bindingValue === void 0) return;
+    if (bindingValue !== activeRef.current) {
+      navigateTo(bindingValue);
+    }
+  }, [bindingValue]);
+  useEffect(() => {
+    if (isStatic || total === 0) return;
+    const rail2 = railRef.current;
+    if (!rail2) return;
+    let raf = 0;
+    const measure = () => {
+      raf = 0;
+      const scroller2 = resolveScroller();
+      const viewTop = scroller2 ? scroller2.getBoundingClientRect().top : 0;
+      const viewHeight = scroller2 ? scroller2.clientHeight : window.innerHeight;
+      const viewBottom = viewTop + viewHeight;
+      const occ = Math.min(occlusionBottom(viewTop), viewBottom);
+      const line2 = layoutRef.current === "stacked" ? occ + (viewBottom - occ) * TRIGGER_LINE : Math.max(occ, viewTop + viewHeight * TRIGGER_LINE);
+      const blocks = rail2.querySelectorAll("[data-story-step]");
+      let current = 0;
+      let progress = 0;
+      blocks.forEach((el, i2) => {
+        const rect = el.getBoundingClientRect();
+        if (rect.top <= line2) {
+          current = i2;
+          progress = rect.height > 0 ? (line2 - rect.top) / rect.height : 0;
+        }
+      });
+      applyActive(current);
+      if (progressBinding) {
+        const p2 = Math.max(0, Math.min(1, progress));
+        queueMicrotask(() => progressBinding.write(p2));
+      }
+    };
+    const onScroll = () => {
+      if (raf === 0) raf = requestAnimationFrame(measure);
+    };
+    const scroller = resolveScroller();
+    const target = scroller ?? window;
+    target.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll, { passive: true });
+    measure();
+    return () => {
+      target.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+      if (raf !== 0) cancelAnimationFrame(raf);
+    };
+  }, [isStatic, total, applyActive, progressBinding, resolveScroller]);
+  const [narrow, setNarrow] = useState(false);
+  const [portHeight, setPortHeight] = useState(0);
+  useEffect(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(([entry]) => {
+      if (entry) {
+        setNarrow(entry.contentRect.width < STACK_BREAKPOINT);
+        setPortHeight(entry.contentRect.height);
+      }
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const layout = narrow ? "stacked" : layoutPref;
+  layoutRef.current = layout;
+  const effectiveStageHeight = layout === "stacked" ? `min(${stageHeight}, ${STACKED_STAGE_CAP})` : stageHeight;
+  const [chromePx, setChromePx] = useState(0);
+  const [stickyPx, setStickyPx] = useState(0);
+  useEffect(() => {
+    const root2 = rootRef.current;
+    if (!root2 || layout !== "stacked") {
+      setChromePx(0);
+      setStickyPx(0);
+      return;
+    }
+    const stage2 = root2.querySelector('[data-scope="story-stage"]');
+    const chrome = root2.querySelector('[data-scope="story-progress"]');
+    const update = () => {
+      const ch = chrome ? chrome.getBoundingClientRect().height : 0;
+      const st = stage2 ? stage2.getBoundingClientRect().height : 0;
+      setChromePx(Math.max(0, Math.floor(ch) - 1));
+      setStickyPx(Math.round(ch + st));
+    };
+    const ro = new ResizeObserver(update);
+    if (stage2) ro.observe(stage2);
+    if (chrome) ro.observe(chrome);
+    update();
+    return () => ro.disconnect();
+  }, [layout, total]);
+  const onKeyDown = useCallback((e3) => {
+    if (isStatic) return;
+    switch (e3.key) {
+      case "ArrowDown":
+      case "j":
+        navigateTo(activeRef.current + 1);
+        e3.preventDefault();
+        break;
+      case "ArrowUp":
+      case "k":
+        navigateTo(activeRef.current - 1);
+        e3.preventDefault();
+        break;
+      case "Home":
+        navigateTo(0);
+        e3.preventDefault();
+        break;
+      case "End":
+        navigateTo(total - 1);
+        e3.preventDefault();
+        break;
+    }
+  }, [isStatic, navigateTo, total]);
+  const kfOwner = keyframeOwner(steps, active);
+  const chromeHeight = title !== void 0 ? 41 : 0;
+  const stageTop = 16 + chromeHeight;
+  const stage = (
+    // In stacked mode the prose scrolls UNDERNEATH the sticky stage, so
+    // the slot must be opaque (with a hairline rule); in rail layouts it
+    // stays unchromed per the spec — keyframes bring their own framing.
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        position: "sticky",
+        top: layout === "stacked" ? `${title !== void 0 ? chromePx : 0}px` : `${stageTop}px`,
+        paddingBottom: "4",
+        "data-scope": "story-stage",
+        background: layout === "stacked" ? "bg.surface" : void 0,
+        borderBottomWidth: layout === "stacked" ? "1px" : void 0,
+        borderColor: layout === "stacked" ? "border.subtle" : void 0,
+        zIndex: layout === "stacked" ? 2 : void 0,
+        children: /* @__PURE__ */ jsx(Box, { position: "relative", height: effectiveStageHeight, children: steps.map((step, i2) => step.stage !== void 0 && /* @__PURE__ */ jsx(
+          Box,
+          {
+            position: "absolute",
+            inset: "0",
+            opacity: i2 === kfOwner ? 1 : 0,
+            pointerEvents: i2 === kfOwner ? "auto" : "none",
+            transition: `opacity ${fadeMs}ms ease-out`,
+            "data-story-keyframe": step.id,
+            "data-active": i2 === kfOwner ? "true" : "false",
+            children: /* @__PURE__ */ jsx(EastChakraComponent, { value: step.stage, storageKey: `${storageKey}.stage.${step.id}` })
+          },
+          step.id
+        )) })
+      }
+    )
+  );
+  const rail = /* @__PURE__ */ jsx(Box, { ref: railRef, paddingTop: "4", "data-scope": "story-rail", children: steps.map((step, i2) => /* @__PURE__ */ jsx(
+    StoryStepBlock,
+    {
+      step,
+      index: i2,
+      total,
+      state: i2 === active ? "active" : i2 < active ? "visited" : "upcoming",
+      minHeight: isStatic ? void 0 : ownScrollport ? i2 === total - 1 ? `${Math.max(120, Math.round(
+        (1 - TRIGGER_LINE) * (layout === "stacked" ? Math.max(0, portHeight - stickyPx) : portHeight) + 16
+      ))}px` : `${Math.max(120, Math.round(
+        (layout === "stacked" ? Math.max(0, portHeight - stickyPx) : portHeight - chromeHeight) * (runwayVh / 52)
+      ))}px` : `${runwayVh + (i2 === total - 1 ? 20 : 0)}vh`,
+      storageKey: `${storageKey}.step.${step.id}`,
+      onActivate: isStatic ? void 0 : navigateTo
+    },
+    step.id
+  )) });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ref: rootRef,
+      position: "relative",
+      tabIndex: 0,
+      outline: "none",
+      onKeyDown,
+      "data-scope": "story",
+      "data-active-step": (_c = steps[active]) == null ? void 0 : _c.id,
+      height: ownScrollport ? scrollportHeight : void 0,
+      overflowY: ownScrollport ? "auto" : void 0,
+      overflowX: ownScrollport ? "hidden" : void 0,
+      background: ownScrollport ? "bg.surface" : void 0,
+      children: [
+        title !== void 0 && /* @__PURE__ */ jsx(
+          StoryChromeRow,
+          {
+            title,
+            count: total,
+            active,
+            sticky: !isStatic,
+            onNavigate: isStatic ? void 0 : navigateTo
+          }
+        ),
+        layout === "stacked" ? /* @__PURE__ */ jsxs(Box, { children: [
+          stage,
+          rail
+        ] }) : /* @__PURE__ */ jsx(
+          Box,
+          {
+            display: "grid",
+            gridTemplateColumns: layout === "rail-right" ? "minmax(0, 1fr) clamp(280px, 34%, 380px)" : "clamp(280px, 34%, 380px) minmax(0, 1fr)",
+            gap: "28px",
+            children: layout === "rail-right" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Box, { minWidth: "0", children: stage }),
+              rail
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              rail,
+              /* @__PURE__ */ jsx(Box, { minWidth: "0", children: stage })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}, (prev, next) => storyEqual(prev.value, next.value) && prev.storageKey === next.storageKey);
+const EastChakraStoryStep = memo$2(function EastChakraStoryStep2({ value, storageKey }) {
+  const step = useMemo(() => ({
+    id: value.id,
+    eyebrow: getSomeorUndefined(value.eyebrow),
+    title: getSomeorUndefined(value.title),
+    stage: getSomeorUndefined(value.stage),
+    body: value.body
+  }), [value]);
+  return /* @__PURE__ */ jsx(
+    StoryStepBlock,
+    {
+      step,
+      index: 0,
+      total: 1,
+      state: "active",
+      minHeight: void 0,
+      storageKey,
+      onActivate: void 0
+    }
+  );
+}, (prev, next) => storyStepEqual(prev.value, next.value) && prev.storageKey === next.storageKey);
+const EastChakraStoryProgress = memo$2(function EastChakraStoryProgress2({ value }) {
+  const count2 = Number(value.count);
+  const binding = useMemo(() => getSomeorUndefined(value.active), [value.active]);
+  const bound = useActiveBindingValue(binding);
+  const [internal, setInternal] = useState(0);
+  const active = Math.max(0, Math.min(count2 - 1, bound ?? internal));
+  const onNavigate = useCallback((index2) => {
+    const clamped = Math.max(0, Math.min(count2 - 1, index2));
+    setInternal(clamped);
+    if (binding) {
+      queueMicrotask(() => binding.write(BigInt(clamped)));
+    }
+  }, [count2, binding]);
+  return /* @__PURE__ */ jsx(
+    StoryChromeRow,
+    {
+      title: getSomeorUndefined(value.title),
+      count: count2,
+      active,
+      sticky: false,
+      onNavigate
+    }
+  );
+}, (prev, next) => storyProgressEqual(prev.value, next.value) && prev.storageKey === next.storageKey);
 const segmentGroupEqual = equalFor(SegmentGroup$1.Types.SegmentGroup);
 function toChakraSegmentGroup(value) {
   var _a2, _b, _c;
@@ -64166,6 +64759,9 @@ const EastChakraComponent = memo$2(function EastChakraComponent2({ value, storag
       Accordion: (v2) => /* @__PURE__ */ jsx(EastChakraAccordion, { value: v2, storageKey: childKey(storageKey, "Accordion") }),
       Carousel: (v2) => /* @__PURE__ */ jsx(EastChakraCarousel, { value: v2, storageKey: childKey(storageKey, "Carousel") }),
       Tabs: (v2) => /* @__PURE__ */ jsx(EastChakraTabs, { value: v2, storageKey: childKey(storageKey, "Tabs") }),
+      Story: (v2) => /* @__PURE__ */ jsx(EastChakraStory, { value: v2, storageKey: childKey(storageKey, "Story") }),
+      StoryStep: (v2) => /* @__PURE__ */ jsx(EastChakraStoryStep, { value: v2, storageKey: childKey(storageKey, "StoryStep") }),
+      StoryProgress: (v2) => /* @__PURE__ */ jsx(EastChakraStoryProgress, { value: v2, storageKey: childKey(storageKey, "StoryProgress") }),
       SegmentGroup: (v2) => /* @__PURE__ */ jsx(EastChakraSegmentGroup, { value: v2, storageKey: childKey(storageKey, "SegmentGroup") }),
       Collapsible: (v2) => /* @__PURE__ */ jsx(EastChakraCollapsible, { value: v2, storageKey: childKey(storageKey, "Collapsible") }),
       Disclosure: (v2) => /* @__PURE__ */ jsx(EastChakraDisclosure, { value: v2, storageKey: childKey(storageKey, "Disclosure") }),
@@ -77244,6 +77840,9 @@ export {
   EastChakraStack,
   EastChakraStat,
   EastChakraStatus,
+  EastChakraStory,
+  EastChakraStoryProgress,
+  EastChakraStoryStep,
   EastChakraStringInput,
   EastChakraSwitch,
   EastChakraTable,