@buoy-gg/shared-ui 7.0.25 → 7.0.27

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

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "BACKGROUND_PRESETS", {
     return _registry.BACKGROUND_PRESETS;
   }
 });
+Object.defineProperty(exports, "BACKGROUND_STORAGE_KEY", {
+  enumerable: true,
+  get: function () {
+    return _backgroundStore.BACKGROUND_STORAGE_KEY;
+  }
+});
 Object.defineProperty(exports, "BackgroundSwitcher", {
   enumerable: true,
   get: function () {
@@ -21,12 +27,48 @@ Object.defineProperty(exports, "DEFAULT_BACKGROUND", {
     return _registry.DEFAULT_BACKGROUND;
   }
 });
+Object.defineProperty(exports, "DaylightTunable", {
+  enumerable: true,
+  get: function () {
+    return _daylight.DaylightTunable;
+  }
+});
 Object.defineProperty(exports, "DeepFieldTunable", {
   enumerable: true,
   get: function () {
     return _deepField.DeepFieldTunable;
   }
 });
+Object.defineProperty(exports, "LinearFade", {
+  enumerable: true,
+  get: function () {
+    return _primitives.LinearFade;
+  }
+});
+Object.defineProperty(exports, "LiveSkyTunable", {
+  enumerable: true,
+  get: function () {
+    return _liveSky.LiveSkyTunable;
+  }
+});
+Object.defineProperty(exports, "MoonlightTunable", {
+  enumerable: true,
+  get: function () {
+    return _moonlight.MoonlightTunable;
+  }
+});
+Object.defineProperty(exports, "RadialGlow", {
+  enumerable: true,
+  get: function () {
+    return _primitives.RadialGlow;
+  }
+});
+Object.defineProperty(exports, "RasterLayer", {
+  enumerable: true,
+  get: function () {
+    return _primitives.RasterLayer;
+  }
+});
 Object.defineProperty(exports, "ToolBackground", {
   enumerable: true,
   get: function () {
@@ -45,6 +87,12 @@ Object.defineProperty(exports, "getPreset", {
     return _registry.getPreset;
   }
 });
+Object.defineProperty(exports, "getSkyScrub", {
+  enumerable: true,
+  get: function () {
+    return _skyClock.getSkyScrub;
+  }
+});
 Object.defineProperty(exports, "presetAt", {
   enumerable: true,
   get: function () {
@@ -57,14 +105,56 @@ Object.defineProperty(exports, "presetIndex", {
     return _registry.presetIndex;
   }
 });
+Object.defineProperty(exports, "scatter", {
+  enumerable: true,
+  get: function () {
+    return _rng.scatter;
+  }
+});
+Object.defineProperty(exports, "setSkyScrub", {
+  enumerable: true,
+  get: function () {
+    return _skyClock.setSkyScrub;
+  }
+});
+Object.defineProperty(exports, "useLoop", {
+  enumerable: true,
+  get: function () {
+    return _primitives.useLoop;
+  }
+});
+Object.defineProperty(exports, "usePulse", {
+  enumerable: true,
+  get: function () {
+    return _primitives.usePulse;
+  }
+});
+Object.defineProperty(exports, "useSkyScrub", {
+  enumerable: true,
+  get: function () {
+    return _skyClock.useSkyScrub;
+  }
+});
 Object.defineProperty(exports, "useToolBackground", {
   enumerable: true,
   get: function () {
     return _backgroundStore.useToolBackground;
   }
 });
+Object.defineProperty(exports, "withBgAlpha", {
+  enumerable: true,
+  get: function () {
+    return _rng.withAlpha;
+  }
+});
 var _ToolBackground = require("./ToolBackground.js");
 var _BackgroundSwitcher = require("./BackgroundSwitcher.js");
 var _backgroundStore = require("./backgroundStore.js");
 var _registry = require("./registry.js");
-var _deepField = require("./variants/deepField.js");
+var _primitives = require("./primitives.js");
+var _rng = require("./rng.js");
+var _deepField = require("./variants/deepField.js");
+var _moonlight = require("./variants/moonlight.js");
+var _daylight = require("./variants/daylight.js");
+var _liveSky = require("./variants/liveSky.js");
+var _skyClock = require("./skyClock.js");

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

@@ -26,7 +26,9 @@ var _jsxRuntime = require("react/jsx-runtime");
  *     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.
+ *     (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
@@ -42,7 +44,20 @@ var _jsxRuntime = require("react/jsx-runtime");
 // ============================================================================
 
 /**
- * A native-driven 0→1 loop.
+ * 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.
+ */const NATIVE_DRIVER = _reactNative.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
@@ -61,7 +76,11 @@ function useLoop(durationMs, enabled = true) {
         toValue: 1,
         duration: durationMs,
         easing: _reactNative.Easing.linear,
-        useNativeDriver: true
+        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();
     };
@@ -98,12 +117,16 @@ function usePulse(durationMs, enabled = true) {
         toValue: 1,
         duration: durationMs / 2,
         easing: _reactNative.Easing.inOut(_reactNative.Easing.quad),
-        useNativeDriver: true
+        useNativeDriver: NATIVE_DRIVER,
+        // See useLoop: endless decorative loops must not hold
+        // InteractionManager (isInteraction defaults to true).
+        isInteraction: false
       }), _reactNative.Animated.timing(value, {
         toValue: 0,
         duration: durationMs / 2,
         easing: _reactNative.Easing.inOut(_reactNative.Easing.quad),
-        useNativeDriver: true
+        useNativeDriver: NATIVE_DRIVER,
+        isInteraction: false
       })]));
       anim.start();
     };
@@ -198,7 +221,18 @@ const RadialGlow = exports.RadialGlow = /*#__PURE__*/(0, _react.memo)(function R
 /**
  * Fake linear gradient: `bands` stacked strips with linearly interpolated
  * alpha. Used for scrims (keep text readable over a busy field) and for
- * horizon glows. 12–16 bands is invisible as banding at these alphas.
+ * 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.
  */
 const LinearFade = exports.LinearFade = /*#__PURE__*/(0, _react.memo)(function LinearFade({
   color,
@@ -206,6 +240,7 @@ const LinearFade = exports.LinearFade = /*#__PURE__*/(0, _react.memo)(function L
   to = 1,
   bands = 14,
   direction = "down",
+  flattenBase,
   style
 }) {
   const vertical = direction === "down" || direction === "up";
@@ -215,21 +250,22 @@ const LinearFade = exports.LinearFade = /*#__PURE__*/(0, _react.memo)(function L
   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 ? (0, _rng.flattenOver)(color, a, flattenBase) : (0, _rng.withAlpha)(color, a);
     strips.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: vertical ? {
         position: "absolute",
         left: 0,
         right: 0,
         top: `${i * pct}%`,
-        height: `${pct + 1.2}%`,
-        backgroundColor: (0, _rng.withAlpha)(color, a)
+        height: `${pct + 0.08}%`,
+        backgroundColor: fill
       } : {
         position: "absolute",
         top: 0,
         bottom: 0,
         left: `${i * pct}%`,
-        width: `${pct + 1.2}%`,
-        backgroundColor: (0, _rng.withAlpha)(color, a)
+        width: `${pct + 0.08}%`,
+        backgroundColor: fill
       }
     }, i));
   }
@@ -268,7 +304,7 @@ const Vignette = exports.Vignette = /*#__PURE__*/(0, _react.memo)(function Vigne
         from: alpha,
         to: 0,
         direction: "down",
-        bands: 10
+        bands: 14
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
@@ -283,7 +319,7 @@ const Vignette = exports.Vignette = /*#__PURE__*/(0, _react.memo)(function Vigne
         from: 0,
         to: alpha,
         direction: "down",
-        bands: 10
+        bands: 14
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
@@ -298,7 +334,7 @@ const Vignette = exports.Vignette = /*#__PURE__*/(0, _react.memo)(function Vigne
         from: alpha,
         to: 0,
         direction: "right",
-        bands: 8
+        bands: 10
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
@@ -313,7 +349,7 @@ const Vignette = exports.Vignette = /*#__PURE__*/(0, _react.memo)(function Vigne
         from: 0,
         to: alpha,
         direction: "right",
-        bands: 8
+        bands: 10
       })
     })]
   });

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

@@ -7,9 +7,10 @@ exports.DEFAULT_BACKGROUND = exports.BACKGROUND_PRESETS = void 0;
 exports.getPreset = getPreset;
 exports.presetAt = presetAt;
 exports.presetIndex = presetIndex;
-var _lattice = require("./variants/lattice.js");
 var _deepField = require("./variants/deepField.js");
-var _starfield = require("./variants/starfield.js");
+var _hyperspace = require("./variants/hyperspace.js");
+var _liveSky = require("./variants/liveSky.js");
+var _underwater = require("./variants/underwater.js");
 /**
  * The catalogue. Adding a preset means adding one entry here — the switcher,
  * the persisted selection and every tool surface read from this list.
@@ -23,82 +24,58 @@ var _starfield = require("./variants/starfield.js");
 const BACKGROUND_PRESETS = exports.BACKGROUND_PRESETS = [{
   id: "off",
   label: "Off",
-  blurb: "Plain black — the baseline to compare against",
+  blurb: "Plain black — no backdrop at all",
   nodes: 0,
   views: 1,
   Component: null
-}, {
-  id: "starfield",
-  label: "Starfield",
-  blurb: "Five depth bands drifting at parallax speeds",
-  nodes: 6,
-  views: 222,
-  Component: _starfield.Starfield
 }, {
   id: "deepfield",
   label: "Deep Field",
-  blurb: "The Everlights field, 1:1 — 160 stars, richer but pricier",
-  nodes: 22,
-  views: 462,
+  blurb: "The Everlights field — 160 stars, with meteors slamming the walls",
+  // The old standalone Meteors preset folded in: +2 meteor loops, ~50 views.
+  nodes: 24,
+  views: 510,
   Component: _deepField.DeepField
 }, {
-  id: "hexmesh",
-  label: "Hex Mesh",
-  blurb: "Diamond lattice with a slow breath",
-  nodes: 1,
-  views: 160,
-  Component: _lattice.HexMesh
-}, {
-  id: "isogrid",
-  label: "Iso Grid",
-  blurb: "Three-axis isometric ruling",
+  id: "hyperspace",
+  label: "Hyperspace",
+  blurb: "Lightspeed — crisp points streaming from a centre vanishing point",
   nodes: 1,
-  views: 66,
-  Component: _lattice.IsoGrid
+  views: 570,
+  Component: _hyperspace.Hyperspace
 }, {
-  id: "crosshatch",
-  label: "Crosshatch",
-  blurb: "Fine 45° weave, drafting-paper quiet",
-  nodes: 1,
-  views: 64,
-  Component: _lattice.Crosshatch
+  id: "livesky",
+  label: "Live Sky",
+  blurb: "The cove on your clock — dawn to dusk, for real",
+  nodes: 5,
+  views: 290,
+  Component: _liveSky.LiveSky
 }, {
-  id: "perfboard",
-  label: "Perf Board",
-  blurb: "Solder-pad matrix with datum pads every fourth",
-  nodes: 1,
-  views: 150,
-  Component: _lattice.PerfBoard
+  id: "abyss",
+  label: "Abyss",
+  blurb: "A surface light fanning into the deep",
+  nodes: 4,
+  views: 230,
+  Component: _underwater.Abyss
 }, {
-  id: "halftone",
-  label: "Halftone",
-  blurb: "Dot grid swelling toward the light",
-  nodes: 1,
-  views: 176,
-  Component: _lattice.Halftone
+  id: "bubbles",
+  label: "Bubbles",
+  blurb: "Bubbles wobbling up through the light",
+  nodes: 4,
+  views: 180,
+  Component: _underwater.Bubbles
 }, {
-  id: "waffle",
-  label: "Waffle",
-  blurb: "Machined panel of rounded cells",
-  nodes: 1,
-  views: 88,
-  Component: _lattice.Waffle
-}, {
-  id: "instrument",
-  label: "Instrument",
-  blurb: "Ruled scales with major graduations",
-  nodes: 1,
-  views: 110,
-  Component: _lattice.Instrument
-}, {
-  id: "radar",
-  label: "Radar",
-  blurb: "Rings and spokes under a rotating sweep",
-  nodes: 2,
-  views: 40,
-  Component: _lattice.Radar
+  id: "jellyfish",
+  label: "Jellyfish",
+  blurb: "A bloom of glowing jellies, big and small, pulsing past",
+  nodes: 15,
+  views: 250,
+  Component: _underwater.Jellyfish
 }];
-const DEFAULT_BACKGROUND = exports.DEFAULT_BACKGROUND = "hexmesh";
+
+// 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.
+const DEFAULT_BACKGROUND = exports.DEFAULT_BACKGROUND = "off";
 function presetIndex(id) {
   const i = BACKGROUND_PRESETS.findIndex(p => p.id === id);
   return i < 0 ? 0 : i;

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.flattenOver = flattenOver;
+exports.lerpColor = lerpColor;
 exports.mulberry32 = mulberry32;
 exports.scatter = scatter;
 exports.withAlpha = withAlpha;
@@ -49,6 +50,26 @@ function withAlpha(hex, alpha) {
   return `rgba(${r},${g},${b},${a.toFixed(3)})`;
 }
 
+/**
+ * RGB lerp between two `#RRGGBB` (or `#RGB`) colours, returned as `#RRGGBB`.
+ * Used by Live Sky to blend palette keyframes; at minute-sized steps a plain
+ * RGB lerp is indistinguishable from anything fancier.
+ */
+function lerpColor(a, b, t) {
+  const parse = h => {
+    let v = h.replace("#", "");
+    if (v.length === 3) v = v[0] + v[0] + v[1] + v[1] + v[2] + v[2];
+    const n = parseInt(v, 16);
+    return [n >> 16 & 255, n >> 8 & 255, n & 255];
+  };
+  const [ar, ag, ab] = parse(a);
+  const [br, bg, bb] = parse(b);
+  const c = t < 0 ? 0 : t > 1 ? 1 : t;
+  const mix = (x, y) => Math.round(x + (y - x) * c);
+  const hex = n => n.toString(16).padStart(2, "0");
+  return `#${hex(mix(ar, br))}${hex(mix(ag, bg))}${hex(mix(ab, bb))}`;
+}
+
 /**
  * `hex` at `alpha` composited over an opaque `base`, returned as an OPAQUE
  * colour.

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSkyScrub = getSkyScrub;
+exports.setSkyScrub = setSkyScrub;
+exports.useSkyScrub = useSkyScrub;
+var _react = require("react");
+/**
+ * The Live Sky scrub clock.
+ *
+ * `null` means "live" — the Live Sky preset follows the real local clock. A
+ * number (minutes since midnight, quantized by the slider) freezes the scene
+ * at that time of day so the whole cycle can be scrubbed through by hand.
+ *
+ * Deliberately NOT part of `backgroundStore`: the variant itself has to read
+ * this, and a variant importing the store would close an import cycle through
+ * the registry (store → registry → variant → store). It is also deliberately
+ * not persisted — a scrub is a preview gesture, not a setting.
+ */
+
+let scrub = null;
+const listeners = new Set();
+function getSkyScrub() {
+  return scrub;
+}
+function setSkyScrub(value) {
+  if (value === scrub) return;
+  scrub = value;
+  for (const listener of listeners) listener();
+}
+
+/** Subscribe a component to the scrub value. */
+function useSkyScrub() {
+  const [value, setValue] = (0, _react.useState)(scrub);
+  (0, _react.useEffect)(() => {
+    const listener = () => setValue(scrub);
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  }, []);
+  return value;
+}