@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-NHSLM6SE.js

@@ -0,0 +1,523 @@
+import { isConnectorTraversed, resolveStepState, NODE_STATE_ICON } from './chunk-YLLCXTMC.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Animated, AccessibilityInfo, Alert, BackHandler, View, Pressable, Text } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  back: "Back",
+  next: "Next",
+  finish: "Finish",
+  stepOf: (current, total, label) => `Step ${current} of ${total}${label ? `: ${label}` : ""}`,
+  completedStep: (label, step, hasErrors) => `${label}, completed${hasErrors ? ", has errors" : ""}. Go to step ${step}`,
+  hasErrors: ", has errors",
+  cancel: "Cancel",
+  close: "Close",
+  count: (n, c) => `${n} of ${c}`,
+  discardTitle: "Discard changes?",
+  keepEditing: "Keep editing",
+  discard: "Discard"
+};
+var DOT_SIZE = { sm: 24, md: 30, lg: 36 };
+function clamp(n, lo, hi) {
+  return Math.min(hi, Math.max(lo, n));
+}
+function useDotForeground(done, active) {
+  const theme = useLoamTheme("wizard");
+  if (done) return theme.color.goodInk;
+  if (active) return theme.color.accentOnSoft;
+  return theme.color.text3;
+}
+function StepDot({
+  index,
+  current,
+  label,
+  hasError,
+  onPress,
+  labels,
+  dotSize,
+  indicator,
+  orientation,
+  doneTone,
+  errorStyle
+}) {
+  const stepState = resolveStepState(index, current);
+  const done = stepState === "done";
+  const active = stepState === "working";
+  const { styles } = useStyles(sheet, { state: done ? "done" : active ? "active" : "upcoming" });
+  const theme = useLoamTheme("wizard");
+  const errorNode = hasError && errorStyle === "node";
+  const accentDone = done && doneTone === "accent" && !errorNode;
+  const dotFg = useDotForeground(done, active);
+  const fg = errorNode ? theme.color.dangerInk : accentDone ? theme.color.accentInk : dotFg;
+  const currentAttr = active ? { "aria-current": "step" } : {};
+  const column = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: [
+          styles.dot,
+          { width: dotSize, height: dotSize },
+          accentDone && { backgroundColor: theme.color.accent, borderColor: theme.color.accent },
+          errorNode && { backgroundColor: theme.color.danger, borderColor: theme.color.danger }
+        ],
+        ...currentAttr,
+        children: [
+          indicator === "dots" ? null : errorNode ? /* @__PURE__ */ jsx(Text, { style: [styles.dotNum, { color: fg }], children: "!" }) : done ? /* @__PURE__ */ jsx(Icon, { name: NODE_STATE_ICON.done, size: theme.icon.sm, color: fg }) : /* @__PURE__ */ jsx(Text, { style: [styles.dotNum, { color: fg }], children: index + 1 }),
+          hasError && !errorNode ? (
+            // A badge on the node rather than a recoloured node: the
+            // done/active/pending state stays readable underneath.
+            /* @__PURE__ */ jsx(View, { style: styles.errorBadge, children: /* @__PURE__ */ jsx(Icon, { name: "alert-circle", size: theme.icon.xs, color: theme.color.dangerInk }) })
+          ) : null
+        ]
+      }
+    ),
+    label && indicator !== "dots" ? /* @__PURE__ */ jsx(Text, { numberOfLines: 2, style: [styles.dotLabel, index !== current && styles.dotLabelRest], children: label }) : null
+  ] });
+  if (onPress) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.completedStep(label, index + 1, hasError),
+        onPress,
+        style: [styles.dotCol, orientation === "vertical" && styles.dotColRow],
+        children: column
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [styles.dotCol, orientation === "vertical" && styles.dotColRow],
+      accessible: hasError,
+      accessibilityLabel: hasError ? `${label}${labels.hasErrors}` : void 0,
+      children: column
+    }
+  );
+}
+function Wizard({
+  steps,
+  step,
+  defaultStep = 0,
+  onStepChange,
+  onFinish,
+  backLabel: backLabelProp,
+  nextLabel: nextLabelProp,
+  finishLabel: finishLabelProp,
+  motion = "full",
+  keepMounted = true,
+  onStepInvalid,
+  showHeader = true,
+  renderFooter,
+  onCancel,
+  loading = false,
+  disabled = false,
+  platform,
+  size = "md",
+  density = "standard",
+  indicator = "numbered",
+  variant = "default",
+  orientation = "horizontal",
+  doneTone = "good",
+  errorStyle = "badge",
+  labels: labelsProp
+}) {
+  const labels = useLabels("wizard", DEFAULT_LABELS, labelsProp);
+  const backLabel = backLabelProp ?? labels.back;
+  const nextLabel = nextLabelProp ?? labels.next;
+  const finishLabel = finishLabelProp ?? labels.finish;
+  const isControlled = step !== void 0;
+  const last = Math.max(0, steps.length - 1);
+  const [internal, setInternal] = React.useState(() => clamp(defaultStep, 0, last));
+  const current = clamp(isControlled ? step : internal, 0, last);
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("wizard");
+  const android = isAndroidIdiom(theme, platform);
+  const activeStep = steps[current];
+  const isFirst = current <= 0;
+  const isLast = current >= last;
+  const prev = React.useRef(current);
+  const opacity = React.useRef(new Animated.Value(1)).current;
+  const translateX = React.useRef(new Animated.Value(0)).current;
+  const level = useResolvedMotion(motion, "wizard");
+  React.useEffect(() => {
+    if (prev.current === current) return;
+    const direction = current > prev.current ? 1 : -1;
+    prev.current = current;
+    AccessibilityInfo.announceForAccessibility?.(
+      labels.stepOf(current + 1, steps.length, steps[current]?.label)
+    );
+    if (level === "none") {
+      opacity.setValue(1);
+      translateX.setValue(0);
+      return;
+    }
+    opacity.setValue(0);
+    translateX.setValue(level === "full" ? direction * theme.space.s6 : 0);
+    Animated.parallel([
+      Animated.spring(opacity, {
+        ...springConfig(theme, "de"),
+        toValue: 1,
+        useNativeDriver: true
+      }),
+      ...level === "full" ? [
+        Animated.spring(translateX, {
+          ...springConfig(theme, "ds"),
+          toValue: 0,
+          useNativeDriver: true
+        })
+      ] : []
+    ]).start();
+  }, [current, level, opacity, translateX, theme, steps]);
+  const [failed, setFailed] = React.useState(() => /* @__PURE__ */ new Set());
+  const markFailed = (index, bad) => setFailed((prev2) => {
+    if (prev2.has(index) === bad) return prev2;
+    const nextSet = new Set(prev2);
+    if (bad) nextSet.add(index);
+    else nextSet.delete(index);
+    return nextSet;
+  });
+  const goTo = (next) => {
+    const clamped = clamp(next, 0, last);
+    if (clamped === current) return;
+    if (!isControlled) setInternal(clamped);
+    onStepChange?.(clamped);
+  };
+  const visited = React.useRef(/* @__PURE__ */ new Set());
+  if (activeStep) visited.current.add(activeStep.id);
+  const onNext = () => {
+    if (loading || disabled) return;
+    if (activeStep?.validate && !activeStep.validate()) {
+      markFailed(current, true);
+      onStepInvalid?.(current);
+      return;
+    }
+    if (activeStep?.validate) markFailed(current, false);
+    if (isLast) onFinish?.();
+    else goTo(current + 1);
+  };
+  const backRef = React.useRef(() => false);
+  backRef.current = () => {
+    if (!onCancel) return false;
+    if (!isFirst) {
+      goTo(current - 1);
+      return true;
+    }
+    Alert.alert(labels.discardTitle, void 0, [
+      { text: labels.keepEditing, style: "cancel" },
+      { text: labels.discard, style: "destructive", onPress: onCancel }
+    ]);
+    return true;
+  };
+  React.useEffect(() => {
+    if (!android) return void 0;
+    const sub = BackHandler.addEventListener("hardwareBackPress", () => backRef.current());
+    return () => sub.remove();
+  }, [android]);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles.container,
+        density === "compact" && { padding: theme.space.s2, gap: theme.space.s3 },
+        density === "comfortable" && { padding: theme.space.s6, gap: theme.space.s6 },
+        variant === "elevated" && {
+          backgroundColor: theme.color.surface,
+          borderRadius: theme.radius.lg,
+          ...theme.shadow.md
+        }
+      ],
+      children: [
+        onCancel ? android ? /* @__PURE__ */ jsx(View, { style: [styles.bar, styles.barAndroid], children: /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: labels.close,
+            onPress: onCancel,
+            android_ripple: {
+              color: theme.state.pressed,
+              borderless: true,
+              radius: theme.space[24]
+            },
+            style: styles.closeButton,
+            children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.md, color: theme.color.text })
+          }
+        ) }) : /* @__PURE__ */ jsxs(View, { style: [styles.bar, styles.barIos], children: [
+          /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", onPress: onCancel, hitSlop: theme.space[8], children: ({ pressed }) => /* @__PURE__ */ jsx(Text, { style: [styles.cancel, pressed && { opacity: theme.state.pressedOpacity }], children: labels.cancel }) }),
+          /* @__PURE__ */ jsx(Text, { style: styles.count, children: labels.count(current + 1, steps.length) })
+        ] }) : null,
+        showHeader ? /* @__PURE__ */ jsx(
+          WizardSteps,
+          {
+            steps,
+            current,
+            errors: failed,
+            onStepClick: disabled ? void 0 : goTo,
+            labels,
+            size,
+            indicator,
+            orientation,
+            doneTone,
+            errorStyle
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(Animated.View, { style: [styles.content, { opacity, transform: [{ translateX }] }], children: steps.map((s, i) => {
+          const isActive = i === current;
+          if (!isActive && !(keepMounted && visited.current.has(s.id))) return null;
+          return /* @__PURE__ */ jsx(
+            View,
+            {
+              style: isActive ? void 0 : styles.hiddenStep,
+              "aria-hidden": isActive ? void 0 : true,
+              importantForAccessibility: isActive ? "auto" : "no-hide-descendants",
+              children: s.content
+            },
+            s.id
+          );
+        }) }),
+        renderFooter ? renderFooter({
+          index: current,
+          count: steps.length,
+          isFirst,
+          isLast,
+          next: onNext,
+          back: () => {
+            if (!disabled) goTo(current - 1);
+          }
+        }) : /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
+          /* @__PURE__ */ jsx(View, { style: android ? void 0 : styles.footerShare, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: size === "md" ? void 0 : size,
+              variant: android ? "ghost" : "outline",
+              ...android ? null : { leadingIcon: "arrow-left" },
+              disabled: isFirst || loading || disabled,
+              onPress: () => goTo(current - 1),
+              children: backLabel
+            }
+          ) }),
+          /* @__PURE__ */ jsx(View, { style: android ? void 0 : styles.footerShare, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: size === "md" ? void 0 : size,
+              variant: "primary",
+              ...android ? null : { trailingIcon: isLast ? "check" : "arrow-right" },
+              loading,
+              disabled,
+              onPress: onNext,
+              children: isLast ? finishLabel : nextLabel
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+function WizardSteps({
+  steps,
+  current,
+  onStepClick,
+  errors,
+  size = "md",
+  indicator = "numbered",
+  orientation = "horizontal",
+  doneTone = "good",
+  errorStyle = "badge",
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("wizard", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("wizard");
+  const activeStep = steps[current];
+  const dotSize = indicator === "dots" ? theme.space[12] : theme.space[DOT_SIZE[size]];
+  const vertical = orientation === "vertical";
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [styles.rail, vertical && styles.railVertical],
+      ...onStepClick ? { role: "group" } : {
+        accessibilityRole: "progressbar",
+        accessibilityValue: { min: 1, max: steps.length, now: current + 1 },
+        "aria-valuemin": 1,
+        "aria-valuemax": steps.length,
+        "aria-valuenow": current + 1
+      },
+      accessibilityLabel: labels.stepOf(current + 1, steps.length, activeStep?.label),
+      children: steps.map((s, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        i > 0 ? (
+          // The connector carries the state: solid in the done tone once the
+          // step it leaves has been traversed, muted otherwise — the shared
+          // rule, and the same green the completed dots now use.
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              style: [
+                styles.line,
+                vertical ? {
+                  flex: 0,
+                  width: theme.borderWidth.heavy,
+                  height: theme.space.s4,
+                  marginHorizontal: 0,
+                  marginTop: 0,
+                  marginVertical: theme.space.s1,
+                  marginStart: dotSize / 2 - theme.borderWidth.heavy / 2
+                } : { marginTop: dotSize / 2 - theme.borderWidth.heavy / 2 },
+                {
+                  backgroundColor: isConnectorTraversed(resolveStepState(i - 1, current)) ? doneTone === "accent" ? theme.color.accent : theme.color.good : theme.color.surface3
+                }
+              ]
+            }
+          )
+        ) : null,
+        /* @__PURE__ */ jsx(
+          StepDot,
+          {
+            index: i,
+            current,
+            label: s.label,
+            labels,
+            dotSize,
+            indicator,
+            orientation,
+            doneTone,
+            errorStyle,
+            hasError: !!s.error || !!errors?.has(i),
+            onPress: onStepClick && resolveStepState(i, current) === "done" ? () => onStepClick(i) : void 0
+          }
+        )
+      ] }, s.id))
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  hiddenStep: { display: "none" },
+  // The wizard owns its own gutter: it is a whole flow, not a control dropped
+  // into someone else's padded box, and without one the footer buttons sat flush
+  // against whatever container it was placed in.
+  container: {
+    padding: theme.space.s4,
+    gap: theme.space.s4
+  },
+  // Step titles sit *in flow* under their dot rather than absolutely positioned:
+  // an absolute label is measured against the 32pt dot, so it either overflowed
+  // into its neighbours or (once clamped) truncated to "Acc…". The connecting
+  // lines stay level with the dot centres by being offset to that centre
+  // themselves, which is why the rail aligns to `flex-start`.
+  rail: {
+    flexDirection: "row",
+    alignItems: "flex-start"
+  },
+  railVertical: { flexDirection: "column", alignItems: "flex-start" },
+  dotColRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s3 },
+  line: {
+    flex: 1,
+    // The 2 px connector, level with the 30 dot centres (Final 05).
+    height: theme.borderWidth.heavy,
+    borderRadius: theme.radius.full,
+    marginHorizontal: theme.space.s1,
+    marginTop: theme.space[30] / 2 - theme.borderWidth.heavy / 2
+  },
+  errorBadge: {
+    position: "absolute",
+    top: -theme.space.s1,
+    end: -theme.space.s1,
+    width: theme.icon.sm,
+    height: theme.icon.sm,
+    borderRadius: theme.radius.full,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.color.danger
+  },
+  dotCol: { alignItems: "center", flexShrink: 0, gap: theme.space.s1 },
+  dot: {
+    width: theme.space[30],
+    height: theme.space[30],
+    borderRadius: theme.radius.full,
+    alignItems: "center",
+    justifyContent: "center",
+    variants: {
+      state: {
+        // `done` uses the family's done tone (`status.done` === `good`), so a
+        // completed wizard step is the same green as a `done` Timeline/Stage node
+        // and matches the web wizard — the native wizard previously diverged to
+        // `accent` (blue) here, the one inconsistency this unification resolves.
+        done: {
+          backgroundColor: theme.status.done,
+          borderWidth: theme.borderWidth.thick,
+          borderColor: theme.status.done
+        },
+        // The active step's edge is `focus.ringColor` — the only mark of "you
+        // are here" once high contrast drops the `accentSoft` fill, so it owes
+        // SC 1.4.11's 3:1, which the raw accent misses in four palettes.
+        active: {
+          backgroundColor: theme.color.accentSoft,
+          borderWidth: theme.borderWidth.thick,
+          borderColor: theme.focus.ringColor
+        },
+        upcoming: {
+          backgroundColor: theme.color.surface3,
+          borderWidth: theme.borderWidth.thick,
+          borderColor: theme.color.surface3
+        }
+      }
+    }
+  },
+  dotNum: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight
+  },
+  dotLabel: {
+    // Wide enough for a real step name, capped so a long one wraps instead of
+    // shouldering the next step out of the rail.
+    maxWidth: theme.space.s8 + theme.space.s4,
+    textAlign: "center",
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text
+  },
+  // Active 600 text; the others 500 text-2.
+  dotLabelRest: { fontWeight: theme.fontWeight.medium, color: theme.color.text2 },
+  content: { gap: theme.space.s3 },
+  footer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.space.s3
+  },
+  footerShare: { flex: 1, alignItems: "stretch" },
+  bar: { flexDirection: "row", alignItems: "center" },
+  // The iOS page-sheet bar: 44, Cancel 17 / 400 accent, count 15 text-2.
+  barIos: { height: theme.ctl.lg, justifyContent: "space-between" },
+  // The Android full-screen dialog bar: 64 with a 48 close target.
+  barAndroid: { height: theme.space[64], marginHorizontal: -theme.space[12] },
+  closeButton: {
+    width: theme.space[48],
+    height: theme.space[48],
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  cancel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[17],
+    fontWeight: theme.fontWeight.regular,
+    color: theme.color.accentStrong
+  },
+  count: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[15],
+    color: theme.color.text2,
+    fontVariant: ["tabular-nums"]
+  }
+}));
+
+export { Wizard, WizardSteps };

package/dist/{chunk-IT6FUXXG.js → chunk-NNJLVA7M.js}

@@ -1,7 +1,7 @@
-import { useThinkingPulse } from './chunk-W74TXYFB.js';
 import { NODE_STATE_WORD, NODE_STATE_ICON, NODE_STATE_SHAPE } from './chunk-YLLCXTMC.js';
+import { useThinkingPulse } from './chunk-LUZFCCSD.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import * as React from 'react';
 import { View, Text, ScrollView, Animated, Easing } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
@@ -16,7 +16,8 @@ var NODE_ICON = { sm: 14, md: 18, lg: 22 };
 function StageNode({
   state,
   size,
-  pulse
+  pulse,
+  outline
 }) {
   const { styles } = useStyles(sheet, { state });
   const theme = useLoamTheme("stage-timeline");
@@ -29,6 +30,7 @@ function StageNode({
       style: [
         styles.node,
         { width: box, height: box, borderRadius: shapeRadius(state, theme.radius.full) },
+        outline ? { backgroundColor: theme.color.surface } : null,
         pulseStyle
       ],
       children: /* @__PURE__ */ jsx(Icon, { name: NODE_STATE_ICON[state], size: NODE_ICON[size], color: glyphColor })
@@ -75,7 +77,7 @@ function Connector({
         {
           style: [
             horizontal ? styles.fillH : styles.fillV,
-            { backgroundColor: theme.color.accent },
+            { backgroundColor: theme.color.good },
             fillStyle
           ]
         }
@@ -88,6 +90,8 @@ function StageTimeline({
   orientation = "horizontal",
   size = "md",
   motion = "full",
+  variant = "soft",
+  density = "comfortable",
   labels: labelsProp,
   style,
   testID
@@ -114,9 +118,17 @@ function StageTimeline({
             accessibilityLabel: name,
             "aria-label": name,
             ...currentAttr,
-            style: styles.stageH,
+            style: [styles.stageH, density === "compact" && styles.stageHCompact],
             children: [
-              /* @__PURE__ */ jsx(StageNode, { state: stage.state, size, pulse: isWorking && pulseOn }),
+              /* @__PURE__ */ jsx(
+                StageNode,
+                {
+                  state: stage.state,
+                  size,
+                  pulse: isWorking && pulseOn,
+                  outline: variant === "outline"
+                }
+              ),
               /* @__PURE__ */ jsx(Text, { style: styles.label, numberOfLines: 2, children: stage.label }),
               stage.detail ? /* @__PURE__ */ jsx(Text, { style: styles.detail, numberOfLines: 1, children: stage.detail }) : null
             ]
@@ -136,13 +148,32 @@ function StageTimeline({
         style: styles.stageV,
         children: [
           /* @__PURE__ */ jsxs(View, { style: styles.railV, children: [
-            /* @__PURE__ */ jsx(StageNode, { state: stage.state, size, pulse: isWorking && pulseOn }),
+            /* @__PURE__ */ jsx(
+              StageNode,
+              {
+                state: stage.state,
+                size,
+                pulse: isWorking && pulseOn,
+                outline: variant === "outline"
+              }
+            ),
             showConnector ? /* @__PURE__ */ jsx(Connector, { from: stage.state, orientation, motion }) : null
           ] }),
-          /* @__PURE__ */ jsxs(View, { style: [styles.textV, showConnector && { paddingBottom: theme.space.s5 }], children: [
-            /* @__PURE__ */ jsx(Text, { style: styles.label, children: stage.label }),
-            stage.detail ? /* @__PURE__ */ jsx(Text, { style: styles.detail, children: stage.detail }) : null
-          ] })
+          /* @__PURE__ */ jsxs(
+            View,
+            {
+              style: [
+                styles.textV,
+                showConnector && {
+                  paddingBottom: density === "compact" ? theme.space.s2 : theme.space.s5
+                }
+              ],
+              children: [
+                /* @__PURE__ */ jsx(Text, { style: styles.label, children: stage.label }),
+                stage.detail ? /* @__PURE__ */ jsx(Text, { style: styles.detail, children: stage.detail }) : null
+              ]
+            }
+          )
         ]
       },
       stage.id
@@ -182,6 +213,7 @@ var sheet = createStyleSheet((theme) => ({
       }
     }
   },
+  stageHCompact: { paddingHorizontal: theme.space.s1, gap: theme.space.s1 },
   stageV: { flexDirection: "row", alignItems: "stretch", gap: theme.space.s3 },
   railV: { alignItems: "center" },
   textV: { flexShrink: 1, gap: theme.space.s1, paddingTop: theme.space[2] },