@nadicodeai/ui 6.0.0 → 6.0.2

package/AGENTS.md

@@ -7,7 +7,7 @@ exports.
 - Component changes and admission: `docs/contract.md`.
 - Consumer setup: `docs/consuming-cross-repo.md`.
 - Tokens, CSS, motion, and assets: `../design-system/DESIGN.md`.
-- Agent visuals: `docs/agent-visual.md`.
+- Agent visuals: `docs/agent-visual.md`; the Forma avatars: `docs/forma-avatar.md`.
 - System activity indicators: `docs/activity.md`.
 - First run, sign-in, and repair surfaces: `docs/threshold.md`; the
   primitives are `@nadicodeai/ui/threshold`, with

package/dist/components/forma-avatar.d.ts

@@ -0,0 +1,23 @@
+import { type CSSProperties } from "react";
+import { type FormaChoice, type FormaColor, type FormaForm, type FormaOptions, type FormaState, type FormaView } from "../internal/forma/model.js";
+type AccessibleAvatar = {
+    decorative?: true;
+    label?: never;
+} | {
+    decorative: false;
+    label: string;
+};
+type FormaAvatarProps = FormaOptions & AccessibleAvatar & {
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * The Forma avatar: Nadia's approved shell and face, or one of the seven
+ * forms in the shell colour the customer chose, with the approved lifecycle
+ * gestures. One SVG per avatar; the server renders the state's resting frame
+ * and the client rig animates it in place.
+ */
+declare function FormaAvatar({ form, color, state, size, paused, view, motionKey, decorative, label, className, style, }: FormaAvatarProps): import("react").JSX.Element;
+export { FormaAvatar, type FormaAvatarProps, type FormaChoice, type FormaColor, type FormaForm, type FormaState, type FormaView, };
+export { defaultForm, formDetails, formaChoices, formaColorVariable, formaColors, formaForms, formaStates, } from "../internal/forma/model.js";
+//# sourceMappingURL=forma-avatar.d.ts.map

package/dist/components/forma-avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"forma-avatar.d.ts","sourceRoot":"","sources":["../../src/components/forma-avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAsC,MAAM,OAAO,CAAC;AAW/E,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,SAAS,EAMf,MAAM,wBAAwB,CAAC;AAIhC,KAAK,gBAAgB,GAAG;IAAE,UAAU,CAAC,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,UAAU,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpG,KAAK,gBAAgB,GAAG,YAAY,GAClC,gBAAgB,GAAG;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAiBJ;;;;;GAKG;AACH,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,KAAc,EACd,IAAS,EACT,MAAc,EACd,IAAc,EACd,SAAS,EACT,UAAiB,EACjB,KAAK,EACL,SAAS,EACT,KAAK,GACN,EAAE,gBAAgB,+BA4blB;AAED,OAAO,EACL,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,UAAU,EACf,KAAK,SAAS,GACf,CAAC;AACF,OAAO,EACL,WAAW,EACX,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,WAAW,EACX,UAAU,EACV,WAAW,GACZ,MAAM,wBAAwB,CAAC"}

package/dist/components/forma-avatar.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { ORBIT_DOTS, ORBIT_TILTS, RIBBON_BEADS, RIBBON_TILTS, SHELL_LAYERS, } from "../internal/forma/frame.js";
+import { bodies, eyeProfiles } from "../internal/forma/geometry.js";
+import { ITALY_PATH } from "../internal/forma/hallmark.js";
+import { celebrationColors, formDetails, formaColorVariable, resolveFormaOptions, shellColor, } from "../internal/forma/model.js";
+import { stillFrame } from "../internal/forma/still.js";
+const WHITE = "var(--nc-identity-white)";
+const INK = "var(--nc-identity-ink)";
+function part(frame, name) {
+    const { display, ...attributes } = frame[name] ?? {};
+    return {
+        "data-part": name,
+        ...attributes,
+        ...(display === undefined ? {} : { style: { display } }),
+    };
+}
+const orbitDotRadius = (i) => (i % 10 === 0 ? 0.036 : 0.022 * (1 - (i % 10) / 13)).toFixed(4);
+/**
+ * The Forma avatar: Nadia's approved shell and face, or one of the seven
+ * forms in the shell colour the customer chose, with the approved lifecycle
+ * gestures. One SVG per avatar; the server renders the state's resting frame
+ * and the client rig animates it in place.
+ */
+function FormaAvatar({ form, color, state = "idle", size = 32, paused = false, view = "front", motionKey, decorative = true, label, className, style, }) {
+    const options = resolveFormaOptions({ form, color, state, size, paused, view, motionKey });
+    const id = useId().replace(/:/g, "");
+    const host = useRef(null);
+    const handle = useRef(null);
+    const latest = useRef(options);
+    const [mode, setMode] = useState("still");
+    useEffect(() => {
+        latest.current = options;
+        handle.current?.update(options);
+    }, [options]);
+    useEffect(() => {
+        const element = host.current;
+        if (!element)
+            return;
+        let generation = 0;
+        const preference = typeof matchMedia === "function" ? matchMedia("(prefers-reduced-motion: reduce)") : null;
+        const reconcile = () => {
+            const token = ++generation;
+            handle.current?.dispose();
+            handle.current = null;
+            setMode("still");
+            if (paused || preference?.matches)
+                return;
+            import("../internal/forma/rig.js").then(({ mountForma }) => {
+                if (generation !== token)
+                    return;
+                handle.current = mountForma(element, latest.current, { onModeChange: setMode });
+            });
+        };
+        reconcile();
+        preference?.addEventListener("change", reconcile);
+        return () => {
+            generation++;
+            preference?.removeEventListener("change", reconcile);
+            handle.current?.dispose();
+            handle.current = null;
+        };
+    }, [paused]);
+    const detail = formDetails[options.form];
+    const nadia = options.form === "nadia";
+    const shade = shellColor(options);
+    const pigment = `var(${formaColorVariable[shade]})`;
+    const visorFill = detail.visor === "ivory" ? "var(--nc-forma-avorio)" : "var(--nc-forma-visor)";
+    const bezelStroke = detail.visor === "ivory" ? "var(--nc-seam)" : "var(--nc-forma-bezel)";
+    const eye = nadia ? "var(--nc-forma-eye)" : detail.eyes === "ink" ? INK : WHITE;
+    const frame = stillFrame(options);
+    const signature = eyeProfiles[options.form].signature === true;
+    const { width: w, height: h } = bodies[options.form];
+    const shadow = nadia ? INK : pigment;
+    const shading = { mixBlendMode: "multiply" };
+    const body = `scale(${w} ${h})`;
+    const url = (name) => `url(#${name}-${id})`;
+    const renderEye = (name) => (_jsxs("g", { ...part(frame, `eye${name}`), children: [_jsx("ellipse", { cx: "0", cy: "0", fill: url("halo"), ...part(frame, `halo${name}`) }), _jsx("path", { fill: eye, ...part(frame, `light${name}`) }), _jsx("path", { fill: url("glint"), ...part(frame, `glint${name}`) }), signature ? (_jsx("path", { d: "M0.045 0.103 Q0.092 0.102 0.112 0.147", fill: "none", stroke: eye, strokeLinecap: "round", strokeWidth: "0.021", ...part(frame, `flick${name}`) })) : null, _jsx("path", { d: "M-0.084 -0.012 Q0 0.082 0.084 -0.012", fill: "none", stroke: eye, strokeLinecap: "round", strokeWidth: "0.036", ...part(frame, `happy${name}`) }), _jsx("ellipse", { cx: "0", cy: "0", fill: url("pauseHalo"), rx: "0.17", ry: "0.32", ...part(frame, `pauseHalo${name}`) }), _jsx("rect", { fill: "var(--nc-identity-giallo)", height: "0.388", rx: "0.044", width: "0.088", x: "-0.044", y: "-0.194", ...part(frame, `pause${name}`) })] }));
+    const renderOrbitDots = (layer) => ORBIT_TILTS.map((_, index) => Array.from({ length: ORBIT_DOTS }, (__, i) => (_jsx("circle", { fill: pigment, r: orbitDotRadius(i), ...part(frame, `orbit${index}${layer}${i}`) }, `${index}-${i}`))));
+    return (_jsx("span", { "aria-hidden": decorative || undefined, "aria-label": decorative ? undefined : label, className: className, "data-color": options.color ?? "default", "data-forma-avatar": options.form, "data-state": options.state, role: decorative ? undefined : "img", style: {
+            display: "inline-block",
+            position: "relative",
+            flexShrink: 0,
+            verticalAlign: "middle",
+            ...style,
+            width: options.size,
+            height: options.size,
+        }, children: _jsxs("svg", { "aria-hidden": "true", "data-render-mode": mode, height: options.size, overflow: "visible", ref: host, style: { display: "block", overflow: "visible" }, viewBox: "-1.55 -1.55 3.1 3.1", width: options.size, children: [_jsxs("defs", { children: [_jsxs("radialGradient", { cx: "-0.18", cy: "0.3", gradientTransform: body, gradientUnits: "userSpaceOnUse", id: `tone-${id}`, r: "1.34", children: [_jsx("stop", { offset: "0", stopColor: shadow, stopOpacity: nadia ? "0.04" : "0.4" }), _jsx("stop", { offset: "1", stopColor: shadow, stopOpacity: nadia ? "0.14" : "0.95" })] }), _jsxs("radialGradient", { cx: "-0.18", cy: "0.3", gradientTransform: body, gradientUnits: "userSpaceOnUse", id: `form-${id}`, r: "1.34", children: [_jsx("stop", { offset: "0", stopColor: INK, stopOpacity: "0.02" }), _jsx("stop", { offset: "0.5", stopColor: INK, stopOpacity: "0.1" }), _jsx("stop", { offset: "0.8", stopColor: INK, stopOpacity: "0.26" }), _jsx("stop", { offset: "1", stopColor: INK, stopOpacity: "0.52" })] }), _jsxs("linearGradient", { gradientTransform: body, gradientUnits: "userSpaceOnUse", id: `floor-${id}`, x1: "0", x2: "0", y1: "1", y2: "-1", children: [_jsx("stop", { offset: "0.45", stopColor: INK, stopOpacity: "0" }), _jsx("stop", { offset: "1", stopColor: INK, stopOpacity: "0.42" })] }), _jsxs("radialGradient", { cx: "0.05", cy: "3.6", gradientTransform: `scale(${w} ${h * 0.3})`, gradientUnits: "userSpaceOnUse", id: `key-${id}`, r: "1.05", children: [_jsx("stop", { offset: "0", stopColor: WHITE, stopOpacity: "0.62" }), _jsx("stop", { offset: "0.4", stopColor: WHITE, stopOpacity: "0.22" }), _jsx("stop", { offset: "1", stopColor: WHITE, stopOpacity: "0" })] }), _jsxs("radialGradient", { cx: "0.5", cy: "0.5", id: `spec-${id}`, r: "0.5", children: [_jsx("stop", { offset: "0", stopColor: WHITE, stopOpacity: "0.85" }), _jsx("stop", { offset: "0.5", stopColor: WHITE, stopOpacity: "0.25" }), _jsx("stop", { offset: "1", stopColor: WHITE, stopOpacity: "0" })] }), _jsxs("radialGradient", { cx: "-0.16", cy: "-0.12", gradientTransform: body, gradientUnits: "userSpaceOnUse", id: `rim-${id}`, r: "1.2", children: [_jsx("stop", { offset: "0.7", stopColor: WHITE, stopOpacity: "0" }), _jsx("stop", { offset: "0.9", stopColor: WHITE, stopOpacity: "0.26" }), _jsx("stop", { offset: "0.975", stopColor: WHITE, stopOpacity: "0.5" }), _jsx("stop", { offset: "1", stopColor: WHITE, stopOpacity: "0.1" })] }), _jsxs("radialGradient", { cx: "0", cy: "0", gradientUnits: "userSpaceOnUse", id: `tube-${id}`, r: "1", children: [_jsx("stop", { offset: "0.64", stopColor: INK, stopOpacity: "0.45" }), _jsx("stop", { offset: "0.7", stopColor: INK, stopOpacity: "0.1" }), _jsx("stop", { offset: "0.76", stopColor: WHITE, stopOpacity: "0" }), _jsx("stop", { offset: "0.82", stopColor: WHITE, stopOpacity: "0.36" }), _jsx("stop", { offset: "0.89", stopColor: WHITE, stopOpacity: "0" }), _jsx("stop", { offset: "0.95", stopColor: INK, stopOpacity: "0" }), _jsx("stop", { offset: "1", stopColor: INK, stopOpacity: "0.45" })] }), _jsxs("radialGradient", { cx: "0.3", cy: "1", gradientTransform: "translate(0.3 1) scale(1 0.6) translate(-0.3 -1)", id: `glass-${id}`, r: "0.7", children: [_jsx("stop", { offset: "0", stopColor: WHITE, stopOpacity: "0.36" }), _jsx("stop", { offset: "0.5", stopColor: WHITE, stopOpacity: "0.14" }), _jsx("stop", { offset: "1", stopColor: WHITE, stopOpacity: "0" })] }), _jsxs("radialGradient", { cx: "0.2", cy: "0.84", gradientTransform: "translate(0.2 0.84) scale(1 0.5) translate(-0.2 -0.84)", id: `streak-${id}`, r: "0.24", children: [_jsx("stop", { offset: "0", stopColor: WHITE, stopOpacity: "0.9" }), _jsx("stop", { offset: "0.62", stopColor: WHITE, stopOpacity: "0.72" }), _jsx("stop", { offset: "1", stopColor: WHITE, stopOpacity: "0" })] }), _jsxs("radialGradient", { cx: "0.98", cy: "0.58", gradientTransform: "translate(0.98 0.58) scale(0.3 1) translate(-0.98 -0.58)", id: `sole-${id}`, r: "0.42", children: [_jsx("stop", { offset: "0", stopColor: WHITE, stopOpacity: "0.28" }), _jsx("stop", { offset: "1", stopColor: WHITE, stopOpacity: "0" })] }), _jsxs("linearGradient", { id: `visorShade-${id}`, x1: "0", x2: "0", y1: "1", y2: "0", children: [_jsx("stop", { offset: "0.45", stopColor: INK, stopOpacity: "0" }), _jsx("stop", { offset: "1", stopColor: INK, stopOpacity: "0.22" })] }), _jsxs("linearGradient", { id: `bezelLight-${id}`, x1: "0", x2: "1", y1: "1", y2: "0", children: [_jsx("stop", { offset: "0", stopColor: WHITE, stopOpacity: "0.5" }), _jsx("stop", { offset: "0.35", stopColor: WHITE, stopOpacity: "0" }), _jsx("stop", { offset: "1", stopColor: INK, stopOpacity: "0.25" })] }), _jsxs("radialGradient", { cx: "0.5", cy: "0.5", id: `halo-${id}`, r: "0.5", children: [_jsx("stop", { offset: "0", stopColor: eye, stopOpacity: "0.55" }), _jsx("stop", { offset: "0.45", stopColor: eye, stopOpacity: "0.18" }), _jsx("stop", { offset: "1", stopColor: eye, stopOpacity: "0" })] }), _jsxs("radialGradient", { cx: "0.5", cy: "0.62", id: `glint-${id}`, r: "0.55", children: [_jsx("stop", { offset: "0", stopColor: WHITE, stopOpacity: "0.6" }), _jsx("stop", { offset: "1", stopColor: WHITE, stopOpacity: "0" })] }), _jsxs("radialGradient", { cx: "0.5", cy: "0.5", id: `pauseHalo-${id}`, r: "0.5", children: [_jsx("stop", { offset: "0", stopColor: "var(--nc-identity-giallo)", stopOpacity: "0.5" }), _jsx("stop", { offset: "0.5", stopColor: "var(--nc-identity-giallo)", stopOpacity: "0.14" }), _jsx("stop", { offset: "1", stopColor: "var(--nc-identity-giallo)", stopOpacity: "0" })] }), _jsxs("linearGradient", { id: `bar-${id}`, x1: "0", x2: "1", y1: "0", y2: "0", children: [_jsx("stop", { offset: "0", stopColor: WHITE, stopOpacity: "0.55" }), _jsx("stop", { offset: "0.4", stopColor: WHITE, stopOpacity: "0.08" }), _jsx("stop", { offset: "0.7", stopColor: INK, stopOpacity: "0.06" }), _jsx("stop", { offset: "1", stopColor: INK, stopOpacity: "0.4" })] }), _jsxs("radialGradient", { cx: "0.36", cy: "0.68", id: `bead-${id}`, r: "0.72", children: [_jsx("stop", { offset: "0", stopColor: WHITE, stopOpacity: "0.65" }), _jsx("stop", { offset: "0.45", stopColor: WHITE, stopOpacity: "0" }), _jsx("stop", { offset: "0.78", stopColor: INK, stopOpacity: "0" }), _jsx("stop", { offset: "1", stopColor: INK, stopOpacity: "0.45" })] }), _jsx("clipPath", { id: `shell-${id}`, children: _jsx("path", { clipRule: "evenodd", ...part(frame, "shellClip") }) }), _jsx("clipPath", { id: `visor-${id}`, children: _jsx("path", { ...part(frame, "visorClip") }) })] }), _jsxs("g", { "data-part": "root", transform: "scale(1 -1)", children: [_jsx("g", { ...part(frame, "effectsBack"), children: renderOrbitDots("Back") }), _jsxs("g", { ...part(frame, "object"), children: [_jsxs("g", { clipPath: url("shell"), children: [_jsx("path", { fill: pigment, fillRule: "evenodd", ...part(frame, "shell") }), nadia ? (_jsxs(_Fragment, { children: [_jsx("path", { fill: "var(--nc-forma-avorio)", ...part(frame, "bandW") }), _jsx("path", { fill: "var(--nc-identity-rosso)", ...part(frame, "bandR") }), _jsx("path", { fill: "var(--nc-forma-sabbia)", ...part(frame, "bandSand") }), _jsx("g", { fill: "none", opacity: "0.82", stroke: "var(--nc-forma-avorio)", strokeLinecap: "round", strokeLinejoin: "round", strokeOpacity: "0.72", strokeWidth: "12", ...part(frame, "hallmark"), children: _jsx("path", { d: ITALY_PATH }) })] })) : null, SHELL_LAYERS.map((layer) => (_jsx("path", { fill: url(layer), fillRule: "evenodd", style: layer === "tone" ? shading : undefined, ...part(frame, layer) }, layer))), _jsx("ellipse", { cx: -0.4 * w, cy: 0.6 * h, fill: url("spec"), rx: 0.27 * w, ry: 0.11 * h, transform: `rotate(-24 ${-0.4 * w} ${0.6 * h})`, ...part(frame, "hot") }), _jsx("path", { fill: url("tube"), fillRule: "evenodd", ...part(frame, "tube") }), _jsx("path", { fill: "var(--nc-forma-sabbia)", fillRule: "evenodd", ...part(frame, "fade") }), _jsxs("g", { ...part(frame, "face"), children: [_jsx("path", { fill: "none", stroke: bezelStroke, strokeWidth: "0.014", ...part(frame, "bezel") }), _jsx("path", { fill: "none", stroke: url("bezelLight"), strokeWidth: "0.014", ...part(frame, "bezelLight") }), _jsx("path", { fill: visorFill, ...part(frame, "visor") }), _jsxs("g", { clipPath: url("visor"), children: [_jsx("path", { fill: url("visorShade"), ...part(frame, "visorShade") }), _jsx("path", { fill: url("glass"), ...part(frame, "glass") }), _jsx("path", { fill: url("streak"), ...part(frame, "streak") }), _jsx("path", { fill: url("sole"), ...part(frame, "sole") }), _jsx("path", { fill: "none", stroke: WHITE, strokeOpacity: "0.05", strokeWidth: "0.04", ...part(frame, "visorEdge") })] }), renderEye("L"), renderEye("R"), [0, 1, 2].map((i) => (_jsx("rect", { fill: eye, height: "0.024", rx: "0.012", width: "0.047", ...part(frame, `tick${i}`) }, i)))] })] }), _jsxs("g", { ...part(frame, "blockedBar"), children: [_jsx("rect", { fill: nadia ? "var(--nc-forma-avorio)" : pigment, height: "1.664", rx: "0.112", transform: "rotate(45)", width: "0.224", x: "-0.112", y: "-0.832" }), nadia ? null : (_jsx("rect", { fill: "var(--nc-forma-sabbia)", height: "1.664", opacity: "0.28", rx: "0.112", transform: "rotate(45)", width: "0.224", x: "-0.112", y: "-0.832" })), _jsx("rect", { fill: url("bar"), height: "1.664", rx: "0.112", transform: "rotate(45)", width: "0.224", x: "-0.112", y: "-0.832" })] })] }), _jsxs("g", { ...part(frame, "effectsFront"), children: [renderOrbitDots("Front"), [0, 1, 2].map((i) => (_jsxs("g", { ...part(frame, `thought${i}`), children: [_jsx("circle", { fill: pigment, r: (0.042 + i * 0.015).toFixed(3) }), _jsx("circle", { fill: url("bead"), r: (0.042 + i * 0.015).toFixed(3) })] }, i))), RIBBON_TILTS.map((tilt, index) => {
+                                    const ribbon = `var(${formaColorVariable[celebrationColors[shade][index]]})`;
+                                    return (_jsx("g", { transform: `rotate(${tilt})`, ...part(frame, `ribbon${index}Plane`), children: _jsxs("g", { ...part(frame, `ribbon${index}Sweep`), children: [_jsx("path", { fill: "none", stroke: ribbon, strokeLinecap: "round", strokeWidth: "0.024", ...part(frame, `ribbon${index}Arc`) }), _jsx("circle", { fill: ribbon, r: "0.03", ...part(frame, `ribbon${index}Head`) }), Array.from({ length: RIBBON_BEADS }, (_, i) => (_jsx("circle", { fill: ribbon, ...part(frame, `ribbon${index}Bead${i}`) }, i)))] }) }, index));
+                                })] })] })] }) }));
+}
+export { FormaAvatar, };
+export { defaultForm, formDetails, formaChoices, formaColorVariable, formaColors, formaForms, formaStates, } from "../internal/forma/model.js";

package/dist/hooks/use-confirm-action.d.ts

@@ -1,9 +1,3 @@
-export interface ConfirmActionGate {
-    busy: boolean;
-}
-export declare function requestConfirmAction<T>(gate: ConfirmActionGate, value: T, setPending: (value: T | null) => void): void;
-export declare function cancelConfirmAction<T>(gate: ConfirmActionGate, setPending: (value: T | null) => void): void;
-export declare function runConfirmAction<T>(gate: ConfirmActionGate, pending: T | null, onConfirm: (value: T) => void | Promise<void>, setPending: (value: T | null) => void, setBusy: (busy: boolean) => void): Promise<void>;
 export declare function useConfirmAction<T>({ onConfirm, }: {
     onConfirm: (value: T) => void | Promise<void>;
 }): {

package/dist/hooks/use-confirm-action.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-confirm-action.d.ts","sourceRoot":"","sources":["../../src/hooks/use-confirm-action.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,OAAO,CAAC;CACf;AAID,wBAAgB,oBAAoB,CAAC,CAAC,EACpC,IAAI,EAAE,iBAAiB,EACvB,KAAK,EAAE,CAAC,EACR,UAAU,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,GACpC,IAAI,CAKN;AAID,wBAAgB,mBAAmB,CAAC,CAAC,EACnC,IAAI,EAAE,iBAAiB,EACvB,UAAU,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,GACpC,IAAI,CAKN;AAKD,wBAAsB,gBAAgB,CAAC,CAAC,EACtC,IAAI,EAAE,iBAAiB,EACvB,OAAO,EAAE,CAAC,GAAG,IAAI,EACjB,SAAS,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,EAC7C,UAAU,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,EACrC,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,GAC/B,OAAO,CAAC,IAAI,CAAC,CAef;AAED,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,EAClC,SAAS,GACV,EAAE;IACD,SAAS,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/C;8BAK2C,CAAC;;;;;;EAqB5C"}
+{"version":3,"file":"use-confirm-action.d.ts","sourceRoot":"","sources":["../../src/hooks/use-confirm-action.ts"],"names":[],"mappings":"AAwDA,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,EAClC,SAAS,GACV,EAAE;IACD,SAAS,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/C;8BAK2C,CAAC;;;;;;EAqB5C"}

package/dist/hooks/use-confirm-action.js

@@ -1,25 +1,18 @@
 "use client";
 import * as React from "react";
-// Request stages a value for confirmation; ignored while a confirm is in
-// flight so the pending value cannot change under a running action.
-export function requestConfirmAction(gate, value, setPending) {
+function requestConfirmAction(gate, value, setPending) {
     if (gate.busy) {
         return;
     }
     setPending(value);
 }
-// Cancel clears the pending value, but is a no-op while a confirm is in flight
-// so the dialog cannot be dismissed mid-action.
-export function cancelConfirmAction(gate, setPending) {
+function cancelConfirmAction(gate, setPending) {
     if (gate.busy) {
         return;
     }
     setPending(null);
 }
-// Confirm marks busy, awaits `onConfirm`, and clears the pending value on
-// success. A thrown error is swallowed so the dialog stays open (the caller
-// surfaces the error inside `onConfirm`); busy always resets in `finally`.
-export async function runConfirmAction(gate, pending, onConfirm, setPending, setBusy) {
+async function confirmOrKeepOpen(gate, pending, onConfirm, setPending, setBusy) {
     if (gate.busy || pending === null) {
         return;
     }
@@ -30,7 +23,7 @@ export async function runConfirmAction(gate, pending, onConfirm, setPending, set
         setPending(null);
     }
     catch {
-        // Keep the pending value so the dialog stays open.
+        return;
     }
     finally {
         gate.busy = false;
@@ -47,7 +40,7 @@ export function useConfirmAction({ onConfirm, }) {
     const cancel = React.useCallback(() => {
         cancelConfirmAction(gateRef.current, setPending);
     }, []);
-    const confirm = React.useCallback(() => runConfirmAction(gateRef.current, pending, onConfirm, setPending, setIsBusy), [pending, onConfirm]);
+    const confirm = React.useCallback(() => confirmOrKeepOpen(gateRef.current, pending, onConfirm, setPending, setIsBusy), [pending, onConfirm]);
     return {
         request,
         cancel,

package/dist/index.d.ts

@@ -60,6 +60,7 @@ export * from "./components/field.js";
 export * from "./components/file-type-icon.js";
 export * from "./components/footer.js";
 export * from "./components/form.js";
+export * from "./components/forma-avatar.js";
 export * from "./components/glyph-spinner.js";
 export * from "./components/glass-control.js";
 export * from "./components/handoff-banner.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -60,6 +60,7 @@ export * from "./components/field.js";
 export * from "./components/file-type-icon.js";
 export * from "./components/footer.js";
 export * from "./components/form.js";
+export * from "./components/forma-avatar.js";
 export * from "./components/glyph-spinner.js";
 export * from "./components/glass-control.js";
 export * from "./components/handoff-banner.js";

package/dist/internal/forma/frame.d.ts

@@ -0,0 +1,10 @@
+import { type FormaMotion, type Pose } from "./motion.js";
+export type PartAttributes = Record<string, string>;
+export type Frame = Record<string, PartAttributes>;
+export declare const SHELL_LAYERS: readonly ["tone", "form", "floor", "key", "rim"];
+export declare const ORBIT_DOTS = 20;
+export declare const RIBBON_BEADS = 8;
+export declare function computeFrame(motion: FormaMotion, pose: Pose, now: number): Frame;
+export declare const RIBBON_TILTS: (48 | -22 | -64)[];
+export declare const ORBIT_TILTS: readonly [-0.36, 0.49];
+//# sourceMappingURL=frame.d.ts.map

package/dist/internal/forma/frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame.d.ts","sourceRoot":"","sources":["../../../src/internal/forma/frame.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAsB,KAAK,WAAW,EAAE,KAAK,IAAI,EAAE,MAAM,UAAU,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AACpD,MAAM,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;AAanD,eAAO,MAAM,YAAY,kDAAmD,CAAC;AAY7E,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,YAAY,IAAI,CAAC;AAE9B,wBAAgB,YAAY,CAAC,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,KAAK,CAyGhF;AAOD,eAAO,MAAM,YAAY,oBAAuC,CAAC;AACjE,eAAO,MAAM,WAAW,wBAAyB,CAAC"}

package/dist/internal/forma/frame.js

@@ -0,0 +1,211 @@
+import { TAU, bodies, closedPath, eyeProfiles, f3, project, shellPath, smooth, stripePath, superellipse, visorPoints, } from "./geometry.js";
+import { HALLMARK_LONGITUDE, HALLMARK_SIZE, ITALY_BOX } from "./hallmark.js";
+import { formDetails } from "./model.js";
+import { easeInOut, easeOut } from "./motion.js";
+const eyeShapes = new Map();
+function eyeShape(form) {
+    let shape = eyeShapes.get(form);
+    if (!shape) {
+        const profile = eyeProfiles[form];
+        shape = closedPath(superellipse(profile.width, profile.height, profile.power, 32));
+        eyeShapes.set(form, shape);
+    }
+    return shape;
+}
+export const SHELL_LAYERS = ["tone", "form", "floor", "key", "rim"];
+const VISOR_LAYERS = [
+    "visor",
+    "visorClip",
+    "bezel",
+    "bezelLight",
+    "visorShade",
+    "glass",
+    "streak",
+    "sole",
+    "visorEdge",
+];
+export const ORBIT_DOTS = 20;
+export const RIBBON_BEADS = 8;
+export function computeFrame(motion, pose, now) {
+    const body = bodies[motion.form];
+    const nadia = motion.form === "nadia";
+    const t = (now - motion.entered) / 1000;
+    const morph = pose.morph < 0.00005 ? 0 : pose.morph > 0.99995 ? 1 : pose.morph;
+    const { yaw, pitch } = pose;
+    const frame = {};
+    const shell = shellPath(body, morph);
+    frame.shell = { d: shell };
+    frame.shellClip = { d: shell };
+    for (const layer of SHELL_LAYERS)
+        frame[layer] = { d: shell };
+    frame.tube = { d: shell, opacity: f3(morph) };
+    frame.hot = { opacity: f3(1 - morph * 0.6) };
+    frame.fade = { d: shell, opacity: f3(nadia ? 0 : morph * 0.28) };
+    frame.object = {
+        transform: `translate(0 ${f3(pose.lift)}) rotate(${f3((pose.roll * 180) / Math.PI)}) scale(${f3(1 / Math.sqrt(pose.stretch))} ${f3(pose.stretch)})`,
+    };
+    frame.blockedBar = { opacity: f3(morph > 0.42 ? smooth((morph - 0.42) / 0.4) : 0) };
+    if (nadia) {
+        frame.bandW = { d: stripePath(body, yaw, -0.36, 0.36) };
+        frame.bandR = { d: stripePath(body, yaw, 0.36, Math.PI) };
+        frame.bandSand = { d: frame.bandW.d, opacity: f3(morph * 0.28) };
+    }
+    const faceOpacity = 1 - smooth(morph / 0.52);
+    frame.face = { opacity: f3(faceOpacity), display: faceOpacity > 0.001 ? "" : "none" };
+    const visor = closedPath(visorPoints.map(([x, y]) => {
+        const p = project(body, x, y, yaw, pitch);
+        return [p.x, p.y];
+    }));
+    for (const layer of VISOR_LAYERS)
+        frame[layer] = { d: visor };
+    if (nadia) {
+        const hm = project(body, Math.sin(HALLMARK_LONGITUDE), -0.12, yaw, pitch);
+        const scale = HALLMARK_SIZE / ITALY_BOX;
+        frame.hallmark = {
+            display: hm.front && faceOpacity > 0.001 ? "" : "none",
+            transform: `translate(${f3(hm.x)} ${f3(hm.y)}) scale(${f3(hm.sx * scale)} ${f3(-hm.sy * scale)}) translate(${-ITALY_BOX / 2} ${-ITALY_BOX / 2})`,
+        };
+    }
+    const happiness = smooth(pose.done);
+    const pauseAmount = smooth((pose.waiting - 0.15) / 0.85);
+    const blinkPhase = ((t % 5.2) - 3.4) / 0.16;
+    const blink = !motion.still &&
+        motion.state !== "blocked" &&
+        motion.state !== "waiting" &&
+        blinkPhase > 0 &&
+        blinkPhase < 1
+        ? 1 - Math.sin(blinkPhase * Math.PI)
+        : 1;
+    const eyeOpen = Math.max(0.055, pose.open * blink);
+    const profile = eyeProfiles[motion.form];
+    const glow = formDetails[motion.form].eyes === "ink" ? 0 : profile.signature ? 0.95 : 0.65;
+    const shape = eyeShape(motion.form);
+    for (const [name, side] of [
+        ["L", -1],
+        ["R", 1],
+    ]) {
+        const x = side * ((1 - pauseAmount) * profile.spacing + pauseAmount * 0.125) + pose.gazeX;
+        const y = profile.y + pose.gazeY;
+        const p = project(body, x, y, yaw, pitch);
+        frame[`eye${name}`] = {
+            display: p.front ? "" : "none",
+            transform: `translate(${f3(p.x)} ${f3(p.y)}) scale(${f3(p.sx)} ${f3(p.sy)})`,
+        };
+        frame[`light${name}`] = {
+            d: shape,
+            transform: `scale(1 ${f3(eyeOpen)})`,
+            opacity: f3((1 - happiness) * (1 - pauseAmount)),
+        };
+        frame[`glint${name}`] = frame[`light${name}`];
+        frame[`halo${name}`] = {
+            rx: f3(profile.width * 2.8),
+            ry: f3(profile.height * (1.1 + 0.9 * eyeOpen)),
+            opacity: f3(glow * (1 - pauseAmount) * (1 - happiness)),
+        };
+        if (profile.signature)
+            frame[`flick${name}`] = {
+                transform: `scale(${side} ${f3(eyeOpen)})`,
+                opacity: f3((1 - happiness) * (1 - pauseAmount)),
+            };
+        frame[`happy${name}`] = {
+            opacity: f3(happiness * (1 - pauseAmount)),
+            transform: `rotate(${f3(side * pose.done * 1.7)})`,
+        };
+        frame[`pause${name}`] = { opacity: f3(pauseAmount) };
+        frame[`pauseHalo${name}`] = { opacity: f3(pauseAmount * 0.7) };
+    }
+    for (let i = 0; i < 3; i++) {
+        const pulse = motion.still ? 0.6 : 0.18 + (0.82 * (Math.sin(t * 5.6 - i * 1.25) + 1)) / 2;
+        const p = project(body, (i - 1) * 0.086, -0.266, yaw, pitch);
+        frame[`tick${i}`] = {
+            transform: `translate(${f3(p.x - 0.0235 * p.sx)} ${f3(p.y - 0.012)}) scale(${f3(p.sx)} 1)`,
+            opacity: f3(pose.working * pulse * 0.75 + pose.thinking * pulse * 0.35),
+        };
+    }
+    writeEffects(frame, motion, pose, now);
+    return frame;
+}
+const RIBBONS = [
+    { tilt: -22, aspect: 0.62, radius: 1.2, span: 2.85, phase: 0.2, direction: 1 },
+    { tilt: 48, aspect: 0.5, radius: 1.19, span: 2.5, phase: 2.1, direction: -1 },
+    { tilt: -64, aspect: 0.72, radius: 1.24, span: 2.3, phase: 4.0, direction: 1 },
+];
+export const RIBBON_TILTS = RIBBONS.map((ribbon) => ribbon.tilt);
+export const ORBIT_TILTS = [-0.36, 0.49];
+function writeEffects(frame, motion, pose, now) {
+    const morph = pose.morph < 0.00005 ? 0 : pose.morph > 0.99995 ? 1 : pose.morph;
+    const clock = motion.still ? 0.6 : (now - motion.started) / 1000;
+    const celebrationAge = (now - motion.celebratedAt) / 1000;
+    const celebrating = !motion.still && celebrationAge > 0.14 && celebrationAge < 2.4;
+    const workAmount = pose.working * (1 - morph);
+    const thoughtAmount = pose.thinking * (1 - morph);
+    const ribbonOpacity = celebrating ? pose.done * (1 - morph) : 0;
+    const active = workAmount > 0.003 || thoughtAmount > 0.003 || ribbonOpacity > 0.003;
+    frame.effectsBack = { display: active ? "" : "none" };
+    frame.effectsFront = {
+        display: active ? "" : "none",
+        transform: `translate(0 ${f3(pose.lift * 0.45)})`,
+    };
+    ORBIT_TILTS.forEach((tilt, index) => {
+        for (let i = 0; i < ORBIT_DOTS; i++) {
+            const tail = i % 10;
+            const offset = i < 10 ? 0 : Math.PI;
+            const a = clock * (index === 0 ? 2.8 : -2.2) + index * 2.2 + offset - tail * 0.065;
+            const x = 1.2 * Math.cos(a);
+            const y = 0.49 * Math.sin(a);
+            const front = Math.sin(a) > 0;
+            const dot = {
+                cx: f3(x * Math.cos(tilt) - y * Math.sin(tilt)),
+                cy: f3(x * Math.sin(tilt) + y * Math.cos(tilt) - 0.04),
+                opacity: f3(workAmount * (tail === 0 ? 0.94 : 0.47 * (1 - tail / 10))),
+            };
+            frame[`orbit${index}Back${i}`] = { ...dot, display: front ? "none" : "" };
+            frame[`orbit${index}Front${i}`] = { ...dot, display: front ? "" : "none" };
+        }
+    });
+    for (let i = 0; i < 3; i++) {
+        const pulse = motion.still ? 0.72 : 0.23 + (0.77 * (Math.sin(clock * 2.4 - i * 0.9) + 1)) / 2;
+        frame[`thought${i}`] = {
+            transform: `translate(${f3(0.68 + i * 0.23)} ${f3(0.79 + i * 0.13 + (motion.still ? 0 : 0.025 * Math.sin(clock * 2.4 - i * 0.9)))})`,
+            opacity: f3(thoughtAmount * pulse),
+        };
+    }
+    RIBBONS.forEach((ribbon, index) => {
+        const name = `ribbon${index}`;
+        if (ribbonOpacity <= 0.003) {
+            frame[`${name}Plane`] = { opacity: "0", display: "none" };
+            return;
+        }
+        const age = celebrationAge - 0.14 - index * 0.06;
+        const reveal = easeOut(age / 0.46);
+        const dissolve = easeInOut((age - 1.1) / 0.95);
+        const fade = easeOut(age / 0.2) * (1 - easeOut((age - 1.76) / 0.44)) * ribbonOpacity;
+        const a0 = dissolve * ribbon.span;
+        const a1 = Math.max(a0, reveal * ribbon.span);
+        const points = [];
+        for (let i = 0; i <= 24; i++) {
+            const a = a0 + ((a1 - a0) * i) / 24;
+            points.push(`${i ? "L" : "M"}${f3(Math.cos(a) * ribbon.radius)} ${f3(Math.sin(a) * ribbon.radius * ribbon.aspect)}`);
+        }
+        frame[`${name}Plane`] = { opacity: f3(fade * 0.88), display: "" };
+        frame[`${name}Sweep`] = {
+            transform: `rotate(${f3(((ribbon.phase + ribbon.direction * TAU * easeInOut(Math.min(1, Math.max(0, age / 2.12)))) * 180) / Math.PI)})`,
+        };
+        frame[`${name}Arc`] = { d: a1 > a0 + 0.01 ? points.join("") : "M0 0" };
+        frame[`${name}Head`] = {
+            cx: f3(Math.cos(a1) * ribbon.radius),
+            cy: f3(Math.sin(a1) * ribbon.radius * ribbon.aspect),
+        };
+        for (let i = 0; i < RIBBON_BEADS; i++) {
+            const u = i / 7;
+            const angle = a0 - u * (0.95 + 0.48 * dissolve);
+            const radial = ribbon.radius + ((i % 3) - 1) * (0.014 + 0.034 * u) + dissolve * u * 0.06;
+            frame[`${name}Bead${i}`] = {
+                cx: f3(Math.cos(angle) * radial),
+                cy: f3(Math.sin(angle) * radial * ribbon.aspect),
+                r: f3(0.006 + 0.012 * (1 - u)),
+                opacity: f3(dissolve > 0.01 ? 0.78 : 0),
+            };
+        }
+    });
+}

package/dist/internal/forma/geometry.d.ts

@@ -0,0 +1,41 @@
+import type { FormaForm } from "./model.js";
+export declare const TAU: number;
+export declare const clamp: (value: number, low: number, high: number) => number;
+export declare const mix: (a: number, b: number, t: number) => number;
+export declare const smooth: (t: number) => number;
+export declare const f3: (value: number) => string;
+export type Point = readonly [number, number];
+export interface Body {
+    height: number;
+    width: number;
+    hw: (y: number) => number;
+    outline: readonly Point[];
+    core: {
+        cy: number;
+        r: number;
+    };
+}
+export declare const bodies: Record<FormaForm, Body>;
+export interface EyeProfile {
+    power: number;
+    width: number;
+    height: number;
+    spacing: number;
+    y: number;
+    signature?: boolean;
+}
+export declare const eyeProfiles: Record<FormaForm, EyeProfile>;
+export declare function superellipse(hw: number, hh: number, power: number, n: number): Point[];
+export declare const visorPoints: readonly Point[];
+export declare function closedPath(pts: readonly Point[]): string;
+export interface Projected {
+    x: number;
+    y: number;
+    sx: number;
+    sy: number;
+    front: boolean;
+}
+export declare function project(body: Body, xs: number, ys: number, yaw: number, pitch: number): Projected;
+export declare function shellPath(body: Body, morph: number): string;
+export declare function stripePath(body: Body, yaw: number, a: number, b: number): string;
+//# sourceMappingURL=geometry.d.ts.map

package/dist/internal/forma/geometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.d.ts","sourceRoot":"","sources":["../../../src/internal/forma/geometry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,eAAO,MAAM,GAAG,QAAc,CAAC;AAE/B,eAAO,MAAM,KAAK,GAAI,OAAO,MAAM,EAAE,KAAK,MAAM,EAAE,MAAM,MAAM,KAAG,MAC3B,CAAC;AACvC,eAAO,MAAM,GAAG,GAAI,GAAG,MAAM,EAAE,GAAG,MAAM,EAAE,GAAG,MAAM,KAAG,MAAyB,CAAC;AAChF,eAAO,MAAM,MAAM,GAAI,GAAG,MAAM,KAAG,MAGlC,CAAC;AAGF,eAAO,MAAM,EAAE,GAAI,OAAO,MAAM,KAAG,MAAsD,CAAC;AAE1F,MAAM,MAAM,KAAK,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE9C,MAAM,WAAW,IAAI;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1B,OAAO,EAAE,SAAS,KAAK,EAAE,CAAC;IAC1B,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACjC;AAuGD,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,SAAS,EAAE,IAAI,CAgD1C,CAAC;AAIF,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,CAAC,EAAE,MAAM,CAAC;IACV,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,SAAS,EAAE,UAAU,CASrD,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,KAAK,EAAE,CAOtF;AAED,eAAO,MAAM,WAAW,EAAE,SAAS,KAAK,EAKD,CAAC;AAExC,wBAAgB,UAAU,CAAC,GAAG,EAAE,SAAS,KAAK,EAAE,GAAG,MAAM,CAYxD;AAED,MAAM,WAAW,SAAS;IACxB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,wBAAgB,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAkBjG;AAgCD,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAU3D;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAWhF"}