@buoy-gg/shared-ui 7.0.41 → 7.0.43

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

@@ -1,350 +1 @@
-"use strict";
-
-/**
- * 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.
- */
-
-import { memo, useEffect, useRef, useState } from "react";
-import { PanResponder, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { ChevronLeft, ChevronRight, Palette } from "../../icons/lucide-icons.js";
-import { macOSColors } from "../gameUI/constants/macOSDesignSystemColors.js";
-import { useToolBackground } from "./backgroundStore.js";
-import { getPreset } from "./registry.js";
-import { getSkyScrub, setSkyScrub, useSkyScrub } from "./skyClock.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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__*/memo(function TimeSlider() {
-  const scrub = useSkyScrub();
-  const [trackW, setTrackW] = useState(0);
-  const widthRef = useRef(0);
-  const [playing, setPlaying] = useState(false);
-  const playTimer = useRef(null);
-  const stopPlay = () => {
-    if (playTimer.current) clearInterval(playTimer.current);
-    playTimer.current = null;
-    setPlaying(false);
-  };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => stopPlay, []);
-  const startPlay = () => {
-    stopPlay();
-    const now = new Date();
-    const startMinutes = getSkyScrub() ?? now.getHours() * 60 + now.getMinutes();
-    const wasLive = 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.
-        setSkyScrub(wasLive ? null : startMinutes);
-        return;
-      }
-      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));
-    setSkyScrub(Math.round(frac * 1439 / 5) * 5);
-  };
-  const responder = useRef(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__*/_jsxs(View, {
-    style: styles.sliderRow,
-    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-      onPress: () => {
-        stopPlay();
-        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__*/_jsx(Text, {
-        style: [styles.liveText, scrub === null ? styles.liveTextOn : null],
-        children: "LIVE"
-      })
-    }), /*#__PURE__*/_jsx(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__*/_jsx(Text, {
-        style: [styles.liveText, playing ? styles.playTextOn : null],
-        children: playing ? "■" : "▶"
-      })
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.track,
-      onLayout: e => {
-        widthRef.current = e.nativeEvent.layout.width;
-        setTrackW(e.nativeEvent.layout.width);
-      },
-      ...responder.panHandlers,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.trackBar,
-        pointerEvents: "none"
-      }), trackW > 0 ? /*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
-        style: [styles.thumb, scrub === null ? null : styles.thumbScrub, {
-          left: frac * trackW - THUMB / 2
-        }]
-      }) : null]
-    }), /*#__PURE__*/_jsx(Text, {
-      style: styles.time,
-      children: formatMinutes(minutes)
-    })]
-  });
-});
-export const BackgroundSwitcher = /*#__PURE__*/memo(function BackgroundSwitcher({
-  embedded = false
-}) {
-  const {
-    id,
-    index,
-    count,
-    next,
-    previous,
-    setId
-  } = useToolBackground();
-  const preset = getPreset(id);
-  const counterpart = preset.counterpart;
-  return /*#__PURE__*/_jsxs(View, {
-    style: embedded ? styles.rootEmbedded : styles.root,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.row,
-      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: previous,
-        style: styles.step,
-        hitSlop: HIT_SLOP,
-        accessibilityLabel: "Previous background",
-        "sentry-label": "ignore background previous",
-        children: /*#__PURE__*/_jsx(ChevronLeft, {
-          size: 16,
-          color: macOSColors.text.secondary
-        })
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.center,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.titleRow,
-          children: [/*#__PURE__*/_jsx(Palette, {
-            size: 11,
-            color: macOSColors.semantic.info
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.title,
-            numberOfLines: 1,
-            children: preset.label
-          }), /*#__PURE__*/_jsxs(Text, {
-            style: styles.counter,
-            children: [index + 1, "/", count]
-          })]
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.blurb,
-          numberOfLines: 1,
-          children: preset.blurb
-        })]
-      }), counterpart ? /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: () => setId(counterpart.id),
-        style: styles.motion,
-        hitSlop: HIT_SLOP,
-        accessibilityLabel: `Switch to ${counterpart.id} background`,
-        "sentry-label": "ignore background counterpart",
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.motionText,
-          children: counterpart.label
-        })
-      }) : null, /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: next,
-        style: styles.step,
-        hitSlop: HIT_SLOP,
-        accessibilityLabel: "Next background",
-        "sentry-label": "ignore background next",
-        children: /*#__PURE__*/_jsx(ChevronRight, {
-          size: 16,
-          color: macOSColors.text.secondary
-        })
-      })]
-    }), id === "livesky" ? /*#__PURE__*/_jsx(TimeSlider, {}) : null]
-  });
-});
-const HIT_SLOP = {
-  top: 8,
-  bottom: 8,
-  left: 8,
-  right: 8
-};
-const styles = StyleSheet.create({
-  root: {
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    marginHorizontal: 8,
-    marginTop: 6,
-    marginBottom: 2,
-    borderRadius: 10,
-    borderWidth: 1,
-    borderColor: 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: macOSColors.border.default
-  },
-  center: {
-    flex: 1,
-    minWidth: 0
-  },
-  titleRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 5
-  },
-  title: {
-    color: macOSColors.text.primary,
-    fontSize: 12,
-    fontWeight: "600"
-  },
-  counter: {
-    color: macOSColors.text.muted,
-    fontSize: 10,
-    fontVariant: ["tabular-nums"]
-  },
-  blurb: {
-    color: macOSColors.text.secondary,
-    fontSize: 10,
-    marginTop: 1
-  },
-  motion: {
-    paddingHorizontal: 7,
-    paddingVertical: 4,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: macOSColors.border.default,
-    backgroundColor: "rgba(38,38,42,0.8)"
-  },
-  motionText: {
-    fontSize: 9,
-    fontWeight: "700",
-    letterSpacing: 0.6,
-    color: macOSColors.text.muted
-  },
-  sliderRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginTop: 7
-  },
-  live: {
-    paddingHorizontal: 7,
-    paddingVertical: 3,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: macOSColors.border.default,
-    backgroundColor: "rgba(38,38,42,0.8)"
-  },
-  liveOn: {
-    borderColor: macOSColors.semantic.success + "55",
-    backgroundColor: macOSColors.semantic.successBackground
-  },
-  liveText: {
-    fontSize: 9,
-    fontWeight: "700",
-    letterSpacing: 0.6,
-    color: macOSColors.text.muted
-  },
-  liveTextOn: {
-    color: macOSColors.semantic.success
-  },
-  playOn: {
-    borderColor: macOSColors.semantic.info + "55",
-    backgroundColor: macOSColors.semantic.infoBackground
-  },
-  playTextOn: {
-    color: 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: macOSColors.text.secondary,
-    borderWidth: 1,
-    borderColor: "rgba(255,255,255,0.5)"
-  },
-  thumbScrub: {
-    backgroundColor: macOSColors.semantic.info
-  },
-  time: {
-    color: macOSColors.text.secondary,
-    fontSize: 10,
-    fontVariant: ["tabular-nums"],
-    width: 32,
-    textAlign: "right"
-  }
-});
+"use strict";import{memo as M,useEffect as I,useRef as w,useState as L}from"react";import{PanResponder as B,StyleSheet as H,Text as c,TouchableOpacity as h,View as i}from"react-native";import{ChevronLeft as D,ChevronRight as V,Palette as _}from"../../icons/lucide-icons.js";import{macOSColors as t}from"../gameUI/constants/macOSDesignSystemColors.js";import{useToolBackground as j}from"./backgroundStore.js";import{getPreset as A}from"./registry.js";import{getSkyScrub as O,setSkyScrub as k,useSkyScrub as X}from"./skyClock.js";import{jsx as r,jsxs as d}from"react/jsx-runtime";const m=14;function $(p){const l=Math.floor(p/60)%24;const a=p%60;return`${String(l).padStart(2,"0")}:${String(a).padStart(2,"0")}`}const F=15e3;const N=50;const U=M(function p(){const l=X();const[a,x]=L(0);const f=w(0);const[s,S]=L(false);const u=w(null);const n=()=>{if(u.current)clearInterval(u.current);u.current=null;S(false)};I(()=>n,[]);const b=()=>{n();const o=new Date;const g=O()??o.getHours()*60+o.getMinutes();const v=O()===null;const W=Date.now();S(true);u.current=setInterval(()=>{const R=(Date.now()-W)/F;if(R>=1){n();k(v?null:g);return}k(Math.floor((g+R*1440)%1440/5)*5)},N)};const T=o=>{n();const g=f.current;if(g<=0)return;const v=Math.min(1,Math.max(0,o/g));k(Math.round(v*1439/5)*5)};const z=w(B.create({onStartShouldSetPanResponder:()=>true,onMoveShouldSetPanResponder:()=>true,onPanResponderGrant:o=>T(o.nativeEvent.locationX),onPanResponderMove:o=>T(o.nativeEvent.locationX)})).current;const C=new Date;const P=l??C.getHours()*60+C.getMinutes();const E=P/1440;return d(i,{style:e.sliderRow,children:[r(h,{onPress:()=>{n();k(null)},style:[e.live,l===null?e.liveOn:null],hitSlop:y,accessibilityLabel:"Follow the real clock","sentry-label":"ignore background sky live",children:r(c,{style:[e.liveText,l===null?e.liveTextOn:null],children:"LIVE"})}),r(h,{onPress:s?n:b,style:[e.live,s?e.playOn:null],hitSlop:y,accessibilityLabel:s?"Stop the day cycle":"Play the full day in 15 seconds","sentry-label":"ignore background sky play",children:r(c,{style:[e.liveText,s?e.playTextOn:null],children:s?"\u25A0":"\u25B6"})}),d(i,{style:e.track,onLayout:o=>{f.current=o.nativeEvent.layout.width;x(o.nativeEvent.layout.width)},...z.panHandlers,children:[r(i,{style:e.trackBar,pointerEvents:"none"}),a>0?r(i,{pointerEvents:"none",style:[e.thumb,l===null?null:e.thumbScrub,{left:E*a-m/2}]}):null]}),r(c,{style:e.time,children:$(P)})]})});export const BackgroundSwitcher=M(function p({embedded:l=false}){const{id:a,index:x,count:f,next:s,previous:S,setId:u}=j();const n=A(a);const b=n.counterpart;return d(i,{style:l?e.rootEmbedded:e.root,children:[d(i,{style:e.row,children:[r(h,{onPress:S,style:e.step,hitSlop:y,accessibilityLabel:"Previous background","sentry-label":"ignore background previous",children:r(D,{size:16,color:t.text.secondary})}),d(i,{style:e.center,children:[d(i,{style:e.titleRow,children:[r(_,{size:11,color:t.semantic.info}),r(c,{style:e.title,numberOfLines:1,children:n.label}),d(c,{style:e.counter,children:[x+1,"/",f]})]}),r(c,{style:e.blurb,numberOfLines:1,children:n.blurb})]}),b?r(h,{onPress:()=>u(b.id),style:e.motion,hitSlop:y,accessibilityLabel:`Switch to ${b.id} background`,"sentry-label":"ignore background counterpart",children:r(c,{style:e.motionText,children:b.label})}):null,r(h,{onPress:s,style:e.step,hitSlop:y,accessibilityLabel:"Next background","sentry-label":"ignore background next",children:r(V,{size:16,color:t.text.secondary})})]}),a==="livesky"?r(U,{}):null]})});const y={top:8,bottom:8,left:8,right:8};const e=H.create({root:{paddingHorizontal:8,paddingVertical:6,marginHorizontal:8,marginTop:6,marginBottom:2,borderRadius:10,borderWidth:1,borderColor:t.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:t.border.default},center:{flex:1,minWidth:0},titleRow:{flexDirection:"row",alignItems:"center",gap:5},title:{color:t.text.primary,fontSize:12,fontWeight:"600"},counter:{color:t.text.muted,fontSize:10,fontVariant:["tabular-nums"]},blurb:{color:t.text.secondary,fontSize:10,marginTop:1},motion:{paddingHorizontal:7,paddingVertical:4,borderRadius:6,borderWidth:1,borderColor:t.border.default,backgroundColor:"rgba(38,38,42,0.8)"},motionText:{fontSize:9,fontWeight:"700",letterSpacing:.6,color:t.text.muted},sliderRow:{flexDirection:"row",alignItems:"center",gap:8,marginTop:7},live:{paddingHorizontal:7,paddingVertical:3,borderRadius:6,borderWidth:1,borderColor:t.border.default,backgroundColor:"rgba(38,38,42,0.8)"},liveOn:{borderColor:t.semantic.success+"55",backgroundColor:t.semantic.successBackground},liveText:{fontSize:9,fontWeight:"700",letterSpacing:.6,color:t.text.muted},liveTextOn:{color:t.semantic.success},playOn:{borderColor:t.semantic.info+"55",backgroundColor:t.semantic.infoBackground},playTextOn:{color:t.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-m)/2,width:m,height:m,borderRadius:m/2,backgroundColor:t.text.secondary,borderWidth:1,borderColor:"rgba(255,255,255,0.5)"},thumbScrub:{backgroundColor:t.semantic.info},time:{color:t.text.secondary,fontSize:10,fontVariant:["tabular-nums"],width:32,textAlign:"right"}});

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

@@ -1,72 +1 @@
-"use strict";
-
-/**
- * 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.
- */
-
-import { memo, useCallback, useState } from "react";
-import { View } from "react-native";
-import { absoluteFill } from "../../utils/absoluteFill.js";
-import { useToolBackground } from "./backgroundStore.js";
-import { getPreset } from "./registry.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * 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);
-export const ToolBackground = /*#__PURE__*/memo(function ToolBackground({
-  id,
-  motion,
-  opacity = 1,
-  focus
-}) {
-  const shared = useToolBackground();
-  const [size, setSize] = useState({
-    width: 0,
-    height: 0
-  });
-  const onLayout = 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 = getPreset(id ?? shared.id);
-  const animated = motion ?? shared.motion;
-  const Variant = preset.Component;
-  const ready = size.width > 0 && size.height > 0;
-  return /*#__PURE__*/_jsx(View, {
-    style: [absoluteFill, opacity === 1 ? null : {
-      opacity
-    }],
-    pointerEvents: "none",
-    onLayout: onLayout,
-    children: Variant && ready ? /*#__PURE__*/_jsx(Variant, {
-      width: size.width,
-      height: size.height,
-      animated: animated,
-      focus: focus
-    }) : null
-  });
-});
+"use strict";import{memo as y,useCallback as b,useState as B}from"react";import{View as T}from"react-native";import{absoluteFill as j}from"../../utils/absoluteFill.js";import{useToolBackground as z}from"./backgroundStore.js";import{getPreset as C}from"./registry.js";import{jsx as r}from"react/jsx-runtime";const a=i=>Math.max(0,Math.ceil(i/8)*8);export const ToolBackground=y(function i({id:c,motion:m,opacity:n=1,focus:d}){const h=z();const[t,u]=B({width:0,height:0});const l=b(p=>{const{width:k,height:x}=p.nativeEvent.layout;const o={width:a(k),height:a(x)};u(e=>e.width===o.width&&e.height===o.height?e:o)},[]);const g=C(c??h.id);const w=m??h.motion;const s=g.Component;const f=t.width>0&&t.height>0;return r(T,{style:[j,n===1?null:{opacity:n}],pointerEvents:"none",onLayout:l,children:s&&f?r(s,{width:t.width,height:t.height,animated:w,focus:d}):null})});

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

@@ -1,125 +1 @@
-"use strict";
-
-/**
- * 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.
- */
-
-import { useEffect, useState } from "react";
-import { devToolsStorageKeys } from "../../storage/devToolsStorageKeys.js";
-import { persistentStorage } from "../../utils/persistentStorage";
-import { BACKGROUND_PRESETS, DEFAULT_BACKGROUND, presetAt, presetIndex } from "./registry.js";
-// 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.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). */
-export const 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" && BACKGROUND_PRESETS.some(p => p.id === value);
-}
-class BackgroundStore {
-  id = 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.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.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(presetAt(presetIndex(this.id) + delta).id);
-  }
-  setMotion(motion) {
-    if (this.motion === motion) return;
-    this.motion = motion;
-    this.persist();
-    this.notify();
-  }
-}
-export const backgroundStore = new BackgroundStore();
-/** Subscribe a component to the current background selection. */
-export function useToolBackground() {
-  const [id, setLocalId] = useState(() => backgroundStore.getId());
-  const [motion, setLocalMotion] = useState(() => backgroundStore.getMotion());
-  useEffect(() => backgroundStore.subscribe(() => {
-    setLocalId(backgroundStore.getId());
-    setLocalMotion(backgroundStore.getMotion());
-  }), []);
-  return {
-    id,
-    motion,
-    index: presetIndex(id),
-    count: 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";import{useEffect as a,useState as r}from"react";import{devToolsStorageKeys as h}from"../../storage/devToolsStorageKeys.js";import{persistentStorage as n}from"../../utils/persistentStorage";import{BACKGROUND_PRESETS as d,DEFAULT_BACKGROUND as u,presetAt as l,presetIndex as c}from"./registry.js";const o=`${h.base}_tool_background_v3`;export const BACKGROUND_STORAGE_KEY=o;function f(s){return typeof s==="string"&&d.some(t=>t.id===s)}class p{id=u;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 n.getItem(o);if(!t||this.dirty)return;const e=JSON.parse(t);const i=e.id==="meteors"?"deepfield":e.id;if(f(i))this.id=i;this.notify()}catch{}})();return this.loadPromise}persist(){this.dirty=true;const t={id:this.id};void n.setItem(o,JSON.stringify(t)).catch(()=>{})}setId(t){if(this.id===t)return;this.id=t;this.persist();this.notify()}step(t){this.setId(l(c(this.id)+t).id)}setMotion(t){if(this.motion===t)return;this.motion=t;this.persist();this.notify()}}export const backgroundStore=new p;export function useToolBackground(){const[s,t]=r(()=>backgroundStore.getId());const[e,i]=r(()=>backgroundStore.getMotion());a(()=>backgroundStore.subscribe(()=>{t(backgroundStore.getId());i(backgroundStore.getMotion())}),[]);return{id:s,motion:e,index:c(s),count:d.length,setId:m,next:g,previous:y,setMotion:I}}const m=s=>backgroundStore.setId(s);const g=()=>backgroundStore.step(1);const y=()=>backgroundStore.step(-1);const I=s=>backgroundStore.setMotion(s);

package/lib/module/ui/backgrounds/index.js

@@ -1,19 +1 @@
-"use strict";
-
-export { ToolBackground } from "./ToolBackground.js";
-export { BackgroundSwitcher } from "./BackgroundSwitcher.js";
-export { backgroundStore, BACKGROUND_STORAGE_KEY, useToolBackground } from "./backgroundStore.js";
-export { BACKGROUND_PRESETS, DEFAULT_BACKGROUND, getPreset, presetAt, presetIndex } from "./registry.js";
-// Drawing/animation primitives, exported so other Buoy chrome (the dial menu's
-// snow effect in @buoy-gg/core) can build matching effects under the same
-// native-driven performance contract instead of copying the implementations.
-export { LinearFade, RadialGlow, RasterLayer, useLoop, usePulse } from "./primitives.js";
-export { scatter, withAlpha as withBgAlpha } from "./rng.js";
-// Exported for the bg-bench harness in example-dev-build, so every measured
-// variant is the shipping component with knobs turned rather than a copy.
-export { DeepFieldTunable } from "./variants/deepField.js";
-export { MoonlightTunable } from "./variants/moonlight.js";
-export { DaylightTunable } from "./variants/daylight.js";
-export { LiveSkyTunable } from "./variants/liveSky.js";
-export { getSkyScrub, setSkyScrub, useSkyScrub } from "./skyClock.js";
-export { Wormhole } from "./variants/wormhole.js";
+"use strict";export{ToolBackground}from"./ToolBackground.js";export{BackgroundSwitcher}from"./BackgroundSwitcher.js";export{backgroundStore,BACKGROUND_STORAGE_KEY,useToolBackground}from"./backgroundStore.js";export{BACKGROUND_PRESETS,DEFAULT_BACKGROUND,getPreset,presetAt,presetIndex}from"./registry.js";export{LinearFade,RadialGlow,RasterLayer,useLoop,usePulse}from"./primitives.js";export{scatter,withAlpha as withBgAlpha}from"./rng.js";export{DeepFieldTunable}from"./variants/deepField.js";export{MoonlightTunable}from"./variants/moonlight.js";export{DaylightTunable}from"./variants/daylight.js";export{LiveSkyTunable}from"./variants/liveSky.js";export{getSkyScrub,setSkyScrub,useSkyScrub}from"./skyClock.js";export{Wormhole}from"./variants/wormhole.js";