@nucleux/md3-handwriting 0.0.0-stage → 0.6.0

package/dist/index.js

@@ -0,0 +1,576 @@
+"use client";
+import * as React from 'react';
+import { cn } from '@nucleux/utils';
+import { Md3Button } from '@nucleux/md3-button';
+import { Md3Chip } from '@nucleux/md3-chip';
+import { Md3LoadingIndicator } from '@nucleux/md3-loading-indicator';
+import { Md3Menu, Md3MenuItem } from '@nucleux/md3-menu';
+import { Md3TextField } from '@nucleux/md3-text-field';
+import { AlertCircle, RotateCcw, Undo2, Eraser, Keyboard, PenLine, ScanText } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/index.tsx
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+var wordsText = (words) => words.map((w) => w.text).join(" ");
+function UncertainWord({
+  word,
+  onChoose
+}) {
+  const [open, setOpen] = React.useState(false);
+  const wrapRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
+  const menuRef = React.useRef(null);
+  const menuId = React.useId();
+  const choices = [word.text, ...word.alternatives ?? []].filter((t, j, all) => all.indexOf(t) === j);
+  React.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__ */ jsxs("span", { ref: wrapRef, className: "relative inline-flex", children: [
+    /* @__PURE__ */ 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: 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__ */ jsx("span", { className: "relative", children: word.text }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "relative font-semibold text-md-error no-underline", children: "?" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs(
+      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__ */ 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__ */ jsx(
+            Md3MenuItem,
+            {
+              tabIndex: -1,
+              onClick: () => {
+                onChoose(alt);
+                setOpen(false);
+              },
+              children: alt
+            },
+            alt
+          ))
+        ]
+      }
+    )
+  ] });
+}
+var Md3HandwritingInput = React.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.useState(defaultStrokes ?? []);
+    const strokes = strokesProp ?? internalStrokes;
+    const [inputMode, setInputMode] = React.useState(defaultMode);
+    const [status, setStatus] = React.useState(defaultRecognition ? "recognized" : "idle");
+    const [recognition, setRecognition] = React.useState(defaultRecognition ?? null);
+    const [words, setWords] = React.useState(defaultRecognition?.words ?? null);
+    const [editedText, setEditedText] = React.useState(null);
+    const [typed, setTyped] = React.useState("");
+    const [announcement, setAnnouncement] = React.useState("");
+    const canvasRef = React.useRef(null);
+    const padRef = React.useRef(null);
+    const drawing = React.useRef(null);
+    const requestId = React.useRef(0);
+    const strokesRef = React.useRef(strokes);
+    strokesRef.current = strokes;
+    const resultId = React.useId();
+    const resultInputRef = React.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.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.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.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.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.useRef(strokes);
+    React.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__ */ jsxs(
+      "div",
+      {
+        ref: setRef,
+        role: "group",
+        "aria-label": isAnnotation ? "Annotation input" : "Handwriting input",
+        "data-variant": variant,
+        "data-status": status,
+        className: cn("flex flex-col gap-3 text-md-on-surface", className),
+        ...props,
+        children: [
+          inputMode === "type" ? /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              "aria-label": typingLabel,
+              placeholder: typingLabel,
+              value: typed,
+              onChange: (e) => setTyped(e.target.value),
+              disabled,
+              rows: 3,
+              className: 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__ */ jsxs(
+            "div",
+            {
+              ref: padRef,
+              className: 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__ */ 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: 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__ */ jsx(
+                  "p",
+                  {
+                    "aria-hidden": "true",
+                    className: 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__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-md-on-surface-variant", children: [
+            /* @__PURE__ */ jsx(Md3LoadingIndicator, { size: 24, "aria-hidden": "true" }),
+            statusText
+          ] }),
+          inputMode === "draw" && status === "error" && /* @__PURE__ */ 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__ */ jsxs("p", { className: "flex items-center gap-2 text-sm", children: [
+              /* @__PURE__ */ jsx(AlertCircle, { className: "size-[18px] shrink-0", "aria-hidden": "true" }),
+              failureText,
+              " Your writing is kept."
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+              /* @__PURE__ */ jsx(Md3Button, { variant: "filled", icon: /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true" }), onClick: () => void recognize(), children: "Retry" }),
+              /* @__PURE__ */ jsx(Md3Button, { variant: "text", onClick: reset, className: "text-md-on-error-container", children: "Rewrite" })
+            ] })
+          ] }),
+          inputMode === "draw" && status === "recognized" && recognition && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              id: resultId,
+              className: "flex flex-col gap-2 border-t border-md-outline-variant pt-3",
+              "data-slot": "handwriting-result",
+              children: [
+                /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1 text-base text-md-on-surface", children: words.map(
+                    (w, i) => w.uncertain ? /* @__PURE__ */ jsx(UncertainWord, { word: w, onChoose: (text) => settleWord(i, text) }, i) : /* @__PURE__ */ jsx("span", { className: "animate-nx-fade-in motion-reduce:animate-none", children: w.text }, i)
+                  ) }),
+                  /* @__PURE__ */ jsxs("p", { className: "text-xs text-md-on-surface-variant", children: [
+                    "Check the words marked \u201C?\u201D to add this to your message.",
+                    " ",
+                    /* @__PURE__ */ 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__ */ jsx(
+                  Md3TextField,
+                  {
+                    ref: resultInputRef,
+                    label: "Recognised text",
+                    value: resultText,
+                    onChange: (e) => setEditedText(e.target.value),
+                    disabled
+                  }
+                ),
+                !unsettled && recognition.alternatives && recognition.alternatives.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", role: "group", "aria-label": "Other readings", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-xs text-md-on-surface-variant", children: "Other readings:" }),
+                  recognition.alternatives.map((alt) => /* @__PURE__ */ jsx(Md3Chip, { variant: "filter", selected: resultText === alt, onClick: () => setEditedText(alt), children: alt }, alt))
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1", children: [
+            inputMode === "draw" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Md3Button,
+                {
+                  variant: "text",
+                  icon: /* @__PURE__ */ jsx(Undo2, { "aria-hidden": "true" }),
+                  onClick: undoStroke,
+                  disabled: disabled || strokes.length === 0 || status === "recognizing",
+                  children: "Undo stroke"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Md3Button,
+                {
+                  variant: "text",
+                  icon: /* @__PURE__ */ jsx(Eraser, { "aria-hidden": "true" }),
+                  onClick: reset,
+                  disabled: disabled || strokes.length === 0,
+                  children: "Clear"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              Md3Button,
+              {
+                variant: "text",
+                icon: inputMode === "draw" ? /* @__PURE__ */ jsx(Keyboard, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(PenLine, { "aria-hidden": "true" }),
+                onClick: () => setInputMode(inputMode === "draw" ? "type" : "draw"),
+                disabled,
+                children: inputMode === "draw" ? "Type instead" : "Write instead"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+            inputMode === "draw" && onRecognize && (status !== "recognized" || mode === "review") && /* @__PURE__ */ jsx(
+              Md3Button,
+              {
+                variant: "tonal",
+                icon: /* @__PURE__ */ jsx(ScanText, { "aria-hidden": "true" }),
+                onClick: () => void recognize(),
+                disabled: disabled || strokes.length === 0 || status === "recognizing",
+                children: "Recognise"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              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__ */ jsx("p", { role: "status", "aria-live": "polite", className: "sr-only", children: announcement })
+        ]
+      }
+    );
+  }
+);
+Md3HandwritingInput.displayName = "Md3HandwritingInput";
+
+export { Md3HandwritingInput };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map