@buoy-gg/shared-ui 7.0.25 → 7.0.27

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

@@ -1,575 +0,0 @@
-"use strict";
-
-/**
- * The lattice family — quiet technical geometry.
- *
- * All eight share one register, set by Hex Mesh: a near-black base, one soft
- * off-centre glow for depth, a rasterized hairline pattern at low alpha, a slow
- * breath, and a vignette. They read as instrument panels and drafting paper
- * rather than scenery, which is what keeps them legible under dense tool UI —
- * the pattern never competes with the text on top of it.
- *
- * Cost follows from that: the geometry is static, so it rasterizes into ONE
- * texture and the only animated node is the shared breath. See
- * `../README.md` for the contract.
- */
-
-import { memo } from "react";
-import { Animated, View } from "react-native";
-import { absoluteFill } from "../../../utils/absoluteFill.js";
-import { Base, RadialGlow, RasterLayer, Vignette, hairline, useLoop, usePulse } from "../primitives.js";
-import { withAlpha } from "../rng.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// ============================================================================
-// Shared shell
-// ============================================================================
-
-const BASE_COLOR = "#08090C";
-const VIGNETTE_COLOR = "#030405";
-
-/**
- * Base + glow + the rasterized pattern + breath + vignette. Every preset below
- * is just its geometry handed to this, which is what makes the family a family
- * instead of eight things that happen to be grey.
- */
-const LatticeShell = /*#__PURE__*/memo(function LatticeShell({
-  width,
-  height,
-  animated,
-  glow,
-  glowAt,
-  breatheMs = 6000,
-  floor = 0.6,
-  children
-}) {
-  const breathe = usePulse(breatheMs, animated);
-  const opacity = breathe.interpolate({
-    inputRange: [0, 1],
-    outputRange: [floor, 1]
-  });
-  const size = width * 1.5;
-  return /*#__PURE__*/_jsxs(View, {
-    style: absoluteFill,
-    pointerEvents: "none",
-    children: [/*#__PURE__*/_jsx(Base, {
-      color: BASE_COLOR
-    }), /*#__PURE__*/_jsx(RadialGlow, {
-      size: size,
-      color: glow,
-      alpha: 0.3,
-      rings: 8,
-      falloff: 2,
-      style: {
-        position: "absolute",
-        left: width * glowAt[0] - size / 2,
-        top: height * glowAt[1] - size / 2
-      }
-    }), /*#__PURE__*/_jsx(Animated.View, {
-      style: [absoluteFill, {
-        opacity
-      }],
-      pointerEvents: "none",
-      children: /*#__PURE__*/_jsx(RasterLayer, {
-        style: absoluteFill,
-        children: children
-      })
-    }), /*#__PURE__*/_jsx(Vignette, {
-      color: VIGNETTE_COLOR,
-      alpha: 0.55,
-      spread: 0.36
-    })]
-  });
-});
-
-/**
- * One family of parallel hairlines at an arbitrary angle.
- *
- * Rather than rotating each line, the whole family is laid out horizontally in
- * a square big enough to cover the diagonal and the SQUARE is rotated — one
- * transform for N lines, and no trigonometry to get the spacing right.
- */
-const LineFamily = /*#__PURE__*/memo(function LineFamily({
-  width,
-  height,
-  angle,
-  step,
-  color,
-  alpha,
-  thickness = hairline
-}) {
-  const diag = Math.ceil(Math.hypot(width, height));
-  const count = Math.ceil(diag / step) + 1;
-  const lines = [];
-  for (let i = 0; i < count; i++) {
-    lines.push(/*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        left: 0,
-        width: diag,
-        top: i * step,
-        height: thickness,
-        backgroundColor: withAlpha(color, alpha)
-      }
-    }, i));
-  }
-  return /*#__PURE__*/_jsx(View, {
-    style: {
-      position: "absolute",
-      left: (width - diag) / 2,
-      top: (height - diag) / 2,
-      width: diag,
-      height: diag,
-      transform: [{
-        rotate: `${angle}deg`
-      }]
-    },
-    children: lines
-  });
-});
-
-// ============================================================================
-// Hex Mesh — diamond lattice
-// ============================================================================
-
-const MESH_STEP = 46;
-
-/**
- * Squares rotated 45°, odd rows offset by half a step. RN has no polygon
- * primitive, so this is the honest way to get a technical mesh out of bordered
- * views; at this scale it reads the same as a hex grid.
- */
-export const HexMesh = /*#__PURE__*/memo(function HexMesh({
-  width,
-  height,
-  animated
-}) {
-  const cols = Math.ceil(width / MESH_STEP) + 1;
-  const rows = Math.ceil(height / MESH_STEP) + 1;
-  const size = MESH_STEP * 0.66;
-  const cells = [];
-  for (let r = 0; r < rows; r++) {
-    for (let c = 0; c < cols; c++) {
-      const offset = r % 2 === 0 ? 0 : MESH_STEP / 2;
-      // Fade the lattice out toward the bottom so content there stays crisp.
-      const depth = 1 - r / rows * 0.6;
-      cells.push(/*#__PURE__*/_jsx(View, {
-        style: {
-          position: "absolute",
-          left: c * MESH_STEP + offset - size / 2,
-          top: r * MESH_STEP - size / 2,
-          width: size,
-          height: size,
-          borderWidth: 1,
-          borderColor: withAlpha("#64748B", 0.16 * depth),
-          transform: [{
-            rotate: "45deg"
-          }]
-        }
-      }, `${r}-${c}`));
-    }
-  }
-  return /*#__PURE__*/_jsx(LatticeShell, {
-    width: width,
-    height: height,
-    animated: animated,
-    glow: "#334155",
-    glowAt: [0.25, 0.35],
-    children: cells
-  });
-});
-
-// ============================================================================
-// Iso Grid — three-axis isometric lattice
-// ============================================================================
-
-export const IsoGrid = /*#__PURE__*/memo(function IsoGrid({
-  width,
-  height,
-  animated
-}) {
-  const common = {
-    width,
-    height,
-    step: 38,
-    color: "#7C8CA3"
-  };
-  return /*#__PURE__*/_jsxs(LatticeShell, {
-    width: width,
-    height: height,
-    animated: animated,
-    glow: "#2C4257",
-    glowAt: [0.7, 0.2],
-    children: [/*#__PURE__*/_jsx(LineFamily, {
-      ...common,
-      angle: 0,
-      alpha: 0.1
-    }), /*#__PURE__*/_jsx(LineFamily, {
-      ...common,
-      angle: 60,
-      alpha: 0.16
-    }), /*#__PURE__*/_jsx(LineFamily, {
-      ...common,
-      angle: -60,
-      alpha: 0.16
-    })]
-  });
-});
-
-// ============================================================================
-// Crosshatch — fine 45° weave
-// ============================================================================
-
-export const Crosshatch = /*#__PURE__*/memo(function Crosshatch({
-  width,
-  height,
-  animated
-}) {
-  const common = {
-    width,
-    height,
-    step: 26,
-    color: "#5E6B7E",
-    alpha: 0.19
-  };
-  return /*#__PURE__*/_jsxs(LatticeShell, {
-    width: width,
-    height: height,
-    animated: animated,
-    glow: "#334155",
-    glowAt: [0.5, 0.55],
-    breatheMs: 7200,
-    children: [/*#__PURE__*/_jsx(LineFamily, {
-      ...common,
-      angle: 45
-    }), /*#__PURE__*/_jsx(LineFamily, {
-      ...common,
-      angle: -45
-    })]
-  });
-});
-
-// ============================================================================
-// Perf Board — solder-pad matrix
-// ============================================================================
-
-const PAD_STEP = 44;
-export const PerfBoard = /*#__PURE__*/memo(function PerfBoard({
-  width,
-  height,
-  animated
-}) {
-  const cols = Math.ceil(width / PAD_STEP) + 1;
-  const rows = Math.ceil(height / PAD_STEP) + 1;
-  const parts = [];
-  const pad = 7;
-  for (let r = 0; r < rows; r++) {
-    for (let c = 0; c < cols; c++) {
-      const major = r % 4 === 0 && c % 4 === 0;
-      parts.push(/*#__PURE__*/_jsx(View, {
-        style: {
-          position: "absolute",
-          left: c * PAD_STEP - pad / 2,
-          top: r * PAD_STEP - pad / 2,
-          width: pad,
-          height: pad,
-          borderRadius: pad / 2,
-          borderWidth: 1,
-          // Every fourth pad in both axes is a datum, so the eye can count
-          // the grid instead of just seeing texture.
-          borderColor: withAlpha("#78909C", major ? 0.34 : 0.15)
-        }
-      }, `p${r}-${c}`));
-    }
-  }
-  return /*#__PURE__*/_jsx(LatticeShell, {
-    width: width,
-    height: height,
-    animated: animated,
-    glow: "#2A3F4D",
-    glowAt: [0.2, 0.75],
-    children: parts
-  });
-});
-
-// ============================================================================
-// Halftone — dot grid with a light falloff
-// ============================================================================
-
-const HALFTONE_STEP = 40;
-
-/**
- * The only preset in the family with a gradient in it, and it's made of dot
- * SIZE rather than colour: dots swell toward the light and shrink away from it.
- * Cheaper than a real gradient and it survives any background colour.
- */
-export const Halftone = /*#__PURE__*/memo(function Halftone({
-  width,
-  height,
-  animated
-}) {
-  const cols = Math.ceil(width / HALFTONE_STEP) + 1;
-  const rows = Math.ceil(height / HALFTONE_STEP) + 1;
-  const lx = width * 0.3;
-  const ly = height * 0.25;
-  const maxDist = Math.hypot(width, height);
-  const dots = [];
-  for (let r = 0; r < rows; r++) {
-    for (let c = 0; c < cols; c++) {
-      const x = c * HALFTONE_STEP;
-      const y = r * HALFTONE_STEP;
-      const t = 1 - Math.min(1, Math.hypot(x - lx, y - ly) / (maxDist * 0.7));
-      const d = 1.2 + t * t * 5;
-      dots.push(/*#__PURE__*/_jsx(View, {
-        style: {
-          position: "absolute",
-          left: x - d / 2,
-          top: y - d / 2,
-          width: d,
-          height: d,
-          borderRadius: d / 2,
-          backgroundColor: withAlpha("#8FA3B8", 0.14 + t * 0.4)
-        }
-      }, `${r}-${c}`));
-    }
-  }
-  return /*#__PURE__*/_jsx(LatticeShell, {
-    width: width,
-    height: height,
-    animated: animated,
-    glow: "#31465C",
-    glowAt: [0.3, 0.25],
-    floor: 0.72,
-    children: dots
-  });
-});
-
-// ============================================================================
-// Waffle — machined panel
-// ============================================================================
-
-const WAFFLE_STEP = 58;
-export const Waffle = /*#__PURE__*/memo(function Waffle({
-  width,
-  height,
-  animated
-}) {
-  const cols = Math.ceil(width / WAFFLE_STEP) + 1;
-  const rows = Math.ceil(height / WAFFLE_STEP) + 1;
-  const size = WAFFLE_STEP - 10;
-  const cells = [];
-  for (let r = 0; r < rows; r++) {
-    for (let c = 0; c < cols; c++) {
-      cells.push(/*#__PURE__*/_jsx(View, {
-        style: {
-          position: "absolute",
-          left: c * WAFFLE_STEP + 5,
-          top: r * WAFFLE_STEP + 5,
-          width: size,
-          height: size,
-          borderRadius: 10,
-          borderWidth: 1,
-          borderColor: withAlpha("#6B7A8D", 0.15)
-        }
-      }, `${r}-${c}`));
-    }
-  }
-  return /*#__PURE__*/_jsx(LatticeShell, {
-    width: width,
-    height: height,
-    animated: animated,
-    glow: "#2E4152",
-    glowAt: [0.75, 0.65],
-    children: cells
-  });
-});
-
-// ============================================================================
-// Instrument — ruled scales with tick marks
-// ============================================================================
-
-export const Instrument = /*#__PURE__*/memo(function Instrument({
-  width,
-  height,
-  animated
-}) {
-  const rules = 5;
-  const gap = width / rules;
-  const tickStep = 32;
-  const ticks = Math.ceil(height / tickStep) + 1;
-  const parts = [];
-  for (let i = 0; i < rules; i++) {
-    const x = gap * i + gap / 2;
-    parts.push(/*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        left: x,
-        top: 0,
-        bottom: 0,
-        width: hairline,
-        backgroundColor: withAlpha("#7C8CA3", 0.22)
-      }
-    }, `r${i}`));
-    for (let t = 0; t < ticks; t++) {
-      // Every fifth tick is a major graduation — the thing that makes a scale
-      // read as a scale rather than a dotted line.
-      const major = t % 5 === 0;
-      const len = major ? 11 : 5;
-      parts.push(/*#__PURE__*/_jsx(View, {
-        style: {
-          position: "absolute",
-          left: x,
-          top: t * tickStep,
-          width: len,
-          // A hairline tick is invisible under the vignette — 1px minimum,
-          // 2px on the graduations.
-          height: major ? 2 : 1,
-          backgroundColor: withAlpha("#8FA3B8", major ? 0.5 : 0.26)
-        }
-      }, `t${i}-${t}`));
-    }
-  }
-  return /*#__PURE__*/_jsx(LatticeShell, {
-    width: width,
-    height: height,
-    animated: animated,
-    glow: "#2B3F51",
-    glowAt: [0.5, 0.15],
-    breatheMs: 8000,
-    children: parts
-  });
-});
-
-// ============================================================================
-// Radar — concentric rings, spokes, and a sweep
-// ============================================================================
-
-const GLOW = 26;
-
-/**
- * The one preset in the family with real motion: a sweep line rotating once
- * every 8s. It costs a second animated node and ~30 static views — still the
- * cheapest geometry here, because rings and spokes cover the surface with
- * almost nothing in them.
- */
-const RadarSweep = /*#__PURE__*/memo(function RadarSweep({
-  cx,
-  cy,
-  radius,
-  animated
-}) {
-  const t = useLoop(8000, animated);
-  const rotate = t.interpolate({
-    inputRange: [0, 1],
-    outputRange: ["0deg", "360deg"]
-  });
-  if (!animated) return null;
-  // Rotating about one END rather than the middle is what makes this a sweeping
-  // hand instead of a propeller. `transformOrigin` would say that directly, but
-  // it needs RN 0.74+ and these packages peer-depend on `react-native: "*"` — so
-  // the pivot is built out of layout instead: a container twice the radius wide,
-  // centred on the origin, with the line living in its right half only.
-  const span = radius * 2;
-  return /*#__PURE__*/_jsxs(Animated.View, {
-    style: {
-      position: "absolute",
-      left: cx - radius,
-      top: cy - GLOW / 2,
-      width: span,
-      height: GLOW,
-      transform: [{
-        rotate
-      }]
-    },
-    pointerEvents: "none",
-    children: [/*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        left: radius,
-        top: GLOW / 2,
-        width: radius,
-        height: 1,
-        backgroundColor: withAlpha("#7DD3FC", 0.36)
-      }
-    }), /*#__PURE__*/_jsx(RadialGlow, {
-      size: GLOW,
-      color: "#7DD3FC",
-      alpha: 0.4,
-      rings: 5,
-      style: {
-        position: "absolute",
-        left: span - GLOW,
-        top: 0
-      }
-    })]
-  });
-});
-export const Radar = /*#__PURE__*/memo(function Radar({
-  width,
-  height,
-  animated
-}) {
-  const cx = width * 0.5;
-  const cy = height * 0.42;
-  const maxR = Math.hypot(width, height) * 0.62;
-  const rings = 9;
-  const parts = [];
-  for (let i = 1; i <= rings; i++) {
-    const d = maxR * 2 * i / rings;
-    parts.push(/*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        left: cx - d / 2,
-        top: cy - d / 2,
-        width: d,
-        height: d,
-        borderRadius: d / 2,
-        borderWidth: 1,
-        borderColor: withAlpha("#5B7A94", 0.34 * (1 - i / rings * 0.5))
-      }
-    }, `ring${i}`));
-  }
-  for (let i = 0; i < 8; i++) {
-    // Same end-pivot trick as the sweep: a full-diameter container rotated
-    // about its centre, carrying a half-width line.
-    parts.push(/*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        left: cx - maxR,
-        top: cy,
-        width: maxR * 2,
-        height: hairline,
-        transform: [{
-          rotate: `${i * 45}deg`
-        }]
-      },
-      children: /*#__PURE__*/_jsx(View, {
-        style: {
-          position: "absolute",
-          left: maxR,
-          top: 0,
-          width: maxR,
-          height: hairline,
-          backgroundColor: withAlpha("#5B7A94", 0.22)
-        }
-      })
-    }, `spoke${i}`));
-  }
-  return /*#__PURE__*/_jsxs(View, {
-    style: absoluteFill,
-    pointerEvents: "none",
-    children: [/*#__PURE__*/_jsx(LatticeShell, {
-      width: width,
-      height: height,
-      animated: animated,
-      glow: "#1F3A4D",
-      glowAt: [0.5, 0.42],
-      floor: 0.75,
-      children: parts
-    }), /*#__PURE__*/_jsx(RadarSweep, {
-      cx: cx,
-      cy: cy,
-      radius: maxR,
-      animated: animated
-    })]
-  });
-});