@buoy-gg/shared-ui 7.0.26 → 7.0.27

package/lib/module/ui/backgrounds/variants/daylight.js

@@ -0,0 +1,449 @@
+"use strict";
+
+/**
+ * Daylight — the Moonlight cove at midday.
+ *
+ * The same composition as ../variants/moonlight.tsx translated to day: the sun
+ * where the moon sat, in a warm bloom (no craters — an opaque disc with a hot
+ * inner glow), white clouds whose sunlit tops use the same rim-then-body
+ * occlusion trick, HAZY blue mountains instead of black silhouettes (daylight
+ * scatters — far ridges go pale, they don't go dark), gulls where the stars
+ * were, tiny sails where the shore lights were, and the glade re-cut as golden
+ * sun glitter. The sky inverts too: deep blue at the zenith paling into haze at
+ * the horizon, where night dies out the opposite way.
+ *
+ * Same contract as ../README.md: native-driven loops only, static geometry
+ * rasterized, scatter tables at module load, light geometry sized from the
+ * WINDOW (never the modal — resizing crops, it doesn't stretch).
+ */
+
+import { memo } from "react";
+import { Animated, Dimensions, View } from "react-native";
+import { absoluteFill } from "../../../utils/absoluteFill.js";
+import { Base, LinearFade, RadialGlow, RasterLayer, Vignette, usePulse } from "../primitives.js";
+import { scatter, withAlpha } from "../rng.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** Zenith blue — the base coat IS the top of the sky. */
+const BASE_COLOR = "#1C4E74";
+const SEA_COLOR = "#16405E";
+const HORIZON = 0.46;
+const SUN_X = 0.72;
+const SUN_Y = 0.17;
+const SUN_DIA = 50;
+
+// ============================================================================
+// Clouds — white banks with a sunlit top edge
+// ============================================================================
+
+/** Same shape as Moonlight's CloudSpec; see there for the rim/body trick. */
+
+const CLOUDS = [{
+  at: [0.16, 0.3],
+  puffs: [[-62, 4, 150, 20], [-44, -8, 62, 24], [-4, -14, 74, 30], [38, -4, 54, 20]],
+  rim: [4, -3.5],
+  bodyAlpha: 0.88
+}, {
+  at: [0.84, 0.37],
+  puffs: [[-55, 3, 130, 18], [-30, -8, 56, 22], [8, -13, 64, 27], [42, -3, 44, 17]],
+  rim: [-2, -4],
+  bodyAlpha: 0.88
+}, {
+  at: [0.46, 0.425],
+  puffs: [[-40, 2, 96, 13], [-12, -6, 48, 16], [22, -2, 38, 12]],
+  rim: [3, -3],
+  bodyAlpha: 0.84
+}];
+function cloudPuffs(cloud, cx, cy, key) {
+  const parts = [];
+  // Pass 1: the sunlit rim — pure white, mostly occluded by the body.
+  for (let i = 0; i < cloud.puffs.length; i++) {
+    const [dx, dy, w, h] = cloud.puffs[i];
+    parts.push(/*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        left: cx + dx + cloud.rim[0] - w / 2,
+        top: cy + dy + cloud.rim[1] - h / 2,
+        width: w,
+        height: h,
+        borderRadius: h / 2,
+        backgroundColor: withAlpha("#FFFFFF", 0.6)
+      }
+    }, `${key}-r${i}`));
+  }
+  // Pass 2: the body — soft blue-white, shadowed relative to the rim.
+  for (let i = 0; i < cloud.puffs.length; i++) {
+    const [dx, dy, w, h] = cloud.puffs[i];
+    parts.push(/*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        left: cx + dx - w / 2,
+        top: cy + dy - h / 2,
+        width: w,
+        height: h,
+        borderRadius: h / 2,
+        backgroundColor: withAlpha("#C7DCEC", cloud.bodyAlpha)
+      }
+    }, `${key}-b${i}`));
+  }
+  return parts;
+}
+
+// ============================================================================
+// Gulls — where Moonlight's stars were
+// ============================================================================
+
+/** [xFrac, yFrac (of the horizon), wing length] — kept clear of the sun. */
+const GULLS = [[0.2, 0.42, 6], [0.3, 0.28, 5], [0.42, 0.52, 4]];
+
+/** Two rotated bars in a shallow V read as a distant gull. */
+function gullWings(x, y, len, key) {
+  const wing = {
+    position: "absolute",
+    top: y,
+    width: len,
+    height: 1.4,
+    borderRadius: 0.7,
+    backgroundColor: withAlpha("#123049", 0.75)
+  };
+  return [/*#__PURE__*/_jsx(View, {
+    style: [wing, {
+      left: x - len,
+      transform: [{
+        rotate: "18deg"
+      }]
+    }]
+  }, `${key}-l`), /*#__PURE__*/_jsx(View, {
+    style: [wing, {
+      left: x,
+      transform: [{
+        rotate: "-18deg"
+      }]
+    }]
+  }, `${key}-r`)];
+}
+
+// ============================================================================
+// Mountains — hazy blue range on the horizon
+// ============================================================================
+
+/** [xFrac, base width, height, color] — daylight haze, not silhouette black. */
+const PEAKS = [[0.03, 120, 24, "#2E5E80"], [0.11, 96, 36, "#27516F"], [0.2, 140, 24, "#2E5E80"], [0.29, 76, 15, "#27516F"], [0.9, 96, 18, "#2E5E80"], [0.98, 130, 27, "#27516F"]];
+
+/** Tiny sails on the horizon where the night version had shore lights. */
+const SAILS = [[0.07, 6], [0.14, 4.5], [0.23, 5.5]];
+
+// ============================================================================
+// Water blocks — the glitter path
+// ============================================================================
+
+/** Stride 4: depth, x jitter, width jitter, alpha jitter. New seeds — a new
+ * day gets its own water. */
+const GLADE_LAYERS = [{
+  count: 44,
+  seed: 0x5d41
+}, {
+  count: 34,
+  seed: 0x91c3
+}, {
+  count: 26,
+  seed: 0xc7f5
+}];
+const GLADE_TABLES = GLADE_LAYERS.map(l => scatter(l.seed, l.count * 4));
+const ROW_STEP = 7;
+const GlitterLayer = /*#__PURE__*/memo(function GlitterLayer({
+  indices,
+  drive,
+  scale,
+  raster,
+  width,
+  height,
+  animated
+}) {
+  const sway = usePulse(drive === "swayA" ? 9000 : 12500, animated && drive !== "breathe");
+  const breathe = usePulse(6200, animated && drive === "breathe");
+  const sunX = width * SUN_X;
+  const horizonY = height * HORIZON;
+  const blocks = [];
+  for (const li of indices) {
+    const layer = GLADE_LAYERS[li];
+    const count = Math.round(layer.count * scale);
+    const table = scale === 1 ? GLADE_TABLES[li] : scatter(layer.seed, count * 4);
+    for (let i = 0; i < count; i++) {
+      const d = table[i * 4];
+      const jx = table[i * 4 + 1];
+      const jw = table[i * 4 + 2];
+      const ja = table[i * 4 + 3];
+      const y = horizonY + 4 + d * (height - horizonY) * 0.94;
+      const halfSpread = width * (0.03 + d * 0.16);
+      const x = sunX + (jx - 0.5) * 2 * halfSpread;
+      const blockW = 6 + d * 26 + jw * 10;
+      const blockH = d < 0.3 ? 1 : d < 0.62 ? 2 : 3;
+      const arc = Math.sin(Math.PI * (0.12 + d * 0.82));
+      const centered = Math.max(0.25, 1 - Math.abs(jx - 0.5) * 1.4);
+      const alpha = (0.2 + arc * 0.5) * centered * (0.75 + ja * 0.25);
+      blocks.push(/*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: x - blockW / 2,
+          top: Math.round(y / ROW_STEP) * ROW_STEP,
+          width: blockW,
+          height: blockH,
+          borderRadius: 0.5,
+          backgroundColor: withAlpha("#FFE9B0", alpha)
+        }
+      }, `${li}-${i}`));
+    }
+  }
+  const style = drive === "breathe" ? {
+    opacity: breathe.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0.55, 1]
+    })
+  } : {
+    transform: [{
+      translateX: sway.interpolate({
+        inputRange: [0, 1],
+        outputRange: drive === "swayA" ? [-7, 7] : [6, -6]
+      })
+    }]
+  };
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [absoluteFill, style],
+    pointerEvents: "none",
+    children: /*#__PURE__*/_jsx(RasterLayer, {
+      style: absoluteFill,
+      raster: raster,
+      children: blocks
+    })
+  });
+});
+
+// ============================================================================
+// The scene
+// ============================================================================
+
+export const DaylightTunable = /*#__PURE__*/memo(function DaylightTunable({
+  gladeScale = 1,
+  fusedGlade = false,
+  raster = true,
+  chrome = true,
+  ...props
+}) {
+  const {
+    width,
+    height,
+    animated
+  } = props;
+  const cloudDrift = usePulse(26000, animated);
+  const cloudX = cloudDrift.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-8, 8]
+  });
+  const sunX = width * SUN_X;
+  const sunY = height * SUN_Y;
+  const horizonY = height * HORIZON;
+  // Light geometry is sized from the WINDOW so resizing the modal never
+  // swells or shrinks the sun's bloom — only positions follow the modal.
+  const refW = Dimensions.get("window").width;
+  const gulls = GULLS.flatMap(([xf, yf, len], i) => gullWings(width * xf, horizonY * yf, len, `g${i}`));
+  const clouds = CLOUDS.flatMap((cloud, i) => cloudPuffs(cloud, width * cloud.at[0], height * cloud.at[1], `c${i}`));
+  const mountains = PEAKS.map(([xf, wBase, h, color], i) => /*#__PURE__*/_jsx(View, {
+    style: {
+      position: "absolute",
+      left: width * xf - wBase / 2,
+      top: horizonY - h,
+      width: 0,
+      height: 0,
+      borderLeftWidth: wBase / 2,
+      borderRightWidth: wBase / 2,
+      borderBottomWidth: h,
+      borderLeftColor: "transparent",
+      borderRightColor: "transparent",
+      borderBottomColor: color
+    }
+  }, `m${i}`));
+  const sails = SAILS.map(([xf, h], i) => /*#__PURE__*/_jsx(View, {
+    style: {
+      position: "absolute",
+      left: width * xf,
+      top: horizonY - h,
+      width: 0,
+      height: 0,
+      borderLeftWidth: 2,
+      borderRightWidth: 2,
+      borderBottomWidth: h,
+      borderLeftColor: "transparent",
+      borderRightColor: "transparent",
+      borderBottomColor: withAlpha("#F2F8FC", 0.85)
+    }
+  }, `s${i}`));
+  return (
+    /*#__PURE__*/
+    // Clips: the blooms are window-sized, so a small modal crops the scene.
+    _jsxs(View, {
+      style: [absoluteFill, {
+        overflow: "hidden"
+      }],
+      pointerEvents: "none",
+      children: [/*#__PURE__*/_jsx(Base, {
+        color: BASE_COLOR
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 0,
+          height: horizonY
+        },
+        children: /*#__PURE__*/_jsx(LinearFade, {
+          color: "#A9CDE6",
+          from: 0,
+          to: 0.42,
+          direction: "down",
+          bands: 20,
+          flattenBase: BASE_COLOR
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: horizonY,
+          bottom: 0,
+          backgroundColor: SEA_COLOR
+        }
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        style: [absoluteFill, {
+          transform: [{
+            translateX: cloudX
+          }]
+        }],
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsxs(RasterLayer, {
+          style: absoluteFill,
+          children: [clouds, gulls]
+        })
+      }), /*#__PURE__*/_jsx(RadialGlow, {
+        size: refW * 0.5,
+        color: "#FFE9B0",
+        alpha: 0.18,
+        rings: 20,
+        falloff: 1.9,
+        style: {
+          position: "absolute",
+          left: sunX - refW * 0.25,
+          top: sunY - refW * 0.25
+        }
+      }), /*#__PURE__*/_jsx(RadialGlow, {
+        size: 120,
+        color: "#FFF4D2",
+        alpha: 0.42,
+        rings: 10,
+        falloff: 1.6,
+        style: {
+          position: "absolute",
+          left: sunX - 60,
+          top: sunY - 60
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: sunX - SUN_DIA / 2,
+          top: sunY - SUN_DIA / 2,
+          width: SUN_DIA,
+          height: SUN_DIA,
+          borderRadius: SUN_DIA / 2,
+          // Fully opaque: any translucency lets the app behind the modal
+          // bleed through the brightest surface in the scene.
+          backgroundColor: "#FFF9E6"
+        }
+      }), chrome ? /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: horizonY - 76,
+          height: 76
+        },
+        children: /*#__PURE__*/_jsx(LinearFade, {
+          color: "#CFE3F1",
+          from: 0,
+          to: 0.3,
+          direction: "down",
+          bands: 12
+        })
+      }) : null, /*#__PURE__*/_jsxs(RasterLayer, {
+        style: absoluteFill,
+        children: [mountains, sails]
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: horizonY,
+          height: 1,
+          backgroundColor: withAlpha("#E4F0F8", 0.2)
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: sunX - width * 0.16,
+          top: horizonY,
+          width: width * 0.32,
+          height: 1,
+          backgroundColor: withAlpha("#FFEFC2", 0.42)
+        }
+      }), chrome ? /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: horizonY,
+          bottom: 0
+        },
+        children: /*#__PURE__*/_jsx(LinearFade, {
+          color: "#06192B",
+          from: 0,
+          to: 0.55,
+          direction: "down",
+          bands: 12
+        })
+      }) : null, fusedGlade ? /*#__PURE__*/_jsx(GlitterLayer, {
+        indices: [0, 1, 2],
+        drive: "swayA",
+        scale: gladeScale,
+        raster: raster,
+        ...props
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(GlitterLayer, {
+          indices: [0],
+          drive: "swayA",
+          scale: gladeScale,
+          raster: raster,
+          ...props
+        }), /*#__PURE__*/_jsx(GlitterLayer, {
+          indices: [1],
+          drive: "swayB",
+          scale: gladeScale,
+          raster: raster,
+          ...props
+        }), /*#__PURE__*/_jsx(GlitterLayer, {
+          indices: [2],
+          drive: "breathe",
+          scale: gladeScale,
+          raster: raster,
+          ...props
+        })]
+      }), chrome ? /*#__PURE__*/_jsx(Vignette, {
+        color: "#0A2033",
+        alpha: 0.4,
+        spread: 0.34
+      }) : null]
+    })
+  );
+});
+export const Daylight = /*#__PURE__*/memo(function Daylight(props) {
+  return /*#__PURE__*/_jsx(DaylightTunable, {
+    ...props
+  });
+});

package/lib/module/ui/backgrounds/variants/deepField.js

@@ -22,11 +22,13 @@
  *
  *  - **The soft bulb sprite.** The original bakes one 64px sprite (blurred halo
  *    at r=6/α.30 over a blurred core at r=4/α1) and stamps it at `dia`. That is
- *    why stars stay fine points even at dia=20 — the lit core is only ~13% of
+ *    why stars stay fine points even at dia=20 — the lit core is only 12.5% of
  *    the stamp. There is no blur primitive here, so each star is a small solid
- *    core at that same 13%, and the nearer ones get one or two concentric
- *    discs standing in for the halo. Far stars end up a single ~1px dot, which
- *    is what the sprite renders them as anyway.
+ *    core at that same 12.5%, and the nearer ones get one or two concentric
+ *    discs standing in for the halo, graded DOWN in alpha toward the blur's
+ *    outer extent (~0.24·dia) so the glow fades out rather than ending in a
+ *    hard rim. Far stars end up a single ~1px dot, which is what the sprite
+ *    renders them as anyway.
  *
  *  - **Additive blending.** `blendMode="plus"` becomes ordinary alpha
  *    compositing. Over a near-black base the two agree except where stars
@@ -41,10 +43,12 @@ import { Animated, View } from "react-native";
 import { absoluteFill } from "../../../utils/absoluteFill.js";
 import { Base, RadialGlow, RasterLayer, useLoop, usePulse } from "../primitives.js";
 import { flattenOver, mulberry32, withAlpha } from "../rng.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MeteorShower } from "./meteors.js";
+
 // ---------------------------------------------------------------------------
 // The original's shipping constants, verbatim.
 // ---------------------------------------------------------------------------
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const COUNT = 160;
 const DRIFT = 0.016; // horizontal travel/sec at z=1, as a fraction of width
 const BASE_DIA = 5; // sprite diameter px at z=1
@@ -98,10 +102,13 @@ function buildField(count) {
       fy,
       z,
       tw,
-      // 0.15·dia ≈ the sprite's lit core (r=4 of 64, blurred), with a 1.1px
-      // floor so the farthest stars still land on a pixel.
-      core: Math.max(1.1, dia * 0.15),
-      halo: dia * 0.3,
+      // 0.125·dia = the sprite's lit core (r=4 of 64), with a 1px floor so
+      // the farthest stars still land on a pixel.
+      core: Math.max(1, dia * 0.125),
+      // Outer extent of the sprite's blurred halo (r=6 + blur 2.5 of 64 is
+      // ~gone by 0.24·dia). The discs grade DOWN in alpha toward this edge —
+      // see DeepBand — so it fades out instead of ending in a hard rim.
+      halo: dia * 0.24,
       haloDiscs: z < 0.45 ? 2 : z < 0.7 ? 1 : 0,
       alpha: 0.2 + 0.8 * near,
       color: PALETTE[Math.floor((tw * 0.5 + 0.5) * PALETTE.length) % PALETTE.length]
@@ -197,7 +204,13 @@ const DeepBand = /*#__PURE__*/memo(function DeepBand({
       const x = star.fx * width + copy * width;
       const key = `${i}-${copy}`;
       for (let h = 0; h < discs; h++) {
-        const d = star.halo * (h === 0 ? 1 : 0.6);
+        // Disc 0 is the inner/brighter one so single-disc stars keep a tight
+        // bump; disc 1 adds the faint outer skirt. The alphas approximate the
+        // sprite's blurred α.30 halo (≈0.27 near the core → ~0 at the edge):
+        // stacked they composite to ~0.24 inside, 0.10 outside — a falloff,
+        // not the old hard 0.3/0.51 rim that read as a fat blob.
+        const outer = h === 1;
+        const d = star.halo * (outer ? 1 : 0.65);
         parts.push(/*#__PURE__*/_jsx(View, {
           style: {
             position: "absolute",
@@ -206,9 +219,7 @@ const DeepBand = /*#__PURE__*/memo(function DeepBand({
             width: d,
             height: d,
             borderRadius: d / 2,
-            // The sprite's halo is α.30 of the core; scaled by the star's own
-            // depth brightness like everything else.
-            backgroundColor: paint(star.color, star.alpha * 0.3)
+            backgroundColor: paint(star.color, star.alpha * (outer ? 0.1 : 0.16))
           }
         }, `${key}-h${h}`));
       }
@@ -270,9 +281,13 @@ function useTwinkles(animated, enabled) {
   const b = usePulse(TWINKLE_MS[1], animated && enabled);
   const c = usePulse(TWINKLE_MS[2], animated && enabled);
   const d = usePulse(TWINKLE_MS[3], animated && enabled);
+  // Full ±8%, like the original's `1 + 0.08·sin`. The top half exceeds 1 and
+  // the compositor clamps it — the original does the same (`if (a > 1) a = 1`),
+  // so bright stars flatten at the peak there too; dimmer-than-1 layers just
+  // never get the boost, which is the remaining (invisible) approximation.
   const range = {
     inputRange: [0, 1],
-    outputRange: [1 - TWINKLE, 1]
+    outputRange: [1 - TWINKLE, 1 + TWINKLE]
   };
   return [a.interpolate(range), b.interpolate(range), c.interpolate(range), d.interpolate(range)];
 }
@@ -291,7 +306,8 @@ export const DeepFieldTunable = /*#__PURE__*/memo(function DeepFieldTunable({
   halo = "full",
   opaque = false,
   drift = true,
-  starCount = COUNT
+  starCount = COUNT,
+  chrome = true
 }) {
   const bands = buildBands(bandCount, starCount);
   const twinkles = useTwinkles(animated, twinkle !== "off");
@@ -313,20 +329,22 @@ export const DeepFieldTunable = /*#__PURE__*/memo(function DeepFieldTunable({
   return /*#__PURE__*/_jsxs(View, {
     style: absoluteFill,
     pointerEvents: "none",
-    children: [/*#__PURE__*/_jsx(Base, {
-      color: BASE_COLOR
-    }), /*#__PURE__*/_jsx(RadialGlow, {
-      size: width * 1.7,
-      color: "#1E3A8A",
-      alpha: 0.16,
-      rings: 8,
-      falloff: 2.1,
-      style: {
-        position: "absolute",
-        left: -width * 0.35,
-        top: -width
-      }
-    }), twinkle === "group" ?
+    children: [chrome ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Base, {
+        color: BASE_COLOR
+      }), /*#__PURE__*/_jsx(RadialGlow, {
+        size: width * 1.7,
+        color: "#1E3A8A",
+        alpha: 0.16,
+        rings: 8,
+        falloff: 2.1,
+        style: {
+          position: "absolute",
+          left: -width * 0.35,
+          top: -width
+        }
+      })]
+    }) : null, twinkle === "group" ?
     // Group mode: one full-screen Animated.View per pulse, each wrapping
     // its share of the bands. Costs four extra composited surfaces.
     Array.from({
@@ -340,8 +358,21 @@ export const DeepFieldTunable = /*#__PURE__*/memo(function DeepFieldTunable({
     }, g)) : bandViews]
   });
 });
+
+/**
+ * The shipping preset: the Everlights field with the meteor layer on top —
+ * the old standalone "Meteors" preset was folded in here (its own 40-star sky
+ * dropped; this field is the better one). `DeepFieldTunable` stays meteor-free
+ * so the bench route keeps measuring the field itself.
+ */
 export const DeepField = /*#__PURE__*/memo(function DeepField(props) {
-  return /*#__PURE__*/_jsx(DeepFieldTunable, {
-    ...props
+  return /*#__PURE__*/_jsxs(View, {
+    style: absoluteFill,
+    pointerEvents: "none",
+    children: [/*#__PURE__*/_jsx(DeepFieldTunable, {
+      ...props
+    }), /*#__PURE__*/_jsx(MeteorShower, {
+      ...props
+    })]
   });
 });