@nucleux/md3-handwriting 0.0.0-stage → 0.6.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nucleux
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,35 @@
-# Temporary Holding Version
+# @nucleux/md3-handwriting
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Material 3 Handwriting Input — write the request by hand, settle uncertain words, add it yourself — Nucleux agentic UI for React.
+
+Part of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** — agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).
+
+This is the Material 3 twin of [`@nucleux/handwriting`](https://www.npmjs.com/package/@nucleux/handwriting) (`HandwritingInput`). It shares the twin's API exactly — the props types are the twin's own — so you can switch families by changing only the import. Only the look differs: MD3 colour roles, shape, elevation, state layers and motion (stilled under reduced motion).
+
+## Exports
+
+- **`Md3HandwritingInput`** — draw-pad / live-ocr / annotation-stroke; the reading sits under the ink, uncertain words are “?” buttons with an MD3 menu of alternatives, and Add to message waits until they are settled
+- Types: `Md3HandwritingInputProps`, `Md3HandwritingInputVariant`, `Md3HandwritingInputConvert`, `Md3HandwritingInputMode`, `Md3HandwritingInputStatus`, `HandwritingPoint`, `HandwritingStroke`, `HandwritingWord`, `HandwritingRecognition`, `HandwritingRecognizeRequest`, `HandwritingAcceptDetail`
+
+## Install
+
+```bash
+pnpm add @nucleux/md3-handwriting @nucleux/tokens
+```
+
+`react` / `react-dom` are peer dependencies.
+
+## Usage
+
+```tsx
+import { Md3HandwritingInput } from "@nucleux/md3-handwriting";
+
+<Md3HandwritingInput onRecognize={myRecognizer} onAccept={(text) => append(text)} />
+```
+
+Requires the theme once in your app: `import "@nucleux/tokens/styles.css";`
+and the Tailwind preset from `@nucleux/tokens/preset`.
+
+## License
+
+MIT © Nucleux

package/dist/index.cjs

@@ -0,0 +1,598 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var utils = require('@nucleux/utils');
+var md3Button = require('@nucleux/md3-button');
+var md3Chip = require('@nucleux/md3-chip');
+var md3LoadingIndicator = require('@nucleux/md3-loading-indicator');
+var md3Menu = require('@nucleux/md3-menu');
+var md3TextField = require('@nucleux/md3-text-field');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/index.tsx
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+var wordsText = (words) => words.map((w) => w.text).join(" ");
+function UncertainWord({
+  word,
+  onChoose
+}) {
+  const [open, setOpen] = React__namespace.useState(false);
+  const wrapRef = React__namespace.useRef(null);
+  const triggerRef = React__namespace.useRef(null);
+  const menuRef = React__namespace.useRef(null);
+  const menuId = React__namespace.useId();
+  const choices = [word.text, ...word.alternatives ?? []].filter((t, j, all) => all.indexOf(t) === j);
+  React__namespace.useEffect(() => {
+    if (!open) return;
+    requestAnimationFrame(() => menuRef.current?.querySelector('[role="menuitem"]')?.focus());
+    const onDown = (e) => {
+      if (!wrapRef.current?.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("pointerdown", onDown);
+    return () => document.removeEventListener("pointerdown", onDown);
+  }, [open]);
+  const close = () => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  };
+  const onMenuKeyDown = (e) => {
+    const items = Array.from(menuRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
+    const i = items.indexOf(document.activeElement);
+    if (e.key === "Escape" || e.key === "Tab") {
+      if (e.key === "Escape") e.preventDefault();
+      close();
+    } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const step = e.key === "ArrowDown" ? 1 : -1;
+      items[(i + step + items.length) % items.length]?.focus();
+    } else if (e.key === "Home" || e.key === "End") {
+      e.preventDefault();
+      items[e.key === "Home" ? 0 : items.length - 1]?.focus();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { ref: wrapRef, className: "relative inline-flex", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        "aria-label": `${word.text} \u2014 uncertain, choose the right word`,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? menuId : void 0,
+        onClick: () => setOpen((o) => !o),
+        onKeyDown: (e) => {
+          if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setOpen(true);
+          }
+        },
+        className: utils.cn(
+          "relative inline-flex h-8 items-center gap-0.5 overflow-hidden rounded-md-sm px-1.5 text-sm text-md-on-surface",
+          "underline decoration-md-error decoration-dotted decoration-2 underline-offset-4",
+          "before:absolute before:inset-0 before:bg-md-primary before:opacity-0 before:transition-opacity before:content-['']",
+          "hover:before:opacity-[0.08] focus-visible:before:opacity-[0.12] active:before:opacity-[0.12]",
+          "outline-none focus-visible:ring-2 focus-visible:ring-md-primary",
+          "transition-transform duration-200 active:scale-95 motion-reduce:transition-none"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative", children: word.text }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "relative font-semibold text-md-error no-underline", children: "?" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsxs(
+      md3Menu.Md3Menu,
+      {
+        ref: menuRef,
+        id: menuId,
+        "aria-label": "Did you write\u2026",
+        onKeyDown: onMenuKeyDown,
+        className: "absolute left-0 top-full z-50 mt-1 animate-nx-fade-in motion-reduce:animate-none",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "block px-3 pb-1 pt-1 text-xs font-medium text-md-on-surface-variant", children: "Did you write\u2026" }),
+          choices.map((alt) => /* @__PURE__ */ jsxRuntime.jsx(
+            md3Menu.Md3MenuItem,
+            {
+              tabIndex: -1,
+              onClick: () => {
+                onChoose(alt);
+                setOpen(false);
+              },
+              children: alt
+            },
+            alt
+          ))
+        ]
+      }
+    )
+  ] });
+}
+var Md3HandwritingInput = React__namespace.forwardRef(
+  ({
+    variant = "draw-pad",
+    onRecognize,
+    convert,
+    autoDelay = 900,
+    onAccept,
+    strokes: strokesProp,
+    defaultStrokes,
+    onStrokesChange,
+    defaultRecognition,
+    defaultMode = "draw",
+    strokeWidth = variant === "annotation-stroke" ? 3 : 2.5,
+    label = "Handwriting pad",
+    placeholder,
+    statusText = "Recognising your writing\u2026",
+    failureText = "Couldn\u2019t recognise this writing.",
+    acceptLabel = "Add to message",
+    typingLabel = "Type your request",
+    disabled = false,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const mode = convert ?? (variant === "live-ocr" ? "auto" : "review");
+    const isAnnotation = variant === "annotation-stroke";
+    const [internalStrokes, setInternalStrokes] = React__namespace.useState(defaultStrokes ?? []);
+    const strokes = strokesProp ?? internalStrokes;
+    const [inputMode, setInputMode] = React__namespace.useState(defaultMode);
+    const [status, setStatus] = React__namespace.useState(defaultRecognition ? "recognized" : "idle");
+    const [recognition, setRecognition] = React__namespace.useState(defaultRecognition ?? null);
+    const [words, setWords] = React__namespace.useState(defaultRecognition?.words ?? null);
+    const [editedText, setEditedText] = React__namespace.useState(null);
+    const [typed, setTyped] = React__namespace.useState("");
+    const [announcement, setAnnouncement] = React__namespace.useState("");
+    const canvasRef = React__namespace.useRef(null);
+    const padRef = React__namespace.useRef(null);
+    const drawing = React__namespace.useRef(null);
+    const requestId = React__namespace.useRef(0);
+    const strokesRef = React__namespace.useRef(strokes);
+    strokesRef.current = strokes;
+    const resultId = React__namespace.useId();
+    const resultInputRef = React__namespace.useRef(null);
+    const setStrokes = (next) => {
+      if (strokesProp === void 0) setInternalStrokes(next);
+      onStrokesChange?.(next);
+    };
+    const widthFor = (stroke, p) => stroke.pointerType === "pen" && p.pressure > 0 ? strokeWidth * (0.4 + p.pressure * 1.2) : strokeWidth;
+    const noCanvas = React__namespace.useRef(false);
+    const getContext = () => {
+      const canvas = canvasRef.current;
+      if (!canvas || noCanvas.current) return null;
+      let ctx = null;
+      try {
+        ctx = canvas.getContext("2d");
+      } catch {
+        ctx = null;
+      }
+      if (!ctx) {
+        noCanvas.current = true;
+        return null;
+      }
+      const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      const color = typeof getComputedStyle === "function" ? getComputedStyle(canvas).color : "";
+      ctx.strokeStyle = color || "currentColor";
+      ctx.fillStyle = ctx.strokeStyle;
+      return ctx;
+    };
+    const drawSegment = (ctx, stroke, a, b) => {
+      ctx.lineWidth = widthFor(stroke, b);
+      ctx.beginPath();
+      ctx.moveTo(a.x, a.y);
+      ctx.lineTo(b.x, b.y);
+      ctx.stroke();
+    };
+    const drawDot = (ctx, stroke, p) => {
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, widthFor(stroke, p) / 2, 0, Math.PI * 2);
+      ctx.fill();
+    };
+    const redraw = React__namespace.useCallback(() => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = getContext();
+      if (!ctx) return;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      for (const stroke of strokesRef.current) {
+        const pts = stroke.points;
+        if (pts.length === 1) drawDot(ctx, stroke, pts[0]);
+        for (let i = 1; i < pts.length; i++) drawSegment(ctx, stroke, pts[i - 1], pts[i]);
+      }
+    }, [strokeWidth]);
+    React__namespace.useEffect(() => {
+      const pad = padRef.current;
+      const canvas = canvasRef.current;
+      if (!pad || !canvas || typeof ResizeObserver === "undefined") return;
+      const ro = new ResizeObserver(() => {
+        const rect = pad.getBoundingClientRect();
+        if (!rect.width || !rect.height) return;
+        const dpr = window.devicePixelRatio || 1;
+        canvas.width = Math.round(rect.width * dpr);
+        canvas.height = Math.round(rect.height * dpr);
+        redraw();
+      });
+      ro.observe(pad);
+      return () => ro.disconnect();
+    }, [redraw, inputMode]);
+    const hasDrawn = React__namespace.useRef(false);
+    useIsomorphicLayoutEffect(() => {
+      if (strokes.length === 0 && !hasDrawn.current) return;
+      hasDrawn.current = true;
+      redraw();
+    }, [strokes, redraw]);
+    const pointFrom = (e) => {
+      const rect = canvasRef.current.getBoundingClientRect();
+      return {
+        x: (e.clientX ?? 0) - rect.left,
+        y: (e.clientY ?? 0) - rect.top,
+        pressure: typeof e.pressure === "number" && e.pressure > 0 ? e.pressure : 0.5,
+        t: e.timeStamp ?? Date.now()
+      };
+    };
+    const onPointerDown = (e) => {
+      if (disabled || status === "recognizing") return;
+      if (e.pointerType === "mouse" && e.button !== 0) return;
+      e.preventDefault();
+      e.currentTarget.setPointerCapture?.(e.pointerId);
+      const stroke = { pointerType: e.pointerType || "mouse", points: [pointFrom(e)] };
+      drawing.current = stroke;
+      const ctx = getContext();
+      if (ctx) drawDot(ctx, stroke, stroke.points[0]);
+    };
+    const onPointerMove = (e) => {
+      const stroke = drawing.current;
+      if (!stroke) return;
+      const native = e.nativeEvent;
+      const events = native.getCoalescedEvents?.() ?? [];
+      const ctx = getContext();
+      for (const ev of events.length ? events : [native]) {
+        const p = pointFrom(ev);
+        const prev = stroke.points[stroke.points.length - 1];
+        stroke.points.push(p);
+        if (ctx) drawSegment(ctx, stroke, prev, p);
+      }
+    };
+    const endStroke = () => {
+      const stroke = drawing.current;
+      if (!stroke) return;
+      drawing.current = null;
+      setStrokes([...strokesRef.current, stroke]);
+    };
+    const toImage = (type = "image/png") => new Promise((resolve) => {
+      const canvas = canvasRef.current;
+      if (!canvas || typeof canvas.toBlob !== "function") return resolve(null);
+      try {
+        canvas.toBlob((blob) => resolve(blob), type);
+      } catch {
+        resolve(null);
+      }
+    });
+    const applyRecognition = (result) => {
+      setRecognition(result);
+      setWords(result.words ?? null);
+      setEditedText(null);
+      setStatus("recognized");
+      const unsure = result.words?.filter((w) => w.uncertain).length ?? 0;
+      setAnnouncement(
+        `Recognised: ${result.words ? wordsText(result.words) : result.text}.` + (unsure ? ` ${unsure} ${unsure === 1 ? "word needs" : "words need"} checking.` : "")
+      );
+    };
+    const recognize = async () => {
+      if (!onRecognize || strokesRef.current.length === 0) return;
+      const id = ++requestId.current;
+      setStatus("recognizing");
+      setAnnouncement(typeof statusText === "string" ? statusText : "Recognising your writing\u2026");
+      const rect = padRef.current?.getBoundingClientRect();
+      try {
+        const result = await onRecognize({
+          strokes: strokesRef.current,
+          width: rect?.width ?? 0,
+          height: rect?.height ?? 0,
+          toImage
+        });
+        if (id !== requestId.current) return;
+        applyRecognition(result);
+      } catch {
+        if (id !== requestId.current) return;
+        setStatus("error");
+        setAnnouncement(typeof failureText === "string" ? failureText : "Couldn\u2019t recognise this writing.");
+      }
+    };
+    const prevStrokes = React__namespace.useRef(strokes);
+    React__namespace.useEffect(() => {
+      if (prevStrokes.current === strokes) return;
+      prevStrokes.current = strokes;
+      requestId.current += 1;
+      if (strokes.length === 0) {
+        setStatus("idle");
+        setRecognition(null);
+        setWords(null);
+        setEditedText(null);
+        return;
+      }
+      if (mode === "auto" && onRecognize) {
+        const timer = setTimeout(() => void recognize(), autoDelay);
+        return () => clearTimeout(timer);
+      }
+      setStatus("idle");
+      setRecognition(null);
+      setWords(null);
+      setEditedText(null);
+    }, [strokes]);
+    const unsettled = editedText === null && !!words?.some((w) => w.uncertain);
+    const resultText = editedText ?? (words ? wordsText(words) : recognition?.text ?? "");
+    const settleWord = (index, text) => {
+      if (!words) return;
+      const next = words.map((w, i) => i === index ? { text, uncertain: false } : w);
+      setWords(next);
+      const left = next.filter((w) => w.uncertain).length;
+      if (!left) requestAnimationFrame(() => resultInputRef.current?.focus());
+      setAnnouncement(`\u201C${text}\u201D chosen.${left ? ` ${left} still to check.` : " Ready to add."}`);
+    };
+    const reset = () => {
+      requestId.current += 1;
+      setStrokes([]);
+      setStatus("idle");
+      setRecognition(null);
+      setWords(null);
+      setEditedText(null);
+    };
+    const accept = () => {
+      if (inputMode === "type") {
+        const text = typed.trim();
+        if (!text) return;
+        onAccept?.(text, { source: "typed", strokes: [] });
+        setTyped("");
+      } else {
+        const text = resultText.trim();
+        if (!text || unsettled) return;
+        onAccept?.(text, { source: "handwriting", strokes, recognition: recognition ?? void 0 });
+        reset();
+      }
+      setAnnouncement("Added to message.");
+    };
+    const undoStroke = () => setStrokes(strokes.slice(0, -1));
+    const setRef = (node) => {
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const emptyHint = placeholder ?? (isAnnotation ? "Draw on the content to mark what you mean" : "Draw or write\u2026");
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: setRef,
+        role: "group",
+        "aria-label": isAnnotation ? "Annotation input" : "Handwriting input",
+        "data-variant": variant,
+        "data-status": status,
+        className: utils.cn("flex flex-col gap-3 text-md-on-surface", className),
+        ...props,
+        children: [
+          inputMode === "type" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              "aria-label": typingLabel,
+              placeholder: typingLabel,
+              value: typed,
+              onChange: (e) => setTyped(e.target.value),
+              disabled,
+              rows: 3,
+              className: utils.cn(
+                "w-full resize-none rounded-md-xs border border-md-outline bg-transparent px-4 py-3 text-base text-md-on-surface outline-none transition-colors",
+                "placeholder:text-md-on-surface-variant focus:border-2 focus:border-md-primary focus:px-[15px] focus:py-[11px]",
+                "disabled:cursor-not-allowed disabled:opacity-[0.38]"
+              )
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: padRef,
+              className: utils.cn(
+                "relative overflow-hidden rounded-md-lg",
+                isAnnotation ? "min-h-40 border border-md-outline-variant" : "h-44 border-[1.5px] border-dashed border-md-outline bg-md-surface-container-low",
+                variant === "live-ocr" && "h-36 border border-solid border-md-outline-variant",
+                disabled && "opacity-[0.38]"
+              ),
+              "aria-busy": status === "recognizing" || void 0,
+              children: [
+                isAnnotation && children,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "canvas",
+                  {
+                    ref: canvasRef,
+                    role: "img",
+                    "aria-label": `${label}${strokes.length ? ` \u2014 ${strokes.length} ${strokes.length === 1 ? "stroke" : "strokes"}` : " \u2014 empty"}`,
+                    onPointerDown,
+                    onPointerMove,
+                    onPointerUp: endStroke,
+                    onPointerCancel: endStroke,
+                    className: utils.cn(
+                      "absolute inset-0 size-full touch-none",
+                      disabled ? "cursor-not-allowed" : "cursor-crosshair",
+                      isAnnotation ? "text-md-error" : "text-md-on-surface"
+                    )
+                  }
+                ),
+                strokes.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    "aria-hidden": "true",
+                    className: utils.cn(
+                      "pointer-events-none absolute text-xs text-md-on-surface-variant",
+                      isAnnotation ? "bottom-2 right-2 rounded-full bg-md-surface-container-high px-2.5 py-1 font-medium" : "inset-x-0 bottom-3 text-center"
+                    ),
+                    children: emptyHint
+                  }
+                ),
+                isAnnotation && status === "recognized" && resultText && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "pointer-events-none absolute bottom-2 right-2 rounded-full bg-md-surface-container-high px-2.5 py-1 text-xs font-medium text-md-on-surface shadow-md-1",
+                    children: [
+                      "\u201C",
+                      resultText,
+                      "\u201D"
+                    ]
+                  }
+                ),
+                status === "recognizing" && // A slow, low-contrast sheen while the ink is read; the ink stays visible beneath it.
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "pointer-events-none absolute inset-0 animate-pulse bg-md-primary/[0.08] motion-reduce:animate-none"
+                  }
+                )
+              ]
+            }
+          ),
+          inputMode === "draw" && status === "recognizing" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-md-on-surface-variant", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(md3LoadingIndicator.Md3LoadingIndicator, { size: 24, "aria-hidden": "true" }),
+            statusText
+          ] }),
+          inputMode === "draw" && status === "error" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 rounded-md-md bg-md-error-container px-3 py-2.5 text-md-on-error-container", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2 text-sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "size-[18px] shrink-0", "aria-hidden": "true" }),
+              failureText,
+              " Your writing is kept."
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(md3Button.Md3Button, { variant: "filled", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { "aria-hidden": "true" }), onClick: () => void recognize(), children: "Retry" }),
+              /* @__PURE__ */ jsxRuntime.jsx(md3Button.Md3Button, { variant: "text", onClick: reset, className: "text-md-on-error-container", children: "Rewrite" })
+            ] })
+          ] }),
+          inputMode === "draw" && status === "recognized" && recognition && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              id: resultId,
+              className: "flex flex-col gap-2 border-t border-md-outline-variant pt-3",
+              "data-slot": "handwriting-result",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium tracking-[0.5px] text-md-on-surface-variant", children: isAnnotation ? "Read as an instruction" : "Recognised" }),
+                unsettled && words ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-1 text-base text-md-on-surface", children: words.map(
+                    (w, i) => w.uncertain ? /* @__PURE__ */ jsxRuntime.jsx(UncertainWord, { word: w, onChoose: (text) => settleWord(i, text) }, i) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-nx-fade-in motion-reduce:animate-none", children: w.text }, i)
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-md-on-surface-variant", children: [
+                    "Check the words marked \u201C?\u201D to add this to your message.",
+                    " ",
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setEditedText(resultText),
+                        className: "rounded-md-xs font-medium text-md-primary underline-offset-2 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-md-primary",
+                        children: "Edit text instead"
+                      }
+                    )
+                  ] })
+                ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+                  md3TextField.Md3TextField,
+                  {
+                    ref: resultInputRef,
+                    label: "Recognised text",
+                    value: resultText,
+                    onChange: (e) => setEditedText(e.target.value),
+                    disabled
+                  }
+                ),
+                !unsettled && recognition.alternatives && recognition.alternatives.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", role: "group", "aria-label": "Other readings", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-md-on-surface-variant", children: "Other readings:" }),
+                  recognition.alternatives.map((alt) => /* @__PURE__ */ jsxRuntime.jsx(md3Chip.Md3Chip, { variant: "filter", selected: resultText === alt, onClick: () => setEditedText(alt), children: alt }, alt))
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-1", children: [
+            inputMode === "draw" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                md3Button.Md3Button,
+                {
+                  variant: "text",
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Undo2, { "aria-hidden": "true" }),
+                  onClick: undoStroke,
+                  disabled: disabled || strokes.length === 0 || status === "recognizing",
+                  children: "Undo stroke"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                md3Button.Md3Button,
+                {
+                  variant: "text",
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eraser, { "aria-hidden": "true" }),
+                  onClick: reset,
+                  disabled: disabled || strokes.length === 0,
+                  children: "Clear"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              md3Button.Md3Button,
+              {
+                variant: "text",
+                icon: inputMode === "draw" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Keyboard, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PenLine, { "aria-hidden": "true" }),
+                onClick: () => setInputMode(inputMode === "draw" ? "type" : "draw"),
+                disabled,
+                children: inputMode === "draw" ? "Type instead" : "Write instead"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1" }),
+            inputMode === "draw" && onRecognize && (status !== "recognized" || mode === "review") && /* @__PURE__ */ jsxRuntime.jsx(
+              md3Button.Md3Button,
+              {
+                variant: "tonal",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ScanText, { "aria-hidden": "true" }),
+                onClick: () => void recognize(),
+                disabled: disabled || strokes.length === 0 || status === "recognizing",
+                children: "Recognise"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              md3Button.Md3Button,
+              {
+                variant: "filled",
+                onClick: accept,
+                disabled: disabled || (inputMode === "type" ? !typed.trim() : status !== "recognized" || unsettled || !resultText.trim()),
+                "aria-describedby": inputMode === "draw" && status === "recognized" ? resultId : void 0,
+                children: acceptLabel
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", "aria-live": "polite", className: "sr-only", children: announcement })
+        ]
+      }
+    );
+  }
+);
+Md3HandwritingInput.displayName = "Md3HandwritingInput";
+
+exports.Md3HandwritingInput = Md3HandwritingInput;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map