@buoy-gg/shared-ui 7.0.21 → 7.0.23

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

@@ -0,0 +1,579 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Waffle = exports.Radar = exports.PerfBoard = exports.IsoGrid = exports.Instrument = exports.HexMesh = exports.Halftone = exports.Crosshatch = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _absoluteFill = require("../../../utils/absoluteFill.js");
+var _primitives = require("../primitives.js");
+var _rng = require("../rng.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ */
+
+// ============================================================================
+// 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__*/(0, _react.memo)(function LatticeShell({
+  width,
+  height,
+  animated,
+  glow,
+  glowAt,
+  breatheMs = 6000,
+  floor = 0.6,
+  children
+}) {
+  const breathe = (0, _primitives.usePulse)(breatheMs, animated);
+  const opacity = breathe.interpolate({
+    inputRange: [0, 1],
+    outputRange: [floor, 1]
+  });
+  const size = width * 1.5;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: _absoluteFill.absoluteFill,
+    pointerEvents: "none",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Base, {
+      color: BASE_COLOR
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.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__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [_absoluteFill.absoluteFill, {
+        opacity
+      }],
+      pointerEvents: "none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.RasterLayer, {
+        style: _absoluteFill.absoluteFill,
+        children: children
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.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__*/(0, _react.memo)(function LineFamily({
+  width,
+  height,
+  angle,
+  step,
+  color,
+  alpha,
+  thickness = _primitives.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        position: "absolute",
+        left: 0,
+        width: diag,
+        top: i * step,
+        height: thickness,
+        backgroundColor: (0, _rng.withAlpha)(color, alpha)
+      }
+    }, i));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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.
+ */
+const HexMesh = exports.HexMesh = /*#__PURE__*/(0, _react.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          position: "absolute",
+          left: c * MESH_STEP + offset - size / 2,
+          top: r * MESH_STEP - size / 2,
+          width: size,
+          height: size,
+          borderWidth: 1,
+          borderColor: (0, _rng.withAlpha)("#64748B", 0.16 * depth),
+          transform: [{
+            rotate: "45deg"
+          }]
+        }
+      }, `${r}-${c}`));
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(LatticeShell, {
+    width: width,
+    height: height,
+    animated: animated,
+    glow: "#334155",
+    glowAt: [0.25, 0.35],
+    children: cells
+  });
+});
+
+// ============================================================================
+// Iso Grid — three-axis isometric lattice
+// ============================================================================
+
+const IsoGrid = exports.IsoGrid = /*#__PURE__*/(0, _react.memo)(function IsoGrid({
+  width,
+  height,
+  animated
+}) {
+  const common = {
+    width,
+    height,
+    step: 38,
+    color: "#7C8CA3"
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(LatticeShell, {
+    width: width,
+    height: height,
+    animated: animated,
+    glow: "#2C4257",
+    glowAt: [0.7, 0.2],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LineFamily, {
+      ...common,
+      angle: 0,
+      alpha: 0.1
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(LineFamily, {
+      ...common,
+      angle: 60,
+      alpha: 0.16
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(LineFamily, {
+      ...common,
+      angle: -60,
+      alpha: 0.16
+    })]
+  });
+});
+
+// ============================================================================
+// Crosshatch — fine 45° weave
+// ============================================================================
+
+const Crosshatch = exports.Crosshatch = /*#__PURE__*/(0, _react.memo)(function Crosshatch({
+  width,
+  height,
+  animated
+}) {
+  const common = {
+    width,
+    height,
+    step: 26,
+    color: "#5E6B7E",
+    alpha: 0.19
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(LatticeShell, {
+    width: width,
+    height: height,
+    animated: animated,
+    glow: "#334155",
+    glowAt: [0.5, 0.55],
+    breatheMs: 7200,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LineFamily, {
+      ...common,
+      angle: 45
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(LineFamily, {
+      ...common,
+      angle: -45
+    })]
+  });
+});
+
+// ============================================================================
+// Perf Board — solder-pad matrix
+// ============================================================================
+
+const PAD_STEP = 44;
+const PerfBoard = exports.PerfBoard = /*#__PURE__*/(0, _react.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__*/(0, _jsxRuntime.jsx)(_reactNative.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: (0, _rng.withAlpha)("#78909C", major ? 0.34 : 0.15)
+        }
+      }, `p${r}-${c}`));
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.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.
+ */
+const Halftone = exports.Halftone = /*#__PURE__*/(0, _react.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          position: "absolute",
+          left: x - d / 2,
+          top: y - d / 2,
+          width: d,
+          height: d,
+          borderRadius: d / 2,
+          backgroundColor: (0, _rng.withAlpha)("#8FA3B8", 0.14 + t * 0.4)
+        }
+      }, `${r}-${c}`));
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.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;
+const Waffle = exports.Waffle = /*#__PURE__*/(0, _react.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          position: "absolute",
+          left: c * WAFFLE_STEP + 5,
+          top: r * WAFFLE_STEP + 5,
+          width: size,
+          height: size,
+          borderRadius: 10,
+          borderWidth: 1,
+          borderColor: (0, _rng.withAlpha)("#6B7A8D", 0.15)
+        }
+      }, `${r}-${c}`));
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(LatticeShell, {
+    width: width,
+    height: height,
+    animated: animated,
+    glow: "#2E4152",
+    glowAt: [0.75, 0.65],
+    children: cells
+  });
+});
+
+// ============================================================================
+// Instrument — ruled scales with tick marks
+// ============================================================================
+
+const Instrument = exports.Instrument = /*#__PURE__*/(0, _react.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        position: "absolute",
+        left: x,
+        top: 0,
+        bottom: 0,
+        width: _primitives.hairline,
+        backgroundColor: (0, _rng.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__*/(0, _jsxRuntime.jsx)(_reactNative.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: (0, _rng.withAlpha)("#8FA3B8", major ? 0.5 : 0.26)
+        }
+      }, `t${i}-${t}`));
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _react.memo)(function RadarSweep({
+  cx,
+  cy,
+  radius,
+  animated
+}) {
+  const t = (0, _primitives.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__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+    style: {
+      position: "absolute",
+      left: cx - radius,
+      top: cy - GLOW / 2,
+      width: span,
+      height: GLOW,
+      transform: [{
+        rotate
+      }]
+    },
+    pointerEvents: "none",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        position: "absolute",
+        left: radius,
+        top: GLOW / 2,
+        width: radius,
+        height: 1,
+        backgroundColor: (0, _rng.withAlpha)("#7DD3FC", 0.36)
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.RadialGlow, {
+      size: GLOW,
+      color: "#7DD3FC",
+      alpha: 0.4,
+      rings: 5,
+      style: {
+        position: "absolute",
+        left: span - GLOW,
+        top: 0
+      }
+    })]
+  });
+});
+const Radar = exports.Radar = /*#__PURE__*/(0, _react.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        position: "absolute",
+        left: cx - d / 2,
+        top: cy - d / 2,
+        width: d,
+        height: d,
+        borderRadius: d / 2,
+        borderWidth: 1,
+        borderColor: (0, _rng.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        position: "absolute",
+        left: cx - maxR,
+        top: cy,
+        width: maxR * 2,
+        height: _primitives.hairline,
+        transform: [{
+          rotate: `${i * 45}deg`
+        }]
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          position: "absolute",
+          left: maxR,
+          top: 0,
+          width: maxR,
+          height: _primitives.hairline,
+          backgroundColor: (0, _rng.withAlpha)("#5B7A94", 0.22)
+        }
+      })
+    }, `spoke${i}`));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: _absoluteFill.absoluteFill,
+    pointerEvents: "none",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LatticeShell, {
+      width: width,
+      height: height,
+      animated: animated,
+      glow: "#1F3A4D",
+      glowAt: [0.5, 0.42],
+      floor: 0.75,
+      children: parts
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(RadarSweep, {
+      cx: cx,
+      cy: cy,
+      radius: maxR,
+      animated: animated
+    })]
+  });
+});