@actioneer/ads 0.5.7 → 0.5.9

package/components/pixel-icon.js

@@ -1,12 +1,12 @@
 "use client";
-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 = {
+var I = Object.defineProperty;
+var O = (o, e, t) => e in o ? I(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var i = (o, e, t) => O(o, typeof e != "symbol" ? e + "" : e, t);
+import { jsx as z } from "react/jsx-runtime";
+import * as D from "react";
+import { Renderer as K, Triangle as U, Program as _, Mesh as N, Texture as q } from "ogl";
+import { cn as V } from "../lib/cn.js";
+const P = {
   growth: [
     "...##....##....##",
     "..###...###...###",
@@ -94,7 +94,7 @@ const R = {
     "...............",
     "..............."
   ]
-}, D = [
+}, M = [
   "var(--color-ink-950)",
   "var(--color-ink-950)",
   "var(--color-ink-900)",
@@ -105,7 +105,7 @@ const R = {
   "var(--color-ink-800)",
   "var(--color-ink-700)",
   "var(--color-ink-700)"
-], V = [
+], X = [
   "var(--color-warning-700)",
   "var(--color-warning-700)",
   "var(--color-warning-600)",
@@ -116,13 +116,20 @@ const R = {
   "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 = (
+], R = {
+  growth: M,
+  "document-agent": M,
+  search: M,
+  books: M,
+  artifacts: X
+};
+function F(o) {
+  return o.length === 0 ? [...M] : Array.from(
+    { length: 10 },
+    (e, t) => o[t % o.length]
+  );
+}
+const H = /* @__PURE__ */ new Set(), Y = ["#c7cad0", "#d0d3d8", "#d8dade", "#dfe1e4", "#e6e7e9"], w = 0, W = (
   /* glsl */
   `
   attribute vec2 uv;
@@ -135,7 +142,7 @@ const R = {
     gl_Position = vec4(position, 0.0, 1.0);
   }
 `
-), W = (
+), $ = (
   /* glsl */
   `
   precision highp float;
@@ -197,7 +204,7 @@ const R = {
   }
 
   void main() {
-    const float padding = ${S.toFixed(4)};
+    const float padding = ${w.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) {
@@ -322,13 +329,25 @@ const R = {
       directCell * hoverMotion,
       (1.0 - smoothstep(0.15, 2.85, cellDistance)) * hoverMotion
     );
+    float hoverAura = (1.0 - smoothstep(0.0, 4.2, cellDistance)) * hoverMotion;
+    float hoverBreath = 0.5 + 0.5 * sin(uHoverTime * 4.6 - cellDistance * 0.7);
 
     float tileScale = 0.82;
     vec2 springShape = vec2(1.0);
     float angle = 0.0;
     vec2 tileOffset = vec2(0.0);
 
-    tileScale += radialGrowMode * radialGrow * 0.15;
+    tileScale += radialGrowMode * (
+      radialGrow * 0.2 + hoverAura * hoverBreath * 0.055
+    );
+    springShape += radialGrowMode * vec2(
+      -hoverAura * 0.02,
+      hoverAura * 0.045
+    );
+    angle += radialGrowMode
+      * sin(uHoverTime * 3.8 - cellDistance)
+      * hoverAura
+      * 0.075;
 
     tileScale += mode0 * (directCell * hoverMotion * 0.075 + colorRipple * 0.045);
 
@@ -350,7 +369,7 @@ const R = {
     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
+      blastRing * 0.26 - blastCore * 0.18 + abs(blastShake) * 0.075
     );
     springShape += mode3 * vec2(-blastRing * 0.055, blastRing * 0.075);
     angle += mode3 * (
@@ -470,6 +489,11 @@ const R = {
       magneticColor,
       mode2 * clamp(max(magneticField * 0.72, directCell * hoverMotion * 0.72), 0.0, 0.82)
     );
+    color = mix(
+      color,
+      interactionColor,
+      mode3 * clamp(hoverAura * (0.28 + hoverBreath * 0.18), 0.0, 0.68)
+    );
     color = mix(
       color,
       echoColor,
@@ -499,99 +523,99 @@ const R = {
 ), y = typeof window < "u" ? window.matchMedia("(prefers-reduced-motion: reduce)") : {
   matches: !1
 };
-function f(r) {
-  const e = Number.parseInt(r.slice(1), 16);
+function p(o) {
+  const e = Number.parseInt(o.slice(1), 16);
   return [
     (e >> 16 & 255) / 255,
     (e >> 8 & 255) / 255,
     (e & 255) / 255
   ];
 }
-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 E(o, e) {
+  var s;
+  const t = (s = o.match(/^var\((--[^)]+)\)$/)) == null ? void 0 : s[1];
+  return t ? getComputedStyle(e).getPropertyValue(t).trim() : o;
 }
-function L(r) {
-  const e = r.length, o = r[0].length, n = Array.from(
+function L(o) {
+  const e = o.length, t = o[0].length, s = 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]));
+    () => Array(t).fill(!1)
+  ), c = [], n = (r, l) => {
+    r < 0 || r >= e || l < 0 || l >= t || s[r][l] || o[r][l] === "#" || (s[r][l] = !0, c.push([r, l]));
   };
-  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);
+  for (let r = 0; r < t; r += 1)
+    n(0, r), n(e - 1, r);
+  for (let r = 0; r < e; r += 1)
+    n(r, 0), n(r, t - 1);
+  for (let r = 0; r < c.length; r += 1) {
+    const [l, h] = c[r];
+    n(l - 1, h), n(l + 1, h), n(l, h - 1), n(l, h + 1);
   }
-  return r.map(
-    (a, t) => [...a].map((s, u) => s === "#" ? 2 : n[t][u] ? 0 : 1)
+  return o.map(
+    (r, l) => [...r].map((h, a) => h === "#" ? 2 : s[l][a] ? 0 : 1)
   );
 }
-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;
+function J(o, e, t, s, c) {
+  const n = e.length, r = e[0].length, l = new Uint8Array(r * n * 4);
+  for (let h = 0; h < n; h += 1) {
+    const a = n - 1 - h;
+    for (let u = 0; u < r; u += 1) {
+      const d = (h * r + u) * 4, m = s[a][u], v = m === 2 || c && m === 0;
+      l[d] = v ? 255 : 0, l[d + 1] = v ? (u * 3 + h * 7 + t) % 10 : 0, l[d + 2] = m === 2 ? 255 : m === 1 ? 128 : 0, l[d + 3] = 255;
     }
   }
-  return new N(r, {
-    image: t,
-    width: a,
-    height: l,
-    format: r.RGBA,
-    internalFormat: r.RGBA,
+  return new q(o, {
+    image: l,
+    width: r,
+    height: n,
+    format: o.RGBA,
+    internalFormat: o.RGBA,
     generateMipmaps: !1,
-    minFilter: r.NEAREST,
-    magFilter: r.NEAREST,
+    minFilter: o.NEAREST,
+    magFilter: o.NEAREST,
     flipY: !1,
     unpackAlignment: 1
   });
 }
-function J() {
-  const r = document.createElement("canvas");
-  return !!(r.getContext("webgl2") || r.getContext("webgl"));
+function j() {
+  const o = document.createElement("canvas");
+  return !!(o.getContext("webgl2") || o.getContext("webgl"));
 }
-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]);
+function Q(o) {
+  const e = o[0].length, t = o.length;
+  let s = [0.5, 0.5], c = 1 / 0;
+  return o.forEach((n, r) => {
+    [...n].forEach((l, h) => {
+      if (l !== "#") return;
+      const a = (h + 0.5) / e, u = 1 - (r + 0.5) / t, d = (a - 0.5) ** 2 + (u - 0.5) ** 2;
+      d < c && (c = d, s = [a, u]);
     });
-  }), n;
+  }), s;
 }
-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)
+function Z(o, e, t, s, c) {
+  o.classList.add("is-fallback");
+  const n = document.createElement("canvas"), r = 600, l = 63, h = (r - l * 2) / e[0].length, a = n.getContext("2d");
+  if (!a) return;
+  n.width = r, n.height = r;
+  const u = L(e), d = t.map(
+    (m) => E(m, o)
   );
-  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();
+  e.forEach((m, v) => {
+    [...m].forEach((b, f) => {
+      const g = u[v][f];
+      if (g === 1 || !c && g !== 2) return;
+      const x = (f * 3 + (e.length - 1 - v) * 7 + s) % t.length, k = g === 2 ? d : Y, T = h * 0.08, S = l + f * h + T, B = l + v * h + T, C = h - T * 2;
+      a.save(), a.beginPath(), a.rect(S, B, C, C), a.clip(), a.globalAlpha = g === 2 ? 1 : 0.1, a.strokeStyle = k[x];
+      const G = o.classList.contains("pixel-icon--hero") ? 0.095 : 0.13;
+      a.lineWidth = Math.max(1.5, C * G);
+      for (let A = -C; A < C * 2; A += C * 0.16)
+        a.beginPath(), a.moveTo(S + A, B), a.lineTo(S + A - C, B + C), a.stroke();
+      a.restore();
     });
-  }), r.append(l);
+  }), o.append(n);
 }
-class Z {
-  constructor(e, o, n, c) {
+class ee {
+  constructor(e, t, s, c, n, r = "tiles") {
     i(this, "root");
     i(this, "surface");
     i(this, "maskName");
@@ -600,6 +624,7 @@ class Z {
     i(this, "cellKinds");
     i(this, "seed");
     i(this, "palette");
+    i(this, "interactionArea");
     i(this, "focusPoint");
     i(this, "hoverTarget", 0);
     i(this, "hover", 0);
@@ -631,7 +656,9 @@ class Z {
     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({
+    this.root = e, this.surface = e.closest(".pixel-surface") || e, this.maskName = e.dataset.mask && e.dataset.mask in P ? e.dataset.mask : "growth", this.rows = P[this.maskName], this.boxed = H.has(this.maskName), this.cellKinds = L(this.rows), this.seed = t * 13 + 7, this.palette = F(
+      n != null && n.length ? n : R[this.maskName] || R.growth
+    ), this.interactionArea = r, this.focusPoint = Q(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 : s, this.canvas = document.createElement("canvas"), this.canvas.setAttribute("aria-hidden", "true"), e.append(this.canvas), this.renderer = new K({
       canvas: this.canvas,
       dpr: Math.min(window.devicePixelRatio || 1, 2),
       alpha: !0,
@@ -640,18 +667,18 @@ class Z {
       premultipliedAlpha: !1,
       powerPreference: "high-performance"
     }), this.gl = this.renderer.gl, this.gl.clearColor(0, 0, 0, 0);
-    const l = $(
+    const l = J(
       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,
+    ), h = new U(this.gl), a = this.palette.map(
+      (d) => E(d, e)
+    ), u = c ? E(c, e) : null;
+    this.program = new _(this.gl, {
+      vertex: W,
+      fragment: $,
       transparent: !0,
       depthTest: !1,
       depthWrite: !1,
@@ -674,44 +701,44 @@ class Z {
         uGapInner: { value: 0.13 },
         uGapOuter: { value: 0.19 },
         uMode: { value: this.motionMode },
-        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]) },
+        uColor0: { value: p(a[0]) },
+        uColor1: { value: p(a[1]) },
+        uColor2: { value: p(a[2]) },
+        uColor3: { value: p(a[3]) },
+        uColor4: { value: p(a[4]) },
+        uColor5: { value: p(a[5]) },
+        uColor6: { value: p(a[6]) },
+        uColor7: { value: p(a[7]) },
+        uColor8: { value: p(a[8]) },
+        uColor9: { value: p(a[9]) },
         uInteractionColor: {
-          value: s ? f(s) : [0, 0, 0]
+          value: u ? p(u) : [0, 0, 0]
         },
-        uUseInteractionColor: { value: s ? 1 : 0 }
+        uUseInteractionColor: { value: u ? 1 : 0 }
       }
-    }), this.mesh = new _(this.gl, { geometry: a, program: this.program }), this.bindEvents(), this.observe(), this.resize();
+    }), this.mesh = new N(this.gl, { geometry: h, program: this.program }), this.bindEvents(), this.observe(), this.resize();
   }
-  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}`);
+  getPointerHit(e, t) {
+    const s = this.root.getBoundingClientRect(), c = 1 - w * 2, n = (e - s.left) / s.width, r = (t - s.top) / s.height, l = (n - w) / c, h = (r - w) / c, a = l >= 0 && l < 1 && h >= 0 && h < 1;
+    let u = !1, d = null;
+    if (a) {
+      const m = this.rows[0].length, v = this.rows.length, b = l * m, f = h * v, g = Math.floor(b), x = Math.floor(f), k = b - g, T = f - x, S = Math.abs(k - 0.5) <= 0.43 && Math.abs(T - 0.5) <= 0.43;
+      u = this.interactionArea === "surface" || S && this.cellKinds[x][g] === 2, u && (d = `${x}:${g}`);
     }
-    return { iconX: t, iconYTop: s, isTileHit: h, tileKey: m };
+    return { iconX: l, iconYTop: h, isTileHit: u, tileKey: d };
   }
   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: o, iconYTop: n, isTileHit: c, tileKey: l } = this.getPointerHit(
+      const { iconX: t, iconYTop: s, isTileHit: c, tileKey: n } = this.getPointerHit(
         e.clientX,
         e.clientY
       );
-      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);
+      n !== this.hoveredTileKey && (this.hoverAge = 0), this.hoveredTileKey = n, this.pointerTileKey = n, this.hoverTarget = c ? 1 : 0, this.surface.classList.toggle("is-over-tile", c), c ? (this.pointerTarget[0] = t, this.pointerTarget[1] = 1 - s) : (this.pointerTarget[0] = 0.5, this.pointerTarget[1] = 0.5);
     }, this.onPointerDown = (e) => {
-      const o = this.getPointerHit(e.clientX, e.clientY);
-      this.hadPointerDown = !0, this.pointerDownSource = o.isTileHit ? [o.iconX, 1 - o.iconYTop] : null;
+      const t = this.getPointerHit(e.clientX, e.clientY);
+      this.hadPointerDown = !0, this.pointerDownSource = t.isTileHit ? [t.iconX, 1 - t.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 = () => {
@@ -730,84 +757,103 @@ class Z {
     ), this.intersectionObserver.observe(this.root);
   }
   resize() {
-    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;
+    const e = this.root.getBoundingClientRect(), t = Math.max(1, Math.round(Math.min(e.width, e.height))), s = Math.max(this.rows[0].length, this.rows.length), c = t * (1 - w * 2) / s, n = Math.min(1, Math.max(0, (c - 12) / 4.5));
+    this.renderer.setSize(t, t), this.program.uniforms.uStripeFrequency.value = 2 + (4.455 - 2) * n, this.program.uniforms.uGapInner.value = 0.13, this.program.uniforms.uGapOuter.value = 0.2 + (0.19 - 0.2) * n;
   }
   update(e) {
-    const o = Math.min(
+    const t = Math.min(
       0.05,
       Math.max(0, (e - this.lastFrameTime) * 1e-3)
     );
     if (this.lastFrameTime = e, !this.visible) return;
-    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 });
+    const s = (e - this.startedAt) * 1e-3, c = y.matches ? 0 : 1;
+    this.hoverAge = this.hoverTarget > 0 ? this.hoverAge + t : 0, this.blastActive > 0 && (this.blastAge += t, 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 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);
+    var t, s;
+    (t = this.resizeObserver) == null || t.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 ee = P.forwardRef(
+const te = D.forwardRef(
   ({
-    mask: r = "growth",
+    mask: o = "growth",
     motion: e = "sequence",
-    motionMode: o = 3,
-    interactionColor: n,
-    hero: c = !1,
+    motionMode: t = 3,
+    interactionColor: s,
+    palette: c,
+    interactionArea: n = "tiles",
+    hero: r = !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);
+    ...h
+  }, a) => {
+    const u = D.useRef(null), d = D.useCallback(
+      (m) => {
+        u.current = m, typeof a == "function" ? a(m) : a && (a.current = m);
       },
-      [t]
+      [a]
     );
-    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);
+    return D.useEffect(() => {
+      const m = u.current;
+      if (!m) return;
+      let v = null, b = 0;
+      if (j()) {
+        v = new ee(
+          m,
+          0,
+          t,
+          s,
+          c,
+          n
+        );
+        const f = (g) => {
+          v == null || v.update(g), b = window.requestAnimationFrame(f);
         };
-        d = window.requestAnimationFrame(v);
+        b = window.requestAnimationFrame(f);
       } else {
-        const v = r in R ? r : "growth";
-        Q(
-          h,
-          R[v],
-          A[v] || A.growth,
+        const f = o in P ? o : "growth";
+        Z(
+          m,
+          P[f],
+          F(
+            c != null && c.length ? c : R[f] || R.growth
+          ),
           7,
-          F.has(v)
+          H.has(f)
         );
       }
       return () => {
-        d && window.cancelAnimationFrame(d), m == null || m.destroy(), h.replaceChildren(), h.classList.remove("is-fallback");
+        b && window.cancelAnimationFrame(b), v == null || v.destroy(), m.replaceChildren(), m.classList.remove("is-fallback");
       };
-    }, [r, e, o, n, c]), /* @__PURE__ */ O(
+    }, [
+      o,
+      e,
+      t,
+      s,
+      c,
+      n,
+      r
+    ]), /* @__PURE__ */ z(
       "span",
       {
-        ref: u,
+        ref: d,
         "aria-hidden": !0,
         "data-pixel-icon": !0,
-        "data-mask": r,
+        "data-mask": o,
         "data-motion": e,
-        className: q(
+        className: V(
           "pixel-surface pixel-icon relative block outline-none [&_canvas]:block [&_canvas]:size-full",
-          c && "pixel-icon--hero",
+          n === "surface" && "cursor-crosshair",
+          r && "pixel-icon--hero",
           l
         ),
-        tabIndex: 0,
-        ...a
+        ...h
       }
     );
   }
 );
-ee.displayName = "PixelIcon";
+te.displayName = "PixelIcon";
 export {
-  ee as PixelIcon
+  te as PixelIcon
 };

package/components/popover.d.ts

@@ -17,4 +17,4 @@ export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement
     align?: "start" | "center" | "end";
     sideOffset?: number;
 }
-export declare function PopoverContent({ className, align, sideOffset, children, ...props }: PopoverContentProps): React.ReactPortal;
+export declare function PopoverContent({ className, align, sideOffset, children, "aria-label": ariaLabel, ...props }: PopoverContentProps): React.ReactPortal;