@buoy-gg/shared-ui 7.0.41 → 7.0.42

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

@@ -1,449 +1 @@
-"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
-  });
-});
+"use strict";import{memo as B}from"react";import{Animated as j,Dimensions as Z,View as n}from"react-native";import{absoluteFill as C}from"../../../utils/absoluteFill.js";import{Base as q,LinearFade as W,RadialGlow as G,RasterLayer as k,Vignette as J,usePulse as M}from"../primitives.js";import{scatter as X,withAlpha as F}from"../rng.js";import{jsx as t,jsxs as x,Fragment as Q}from"react/jsx-runtime";const P="#1C4E74";const tt="#16405E";const U=.46;const Y=.72;const ot=.17;const A=50;const et=[{at:[.16,.3],puffs:[[-62,4,150,20],[-44,-8,62,24],[-4,-14,74,30],[38,-4,54,20]],rim:[4,-3.5],bodyAlpha:.88},{at:[.84,.37],puffs:[[-55,3,130,18],[-30,-8,56,22],[8,-13,64,27],[42,-3,44,17]],rim:[-2,-4],bodyAlpha:.88},{at:[.46,.425],puffs:[[-40,2,96,13],[-12,-6,48,16],[22,-2,38,12]],rim:[3,-3],bodyAlpha:.84}];function st(e,i,a,l){const d=[];for(let o=0;o<e.puffs.length;o++){const[r,f,p,h]=e.puffs[o];d.push(t(n,{style:{position:"absolute",left:i+r+e.rim[0]-p/2,top:a+f+e.rim[1]-h/2,width:p,height:h,borderRadius:h/2,backgroundColor:F("#FFFFFF",.6)}},`${l}-r${o}`))}for(let o=0;o<e.puffs.length;o++){const[r,f,p,h]=e.puffs[o];d.push(t(n,{style:{position:"absolute",left:i+r-p/2,top:a+f-h/2,width:p,height:h,borderRadius:h/2,backgroundColor:F("#C7DCEC",e.bodyAlpha)}},`${l}-b${o}`))}return d}const nt=[[.2,.42,6],[.3,.28,5],[.42,.52,4]];function rt(e,i,a,l){const d={position:"absolute",top:i,width:a,height:1.4,borderRadius:.7,backgroundColor:F("#123049",.75)};return[t(n,{style:[d,{left:e-a,transform:[{rotate:"18deg"}]}]},`${l}-l`),t(n,{style:[d,{left:e,transform:[{rotate:"-18deg"}]}]},`${l}-r`)]}const it=[[.03,120,24,"#2E5E80"],[.11,96,36,"#27516F"],[.2,140,24,"#2E5E80"],[.29,76,15,"#27516F"],[.9,96,18,"#2E5E80"],[.98,130,27,"#27516F"]];const at=[[.07,6],[.14,4.5],[.23,5.5]];const v=[{count:44,seed:23873},{count:34,seed:37315},{count:26,seed:51189}];const lt=v.map(e=>X(e.seed,e.count*4));const z=7;const $=B(function e({indices:i,drive:a,scale:l,raster:d,width:o,height:r,animated:f}){const p=M(a==="swayA"?9e3:12500,f&&a!=="breathe");const h=M(6200,f&&a==="breathe");const S=o*Y;const y=r*U;const w=[];for(const m of i){const L=v[m];const D=Math.round(L.count*l);const E=l===1?lt[m]:X(L.seed,D*4);for(let b=0;b<D;b++){const s=E[b*4];const c=E[b*4+1];const g=E[b*4+2];const R=E[b*4+3];const _=y+4+s*(r-y)*.94;const I=o*(.03+s*.16);const N=S+(c-.5)*2*I;const O=6+s*26+g*10;const T=s<.3?1:s<.62?2:3;const V=Math.sin(Math.PI*(.12+s*.82));const H=Math.max(.25,1-Math.abs(c-.5)*1.4);const K=(.2+V*.5)*H*(.75+R*.25);w.push(t(n,{style:{position:"absolute",left:N-O/2,top:Math.round(_/z)*z,width:O,height:T,borderRadius:.5,backgroundColor:F("#FFE9B0",K)}},`${m}-${b}`))}}const u=a==="breathe"?{opacity:h.interpolate({inputRange:[0,1],outputRange:[.55,1]})}:{transform:[{translateX:p.interpolate({inputRange:[0,1],outputRange:a==="swayA"?[-7,7]:[6,-6]})}]};return t(j.View,{style:[C,u],pointerEvents:"none",children:t(k,{style:C,raster:d,children:w})})});export const DaylightTunable=B(function e({gladeScale:i=1,fusedGlade:a=false,raster:l=true,chrome:d=true,...o}){const{width:r,height:f,animated:p}=o;const h=M(26e3,p);const S=h.interpolate({inputRange:[0,1],outputRange:[-8,8]});const y=r*Y;const w=f*ot;const u=f*U;const m=Z.get("window").width;const L=nt.flatMap(([s,c,g],R)=>rt(r*s,u*c,g,`g${R}`));const D=et.flatMap((s,c)=>st(s,r*s.at[0],f*s.at[1],`c${c}`));const E=it.map(([s,c,g,R],_)=>t(n,{style:{position:"absolute",left:r*s-c/2,top:u-g,width:0,height:0,borderLeftWidth:c/2,borderRightWidth:c/2,borderBottomWidth:g,borderLeftColor:"transparent",borderRightColor:"transparent",borderBottomColor:R}},`m${_}`));const b=at.map(([s,c],g)=>t(n,{style:{position:"absolute",left:r*s,top:u-c,width:0,height:0,borderLeftWidth:2,borderRightWidth:2,borderBottomWidth:c,borderLeftColor:"transparent",borderRightColor:"transparent",borderBottomColor:F("#F2F8FC",.85)}},`s${g}`));return x(n,{style:[C,{overflow:"hidden"}],pointerEvents:"none",children:[t(q,{color:P}),t(n,{style:{position:"absolute",left:0,right:0,top:0,height:u},children:t(W,{color:"#A9CDE6",from:0,to:.42,direction:"down",bands:20,flattenBase:P})}),t(n,{style:{position:"absolute",left:0,right:0,top:u,bottom:0,backgroundColor:tt}}),t(j.View,{style:[C,{transform:[{translateX:S}]}],pointerEvents:"none",children:x(k,{style:C,children:[D,L]})}),t(G,{size:m*.5,color:"#FFE9B0",alpha:.18,rings:20,falloff:1.9,style:{position:"absolute",left:y-m*.25,top:w-m*.25}}),t(G,{size:120,color:"#FFF4D2",alpha:.42,rings:10,falloff:1.6,style:{position:"absolute",left:y-60,top:w-60}}),t(n,{style:{position:"absolute",left:y-A/2,top:w-A/2,width:A,height:A,borderRadius:A/2,backgroundColor:"#FFF9E6"}}),d?t(n,{style:{position:"absolute",left:0,right:0,top:u-76,height:76},children:t(W,{color:"#CFE3F1",from:0,to:.3,direction:"down",bands:12})}):null,x(k,{style:C,children:[E,b]}),t(n,{style:{position:"absolute",left:0,right:0,top:u,height:1,backgroundColor:F("#E4F0F8",.2)}}),t(n,{style:{position:"absolute",left:y-r*.16,top:u,width:r*.32,height:1,backgroundColor:F("#FFEFC2",.42)}}),d?t(n,{style:{position:"absolute",left:0,right:0,top:u,bottom:0},children:t(W,{color:"#06192B",from:0,to:.55,direction:"down",bands:12})}):null,a?t($,{indices:[0,1,2],drive:"swayA",scale:i,raster:l,...o}):x(Q,{children:[t($,{indices:[0],drive:"swayA",scale:i,raster:l,...o}),t($,{indices:[1],drive:"swayB",scale:i,raster:l,...o}),t($,{indices:[2],drive:"breathe",scale:i,raster:l,...o})]}),d?t(J,{color:"#0A2033",alpha:.4,spread:.34}):null]})});export const Daylight=B(function e(i){return t(DaylightTunable,{...i})});