@buoy-gg/shared-ui 7.0.40 → 7.0.42

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.js";
-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";

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

@@ -1,365 +1 @@
-"use strict";
-
-/**
- * Drawing + animation primitives for the tool backgrounds.
- *
- * HARD CONSTRAINT: Buoy's packages peer-depend on nothing but `react` and
- * `react-native`. No Skia, no Reanimated, no SVG, no gradient library — a
- * devtool cannot force a native dependency into someone's app. So every
- * background here is built out of plain `View`s plus `Animated`, and the
- * gradients/glows below are *faked* by stacking translucent layers.
- *
- * That sounds expensive. It isn't, because of two rules every preset follows:
- *
- *  1. **Every animation is native-driven.** `useNativeDriver: true` on a
- *     looping `Animated.timing` means the whole loop is handed to the UI thread
- *     once and never touches JS again — no per-frame callback, no re-render, no
- *     bridge traffic while it runs. A preset animates a handful of *layers*
- *     (transform on one parent view), never per-particle. (On web there is no
- *     native driver and the JS driver must be requested explicitly — see
- *     NATIVE_DRIVER below for why the flag can't simply be left `true`.)
- *
- *  2. **Every static layer is rasterized.** `shouldRasterizeIOS` /
- *     `renderToHardwareTextureAndroid` turn a layer of 40 dots into a single
- *     cached GPU texture, so sliding it is one composite — the same cost as
- *     sliding one view. See `RasterLayer`.
- *
- * The result: a preset costs a one-time mount of static views and then ~0
- * JS-thread work per frame. See `packages/shared/src/ui/backgrounds/README.md`.
- */
-
-import { memo, useEffect, useRef } from "react";
-import { Animated, AppState, Easing, Platform, StyleSheet, View } from "react-native";
-import { absoluteFill } from "../../utils/absoluteFill.js";
-import { flattenOver, withAlpha } from "./rng.js";
-
-// ============================================================================
-// Animation
-// ============================================================================
-
-/**
- * Ask for the native driver ONLY where the native animated module exists.
- *
- * On react-native-web (the desktop dashboard) `useNativeDriver: true` is
- * demoted to the JS driver — but `Animated.loop` trusts the config flag, not
- * the demotion: for a bare `loop(timing(...))` it takes its native-loop
- * shortcut and starts ONE plain timing whose `iterations: -1` only the
- * (absent) native module would honor. The loop plays a single pass and
- * freezes — on desktop every background stopped seconds after opening.
- * Requesting the JS driver honestly keeps loop's JS restart path in charge,
- * which is the only driver web has anyway.
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const NATIVE_DRIVER = Platform.OS !== "web";
-
-/**
- * A native-driven 0→1 loop (JS-driven on web — see NATIVE_DRIVER).
- *
- * The returned value is only ever consumed by `interpolate` inside an
- * `Animated.View` style, so React never re-renders while it runs. The loop is
- * stopped when the app backgrounds (a background animation is pure battery
- * burn) and restarted on foreground.
- */
-export function useLoop(durationMs, enabled = true) {
-  const value = useRef(new Animated.Value(0)).current;
-  useEffect(() => {
-    if (!enabled) return;
-    let anim = null;
-    const start = () => {
-      if (anim) return;
-      value.setValue(0);
-      anim = Animated.loop(Animated.timing(value, {
-        toValue: 1,
-        duration: durationMs,
-        easing: Easing.linear,
-        useNativeDriver: NATIVE_DRIVER,
-        // A decorative endless loop must never register as an interaction —
-        // the default (true) would block InteractionManager callbacks in the
-        // host app for as long as the background is mounted.
-        isInteraction: false
-      }));
-      anim.start();
-    };
-    const stop = () => {
-      anim?.stop();
-      anim = null;
-      value.setValue(0);
-    };
-    start();
-    const sub = AppState.addEventListener("change", state => {
-      if (state === "active") start();else stop();
-    });
-    return () => {
-      stop();
-      sub.remove();
-    };
-  }, [durationMs, enabled, value]);
-  return value;
-}
-
-/**
- * A native-driven 0→1→0 breathe, for glows that pulse rather than travel.
- * Same no-JS-per-frame guarantee as `useLoop`.
- */
-export function usePulse(durationMs, enabled = true) {
-  const value = useRef(new Animated.Value(0)).current;
-  useEffect(() => {
-    if (!enabled) return;
-    let anim = null;
-    const start = () => {
-      if (anim) return;
-      value.setValue(0);
-      anim = Animated.loop(Animated.sequence([Animated.timing(value, {
-        toValue: 1,
-        duration: durationMs / 2,
-        easing: Easing.inOut(Easing.quad),
-        useNativeDriver: NATIVE_DRIVER,
-        // See useLoop: endless decorative loops must not hold
-        // InteractionManager (isInteraction defaults to true).
-        isInteraction: false
-      }), Animated.timing(value, {
-        toValue: 0,
-        duration: durationMs / 2,
-        easing: Easing.inOut(Easing.quad),
-        useNativeDriver: NATIVE_DRIVER,
-        isInteraction: false
-      })]));
-      anim.start();
-    };
-    const stop = () => {
-      anim?.stop();
-      anim = null;
-    };
-    start();
-    const sub = AppState.addEventListener("change", state => {
-      if (state === "active") start();else stop();
-    });
-    return () => {
-      stop();
-      sub.remove();
-    };
-  }, [durationMs, enabled, value]);
-  return value;
-}
-
-// ============================================================================
-// Layers
-// ============================================================================
-
-/**
- * A layer whose children are static and should be flattened into one GPU
- * texture. Wrap anything that gets translated/scaled as a whole — this is what
- * makes a 40-dot star band cost the same to move as a single view.
- */
-export const RasterLayer = /*#__PURE__*/memo(function RasterLayer({
-  style,
-  raster = true,
-  children
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: style,
-    pointerEvents: "none"
-    // Both are no-ops on the platform they don't belong to, and on web
-    // (react-native-web) neither exists — there the browser already
-    // composites a transformed subtree on the GPU.
-    ,
-    shouldRasterizeIOS: raster && Platform.OS === "ios",
-    renderToHardwareTextureAndroid: raster && Platform.OS === "android",
-    children: children
-  });
-});
-
-/**
- * Fake radial gradient: concentric rounded views, each a constant per-ring
- * alpha, with radii shrinking on a curve. Alpha compositing of N equal layers
- * gives `1 - (1-a)^N` at the centre, so `a` is solved from the requested peak
- * alpha and the falloff comes from the radius curve.
- *
- * 8 rings is the sweet spot on a dark surface — below that you can see banding,
- * above it you're paying for views nobody can distinguish.
- */
-export const RadialGlow = /*#__PURE__*/memo(function RadialGlow({
-  size,
-  color,
-  alpha = 0.35,
-  rings = 8,
-  falloff = 1.7,
-  style
-}) {
-  const per = 1 - Math.pow(1 - alpha, 1 / rings);
-  const layers = [];
-  for (let i = 0; i < rings; i++) {
-    const d = size * Math.pow((rings - i) / rings, falloff);
-    layers.push(/*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        left: (size - d) / 2,
-        top: (size - d) / 2,
-        width: d,
-        height: d,
-        borderRadius: d / 2,
-        backgroundColor: withAlpha(color, per)
-      }
-    }, i));
-  }
-  return /*#__PURE__*/_jsx(View, {
-    style: [{
-      width: size,
-      height: size
-    }, style],
-    pointerEvents: "none",
-    shouldRasterizeIOS: Platform.OS === "ios",
-    renderToHardwareTextureAndroid: Platform.OS === "android",
-    children: layers
-  });
-});
-
-/**
- * Fake linear gradient: `bands` stacked strips with linearly interpolated
- * alpha. Used for scrims (keep text readable over a busy field) and for
- * horizon glows.
- *
- * TRAP (found on the Abyss wash): translucent strips must NOT overlap. An
- * overlap composites the same colour twice, doubling the alpha in a stripe at
- * every band edge — on a dark surface that draws a visible line per band, and
- * because the strips are %-sized the whole ruled pattern rescales as the
- * modal resizes. Strips here butt exactly, with a 0.08% fudge (sub-pixel at
- * any real size) so layout rounding can't open a hairline gap.
- *
- * `flattenBase`: when the fade sits DIRECTLY on a known opaque colour, pass
- * that colour — each strip is then drawn opaque via `flattenOver`, which is
- * pixel-identical, immune to seams entirely, and cheaper to composite.
- */
-export const LinearFade = /*#__PURE__*/memo(function LinearFade({
-  color,
-  from = 0,
-  to = 1,
-  bands = 14,
-  direction = "down",
-  flattenBase,
-  style
-}) {
-  const vertical = direction === "down" || direction === "up";
-  const reversed = direction === "up" || direction === "left";
-  const pct = 100 / bands;
-  const strips = [];
-  for (let i = 0; i < bands; i++) {
-    const t = (i + 0.5) / bands;
-    const a = from + (to - from) * (reversed ? 1 - t : t);
-    const fill = flattenBase ? flattenOver(color, a, flattenBase) : withAlpha(color, a);
-    strips.push(/*#__PURE__*/_jsx(View, {
-      style: vertical ? {
-        position: "absolute",
-        left: 0,
-        right: 0,
-        top: `${i * pct}%`,
-        height: `${pct + 0.08}%`,
-        backgroundColor: fill
-      } : {
-        position: "absolute",
-        top: 0,
-        bottom: 0,
-        left: `${i * pct}%`,
-        width: `${pct + 0.08}%`,
-        backgroundColor: fill
-      }
-    }, i));
-  }
-  return /*#__PURE__*/_jsx(View, {
-    style: [absoluteFill, style],
-    pointerEvents: "none",
-    children: strips
-  });
-});
-
-/**
- * Edge darkening. Four `LinearFade`s rather than a real radial vignette —
- * cheaper, and at these alphas the corners read as round anyway.
- */
-export const Vignette = /*#__PURE__*/memo(function Vignette({
-  color = "#000000",
-  alpha = 0.55,
-  spread = 0.34
-}) {
-  // Each fade fills its own positioned band, rather than trying to unset
-  // `absoluteFill`'s edges through the style array.
-  const band = `${spread * 100}%`;
-  return /*#__PURE__*/_jsxs(View, {
-    style: absoluteFill,
-    pointerEvents: "none",
-    children: [/*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        left: 0,
-        right: 0,
-        top: 0,
-        height: band
-      },
-      children: /*#__PURE__*/_jsx(LinearFade, {
-        color: color,
-        from: alpha,
-        to: 0,
-        direction: "down",
-        bands: 14
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        left: 0,
-        right: 0,
-        bottom: 0,
-        height: band
-      },
-      children: /*#__PURE__*/_jsx(LinearFade, {
-        color: color,
-        from: 0,
-        to: alpha,
-        direction: "down",
-        bands: 14
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        top: 0,
-        bottom: 0,
-        left: 0,
-        width: band
-      },
-      children: /*#__PURE__*/_jsx(LinearFade, {
-        color: color,
-        from: alpha,
-        to: 0,
-        direction: "right",
-        bands: 10
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        top: 0,
-        bottom: 0,
-        right: 0,
-        width: band
-      },
-      children: /*#__PURE__*/_jsx(LinearFade, {
-        color: color,
-        from: 0,
-        to: alpha,
-        direction: "right",
-        bands: 10
-      })
-    })]
-  });
-});
-
-/** Flat wash used as the base coat under every preset. */
-export const Base = /*#__PURE__*/memo(function Base({
-  color
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: [absoluteFill, {
-      backgroundColor: color
-    }],
-    pointerEvents: "none"
-  });
-});
-export const hairline = StyleSheet.hairlineWidth;
+"use strict";import{memo as f,useEffect as O,useRef as R}from"react";import{Animated as c,AppState as S,Easing as m,Platform as g,StyleSheet as L,View as l}from"react-native";import{absoluteFill as b}from"../../utils/absoluteFill.js";import{flattenOver as A,withAlpha as I}from"./rng.js";import{jsx as r,jsxs as T}from"react/jsx-runtime";const w=g.OS!=="web";export function useLoop(s,e=true){const t=R(new c.Value(0)).current;O(()=>{if(!e)return;let o=null;const n=()=>{if(o)return;t.setValue(0);o=c.loop(c.timing(t,{toValue:1,duration:s,easing:m.linear,useNativeDriver:w,isInteraction:false}));o.start()};const i=()=>{o?.stop();o=null;t.setValue(0)};n();const u=S.addEventListener("change",d=>{if(d==="active")n();else i()});return()=>{i();u.remove()}},[s,e,t]);return t}export function usePulse(s,e=true){const t=R(new c.Value(0)).current;O(()=>{if(!e)return;let o=null;const n=()=>{if(o)return;t.setValue(0);o=c.loop(c.sequence([c.timing(t,{toValue:1,duration:s/2,easing:m.inOut(m.quad),useNativeDriver:w,isInteraction:false}),c.timing(t,{toValue:0,duration:s/2,easing:m.inOut(m.quad),useNativeDriver:w,isInteraction:false})]));o.start()};const i=()=>{o?.stop();o=null};n();const u=S.addEventListener("change",d=>{if(d==="active")n();else i()});return()=>{i();u.remove()}},[s,e,t]);return t}export const RasterLayer=f(function s({style:e,raster:t=true,children:o}){return r(l,{style:e,pointerEvents:"none",shouldRasterizeIOS:t&&g.OS==="ios",renderToHardwareTextureAndroid:t&&g.OS==="android",children:o})});export const RadialGlow=f(function s({size:e,color:t,alpha:o=.35,rings:n=8,falloff:i=1.7,style:u}){const d=1-Math.pow(1-o,1/n);const v=[];for(let p=0;p<n;p++){const a=e*Math.pow((n-p)/n,i);v.push(r(l,{style:{position:"absolute",left:(e-a)/2,top:(e-a)/2,width:a,height:a,borderRadius:a/2,backgroundColor:I(t,d)}},p))}return r(l,{style:[{width:e,height:e},u],pointerEvents:"none",shouldRasterizeIOS:g.OS==="ios",renderToHardwareTextureAndroid:g.OS==="android",children:v})});export const LinearFade=f(function s({color:e,from:t=0,to:o=1,bands:n=14,direction:i="down",flattenBase:u,style:d}){const v=i==="down"||i==="up";const p=i==="up"||i==="left";const a=100/n;const y=[];for(let h=0;h<n;h++){const x=(h+.5)/n;const V=t+(o-t)*(p?1-x:x);const E=u?A(e,V,u):I(e,V);y.push(r(l,{style:v?{position:"absolute",left:0,right:0,top:`${h*a}%`,height:`${a+.08}%`,backgroundColor:E}:{position:"absolute",top:0,bottom:0,left:`${h*a}%`,width:`${a+.08}%`,backgroundColor:E}},h))}return r(l,{style:[b,d],pointerEvents:"none",children:y})});export const Vignette=f(function s({color:e="#000000",alpha:t=.55,spread:o=.34}){const n=`${o*100}%`;return T(l,{style:b,pointerEvents:"none",children:[r(l,{style:{position:"absolute",left:0,right:0,top:0,height:n},children:r(LinearFade,{color:e,from:t,to:0,direction:"down",bands:14})}),r(l,{style:{position:"absolute",left:0,right:0,bottom:0,height:n},children:r(LinearFade,{color:e,from:0,to:t,direction:"down",bands:14})}),r(l,{style:{position:"absolute",top:0,bottom:0,left:0,width:n},children:r(LinearFade,{color:e,from:t,to:0,direction:"right",bands:10})}),r(l,{style:{position:"absolute",top:0,bottom:0,right:0,width:n},children:r(LinearFade,{color:e,from:0,to:t,direction:"right",bands:10})})]})});export const Base=f(function s({color:e}){return r(l,{style:[b,{backgroundColor:e}],pointerEvents:"none"})});export const hairline=L.hairlineWidth;

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

@@ -1,91 +1 @@
-"use strict";
-
-/**
- * The catalogue. Adding a preset means adding one entry here — the switcher,
- * the persisted selection and every tool surface read from this list.
- *
- * `nodes` and `views` are not decoration: they are the number of native
- * animated nodes the preset runs and the rough count of static views it mounts,
- * so the switcher can show what each look costs while you compare them. Keep
- * them honest.
- */
-
-import { DeepField } from "./variants/deepField.js";
-import { Wormhole } from "./variants/wormhole.js";
-import { Hyperspace } from "./variants/hyperspace.js";
-import { LiveSky } from "./variants/liveSky.js";
-import { Abyss, Bubbles, Jellyfish } from "./variants/underwater.js";
-export const BACKGROUND_PRESETS = [{
-  id: "off",
-  label: "Off",
-  blurb: "Plain black — no backdrop at all",
-  nodes: 0,
-  views: 1,
-  Component: null
-}, {
-  id: "deepfield",
-  label: "Deep Field",
-  blurb: "The Everlights field — 160 stars, with meteors slamming the walls",
-  // The old standalone Meteors preset folded in: +2 meteor loops, ~55 views
-  // (streak + flash + the pop's 6 rays and ~3 embers per impact).
-  nodes: 24,
-  views: 515,
-  Component: DeepField
-}, {
-  id: "hyperspace",
-  label: "Hyperspace",
-  blurb: "Lightspeed — crisp points streaming from a centre vanishing point",
-  nodes: 1,
-  views: 570,
-  Component: Hyperspace
-}, {
-  id: "livesky",
-  label: "Live Sky",
-  blurb: "The cove on your clock — dawn to dusk, for real",
-  nodes: 5,
-  views: 290,
-  Component: LiveSky
-}, {
-  id: "abyss",
-  label: "Abyss",
-  blurb: "A surface light fanning into the deep",
-  nodes: 4,
-  views: 230,
-  Component: Abyss
-}, {
-  id: "bubbles",
-  label: "Bubbles",
-  blurb: "Bubbles wobbling up through the light",
-  nodes: 4,
-  views: 180,
-  Component: Bubbles
-}, {
-  id: "jellyfish",
-  label: "Jellyfish",
-  blurb: "A bloom of glowing jellies, big and small, pulsing past",
-  nodes: 15,
-  views: 250,
-  Component: Jellyfish
-}, {
-  id: "wormhole",
-  label: "Wormhole",
-  blurb: "Cobalt clouds and copper light — a native flight through the tunnel",
-  nodes: 1,
-  views: 7,
-  Component: Wormhole
-}];
-
-// Ships OFF: a backdrop is an opt-in, so first load is plain black and the
-// choice only persists once the user actually picks one in the switcher.
-export const DEFAULT_BACKGROUND = "off";
-export function presetIndex(id) {
-  const i = BACKGROUND_PRESETS.findIndex(p => p.id === id);
-  return i < 0 ? 0 : i;
-}
-export function presetAt(index) {
-  const n = BACKGROUND_PRESETS.length;
-  return BACKGROUND_PRESETS[(index % n + n) % n];
-}
-export function getPreset(id) {
-  return BACKGROUND_PRESETS[presetIndex(id)];
-}
+"use strict";import{DeepField as n}from"./variants/deepField.js";import{Wormhole as t}from"./variants/wormhole.js";import{Hyperspace as i}from"./variants/hyperspace.js";import{LiveSky as s}from"./variants/liveSky.js";import{Abyss as r,Bubbles as b,Jellyfish as p}from"./variants/underwater.js";export const BACKGROUND_PRESETS=[{id:"off",label:"Off",blurb:"Plain black \u2014 no backdrop at all",nodes:0,views:1,Component:null},{id:"deepfield",label:"Deep Field",blurb:"The Everlights field \u2014 160 stars, with meteors slamming the walls",nodes:24,views:515,Component:n},{id:"hyperspace",label:"Hyperspace",blurb:"Lightspeed \u2014 crisp points streaming from a centre vanishing point",nodes:1,views:570,Component:i},{id:"livesky",label:"Live Sky",blurb:"The cove on your clock \u2014 dawn to dusk, for real",nodes:5,views:290,Component:s},{id:"abyss",label:"Abyss",blurb:"A surface light fanning into the deep",nodes:4,views:230,Component:r},{id:"bubbles",label:"Bubbles",blurb:"Bubbles wobbling up through the light",nodes:4,views:180,Component:b},{id:"jellyfish",label:"Jellyfish",blurb:"A bloom of glowing jellies, big and small, pulsing past",nodes:15,views:250,Component:p},{id:"wormhole",label:"Wormhole",blurb:"Cobalt clouds and copper light \u2014 a native flight through the tunnel",nodes:1,views:7,Component:t}];export const DEFAULT_BACKGROUND="off";export function presetIndex(o){const e=BACKGROUND_PRESETS.findIndex(l=>l.id===o);return e<0?0:e}export function presetAt(o){const e=BACKGROUND_PRESETS.length;return BACKGROUND_PRESETS[(o%e+e)%e]}export function getPreset(o){return BACKGROUND_PRESETS[presetIndex(o)]}