@buoy-gg/shared-ui 7.0.40 → 7.0.42

package/lib/commonjs/ui/night/primitives.js

@@ -1,517 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NightBadge = NightBadge;
-exports.NightButton = NightButton;
-exports.NightCard = NightCard;
-exports.NightChip = NightChip;
-exports.NightFootnote = NightFootnote;
-exports.NightRows = NightRows;
-exports.NightSectionLabel = NightSectionLabel;
-exports.NightSegmented = NightSegmented;
-exports.NightSeparator = NightSeparator;
-exports.NightSwitch = NightSwitch;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _nightTheme = require("./nightTheme.js");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Night primitives — the building blocks of the Everlights-style surface
- * (see ./nightTheme for the tokens and where the look comes from).
- *
- * The shape they compose to:
- *
- *   NightSectionLabel   STORAGE                ← outside the card, uppercase
- *   NightCard           ┌──────────────────┐
- *     NightRows         │ row              │   ← hairline-separated children
- *                       │ ────────────     │
- *                       │ row              │
- *                       └──────────────────┘
- *   NightFootnote       Settings persist through…
- *
- * Controls: NightSwitch (the Everlights 56×32 toggle), NightChip (zone-style
- * pill), NightButton (primary = filled accent w/ dark ink, everything else on
- * the #1C1C1C plate), NightSegmented (the All/Day control with the accent
- * underline), NightBadge (small status caps).
- */
-
-/** Uppercase section label that sits ABOVE a NightCard. */
-function NightSectionLabel({
-  children,
-  style
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-    style: [styles.sectionLabel, style],
-    children: children
-  });
-}
-
-/** Explanatory line under a NightCard (or above a CTA, `centered`). */
-function NightFootnote({
-  children,
-  centered,
-  tone = "tertiary",
-  style
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-    style: [styles.footnote, tone === "secondary" ? styles.footnoteSecondary : null, tone === "warning" ? styles.footnoteWarning : null, tone === "danger" ? styles.footnoteDanger : null, centered ? styles.footnoteCentered : null, style],
-    children: children
-  });
-}
-
-/**
- * A card: `#0C0C0C`, radius 14, hairline border. `padded` = interior 14.
- * `glass` swaps the opaque fill for `night.color.glass` so the ToolBackground
- * behind the sheet shows through the card.
- */
-function NightCard({
-  children,
-  padded,
-  glass,
-  style
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.card, glass ? styles.cardGlass : null, padded ? styles.cardPadded : null, style],
-    children: children
-  });
-}
-
-/** Hairline separator between rows, inset from the left like iOS. */
-function NightSeparator({
-  inset = _nightTheme.night.rowPadH
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.separator, {
-      marginLeft: inset
-    }]
-  });
-}
-
-/**
- * Interleaves a hairline between consecutive children so rows never track
- * their own position. Meant to live inside an unpadded NightCard.
- */
-function NightRows({
-  children,
-  inset = _nightTheme.night.rowPadH
-}) {
-  const rows = _react.Children.toArray(children);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: rows.map((row, index) =>
-    /*#__PURE__*/
-    // Children.toArray assigns stable synthetic keys for keyed children.
-    (0, _jsxRuntime.jsxs)(_reactNative.View, {
-      children: [index > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(NightSeparator, {
-        inset: inset
-      }) : null, row]
-    }, row.key ?? index))
-  });
-}
-
-// Everlights toggle geometry, verbatim.
-const TRACK_W = 56;
-const TRACK_H = 32;
-const THUMB = 22;
-const TRACK_PAD = 5;
-const TRAVEL = TRACK_W - THUMB - TRACK_PAD * 2;
-
-/**
- * The Everlights 56×32 switch. The thumb slides on the native driver; the
- * colors snap with the state change, which reads fine at this size.
- */
-function NightSwitch({
-  value,
-  onValueChange,
-  disabled
-}) {
-  const progress = (0, _react.useRef)(new _reactNative.Animated.Value(value ? 1 : 0)).current;
-  (0, _react.useEffect)(() => {
-    _reactNative.Animated.timing(progress, {
-      toValue: value ? 1 : 0,
-      duration: 200,
-      useNativeDriver: true
-    }).start();
-  }, [value, progress]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-    activeOpacity: 0.8,
-    disabled: disabled,
-    onPress: () => onValueChange(!value),
-    accessibilityRole: "switch",
-    accessibilityState: {
-      checked: value,
-      disabled
-    },
-    hitSlop: {
-      top: 8,
-      bottom: 8,
-      left: 8,
-      right: 8
-    },
-    style: [styles.switchTrack, value ? styles.switchTrackOn : null, disabled ? styles.switchDisabled : null],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      style: [styles.switchThumb, value ? styles.switchThumbOn : null, {
-        transform: [{
-          translateX: progress.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, TRAVEL]
-          })
-        }]
-      }]
-    })
-  });
-}
-
-/**
- * Zone-style pill chip. The fill never changes — selection is signaled by the
- * border and label color only, exactly like the Everlights zone row.
- */
-function NightChip({
-  label,
-  selected,
-  onPress,
-  disabled,
-  icon,
-  testID
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-    activeOpacity: 0.7,
-    disabled: disabled || !onPress,
-    onPress: onPress,
-    testID: testID,
-    style: [styles.chip, selected ? styles.chipSelected : null, disabled ? styles.chipDisabled : null],
-    children: [icon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.chipText, selected ? styles.chipTextSelected : null],
-      children: label
-    })]
-  });
-}
-/**
- * Everlights button. `primary` fills with the accent and takes DARK ink;
- * every other variant sits on the `#1C1C1C` plate and differs only in label
- * color. `lg` is the fully-rounded 50pt CTA.
- */
-function NightButton({
-  label,
-  onPress,
-  variant = "secondary",
-  size = "lg",
-  icon,
-  disabled,
-  fullWidth = true
-}) {
-  const labelColor = variant === "primary" ? _nightTheme.night.color.onAccent : variant === "tertiary" ? _nightTheme.night.color.text : variant === "destructive" ? _nightTheme.night.color.danger : _nightTheme.night.color.accent;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-    activeOpacity: 0.7,
-    disabled: disabled,
-    onPress: onPress,
-    style: [styles.button, size === "md" ? styles.buttonMd : styles.buttonLg, variant === "primary" ? styles.buttonPrimary : variant === "ghost" ? styles.buttonGhost : styles.buttonPlate, fullWidth ? styles.buttonFullWidth : null, disabled ? styles.buttonDisabled : null],
-    children: [icon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [size === "md" ? styles.buttonTextMd : styles.buttonTextLg, {
-        color: labelColor
-      }],
-      children: label
-    })]
-  });
-}
-/**
- * Segmented control: `#050505` track, `#161618` thumb, and the accent
- * underline glow beneath the active label (the Everlights All/Day tabs).
- *
- * THE shared tab control for night-theme tool headers — the dial settings
- * and the network tool both mount this one. `size="sm"` is the compact
- * variant for in-tool headers where the full-height control reads too tall.
- */
-function NightSegmented({
-  tabs,
-  activeKey,
-  onChange,
-  size = "md",
-  glass
-}) {
-  const small = size === "sm";
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.segmentTrack, glass ? styles.segmentTrackGlass : null],
-    children: tabs.map(tab => {
-      const active = tab.key === activeKey;
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        activeOpacity: 0.7,
-        accessibilityRole: "tab",
-        accessibilityState: {
-          selected: active
-        },
-        accessibilityLabel: tab.label,
-        onPress: () => onChange(tab.key),
-        style: [styles.segment, small ? styles.segmentSm : null, active ? glass ? styles.segmentActiveGlass : styles.segmentActive : null],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.segmentText, small ? styles.segmentTextSm : null, active ? styles.segmentTextActive : null],
-          children: tab.label
-        }), active ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [styles.segmentUnderline, small ? styles.segmentUnderlineSm : null]
-        }) : null]
-      }, tab.key);
-    })
-  });
-}
-/** Small uppercase status cap ("FILE SYSTEM", "CONNECTED"). */
-function NightBadge({
-  label,
-  tone = "neutral"
-}) {
-  const fill = tone === "accent" ? styles.badgeAccent : tone === "warning" ? styles.badgeWarning : tone === "danger" ? styles.badgeDanger : tone === "info" ? styles.badgeInfo : styles.badgeNeutral;
-  const ink = tone === "accent" ? styles.badgeTextAccent : tone === "warning" ? styles.badgeTextWarning : tone === "danger" ? styles.badgeTextDanger : tone === "info" ? styles.badgeTextInfo : styles.badgeTextNeutral;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.badge, fill],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.badgeText, ink],
-      children: label
-    })
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  sectionLabel: {
-    color: _nightTheme.night.color.textSecondary,
-    fontSize: _nightTheme.night.font.label,
-    fontWeight: "600",
-    letterSpacing: _nightTheme.NIGHT_LABEL_TRACKING,
-    textTransform: "uppercase",
-    marginBottom: 8,
-    marginLeft: _nightTheme.night.labelInset
-  },
-  footnote: {
-    color: _nightTheme.night.color.textTertiary,
-    fontSize: _nightTheme.night.font.caption,
-    fontWeight: "500",
-    lineHeight: _nightTheme.night.font.caption * 1.4,
-    marginTop: 8,
-    marginLeft: _nightTheme.night.labelInset
-  },
-  footnoteSecondary: {
-    color: _nightTheme.night.color.textSecondary
-  },
-  footnoteWarning: {
-    color: _nightTheme.night.color.warning
-  },
-  footnoteDanger: {
-    color: _nightTheme.night.color.danger
-  },
-  footnoteCentered: {
-    textAlign: "center",
-    marginLeft: 0
-  },
-  card: {
-    backgroundColor: _nightTheme.night.color.surface,
-    borderRadius: _nightTheme.night.radius.card,
-    borderWidth: 1,
-    borderColor: _nightTheme.night.color.border,
-    overflow: "hidden"
-  },
-  cardGlass: {
-    backgroundColor: _nightTheme.night.color.glass,
-    borderColor: _nightTheme.night.color.glassBorder
-  },
-  cardPadded: {
-    padding: _nightTheme.night.cardPad,
-    gap: 10
-  },
-  separator: {
-    height: _reactNative.StyleSheet.hairlineWidth,
-    backgroundColor: _nightTheme.night.color.separator
-  },
-  switchTrack: {
-    width: TRACK_W,
-    height: TRACK_H,
-    borderRadius: TRACK_H / 2,
-    borderWidth: 1,
-    borderColor: _nightTheme.night.color.fillTertiary,
-    backgroundColor: _nightTheme.night.color.surfaceElevated,
-    paddingHorizontal: TRACK_PAD,
-    justifyContent: "center",
-    overflow: "hidden"
-  },
-  switchTrackOn: {
-    backgroundColor: _nightTheme.night.color.accentFill,
-    borderColor: _nightTheme.night.color.accentBorderStrong
-  },
-  switchDisabled: {
-    opacity: 0.4
-  },
-  switchThumb: {
-    width: THUMB,
-    height: THUMB,
-    borderRadius: THUMB / 2,
-    backgroundColor: _nightTheme.night.color.knob
-  },
-  switchThumbOn: {
-    backgroundColor: _nightTheme.night.color.accent
-  },
-  chip: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 14,
-    paddingVertical: 9,
-    borderRadius: _nightTheme.night.radius.chip,
-    borderWidth: 1.5,
-    backgroundColor: _nightTheme.night.color.buttonSurface,
-    borderColor: _nightTheme.night.color.fillTertiary
-  },
-  chipSelected: {
-    borderColor: _nightTheme.night.color.accentBorderStrong
-  },
-  chipDisabled: {
-    opacity: 0.4
-  },
-  chipText: {
-    fontSize: _nightTheme.night.font.body,
-    fontWeight: "500",
-    color: _nightTheme.night.color.textSecondary
-  },
-  chipTextSelected: {
-    color: _nightTheme.night.color.accent
-  },
-  button: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 8
-  },
-  buttonMd: {
-    height: 34,
-    paddingHorizontal: 16,
-    borderRadius: 17
-  },
-  buttonLg: {
-    height: 50,
-    paddingHorizontal: 20,
-    borderRadius: 25
-  },
-  buttonPrimary: {
-    backgroundColor: _nightTheme.night.color.accent
-  },
-  buttonPlate: {
-    backgroundColor: _nightTheme.night.color.button
-  },
-  buttonGhost: {
-    backgroundColor: "transparent"
-  },
-  buttonFullWidth: {
-    alignSelf: "stretch"
-  },
-  buttonDisabled: {
-    opacity: 0.4
-  },
-  buttonTextMd: {
-    fontSize: 15,
-    fontWeight: "600"
-  },
-  buttonTextLg: {
-    fontSize: 17,
-    fontWeight: "600"
-  },
-  segmentTrack: {
-    flex: 1,
-    flexDirection: "row",
-    backgroundColor: _nightTheme.night.color.bg,
-    borderRadius: _nightTheme.night.radius.row,
-    borderWidth: 1,
-    borderColor: _nightTheme.night.color.border,
-    padding: 3
-  },
-  segment: {
-    flex: 1,
-    paddingVertical: 8,
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: _nightTheme.night.radius.segment
-  },
-  segmentTrackGlass: {
-    backgroundColor: _nightTheme.night.color.glass,
-    borderColor: _nightTheme.night.color.glassBorder
-  },
-  segmentActive: {
-    backgroundColor: _nightTheme.night.color.surfaceElevated
-  },
-  segmentActiveGlass: {
-    backgroundColor: _nightTheme.night.color.glassElevated
-  },
-  segmentText: {
-    fontSize: _nightTheme.night.font.caption,
-    fontWeight: "500",
-    color: _nightTheme.night.color.textSecondary
-  },
-  segmentTextActive: {
-    fontWeight: "600",
-    color: _nightTheme.night.color.text
-  },
-  segmentUnderline: {
-    position: "absolute",
-    bottom: 2,
-    width: 24,
-    height: 2.5,
-    borderRadius: 1.25,
-    backgroundColor: _nightTheme.night.color.accent,
-    shadowColor: _nightTheme.night.color.accent,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.6,
-    shadowRadius: 6
-  },
-  segmentSm: {
-    paddingVertical: 5
-  },
-  segmentTextSm: {
-    fontSize: 12
-  },
-  segmentUnderlineSm: {
-    bottom: 1.5,
-    width: 20,
-    height: 2,
-    borderRadius: 1
-  },
-  badge: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: _nightTheme.night.radius.badge,
-    alignSelf: "flex-start"
-  },
-  badgeText: {
-    fontSize: _nightTheme.night.font.micro,
-    fontWeight: "600",
-    letterSpacing: 0.5,
-    textTransform: "uppercase"
-  },
-  badgeAccent: {
-    backgroundColor: _nightTheme.night.color.accentSoft
-  },
-  badgeTextAccent: {
-    color: _nightTheme.night.color.accent
-  },
-  badgeWarning: {
-    backgroundColor: _nightTheme.night.color.warningSoft
-  },
-  badgeTextWarning: {
-    color: _nightTheme.night.color.warning
-  },
-  badgeDanger: {
-    backgroundColor: _nightTheme.night.color.dangerSoft
-  },
-  badgeTextDanger: {
-    color: _nightTheme.night.color.danger
-  },
-  badgeInfo: {
-    backgroundColor: _nightTheme.night.color.infoSoft
-  },
-  badgeTextInfo: {
-    color: _nightTheme.night.color.info
-  },
-  badgeNeutral: {
-    backgroundColor: _nightTheme.night.color.fillSecondary
-  },
-  badgeTextNeutral: {
-    color: _nightTheme.night.color.textSecondary
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.NightBadge=NightBadge;exports.NightButton=NightButton;exports.NightCard=NightCard;exports.NightChip=NightChip;exports.NightFootnote=NightFootnote;exports.NightRows=NightRows;exports.NightSectionLabel=NightSectionLabel;exports.NightSegmented=NightSegmented;exports.NightSeparator=NightSeparator;exports.NightSwitch=NightSwitch;var _react=require("react");var _reactNative=require("react-native");var _nightTheme=require("./nightTheme.js");var _jsxRuntime=require("react/jsx-runtime");function NightSectionLabel({children:t,style:e}){return(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.sectionLabel,e],children:t})}function NightFootnote({children:t,centered:e,tone:o="tertiary",style:n}){const r=_reactNative.StyleSheet.flatten(n);const i=!!r&&(r.marginHorizontal!=null||r.margin!=null);return(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.footnote,i?null:styles.footnoteInset,o==="secondary"?styles.footnoteSecondary:null,o==="warning"?styles.footnoteWarning:null,o==="danger"?styles.footnoteDanger:null,e?styles.footnoteCentered:null,n],children:t})}function NightCard({children:t,padded:e,glass:o,style:n}){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.card,o?styles.cardGlass:null,e?styles.cardPadded:null,n],children:t})}function NightSeparator({inset:t=_nightTheme.night.rowPadH}){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.separator,{marginLeft:t}]})}function NightRows({children:t,inset:e=_nightTheme.night.rowPadH}){const o=_react.Children.toArray(t);return(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:o.map((n,r)=>(0,_jsxRuntime.jsxs)(_reactNative.View,{children:[r>0?(0,_jsxRuntime.jsx)(NightSeparator,{inset:e}):null,n]},n.key??r))})}const TRACK_W=56;const TRACK_H=32;const THUMB=22;const TRACK_PAD=5;const TRAVEL=TRACK_W-THUMB-TRACK_PAD*2;function NightSwitch({value:t,onValueChange:e,disabled:o,testID:n,accessibilityLabel:r}){const i=(0,_react.useRef)(new _reactNative.Animated.Value(t?1:0)).current;(0,_react.useEffect)(()=>{_reactNative.Animated.timing(i,{toValue:t?1:0,duration:200,useNativeDriver:_reactNative.Platform.OS!=="web"}).start()},[t,i]);return(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{activeOpacity:.8,disabled:o,onPress:()=>e(!t),testID:n,accessibilityLabel:r,accessibilityRole:"switch",accessibilityState:{checked:t,disabled:o},hitSlop:{top:8,bottom:8,left:8,right:8},style:[styles.switchTrack,t?styles.switchTrackOn:null,o?styles.switchDisabled:null],children:(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[styles.switchThumb,t?styles.switchThumbOn:null,{transform:[{translateX:i.interpolate({inputRange:[0,1],outputRange:[0,TRAVEL]})}]}]})})}function NightChip({label:t,selected:e,onPress:o,disabled:n,icon:r,testID:i}){return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{activeOpacity:.7,disabled:n||!o,onPress:o,testID:i,style:[styles.chip,e?styles.chipSelected:null,n?styles.chipDisabled:null],children:[r,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.chipText,e?styles.chipTextSelected:null],children:t})]})}function NightButton({label:t,onPress:e,variant:o="secondary",size:n="lg",icon:r,disabled:i,fullWidth:l=true,testID:a,accessibilityLabel:c}){const g=o==="primary"?_nightTheme.night.color.onAccent:o==="tertiary"?_nightTheme.night.color.text:o==="destructive"?_nightTheme.night.color.danger:_nightTheme.night.color.accent;return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{activeOpacity:.7,disabled:i,onPress:e,testID:a,accessibilityRole:"button",accessibilityLabel:c??t,accessibilityState:{disabled:!!i},style:[styles.button,n==="md"?styles.buttonMd:styles.buttonLg,o==="primary"?styles.buttonPrimary:o==="ghost"?styles.buttonGhost:styles.buttonPlate,l?styles.buttonFullWidth:null,i?styles.buttonDisabled:null],children:[r,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[n==="md"?styles.buttonTextMd:styles.buttonTextLg,{color:g}],children:t})]})}function NightSegmented({tabs:t,activeKey:e,onChange:o,size:n="md",glass:r,testIDPrefix:i}){const l=n==="sm";return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.segmentTrack,r?styles.segmentTrackGlass:null],children:t.map(a=>{const c=a.key===e;return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{activeOpacity:.7,testID:i?`${i}-${a.key}`:void 0,accessibilityRole:"tab",accessibilityState:{selected:c},accessibilityLabel:a.label,onPress:()=>o(a.key),style:[styles.segment,l?styles.segmentSm:null,c?r?styles.segmentActiveGlass:styles.segmentActive:null],children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.segmentText,l?styles.segmentTextSm:null,c?styles.segmentTextActive:null],children:a.label}),c?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.segmentUnderline,l?styles.segmentUnderlineSm:null]}):null]},a.key)})})}function NightBadge({label:t,tone:e="neutral"}){const o=e==="accent"?styles.badgeAccent:e==="warning"?styles.badgeWarning:e==="danger"?styles.badgeDanger:e==="info"?styles.badgeInfo:styles.badgeNeutral;const n=e==="accent"?styles.badgeTextAccent:e==="warning"?styles.badgeTextWarning:e==="danger"?styles.badgeTextDanger:e==="info"?styles.badgeTextInfo:styles.badgeTextNeutral;return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.badge,o],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.badgeText,n],children:t})})}const styles=_reactNative.StyleSheet.create({sectionLabel:{color:_nightTheme.night.color.textSecondary,fontSize:_nightTheme.night.font.label,fontWeight:"600",letterSpacing:_nightTheme.NIGHT_LABEL_TRACKING,textTransform:"uppercase",marginBottom:8,marginLeft:_nightTheme.night.labelInset},footnote:{color:_nightTheme.night.color.textTertiary,fontSize:_nightTheme.night.font.caption,fontWeight:"500",lineHeight:_nightTheme.night.font.caption*1.4,marginTop:8},footnoteInset:{marginLeft:_nightTheme.night.labelInset},footnoteSecondary:{color:_nightTheme.night.color.textSecondary},footnoteWarning:{color:_nightTheme.night.color.warning},footnoteDanger:{color:_nightTheme.night.color.danger},footnoteCentered:{textAlign:"center",marginLeft:0},card:{backgroundColor:_nightTheme.night.color.surface,borderRadius:_nightTheme.night.radius.card,borderWidth:1,borderColor:_nightTheme.night.color.border,overflow:"hidden"},cardGlass:{backgroundColor:_nightTheme.night.color.glass,borderColor:_nightTheme.night.color.glassBorder},cardPadded:{padding:_nightTheme.night.cardPad,gap:10},separator:{height:_reactNative.StyleSheet.hairlineWidth,backgroundColor:_nightTheme.night.color.separator},switchTrack:{width:TRACK_W,height:TRACK_H,borderRadius:TRACK_H/2,borderWidth:1,borderColor:_nightTheme.night.color.fillTertiary,backgroundColor:_nightTheme.night.color.surfaceElevated,paddingHorizontal:TRACK_PAD,justifyContent:"center",overflow:"hidden"},switchTrackOn:{backgroundColor:_nightTheme.night.color.accentFill,borderColor:_nightTheme.night.color.accentBorderStrong},switchDisabled:{opacity:.4},switchThumb:{width:THUMB,height:THUMB,borderRadius:THUMB/2,backgroundColor:_nightTheme.night.color.knob},switchThumbOn:{backgroundColor:_nightTheme.night.color.accent},chip:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:14,paddingVertical:9,borderRadius:_nightTheme.night.radius.chip,borderWidth:1.5,backgroundColor:_nightTheme.night.color.buttonSurface,borderColor:_nightTheme.night.color.fillTertiary},chipSelected:{borderColor:_nightTheme.night.color.accentBorderStrong},chipDisabled:{opacity:.4},chipText:{fontSize:_nightTheme.night.font.body,fontWeight:"500",color:_nightTheme.night.color.textSecondary},chipTextSelected:{color:_nightTheme.night.color.accent},button:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:8},buttonMd:{height:34,paddingHorizontal:16,borderRadius:17},buttonLg:{height:50,paddingHorizontal:20,borderRadius:25},buttonPrimary:{backgroundColor:_nightTheme.night.color.accent},buttonPlate:{backgroundColor:_nightTheme.night.color.button},buttonGhost:{backgroundColor:"transparent"},buttonFullWidth:{alignSelf:"stretch"},buttonDisabled:{opacity:.4},buttonTextMd:{fontSize:15,fontWeight:"600"},buttonTextLg:{fontSize:17,fontWeight:"600"},segmentTrack:{flex:1,flexDirection:"row",backgroundColor:_nightTheme.night.color.bg,borderRadius:_nightTheme.night.radius.row,borderWidth:1,borderColor:_nightTheme.night.color.border,padding:3},segment:{flex:1,paddingVertical:8,alignItems:"center",justifyContent:"center",borderRadius:_nightTheme.night.radius.segment},segmentTrackGlass:{backgroundColor:_nightTheme.night.color.glass,borderColor:_nightTheme.night.color.glassBorder},segmentActive:{backgroundColor:_nightTheme.night.color.surfaceElevated},segmentActiveGlass:{backgroundColor:_nightTheme.night.color.glassElevated},segmentText:{fontSize:_nightTheme.night.font.caption,fontWeight:"500",color:_nightTheme.night.color.textSecondary},segmentTextActive:{fontWeight:"600",color:_nightTheme.night.color.text},segmentUnderline:{position:"absolute",bottom:2,width:24,height:2.5,borderRadius:1.25,backgroundColor:_nightTheme.night.color.accent,shadowColor:_nightTheme.night.color.accent,shadowOffset:{width:0,height:0},shadowOpacity:.6,shadowRadius:6},segmentSm:{paddingVertical:5},segmentTextSm:{fontSize:12},segmentUnderlineSm:{bottom:1.5,width:20,height:2,borderRadius:1},badge:{paddingHorizontal:8,paddingVertical:4,borderRadius:_nightTheme.night.radius.badge,alignSelf:"flex-start"},badgeText:{fontSize:_nightTheme.night.font.micro,fontWeight:"600",letterSpacing:.5,textTransform:"uppercase"},badgeAccent:{backgroundColor:_nightTheme.night.color.accentSoft},badgeTextAccent:{color:_nightTheme.night.color.accent},badgeWarning:{backgroundColor:_nightTheme.night.color.warningSoft},badgeTextWarning:{color:_nightTheme.night.color.warning},badgeDanger:{backgroundColor:_nightTheme.night.color.dangerSoft},badgeTextDanger:{color:_nightTheme.night.color.danger},badgeInfo:{backgroundColor:_nightTheme.night.color.infoSoft},badgeTextInfo:{color:_nightTheme.night.color.info},badgeNeutral:{backgroundColor:_nightTheme.night.color.fillSecondary},badgeTextNeutral:{color:_nightTheme.night.color.textSecondary}});

package/lib/commonjs/ui/otto/OttoSceneView.js

@@ -1,69 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.OTTO_SCENE_CROP_H = void 0;
-exports.OttoSceneFrame = OttoSceneFrame;
-exports.OttoSceneStill = OttoSceneStill;
-var _reactNative = require("react-native");
-var _ottoScenes = require("./ottoScenes.js");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Otto × tool scenes in React Native (core APIs only, so it also runs through
- * react-native-web).
- *
- *   <OttoSceneFrame scene={…} t={tick} pixelSize={4} />   one frame, caller's clock
- *   <OttoSceneStill scene={…} pixelSize={2} />            frame 0, no clock
- *
- * A frame is ~150–250 run Views, so this is a still/hero renderer: drive `t`
- * from a shared clock on a review page, not per list row. `crop` trims the
- * canvas to the rows that carry pixels (the bottom rows are spare headroom).
- */
-
-/** Rows 0–20 carry the art; 21–23 are headroom for hops. */
-const OTTO_SCENE_CROP_H = exports.OTTO_SCENE_CROP_H = 21;
-function OttoSceneFrame({
-  scene,
-  t = 0,
-  pixelSize,
-  crop = true,
-  style
-}) {
-  const rows = crop ? OTTO_SCENE_CROP_H : _ottoScenes.OTTO_SCENE_H;
-  const runs = (0, _ottoScenes.ottoSceneRuns)((0, _ottoScenes.renderOttoScene)(scene, t)).filter(r => r.y < rows);
-  const spans = [];
-  let rowY = -1;
-  let rowIndex = 0;
-  for (const r of runs) {
-    if (r.y !== rowY) {
-      rowY = r.y;
-      rowIndex = 0;
-    }
-    spans.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        position: "absolute",
-        left: r.x * pixelSize,
-        top: r.y * pixelSize,
-        width: r.w * pixelSize,
-        height: pixelSize,
-        backgroundColor: r.color
-      }
-    }, `${r.y}:${rowIndex++}`));
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    pointerEvents: "none",
-    style: [{
-      width: _ottoScenes.OTTO_SCENE_W * pixelSize,
-      height: rows * pixelSize
-    }, style],
-    children: spans
-  });
-}
-/** Frame 0 of a scene — safe anywhere a still image would be. */
-function OttoSceneStill(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(OttoSceneFrame, {
-    ...props,
-    t: 0
-  });
-}
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.OTTO_SCENE_CROP_H=void 0;exports.OttoSceneFrame=OttoSceneFrame;exports.OttoSceneStill=OttoSceneStill;var _reactNative=require("react-native");var _ottoScenes=require("./ottoScenes.js");var _jsxRuntime=require("react/jsx-runtime");const OTTO_SCENE_CROP_H=exports.OTTO_SCENE_CROP_H=21;function OttoSceneFrame({scene:r,t:u=0,pixelSize:e,crop:O=true,style:_}){const o=O?OTTO_SCENE_CROP_H:_ottoScenes.OTTO_SCENE_H;const i=(0,_ottoScenes.ottoSceneRuns)((0,_ottoScenes.renderOttoScene)(r,u)).filter(t=>t.y<o);const n=[];let s=-1;let c=0;for(const t of i){if(t.y!==s){s=t.y;c=0}n.push((0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",left:t.x*e,top:t.y*e,width:t.w*e,height:e,backgroundColor:t.color}},`${t.y}:${c++}`))}return(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[{width:_ottoScenes.OTTO_SCENE_W*e,height:o*e},_],children:n})}function OttoSceneStill(r){return(0,_jsxRuntime.jsx)(OttoSceneFrame,{...r,t:0})}