@buoy-gg/shared-ui 7.0.25 → 7.0.27

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

@@ -0,0 +1,893 @@
+"use strict";
+
+/**
+ * Live Sky — the cove on your clock.
+ *
+ * One scene that tracks the actual local time — through the WORKDAY REMAP
+ * (`workdaySceneMinutes` below): the real clock is compressed onto the scene's
+ * day so sunrise lands ~9:00, noon at lunch, sunset ~17:30 and night after
+ * ~20:00, and a normal working session sees the whole cycle. In scene time the
+ * sun runs 06:30→19:00 and the moon takes the night shift; dawn, golden hour,
+ * sunset and dusk are palette keyframes lerped in between. The night keyframe
+ * is Moonlight's palette and the noon keyframe is Daylight's, so the live
+ * scene passes through both fixed siblings exactly.
+ *
+ * THE CHEAP TRICK (see LIVE_SKY_PLAN.md): real time IS the cheap version. The
+ * sun moves ~0.4px per minute on this surface — invisible as motion — so the
+ * cycle itself animates NOTHING. The scene is laid out statically for the
+ * current minute and a once-a-minute tick re-renders it (~one small React
+ * commit). That also sidesteps the native driver's hard limit (transform and
+ * opacity only, never colour): colour "animation" here is just new style
+ * values in an ordinary render. Between ticks the preset costs exactly what
+ * Daylight costs — a handful of native loops that never touch JS.
+ *
+ * The scrub slider in `BackgroundSwitcher` writes `skyClock.ts`; a non-null
+ * scrub freezes this scene at that minute and stops the tick.
+ *
+ * Same contract as ../README.md otherwise: native-driven loops only, static
+ * geometry rasterized, scatter tables at module load, light geometry sized
+ * from the WINDOW (resizing crops, never stretches).
+ */
+
+import { memo, useEffect, useState } from "react";
+import { Animated, AppState, Dimensions, View } from "react-native";
+import { absoluteFill } from "../../../utils/absoluteFill.js";
+import { Base, LinearFade, RadialGlow, RasterLayer, Vignette, usePulse } from "../primitives.js";
+import { lerpColor, scatter, withAlpha } from "../rng.js";
+import { useSkyScrub } from "../skyClock.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const HORIZON = 0.46;
+const SUN_RISE = 6.5 * 60;
+const SUN_SET = 19 * 60;
+const MOON_SPAN = 1440 - (SUN_SET - SUN_RISE);
+const SUN_DIA = 50;
+const MOON_DIA = 56;
+
+/** Moon craters, fixed — the moon doesn't take the palette's disc colour. */
+const CRATERS = [[0.24, -0.12, 0.2], [-0.16, 0.2, 0.13], [0.08, 0.06, 0.1]];
+
+// ============================================================================
+// The palette — keyframes lerped by time of day
+// ============================================================================
+
+const NIGHT = {
+  skyTop: "#070C15",
+  skyHorizon: "#040609",
+  skyHorizonAlpha: 1,
+  seaColor: "#04070C",
+  seaFade: "#010409",
+  seaFadeAlpha: 0.5,
+  hazeBand: "#17293F",
+  hazeAlpha: 0.28,
+  cloudRim: "#1D2A42",
+  cloudRimAlpha: 0.35,
+  cloudBody: "#070D18",
+  cloudBodyAlpha: 0.94,
+  peakNear: "#030609",
+  peakFar: "#020408",
+  glitter: "#CFE0F4",
+  glitterAlpha: 0.95,
+  bloom: "#A9C2DE",
+  bloomAlpha: 0.15,
+  glow: "#DCE8F6",
+  glowAlpha: 0.34,
+  disc: "#EDF3FB",
+  horizonLine: "#9FB8D4",
+  horizonLineAlpha: 0.12,
+  underLine: "#C6DAF0",
+  underLineAlpha: 0.32,
+  vignette: "#020305",
+  starAlpha: 1,
+  dayness: 0
+};
+const DAWN = {
+  skyTop: "#12263E",
+  skyHorizon: "#C4756B",
+  skyHorizonAlpha: 0.5,
+  seaColor: "#0C1E30",
+  seaFade: "#03080F",
+  seaFadeAlpha: 0.52,
+  hazeBand: "#D98F7E",
+  hazeAlpha: 0.34,
+  cloudRim: "#F2A98C",
+  cloudRimAlpha: 0.5,
+  cloudBody: "#2E2B41",
+  cloudBodyAlpha: 0.9,
+  peakNear: "#1A2536",
+  peakFar: "#131B29",
+  glitter: "#F2C4A0",
+  glitterAlpha: 0.8,
+  bloom: "#FFB37A",
+  bloomAlpha: 0.24,
+  glow: "#FFD9B0",
+  glowAlpha: 0.4,
+  disc: "#FFE9C4",
+  horizonLine: "#E8B49A",
+  horizonLineAlpha: 0.24,
+  underLine: "#FFD2A8",
+  underLineAlpha: 0.4,
+  vignette: "#080810",
+  starAlpha: 0.35,
+  dayness: 0.15
+};
+const SUNRISE = {
+  skyTop: "#27567D",
+  skyHorizon: "#F2B26A",
+  skyHorizonAlpha: 0.55,
+  seaColor: "#12324C",
+  seaFade: "#051220",
+  seaFadeAlpha: 0.54,
+  hazeBand: "#F2C08A",
+  hazeAlpha: 0.36,
+  cloudRim: "#FFDCB0",
+  cloudRimAlpha: 0.6,
+  cloudBody: "#7E88A6",
+  cloudBodyAlpha: 0.88,
+  peakNear: "#264A64",
+  peakFar: "#1E3D54",
+  glitter: "#FFD9A0",
+  glitterAlpha: 1.05,
+  bloom: "#FFCE8A",
+  bloomAlpha: 0.26,
+  glow: "#FFE6C0",
+  glowAlpha: 0.46,
+  disc: "#FFF2D4",
+  horizonLine: "#F5D2A4",
+  horizonLineAlpha: 0.28,
+  underLine: "#FFE0AE",
+  underLineAlpha: 0.46,
+  vignette: "#0A1420",
+  starAlpha: 0,
+  dayness: 0.6
+};
+
+/** Noon — Daylight's palette, verbatim. */
+const DAY = {
+  skyTop: "#1C4E74",
+  skyHorizon: "#A9CDE6",
+  skyHorizonAlpha: 0.42,
+  seaColor: "#16405E",
+  seaFade: "#06192B",
+  seaFadeAlpha: 0.55,
+  hazeBand: "#CFE3F1",
+  hazeAlpha: 0.3,
+  cloudRim: "#FFFFFF",
+  cloudRimAlpha: 0.6,
+  cloudBody: "#C7DCEC",
+  cloudBodyAlpha: 0.88,
+  peakNear: "#2E5E80",
+  peakFar: "#27516F",
+  glitter: "#FFE9B0",
+  glitterAlpha: 1,
+  bloom: "#FFE9B0",
+  bloomAlpha: 0.18,
+  glow: "#FFF4D2",
+  glowAlpha: 0.42,
+  disc: "#FFF9E6",
+  horizonLine: "#E4F0F8",
+  horizonLineAlpha: 0.2,
+  underLine: "#FFEFC2",
+  underLineAlpha: 0.42,
+  vignette: "#0A2033",
+  starAlpha: 0,
+  dayness: 1
+};
+const GOLDEN = {
+  skyTop: "#31618B",
+  skyHorizon: "#F5C26B",
+  skyHorizonAlpha: 0.5,
+  seaColor: "#1A3C58",
+  seaFade: "#071626",
+  seaFadeAlpha: 0.55,
+  hazeBand: "#F2C888",
+  hazeAlpha: 0.36,
+  cloudRim: "#FFE0A8",
+  cloudRimAlpha: 0.62,
+  cloudBody: "#8FA3BC",
+  cloudBodyAlpha: 0.88,
+  peakNear: "#2A5070",
+  peakFar: "#223F5A",
+  glitter: "#FFCE7E",
+  glitterAlpha: 1.1,
+  bloom: "#FFC26E",
+  bloomAlpha: 0.24,
+  glow: "#FFDCA0",
+  glowAlpha: 0.48,
+  disc: "#FFEDC2",
+  horizonLine: "#F8D8A0",
+  horizonLineAlpha: 0.28,
+  underLine: "#FFD088",
+  underLineAlpha: 0.48,
+  vignette: "#0C1B2A",
+  starAlpha: 0,
+  dayness: 1
+};
+const SUNSET = {
+  skyTop: "#232F55",
+  skyHorizon: "#E86A3C",
+  skyHorizonAlpha: 0.6,
+  seaColor: "#1E3049",
+  seaFade: "#050A14",
+  seaFadeAlpha: 0.55,
+  hazeBand: "#F08A4A",
+  hazeAlpha: 0.4,
+  cloudRim: "#FFC48A",
+  cloudRimAlpha: 0.65,
+  cloudBody: "#3A2F45",
+  cloudBodyAlpha: 0.9,
+  peakNear: "#1C2438",
+  peakFar: "#151C2C",
+  glitter: "#FF9D5C",
+  glitterAlpha: 1.15,
+  bloom: "#FF8A50",
+  bloomAlpha: 0.3,
+  glow: "#FFB27A",
+  glowAlpha: 0.5,
+  disc: "#FFD9A0",
+  horizonLine: "#FFD2A0",
+  horizonLineAlpha: 0.3,
+  underLine: "#FFB070",
+  underLineAlpha: 0.5,
+  vignette: "#120A18",
+  starAlpha: 0,
+  dayness: 0.4
+};
+const DUSK = {
+  skyTop: "#131B33",
+  skyHorizon: "#7A4260",
+  skyHorizonAlpha: 0.45,
+  seaColor: "#0B1526",
+  seaFade: "#02060E",
+  seaFadeAlpha: 0.52,
+  hazeBand: "#3A2C4E",
+  hazeAlpha: 0.3,
+  cloudRim: "#5A4668",
+  cloudRimAlpha: 0.4,
+  cloudBody: "#12141F",
+  cloudBodyAlpha: 0.92,
+  peakNear: "#0A1220",
+  peakFar: "#070D18",
+  glitter: "#D8C4D8",
+  glitterAlpha: 0.8,
+  bloom: "#C0A8C4",
+  bloomAlpha: 0.18,
+  glow: "#E4D2E4",
+  glowAlpha: 0.36,
+  disc: "#F2E4E8",
+  horizonLine: "#B49CB4",
+  horizonLineAlpha: 0.18,
+  underLine: "#D0BCD0",
+  underLineAlpha: 0.34,
+  vignette: "#050408",
+  starAlpha: 0.5,
+  dayness: 0
+};
+
+/** [minutes since midnight, palette] — adjacent identical entries hold. */
+const KEYFRAMES = [[0, NIGHT], [300, NIGHT],
+// 05:00 — night holds
+[360, DAWN],
+// 06:00
+[415, SUNRISE],
+// 06:55
+[510, DAY],
+// 08:30
+[1050, DAY],
+// 17:30 — day holds
+[1080, GOLDEN],
+// 18:00
+[1130, SUNSET],
+// 18:50
+[1180, DUSK],
+// 19:40
+[1245, NIGHT],
+// 20:45
+[1440, NIGHT]];
+function lerpPalette(a, b, t) {
+  const out = {};
+  for (const k of Object.keys(a)) {
+    const av = a[k];
+    const bv = b[k];
+    out[k] = typeof av === "number" ? av + (bv - av) * t : lerpColor(av, bv, t);
+  }
+  return out;
+}
+function paletteAt(minutes) {
+  for (let i = 0; i < KEYFRAMES.length - 1; i++) {
+    const [t0, p0] = KEYFRAMES[i];
+    const [t1, p1] = KEYFRAMES[i + 1];
+    if (minutes >= t0 && minutes <= t1) {
+      if (p0 === p1 || t1 === t0) return p0;
+      return lerpPalette(p0, p1, (minutes - t0) / (t1 - t0));
+    }
+  }
+  return NIGHT;
+}
+
+// ============================================================================
+// The workday remap — THE mapping LIVE mode runs on
+// ============================================================================
+
+/**
+ * Real minutes → scene minutes, compressing the planet's day onto a working
+ * human's: dawn as you sit down (~8:00), sunrise ~9:00, noon at lunch, golden
+ * hour ~16:30, sunset as the workday ends (~17:30), night after ~20:00. A 9–5
+ * session sees the whole cycle; the honest 1:1 mapping (auditioned against
+ * this via two play buttons, and cut) held featureless DAY for all of it —
+ * the pretty parts fired while nobody was at their desk.
+ *
+ * The scrub slider and the ▶ movie also run through this (the slider thumb is
+ * a WALL clock; the scene is always the remap of it).
+ *
+ * Anchors are [real, scene] minute pairs, strictly increasing, folded across
+ * midnight so the night segment (20:00 → 7:30 next day) is one linear piece.
+ */
+const WORKDAY_ANCHORS = [[450, 330],
+// 07:30 → 05:30 pre-dawn
+[540, 420],
+// 09:00 → 07:00 just after sunrise
+[750, 720],
+// 12:30 → noon
+[990, 1080],
+// 16:30 → 18:00 golden hour
+[1050, 1130],
+// 17:30 → 18:50 sunset
+[1140, 1180],
+// 19:00 → 19:40 dusk
+[1200, 1260],
+// 20:00 → 21:00 night
+[1890, 1770] // 07:30 next day → 05:30 next day (the night piece, wrapped)
+];
+export function workdaySceneMinutes(realMinutes) {
+  let m = realMinutes;
+  if (m < WORKDAY_ANCHORS[0][0]) m += 1440;
+  for (let i = 0; i < WORKDAY_ANCHORS.length - 1; i++) {
+    const [r0, s0] = WORKDAY_ANCHORS[i];
+    const [r1, s1] = WORKDAY_ANCHORS[i + 1];
+    if (m >= r0 && m <= r1) {
+      return (s0 + (m - r0) / (r1 - r0) * (s1 - s0)) % 1440;
+    }
+  }
+  return realMinutes;
+}
+
+// ============================================================================
+// The clock — one small render per minute, AppState-gated like the loops
+// ============================================================================
+
+function nowMinutes() {
+  const d = new Date();
+  return d.getHours() * 60 + d.getMinutes();
+}
+function useMinuteClock(enabled) {
+  const [minutes, setMinutes] = useState(nowMinutes);
+  useEffect(() => {
+    if (!enabled) return;
+    let timeout = null;
+    let interval = null;
+    const stop = () => {
+      if (timeout) clearTimeout(timeout);
+      if (interval) clearInterval(interval);
+      timeout = interval = null;
+    };
+    // Snap to now, then align the tick to the minute boundary.
+    const start = () => {
+      setMinutes(nowMinutes());
+      const d = new Date();
+      const untilNext = 60_000 - (d.getSeconds() * 1000 + d.getMilliseconds()) + 50;
+      timeout = setTimeout(() => {
+        setMinutes(nowMinutes());
+        interval = setInterval(() => setMinutes(nowMinutes()), 60_000);
+      }, untilNext);
+    };
+    start();
+    const sub = AppState.addEventListener("change", state => {
+      stop();
+      // Re-snapping on foreground means an hour in the background comes back
+      // to the RIGHT sky, not a stale one.
+      if (state === "active") start();
+    });
+    return () => {
+      stop();
+      sub.remove();
+    };
+  }, [enabled]);
+  return minutes;
+}
+
+// ============================================================================
+// Shared geometry (same specs as the fixed siblings)
+// ============================================================================
+
+/** Stride 3: x, y, size — Moonlight's star field. */
+const SKY_STAR_COUNT = 22;
+const SKY_STARS = scatter(0x52b7, SKY_STAR_COUNT * 3);
+const CLOUDS = [{
+  at: [0.16, 0.3],
+  puffs: [[-62, 4, 150, 20], [-44, -8, 62, 24], [-4, -14, 74, 30], [38, -4, 54, 20]],
+  bodyAlpha: 1
+}, {
+  at: [0.84, 0.37],
+  puffs: [[-55, 3, 130, 18], [-30, -8, 56, 22], [8, -13, 64, 27], [42, -3, 44, 17]],
+  bodyAlpha: 1
+}, {
+  at: [0.46, 0.425],
+  puffs: [[-40, 2, 96, 13], [-12, -6, 48, 16], [22, -2, 38, 12]],
+  bodyAlpha: 0.95
+}];
+
+/** The lit rim tilts toward wherever the light currently is. */
+function rimFor(cloudX, lightXFrac) {
+  if (lightXFrac === null) return [0, -3.5];
+  const dx = Math.max(-4, Math.min(4, (lightXFrac - cloudX) * 10));
+  return [dx, -3.5];
+}
+function cloudPuffs(cloud, cx, cy, rim, rimColor, bodyColor, key) {
+  const parts = [];
+  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 + rim[0] - w / 2,
+        top: cy + dy + rim[1] - h / 2,
+        width: w,
+        height: h,
+        borderRadius: h / 2,
+        backgroundColor: rimColor
+      }
+    }, `${key}-r${i}`));
+  }
+  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: bodyColor
+      }
+    }, `${key}-b${i}`));
+  }
+  return parts;
+}
+
+/** [xFrac, yFrac (of the horizon), wing length]. */
+const GULLS = [[0.2, 0.42, 6], [0.3, 0.28, 5], [0.42, 0.52, 4]];
+
+/** [xFrac, base width, height, near?] — near peaks take peakNear. */
+const PEAKS = [[0.03, 120, 24, 1], [0.11, 96, 36, 0], [0.2, 140, 24, 1], [0.29, 76, 15, 0], [0.9, 96, 18, 1], [0.98, 130, 27, 0]];
+const SAILS = [[0.07, 6], [0.14, 4.5], [0.23, 5.5]];
+const SHORE_LIGHTS = [0.06, 0.13, 0.18, 0.26];
+
+// ============================================================================
+// The glade — glitter column under whichever body is up
+// ============================================================================
+
+/** Stride 4: depth, x jitter, width jitter, alpha jitter. */
+const GLADE_LAYERS = [{
+  count: 44,
+  seed: 0x3aa1
+}, {
+  count: 34,
+  seed: 0x77c2
+}, {
+  count: 26,
+  seed: 0xb4e9
+}];
+const GLADE_TABLES = GLADE_LAYERS.map(l => scatter(l.seed, l.count * 4));
+const ROW_STEP = 7;
+const GlitterLayer = /*#__PURE__*/memo(function GlitterLayer({
+  layerIndex,
+  drive,
+  lightXFrac,
+  color,
+  alphaScale,
+  width,
+  height,
+  animated
+}) {
+  const sway = usePulse(drive === "swayA" ? 9000 : 12500, animated && drive !== "breathe");
+  const breathe = usePulse(6200, animated && drive === "breathe");
+  const lightX = width * lightXFrac;
+  const horizonY = height * HORIZON;
+  const layer = GLADE_LAYERS[layerIndex];
+  const table = GLADE_TABLES[layerIndex];
+  const blocks = [];
+  for (let i = 0; i < layer.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 = lightX + (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.16 + arc * 0.48) * centered * (0.75 + ja * 0.25) * alphaScale;
+    if (alpha < 0.02) continue;
+    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(color, Math.min(1, alpha))
+      }
+    }, 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,
+      children: blocks
+    })
+  });
+});
+
+// ============================================================================
+// The scene
+// ============================================================================
+
+/** Progress 0..1 → position on the east→west arc. */
+function arcPos(progress, width, horizonY) {
+  return {
+    xFrac: 0.08 + 0.84 * progress,
+    x: width * (0.08 + 0.84 * progress),
+    y: horizonY - Math.sin(Math.PI * progress) * horizonY * 0.75,
+    altitude: Math.sin(Math.PI * progress)
+  };
+}
+export const LiveSkyTunable = /*#__PURE__*/memo(function LiveSkyTunable({
+  clockMinutes,
+  ...props
+}) {
+  const {
+    width,
+    height,
+    animated
+  } = props;
+  const live = useMinuteClock(clockMinutes === undefined);
+  const minutes = workdaySceneMinutes(clockMinutes ?? live);
+  const p = paletteAt(minutes);
+  const horizonY = height * HORIZON;
+  // Light geometry is sized from the WINDOW so resizing the modal never
+  // swells or shrinks the blooms — only positions follow the modal.
+  const refW = Dimensions.get("window").width;
+
+  // Exactly one body is in its window at any minute (the windows adjoin at
+  // 06:30 and 19:00, where both sit half-set on opposite horizons).
+  const sunP = (minutes - SUN_RISE) / (SUN_SET - SUN_RISE);
+  const moonP = (minutes - SUN_SET + 1440) % 1440 / MOON_SPAN;
+  const sunUp = sunP >= 0 && sunP <= 1;
+  const moonUp = moonP >= 0 && moonP <= 1;
+  const sun = sunUp ? arcPos(sunP, width, horizonY) : null;
+  const moon = moonUp ? arcPos(moonP, width, horizonY) : null;
+  // The dominant body carries the bloom, the glade column and the cloud rims.
+  const dominant = sun && moon ? sun.altitude >= moon.altitude ? sun : moon : sun ?? moon;
+  const twinkle = usePulse(7400, animated && p.starAlpha > 0.01);
+  const cloudDrift = usePulse(26000, animated);
+  const twinkleOpacity = twinkle.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0.7, 1]
+  });
+  const cloudX = cloudDrift.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-8, 8]
+  });
+  const stars = [];
+  if (p.starAlpha > 0.01) {
+    for (let i = 0; i < SKY_STAR_COUNT; i++) {
+      const size = SKY_STARS[i * 3 + 2];
+      const dia = 1 + size * 1.3;
+      const x = SKY_STARS[i * 3] * width;
+      const y = SKY_STARS[i * 3 + 1] * horizonY * 0.92;
+      // Keep the sky clear around the current body so its bloom stays clean.
+      if (dominant && Math.hypot(x - dominant.x, y - dominant.y) < refW * 0.18) continue;
+      stars.push(/*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: x - dia / 2,
+          top: y - dia / 2,
+          width: dia,
+          height: dia,
+          borderRadius: dia / 2,
+          backgroundColor: withAlpha("#C9DAF0", (0.3 + size * 0.4) * p.starAlpha)
+        }
+      }, i));
+    }
+  }
+  const rimColor = withAlpha(p.cloudRim, p.cloudRimAlpha);
+  const clouds = CLOUDS.flatMap((cloud, i) => cloudPuffs(cloud, width * cloud.at[0], height * cloud.at[1], rimFor(cloud.at[0], dominant ? dominant.xFrac : null), rimColor, withAlpha(p.cloudBody, cloud.bodyAlpha * p.cloudBodyAlpha), `c${i}`));
+  const gulls = p.dayness > 0.03 ? GULLS.flatMap(([xf, yf, len], i) => {
+    const wing = {
+      position: "absolute",
+      top: horizonY * yf,
+      width: len,
+      height: 1.4,
+      borderRadius: 0.7,
+      backgroundColor: withAlpha("#123049", 0.75 * p.dayness)
+    };
+    const x = width * xf;
+    return [/*#__PURE__*/_jsx(View, {
+      style: [wing, {
+        left: x - len,
+        transform: [{
+          rotate: "18deg"
+        }]
+      }]
+    }, `g${i}l`), /*#__PURE__*/_jsx(View, {
+      style: [wing, {
+        left: x,
+        transform: [{
+          rotate: "-18deg"
+        }]
+      }]
+    }, `g${i}r`)];
+  }) : [];
+  const mountains = PEAKS.map(([xf, wBase, h, near], 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: near ? p.peakNear : p.peakFar
+    }
+  }, `m${i}`));
+  const sails = p.dayness > 0.03 ? 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 * p.dayness)
+    }
+  }, `s${i}`)) : [];
+  const nightness = 1 - p.dayness;
+  const lights = nightness > 0.03 ? SHORE_LIGHTS.map((xf, i) => /*#__PURE__*/_jsx(View, {
+    style: {
+      position: "absolute",
+      left: width * xf,
+      top: horizonY - 3,
+      width: 2,
+      height: 1.5,
+      backgroundColor: withAlpha("#E8D9A8", (0.55 + i % 2 * 0.2) * nightness)
+    }
+  }, `sl${i}`)) : [];
+
+  /** A body's disc (+ craters for the moon), drawn UNDER the sea rect so the
+   * horizon clips a rising or setting body for free. */
+  const disc = (pos, isMoon, key) => {
+    const dia = isMoon ? MOON_DIA : SUN_DIA;
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        left: pos.x - dia / 2,
+        top: pos.y - dia / 2,
+        width: dia,
+        height: dia,
+        borderRadius: dia / 2,
+        // Fully opaque: any translucency lets the app behind the modal
+        // bleed through the brightest surface in the scene.
+        backgroundColor: isMoon ? "#EDF3FB" : p.disc,
+        overflow: "hidden"
+      },
+      children: isMoon ? CRATERS.map(([dx, dy, frac], i) => {
+        const d = dia * frac;
+        return /*#__PURE__*/_jsx(View, {
+          style: {
+            position: "absolute",
+            left: dia / 2 + dx * dia - d / 2,
+            top: dia / 2 + dy * dia - d / 2,
+            width: d,
+            height: d,
+            borderRadius: d / 2,
+            backgroundColor: withAlpha("#9DB2C8", 0.32)
+          }
+        }, i);
+      }) : null
+    }, key);
+  };
+  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: p.skyTop
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 0,
+          height: horizonY
+        },
+        children: /*#__PURE__*/_jsx(LinearFade, {
+          color: p.skyHorizon,
+          from: 0,
+          to: p.skyHorizonAlpha,
+          direction: "down",
+          bands: 20,
+          flattenBase: p.skyTop
+        })
+      }), p.starAlpha > 0.01 ? /*#__PURE__*/_jsx(Animated.View, {
+        style: [absoluteFill, {
+          opacity: twinkleOpacity
+        }],
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(RasterLayer, {
+          style: absoluteFill,
+          children: stars
+        })
+      }) : null, /*#__PURE__*/_jsx(Animated.View, {
+        style: [absoluteFill, {
+          transform: [{
+            translateX: cloudX
+          }]
+        }],
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsxs(RasterLayer, {
+          style: absoluteFill,
+          children: [clouds, gulls]
+        })
+      }), dominant ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(RadialGlow, {
+          size: refW * 0.46,
+          color: p.bloom,
+          alpha: p.bloomAlpha,
+          rings: 20,
+          falloff: 1.9,
+          style: {
+            position: "absolute",
+            left: dominant.x - refW * 0.23,
+            top: dominant.y - refW * 0.23
+          }
+        }), /*#__PURE__*/_jsx(RadialGlow, {
+          size: 118,
+          color: p.glow,
+          alpha: p.glowAlpha,
+          rings: 10,
+          falloff: 1.6,
+          style: {
+            position: "absolute",
+            left: dominant.x - 59,
+            top: dominant.y - 59
+          }
+        })]
+      }) : null, sun ? disc(sun, false, "sun") : null, moon ? disc(moon, true, "moon") : null, /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: horizonY,
+          bottom: 0,
+          backgroundColor: p.seaColor
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: horizonY - 76,
+          height: 76
+        },
+        children: /*#__PURE__*/_jsx(LinearFade, {
+          color: p.hazeBand,
+          from: 0,
+          to: p.hazeAlpha,
+          direction: "down",
+          bands: 12
+        })
+      }), /*#__PURE__*/_jsxs(RasterLayer, {
+        style: absoluteFill,
+        children: [mountains, sails, lights]
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: horizonY,
+          height: 1,
+          backgroundColor: withAlpha(p.horizonLine, p.horizonLineAlpha)
+        }
+      }), dominant ? /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: dominant.x - width * 0.16,
+          top: horizonY,
+          width: width * 0.32,
+          height: 1,
+          backgroundColor: withAlpha(p.underLine, p.underLineAlpha)
+        }
+      }) : null, /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: horizonY,
+          bottom: 0
+        },
+        children: /*#__PURE__*/_jsx(LinearFade, {
+          color: p.seaFade,
+          from: 0,
+          to: p.seaFadeAlpha,
+          direction: "down",
+          bands: 12
+        })
+      }), dominant ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(GlitterLayer, {
+          layerIndex: 0,
+          drive: "swayA",
+          lightXFrac: dominant.xFrac,
+          color: p.glitter,
+          alphaScale: p.glitterAlpha,
+          ...props
+        }), /*#__PURE__*/_jsx(GlitterLayer, {
+          layerIndex: 1,
+          drive: "swayB",
+          lightXFrac: dominant.xFrac,
+          color: p.glitter,
+          alphaScale: p.glitterAlpha,
+          ...props
+        }), /*#__PURE__*/_jsx(GlitterLayer, {
+          layerIndex: 2,
+          drive: "breathe",
+          lightXFrac: dominant.xFrac,
+          color: p.glitter,
+          alphaScale: p.glitterAlpha,
+          ...props
+        })]
+      }) : null, /*#__PURE__*/_jsx(Vignette, {
+        color: p.vignette,
+        alpha: 0.4,
+        spread: 0.34
+      })]
+    })
+  );
+});
+export const LiveSky = /*#__PURE__*/memo(function LiveSky(props) {
+  // A non-null scrub (the switcher's slider) freezes the scene at that minute
+  // and stops the tick; LIVE clears it.
+  const scrub = useSkyScrub();
+  return /*#__PURE__*/_jsx(LiveSkyTunable, {
+    ...props,
+    clockMinutes: scrub ?? undefined
+  });
+});