@alfadocs/ui-kit 0.1.8 → 0.1.10

package/dist/_chunks/{signature-capture.agent-C38VPXxg.js → signature-capture.agent-BpeDwFht.js}

@@ -1,9 +1,9 @@
-import { jsxs as _, jsx as m } from "react/jsx-runtime";
-import { forwardRef as fe, useId as ge, useMemo as pe, useRef as S, useState as T, useEffect as N, useCallback as A, useImperativeHandle as ve } from "react";
-import me from "signature_pad";
-import { c as x } from "./index-D2ZczOXr.js";
-import { useTranslation as be } from "react-i18next";
-const he = x(
+import { jsxs as _, jsx as b } from "react/jsx-runtime";
+import { forwardRef as ge, useId as pe, useMemo as ve, useRef as S, useState as T, useEffect as N, useCallback as A, useImperativeHandle as me } from "react";
+import be from "signature_pad";
+import { c as k } from "./index-D2ZczOXr.js";
+import { useTranslation as he } from "react-i18next";
+const ye = k(
   [
     "ds:signature-capture-alfadocs ds:flex ds:flex-col",
     "ds:gap-[var(--spacing-sm)]",
@@ -12,7 +12,7 @@ const he = x(
     "ds:p-[var(--spacing-sm)]",
     "ds:aria-disabled:opacity-[var(--opacity-50)] ds:aria-disabled:cursor-not-allowed"
   ].join(" ")
-), ye = x(
+), we = k(
   [
     "ds:relative ds:block",
     "ds:inline-size-[var(--signature-width)]",
@@ -27,7 +27,7 @@ const he = x(
     "ds:focus-visible:outline-[var(--ring)]",
     "ds:forced-colors:focus-visible:outline-[CanvasText]"
   ].join(" ")
-), we = x(
+), xe = k(
   [
     "ds:block",
     "ds:inline-size-full",
@@ -35,9 +35,9 @@ const he = x(
     "ds:touch-none",
     "ds:select-none"
   ].join(" ")
-), xe = x(
+), ke = k(
   ["ds:flex ds:items-center ds:flex-wrap ds:gap-[var(--spacing-xs)]"].join(" ")
-), W = x(
+), W = k(
   [
     "ds:inline-flex ds:items-center ds:justify-center",
     "ds:min-block-size-[var(--min-target-size)]",
@@ -57,7 +57,7 @@ const he = x(
     "ds:forced-colors:focus-visible:outline-[CanvasText]",
     "ds:aria-disabled:opacity-[var(--opacity-50)] ds:aria-disabled:cursor-not-allowed"
   ].join(" ")
-), ke = x(
+), ze = k(
   [
     "ds:inline-flex ds:items-center ds:justify-center",
     "ds:min-block-size-[var(--min-target-size)]",
@@ -75,7 +75,7 @@ const he = x(
     "ds:forced-colors:focus-visible:outline-[CanvasText]",
     "ds:aria-disabled:opacity-[var(--opacity-50)] ds:aria-disabled:cursor-not-allowed"
   ].join(" ")
-), ze = x(
+), Ce = k(
   [
     "ds:block ds:inline-size-full",
     "ds:min-block-size-[var(--min-target-size)]",
@@ -92,7 +92,7 @@ const he = x(
     "ds:focus-visible:outline-[var(--ring)]",
     "ds:forced-colors:focus-visible:outline-[CanvasText]"
   ].join(" ")
-), Ce = x(
+), Se = k(
   [
     "ds:flex ds:items-center ds:justify-center",
     "ds:inline-size-[var(--signature-width)]",
@@ -117,72 +117,73 @@ function ee(t, n) {
   const s = parseFloat(t);
   return Number.isFinite(s) ? s : n;
 }
-function Se(t) {
+function Me(t) {
   let n = "";
   for (let s = 0; s < t.length; s += 1) {
-    const i = t[s];
-    n += i.toString(16).padStart(2, "0");
+    const o = t[s];
+    n += o.toString(16).padStart(2, "0");
   }
   return n;
 }
-function Me(t) {
+function Ne(t) {
   if (typeof atob == "function") {
-    const s = atob(t), i = new Uint8Array(s.length);
-    for (let o = 0; o < s.length; o += 1) i[o] = s.charCodeAt(o);
-    return i;
+    const s = atob(t), o = new Uint8Array(s.length);
+    for (let i = 0; i < s.length; i += 1) o[i] = s.charCodeAt(i);
+    return o;
   }
   const n = globalThis;
   return n.Buffer ? n.Buffer.from(t, "base64") : new Uint8Array();
 }
-async function Ne(t) {
+async function Ae(t) {
   var s;
   const n = globalThis;
   if ((s = n.crypto) != null && s.subtle) {
-    const i = new Uint8Array(t.byteLength);
-    i.set(t);
-    const o = await n.crypto.subtle.digest("SHA-256", i.buffer);
-    return Se(new Uint8Array(o));
+    const o = new Uint8Array(t.byteLength);
+    o.set(t);
+    const i = await n.crypto.subtle.digest("SHA-256", o.buffer);
+    return Me(new Uint8Array(i));
   }
   return "";
 }
-function Ae(t, n, s, i, o) {
-  const k = Math.max(1, typeof window < "u" ? window.devicePixelRatio : 1), w = document.createElement("canvas");
-  w.width = Math.floor(n * k), w.height = Math.floor(s * k);
-  const c = w.getContext("2d");
-  return c && (c.setTransform(k, 0, 0, k, 0, 0), c.fillStyle = o, c.fillRect(0, 0, n, s), c.fillStyle = i, c.font = "32px italic sans-serif", c.textAlign = "center", c.textBaseline = "middle", c.fillText(t, n / 2, s / 2, n - 16)), w;
+function Ee(t, n, s, o, i) {
+  const p = Math.max(1, typeof window < "u" ? window.devicePixelRatio : 1), x = document.createElement("canvas");
+  x.width = Math.floor(n * p), x.height = Math.floor(s * p);
+  const c = x.getContext("2d");
+  return c && (c.setTransform(p, 0, 0, p, 0, 0), c.fillStyle = i, c.fillRect(0, 0, n, s), c.fillStyle = o, c.font = "32px italic sans-serif", c.textAlign = "center", c.textBaseline = "middle", c.fillText(t, n / 2, s / 2, n - 16)), x;
 }
-const Ee = fe(
+const Te = ge(
   ({
-    onConfirm: t,
-    onClear: n,
-    onStart: s,
+    id: t,
+    onConfirm: n,
+    onClear: s,
+    onStart: o,
     width: i = 400,
-    height: o = 200,
-    penColor: k,
-    backgroundColor: w,
-    allowTypedFallback: c = !0,
+    height: p = 200,
+    penColor: x,
+    backgroundColor: c,
+    allowTypedFallback: te = !0,
     disabled: u = !1,
-    ariaLabel: te,
-    className: re
-  }, ne) => {
-    const { t: d } = be(), X = ge(), q = `${pe(
+    ariaLabel: re,
+    className: ne
+  }, se) => {
+    const { t: d } = he(), X = pe(), q = `${ve(
       () => `sig-${X.replace(/[^a-zA-Z0-9-_]/g, "")}`,
       [X]
-    )}-live`, se = S(null), F = S(null), b = S(null), [f, ae] = T("draw"), [z, L] = T(""), ie = S("empty"), [oe, de] = T(""), [p, le] = T(""), [h, ce] = T(""), V = S(s), j = S(n), R = S(t);
+    )}-live`, ae = S(null), F = S(null), h = S(null), [f, ie] = T("draw"), [z, L] = T(""), oe = S("empty"), [de, ce] = T(""), [v, le] = T(""), [y, ue] = T(""), V = S(o), j = S(s), R = S(n);
     N(() => {
-      V.current = s, j.current = n, R.current = t;
-    }, [s, n, t]);
+      V.current = o, j.current = s, R.current = n;
+    }, [o, s, n]);
     const g = A(
       (e) => {
-        ie.current = e, de(d(`signature.state.${e}`));
+        oe.current = e, ce(d(`signature.state.${e}`));
       },
       [d]
     );
     N(() => {
       if (typeof document > "u") return;
       function e() {
-        const a = k ?? Q("--foreground"), v = w ?? Q("--background");
-        le(a || "currentColor"), ce(v || "transparent");
+        const a = x ?? Q("--foreground"), m = c ?? Q("--background");
+        le(a || "currentColor"), ue(m || "transparent");
       }
       e();
       const r = new MutationObserver(() => {
@@ -192,44 +193,44 @@ const Ee = fe(
         attributes: !0,
         attributeFilter: ["class"]
       }), () => r.disconnect();
-    }, [k, w]), N(() => {
-      const e = b.current;
-      e && (p && (e.penColor = p), h && (e.backgroundColor = h));
-    }, [p, h]), N(() => {
+    }, [x, c]), N(() => {
+      const e = h.current;
+      e && (v && (e.penColor = v), y && (e.backgroundColor = y));
+    }, [v, y]), N(() => {
       if (f !== "draw") return;
       const e = F.current;
       if (!e) return;
-      const r = new me(e, {
-        penColor: p || "currentColor",
-        backgroundColor: h || "transparent",
+      const r = new be(e, {
+        penColor: v || "currentColor",
+        backgroundColor: y || "transparent",
         minWidth: 0.5,
         maxWidth: 2.5,
         velocityFilterWeight: 0.7
       });
-      b.current = r;
+      h.current = r;
       const a = () => {
         var C;
         g("drawing"), (C = V.current) == null || C.call(V);
-      }, v = () => {
+      }, m = () => {
       };
-      return r.addEventListener("beginStroke", a), r.addEventListener("endStroke", v), B(e), g("empty"), () => {
-        r.removeEventListener("beginStroke", a), r.removeEventListener("endStroke", v), r.clear(), r.off(), b.current = null;
+      return r.addEventListener("beginStroke", a), r.addEventListener("endStroke", m), B(e), g("empty"), () => {
+        r.removeEventListener("beginStroke", a), r.removeEventListener("endStroke", m), r.clear(), r.off(), h.current = null;
       };
     }, [f]), N(() => {
-      const e = b.current;
+      const e = h.current;
       e && (u ? e.off() : e.on());
     }, [u, f]);
     const G = 4096, B = A((e) => {
       const r = e.getBoundingClientRect(), a = Math.max(
         1,
         typeof window < "u" ? window.devicePixelRatio : 1
-      ), v = Math.max(1, Math.floor(r.width * a)), C = Math.max(1, Math.floor(r.height * a)), $ = Math.min(v, G), D = Math.min(C, G);
+      ), m = Math.max(1, Math.floor(r.width * a)), C = Math.max(1, Math.floor(r.height * a)), $ = Math.min(m, G), D = Math.min(C, G);
       if (e.width === $ && e.height === D) return;
-      const y = b.current, M = y ? y.toData() : null;
+      const w = h.current, M = w ? w.toData() : null;
       e.width = $, e.height = D;
       const E = e.getContext("2d");
-      E && E.scale(a, a), y && (h && (y.backgroundColor = h), p && (y.penColor = p), y.clear(), M && M.length > 0 && y.fromData(M));
-    }, [h, p]);
+      E && E.scale(a, a), w && (y && (w.backgroundColor = y), v && (w.penColor = v), w.clear(), M && M.length > 0 && w.fromData(M));
+    }, [y, v]);
     N(() => {
       const e = F.current;
       if (!e) return;
@@ -244,16 +245,16 @@ const Ee = fe(
     }, [B]);
     const P = A(() => {
       var r;
-      const e = b.current;
+      const e = h.current;
       e && e.clear(), L(""), g("cleared"), (r = j.current) == null || r.call(j);
-    }, [g]), U = A(() => {
-      const e = b.current;
+    }, [g]), I = A(() => {
+      const e = h.current;
       if (!e) return;
       const r = e.toData();
       !r || r.length === 0 || (r.pop(), e.fromData(r), r.length === 0 && g("empty"));
-    }, [g]), I = A(() => {
+    }, [g]), U = A(() => {
       if (f === "typed") return z.trim().length === 0;
-      const e = b.current;
+      const e = h.current;
       return e ? e.isEmpty() : !0;
     }, [f, z]), H = A(async () => {
       var J;
@@ -261,39 +262,39 @@ const Ee = fe(
         typeof i == "number" ? `${i}` : String(i),
         400
       ), r = ee(
-        typeof o == "number" ? `${o}` : String(o),
+        typeof p == "number" ? `${p}` : String(p),
         200
       );
-      let a = "", v = "", C;
+      let a = "", m = "", C;
       if (f === "draw") {
-        const l = b.current;
+        const l = h.current;
         if (!l || l.isEmpty()) return null;
-        a = l.toDataURL("image/png"), v = l.toSVG(), C = l.toData();
+        a = l.toDataURL("image/png"), m = l.toSVG(), C = l.toData();
       } else {
         const l = z.trim();
         if (l.length === 0) return null;
-        a = Ae(
+        a = Ee(
           l,
           e,
           r,
-          p || "currentColor",
-          h || "transparent"
+          v || "currentColor",
+          y || "transparent"
         ).toDataURL("image/png");
         const O = l.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-        v = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${e} ${r}" width="${e}" height="${r}"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-style="italic" font-size="32" fill="${p || "currentColor"}" letter-spacing="3">${O}</text></svg>`;
+        m = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${e} ${r}" width="${e}" height="${r}"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-style="italic" font-size="32" fill="${v || "currentColor"}" letter-spacing="3">${O}</text></svg>`;
       }
-      const $ = e * 25.4 / 96, D = r * 25.4 / 96, y = (/* @__PURE__ */ new Date()).toISOString();
+      const $ = e * 25.4 / 96, D = r * 25.4 / 96, w = (/* @__PURE__ */ new Date()).toISOString();
       let M = "";
       if (a) {
-        const l = a.indexOf(","), K = l >= 0 ? a.slice(l + 1) : "", O = Me(K);
-        M = await Ne(O);
+        const l = a.indexOf(","), K = l >= 0 ? a.slice(l + 1) : "", O = Ne(K);
+        M = await Ae(O);
       }
       const E = {
         png: a,
-        svg: v,
+        svg: m,
         widthMm: $,
         heightMm: D,
-        capturedAt: y,
+        capturedAt: w,
         sha256: M,
         strokes: C
       };
@@ -302,54 +303,55 @@ const Ee = fe(
       f,
       z,
       i,
-      o,
       p,
-      h,
+      v,
+      y,
       g
     ]);
-    ve(
-      ne,
+    me(
+      se,
       () => ({
         clear: P,
-        undo: U,
-        isEmpty: I,
+        undo: I,
+        isEmpty: U,
         confirm: H
       }),
-      [P, U, I, H]
+      [P, I, U, H]
     );
-    const Z = u || I(), ue = {
+    const Z = u || U(), fe = {
       "--signature-width": Y(i, "var(--signature-default-width)"),
-      "--signature-height": Y(o, "var(--signature-default-height)")
+      "--signature-height": Y(p, "var(--signature-default-height)")
     };
     return /* @__PURE__ */ _(
       "div",
       {
         role: "region",
-        "aria-label": te ?? d("signature.padLabel"),
+        "aria-label": re ?? d("signature.padLabel"),
         "aria-disabled": u || void 0,
-        className: [he(), re].filter(Boolean).join(" "),
-        style: ue,
+        className: [ye(), ne].filter(Boolean).join(" "),
+        style: fe,
         "data-component": "signature-capture",
+        "data-component-id": t,
         children: [
-          f === "draw" ? /* @__PURE__ */ m(
+          f === "draw" ? /* @__PURE__ */ b(
             "div",
             {
-              ref: se,
-              className: ye(),
-              children: /* @__PURE__ */ m(
+              ref: ae,
+              className: we(),
+              children: /* @__PURE__ */ b(
                 "canvas",
                 {
                   ref: F,
                   role: "img",
                   "aria-label": d("signature.padLabel"),
-                  className: we(),
+                  className: xe(),
                   "data-testid": "signature-canvas"
                 }
               )
             }
           ) : /* @__PURE__ */ _("label", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
-            /* @__PURE__ */ m("span", { className: "type-body-sm ds:text-[var(--muted-foreground)]", children: d("signature.typedFallback.label") }),
-            /* @__PURE__ */ m(
+            /* @__PURE__ */ b("span", { className: "type-body-sm ds:text-[var(--muted-foreground)]", children: d("signature.typedFallback.label") }),
+            /* @__PURE__ */ b(
               "input",
               {
                 type: "text",
@@ -360,20 +362,20 @@ const Ee = fe(
                 placeholder: d("signature.typedFallback.placeholder"),
                 "aria-label": d("signature.typedFallback.label"),
                 disabled: u,
-                className: ze(),
+                className: Ce(),
                 "data-testid": "signature-typed-input"
               }
             ),
-            z ? /* @__PURE__ */ m(
+            z ? /* @__PURE__ */ b(
               "div",
               {
-                className: Ce(),
+                className: Se(),
                 "aria-hidden": "true",
                 children: z
               }
             ) : null
           ] }),
-          /* @__PURE__ */ m(
+          /* @__PURE__ */ b(
             "div",
             {
               id: q,
@@ -381,11 +383,11 @@ const Ee = fe(
               "aria-atomic": "true",
               className: "ds:sr-only",
               "data-testid": "signature-live",
-              children: oe
+              children: de
             }
           ),
-          /* @__PURE__ */ _("div", { className: xe(), role: "group", "aria-label": d("signature.padLabel"), children: [
-            /* @__PURE__ */ m(
+          /* @__PURE__ */ _("div", { className: ke(), role: "group", "aria-label": d("signature.padLabel"), children: [
+            /* @__PURE__ */ b(
               "button",
               {
                 type: "button",
@@ -397,24 +399,24 @@ const Ee = fe(
                 children: d("signature.clear")
               }
             ),
-            f === "draw" ? /* @__PURE__ */ m(
+            f === "draw" ? /* @__PURE__ */ b(
               "button",
               {
                 type: "button",
                 onClick: () => {
-                  u || U();
+                  u || I();
                 },
                 "aria-disabled": u || void 0,
                 className: W(),
                 children: d("signature.undo")
               }
             ) : null,
-            c ? /* @__PURE__ */ m(
+            te ? /* @__PURE__ */ b(
               "button",
               {
                 type: "button",
                 onClick: () => {
-                  u || (L(""), ae((e) => e === "draw" ? "typed" : "draw"), g("cleared"));
+                  u || (L(""), ie((e) => e === "draw" ? "typed" : "draw"), g("cleared"));
                 },
                 "aria-disabled": u || void 0,
                 className: W(),
@@ -422,7 +424,7 @@ const Ee = fe(
                 children: d(f === "draw" ? "signature.typedFallback.toggle" : "signature.typedFallback.toggleDraw")
               }
             ) : null,
-            /* @__PURE__ */ m(
+            /* @__PURE__ */ b(
               "button",
               {
                 type: "button",
@@ -431,7 +433,7 @@ const Ee = fe(
                 },
                 "aria-disabled": Z || void 0,
                 "aria-describedby": q,
-                className: ke(),
+                className: ze(),
                 "data-testid": "signature-confirm",
                 children: d("signature.confirm")
               }
@@ -442,8 +444,8 @@ const Ee = fe(
     );
   }
 );
-Ee.displayName = "SignatureCapture";
-const De = {
+Te.displayName = "SignatureCapture";
+const Fe = {
   id: "signature-capture",
   capabilities: ["edit_inline", "submit"],
   state: {
@@ -475,11 +477,16 @@ const De = {
     }
   },
   domHooks: {
-    root: { attr: "data-component", value: "signature-capture" }
+    root: { attr: "data-component", value: "signature-capture" },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
   }
 };
 export {
-  Ee as S,
-  De as s
+  Te as S,
+  Fe as s
 };
-//# sourceMappingURL=signature-capture.agent-C38VPXxg.js.map
+//# sourceMappingURL=signature-capture.agent-BpeDwFht.js.map

package/dist/_chunks/signature-capture.agent-BpeDwFht.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"signature-capture.agent-BpeDwFht.js","sources":["../../src/components/signature-capture/signature-capture.tsx","../../src/components/signature-capture/signature-capture.agent.ts"],"sourcesContent":["/* ------------------------------------------------------------------ */\n/* SignatureCapture — thin React wrapper over signature_pad.            */\n/*                                                                     */\n/* - Library: `signature_pad` (08-third-party §Signature Pad). We      */\n/*   instantiate one pad per mounted canvas and expose imperative      */\n/*   clear / undo / isEmpty / confirm verbs to the consumer.           */\n/* - Colors: `penColor` / `backgroundColor` default to                  */\n/*   `--foreground` / `--background` via `getComputedStyle()`. Theme   */\n/*   switches are observed via a MutationObserver on `<html class>`    */\n/*   so the ink recolours when the theme flips.                        */\n/* - DPR scaling: canvas attribute `width/height = cssSize * DPR`; the */\n/*   2D context is scaled by the same factor. A `ResizeObserver`       */\n/*   replays strokes via `fromData()` on re-scale so nothing is lost.  */\n/* - Typed fallback: keyboard-only path renders a text input styled in */\n/*   italic `var(--font-sans)` (per 23-constraints §10 — serif is      */\n/*   marketing only). On confirm we render the string to an offscreen  */\n/*   canvas for the PNG/SVG export.                                    */\n/* - Confirm payload: `{ png, svg, widthMm, heightMm, capturedAt,      */\n/*   sha256, strokes? }`. `sha256` is the SubtleCrypto digest of the   */\n/*   PNG bytes — tamper-evident for audit trails.                      */\n/* - Security: no `fetch` / `XMLHttpRequest` / `localStorage` /        */\n/*   `sessionStorage` in this file — the consumer owns persistence.    */\n/*                                                                     */\n/* TODO:                                                                */\n/*   - 3× DPI re-render for print: currently `toDataURL('image/png')`  */\n/*     exports the live canvas (already at DPR). A proper 300-DPI      */\n/*     pipeline would create an offscreen canvas at `cssSize × 3` and  */\n/*     replay strokes via `fromData()` — deferred pending the print    */\n/*     bridge landing.                                                 */\n/*   - Typed-fallback canvas font can't read CSS variables directly    */\n/*     (Canvas2D resolves fonts at paint time and won't expand         */\n/*     `var(--font-size-2xl)`); we use a fixed `32px italic` + the     */\n/*     user's font stack, which is visually close but not              */\n/*     theme-reactive. Will migrate once the typography tokens expose  */\n/*     a resolved `font` shorthand.                                    */\n/* ------------------------------------------------------------------ */\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n} from 'react';\nimport SignaturePad from 'signature_pad';\nimport type { PointGroup } from 'signature_pad';\nimport { cva } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\n\n/* ------------------------------------------------------------------ */\n/* Public types                                                        */\n/* ------------------------------------------------------------------ */\n\nexport interface SignatureConfirmPayload {\n  /** Data URL of the captured signature rendered as PNG. */\n  png: string;\n  /** SVG string trimmed to the stroke bounding box. */\n  svg: string;\n  /** Physical width in millimetres, derived from CSS px. */\n  widthMm: number;\n  /** Physical height in millimetres, derived from CSS px. */\n  heightMm: number;\n  /** ISO-8601 UTC timestamp for when `confirm()` resolved. */\n  capturedAt: string;\n  /** Hex-encoded SHA-256 digest of the PNG bytes. */\n  sha256: string;\n  /** Raw stroke data from `signature_pad.toData()` — optional for replays. */\n  strokes?: PointGroup[];\n}\n\nexport interface SignatureCaptureProps {\n  /** Opaque instance id — emitted as `data-component-id` for the agent registry. */\n  id?: string;\n  /** Called with the export payload when the user confirms the signature. */\n  onConfirm?: (payload: SignatureConfirmPayload) => void;\n  /** Called after the pad is cleared (explicit user action). */\n  onClear?: () => void;\n  /** Called when the user starts drawing a new stroke. */\n  onStart?: () => void;\n  /** CSS width of the pad. Default 400. */\n  width?: number | string;\n  /** CSS height of the pad. Default 200. */\n  height?: number | string;\n  /** Pen colour override — defaults to `var(--foreground)`. */\n  penColor?: string;\n  /** Background override — defaults to `var(--background)`. */\n  backgroundColor?: string;\n  /** Show the typed-name fallback toggle. Default `true`. */\n  allowTypedFallback?: boolean;\n  /** Disable the entire component. */\n  disabled?: boolean;\n  /** Accessible label for the pad region. */\n  ariaLabel?: string;\n  /** Extra class names on the wrapper. */\n  className?: string;\n}\n\nexport interface SignatureCaptureHandle {\n  clear: () => void;\n  undo: () => void;\n  isEmpty: () => boolean;\n  confirm: () => Promise<SignatureConfirmPayload | null>;\n}\n\n/* ------------------------------------------------------------------ */\n/* CVA                                                                 */\n/* ------------------------------------------------------------------ */\n\nconst wrapperVariants = cva(\n  [\n    'ds:signature-capture-alfadocs ds:flex ds:flex-col',\n    'ds:gap-[var(--spacing-sm)]',\n    'ds:bg-[var(--background)] ds:text-[var(--foreground)]',\n    'ds:rounded-[var(--radius-md)] ds:border ds:border-[color:var(--border)]',\n    'ds:p-[var(--spacing-sm)]',\n    'ds:aria-disabled:opacity-[var(--opacity-50)] ds:aria-disabled:cursor-not-allowed',\n  ].join(' '),\n);\n\nconst padFrameVariants = cva(\n  [\n    'ds:relative ds:block',\n    'ds:inline-size-[var(--signature-width)]',\n    'ds:block-size-[var(--signature-height)]',\n    'ds:rounded-[var(--radius-sm)]',\n    'ds:border ds:border-[color:var(--border)]',\n    'ds:bg-[var(--background)]',\n    'ds:overflow-hidden',\n    'ds:touch-none',\n    'ds:focus-visible:outline-[length:var(--focus-ring-width)]',\n    'ds:focus-visible:outline-solid',\n    'ds:focus-visible:outline-[var(--ring)]',\n    'ds:forced-colors:focus-visible:outline-[CanvasText]',\n  ].join(' '),\n);\n\nconst canvasVariants = cva(\n  [\n    'ds:block',\n    'ds:inline-size-full',\n    'ds:block-size-full',\n    'ds:touch-none',\n    'ds:select-none',\n  ].join(' '),\n);\n\nconst toolbarVariants = cva(\n  ['ds:flex ds:items-center ds:flex-wrap ds:gap-[var(--spacing-xs)]'].join(' '),\n);\n\nconst actionButtonVariants = cva(\n  [\n    'ds:inline-flex ds:items-center ds:justify-center',\n    'ds:min-block-size-[var(--min-target-size)]',\n    'ds:min-inline-size-[var(--min-target-size)]',\n    'ds:gap-[var(--spacing-xs)]',\n    'ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]',\n    'ds:rounded-[var(--radius-sm)]',\n    'ds:border ds:border-[color:var(--border)]',\n    'ds:bg-transparent ds:text-[var(--foreground)]',\n    'ds:text-[length:var(--font-size-sm)] ds:font-medium',\n    'ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none',\n    'ds:hover:bg-[var(--muted)]',\n    'ds:focus-visible:outline-[length:var(--focus-ring-width)]',\n    'ds:focus-visible:outline-solid',\n    'ds:focus-visible:outline-[var(--ring)]',\n    'ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n    'ds:forced-colors:focus-visible:outline-[CanvasText]',\n    'ds:aria-disabled:opacity-[var(--opacity-50)] ds:aria-disabled:cursor-not-allowed',\n  ].join(' '),\n);\n\nconst confirmButtonVariants = cva(\n  [\n    'ds:inline-flex ds:items-center ds:justify-center',\n    'ds:min-block-size-[var(--min-target-size)]',\n    'ds:min-inline-size-[var(--min-target-size)]',\n    'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]',\n    'ds:rounded-[var(--radius-sm)]',\n    'ds:bg-[var(--primary)] ds:text-[var(--primary-foreground)]',\n    'ds:text-[length:var(--font-size-sm)] ds:font-medium',\n    'ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none',\n    'ds:hover:bg-[var(--primary-hover)]',\n    'ds:focus-visible:outline-[length:var(--focus-ring-width)]',\n    'ds:focus-visible:outline-solid',\n    'ds:focus-visible:outline-[var(--ring)]',\n    'ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n    'ds:forced-colors:focus-visible:outline-[CanvasText]',\n    'ds:aria-disabled:opacity-[var(--opacity-50)] ds:aria-disabled:cursor-not-allowed',\n  ].join(' '),\n);\n\nconst typedInputVariants = cva(\n  [\n    'ds:block ds:inline-size-full',\n    'ds:min-block-size-[var(--min-target-size)]',\n    'ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]',\n    'ds:rounded-[var(--radius-sm)]',\n    'ds:border ds:border-[color:var(--border)]',\n    'ds:bg-[var(--background)] ds:text-[var(--foreground)]',\n    'ds:font-[family-name:var(--font-sans)]',\n    'ds:italic',\n    'ds:tracking-[0.1em]',\n    'ds:text-[length:var(--font-size-lg)]',\n    'ds:focus-visible:outline-[length:var(--focus-ring-width)]',\n    'ds:focus-visible:outline-solid',\n    'ds:focus-visible:outline-[var(--ring)]',\n    'ds:forced-colors:focus-visible:outline-[CanvasText]',\n  ].join(' '),\n);\n\nconst typedPreviewVariants = cva(\n  [\n    'ds:flex ds:items-center ds:justify-center',\n    'ds:inline-size-[var(--signature-width)]',\n    'ds:block-size-[var(--signature-height)]',\n    'ds:rounded-[var(--radius-sm)]',\n    'ds:border ds:border-[color:var(--border)]',\n    'ds:bg-[var(--background)] ds:text-[var(--foreground)]',\n    'ds:font-[family-name:var(--font-sans)]',\n    'ds:italic',\n    'ds:tracking-[0.1em]',\n    'ds:text-[length:var(--font-size-2xl)]',\n    'ds:p-[var(--spacing-md)]',\n  ].join(' '),\n);\n\n/* ------------------------------------------------------------------ */\n/* Helpers                                                              */\n/* ------------------------------------------------------------------ */\n\ntype SignatureState = 'empty' | 'drawing' | 'captured' | 'cleared';\n\n/**\n * Resolve a CSS custom property against `document.documentElement`. We\n * can't pass `var(--foreground)` to signature_pad directly — the lib\n * stamps the string straight into `ctx.strokeStyle`, which only accepts\n * concrete colour values. Looking the variable up at runtime keeps the\n * component in tokens-only compliance.\n */\nfunction resolveCssVar(name: string): string {\n  if (typeof document === 'undefined') return '';\n  const value = getComputedStyle(document.documentElement)\n    .getPropertyValue(name)\n    .trim();\n  return value;\n}\n\nfunction toCssSize(v: number | string | undefined, fallback: string): string {\n  if (typeof v === 'number') return `${v}px`;\n  if (typeof v === 'string' && v.length > 0) return v;\n  return fallback;\n}\n\nfunction parsePxValue(v: string, fallback: number): number {\n  const n = parseFloat(v);\n  if (!Number.isFinite(n)) return fallback;\n  return n;\n}\n\n/** Hex-encode a Uint8Array. */\nfunction toHex(bytes: Uint8Array): string {\n  let out = '';\n  for (let i = 0; i < bytes.length; i += 1) {\n    const b = bytes[i];\n    out += b.toString(16).padStart(2, '0');\n  }\n  return out;\n}\n\n/** Decode a base64 string into bytes without `atob` polyfills. */\nfunction base64ToBytes(b64: string): Uint8Array {\n  if (typeof atob === 'function') {\n    const bin = atob(b64);\n    const bytes = new Uint8Array(bin.length);\n    for (let i = 0; i < bin.length; i += 1) bytes[i] = bin.charCodeAt(i);\n    return bytes;\n  }\n  // Fallback — node-style Buffer, gated behind a runtime check.\n  const g = globalThis as { Buffer?: { from: (s: string, enc: string) => Uint8Array } };\n  if (g.Buffer) return g.Buffer.from(b64, 'base64');\n  return new Uint8Array();\n}\n\nasync function sha256Hex(bytes: Uint8Array): Promise<string> {\n  const g = globalThis as { crypto?: Crypto };\n  if (g.crypto?.subtle) {\n    // Copy the bytes into a fresh ArrayBuffer so the slice is always an\n    // ArrayBuffer (never a SharedArrayBuffer) — SubtleCrypto's BufferSource\n    // narrowing doesn't accept the latter.\n    const copy = new Uint8Array(bytes.byteLength);\n    copy.set(bytes);\n    const digest = await g.crypto.subtle.digest('SHA-256', copy.buffer);\n    return toHex(new Uint8Array(digest));\n  }\n  // No subtle crypto — return empty so callers can still use the rest\n  // of the payload. Test env is expected to stub crypto.subtle.\n  return '';\n}\n\n/**\n * Render the typed fallback string onto an offscreen canvas and return\n * it. Used by the confirm path when the user has typed their name\n * instead of drawing. Size is fixed at `32px italic` because Canvas2D\n * resolves fonts eagerly and can't expand `var(--font-size-*)`.\n */\nfunction renderTypedSignatureToCanvas(\n  text: string,\n  cssWidth: number,\n  cssHeight: number,\n  penColor: string,\n  backgroundColor: string,\n): HTMLCanvasElement {\n  const dpr = Math.max(1, typeof window !== 'undefined' ? window.devicePixelRatio : 1);\n  const canvas = document.createElement('canvas');\n  canvas.width = Math.floor(cssWidth * dpr);\n  canvas.height = Math.floor(cssHeight * dpr);\n  const ctx = canvas.getContext('2d');\n  if (!ctx) return canvas;\n  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n  // Fill background with the token-resolved colour.\n  ctx.fillStyle = backgroundColor || 'transparent';\n  ctx.fillRect(0, 0, cssWidth, cssHeight);\n  // Draw the typed signature centred.\n  ctx.fillStyle = penColor || 'currentColor';\n  ctx.font = '32px italic sans-serif';\n  ctx.textAlign = 'center';\n  ctx.textBaseline = 'middle';\n  ctx.fillText(text, cssWidth / 2, cssHeight / 2, cssWidth - 16);\n  return canvas;\n}\n\n/* ------------------------------------------------------------------ */\n/* SignatureCapture                                                     */\n/* ------------------------------------------------------------------ */\n\nexport const SignatureCapture = forwardRef<\n  SignatureCaptureHandle,\n  SignatureCaptureProps\n>(\n  (\n    {\n      id,\n      onConfirm,\n      onClear,\n      onStart,\n      width = 400,\n      height = 200,\n      penColor,\n      backgroundColor,\n      allowTypedFallback = true,\n      disabled = false,\n      ariaLabel,\n      className,\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n    const rawId = useId();\n    const idSafe = useMemo(\n      () => `sig-${rawId.replace(/[^a-zA-Z0-9-_]/g, '')}`,\n      [rawId],\n    );\n    const liveRegionId = `${idSafe}-live`;\n\n    const padFrameRef = useRef<HTMLDivElement>(null);\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n    const signaturePadRef = useRef<SignaturePad | null>(null);\n\n    const [mode, setMode] = useState<'draw' | 'typed'>('draw');\n    const [typedValue, setTypedValue] = useState('');\n    // Retained state — consumers may subscribe to the pad's lifecycle via\n    // `onConfirm`/`onClear`/`onStart`; we still track the machine internally\n    // so the live region + confirm button stay coherent.\n    const signatureStateRef = useRef<SignatureState>('empty');\n    const [announcement, setAnnouncement] = useState<string>('');\n    const [resolvedPen, setResolvedPen] = useState<string>('');\n    const [resolvedBg, setResolvedBg] = useState<string>('');\n\n    // Stable callback refs so we can wire signature_pad once without\n    // re-instantiating on every render.\n    const onStartRef = useRef<SignatureCaptureProps['onStart']>(onStart);\n    const onClearRef = useRef<SignatureCaptureProps['onClear']>(onClear);\n    const onConfirmRef = useRef<SignatureCaptureProps['onConfirm']>(onConfirm);\n    useEffect(() => {\n      onStartRef.current = onStart;\n      onClearRef.current = onClear;\n      onConfirmRef.current = onConfirm;\n    }, [onStart, onClear, onConfirm]);\n\n    /* ---- Announce helper ---------------------------------------- */\n    const announce = useCallback(\n      (next: SignatureState) => {\n        signatureStateRef.current = next;\n        setAnnouncement(t(`signature.state.${next}`));\n      },\n      [t],\n    );\n\n    /* ---- Resolve tokens ----------------------------------------- */\n    useEffect(() => {\n      if (typeof document === 'undefined') return undefined;\n      function resolveAll(): void {\n        const pen = penColor ?? resolveCssVar('--foreground');\n        const bg = backgroundColor ?? resolveCssVar('--background');\n        // Fall back to `currentColor` / `transparent` — keyword literals\n        // are token-neutral and honour the surrounding theme even when\n        // the CSS variable is briefly unavailable (SSR, initial paint).\n        setResolvedPen(pen || 'currentColor');\n        setResolvedBg(bg || 'transparent');\n      }\n      resolveAll();\n      // Watch for theme-class changes on <html>.\n      const mo = new MutationObserver(() => {\n        resolveAll();\n      });\n      mo.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['class'],\n      });\n      return () => mo.disconnect();\n    }, [penColor, backgroundColor]);\n\n    /* ---- Apply colour changes to an existing pad ---------------- */\n    useEffect(() => {\n      const pad = signaturePadRef.current;\n      if (!pad) return;\n      if (resolvedPen) pad.penColor = resolvedPen;\n      if (resolvedBg) pad.backgroundColor = resolvedBg;\n    }, [resolvedPen, resolvedBg]);\n\n    /* ---- Instantiate signature_pad ------------------------------ */\n    useEffect(() => {\n      if (mode !== 'draw') return undefined;\n      const canvas = canvasRef.current;\n      if (!canvas) return undefined;\n\n      const pad = new SignaturePad(canvas, {\n        penColor: resolvedPen || 'currentColor',\n        backgroundColor: resolvedBg || 'transparent',\n        minWidth: 0.5,\n        maxWidth: 2.5,\n        velocityFilterWeight: 0.7,\n      });\n      signaturePadRef.current = pad;\n\n      const handleBegin = (): void => {\n        announce('drawing');\n        onStartRef.current?.();\n      };\n      const handleEnd = (): void => {\n        // Keep state as 'drawing' — transition to 'captured' on confirm.\n      };\n      pad.addEventListener('beginStroke', handleBegin);\n      pad.addEventListener('endStroke', handleEnd);\n\n      // Initial DPR scale + announcement.\n      scaleCanvas(canvas);\n      announce('empty');\n\n      return () => {\n        pad.removeEventListener('beginStroke', handleBegin);\n        pad.removeEventListener('endStroke', handleEnd);\n        // Clear strokes from memory; 08-third-party §Signature Pad.\n        pad.clear();\n        pad.off();\n        signaturePadRef.current = null;\n      };\n      // We intentionally re-create the pad only when switching between\n      // typed and draw modes. Color updates flow through the effect above.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [mode]);\n\n    /* ---- Disabled state ----------------------------------------- */\n    useEffect(() => {\n      const pad = signaturePadRef.current;\n      if (!pad) return;\n      if (disabled) pad.off();\n      else pad.on();\n    }, [disabled, mode]);\n\n    /* ---- DPR + ResizeObserver ----------------------------------- */\n    // Hard-cap backing-store dimensions to bound memory. 4096 px × 4096 px at\n    // 4 bytes per pixel is ~67 MB — generous for any realistic signature, but\n    // well under the multi-GB allocation a careless or malicious prop could\n    // request on a high-DPR display. See security-hardening.mdx.\n    const MAX_CANVAS_PX = 4096;\n    const scaleCanvas = useCallback((canvas: HTMLCanvasElement) => {\n      const rect = canvas.getBoundingClientRect();\n      const dpr = Math.max(\n        1,\n        typeof window !== 'undefined' ? window.devicePixelRatio : 1,\n      );\n      const rawWidth = Math.max(1, Math.floor(rect.width * dpr));\n      const rawHeight = Math.max(1, Math.floor(rect.height * dpr));\n      const targetWidth = Math.min(rawWidth, MAX_CANVAS_PX);\n      const targetHeight = Math.min(rawHeight, MAX_CANVAS_PX);\n      if (\n        import.meta.env.DEV &&\n        (rawWidth !== targetWidth || rawHeight !== targetHeight)\n      ) {\n        // Silent in production; a consumer shipping 10k × 10k probably wants\n        // the nudge.\n        console.warn(\n          `[SignatureCapture] clamped canvas backing store from ${rawWidth}x${rawHeight} to ${targetWidth}x${targetHeight} (cap = ${MAX_CANVAS_PX}px).`,\n        );\n      }\n      if (canvas.width === targetWidth && canvas.height === targetHeight) return;\n\n      const pad = signaturePadRef.current;\n      const prior = pad ? pad.toData() : null;\n      canvas.width = targetWidth;\n      canvas.height = targetHeight;\n      const ctx = canvas.getContext('2d');\n      if (ctx) ctx.scale(dpr, dpr);\n      if (pad) {\n        if (resolvedBg) pad.backgroundColor = resolvedBg;\n        if (resolvedPen) pad.penColor = resolvedPen;\n        pad.clear();\n        if (prior && prior.length > 0) {\n          pad.fromData(prior);\n        }\n      }\n    }, [resolvedBg, resolvedPen]);\n\n    useEffect(() => {\n      const canvas = canvasRef.current;\n      if (!canvas) return undefined;\n      if (typeof ResizeObserver === 'undefined') {\n        scaleCanvas(canvas);\n        return undefined;\n      }\n      const ro = new ResizeObserver(() => {\n        scaleCanvas(canvas);\n      });\n      ro.observe(canvas);\n      return () => ro.disconnect();\n    }, [scaleCanvas]);\n\n    /* ---- Imperative handle -------------------------------------- */\n    const clear = useCallback(() => {\n      const pad = signaturePadRef.current;\n      if (pad) pad.clear();\n      setTypedValue('');\n      announce('cleared');\n      onClearRef.current?.();\n    }, [announce]);\n\n    const undo = useCallback(() => {\n      const pad = signaturePadRef.current;\n      if (!pad) return;\n      const data = pad.toData();\n      if (!data || data.length === 0) return;\n      data.pop();\n      pad.fromData(data);\n      if (data.length === 0) announce('empty');\n    }, [announce]);\n\n    const isEmpty = useCallback((): boolean => {\n      if (mode === 'typed') return typedValue.trim().length === 0;\n      const pad = signaturePadRef.current;\n      return pad ? pad.isEmpty() : true;\n    }, [mode, typedValue]);\n\n    const confirm = useCallback(async (): Promise<SignatureConfirmPayload | null> => {\n      const cssWidth = parsePxValue(\n        typeof width === 'number' ? `${width}` : String(width),\n        400,\n      );\n      const cssHeight = parsePxValue(\n        typeof height === 'number' ? `${height}` : String(height),\n        200,\n      );\n\n      let pngDataUrl = '';\n      let svgString = '';\n      let strokes: PointGroup[] | undefined;\n\n      if (mode === 'draw') {\n        const pad = signaturePadRef.current;\n        if (!pad || pad.isEmpty()) return null;\n        pngDataUrl = pad.toDataURL('image/png');\n        svgString = pad.toSVG();\n        strokes = pad.toData();\n      } else {\n        const value = typedValue.trim();\n        if (value.length === 0) return null;\n        const offscreen = renderTypedSignatureToCanvas(\n          value,\n          cssWidth,\n          cssHeight,\n          resolvedPen || 'currentColor',\n          resolvedBg || 'transparent',\n        );\n        pngDataUrl = offscreen.toDataURL('image/png');\n        // Inline SVG — we can't call toSVG() because signature_pad isn't\n        // driving the canvas. Build a minimal SVG with the rendered text.\n        const safeText = value\n          .replace(/&/g, '&amp;')\n          .replace(/</g, '&lt;')\n          .replace(/>/g, '&gt;')\n          .replace(/\"/g, '&quot;')\n          .replace(/'/g, '&#39;');\n        svgString =\n          `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 ${cssWidth} ${cssHeight}\" width=\"${cssWidth}\" height=\"${cssHeight}\">` +\n          `<text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" font-family=\"sans-serif\" font-style=\"italic\" font-size=\"32\" fill=\"${resolvedPen || 'currentColor'}\" letter-spacing=\"3\">${safeText}</text>` +\n          `</svg>`;\n      }\n\n      // 96 CSS px = 25.4 mm (per W3C CSS absolute length definition).\n      const widthMm = (cssWidth * 25.4) / 96;\n      const heightMm = (cssHeight * 25.4) / 96;\n      const capturedAt = new Date().toISOString();\n\n      // Compute SHA-256 of the PNG bytes.\n      let sha256 = '';\n      if (pngDataUrl) {\n        const commaIx = pngDataUrl.indexOf(',');\n        const b64 = commaIx >= 0 ? pngDataUrl.slice(commaIx + 1) : '';\n        const bytes = base64ToBytes(b64);\n        sha256 = await sha256Hex(bytes);\n      }\n\n      const payload: SignatureConfirmPayload = {\n        png: pngDataUrl,\n        svg: svgString,\n        widthMm,\n        heightMm,\n        capturedAt,\n        sha256,\n        strokes,\n      };\n\n      announce('captured');\n      onConfirmRef.current?.(payload);\n      return payload;\n    }, [\n      mode,\n      typedValue,\n      width,\n      height,\n      resolvedPen,\n      resolvedBg,\n      announce,\n    ]);\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        clear,\n        undo,\n        isEmpty,\n        confirm,\n      }),\n      [clear, undo, isEmpty, confirm],\n    );\n\n    /* ---- Derived UI state --------------------------------------- */\n    const confirmDisabled = disabled || isEmpty();\n    // Inline style — permitted per 23-constraints §Runtime-computed\n    // dimensions (CSS custom property setter for dynamic width/height\n    // from consumer props; the width rule lives in Tailwind arbitrary\n    // values that read --signature-width / --signature-height).\n    const sizeStyle: CSSProperties = {\n      ['--signature-width' as unknown as keyof CSSProperties]: toCssSize(width, 'var(--signature-default-width)'),\n      ['--signature-height' as unknown as keyof CSSProperties]: toCssSize(height, 'var(--signature-default-height)'),\n    } as CSSProperties;\n\n    /* ---- Render -------------------------------------------------- */\n    return (\n      <div\n        role=\"region\"\n        aria-label={ariaLabel ?? t('signature.padLabel')}\n        aria-disabled={disabled || undefined}\n        className={[wrapperVariants(), className].filter(Boolean).join(' ')}\n        style={sizeStyle}\n        data-component=\"signature-capture\"\n        data-component-id={id}\n      >\n        {mode === 'draw' ? (\n          <div\n            ref={padFrameRef}\n            className={padFrameVariants()}\n          >\n            <canvas\n              ref={canvasRef}\n              role=\"img\"\n              aria-label={t('signature.padLabel')}\n              className={canvasVariants()}\n              data-testid=\"signature-canvas\"\n            />\n          </div>\n        ) : (\n          <label className=\"ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]\">\n            <span className=\"type-body-sm ds:text-[var(--muted-foreground)]\">\n              {t('signature.typedFallback.label')}\n            </span>\n            <input\n              type=\"text\"\n              value={typedValue}\n              onChange={(e) => {\n                setTypedValue(e.target.value);\n                if (e.target.value.length > 0) announce('drawing');\n                else announce('empty');\n              }}\n              placeholder={t('signature.typedFallback.placeholder')}\n              aria-label={t('signature.typedFallback.label')}\n              disabled={disabled}\n              className={typedInputVariants()}\n              data-testid=\"signature-typed-input\"\n            />\n            {typedValue ? (\n              <div\n                className={typedPreviewVariants()}\n                aria-hidden=\"true\"\n              >\n                {typedValue}\n              </div>\n            ) : null}\n          </label>\n        )}\n\n        {/* Live region — state transitions (empty, drawing, captured, cleared) */}\n        <div\n          id={liveRegionId}\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n          className=\"ds:sr-only\"\n          data-testid=\"signature-live\"\n        >\n          {announcement}\n        </div>\n\n        <div className={toolbarVariants()} role=\"group\" aria-label={t('signature.padLabel')}>\n          <button\n            type=\"button\"\n            onClick={() => {\n              if (disabled) return;\n              clear();\n            }}\n            aria-disabled={disabled || undefined}\n            className={actionButtonVariants()}\n          >\n            {t('signature.clear')}\n          </button>\n          {mode === 'draw' ? (\n            <button\n              type=\"button\"\n              onClick={() => {\n                if (disabled) return;\n                undo();\n              }}\n              aria-disabled={disabled || undefined}\n              className={actionButtonVariants()}\n            >\n              {t('signature.undo')}\n            </button>\n          ) : null}\n          {allowTypedFallback ? (\n            <button\n              type=\"button\"\n              onClick={() => {\n                if (disabled) return;\n                setTypedValue('');\n                setMode((m) => (m === 'draw' ? 'typed' : 'draw'));\n                announce('cleared');\n              }}\n              aria-disabled={disabled || undefined}\n              className={actionButtonVariants()}\n              aria-pressed={mode === 'typed'}\n            >\n              {mode === 'draw'\n                ? t('signature.typedFallback.toggle')\n                : t('signature.typedFallback.toggleDraw')}\n            </button>\n          ) : null}\n          <button\n            type=\"button\"\n            onClick={() => {\n              if (confirmDisabled) return;\n              void confirm();\n            }}\n            aria-disabled={confirmDisabled || undefined}\n            aria-describedby={liveRegionId}\n            className={confirmButtonVariants()}\n            data-testid=\"signature-confirm\"\n          >\n            {t('signature.confirm')}\n          </button>\n        </div>\n      </div>\n    );\n  },\n);\n\nSignatureCapture.displayName = 'SignatureCapture';\n\nexport {\n  wrapperVariants as signatureWrapperVariants,\n  actionButtonVariants as signatureActionButtonVariants,\n  confirmButtonVariants as signatureConfirmButtonVariants,\n};\n","import type { AgentAdapter } from '../../agent/types';\nimport type { SignatureCaptureHandle } from './signature-capture';\n\nexport const signatureCaptureAgent: AgentAdapter<SignatureCaptureHandle> = {\n  id: 'signature-capture',\n  capabilities: ['edit_inline', 'submit'],\n  state: {\n    isEmpty: {\n      type: 'boolean',\n      description: 'True when no signature has been drawn or typed.',\n      read: (handle) => handle.isEmpty(),\n    },\n  },\n  actions: {\n    clear: {\n      safety: 'destructive',\n      description: 'Erase the current signature. Loses unsaved input.',\n      invoke: (handle) => {\n        handle.clear();\n      },\n    },\n    undo: {\n      safety: 'write',\n      description: 'Undo the last stroke.',\n      invoke: (handle) => {\n        handle.undo();\n      },\n    },\n    confirm: {\n      safety: 'write',\n      description: 'Commit the signature and return its serialised payload.',\n      invoke: (handle) => handle.confirm(),\n    },\n  },\n  domHooks: {\n    root: { attr: 'data-component', value: 'signature-capture' },\n    instanceId: {\n      attr: 'data-component-id',\n      sourceProp: 'id',\n      description: 'Sourced from the id prop.',\n    },\n  },\n};\n"],"names":["wrapperVariants","cva","padFrameVariants","canvasVariants","toolbarVariants","actionButtonVariants","confirmButtonVariants","typedInputVariants","typedPreviewVariants","resolveCssVar","name","toCssSize","v","fallback","parsePxValue","n","toHex","bytes","out","i","b","base64ToBytes","b64","bin","g","sha256Hex","_a","copy","digest","renderTypedSignatureToCanvas","text","cssWidth","cssHeight","penColor","backgroundColor","dpr","canvas","ctx","SignatureCapture","forwardRef","id","onConfirm","onClear","onStart","width","height","allowTypedFallback","disabled","ariaLabel","className","ref","t","useTranslation","rawId","useId","liveRegionId","useMemo","padFrameRef","useRef","canvasRef","signaturePadRef","mode","setMode","useState","typedValue","setTypedValue","signatureStateRef","announcement","setAnnouncement","resolvedPen","setResolvedPen","resolvedBg","setResolvedBg","onStartRef","onClearRef","onConfirmRef","useEffect","announce","useCallback","next","resolveAll","pen","bg","mo","pad","SignaturePad","handleBegin","handleEnd","scaleCanvas","MAX_CANVAS_PX","rect","rawWidth","rawHeight","targetWidth","targetHeight","prior","ro","clear","undo","data","isEmpty","confirm","pngDataUrl","svgString","strokes","value","safeText","widthMm","heightMm","capturedAt","sha256","commaIx","payload","useImperativeHandle","confirmDisabled","sizeStyle","jsxs","jsx","m","signatureCaptureAgent","handle"],"mappings":"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"}

package/dist/_chunks/skeleton-dtqyF09N.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-dtqyF09N.js","sources":["../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst skeletonVariants = cva(\n  [\n    'ds:bg-[var(--muted)]',\n    'ds:motion-reduce:animate-none',\n    'ds:forced-colors:bg-[GrayText]',\n    'ds:forced-colors:outline',\n    'ds:forced-colors:outline-1',\n    'ds:forced-colors:outline-[CanvasText]',\n    'ds:forced-colors:animate-none',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        text: 'ds:rounded-[var(--radius-sm)] ds:w-full',\n        circular: 'ds:rounded-[var(--radius-full)] ds:aspect-square ds:shrink-0',\n        rectangular: 'ds:rounded-none',\n        rounded: 'ds:rounded-[var(--radius-md)]',\n      },\n      size: {\n        sm: '',\n        md: '',\n        lg: '',\n      },\n    },\n    compoundVariants: [\n      { variant: 'text', size: 'sm', class: 'ds:h-3' },\n      { variant: 'text', size: 'md', class: 'ds:h-4' },\n      { variant: 'text', size: 'lg', class: 'ds:h-5' },\n      { variant: 'circular', size: 'sm', class: 'ds:h-8 ds:w-8' },\n      { variant: 'circular', size: 'md', class: 'ds:h-10 ds:w-10' },\n      { variant: 'circular', size: 'lg', class: 'ds:h-12 ds:w-12' },\n      { variant: 'rectangular', size: 'sm', class: 'ds:h-16' },\n      { variant: 'rectangular', size: 'md', class: 'ds:h-24' },\n      { variant: 'rectangular', size: 'lg', class: 'ds:h-40' },\n      { variant: 'rounded', size: 'sm', class: 'ds:h-16' },\n      { variant: 'rounded', size: 'md', class: 'ds:h-24' },\n      { variant: 'rounded', size: 'lg', class: 'ds:h-40' },\n    ],\n    defaultVariants: {\n      variant: 'text',\n      size: 'md',\n    },\n  },\n);\n\nconst ANIMATION_CLASS =\n  'ds:animate-[skeleton-pulse_calc(var(--animation-duration)*8)_ease-in-out_infinite]';\n\nexport interface SkeletonProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'aria-hidden' | 'style'>,\n    VariantProps<typeof skeletonVariants> {\n  variant?: 'text' | 'circular' | 'rectangular' | 'rounded';\n  size?: 'sm' | 'md' | 'lg';\n  /** Number of stacked text lines — only applies when variant='text' */\n  lines?: number;\n  /**\n   * Width override — accepts any CSS value.\n   * Exception to constraint §4: skeleton dimensions are consumer-specified\n   * and cannot be expressed as static Tailwind classes.\n   */\n  width?: string;\n  /**\n   * Height override — accepts any CSS value.\n   * Exception to constraint §4: skeleton dimensions are consumer-specified\n   * and cannot be expressed as static Tailwind classes.\n   */\n  height?: string;\n  /** Whether to animate the pulse */\n  animate?: boolean;\n}\n\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  (\n    {\n      variant = 'text',\n      size = 'md',\n      lines,\n      width,\n      height,\n      animate = true,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    // Exception to constraint §4: width/height are consumer-specified dimensions\n    // that cannot be expressed as static Tailwind classes.\n    const inlineStyle: CSSProperties | undefined =\n      width !== undefined || height !== undefined\n        ? { ...(width !== undefined && { width }), ...(height !== undefined && { height }) }\n        : undefined;\n\n    const atomClass = [\n      skeletonVariants({ variant, size }),\n      animate && ANIMATION_CLASS,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    if (lines !== undefined && lines > 1) {\n      return (\n        <div\n          ref={ref}\n          aria-hidden=\"true\"\n          data-component=\"skeleton\"\n          className={['ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]', className]\n            .filter(Boolean)\n            .join(' ')}\n          style={inlineStyle}\n          {...props}\n        >\n          {Array.from({ length: lines }, (_, i) => (\n            <div\n              key={`skeleton-line-${i}`}\n              aria-hidden=\"true\"\n              className={[atomClass, i === lines - 1 && 'ds:w-3/5']\n                .filter(Boolean)\n                .join(' ')}\n            />\n          ))}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        aria-hidden=\"true\"\n        data-component=\"skeleton\"\n        className={[atomClass, className].filter(Boolean).join(' ')}\n        style={inlineStyle}\n        {...props}\n      />\n    );\n  },\n);\n\nSkeleton.displayName = 'Skeleton';\n"],"names":["skeletonVariants","cva","ANIMATION_CLASS","Skeleton","forwardRef","variant","size","lines","width","height","animate","className","props","ref","inlineStyle","atomClass","jsx","_","i"],"mappings":"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"}