@buoy-gg/shared-ui 7.0.41 → 7.0.43

package/lib/commonjs/ui/backgrounds/BackgroundSwitcher.js

@@ -1,354 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BackgroundSwitcher = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _lucideIcons = require("../../icons/lucide-icons.js");
-var _macOSDesignSystemColors = require("../gameUI/constants/macOSDesignSystemColors.js");
-var _backgroundStore = require("./backgroundStore.js");
-var _registry = require("./registry.js");
-var _skyClock = require("./skyClock.js");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * The ‹ prev / next › strip for choosing a background.
- *
- * Shipping mount: the dial menu's settings modal (pass `embedded` there so the
- * host card supplies the chrome). It can also be dropped at the top of a
- * tool's body while auditioning new presets — the cost of each preset shows
- * next to its name, so it doubles as the review tool it started as.
- *
- * It writes to the shared `backgroundStore`, so stepping here changes the
- * background in every tool at once.
- *
- * While Live Sky is showing, a second row appears: a WALL-clock slider that
- * scrubs the scene through the whole cycle (Live Sky applies its workday
- * remap to whatever wall time the scrub holds, same as it does to the live
- * clock). LIVE snaps back to the real clock. The scrub is quantized to
- * 5-minute steps so a drag re-renders the scene at most once per step, and it
- * is not persisted — it's a preview gesture.
- *
- * ▶ runs the cycle like a movie: one full 24h lap in 15s, starting from the
- * displayed time and finishing exactly where it began (back on LIVE if that's
- * where it was). It drives the SAME scrub value on a JS interval — ~19 5-min
- * steps a second, each one small re-render of the scene — which is fine for a
- * 15s preview gesture and is exactly what a fast drag already does.
- */
-
-const THUMB = 14;
-function formatMinutes(m) {
-  const h = Math.floor(m / 60) % 24;
-  const min = m % 60;
-  return `${String(h).padStart(2, "0")}:${String(min).padStart(2, "0")}`;
-}
-const PLAY_DURATION_MS = 15000;
-const PLAY_FRAME_MS = 50;
-const TimeSlider = /*#__PURE__*/(0, _react.memo)(function TimeSlider() {
-  const scrub = (0, _skyClock.useSkyScrub)();
-  const [trackW, setTrackW] = (0, _react.useState)(0);
-  const widthRef = (0, _react.useRef)(0);
-  const [playing, setPlaying] = (0, _react.useState)(false);
-  const playTimer = (0, _react.useRef)(null);
-  const stopPlay = () => {
-    if (playTimer.current) clearInterval(playTimer.current);
-    playTimer.current = null;
-    setPlaying(false);
-  };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  (0, _react.useEffect)(() => stopPlay, []);
-  const startPlay = () => {
-    stopPlay();
-    const now = new Date();
-    const startMinutes = (0, _skyClock.getSkyScrub)() ?? now.getHours() * 60 + now.getMinutes();
-    const wasLive = (0, _skyClock.getSkyScrub)() === null;
-    const begin = Date.now();
-    setPlaying(true);
-    playTimer.current = setInterval(() => {
-      const t = (Date.now() - begin) / PLAY_DURATION_MS;
-      if (t >= 1) {
-        stopPlay();
-        // Finish exactly where the day began.
-        (0, _skyClock.setSkyScrub)(wasLive ? null : startMinutes);
-        return;
-      }
-      (0, _skyClock.setSkyScrub)(Math.floor((startMinutes + t * 1440) % 1440 / 5) * 5);
-    }, PLAY_FRAME_MS);
-  };
-  const applyX = x => {
-    stopPlay();
-    const w = widthRef.current;
-    if (w <= 0) return;
-    const frac = Math.min(1, Math.max(0, x / w));
-    (0, _skyClock.setSkyScrub)(Math.round(frac * 1439 / 5) * 5);
-  };
-  const responder = (0, _react.useRef)(_reactNative.PanResponder.create({
-    onStartShouldSetPanResponder: () => true,
-    onMoveShouldSetPanResponder: () => true,
-    onPanResponderGrant: e => applyX(e.nativeEvent.locationX),
-    onPanResponderMove: e => applyX(e.nativeEvent.locationX)
-  })).current;
-  const now = new Date();
-  // Wall time throughout — the scene applies its own remap to this.
-  const minutes = scrub ?? now.getHours() * 60 + now.getMinutes();
-  const frac = minutes / 1440;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.sliderRow,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      onPress: () => {
-        stopPlay();
-        (0, _skyClock.setSkyScrub)(null);
-      },
-      style: [styles.live, scrub === null ? styles.liveOn : null],
-      hitSlop: HIT_SLOP,
-      accessibilityLabel: "Follow the real clock",
-      "sentry-label": "ignore background sky live",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.liveText, scrub === null ? styles.liveTextOn : null],
-        children: "LIVE"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      onPress: playing ? stopPlay : startPlay,
-      style: [styles.live, playing ? styles.playOn : null],
-      hitSlop: HIT_SLOP,
-      accessibilityLabel: playing ? "Stop the day cycle" : "Play the full day in 15 seconds",
-      "sentry-label": "ignore background sky play",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.liveText, playing ? styles.playTextOn : null],
-        children: playing ? "■" : "▶"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.track,
-      onLayout: e => {
-        widthRef.current = e.nativeEvent.layout.width;
-        setTrackW(e.nativeEvent.layout.width);
-      },
-      ...responder.panHandlers,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.trackBar,
-        pointerEvents: "none"
-      }), trackW > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        pointerEvents: "none",
-        style: [styles.thumb, scrub === null ? null : styles.thumbScrub, {
-          left: frac * trackW - THUMB / 2
-        }]
-      }) : null]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: styles.time,
-      children: formatMinutes(minutes)
-    })]
-  });
-});
-const BackgroundSwitcher = exports.BackgroundSwitcher = /*#__PURE__*/(0, _react.memo)(function BackgroundSwitcher({
-  embedded = false
-}) {
-  const {
-    id,
-    index,
-    count,
-    next,
-    previous,
-    setId
-  } = (0, _backgroundStore.useToolBackground)();
-  const preset = (0, _registry.getPreset)(id);
-  const counterpart = preset.counterpart;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: embedded ? styles.rootEmbedded : styles.root,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.row,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        onPress: previous,
-        style: styles.step,
-        hitSlop: HIT_SLOP,
-        accessibilityLabel: "Previous background",
-        "sentry-label": "ignore background previous",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.ChevronLeft, {
-          size: 16,
-          color: _macOSDesignSystemColors.macOSColors.text.secondary
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.center,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.titleRow,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.Palette, {
-            size: 11,
-            color: _macOSDesignSystemColors.macOSColors.semantic.info
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.title,
-            numberOfLines: 1,
-            children: preset.label
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-            style: styles.counter,
-            children: [index + 1, "/", count]
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.blurb,
-          numberOfLines: 1,
-          children: preset.blurb
-        })]
-      }), counterpart ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        onPress: () => setId(counterpart.id),
-        style: styles.motion,
-        hitSlop: HIT_SLOP,
-        accessibilityLabel: `Switch to ${counterpart.id} background`,
-        "sentry-label": "ignore background counterpart",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.motionText,
-          children: counterpart.label
-        })
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        onPress: next,
-        style: styles.step,
-        hitSlop: HIT_SLOP,
-        accessibilityLabel: "Next background",
-        "sentry-label": "ignore background next",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.ChevronRight, {
-          size: 16,
-          color: _macOSDesignSystemColors.macOSColors.text.secondary
-        })
-      })]
-    }), id === "livesky" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(TimeSlider, {}) : null]
-  });
-});
-const HIT_SLOP = {
-  top: 8,
-  bottom: 8,
-  left: 8,
-  right: 8
-};
-const styles = _reactNative.StyleSheet.create({
-  root: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    marginHorizontal: 8,
-    marginTop: 6,
-    marginBottom: 2,
-    borderRadius: 10,
-    borderWidth: 1,
-    borderColor: _macOSDesignSystemColors.macOSColors.border.default,
-    // Deliberately translucent: the strip sits ON the background it is
-    // previewing, so you can see the field through it.
-    backgroundColor: "rgba(26,26,28,0.72)"
-  },
-  rootEmbedded: {
-    // The host card supplies border/fill/margins.
-  },
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  step: {
-    width: 28,
-    height: 28,
-    borderRadius: 8,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: "rgba(38,38,42,0.8)",
-    borderWidth: 1,
-    borderColor: _macOSDesignSystemColors.macOSColors.border.default
-  },
-  center: {
-    flex: 1,
-    minWidth: 0
-  },
-  titleRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 5
-  },
-  title: {
-    color: _macOSDesignSystemColors.macOSColors.text.primary,
-    fontSize: 12,
-    fontWeight: "600"
-  },
-  counter: {
-    color: _macOSDesignSystemColors.macOSColors.text.muted,
-    fontSize: 10,
-    fontVariant: ["tabular-nums"]
-  },
-  blurb: {
-    color: _macOSDesignSystemColors.macOSColors.text.secondary,
-    fontSize: 10,
-    marginTop: 1
-  },
-  motion: {
-    paddingHorizontal: 7,
-    paddingVertical: 4,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: _macOSDesignSystemColors.macOSColors.border.default,
-    backgroundColor: "rgba(38,38,42,0.8)"
-  },
-  motionText: {
-    fontSize: 9,
-    fontWeight: "700",
-    letterSpacing: 0.6,
-    color: _macOSDesignSystemColors.macOSColors.text.muted
-  },
-  sliderRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginTop: 7
-  },
-  live: {
-    paddingHorizontal: 7,
-    paddingVertical: 3,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: _macOSDesignSystemColors.macOSColors.border.default,
-    backgroundColor: "rgba(38,38,42,0.8)"
-  },
-  liveOn: {
-    borderColor: _macOSDesignSystemColors.macOSColors.semantic.success + "55",
-    backgroundColor: _macOSDesignSystemColors.macOSColors.semantic.successBackground
-  },
-  liveText: {
-    fontSize: 9,
-    fontWeight: "700",
-    letterSpacing: 0.6,
-    color: _macOSDesignSystemColors.macOSColors.text.muted
-  },
-  liveTextOn: {
-    color: _macOSDesignSystemColors.macOSColors.semantic.success
-  },
-  playOn: {
-    borderColor: _macOSDesignSystemColors.macOSColors.semantic.info + "55",
-    backgroundColor: _macOSDesignSystemColors.macOSColors.semantic.infoBackground
-  },
-  playTextOn: {
-    color: _macOSDesignSystemColors.macOSColors.semantic.info
-  },
-  track: {
-    flex: 1,
-    height: 24,
-    justifyContent: "center"
-  },
-  trackBar: {
-    height: 3,
-    borderRadius: 1.5,
-    backgroundColor: "rgba(120,130,150,0.35)"
-  },
-  thumb: {
-    position: "absolute",
-    top: (24 - THUMB) / 2,
-    width: THUMB,
-    height: THUMB,
-    borderRadius: THUMB / 2,
-    backgroundColor: _macOSDesignSystemColors.macOSColors.text.secondary,
-    borderWidth: 1,
-    borderColor: "rgba(255,255,255,0.5)"
-  },
-  thumbScrub: {
-    backgroundColor: _macOSDesignSystemColors.macOSColors.semantic.info
-  },
-  time: {
-    color: _macOSDesignSystemColors.macOSColors.text.secondary,
-    fontSize: 10,
-    fontVariant: ["tabular-nums"],
-    width: 32,
-    textAlign: "right"
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.BackgroundSwitcher=void 0;var _react=require("react");var _reactNative=require("react-native");var _lucideIcons=require("../../icons/lucide-icons.js");var _macOSDesignSystemColors=require("../gameUI/constants/macOSDesignSystemColors.js");var _backgroundStore=require("./backgroundStore.js");var _registry=require("./registry.js");var _skyClock=require("./skyClock.js");var _jsxRuntime=require("react/jsx-runtime");const THUMB=14;function formatMinutes(a){const r=Math.floor(a/60)%24;const o=a%60;return`${String(r).padStart(2,"0")}:${String(o).padStart(2,"0")}`}const PLAY_DURATION_MS=15e3;const PLAY_FRAME_MS=50;const TimeSlider=(0,_react.memo)(function a(){const r=(0,_skyClock.useSkyScrub)();const[o,d]=(0,_react.useState)(0);const c=(0,_react.useRef)(0);const[n,u]=(0,_react.useState)(false);const s=(0,_react.useRef)(null);const t=()=>{if(s.current)clearInterval(s.current);s.current=null;u(false)};(0,_react.useEffect)(()=>t,[]);const l=()=>{t();const e=new Date;const i=(0,_skyClock.getSkyScrub)()??e.getHours()*60+e.getMinutes();const b=(0,_skyClock.getSkyScrub)()===null;const p=Date.now();u(true);s.current=setInterval(()=>{const m=(Date.now()-p)/PLAY_DURATION_MS;if(m>=1){t();(0,_skyClock.setSkyScrub)(b?null:i);return}(0,_skyClock.setSkyScrub)(Math.floor((i+m*1440)%1440/5)*5)},PLAY_FRAME_MS)};const g=e=>{t();const i=c.current;if(i<=0)return;const b=Math.min(1,Math.max(0,e/i));(0,_skyClock.setSkyScrub)(Math.round(b*1439/5)*5)};const h=(0,_react.useRef)(_reactNative.PanResponder.create({onStartShouldSetPanResponder:()=>true,onMoveShouldSetPanResponder:()=>true,onPanResponderGrant:e=>g(e.nativeEvent.locationX),onPanResponderMove:e=>g(e.nativeEvent.locationX)})).current;const y=new Date;const S=r??y.getHours()*60+y.getMinutes();const x=S/1440;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.sliderRow,children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>{t();(0,_skyClock.setSkyScrub)(null)},style:[styles.live,r===null?styles.liveOn:null],hitSlop:HIT_SLOP,accessibilityLabel:"Follow the real clock","sentry-label":"ignore background sky live",children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.liveText,r===null?styles.liveTextOn:null],children:"LIVE"})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:n?t:l,style:[styles.live,n?styles.playOn:null],hitSlop:HIT_SLOP,accessibilityLabel:n?"Stop the day cycle":"Play the full day in 15 seconds","sentry-label":"ignore background sky play",children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.liveText,n?styles.playTextOn:null],children:n?"\u25A0":"\u25B6"})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.track,onLayout:e=>{c.current=e.nativeEvent.layout.width;d(e.nativeEvent.layout.width)},...h.panHandlers,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.trackBar,pointerEvents:"none"}),o>0?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[styles.thumb,r===null?null:styles.thumbScrub,{left:x*o-THUMB/2}]}):null]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.time,children:formatMinutes(S)})]})});const BackgroundSwitcher=exports.BackgroundSwitcher=(0,_react.memo)(function a({embedded:r=false}){const{id:o,index:d,count:c,next:n,previous:u,setId:s}=(0,_backgroundStore.useToolBackground)();const t=(0,_registry.getPreset)(o);const l=t.counterpart;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:r?styles.rootEmbedded:styles.root,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.row,children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:u,style:styles.step,hitSlop:HIT_SLOP,accessibilityLabel:"Previous background","sentry-label":"ignore background previous",children:(0,_jsxRuntime.jsx)(_lucideIcons.ChevronLeft,{size:16,color:_macOSDesignSystemColors.macOSColors.text.secondary})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.center,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.titleRow,children:[(0,_jsxRuntime.jsx)(_lucideIcons.Palette,{size:11,color:_macOSDesignSystemColors.macOSColors.semantic.info}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.title,numberOfLines:1,children:t.label}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.counter,children:[d+1,"/",c]})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.blurb,numberOfLines:1,children:t.blurb})]}),l?(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>s(l.id),style:styles.motion,hitSlop:HIT_SLOP,accessibilityLabel:`Switch to ${l.id} background`,"sentry-label":"ignore background counterpart",children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.motionText,children:l.label})}):null,(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:n,style:styles.step,hitSlop:HIT_SLOP,accessibilityLabel:"Next background","sentry-label":"ignore background next",children:(0,_jsxRuntime.jsx)(_lucideIcons.ChevronRight,{size:16,color:_macOSDesignSystemColors.macOSColors.text.secondary})})]}),o==="livesky"?(0,_jsxRuntime.jsx)(TimeSlider,{}):null]})});const HIT_SLOP={top:8,bottom:8,left:8,right:8};const styles=_reactNative.StyleSheet.create({root:{paddingHorizontal:8,paddingVertical:6,marginHorizontal:8,marginTop:6,marginBottom:2,borderRadius:10,borderWidth:1,borderColor:_macOSDesignSystemColors.macOSColors.border.default,backgroundColor:"rgba(26,26,28,0.72)"},rootEmbedded:{},row:{flexDirection:"row",alignItems:"center",gap:8},step:{width:28,height:28,borderRadius:8,alignItems:"center",justifyContent:"center",backgroundColor:"rgba(38,38,42,0.8)",borderWidth:1,borderColor:_macOSDesignSystemColors.macOSColors.border.default},center:{flex:1,minWidth:0},titleRow:{flexDirection:"row",alignItems:"center",gap:5},title:{color:_macOSDesignSystemColors.macOSColors.text.primary,fontSize:12,fontWeight:"600"},counter:{color:_macOSDesignSystemColors.macOSColors.text.muted,fontSize:10,fontVariant:["tabular-nums"]},blurb:{color:_macOSDesignSystemColors.macOSColors.text.secondary,fontSize:10,marginTop:1},motion:{paddingHorizontal:7,paddingVertical:4,borderRadius:6,borderWidth:1,borderColor:_macOSDesignSystemColors.macOSColors.border.default,backgroundColor:"rgba(38,38,42,0.8)"},motionText:{fontSize:9,fontWeight:"700",letterSpacing:.6,color:_macOSDesignSystemColors.macOSColors.text.muted},sliderRow:{flexDirection:"row",alignItems:"center",gap:8,marginTop:7},live:{paddingHorizontal:7,paddingVertical:3,borderRadius:6,borderWidth:1,borderColor:_macOSDesignSystemColors.macOSColors.border.default,backgroundColor:"rgba(38,38,42,0.8)"},liveOn:{borderColor:_macOSDesignSystemColors.macOSColors.semantic.success+"55",backgroundColor:_macOSDesignSystemColors.macOSColors.semantic.successBackground},liveText:{fontSize:9,fontWeight:"700",letterSpacing:.6,color:_macOSDesignSystemColors.macOSColors.text.muted},liveTextOn:{color:_macOSDesignSystemColors.macOSColors.semantic.success},playOn:{borderColor:_macOSDesignSystemColors.macOSColors.semantic.info+"55",backgroundColor:_macOSDesignSystemColors.macOSColors.semantic.infoBackground},playTextOn:{color:_macOSDesignSystemColors.macOSColors.semantic.info},track:{flex:1,height:24,justifyContent:"center"},trackBar:{height:3,borderRadius:1.5,backgroundColor:"rgba(120,130,150,0.35)"},thumb:{position:"absolute",top:(24-THUMB)/2,width:THUMB,height:THUMB,borderRadius:THUMB/2,backgroundColor:_macOSDesignSystemColors.macOSColors.text.secondary,borderWidth:1,borderColor:"rgba(255,255,255,0.5)"},thumbScrub:{backgroundColor:_macOSDesignSystemColors.macOSColors.semantic.info},time:{color:_macOSDesignSystemColors.macOSColors.text.secondary,fontSize:10,fontVariant:["tabular-nums"],width:32,textAlign:"right"}});

package/lib/commonjs/ui/backgrounds/ToolBackground.js

@@ -1,76 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ToolBackground = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _absoluteFill = require("../../utils/absoluteFill.js");
-var _backgroundStore = require("./backgroundStore.js");
-var _registry = require("./registry.js");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Drop-in animated backdrop for a Buoy tool surface.
- *
- * Mount it as the FIRST child of a tool's body container and everything after
- * it draws on top:
- *
- *   <View style={styles.container}>
- *     <ToolBackground />
- *     ...screens...
- *   </View>
- *
- * It is `position: absolute` + `pointerEvents: "none"`, so it never affects
- * layout and never eats a touch. The preset comes from the shared persisted
- * selection (`backgroundStore`), so switching it in one tool switches it in all
- * of them.
- */
-
-/**
- * Round the measured size into 8px buckets. Presets lay out from width/height,
- * so an unbucketed measurement would rebuild the whole field on every frame of
- * a modal resize drag; at this granularity nobody can see the difference and a
- * drag costs a handful of rebuilds instead of hundreds.
- */
-const bucket = n => Math.max(0, Math.ceil(n / 8) * 8);
-const ToolBackground = exports.ToolBackground = /*#__PURE__*/(0, _react.memo)(function ToolBackground({
-  id,
-  motion,
-  opacity = 1,
-  focus
-}) {
-  const shared = (0, _backgroundStore.useToolBackground)();
-  const [size, setSize] = (0, _react.useState)({
-    width: 0,
-    height: 0
-  });
-  const onLayout = (0, _react.useCallback)(event => {
-    const {
-      width,
-      height
-    } = event.nativeEvent.layout;
-    const next = {
-      width: bucket(width),
-      height: bucket(height)
-    };
-    setSize(prev => prev.width === next.width && prev.height === next.height ? prev : next);
-  }, []);
-  const preset = (0, _registry.getPreset)(id ?? shared.id);
-  const animated = motion ?? shared.motion;
-  const Variant = preset.Component;
-  const ready = size.width > 0 && size.height > 0;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [_absoluteFill.absoluteFill, opacity === 1 ? null : {
-      opacity
-    }],
-    pointerEvents: "none",
-    onLayout: onLayout,
-    children: Variant && ready ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Variant, {
-      width: size.width,
-      height: size.height,
-      animated: animated,
-      focus: focus
-    }) : null
-  });
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.ToolBackground=void 0;var _react=require("react");var _reactNative=require("react-native");var _absoluteFill=require("../../utils/absoluteFill.js");var _backgroundStore=require("./backgroundStore.js");var _registry=require("./registry.js");var _jsxRuntime=require("react/jsx-runtime");const bucket=r=>Math.max(0,Math.ceil(r/8)*8);const ToolBackground=exports.ToolBackground=(0,_react.memo)(function r({id:s,motion:u,opacity:i=1,focus:c}){const n=(0,_backgroundStore.useToolBackground)();const[e,h]=(0,_react.useState)({width:0,height:0});const l=(0,_react.useCallback)(k=>{const{width:m,height:w}=k.nativeEvent.layout;const t={width:bucket(m),height:bucket(w)};h(o=>o.width===t.width&&o.height===t.height?o:t)},[]);const d=(0,_registry.getPreset)(s??n.id);const g=u??n.motion;const a=d.Component;const v=e.width>0&&e.height>0;return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[_absoluteFill.absoluteFill,i===1?null:{opacity:i}],pointerEvents:"none",onLayout:l,children:a&&v?(0,_jsxRuntime.jsx)(a,{width:e.width,height:e.height,animated:g,focus:c}):null})});

package/lib/commonjs/ui/backgrounds/backgroundStore.js

@@ -1,130 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.backgroundStore = exports.BACKGROUND_STORAGE_KEY = void 0;
-exports.useToolBackground = useToolBackground;
-var _react = require("react");
-var _devToolsStorageKeys = require("../../storage/devToolsStorageKeys.js");
-var _persistentStorage = require("../../utils/persistentStorage");
-var _registry = require("./registry.js");
-/**
- * The persisted background selection, shared by every tool.
- *
- * A singleton rather than context so a tool anywhere in the tree — modal,
- * inline desktop panel, bottom sheet — reads the same choice without a provider
- * having to wrap it. Same shape as `ignoredPatternsStore`: subscribe/notify,
- * best-effort persistence, a dirty flag so a slow initial read can't clobber a
- * choice the user already made.
- */
-
-// v3: bumped when the default became "off" (backgrounds are opt-in now), so
-// devices that stepped the switcher during the (unreleased) audition rounds
-// re-default to none instead of keeping a pre-release pick forever. Earlier
-// keys are simply abandoned, same as v1 was.
-const KEY = `${_devToolsStorageKeys.devToolsStorageKeys.base}_tool_background_v3`;
-
-/** The persisted-selection key, exported so a host can ask "has the user ever
- * picked a background?" (the desktop's first-run hint modal reads it). */
-const BACKGROUND_STORAGE_KEY = exports.BACKGROUND_STORAGE_KEY = KEY;
-
-// Motion is deliberately NOT persisted: the switcher no longer offers a
-// motion toggle, so every session starts animated. `setMotion` survives as a
-// session-only seam (bench harnesses, a tool forcing stillness).
-
-function isValidId(value) {
-  return typeof value === "string" && _registry.BACKGROUND_PRESETS.some(p => p.id === value);
-}
-class BackgroundStore {
-  id = _registry.DEFAULT_BACKGROUND;
-  motion = true;
-  listeners = new Set();
-  loadPromise = null;
-  dirty = false;
-  getId() {
-    return this.id;
-  }
-  getMotion() {
-    return this.motion;
-  }
-  subscribe(listener) {
-    this.listeners.add(listener);
-    void this.load();
-    return () => {
-      this.listeners.delete(listener);
-    };
-  }
-  notify() {
-    for (const listener of this.listeners) listener();
-  }
-  load() {
-    if (this.loadPromise) return this.loadPromise;
-    this.loadPromise = (async () => {
-      try {
-        const raw = await _persistentStorage.persistentStorage.getItem(KEY);
-        if (!raw || this.dirty) return;
-        const parsed = JSON.parse(raw);
-        // The standalone Meteors preset was folded into Deep Field — re-home
-        // anyone still persisted on it rather than dropping them to the default.
-        const id = parsed.id === "meteors" ? "deepfield" : parsed.id;
-        if (isValidId(id)) this.id = id;
-        this.notify();
-      } catch {
-        // A missing or corrupt entry just means "use the default".
-      }
-    })();
-    return this.loadPromise;
-  }
-  persist() {
-    this.dirty = true;
-    const payload = {
-      id: this.id
-    };
-    void _persistentStorage.persistentStorage.setItem(KEY, JSON.stringify(payload)).catch(() => {});
-  }
-  setId(id) {
-    if (this.id === id) return;
-    this.id = id;
-    this.persist();
-    this.notify();
-  }
-
-  /** Step through the catalogue; `delta` is +1 (next) or -1 (previous). */
-  step(delta) {
-    this.setId((0, _registry.presetAt)((0, _registry.presetIndex)(this.id) + delta).id);
-  }
-  setMotion(motion) {
-    if (this.motion === motion) return;
-    this.motion = motion;
-    this.persist();
-    this.notify();
-  }
-}
-const backgroundStore = exports.backgroundStore = new BackgroundStore();
-/** Subscribe a component to the current background selection. */
-function useToolBackground() {
-  const [id, setLocalId] = (0, _react.useState)(() => backgroundStore.getId());
-  const [motion, setLocalMotion] = (0, _react.useState)(() => backgroundStore.getMotion());
-  (0, _react.useEffect)(() => backgroundStore.subscribe(() => {
-    setLocalId(backgroundStore.getId());
-    setLocalMotion(backgroundStore.getMotion());
-  }), []);
-  return {
-    id,
-    motion,
-    index: (0, _registry.presetIndex)(id),
-    count: _registry.BACKGROUND_PRESETS.length,
-    setId: setId,
-    next: next,
-    previous: previous,
-    setMotion: setMotion
-  };
-}
-
-// Module-scope identities so the returned object's callbacks never change and
-// consumers can hand them straight to a memoized button.
-const setId = id => backgroundStore.setId(id);
-const next = () => backgroundStore.step(1);
-const previous = () => backgroundStore.step(-1);
-const setMotion = motion => backgroundStore.setMotion(motion);
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.backgroundStore=exports.BACKGROUND_STORAGE_KEY=void 0;exports.useToolBackground=useToolBackground;var _react=require("react");var _devToolsStorageKeys=require("../../storage/devToolsStorageKeys.js");var _persistentStorage=require("../../utils/persistentStorage");var _registry=require("./registry.js");const KEY=`${_devToolsStorageKeys.devToolsStorageKeys.base}_tool_background_v3`;const BACKGROUND_STORAGE_KEY=exports.BACKGROUND_STORAGE_KEY=KEY;function isValidId(e){return typeof e==="string"&&_registry.BACKGROUND_PRESETS.some(t=>t.id===e)}class BackgroundStore{id=_registry.DEFAULT_BACKGROUND;motion=true;listeners=new Set;loadPromise=null;dirty=false;getId(){return this.id}getMotion(){return this.motion}subscribe(t){this.listeners.add(t);void this.load();return()=>{this.listeners.delete(t)}}notify(){for(const t of this.listeners)t()}load(){if(this.loadPromise)return this.loadPromise;this.loadPromise=(async()=>{try{const t=await _persistentStorage.persistentStorage.getItem(KEY);if(!t||this.dirty)return;const s=JSON.parse(t);const o=s.id==="meteors"?"deepfield":s.id;if(isValidId(o))this.id=o;this.notify()}catch{}})();return this.loadPromise}persist(){this.dirty=true;const t={id:this.id};void _persistentStorage.persistentStorage.setItem(KEY,JSON.stringify(t)).catch(()=>{})}setId(t){if(this.id===t)return;this.id=t;this.persist();this.notify()}step(t){this.setId((0,_registry.presetAt)((0,_registry.presetIndex)(this.id)+t).id)}setMotion(t){if(this.motion===t)return;this.motion=t;this.persist();this.notify()}}const backgroundStore=exports.backgroundStore=new BackgroundStore;function useToolBackground(){const[e,t]=(0,_react.useState)(()=>backgroundStore.getId());const[s,o]=(0,_react.useState)(()=>backgroundStore.getMotion());(0,_react.useEffect)(()=>backgroundStore.subscribe(()=>{t(backgroundStore.getId());o(backgroundStore.getMotion())}),[]);return{id:e,motion:s,index:(0,_registry.presetIndex)(e),count:_registry.BACKGROUND_PRESETS.length,setId,next,previous,setMotion}}const setId=e=>backgroundStore.setId(e);const next=()=>backgroundStore.step(1);const previous=()=>backgroundStore.step(-1);const setMotion=e=>backgroundStore.setMotion(e);