@actioneer/ads 0.5.4 → 0.5.6

package/components/infinite-canvas.js

@@ -1,36 +1,36 @@
 "use client";
-import { jsx as o, jsxs as b } from "react/jsx-runtime";
+import { jsx as e, jsxs as b } from "react/jsx-runtime";
 import * as n from "react";
 import { MarkerType as U, ReactFlow as Z, Background as j, BackgroundVariant as H, Panel as h, useReactFlow as K, useStore as V } from "@xyflow/react";
-import { BaseEdge as ko, EdgeLabelRenderer as xo, Handle as Eo, MarkerType as yo, Position as Do, ReactFlowProvider as _o, addEdge as wo, getBezierPath as Io, getSmoothStepPath as Ro, getStraightPath as So, useEdgesState as Ao, useNodesState as Co, useReactFlow as No } from "@xyflow/react";
+import { BaseEdge as he, EdgeLabelRenderer as xe, Handle as Ee, MarkerType as ke, Position as ye, ReactFlowProvider as De, addEdge as _e, getBezierPath as we, getSmoothStepPath as Ie, getStraightPath as Re, useEdgesState as Se, useNodesState as Ae, useReactFlow as Ce } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import { cn as W } from "../lib/cn.js";
 import { Minus as q, Plus as J, Maximize as Q, Magnet as X } from "../lib/icons.js";
 import { Button as a } from "./button.js";
-const k = 16, Y = 1.2, $ = [k, k], oo = 1.4, w = 18, eo = 6, to = [8, 4], ro = 11, I = 150, ao = 200, no = 0.28, R = "var(--color-ink-300)";
-function v(e) {
-  return typeof window > "u" || !window.matchMedia ? e : window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : e;
+const x = 16, Y = 1.2, $ = [x, x], ee = 1.4, w = 18, oe = 6, te = [8, 4], re = 11, I = 150, ae = 200, ne = 0.28, R = "var(--canvas-edge)";
+function v(o) {
+  return typeof window > "u" || !window.matchMedia ? o : window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : o;
 }
-const lo = {
+const le = {
   markerEnd: {
     type: U.ArrowClosed,
     width: w,
     height: w,
     color: R
   },
-  style: { stroke: R, strokeWidth: oo },
-  labelStyle: { fill: "var(--color-foreground)", fontSize: ro },
+  style: { stroke: R, strokeWidth: ee },
+  labelStyle: { fill: "var(--color-foreground)", fontSize: re },
   labelBgStyle: { fill: "var(--color-background)" },
-  labelBgPadding: to,
-  labelBgBorderRadius: eo
-}, io = [
+  labelBgPadding: te,
+  labelBgBorderRadius: oe
+}, ie = [
   "relative size-full overflow-hidden bg-background",
   "[--xy-background-color-default:var(--color-background)]",
-  "[--xy-edge-stroke-default:var(--color-ink-300)]",
+  "[--xy-edge-stroke-default:var(--canvas-edge)]",
   "[--xy-edge-stroke-selected-default:var(--color-foreground)]",
   "[--xy-edge-label-background-color-default:var(--color-background)]",
   "[--xy-edge-label-color-default:var(--color-foreground)]",
-  "[--xy-connectionline-stroke-default:var(--color-ink-300)]",
+  "[--xy-connectionline-stroke-default:var(--canvas-edge)]",
   "[--xy-handle-background-color-default:var(--color-background)]",
   "[--xy-handle-border-color-default:var(--color-border-strong)]",
   "[--xy-selection-background-color-default:var(--color-muted)]",
@@ -39,19 +39,19 @@ const lo = {
   "[--xy-node-border-default:var(--color-border)]"
 ].join(" ");
 function S({
-  fitViewPadding: e,
+  fitViewPadding: o,
   showSnapToGrid: l,
   snapToGrid: t,
   onSnapToGridChange: i
 }) {
-  const { zoomIn: s, zoomOut: c, fitView: d } = K(), u = V((f) => f.transform[2]);
+  const { zoomIn: s, zoomOut: c, fitView: d } = K(), u = V((g) => g.transform[2]);
   return /* @__PURE__ */ b(
     h,
     {
       position: "bottom-right",
       className: "m-3 flex items-center gap-0.5 rounded-lg bg-elevated p-1 shadow-elevation",
       children: [
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ e(
           a,
           {
             type: "button",
@@ -59,7 +59,7 @@ function S({
             variant: "ghost",
             "aria-label": "Zoom out",
             onClick: () => void c({ duration: v(I) }),
-            children: /* @__PURE__ */ o(q, {})
+            children: /* @__PURE__ */ e(q, {})
           }
         ),
         /* @__PURE__ */ b(
@@ -73,7 +73,7 @@ function S({
             ]
           }
         ),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ e(
           a,
           {
             type: "button",
@@ -81,10 +81,10 @@ function S({
             variant: "ghost",
             "aria-label": "Zoom in",
             onClick: () => void s({ duration: v(I) }),
-            children: /* @__PURE__ */ o(J, {})
+            children: /* @__PURE__ */ e(J, {})
           }
         ),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ e(
           a,
           {
             type: "button",
@@ -92,13 +92,13 @@ function S({
             variant: "ghost",
             "aria-label": "Fit to view",
             onClick: () => void d({
-              padding: e,
-              duration: v(ao)
+              padding: o,
+              duration: v(ae)
             }),
-            children: /* @__PURE__ */ o(Q, {})
+            children: /* @__PURE__ */ e(Q, {})
           }
         ),
-        l && /* @__PURE__ */ o(
+        l && /* @__PURE__ */ e(
           a,
           {
             type: "button",
@@ -107,7 +107,7 @@ function S({
             "aria-label": "Snap to grid",
             "aria-pressed": t,
             onClick: () => i(!t),
-            children: /* @__PURE__ */ o(X, {})
+            children: /* @__PURE__ */ e(X, {})
           }
         )
       ]
@@ -115,8 +115,8 @@ function S({
   );
 }
 S.displayName = "CanvasControls";
-function so({
-  className: e,
+function se({
+  className: o,
   nodes: l,
   edges: t,
   nodeTypes: i,
@@ -124,22 +124,22 @@ function so({
   onNodesChange: c,
   onEdgesChange: d,
   onNodeClick: u,
-  onPaneClick: f,
+  onPaneClick: g,
   onInit: A,
-  readOnly: g = !1,
+  readOnly: f = !1,
   minZoom: C = 0.25,
   maxZoom: N = 1.6,
-  fitViewPadding: m = no,
-  snapToGrid: x,
+  fitViewPadding: m = ne,
+  snapToGrid: E,
   onSnapToGridChange: r,
   snapGrid: z = $,
   showControls: B = !0,
   showSnapToGrid: M = !1,
-  toolbarStart: E,
+  toolbarStart: k,
   toolbarEnd: y,
   ...L
 }, O) {
-  const [P, F] = n.useState(!1), p = x !== void 0, D = p ? x : P, G = n.useCallback(
+  const [P, F] = n.useState(!1), p = E !== void 0, D = p ? E : P, G = n.useCallback(
     (_) => {
       p || F(_), r == null || r(_);
     },
@@ -148,7 +148,7 @@ function so({
     () => ({ padding: m }),
     [m]
   );
-  return /* @__PURE__ */ o("div", { ref: O, className: W(io, e), ...L, children: /* @__PURE__ */ b(
+  return /* @__PURE__ */ e("div", { ref: O, className: W(ie, o), ...L, children: /* @__PURE__ */ b(
     Z,
     {
       nodes: l,
@@ -158,35 +158,35 @@ function so({
       onNodesChange: c,
       onEdgesChange: d,
       onNodeClick: u,
-      onPaneClick: f,
+      onPaneClick: g,
       onInit: A,
       fitView: !0,
       fitViewOptions: T,
-      nodesDraggable: !g,
-      nodesConnectable: !g,
+      nodesDraggable: !f,
+      nodesConnectable: !f,
       snapToGrid: D,
       snapGrid: z,
       minZoom: C,
       maxZoom: N,
       proOptions: { hideAttribution: !0 },
-      defaultEdgeOptions: lo,
+      defaultEdgeOptions: le,
       children: [
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ e(
           j,
           {
             variant: H.Dots,
-            gap: k,
+            gap: x,
             size: Y,
             color: "var(--color-border-strong)"
           }
         ),
-        E && /* @__PURE__ */ o(h, { position: "top-left", className: "m-3 flex items-center gap-2", children: E }),
-        y && /* @__PURE__ */ o(h, { position: "top-right", className: "m-3 flex items-center gap-2", children: y }),
-        B && /* @__PURE__ */ o(
+        k && /* @__PURE__ */ e(h, { position: "top-left", className: "m-3 flex items-center gap-2", children: k }),
+        y && /* @__PURE__ */ e(h, { position: "top-right", className: "m-3 flex items-center gap-2", children: y }),
+        B && /* @__PURE__ */ e(
           S,
           {
             fitViewPadding: m,
-            showSnapToGrid: M && !g,
+            showSnapToGrid: M && !f,
             snapToGrid: D,
             onSnapToGridChange: G
           }
@@ -195,21 +195,21 @@ function so({
     }
   ) });
 }
-const co = n.forwardRef(so);
-co.displayName = "InfiniteCanvas";
+const ce = n.forwardRef(se);
+ce.displayName = "InfiniteCanvas";
 export {
-  ko as BaseEdge,
-  xo as EdgeLabelRenderer,
-  Eo as Handle,
-  co as InfiniteCanvas,
-  yo as MarkerType,
-  Do as Position,
-  _o as ReactFlowProvider,
-  wo as addEdge,
-  Io as getBezierPath,
-  Ro as getSmoothStepPath,
-  So as getStraightPath,
-  Ao as useEdgesState,
-  Co as useNodesState,
-  No as useReactFlow
+  he as BaseEdge,
+  xe as EdgeLabelRenderer,
+  Ee as Handle,
+  ce as InfiniteCanvas,
+  ke as MarkerType,
+  ye as Position,
+  De as ReactFlowProvider,
+  _e as addEdge,
+  we as getBezierPath,
+  Ie as getSmoothStepPath,
+  Re as getStraightPath,
+  Se as useEdgesState,
+  Ae as useNodesState,
+  Ce as useReactFlow
 };

package/components/kbd.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as r } from "react/jsx-runtime";
-import * as a from "react";
+import * as i from "react";
 import { cn as s } from "../lib/cn.js";
-const c = a.forwardRef(
-  ({ className: i, keys: e, children: o, ...t }, n) => {
+const c = i.forwardRef(
+  ({ className: o, keys: e, children: a, ...t }, n) => {
     const m = s(
       "inline-flex items-center justify-center rounded-md border border-border bg-muted",
-      "px-1.5 min-w-5 h-5 text-xs font-medium text-muted-foreground",
-      i
+      "px-1.5 min-w-5 h-5 text-xs font-normal text-muted-foreground",
+      o
     );
     return e && e.length > 0 ? /* @__PURE__ */ r(
       "span",
@@ -17,7 +17,7 @@ const c = a.forwardRef(
         ...t,
         children: e.map((d) => /* @__PURE__ */ r("kbd", { className: m, children: d }, d))
       }
-    ) : /* @__PURE__ */ r("kbd", { ref: n, className: m, ...t, children: o });
+    ) : /* @__PURE__ */ r("kbd", { ref: n, className: m, ...t, children: a });
   }
 );
 c.displayName = "Kbd";

package/components/link.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
 import * as u from "react";
 import { ArrowUpRight as t } from "../lib/icons.js";
 import { cn as d } from "../lib/cn.js";
@@ -8,7 +8,7 @@ const c = {
   muted: "text-muted-foreground",
   primary: "text-brand"
 }, f = u.forwardRef(
-  ({ className: n, color: a = "default", isExternal: r = !1, children: i, ...s }, l) => /* @__PURE__ */ o(
+  ({ className: n, color: a = "default", isExternal: r = !1, children: i, ...s }, l) => /* @__PURE__ */ e(
     "a",
     {
       ref: l,
@@ -18,7 +18,7 @@ const c = {
         // Links read as links by WEIGHT at rest (bold against body copy);
         // the underline is a hover/focus affordance. Underline spec: dotted,
         // 12% thickness, 24% offset, skip-ink, auto (current) color.
-        "group/link inline-flex items-center gap-1 rounded-xs font-bold",
+        "group/link inline-flex items-center gap-1 rounded-xs font-semibold",
         "hover:underline focus-visible:underline decoration-dotted decoration-[0.12em] underline-offset-[0.24em]",
         "outline-none focus-visible:ring-3 focus-visible:ring-ring",
         c[a],
@@ -35,13 +35,13 @@ const c = {
         // destination. Space is reserved so the label never shifts.
         // (Inline style — Tailwind's arbitrary translate utilities weren't
         // being generated by the JIT for these specific values.)
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ e(
           "span",
           {
             "aria-hidden": !0,
             className: "relative inline-block size-3.5 overflow-hidden [--arrow-out:0] group-hover/link:[--arrow-out:1] group-focus-visible/link:[--arrow-out:1]",
             children: [
-              /* @__PURE__ */ e(
+              /* @__PURE__ */ o(
                 t,
                 {
                   className: "absolute inset-0 size-full transition-transform duration-(--duration-fast) ease-out motion-reduce:transition-none",
@@ -50,7 +50,7 @@ const c = {
                   }
                 }
               ),
-              /* @__PURE__ */ e(
+              /* @__PURE__ */ o(
                 t,
                 {
                   className: "absolute inset-0 size-full transition-transform duration-(--duration-fast) ease-out motion-reduce:transition-none",

package/components/modal.js

@@ -2,11 +2,12 @@
 import { jsx as r, jsxs as m } from "react/jsx-runtime";
 import * as i from "react";
 import { createPortal as y } from "react-dom";
-import { MotionConfig as b, AnimatePresence as g, motion as f } from "motion/react";
+import { MotionConfig as g, AnimatePresence as b, motion as f } from "motion/react";
 import { Close as w } from "../lib/icons.js";
 import { cva as h } from "class-variance-authority";
 import { cn as n } from "../lib/cn.js";
 import { backdropVariants as N, modalPanelVariants as M } from "../lib/motion.js";
+import { Ripple as R } from "./ripple.js";
 const k = h(
   [
     "relative flex w-full flex-col",
@@ -25,7 +26,7 @@ const k = h(
     defaultVariants: { size: "md" }
   }
 );
-function L({ open: o, onOpenChange: e, size: t, className: u, children: p }) {
+function _({ open: o, onOpenChange: e, size: t, className: u, children: p }) {
   const s = i.useRef(null), l = i.useRef(null);
   return i.useEffect(() => {
     if (!o) return;
@@ -45,7 +46,7 @@ function L({ open: o, onOpenChange: e, size: t, className: u, children: p }) {
       document.removeEventListener("keydown", d), document.body.style.overflow = x, cancelAnimationFrame(v), (c = (a = l.current) == null ? void 0 : a.focus) == null || c.call(a);
     };
   }, [o, e]), y(
-    /* @__PURE__ */ r(b, { reducedMotion: "user", children: /* @__PURE__ */ r(g, { children: o && /* @__PURE__ */ m("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
+    /* @__PURE__ */ r(g, { reducedMotion: "user", children: /* @__PURE__ */ r(b, { children: o && /* @__PURE__ */ m("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
       /* @__PURE__ */ r(
         f.div,
         {
@@ -70,8 +71,9 @@ function L({ open: o, onOpenChange: e, size: t, className: u, children: p }) {
           role: "dialog",
           "aria-modal": "true",
           tabIndex: -1,
-          className: n(k({ size: t }), "outline-none", u),
+          className: n(k({ size: t }), "relative outline-none", u),
           children: [
+            /* @__PURE__ */ r(R, { origin: "center" }),
             /* @__PURE__ */ r(
               "button",
               {
@@ -98,7 +100,7 @@ function L({ open: o, onOpenChange: e, size: t, className: u, children: p }) {
     document.body
   );
 }
-const R = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
+const j = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
   "div",
   {
     ref: t,
@@ -106,8 +108,8 @@ const R = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
     ...e
   }
 ));
-R.displayName = "ModalHeader";
-const j = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
+j.displayName = "ModalHeader";
+const z = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
   "h2",
   {
     ref: t,
@@ -115,8 +117,8 @@ const j = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
     ...e
   }
 ));
-j.displayName = "ModalTitle";
-const z = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
+z.displayName = "ModalTitle";
+const E = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
   "p",
   {
     ref: t,
@@ -124,8 +126,8 @@ const z = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
     ...e
   }
 ));
-z.displayName = "ModalDescription";
-const E = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
+E.displayName = "ModalDescription";
+const F = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
   "div",
   {
     ref: t,
@@ -133,8 +135,8 @@ const E = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
     ...e
   }
 ));
-E.displayName = "ModalBody";
-const F = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
+F.displayName = "ModalBody";
+const P = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
   "div",
   {
     ref: t,
@@ -145,12 +147,12 @@ const F = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
     ...e
   }
 ));
-F.displayName = "ModalFooter";
+P.displayName = "ModalFooter";
 export {
-  L as Modal,
-  E as ModalBody,
-  z as ModalDescription,
-  F as ModalFooter,
-  R as ModalHeader,
-  j as ModalTitle
+  _ as Modal,
+  F as ModalBody,
+  E as ModalDescription,
+  P as ModalFooter,
+  j as ModalHeader,
+  z as ModalTitle
 };

package/components/page-header.js

@@ -37,7 +37,7 @@ const x = c.forwardRef(
             }
           ),
           /* @__PURE__ */ t("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ e("h1", { className: "flex min-h-8 items-center text-xl font-bold tracking-tight text-foreground", children: m }),
+            /* @__PURE__ */ e("h1", { className: "flex min-h-8 items-center text-xl font-semibold tracking-tight text-foreground", children: m }),
             r && /* @__PURE__ */ e("p", { className: "mt-1 max-w-2xl text-xs text-muted-foreground", children: r })
           ] })
         ] }),

package/components/pagination.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsxs as u, jsx as l } from "react/jsx-runtime";
 import * as j from "react";
-import { ChevronLeft as L, MoreHorizontal as k, ChevronRight as G } from "../lib/icons.js";
-import { cn as a } from "../lib/cn.js";
+import { ChevronLeft as k, MoreHorizontal as L, ChevronRight as G } from "../lib/icons.js";
+import { cn as o } from "../lib/cn.js";
 import { Select as M } from "./select.js";
 function p(e, r) {
   const t = [];
@@ -12,12 +12,12 @@ function p(e, r) {
 function E(e, r, t) {
   if (t * 2 + 5 >= e)
     return p(1, e);
-  const m = Math.max(r - t, 1), n = Math.min(r + t, e), d = m > 2, o = n < e - 1;
-  if (!d && o) {
+  const m = Math.max(r - t, 1), n = Math.min(r + t, e), d = m > 2, a = n < e - 1;
+  if (!d && a) {
     const c = t * 2 + 3;
     return [...p(1, c), "end-ellipsis", e];
   }
-  if (d && !o) {
+  if (d && !a) {
     const c = t * 2 + 3;
     return [1, "start-ellipsis", ...p(e - c + 1, e)];
   }
@@ -29,8 +29,8 @@ function E(e, r, t) {
     e
   ];
 }
-const A = (e) => a(
-  "inline-flex items-center justify-center rounded-md font-medium",
+const A = (e) => o(
+  "inline-flex items-center justify-center rounded-md font-normal",
   "outline-none focus-visible:ring-3 focus-visible:ring-ring",
   "transition active:scale-(--scale-press)",
   "disabled:pointer-events-none disabled:opacity-40",
@@ -44,7 +44,7 @@ const A = (e) => a(
     siblings: m = 1,
     size: n = "md",
     summary: d,
-    labels: o = !1,
+    labels: a = !1,
     pageSize: c,
     pageSizeOptions: w,
     onPageSizeChange: g,
@@ -57,7 +57,7 @@ const A = (e) => a(
       {
         ref: y,
         "aria-label": "Pagination",
-        className: a(
+        className: o(
           "flex items-center",
           b ? "w-full justify-between gap-4" : "gap-1",
           e
@@ -67,7 +67,7 @@ const A = (e) => a(
           b && /* @__PURE__ */ l(
             "span",
             {
-              className: a(
+              className: o(
                 "text-muted-foreground",
                 "text-xs"
               ),
@@ -78,7 +78,7 @@ const A = (e) => a(
             h && /* @__PURE__ */ u(
               "label",
               {
-                className: a(
+                className: o(
                   "flex items-center gap-2 text-muted-foreground",
                   "text-xs"
                 ),
@@ -109,14 +109,14 @@ const A = (e) => a(
                   "aria-label": "Go to previous page",
                   disabled: R,
                   onClick: () => i(t - 1),
-                  className: a(
+                  className: o(
                     f,
                     "text-foreground hover:bg-muted",
-                    o && N(n)
+                    a && N(n)
                   ),
                   children: [
-                    /* @__PURE__ */ l(L, { className: x, "aria-hidden": !0 }),
-                    o && "Prev"
+                    /* @__PURE__ */ l(k, { className: x, "aria-hidden": !0 }),
+                    a && "Prev"
                   ]
                 }
               ),
@@ -126,8 +126,8 @@ const A = (e) => a(
                     "span",
                     {
                       "aria-hidden": !0,
-                      className: a(f, "text-muted-foreground"),
-                      children: /* @__PURE__ */ l(k, { className: x })
+                      className: o(f, "text-muted-foreground"),
+                      children: /* @__PURE__ */ l(L, { className: x })
                     },
                     s
                   );
@@ -139,9 +139,9 @@ const A = (e) => a(
                     "aria-label": `Go to page ${s}`,
                     "aria-current": v ? "page" : void 0,
                     onClick: () => i(s),
-                    className: a(
+                    className: o(
                       f,
-                      v ? "bg-brand text-brand-foreground" : "text-foreground hover:bg-muted"
+                      v ? "bg-foreground text-background" : "text-foreground hover:bg-muted"
                     ),
                     children: s
                   },
@@ -155,13 +155,13 @@ const A = (e) => a(
                   "aria-label": "Go to next page",
                   disabled: S,
                   onClick: () => i(t + 1),
-                  className: a(
+                  className: o(
                     f,
                     "text-foreground hover:bg-muted",
-                    o && N(n)
+                    a && N(n)
                   ),
                   children: [
-                    o && "Next",
+                    a && "Next",
                     /* @__PURE__ */ l(G, { className: x, "aria-hidden": !0 })
                   ]
                 }

package/components/pixel-blast-svg.js

@@ -54,7 +54,7 @@ function E(e, t) {
 const $ = c.forwardRef(
   ({
     variant: e = "custom",
-    color: t = "var(--color-ink-950)",
+    color: t = "var(--texture-ink)",
     pixelSize: r = 7,
     speed: o = 3,
     patternScale: i = 3,

package/components/pixel-icon.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+/**
+ * PixelIcon — the "Compounding Field" interactive brand icon.
+ *
+ * This is the exact hatched-tile WebGL implementation as authored, ported into
+ * an ADS component so it's available to BOTH the design system and the product
+ * (`import { PixelIcon } from "@/components"`). The ONLY change from the source
+ * is the import above: `ogl` is the installed package, not a CDN URL (the ADS
+ * is self-contained — no external hosts). Masks, palettes, shaders, and the
+ * `HatchedTileScene` renderer are verbatim.
+ *
+ * Add a new creative icon = add a mask to `MASKS` (+ a palette). One place.
+ */
+declare const MASKS: Record<string, string[]>;
+export type PixelIconMask = keyof typeof MASKS;
+export interface PixelIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Which creative mask to render. Add new ones to MASKS. */
+    mask?: PixelIconMask | (string & {});
+    /** Entrance choreography: "sequence" sweeps corner-to-corner, else radial. */
+    motion?: "sequence" | "radial";
+    /** Interaction preset 0–5 (3 = hover-shrink + click blast; hero forces 3). */
+    motionMode?: number;
+    /** Larger hero rendering (broader hatch, mode 3). */
+    hero?: boolean;
+}
+/**
+ * The interactive pixel-field brand icon. Interactive on hover/click; size it
+ * with `size-*` / width+height on `className` (it renders a square canvas).
+ */
+export declare const PixelIcon: React.ForwardRefExoticComponent<PixelIconProps & React.RefAttributes<HTMLSpanElement>>;
+export {};