@buoy-gg/shared-ui 7.0.41 → 7.0.42

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

@@ -1,511 +1 @@
-"use strict";
-
-/**
- * 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).
- */
-import { Children, useEffect, useRef } from "react";
-import { Animated, Platform, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { night, NIGHT_LABEL_TRACKING } from "./nightTheme.js";
-
-/** Uppercase section label that sits ABOVE a NightCard. */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export function NightSectionLabel({
-  children,
-  style
-}) {
-  return /*#__PURE__*/_jsx(Text, {
-    style: [styles.sectionLabel, style],
-    children: children
-  });
-}
-
-/** Explanatory line under a NightCard (or above a CTA, `centered`). */
-export function NightFootnote({
-  children,
-  centered,
-  tone = "tertiary",
-  style
-}) {
-  // The inset is a marginLeft, and a marginLeft beats a caller's
-  // marginHorizontal or margin, so those were silently ignored on the left.
-  // A caller that sets either owns the horizontal margins.
-  const flat = StyleSheet.flatten(style);
-  const ownsMargin = !!flat && (flat.marginHorizontal != null || flat.margin != null);
-  return /*#__PURE__*/_jsx(Text, {
-    style: [styles.footnote, ownsMargin ? null : styles.footnoteInset, 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.
- */
-export function NightCard({
-  children,
-  padded,
-  glass,
-  style
-}) {
-  return /*#__PURE__*/_jsx(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. */
-export function NightSeparator({
-  inset = night.rowPadH
-}) {
-  return /*#__PURE__*/_jsx(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.
- */
-export function NightRows({
-  children,
-  inset = night.rowPadH
-}) {
-  const rows = Children.toArray(children);
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: rows.map((row, index) =>
-    /*#__PURE__*/
-    // Children.toArray assigns stable synthetic keys for keyed children.
-    _jsxs(View, {
-      children: [index > 0 ? /*#__PURE__*/_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.
- */
-export function NightSwitch({
-  value,
-  onValueChange,
-  disabled
-}) {
-  const progress = useRef(new Animated.Value(value ? 1 : 0)).current;
-  useEffect(() => {
-    Animated.timing(progress, {
-      toValue: value ? 1 : 0,
-      duration: 200,
-      useNativeDriver: Platform.OS !== "web"
-    }).start();
-  }, [value, progress]);
-  return /*#__PURE__*/_jsx(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__*/_jsx(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.
- */
-export function NightChip({
-  label,
-  selected,
-  onPress,
-  disabled,
-  icon,
-  testID
-}) {
-  return /*#__PURE__*/_jsxs(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__*/_jsx(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.
- */
-export function NightButton({
-  label,
-  onPress,
-  variant = "secondary",
-  size = "lg",
-  icon,
-  disabled,
-  fullWidth = true
-}) {
-  const labelColor = variant === "primary" ? night.color.onAccent : variant === "tertiary" ? night.color.text : variant === "destructive" ? night.color.danger : night.color.accent;
-  return /*#__PURE__*/_jsxs(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__*/_jsx(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.
- */
-export function NightSegmented({
-  tabs,
-  activeKey,
-  onChange,
-  size = "md",
-  glass
-}) {
-  const small = size === "sm";
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.segmentTrack, glass ? styles.segmentTrackGlass : null],
-    children: tabs.map(tab => {
-      const active = tab.key === activeKey;
-      return /*#__PURE__*/_jsxs(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__*/_jsx(Text, {
-          style: [styles.segmentText, small ? styles.segmentTextSm : null, active ? styles.segmentTextActive : null],
-          children: tab.label
-        }), active ? /*#__PURE__*/_jsx(View, {
-          style: [styles.segmentUnderline, small ? styles.segmentUnderlineSm : null]
-        }) : null]
-      }, tab.key);
-    })
-  });
-}
-/** Small uppercase status cap ("FILE SYSTEM", "CONNECTED"). */
-export 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__*/_jsx(View, {
-    style: [styles.badge, fill],
-    children: /*#__PURE__*/_jsx(Text, {
-      style: [styles.badgeText, ink],
-      children: label
-    })
-  });
-}
-const styles = StyleSheet.create({
-  sectionLabel: {
-    color: night.color.textSecondary,
-    fontSize: night.font.label,
-    fontWeight: "600",
-    letterSpacing: NIGHT_LABEL_TRACKING,
-    textTransform: "uppercase",
-    marginBottom: 8,
-    marginLeft: night.labelInset
-  },
-  footnote: {
-    color: night.color.textTertiary,
-    fontSize: night.font.caption,
-    fontWeight: "500",
-    lineHeight: night.font.caption * 1.4,
-    marginTop: 8
-  },
-  footnoteInset: {
-    marginLeft: night.labelInset
-  },
-  footnoteSecondary: {
-    color: night.color.textSecondary
-  },
-  footnoteWarning: {
-    color: night.color.warning
-  },
-  footnoteDanger: {
-    color: night.color.danger
-  },
-  footnoteCentered: {
-    textAlign: "center",
-    marginLeft: 0
-  },
-  card: {
-    backgroundColor: night.color.surface,
-    borderRadius: night.radius.card,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    overflow: "hidden"
-  },
-  cardGlass: {
-    backgroundColor: night.color.glass,
-    borderColor: night.color.glassBorder
-  },
-  cardPadded: {
-    padding: night.cardPad,
-    gap: 10
-  },
-  separator: {
-    height: StyleSheet.hairlineWidth,
-    backgroundColor: night.color.separator
-  },
-  switchTrack: {
-    width: TRACK_W,
-    height: TRACK_H,
-    borderRadius: TRACK_H / 2,
-    borderWidth: 1,
-    borderColor: night.color.fillTertiary,
-    backgroundColor: night.color.surfaceElevated,
-    paddingHorizontal: TRACK_PAD,
-    justifyContent: "center",
-    overflow: "hidden"
-  },
-  switchTrackOn: {
-    backgroundColor: night.color.accentFill,
-    borderColor: night.color.accentBorderStrong
-  },
-  switchDisabled: {
-    opacity: 0.4
-  },
-  switchThumb: {
-    width: THUMB,
-    height: THUMB,
-    borderRadius: THUMB / 2,
-    backgroundColor: night.color.knob
-  },
-  switchThumbOn: {
-    backgroundColor: night.color.accent
-  },
-  chip: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 14,
-    paddingVertical: 9,
-    borderRadius: night.radius.chip,
-    borderWidth: 1.5,
-    backgroundColor: night.color.buttonSurface,
-    borderColor: night.color.fillTertiary
-  },
-  chipSelected: {
-    borderColor: night.color.accentBorderStrong
-  },
-  chipDisabled: {
-    opacity: 0.4
-  },
-  chipText: {
-    fontSize: night.font.body,
-    fontWeight: "500",
-    color: night.color.textSecondary
-  },
-  chipTextSelected: {
-    color: 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: night.color.accent
-  },
-  buttonPlate: {
-    backgroundColor: 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: night.color.bg,
-    borderRadius: night.radius.row,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    padding: 3
-  },
-  segment: {
-    flex: 1,
-    paddingVertical: 8,
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: night.radius.segment
-  },
-  segmentTrackGlass: {
-    backgroundColor: night.color.glass,
-    borderColor: night.color.glassBorder
-  },
-  segmentActive: {
-    backgroundColor: night.color.surfaceElevated
-  },
-  segmentActiveGlass: {
-    backgroundColor: night.color.glassElevated
-  },
-  segmentText: {
-    fontSize: night.font.caption,
-    fontWeight: "500",
-    color: night.color.textSecondary
-  },
-  segmentTextActive: {
-    fontWeight: "600",
-    color: night.color.text
-  },
-  segmentUnderline: {
-    position: "absolute",
-    bottom: 2,
-    width: 24,
-    height: 2.5,
-    borderRadius: 1.25,
-    backgroundColor: night.color.accent,
-    shadowColor: 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: night.radius.badge,
-    alignSelf: "flex-start"
-  },
-  badgeText: {
-    fontSize: night.font.micro,
-    fontWeight: "600",
-    letterSpacing: 0.5,
-    textTransform: "uppercase"
-  },
-  badgeAccent: {
-    backgroundColor: night.color.accentSoft
-  },
-  badgeTextAccent: {
-    color: night.color.accent
-  },
-  badgeWarning: {
-    backgroundColor: night.color.warningSoft
-  },
-  badgeTextWarning: {
-    color: night.color.warning
-  },
-  badgeDanger: {
-    backgroundColor: night.color.dangerSoft
-  },
-  badgeTextDanger: {
-    color: night.color.danger
-  },
-  badgeInfo: {
-    backgroundColor: night.color.infoSoft
-  },
-  badgeTextInfo: {
-    color: night.color.info
-  },
-  badgeNeutral: {
-    backgroundColor: night.color.fillSecondary
-  },
-  badgeTextNeutral: {
-    color: night.color.textSecondary
-  }
-});
+"use strict";import{Children as w,useEffect as k,useRef as R}from"react";import{Animated as p,Platform as W,StyleSheet as y,Text as g,TouchableOpacity as h,View as u}from"react-native";import{night as t,NIGHT_LABEL_TRACKING as A}from"./nightTheme.js";import{jsx as a,jsxs as f,Fragment as D}from"react/jsx-runtime";export function NightSectionLabel({children:o,style:r}){return a(g,{style:[e.sectionLabel,r],children:o})}export function NightFootnote({children:o,centered:r,tone:n="tertiary",style:l}){const c=y.flatten(l);const i=!!c&&(c.marginHorizontal!=null||c.margin!=null);return a(g,{style:[e.footnote,i?null:e.footnoteInset,n==="secondary"?e.footnoteSecondary:null,n==="warning"?e.footnoteWarning:null,n==="danger"?e.footnoteDanger:null,r?e.footnoteCentered:null,l],children:o})}export function NightCard({children:o,padded:r,glass:n,style:l}){return a(u,{style:[e.card,n?e.cardGlass:null,r?e.cardPadded:null,l],children:o})}export function NightSeparator({inset:o=t.rowPadH}){return a(u,{style:[e.separator,{marginLeft:o}]})}export function NightRows({children:o,inset:r=t.rowPadH}){const n=w.toArray(o);return a(D,{children:n.map((l,c)=>f(u,{children:[c>0?a(NightSeparator,{inset:r}):null,l]},l.key??c))})}const x=56;const T=32;const m=22;const S=5;const L=x-m-S*2;export function NightSwitch({value:o,onValueChange:r,disabled:n,testID:l,accessibilityLabel:c}){const i=R(new p.Value(o?1:0)).current;k(()=>{p.timing(i,{toValue:o?1:0,duration:200,useNativeDriver:W.OS!=="web"}).start()},[o,i]);return a(h,{activeOpacity:.8,disabled:n,onPress:()=>r(!o),testID:l,accessibilityLabel:c,accessibilityRole:"switch",accessibilityState:{checked:o,disabled:n},hitSlop:{top:8,bottom:8,left:8,right:8},style:[e.switchTrack,o?e.switchTrackOn:null,n?e.switchDisabled:null],children:a(p.View,{style:[e.switchThumb,o?e.switchThumbOn:null,{transform:[{translateX:i.interpolate({inputRange:[0,1],outputRange:[0,L]})}]}]})})}export function NightChip({label:o,selected:r,onPress:n,disabled:l,icon:c,testID:i}){return f(h,{activeOpacity:.7,disabled:l||!n,onPress:n,testID:i,style:[e.chip,r?e.chipSelected:null,l?e.chipDisabled:null],children:[c,a(g,{style:[e.chipText,r?e.chipTextSelected:null],children:o})]})}export function NightButton({label:o,onPress:r,variant:n="secondary",size:l="lg",icon:c,disabled:i,fullWidth:b=true,testID:d,accessibilityLabel:s}){const C=n==="primary"?t.color.onAccent:n==="tertiary"?t.color.text:n==="destructive"?t.color.danger:t.color.accent;return f(h,{activeOpacity:.7,disabled:i,onPress:r,testID:d,accessibilityRole:"button",accessibilityLabel:s??o,accessibilityState:{disabled:!!i},style:[e.button,l==="md"?e.buttonMd:e.buttonLg,n==="primary"?e.buttonPrimary:n==="ghost"?e.buttonGhost:e.buttonPlate,b?e.buttonFullWidth:null,i?e.buttonDisabled:null],children:[c,a(g,{style:[l==="md"?e.buttonTextMd:e.buttonTextLg,{color:C}],children:o})]})}export function NightSegmented({tabs:o,activeKey:r,onChange:n,size:l="md",glass:c,testIDPrefix:i}){const b=l==="sm";return a(u,{style:[e.segmentTrack,c?e.segmentTrackGlass:null],children:o.map(d=>{const s=d.key===r;return f(h,{activeOpacity:.7,testID:i?`${i}-${d.key}`:void 0,accessibilityRole:"tab",accessibilityState:{selected:s},accessibilityLabel:d.label,onPress:()=>n(d.key),style:[e.segment,b?e.segmentSm:null,s?c?e.segmentActiveGlass:e.segmentActive:null],children:[a(g,{style:[e.segmentText,b?e.segmentTextSm:null,s?e.segmentTextActive:null],children:d.label}),s?a(u,{style:[e.segmentUnderline,b?e.segmentUnderlineSm:null]}):null]},d.key)})})}export function NightBadge({label:o,tone:r="neutral"}){const n=r==="accent"?e.badgeAccent:r==="warning"?e.badgeWarning:r==="danger"?e.badgeDanger:r==="info"?e.badgeInfo:e.badgeNeutral;const l=r==="accent"?e.badgeTextAccent:r==="warning"?e.badgeTextWarning:r==="danger"?e.badgeTextDanger:r==="info"?e.badgeTextInfo:e.badgeTextNeutral;return a(u,{style:[e.badge,n],children:a(g,{style:[e.badgeText,l],children:o})})}const e=y.create({sectionLabel:{color:t.color.textSecondary,fontSize:t.font.label,fontWeight:"600",letterSpacing:A,textTransform:"uppercase",marginBottom:8,marginLeft:t.labelInset},footnote:{color:t.color.textTertiary,fontSize:t.font.caption,fontWeight:"500",lineHeight:t.font.caption*1.4,marginTop:8},footnoteInset:{marginLeft:t.labelInset},footnoteSecondary:{color:t.color.textSecondary},footnoteWarning:{color:t.color.warning},footnoteDanger:{color:t.color.danger},footnoteCentered:{textAlign:"center",marginLeft:0},card:{backgroundColor:t.color.surface,borderRadius:t.radius.card,borderWidth:1,borderColor:t.color.border,overflow:"hidden"},cardGlass:{backgroundColor:t.color.glass,borderColor:t.color.glassBorder},cardPadded:{padding:t.cardPad,gap:10},separator:{height:y.hairlineWidth,backgroundColor:t.color.separator},switchTrack:{width:x,height:T,borderRadius:T/2,borderWidth:1,borderColor:t.color.fillTertiary,backgroundColor:t.color.surfaceElevated,paddingHorizontal:S,justifyContent:"center",overflow:"hidden"},switchTrackOn:{backgroundColor:t.color.accentFill,borderColor:t.color.accentBorderStrong},switchDisabled:{opacity:.4},switchThumb:{width:m,height:m,borderRadius:m/2,backgroundColor:t.color.knob},switchThumbOn:{backgroundColor:t.color.accent},chip:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:14,paddingVertical:9,borderRadius:t.radius.chip,borderWidth:1.5,backgroundColor:t.color.buttonSurface,borderColor:t.color.fillTertiary},chipSelected:{borderColor:t.color.accentBorderStrong},chipDisabled:{opacity:.4},chipText:{fontSize:t.font.body,fontWeight:"500",color:t.color.textSecondary},chipTextSelected:{color:t.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:t.color.accent},buttonPlate:{backgroundColor:t.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:t.color.bg,borderRadius:t.radius.row,borderWidth:1,borderColor:t.color.border,padding:3},segment:{flex:1,paddingVertical:8,alignItems:"center",justifyContent:"center",borderRadius:t.radius.segment},segmentTrackGlass:{backgroundColor:t.color.glass,borderColor:t.color.glassBorder},segmentActive:{backgroundColor:t.color.surfaceElevated},segmentActiveGlass:{backgroundColor:t.color.glassElevated},segmentText:{fontSize:t.font.caption,fontWeight:"500",color:t.color.textSecondary},segmentTextActive:{fontWeight:"600",color:t.color.text},segmentUnderline:{position:"absolute",bottom:2,width:24,height:2.5,borderRadius:1.25,backgroundColor:t.color.accent,shadowColor:t.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:t.radius.badge,alignSelf:"flex-start"},badgeText:{fontSize:t.font.micro,fontWeight:"600",letterSpacing:.5,textTransform:"uppercase"},badgeAccent:{backgroundColor:t.color.accentSoft},badgeTextAccent:{color:t.color.accent},badgeWarning:{backgroundColor:t.color.warningSoft},badgeTextWarning:{color:t.color.warning},badgeDanger:{backgroundColor:t.color.dangerSoft},badgeTextDanger:{color:t.color.danger},badgeInfo:{backgroundColor:t.color.infoSoft},badgeTextInfo:{color:t.color.info},badgeNeutral:{backgroundColor:t.color.fillSecondary},badgeTextNeutral:{color:t.color.textSecondary}});

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

@@ -1,64 +1 @@
-"use strict";
-
-/**
- * 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).
- */
-
-import { View } from "react-native";
-import { OTTO_SCENE_H, OTTO_SCENE_W, ottoSceneRuns, renderOttoScene } from "./ottoScenes.js";
-
-/** Rows 0–20 carry the art; 21–23 are headroom for hops. */
-import { jsx as _jsx } from "react/jsx-runtime";
-export const OTTO_SCENE_CROP_H = 21;
-export function OttoSceneFrame({
-  scene,
-  t = 0,
-  pixelSize,
-  crop = true,
-  style
-}) {
-  const rows = crop ? OTTO_SCENE_CROP_H : OTTO_SCENE_H;
-  const runs = ottoSceneRuns(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__*/_jsx(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__*/_jsx(View, {
-    pointerEvents: "none",
-    style: [{
-      width: OTTO_SCENE_W * pixelSize,
-      height: rows * pixelSize
-    }, style],
-    children: spans
-  });
-}
-/** Frame 0 of a scene — safe anywhere a still image would be. */
-export function OttoSceneStill(props) {
-  return /*#__PURE__*/_jsx(OttoSceneFrame, {
-    ...props,
-    t: 0
-  });
-}
+"use strict";import{View as f}from"react-native";import{OTTO_SCENE_H as l,OTTO_SCENE_W as m,ottoSceneRuns as w,renderOttoScene as y}from"./ottoScenes.js";import{jsx as n}from"react/jsx-runtime";export const OTTO_SCENE_CROP_H=21;export function OttoSceneFrame({scene:r,t:O=0,pixelSize:o,crop:h=true,style:i}){const e=h?OTTO_SCENE_CROP_H:l;const _=w(y(r,O)).filter(t=>t.y<e);const s=[];let c=-1;let u=0;for(const t of _){if(t.y!==c){c=t.y;u=0}s.push(n(f,{style:{position:"absolute",left:t.x*o,top:t.y*o,width:t.w*o,height:o,backgroundColor:t.color}},`${t.y}:${u++}`))}return n(f,{pointerEvents:"none",style:[{width:m*o,height:e*o},i],children:s})}export function OttoSceneStill(r){return n(OttoSceneFrame,{...r,t:0})}