@actioneer/ads 0.5.6 → 0.5.8

package/components/pixel-icon.js

@@ -1,11 +1,11 @@
 "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";
+var G = Object.defineProperty;
+var I = (r, e, o) => e in r ? G(r, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[e] = o;
+var i = (r, e, o) => I(r, typeof e != "symbol" ? e + "" : e, o);
+import { jsx as O } from "react/jsx-runtime";
+import * as P from "react";
+import { Renderer as z, Triangle as K, Program as U, Mesh as _, Texture as N } from "ogl";
+import { cn as q } from "../lib/cn.js";
 const R = {
   growth: [
     "...##....##....##",
@@ -76,24 +76,53 @@ const R = {
     "..#...#..#..##.",
     "..#####..###...",
     "..............."
+  ],
+  artifacts: [
+    "...............",
+    "...............",
+    "..#####.#####..",
+    "..#####.#####..",
+    "..#####.#####..",
+    "..#####.#####..",
+    "..#####.#####..",
+    "...............",
+    "..#####.#####..",
+    "..#####.#####..",
+    "..#####.#####..",
+    "..#####.#####..",
+    "..#####.#####..",
+    "...............",
+    "..............."
   ]
-}, 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 = (
+}, D = [
+  "var(--color-ink-950)",
+  "var(--color-ink-950)",
+  "var(--color-ink-900)",
+  "var(--color-ink-900)",
+  "var(--color-ink-850)",
+  "var(--color-ink-850)",
+  "var(--color-ink-800)",
+  "var(--color-ink-800)",
+  "var(--color-ink-700)",
+  "var(--color-ink-700)"
+], V = [
+  "var(--color-warning-700)",
+  "var(--color-warning-700)",
+  "var(--color-warning-600)",
+  "var(--color-amber-deep)",
+  "var(--color-warning-500)",
+  "var(--color-amber-base)",
+  "var(--color-amber-base)",
+  "var(--color-chart-2)",
+  "var(--color-amber-soft)",
+  "var(--color-amber-soft)"
+], A = {
+  growth: D,
+  "document-agent": D,
+  search: D,
+  books: D,
+  artifacts: V
+}, F = /* @__PURE__ */ new Set(), X = ["#c7cad0", "#d0d3d8", "#d8dade", "#dfe1e4", "#e6e7e9"], S = 0, Y = (
   /* glsl */
   `
   attribute vec2 uv;
@@ -106,7 +135,7 @@ const R = {
     gl_Position = vec4(position, 0.0, 1.0);
   }
 `
-), V = (
+), W = (
   /* glsl */
   `
   precision highp float;
@@ -138,6 +167,8 @@ const R = {
   uniform vec3 uColor7;
   uniform vec3 uColor8;
   uniform vec3 uColor9;
+  uniform vec3 uInteractionColor;
+  uniform float uUseInteractionColor;
 
   varying vec2 vUv;
 
@@ -166,7 +197,7 @@ const R = {
   }
 
   void main() {
-    const float padding = ${M.toFixed(4)};
+    const float padding = ${S.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) {
@@ -203,7 +234,7 @@ const R = {
     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 radialGrowMode = mode3 * (1.0 - blastSuppression);
     float particleHoverMode = mode5;
 
     vec2 pointerCell = floor(uPointer * uGrid);
@@ -276,9 +307,9 @@ const R = {
       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 particleReach = (1.0 - smoothstep(0.15, 8.0, cellDistance)) * hoverMotion;
+    float particleSettle = 0.72 + 0.28 * sin(
+      uHoverTime * 7.2 - cellDistance * 1.42 + random * 3.1
     );
     float particleForce = particleReach * particleSettle;
     float particleAngle = random * 6.2831853;
@@ -286,8 +317,8 @@ const R = {
     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(
+      * (0.255 + 0.045 * sin(uHoverTime * 6.1 + random * 7.0));
+    float radialGrow = max(
       directCell * hoverMotion,
       (1.0 - smoothstep(0.15, 2.85, cellDistance)) * hoverMotion
     );
@@ -297,7 +328,7 @@ const R = {
     float angle = 0.0;
     vec2 tileOffset = vec2(0.0);
 
-    tileScale -= radialShrinkMode * radialShrink * 0.27;
+    tileScale += radialGrowMode * radialGrow * 0.15;
 
     tileScale += mode0 * (directCell * hoverMotion * 0.075 + colorRipple * 0.045);
 
@@ -332,17 +363,17 @@ const R = {
     angle += mode4 * (random - 0.5) * signalScatter * 0.62;
 
     tileScale += particleHoverMode * (
-      -particleForce * 0.19
-      + directCell * hoverMotion * (0.025 + 0.015 * sin(uHoverTime * 6.4))
+      -particleForce * 0.34
+      + directCell * hoverMotion * (0.035 + 0.025 * sin(uHoverTime * 7.2))
     );
-    springShape += particleHoverMode * vec2(-particleForce * 0.035, particleForce * 0.05);
+    springShape += particleHoverMode * vec2(-particleForce * 0.12, particleForce * 0.18);
     angle += particleHoverMode * (
-      (random - 0.5) * particleForce * 0.6
-      + directCell * hoverMotion * sin(uHoverTime * 5.4) * 0.045
+      (random - 0.5) * particleForce * 1.5
+      + directCell * hoverMotion * sin(uHoverTime * 6.2) * 0.13
     );
     tileOffset += particleHoverMode * particleOffset;
 
-    float minimumTileScale = 0.64 - particleHoverMode * 0.06 - radialShrinkMode * 0.1;
+    float minimumTileScale = 0.64 - particleHoverMode * 0.16 - radialGrowMode * 0.1;
     tileScale = clamp(tileScale, minimumTileScale, 0.97) * intro;
     springShape = max(springShape, vec2(0.72));
 
@@ -395,17 +426,26 @@ const R = {
       + frameColor * frameCell;
 
     vec3 rippleColor = mix(
-      vec3(0.08, 0.78, 1.0),
-      vec3(0.58, 0.24, 1.0),
+      palette(1.0),
+      palette(4.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 interactionColor = mix(
+      vec3(0.612, 0.8, 0.576),
+      uInteractionColor,
+      uUseInteractionColor
+    );
+    vec3 interactionBlastColor = mix(
+      vec3(0.247, 0.478, 0.204),
+      uInteractionColor,
+      uUseInteractionColor
+    );
+    vec3 echoColor = interactionColor;
     vec3 blastColor = mix(
       vec3(1.0),
-      vec3(0.247, 0.478, 0.204),
+      interactionBlastColor,
       smoothstep(0.0, 0.42, uBlastTime)
     );
     vec3 scatterColor = mix(
@@ -430,11 +470,6 @@ const R = {
       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,
@@ -454,133 +489,149 @@ const R = {
       color,
       particleColor,
       particleHoverMode
-        * clamp(max(particleForce * 1.04, directCell * hoverMotion * 0.86), 0.0, 0.94)
+        * clamp(max(particleForce * 1.25, directCell * hoverMotion), 0.0, 0.98)
     );
 
     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];
+), y = typeof window < "u" ? window.matchMedia("(prefers-reduced-motion: reduce)") : {
+  matches: !1
+};
+function f(r) {
+  const e = Number.parseInt(r.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]));
+function E(r, e) {
+  var n;
+  const o = (n = r.match(/^var\((--[^)]+)\)$/)) == null ? void 0 : n[1];
+  return o ? getComputedStyle(e).getPropertyValue(o).trim() : r;
+}
+function L(r) {
+  const e = r.length, o = r[0].length, n = Array.from(
+    { length: e },
+    () => Array(o).fill(!1)
+  ), c = [], l = (a, t) => {
+    a < 0 || a >= e || t < 0 || t >= o || n[a][t] || r[a][t] === "#" || (n[a][t] = !0, c.push([a, t]));
   };
-  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);
+  for (let a = 0; a < o; a += 1)
+    l(0, a), l(e - 1, a);
+  for (let a = 0; a < e; a += 1)
+    l(a, 0), l(a, o - 1);
+  for (let a = 0; a < c.length; a += 1) {
+    const [t, s] = c[a];
+    l(t - 1, s), l(t + 1, s), l(t, s - 1), l(t, s + 1);
   }
-  return a.map(
-    (t, l) => [...t].map((h, n) => h === "#" ? 2 : s[l][n] ? 0 : 1)
+  return r.map(
+    (a, t) => [...a].map((s, u) => s === "#" ? 2 : n[t][u] ? 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;
+function $(r, e, o, n, c) {
+  const l = e.length, a = e[0].length, t = new Uint8Array(a * l * 4);
+  for (let s = 0; s < l; s += 1) {
+    const u = l - 1 - s;
+    for (let h = 0; h < a; h += 1) {
+      const m = (s * a + h) * 4, d = n[u][h], v = d === 2 || c && d === 0;
+      t[m] = v ? 255 : 0, t[m + 1] = v ? (h * 3 + s * 7 + o) % 10 : 0, t[m + 2] = d === 2 ? 255 : d === 1 ? 128 : 0, t[m + 3] = 255;
     }
   }
-  return new _(a, {
-    image: l,
-    width: t,
-    height: r,
-    format: a.RGBA,
-    internalFormat: a.RGBA,
+  return new N(r, {
+    image: t,
+    width: a,
+    height: l,
+    format: r.RGBA,
+    internalFormat: r.RGBA,
     generateMipmaps: !1,
-    minFilter: a.NEAREST,
-    magFilter: a.NEAREST,
+    minFilter: r.NEAREST,
+    magFilter: r.NEAREST,
     flipY: !1,
     unpackAlignment: 1
   });
 }
-function Y() {
-  const a = document.createElement("canvas");
-  return !!(a.getContext("webgl2") || a.getContext("webgl"));
+function J() {
+  const r = document.createElement("canvas");
+  return !!(r.getContext("webgl2") || r.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]);
+function j(r) {
+  const e = r[0].length, o = r.length;
+  let n = [0.5, 0.5], c = 1 / 0;
+  return r.forEach((l, a) => {
+    [...l].forEach((t, s) => {
+      if (t !== "#") return;
+      const u = (s + 0.5) / e, h = 1 - (a + 0.5) / o, m = (u - 0.5) ** 2 + (h - 0.5) ** 2;
+      m < c && (c = m, n = [u, h]);
     });
-  }), s;
+  }), n;
 }
-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();
+function Q(r, e, o, n, c) {
+  r.classList.add("is-fallback");
+  const l = document.createElement("canvas"), a = 600, t = 63, s = (a - t * 2) / e[0].length, u = l.getContext("2d");
+  if (!u) return;
+  l.width = a, l.height = a;
+  const h = L(e), m = o.map(
+    (d) => E(d, r)
+  );
+  e.forEach((d, v) => {
+    [...d].forEach((C, b) => {
+      const p = h[v][b];
+      if (p === 1 || !c && p !== 2) return;
+      const x = (b * 3 + (e.length - 1 - v) * 7 + n) % o.length, k = p === 2 ? m : X, T = s * 0.08, w = t + b * s + T, B = t + v * s + T, g = s - T * 2;
+      u.save(), u.beginPath(), u.rect(w, B, g, g), u.clip(), u.globalAlpha = p === 2 ? 1 : 0.1, u.strokeStyle = k[x];
+      const H = r.classList.contains("pixel-icon--hero") ? 0.095 : 0.13;
+      u.lineWidth = Math.max(1.5, g * H);
+      for (let M = -g; M < g * 2; M += g * 0.16)
+        u.beginPath(), u.moveTo(w + M, B), u.lineTo(w + M - g, B + g), u.stroke();
+      u.restore();
     });
-  }), a.append(r);
+  }), r.append(l);
 }
-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({
+class Z {
+  constructor(e, o, n, c) {
+    i(this, "root");
+    i(this, "surface");
+    i(this, "maskName");
+    i(this, "rows");
+    i(this, "boxed");
+    i(this, "cellKinds");
+    i(this, "seed");
+    i(this, "palette");
+    i(this, "focusPoint");
+    i(this, "hoverTarget", 0);
+    i(this, "hover", 0);
+    i(this, "hoverAge", 0);
+    i(this, "hoveredTileKey", null);
+    i(this, "intro");
+    i(this, "pointerTarget", [0.5, 0.5]);
+    i(this, "pointer", [0.5, 0.5]);
+    i(this, "pointerTileKey", null);
+    i(this, "pointerDownSource", null);
+    i(this, "hadPointerDown", !1);
+    i(this, "blastPointer", [0.5, 0.5]);
+    i(this, "blastAge", 2);
+    i(this, "blastActive", 0);
+    i(this, "visible", !0);
+    i(this, "startedAt");
+    i(this, "lastFrameTime");
+    i(this, "motionMode");
+    i(this, "canvas");
+    i(this, "renderer");
+    i(this, "gl");
+    i(this, "program");
+    i(this, "mesh");
+    i(this, "resizeObserver");
+    i(this, "intersectionObserver");
+    i(this, "onPointerLeave");
+    i(this, "onPointerMove");
+    i(this, "onPointerDown");
+    i(this, "onFocus");
+    i(this, "onBlur");
+    i(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 = F.has(this.maskName), this.cellKinds = L(this.rows), this.seed = o * 13 + 7, this.palette = A[this.maskName] || A.growth, this.focusPoint = j(this.rows), this.intro = y.matches ? 1 : 0, this.startedAt = performance.now(), this.lastFrameTime = this.startedAt, this.motionMode = e.classList.contains("pixel-icon--hero") ? 3 : n, this.canvas = document.createElement("canvas"), this.canvas.setAttribute("aria-hidden", "true"), e.append(this.canvas), this.renderer = new z({
       canvas: this.canvas,
       dpr: Math.min(window.devicePixelRatio || 1, 2),
       alpha: !0,
@@ -589,16 +640,24 @@ class J {
       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,
+    const l = $(
+      this.gl,
+      this.rows,
+      this.seed,
+      this.cellKinds,
+      this.boxed
+    ), a = new K(this.gl), t = this.palette.map(
+      (u) => E(u, e)
+    ), s = c ? E(c, e) : null;
+    this.program = new U(this.gl, {
+      vertex: Y,
+      fragment: W,
       transparent: !0,
       depthTest: !1,
       depthWrite: !1,
       cullFace: !1,
       uniforms: {
-        tMask: { value: c },
+        tMask: { value: l },
         uGrid: { value: [this.rows[0].length, this.rows.length] },
         uPointer: { value: this.pointer },
         uBlastPointer: { value: this.blastPointer },
@@ -608,47 +667,51 @@ class J {
         uBlastTime: { value: this.blastAge },
         uBlast: { value: 0 },
         uIntro: { value: this.intro },
-        uMotion: { value: E.matches ? 0 : 1 },
+        uMotion: { value: y.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]) }
+        uColor0: { value: f(t[0]) },
+        uColor1: { value: f(t[1]) },
+        uColor2: { value: f(t[2]) },
+        uColor3: { value: f(t[3]) },
+        uColor4: { value: f(t[4]) },
+        uColor5: { value: f(t[5]) },
+        uColor6: { value: f(t[6]) },
+        uColor7: { value: f(t[7]) },
+        uColor8: { value: f(t[8]) },
+        uColor9: { value: f(t[9]) },
+        uInteractionColor: {
+          value: s ? f(s) : [0, 0, 0]
+        },
+        uUseInteractionColor: { value: s ? 1 : 0 }
       }
-    }), this.mesh = new K(this.gl, { geometry: r, program: this.program }), this.bindEvents(), this.observe(), this.resize();
+    }), this.mesh = new _(this.gl, { geometry: a, 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}`);
+  getPointerHit(e, o) {
+    const n = this.root.getBoundingClientRect(), c = 1 - S * 2, l = (e - n.left) / n.width, a = (o - n.top) / n.height, t = (l - S) / c, s = (a - S) / c, u = t >= 0 && t < 1 && s >= 0 && s < 1;
+    let h = !1, m = null;
+    if (u) {
+      const d = this.rows[0].length, v = this.rows.length, C = t * d, b = s * v, p = Math.floor(C), x = Math.floor(b), k = C - p, T = b - x;
+      h = Math.abs(k - 0.5) <= 0.43 && Math.abs(T - 0.5) <= 0.43 && this.cellKinds[x][p] === 2, h && (m = `${x}:${p}`);
     }
-    return { iconX: l, iconYTop: h, isTileHit: u, tileKey: m };
+    return { iconX: t, iconYTop: s, isTileHit: h, 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(
+      const { iconX: o, iconYTop: n, isTileHit: c, tileKey: l } = 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);
+      l !== this.hoveredTileKey && (this.hoverAge = 0), this.hoveredTileKey = l, this.pointerTileKey = l, this.hoverTarget = c ? 1 : 0, this.surface.classList.toggle("is-over-tile", c), c ? (this.pointerTarget[0] = o, this.pointerTarget[1] = 1 - n) : (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;
+      const o = this.getPointerHit(e.clientX, e.clientY);
+      this.hadPointerDown = !0, this.pointerDownSource = o.isTileHit ? [o.iconX, 1 - o.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 = () => {
@@ -667,67 +730,83 @@ class J {
     ), 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;
+    const e = this.root.getBoundingClientRect(), o = Math.max(1, Math.round(Math.min(e.width, e.height))), n = Math.max(this.rows[0].length, this.rows.length), c = o * (1 - S * 2) / n, l = Math.min(1, Math.max(0, (c - 12) / 4.5));
+    this.renderer.setSize(o, o), this.program.uniforms.uStripeFrequency.value = 2 + (4.455 - 2) * l, this.program.uniforms.uGapInner.value = 0.13, this.program.uniforms.uGapOuter.value = 0.2 + (0.19 - 0.2) * l;
   }
   update(e) {
-    const i = Math.min(0.05, Math.max(0, (e - this.lastFrameTime) * 1e-3));
+    const o = 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 });
+    const n = (e - this.startedAt) * 1e-3, c = y.matches ? 0 : 1;
+    this.hoverAge = this.hoverTarget > 0 ? this.hoverAge + o : 0, this.blastActive > 0 && (this.blastAge += o, 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, n / 1.7) : 1, this.program.uniforms.uTime.value = n, 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);
+    var o, n;
+    (o = this.resizeObserver) == null || o.disconnect(), (n = this.intersectionObserver) == null || n.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);
+const ee = P.forwardRef(
+  ({
+    mask: r = "growth",
+    motion: e = "sequence",
+    motionMode: o = 3,
+    interactionColor: n,
+    hero: c = !1,
+    className: l,
+    ...a
+  }, t) => {
+    const s = P.useRef(null), u = P.useCallback(
+      (h) => {
+        s.current = h, typeof t == "function" ? t(h) : t && (t.current = h);
       },
       [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);
+    return P.useEffect(() => {
+      const h = s.current;
+      if (!h) return;
+      let m = null, d = 0;
+      if (J()) {
+        m = new Z(h, 0, o, n);
+        const v = (C) => {
+          m == null || m.update(C), d = window.requestAnimationFrame(v);
         };
-        m = window.requestAnimationFrame(d);
+        d = window.requestAnimationFrame(v);
       } else {
-        const d = a in R ? a : "growth";
-        $(n, R[d], k[d] || k.growth, 7, y.has(d));
+        const v = r in R ? r : "growth";
+        Q(
+          h,
+          R[v],
+          A[v] || A.growth,
+          7,
+          F.has(v)
+        );
       }
       return () => {
-        m && window.cancelAnimationFrame(m), u == null || u.destroy(), n.replaceChildren(), n.classList.remove("is-fallback");
+        d && window.cancelAnimationFrame(d), m == null || m.destroy(), h.replaceChildren(), h.classList.remove("is-fallback");
       };
-    }, [a, e, i, s]), /* @__PURE__ */ G(
+    }, [r, e, o, n, c]), /* @__PURE__ */ O(
       "span",
       {
-        ref: h,
+        ref: u,
         "aria-hidden": !0,
         "data-pixel-icon": !0,
-        "data-mask": a,
+        "data-mask": r,
         "data-motion": e,
-        className: N(
+        className: q(
           "pixel-surface pixel-icon relative block outline-none [&_canvas]:block [&_canvas]:size-full",
-          s && "pixel-icon--hero",
-          c
+          c && "pixel-icon--hero",
+          l
         ),
-        tabIndex: 0,
-        ...r
+        ...a
       }
     );
   }
 );
-j.displayName = "PixelIcon";
+ee.displayName = "PixelIcon";
 export {
-  j as PixelIcon
+  ee as PixelIcon
 };