@actioneer/ads 0.5.4 → 0.5.6

package/components/pixel-icon.js

@@ -0,0 +1,733 @@
+"use client";
+var H = Object.defineProperty;
+var L = (a, e, i) => e in a ? H(a, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : a[e] = i;
+var o = (a, e, i) => L(a, typeof e != "symbol" ? e + "" : e, i);
+import { jsx as G } from "react/jsx-runtime";
+import * as D from "react";
+import { Renderer as O, Triangle as I, Program as z, Mesh as K, Texture as _ } from "ogl";
+import { cn as N } from "../lib/cn.js";
+const R = {
+  growth: [
+    "...##....##....##",
+    "..###...###...###",
+    ".####..####..####",
+    "#####.#####.#####",
+    ".................",
+    "...##....##....##",
+    "..###...###...###",
+    ".####..####..####",
+    "#####.#####.#####",
+    "#####.#####.#####",
+    ".................",
+    "...##....##....##",
+    ".####..####..####",
+    "#####.#####.#####",
+    "#####.#####.#####"
+  ],
+  // Pixel-sampled from Phosphor's official fill SVGs:
+  // Folder Simple, Magnifying Glass, and Books.
+  "document-agent": [
+    "...............",
+    "...............",
+    ".#####.........",
+    ".######........",
+    ".#############.",
+    ".#############.",
+    ".#############.",
+    ".#############.",
+    ".#############.",
+    ".#############.",
+    ".#############.",
+    ".#############.",
+    ".#############.",
+    "...............",
+    "..............."
+  ],
+  search: [
+    "...............",
+    "...#######.....",
+    "..##.....##....",
+    ".##.#####.##...",
+    ".#.#######.#...",
+    ".#.#######.#...",
+    ".#.#######.#...",
+    ".#.#######.#...",
+    ".#.#######.#...",
+    ".##.#####.#....",
+    "..##.....##....",
+    "...######..#...",
+    "............#..",
+    ".............#.",
+    "..............."
+  ],
+  books: [
+    "...............",
+    "..##########...",
+    "..#...##...#...",
+    "..###########..",
+    "..#######...#..",
+    "..#####.#####..",
+    "..#####.#####..",
+    "..#####.######.",
+    "..#####.######.",
+    "..#####.######.",
+    "..#####..#####.",
+    "..#####..##..#.",
+    "..#...#..#..##.",
+    "..#####..###...",
+    "..............."
+  ]
+}, A = [
+  "#1e3a16",
+  "#254a1d",
+  "#2c5724",
+  "#316c26",
+  "#3f7a34",
+  "#548c41",
+  "#6da24e",
+  "#77b76b",
+  "#9ccc93",
+  "#cae8c5"
+], k = {
+  growth: A,
+  "document-agent": A,
+  search: A,
+  books: A
+}, y = /* @__PURE__ */ new Set(), U = ["#c7cad0", "#d0d3d8", "#d8dade", "#dfe1e4", "#e6e7e9"], M = 0, q = (
+  /* glsl */
+  `
+  attribute vec2 uv;
+  attribute vec2 position;
+
+  varying vec2 vUv;
+
+  void main() {
+    vUv = uv;
+    gl_Position = vec4(position, 0.0, 1.0);
+  }
+`
+), V = (
+  /* glsl */
+  `
+  precision highp float;
+
+  uniform sampler2D tMask;
+  uniform vec2 uGrid;
+  uniform vec2 uPointer;
+  uniform vec2 uBlastPointer;
+  uniform float uTime;
+  uniform float uHoverTime;
+  uniform float uHover;
+  uniform float uBlastTime;
+  uniform float uBlast;
+  uniform float uIntro;
+  uniform float uMotion;
+  uniform float uSequence;
+  uniform float uSeed;
+  uniform float uStripeFrequency;
+  uniform float uGapInner;
+  uniform float uGapOuter;
+  uniform float uMode;
+  uniform vec3 uColor0;
+  uniform vec3 uColor1;
+  uniform vec3 uColor2;
+  uniform vec3 uColor3;
+  uniform vec3 uColor4;
+  uniform vec3 uColor5;
+  uniform vec3 uColor6;
+  uniform vec3 uColor7;
+  uniform vec3 uColor8;
+  uniform vec3 uColor9;
+
+  varying vec2 vUv;
+
+  float hash21(vec2 p) {
+    p = fract(p * vec2(123.34, 456.21));
+    p += dot(p, p + 45.32 + uSeed);
+    return fract(p.x * p.y);
+  }
+
+  vec3 palette(float index) {
+    if (index < 0.5) return uColor0;
+    if (index < 1.5) return uColor1;
+    if (index < 2.5) return uColor2;
+    if (index < 3.5) return uColor3;
+    if (index < 4.5) return uColor4;
+    if (index < 5.5) return uColor5;
+    if (index < 6.5) return uColor6;
+    if (index < 7.5) return uColor7;
+    if (index < 8.5) return uColor8;
+    return uColor9;
+  }
+
+  float wrappedDistance(float a, float b) {
+    float distanceValue = abs(a - b);
+    return min(distanceValue, 1.0 - distanceValue);
+  }
+
+  void main() {
+    const float padding = ${M.toFixed(4)};
+    vec2 iconUv = (vUv - padding) / (1.0 - padding * 2.0);
+
+    if (iconUv.x < 0.0 || iconUv.x > 1.0 || iconUv.y < 0.0 || iconUv.y > 1.0) {
+      gl_FragColor = vec4(0.0);
+      return;
+    }
+
+    vec2 gridPosition = iconUv * uGrid;
+    vec2 cell = floor(gridPosition);
+    vec2 cellUv = fract(gridPosition);
+    vec2 cellCenter = (cell + 0.5) / uGrid;
+    vec4 maskSample = texture2D(tMask, cellCenter);
+    float presence = step(0.5, maskSample.r);
+    float iconCell = step(0.75, maskSample.b);
+    float frameCell = 1.0 - iconCell;
+    float symbolCell = iconCell;
+
+    if (presence < 0.5) {
+      gl_FragColor = vec4(0.0);
+      return;
+    }
+
+    float random = hash21(cell);
+    float centerDistance = length(cellCenter - 0.5) * 1.25;
+    float sequencePosition = clamp((cellCenter.x + cellCenter.y) * 0.5, 0.0, 1.0);
+    float introOrder = mix(centerDistance * 0.48, sequencePosition * 0.54, uSequence);
+    float intro = smoothstep(introOrder, introOrder + 0.24, uIntro);
+
+    float mode0 = 1.0 - step(0.5, abs(uMode - 0.0));
+    float mode1 = 1.0 - step(0.5, abs(uMode - 1.0));
+    float mode2 = 1.0 - step(0.5, abs(uMode - 2.0));
+    float mode3 = 1.0 - step(0.5, abs(uMode - 3.0));
+    float mode4 = 1.0 - step(0.5, abs(uMode - 4.0));
+    float mode5 = 1.0 - step(0.5, abs(uMode - 5.0));
+    float hoverMotion = uHover * uMotion * symbolCell;
+    float blastSuppression = uBlast * (1.0 - smoothstep(0.98, 1.35, uBlastTime));
+    float radialShrinkMode = mode3 * (1.0 - blastSuppression);
+    float particleHoverMode = mode5;
+
+    vec2 pointerCell = floor(uPointer * uGrid);
+    float directCell = 1.0 - step(0.25, length(cell - pointerCell));
+    float cellDistance = length((cellCenter - uPointer) * uGrid);
+    float neighborFalloff = (1.0 - smoothstep(0.55, 1.65, cellDistance)) * 0.18;
+    float localInfluence = max(directCell, neighborFalloff) * hoverMotion;
+    float nearField = exp(-cellDistance * 0.42) * hoverMotion;
+
+    float bouncePhase = uHoverTime * 8.4 + random * 1.2;
+    float bounceSine = sin(bouncePhase);
+    float liftPulse = pow(max(0.0, bounceSine), 2.0);
+    float elasticBounce = localInfluence * liftPulse;
+    float elasticLanding = pow(max(0.0, -bounceSine), 6.0) * localInfluence;
+
+    float maxGrid = max(uGrid.x, uGrid.y);
+    float rippleRadius = mod(uHoverTime * 5.8, maxGrid * 0.95 + 2.0);
+    float rippleRing = exp(-pow((cellDistance - rippleRadius) / 0.78, 2.0)) * hoverMotion;
+    float rippleEcho = exp(-pow((cellDistance - (rippleRadius - 2.7)) / 0.62, 2.0))
+      * step(2.7, rippleRadius)
+      * hoverMotion;
+    float colorRipple = max(directCell * hoverMotion, max(rippleRing, rippleEcho * 0.68));
+
+    float magneticPulse = 0.68 + 0.32 * sin(uHoverTime * 6.2 - cellDistance * 0.72);
+    float magneticField = nearField * magneticPulse;
+    vec2 pullVector = uPointer - cellCenter;
+    float pullAngle = atan(pullVector.y, pullVector.x);
+
+    float blastDistance = length((cellCenter - uBlastPointer) * uGrid);
+    float echoRadius = uBlastTime * 5.2;
+    float echoLifetime = (1.0 - smoothstep(1.04, 1.35, uBlastTime)) * uBlast * uMotion;
+    float echoRing0 = exp(-pow((blastDistance - echoRadius) / 0.48, 2.0));
+    float echoRing1 = exp(-pow((blastDistance - (echoRadius - 2.4)) / 0.42, 2.0))
+      * step(2.4, echoRadius);
+    float echoRing2 = exp(-pow((blastDistance - (echoRadius - 4.8)) / 0.38, 2.0))
+      * step(4.8, echoRadius);
+    float radialEcho = max(echoRing0, max(echoRing1 * 0.78, echoRing2 * 0.58))
+      * echoLifetime;
+
+    float blastRadius = uBlastTime * 10.5;
+    float blastRing = exp(-pow((blastDistance - blastRadius) / 0.7, 2.0))
+      * exp(-uBlastTime * 0.58)
+      * uBlast
+      * uMotion;
+    float blastCore = exp(-blastDistance * 0.72)
+      * exp(-uBlastTime * 5.4)
+      * uBlast
+      * uMotion;
+    float localBlastAge = max(0.0, uBlastTime - blastDistance / 10.5);
+    float blastArrived = step(blastDistance / 10.5, uBlastTime);
+    float blastReach = 1.0 - smoothstep(0.0, 8.5, blastDistance);
+    float blastShake = sin(localBlastAge * 35.0 + random * 19.0)
+      * exp(-localBlastAge * 5.0)
+      * blastArrived
+      * blastReach
+      * uBlast
+      * uMotion;
+    float blastRandomAngle = random * 6.2831853 + 1.7;
+    vec2 blastRandomDirection = vec2(cos(blastRandomAngle), sin(blastRandomAngle));
+    vec2 blastAway = normalize(
+      (cellCenter - uBlastPointer) * uGrid + blastRandomDirection * 0.045
+    );
+    vec2 blastOffset = blastAway * (blastRing * 0.15 + blastCore * 0.08)
+      + blastRandomDirection * blastShake * 0.085;
+
+    float scatterReach = (1.0 - smoothstep(0.0, 5.8, cellDistance)) * hoverMotion;
+    float scatterSignal = pow(max(0.0, sin(uHoverTime * 12.0 + random * 19.0 - cellDistance)), 5.0);
+    float signalScatter = max(
+      directCell * hoverMotion * abs(sin(uHoverTime * 9.0 + random * 4.0)),
+      scatterReach * scatterSignal
+    );
+
+    float particleReach = (1.0 - smoothstep(0.25, 5.6, cellDistance)) * hoverMotion;
+    float particleSettle = 0.88 + 0.12 * sin(
+      uHoverTime * 6.4 - cellDistance * 1.28 + random * 2.6
+    );
+    float particleForce = particleReach * particleSettle;
+    float particleAngle = random * 6.2831853;
+    vec2 particleJitter = vec2(cos(particleAngle), sin(particleAngle)) * 0.08;
+    vec2 particleAway = normalize((cellCenter - uPointer) * uGrid + particleJitter);
+    vec2 particleOffset = particleAway
+      * particleForce
+      * (0.132 + 0.018 * sin(uHoverTime * 5.2 + random * 7.0));
+    float radialShrink = max(
+      directCell * hoverMotion,
+      (1.0 - smoothstep(0.15, 2.85, cellDistance)) * hoverMotion
+    );
+
+    float tileScale = 0.82;
+    vec2 springShape = vec2(1.0);
+    float angle = 0.0;
+    vec2 tileOffset = vec2(0.0);
+
+    tileScale -= radialShrinkMode * radialShrink * 0.27;
+
+    tileScale += mode0 * (directCell * hoverMotion * 0.075 + colorRipple * 0.045);
+
+    tileScale += mode1 * (elasticBounce * 0.13 - elasticLanding * 0.14);
+    springShape += mode1 * vec2(
+      -elasticBounce * 0.03 + elasticLanding * 0.16,
+      elasticBounce * 0.03 - elasticLanding * 0.14
+    );
+    angle += mode1 * cos(bouncePhase) * localInfluence * 0.18;
+
+    tileScale += mode2 * magneticField * 0.115;
+    springShape += mode2 * vec2(-magneticField * 0.035, magneticField * 0.065);
+    angle += mode2 * (
+      sin(pullAngle * 2.0) * magneticField * 0.16
+      + directCell * hoverMotion * sin(uHoverTime * 7.0) * 0.09
+    );
+
+    tileScale += mode3 * radialEcho * 0.145;
+    springShape += mode3 * vec2(-radialEcho * 0.055, radialEcho * 0.08);
+    angle += mode3 * sin(blastDistance * 1.8 + uBlastTime * 3.0) * radialEcho * 0.12;
+    tileScale += mode3 * (
+      blastRing * 0.19 - blastCore * 0.13 + abs(blastShake) * 0.055
+    );
+    springShape += mode3 * vec2(-blastRing * 0.055, blastRing * 0.075);
+    angle += mode3 * (
+      blastShake * 0.34 + (random - 0.5) * blastRing * 0.32
+    );
+    tileOffset += mode3 * blastOffset;
+
+    tileScale += mode4 * (signalScatter * 0.145 - scatterReach * (1.0 - scatterSignal) * 0.025);
+    springShape += mode4 * vec2(signalScatter * 0.08, -signalScatter * 0.075);
+    angle += mode4 * (random - 0.5) * signalScatter * 0.62;
+
+    tileScale += particleHoverMode * (
+      -particleForce * 0.19
+      + directCell * hoverMotion * (0.025 + 0.015 * sin(uHoverTime * 6.4))
+    );
+    springShape += particleHoverMode * vec2(-particleForce * 0.035, particleForce * 0.05);
+    angle += particleHoverMode * (
+      (random - 0.5) * particleForce * 0.6
+      + directCell * hoverMotion * sin(uHoverTime * 5.4) * 0.045
+    );
+    tileOffset += particleHoverMode * particleOffset;
+
+    float minimumTileScale = 0.64 - particleHoverMode * 0.06 - radialShrinkMode * 0.1;
+    tileScale = clamp(tileScale, minimumTileScale, 0.97) * intro;
+    springShape = max(springShape, vec2(0.72));
+
+    float cosine = cos(angle);
+    float sine = sin(angle);
+    mat2 rotation = mat2(cosine, -sine, sine, cosine);
+    vec2 local = (cellUv - 0.5 - tileOffset) / (max(tileScale, 0.001) * springShape);
+    vec2 shapeLocal = rotation * local;
+    float boxDistance = max(abs(shapeLocal.x), abs(shapeLocal.y));
+    float outerBox = 1.0 - smoothstep(0.47, 0.5, boxDistance);
+
+    if (outerBox < 0.01) {
+      gl_FragColor = vec4(0.0);
+      return;
+    }
+
+    vec2 hatchUv = local + 0.5;
+    vec2 baseStrokeDirection = normalize(vec2(1.0, 1.0));
+    vec2 pointerVector = uPointer - 0.5;
+    float pointerLength = length(pointerVector);
+    vec2 pointerDirection = pointerVector / max(pointerLength, 0.001);
+    if (dot(pointerDirection, baseStrokeDirection) < 0.0) {
+      pointerDirection *= -1.0;
+    }
+    float steering = uHover
+      * uMotion
+      * symbolCell
+      * (1.0 - mode3)
+      * smoothstep(0.055, 0.5, pointerLength)
+      * 0.92;
+    vec2 strokeDirection = normalize(mix(baseStrokeDirection, pointerDirection, steering));
+    vec2 strokeNormal = vec2(strokeDirection.y, -strokeDirection.x);
+
+    float phase = 0.0;
+    float drift = 0.0;
+    float hatchCoordinate = dot(hatchUv - 0.5, strokeNormal) * uStripeFrequency + phase + drift;
+    float hatchDistance = abs(fract(hatchCoordinate) - 0.5);
+    float transparentGap = 1.0 - smoothstep(uGapInner, uGapOuter, hatchDistance);
+    float diagonalStroke = 1.0 - transparentGap;
+
+    float shadeIndex = floor(maskSample.g * 255.0 + 0.5);
+    float shadeTone = shadeIndex / 9.0;
+    vec3 iconColor = palette(shadeIndex);
+    vec3 frameColor = mix(
+      vec3(0.78, 0.79, 0.815),
+      vec3(0.9, 0.91, 0.925),
+      shadeTone
+    );
+    vec3 color = iconColor * iconCell
+      + frameColor * frameCell;
+
+    vec3 rippleColor = mix(
+      vec3(0.08, 0.78, 1.0),
+      vec3(0.58, 0.24, 1.0),
+      0.5 + 0.5 * sin(uHoverTime * 2.6 + cellDistance * 0.32)
+    );
+    vec3 elasticColor = vec3(1.0, 0.46, 0.1);
+    vec3 magneticColor = vec3(0.08, 0.76, 0.64);
+    vec3 shrinkHoverColor = vec3(0.612, 0.8, 0.576);
+    vec3 echoColor = vec3(0.612, 0.8, 0.576);
+    vec3 blastColor = mix(
+      vec3(1.0),
+      vec3(0.247, 0.478, 0.204),
+      smoothstep(0.0, 0.42, uBlastTime)
+    );
+    vec3 scatterColor = mix(
+      vec3(1.0, 0.2, 0.55),
+      vec3(0.08, 0.82, 1.0),
+      step(0.5, random)
+    );
+    vec3 particleColor = mix(
+      vec3(0.0, 0.9, 0.96),
+      vec3(0.62, 0.18, 1.0),
+      clamp(cellDistance / 5.6 + (random - 0.5) * 0.22, 0.0, 1.0)
+    );
+
+    color = mix(color, rippleColor, mode0 * clamp(colorRipple * 0.94, 0.0, 0.94));
+    color = mix(
+      color,
+      elasticColor,
+      mode1 * directCell * hoverMotion * (0.68 + 0.24 * abs(sin(uHoverTime * 8.4)))
+    );
+    color = mix(
+      color,
+      magneticColor,
+      mode2 * clamp(max(magneticField * 0.72, directCell * hoverMotion * 0.72), 0.0, 0.82)
+    );
+    color = mix(
+      color,
+      shrinkHoverColor,
+      radialShrinkMode * clamp(radialShrink * 0.98, 0.0, 0.98)
+    );
+    color = mix(
+      color,
+      echoColor,
+      mode3 * clamp(radialEcho * 0.96, 0.0, 0.96)
+    );
+    color = mix(
+      color,
+      blastColor,
+      mode3 * clamp(max(max(blastRing, blastCore) * 1.12, abs(blastShake) * 0.34), 0.0, 0.98)
+    );
+    color = mix(
+      color,
+      scatterColor,
+      mode4 * clamp(max(signalScatter * 0.98, directCell * hoverMotion * 0.7), 0.0, 0.98)
+    );
+    color = mix(
+      color,
+      particleColor,
+      particleHoverMode
+        * clamp(max(particleForce * 1.04, directCell * hoverMotion * 0.86), 0.0, 0.94)
+    );
+
+    float cellOpacity = mix(0.1, 1.0, iconCell);
+    gl_FragColor = vec4(color, outerBox * diagonalStroke * presence * intro * cellOpacity);
+  }
+`
+), E = typeof window < "u" ? window.matchMedia("(prefers-reduced-motion: reduce)") : { matches: !1 };
+function p(a) {
+  const e = Number.parseInt(a.slice(1), 16);
+  return [(e >> 16 & 255) / 255, (e >> 8 & 255) / 255, (e & 255) / 255];
+}
+function B(a) {
+  const e = a.length, i = a[0].length, s = Array.from({ length: e }, () => Array(i).fill(!1)), c = [], r = (t, l) => {
+    t < 0 || t >= e || l < 0 || l >= i || s[t][l] || a[t][l] === "#" || (s[t][l] = !0, c.push([t, l]));
+  };
+  for (let t = 0; t < i; t += 1)
+    r(0, t), r(e - 1, t);
+  for (let t = 0; t < e; t += 1)
+    r(t, 0), r(t, i - 1);
+  for (let t = 0; t < c.length; t += 1) {
+    const [l, h] = c[t];
+    r(l - 1, h), r(l + 1, h), r(l, h - 1), r(l, h + 1);
+  }
+  return a.map(
+    (t, l) => [...t].map((h, n) => h === "#" ? 2 : s[l][n] ? 0 : 1)
+  );
+}
+function X(a, e, i, s, c) {
+  const r = e.length, t = e[0].length, l = new Uint8Array(t * r * 4);
+  for (let h = 0; h < r; h += 1) {
+    const n = r - 1 - h;
+    for (let u = 0; u < t; u += 1) {
+      const m = (h * t + u) * 4, d = s[n][u], v = d === 2 || c && d === 0;
+      l[m] = v ? 255 : 0, l[m + 1] = v ? (u * 3 + h * 7 + i) % 10 : 0, l[m + 2] = d === 2 ? 255 : d === 1 ? 128 : 0, l[m + 3] = 255;
+    }
+  }
+  return new _(a, {
+    image: l,
+    width: t,
+    height: r,
+    format: a.RGBA,
+    internalFormat: a.RGBA,
+    generateMipmaps: !1,
+    minFilter: a.NEAREST,
+    magFilter: a.NEAREST,
+    flipY: !1,
+    unpackAlignment: 1
+  });
+}
+function Y() {
+  const a = document.createElement("canvas");
+  return !!(a.getContext("webgl2") || a.getContext("webgl"));
+}
+function W(a) {
+  const e = a[0].length, i = a.length;
+  let s = [0.5, 0.5], c = 1 / 0;
+  return a.forEach((r, t) => {
+    [...r].forEach((l, h) => {
+      if (l !== "#") return;
+      const n = (h + 0.5) / e, u = 1 - (t + 0.5) / i, m = (n - 0.5) ** 2 + (u - 0.5) ** 2;
+      m < c && (c = m, s = [n, u]);
+    });
+  }), s;
+}
+function $(a, e, i, s, c) {
+  a.classList.add("is-fallback");
+  const r = document.createElement("canvas"), t = 600, l = 63, h = (t - l * 2) / e[0].length, n = r.getContext("2d");
+  if (!n) return;
+  r.width = t, r.height = t;
+  const u = B(e);
+  e.forEach((m, d) => {
+    [...m].forEach((v, b) => {
+      const g = u[d][b];
+      if (g === 1 || !c && g !== 2) return;
+      const x = (b * 3 + (e.length - 1 - d) * 7 + s) % i.length, C = g === 2 ? i : U, S = h * 0.08, T = l + b * h + S, w = l + d * h + S, f = h - S * 2;
+      n.save(), n.beginPath(), n.rect(T, w, f, f), n.clip(), n.globalAlpha = g === 2 ? 1 : 0.1, n.strokeStyle = C[x];
+      const F = a.classList.contains("pixel-icon--hero") ? 0.095 : 0.13;
+      n.lineWidth = Math.max(1.5, f * F);
+      for (let P = -f; P < f * 2; P += f * 0.16)
+        n.beginPath(), n.moveTo(T + P, w), n.lineTo(T + P - f, w + f), n.stroke();
+      n.restore();
+    });
+  }), a.append(r);
+}
+class J {
+  constructor(e, i, s) {
+    o(this, "root");
+    o(this, "surface");
+    o(this, "maskName");
+    o(this, "rows");
+    o(this, "boxed");
+    o(this, "cellKinds");
+    o(this, "seed");
+    o(this, "palette");
+    o(this, "focusPoint");
+    o(this, "hoverTarget", 0);
+    o(this, "hover", 0);
+    o(this, "hoverAge", 0);
+    o(this, "hoveredTileKey", null);
+    o(this, "intro");
+    o(this, "pointerTarget", [0.5, 0.5]);
+    o(this, "pointer", [0.5, 0.5]);
+    o(this, "pointerTileKey", null);
+    o(this, "pointerDownSource", null);
+    o(this, "hadPointerDown", !1);
+    o(this, "blastPointer", [0.5, 0.5]);
+    o(this, "blastAge", 2);
+    o(this, "blastActive", 0);
+    o(this, "visible", !0);
+    o(this, "startedAt");
+    o(this, "lastFrameTime");
+    o(this, "motionMode");
+    o(this, "canvas");
+    o(this, "renderer");
+    o(this, "gl");
+    o(this, "program");
+    o(this, "mesh");
+    o(this, "resizeObserver");
+    o(this, "intersectionObserver");
+    o(this, "onPointerLeave");
+    o(this, "onPointerMove");
+    o(this, "onPointerDown");
+    o(this, "onFocus");
+    o(this, "onBlur");
+    o(this, "onClick");
+    this.root = e, this.surface = e.closest(".pixel-surface") || e, this.maskName = e.dataset.mask && e.dataset.mask in R ? e.dataset.mask : "growth", this.rows = R[this.maskName], this.boxed = y.has(this.maskName), this.cellKinds = B(this.rows), this.seed = i * 13 + 7, this.palette = k[this.maskName] || k.growth, this.focusPoint = W(this.rows), this.intro = E.matches ? 1 : 0, this.startedAt = performance.now(), this.lastFrameTime = this.startedAt, this.motionMode = e.classList.contains("pixel-icon--hero") ? 3 : s, this.canvas = document.createElement("canvas"), this.canvas.setAttribute("aria-hidden", "true"), e.append(this.canvas), this.renderer = new O({
+      canvas: this.canvas,
+      dpr: Math.min(window.devicePixelRatio || 1, 2),
+      alpha: !0,
+      depth: !1,
+      antialias: !1,
+      premultipliedAlpha: !1,
+      powerPreference: "high-performance"
+    }), this.gl = this.renderer.gl, this.gl.clearColor(0, 0, 0, 0);
+    const c = X(this.gl, this.rows, this.seed, this.cellKinds, this.boxed), r = new I(this.gl);
+    this.program = new z(this.gl, {
+      vertex: q,
+      fragment: V,
+      transparent: !0,
+      depthTest: !1,
+      depthWrite: !1,
+      cullFace: !1,
+      uniforms: {
+        tMask: { value: c },
+        uGrid: { value: [this.rows[0].length, this.rows.length] },
+        uPointer: { value: this.pointer },
+        uBlastPointer: { value: this.blastPointer },
+        uTime: { value: 0 },
+        uHoverTime: { value: 0 },
+        uHover: { value: 0 },
+        uBlastTime: { value: this.blastAge },
+        uBlast: { value: 0 },
+        uIntro: { value: this.intro },
+        uMotion: { value: E.matches ? 0 : 1 },
+        uSequence: { value: e.dataset.motion === "sequence" ? 1 : 0 },
+        uSeed: { value: this.seed * 0.17 },
+        uStripeFrequency: { value: 4.455 },
+        uGapInner: { value: 0.13 },
+        uGapOuter: { value: 0.19 },
+        uMode: { value: this.motionMode },
+        uColor0: { value: p(this.palette[0]) },
+        uColor1: { value: p(this.palette[1]) },
+        uColor2: { value: p(this.palette[2]) },
+        uColor3: { value: p(this.palette[3]) },
+        uColor4: { value: p(this.palette[4]) },
+        uColor5: { value: p(this.palette[5]) },
+        uColor6: { value: p(this.palette[6]) },
+        uColor7: { value: p(this.palette[7]) },
+        uColor8: { value: p(this.palette[8]) },
+        uColor9: { value: p(this.palette[9]) }
+      }
+    }), this.mesh = new K(this.gl, { geometry: r, program: this.program }), this.bindEvents(), this.observe(), this.resize();
+  }
+  getPointerHit(e, i) {
+    const s = this.root.getBoundingClientRect(), c = 1 - M * 2, r = (e - s.left) / s.width, t = (i - s.top) / s.height, l = (r - M) / c, h = (t - M) / c, n = l >= 0 && l < 1 && h >= 0 && h < 1;
+    let u = !1, m = null;
+    if (n) {
+      const d = this.rows[0].length, v = this.rows.length, b = l * d, g = h * v, x = Math.floor(b), C = Math.floor(g), S = b - x, T = g - C;
+      u = Math.abs(S - 0.5) <= 0.43 && Math.abs(T - 0.5) <= 0.43 && this.cellKinds[C][x] === 2, u && (m = `${C}:${x}`);
+    }
+    return { iconX: l, iconYTop: h, isTileHit: u, tileKey: m };
+  }
+  bindEvents() {
+    this.onPointerLeave = () => {
+      this.hoverTarget = 0, this.pointerTarget[0] = 0.5, this.pointerTarget[1] = 0.5, this.hoverAge = 0, this.hoveredTileKey = null, this.pointerTileKey = null, this.pointerDownSource = null, this.hadPointerDown = !1, this.surface.classList.remove("is-over-tile");
+    }, this.onPointerMove = (e) => {
+      const { iconX: i, iconYTop: s, isTileHit: c, tileKey: r } = this.getPointerHit(
+        e.clientX,
+        e.clientY
+      );
+      r !== this.hoveredTileKey && (this.hoverAge = 0), this.hoveredTileKey = r, this.pointerTileKey = r, this.hoverTarget = c ? 1 : 0, this.surface.classList.toggle("is-over-tile", c), c ? (this.pointerTarget[0] = i, this.pointerTarget[1] = 1 - s) : (this.pointerTarget[0] = 0.5, this.pointerTarget[1] = 0.5);
+    }, this.onPointerDown = (e) => {
+      const i = this.getPointerHit(e.clientX, e.clientY);
+      this.hadPointerDown = !0, this.pointerDownSource = i.isTileHit ? [i.iconX, 1 - i.iconYTop] : null;
+    }, this.onFocus = () => {
+      this.hadPointerDown || (this.hoverTarget = 1, this.hoverAge = 0, this.hoveredTileKey = "focus", this.pointerTarget[0] = this.focusPoint[0], this.pointerTarget[1] = this.focusPoint[1]);
+    }, this.onBlur = () => {
+      this.hoverTarget = 0, this.hoverAge = 0, this.hoveredTileKey = null;
+    }, this.onClick = () => {
+      const e = this.hadPointerDown ? this.pointerDownSource : this.focusPoint;
+      this.hadPointerDown = !1, this.pointerDownSource = null, this.motionMode === 3 && e && (this.blastPointer[0] = e[0], this.blastPointer[1] = e[1], this.blastAge = 0, this.blastActive = 1);
+    }, this.surface.addEventListener("pointerleave", this.onPointerLeave), this.surface.addEventListener("pointermove", this.onPointerMove), this.surface.addEventListener("pointerdown", this.onPointerDown), this.surface.addEventListener("focus", this.onFocus), this.surface.addEventListener("blur", this.onBlur), this.surface.addEventListener("click", this.onClick);
+  }
+  observe() {
+    this.resizeObserver = new ResizeObserver(() => this.resize()), this.resizeObserver.observe(this.root), this.intersectionObserver = new IntersectionObserver(
+      ([e]) => {
+        this.visible = e.isIntersecting;
+      },
+      { rootMargin: "160px" }
+    ), this.intersectionObserver.observe(this.root);
+  }
+  resize() {
+    const e = this.root.getBoundingClientRect(), i = Math.max(1, Math.round(Math.min(e.width, e.height))), s = Math.max(this.rows[0].length, this.rows.length), c = i * (1 - M * 2) / s, r = Math.min(1, Math.max(0, (c - 12) / 4.5));
+    this.renderer.setSize(i, i), this.program.uniforms.uStripeFrequency.value = 2 + (4.455 - 2) * r, this.program.uniforms.uGapInner.value = 0.13, this.program.uniforms.uGapOuter.value = 0.2 + (0.19 - 0.2) * r;
+  }
+  update(e) {
+    const i = Math.min(0.05, Math.max(0, (e - this.lastFrameTime) * 1e-3));
+    if (this.lastFrameTime = e, !this.visible) return;
+    const s = (e - this.startedAt) * 1e-3, c = E.matches ? 0 : 1;
+    this.hoverAge = this.hoverTarget > 0 ? this.hoverAge + i : 0, this.blastActive > 0 && (this.blastAge += i, this.blastAge >= 1.35 && (this.blastActive = 0)), this.hover += (this.hoverTarget - this.hover) * (this.hoverTarget > this.hover ? 0.1 : 0.07), this.pointer[0] += (this.pointerTarget[0] - this.pointer[0]) * 0.1, this.pointer[1] += (this.pointerTarget[1] - this.pointer[1]) * 0.1, this.intro = c ? Math.min(1, s / 1.7) : 1, this.program.uniforms.uTime.value = s, this.program.uniforms.uHoverTime.value = this.hoverAge, this.program.uniforms.uHover.value = this.hover, this.program.uniforms.uBlastTime.value = this.blastAge, this.program.uniforms.uBlast.value = this.blastActive, this.program.uniforms.uIntro.value = this.intro, this.program.uniforms.uMotion.value = c, this.renderer.render({ scene: this.mesh });
+  }
+  destroy() {
+    var i, s;
+    (i = this.resizeObserver) == null || i.disconnect(), (s = this.intersectionObserver) == null || s.disconnect(), this.surface.removeEventListener("pointerleave", this.onPointerLeave), this.surface.removeEventListener("pointermove", this.onPointerMove), this.surface.removeEventListener("pointerdown", this.onPointerDown), this.surface.removeEventListener("focus", this.onFocus), this.surface.removeEventListener("blur", this.onBlur), this.surface.removeEventListener("click", this.onClick);
+    const e = this.gl.getExtension("WEBGL_lose_context");
+    e == null || e.loseContext();
+  }
+}
+const j = D.forwardRef(
+  ({ mask: a = "growth", motion: e = "sequence", motionMode: i = 3, hero: s = !1, className: c, ...r }, t) => {
+    const l = D.useRef(null), h = D.useCallback(
+      (n) => {
+        l.current = n, typeof t == "function" ? t(n) : t && (t.current = n);
+      },
+      [t]
+    );
+    return D.useEffect(() => {
+      const n = l.current;
+      if (!n) return;
+      let u = null, m = 0;
+      if (Y()) {
+        u = new J(n, 0, i);
+        const d = (v) => {
+          u == null || u.update(v), m = window.requestAnimationFrame(d);
+        };
+        m = window.requestAnimationFrame(d);
+      } else {
+        const d = a in R ? a : "growth";
+        $(n, R[d], k[d] || k.growth, 7, y.has(d));
+      }
+      return () => {
+        m && window.cancelAnimationFrame(m), u == null || u.destroy(), n.replaceChildren(), n.classList.remove("is-fallback");
+      };
+    }, [a, e, i, s]), /* @__PURE__ */ G(
+      "span",
+      {
+        ref: h,
+        "aria-hidden": !0,
+        "data-pixel-icon": !0,
+        "data-mask": a,
+        "data-motion": e,
+        className: N(
+          "pixel-surface pixel-icon relative block outline-none [&_canvas]:block [&_canvas]:size-full",
+          s && "pixel-icon--hero",
+          c
+        ),
+        tabIndex: 0,
+        ...r
+      }
+    );
+  }
+);
+j.displayName = "PixelIcon";
+export {
+  j as PixelIcon
+};