@ai-matrx/design-system 0.86.328 → 0.86.330

package/dist/writing-field.js

@@ -55,9 +55,7 @@ import "./chunk-MOZRIHJF.js";
 import "./chunk-57OD2WTY.js";
 import "./chunk-BNXNIN2S.js";
 import "./chunk-XREKZXAL.js";
-import {
-  Button
-} from "./chunk-7IOSA55D.js";
+import "./chunk-7IOSA55D.js";
 import "./chunk-WAT2XW7L.js";
 import "./chunk-FXXSZNER.js";
 import "./chunk-DGNHZBJY.js";
@@ -72,7 +70,6 @@ import {
   Loader2Icon,
   Maximize2Icon,
   MicIcon,
-  RotateCcwIcon,
   SendIcon,
   SlidersHorizontalIcon,
   XIcon
@@ -192,83 +189,7 @@ function clusterPlacementProblems(p) {
 
 // src/writing-field/add-ons.tsx
 import * as React from "react";
-
-// src/writing-field/voice-chrome.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function ListeningStrip({ liveTranscript, className }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("absolute flex items-center gap-1.5 px-2 py-1 rounded-md", className), children: [
-    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "w-2 h-2 bg-primary rounded-full flex-shrink-0 animate-pulse" }),
-    /* @__PURE__ */ jsx("span", { className: "type-secondary text-primary font-medium truncate", children: liveTranscript ? liveTranscript.slice(-60) : "Listening..." })
-  ] });
-}
-function FinalizingStrip({ className }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "absolute flex items-center gap-1.5 px-2 py-1 rounded-md bg-blue-100 dark:bg-blue-900/30",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(Loader2Icon, { className: "w-3 h-3 animate-spin text-blue-600 dark:text-blue-400" }),
-        /* @__PURE__ */ jsx("span", { className: "type-secondary text-blue-600 dark:text-blue-400 font-medium", children: "Finalizing..." })
-      ]
-    }
-  );
-}
-function VoiceProtectionDialog({ voice }) {
-  const { isRecording, isTranscribing } = voice;
-  const busy = isRecording || isTranscribing;
-  return /* @__PURE__ */ jsx(AlertDialog, { open: voice.showProtectionDialog, onOpenChange: voice.setShowProtectionDialog, children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
-    /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
-      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 mb-2", children: busy ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Loader2Icon, { className: "h-5 w-5 animate-spin text-blue-500" }),
-        /* @__PURE__ */ jsx(AlertDialogTitle, { children: isRecording ? "Recording in Progress" : "Transcription in Progress" })
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(CheckIcon, { className: "h-5 w-5 text-green-500" }),
-        /* @__PURE__ */ jsx(AlertDialogTitle, { children: "Voice Input Complete" })
-      ] }) }),
-      /* @__PURE__ */ jsx(AlertDialogDescription, { children: isRecording ? "Your voice is currently being recorded. If you close now, the recording will be stopped and lost." : isTranscribing ? "Your voice recording is currently being transcribed. If you close now, the transcription will be lost." : "Your voice input has been processed successfully! You can now safely close this panel." })
-    ] }),
-    /* @__PURE__ */ jsx(AlertDialogFooter, { children: busy ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(AlertDialogCancel, { onClick: voice.cancelClose, children: "Cancel & Wait" }),
-      /* @__PURE__ */ jsx(
-        AlertDialogAction,
-        {
-          onClick: voice.confirmClose,
-          className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-          children: isRecording ? "Stop Recording" : "End Transcription"
-        }
-      )
-    ] }) : /* @__PURE__ */ jsx(AlertDialogAction, { onClick: voice.confirmClose, children: "Close" }) })
-  ] }) });
-}
-function FieldMenuRow({
-  icon,
-  children,
-  onClick,
-  disabled
-}) {
-  return /* @__PURE__ */ jsx(
-    Tile,
-    {
-      type: "button",
-      disabled,
-      onClick,
-      variant: "quiet",
-      className: "w-full",
-      icon,
-      title: children
-    }
-  );
-}
-function micAriaLabel(isRecording, label) {
-  if (isRecording) return label ? `Stop recording for ${label}` : "Stop recording";
-  return label ? `Start voice input for ${label}` : "Start voice input";
-}
-
-// src/writing-field/add-ons.tsx
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 var ADD_ON_PROP_NAMES = [
   "surfaceName",
   "getApplicationScope",
@@ -296,87 +217,25 @@ function splitAddOnProps(props, extra = []) {
   }
   return { dom, addOnProps };
 }
-var KEY = /* @__PURE__ */ Symbol.for("@ai-matrx/design-system/writing-field-door");
+var KEY = /* @__PURE__ */ Symbol.for("@ai-matrx/design-system/writing-field-add-ons");
 var registry = globalThis;
-var DoorContext = registry[KEY] ?? (registry[KEY] = React.createContext(null));
-var EMPTY = {};
-var NO_LIGHT = {};
+var AddOnsContext = registry[KEY] ?? (registry[KEY] = React.createContext(null));
 function WritingFieldAddOnsProvider({
   addOns,
-  load,
-  light = NO_LIGHT,
   children
 }) {
   const first = React.useRef(addOns);
-  if (addOns && first.current !== addOns) {
+  if (first.current !== addOns) {
     announceStandIn(
       "writing-field-add-ons-swap",
       "WritingFieldAddOnsProvider received a different addOns object; the first one is kept (hook ports must be module-constant)."
     );
   }
-  const loader = React.useRef(load);
-  const [loaded, setLoaded] = React.useState(first.current ?? null);
-  const [failed, setFailed] = React.useState(false);
-  const inflight = React.useRef(null);
-  const engage = React.useCallback(() => {
-    if (first.current) return Promise.resolve(first.current);
-    if (inflight.current) return inflight.current;
-    const run = loader.current;
-    if (!run) return Promise.resolve(null);
-    setFailed(false);
-    inflight.current = run().then(
-      (next) => {
-        setLoaded(next);
-        return next;
-      },
-      (error) => {
-        inflight.current = null;
-        setFailed(true);
-        console.error("[writing-field] the writing-field add-ons failed to load; the next press retries.", error);
-        return null;
-      }
-    );
-    return inflight.current;
-  }, []);
-  const pendingSet = React.useMemo(
-    () => ({
-      MicButton: PendingMicButton,
-      Menu: PendingMenu,
-      menuHasItems: light.menuHasItems ?? (() => true),
-      TextStats: light.TextStats,
-      propNames: light.propNames,
-      notify: {
-        error: (message, options) => void engage().then((a) => (a?.notify ?? STAND_IN_NOTIFY).error(message, options)),
-        info: (message) => void engage().then((a) => (a?.notify ?? STAND_IN_NOTIFY).info(message)),
-        success: (message) => void engage().then((a) => (a?.notify ?? STAND_IN_NOTIFY).success(message))
-      }
-    }),
-    [light, engage]
-  );
-  const pending = !loaded && !!loader.current;
-  const door = React.useMemo(
-    () => ({ addOns: loaded, pending, failed, light, engage, effective: loaded ?? (pending ? pendingSet : EMPTY) }),
-    [loaded, pending, failed, light, engage, pendingSet]
-  );
-  return /* @__PURE__ */ jsx2(DoorContext.Provider, { value: door, children });
-}
-var NO_DOOR = {
-  addOns: null,
-  pending: false,
-  failed: false,
-  light: NO_LIGHT,
-  engage: () => Promise.resolve(null),
-  effective: EMPTY
-};
-function useDoor() {
-  return React.useContext(DoorContext) ?? NO_DOOR;
+  return /* @__PURE__ */ jsx(AddOnsContext.Provider, { value: first.current, children });
 }
+var EMPTY = {};
 function useWritingFieldAddOns() {
-  return useDoor().effective;
-}
-function useWritingFieldDoor() {
-  const door = useDoor();
-  return { pending: door.pending, failed: door.failed, engage: door.engage };
+  return React.useContext(AddOnsContext) ?? EMPTY;
 }
 function announceMissingPort(port) {
   announceStandIn(
@@ -433,188 +292,83 @@ function resolveHookPorts(addOns) {
     notify: addOns.notify ?? STAND_IN_NOTIFY
   };
 }
-var SNAPSHOT_KEYS = [
-  "microphone",
-  "available",
-  "isRecording",
-  "isTranscribing",
-  "audioLevel",
-  "liveTranscript",
-  "showProtectionDialog"
-];
-var PENDING_SNAPSHOT = {
-  microphone: false,
-  available: true,
-  isRecording: false,
-  isTranscribing: false,
-  audioLevel: 0,
-  liveTranscript: "",
-  showProtectionDialog: false
-};
-function useFieldPorts(addOns) {
-  const door = useDoor();
-  const live = !door.pending;
-  const shared = React.useRef({ voice: null, openAudioSettings: null, queue: [], options: null, drain: null }).current;
-  const [snapshot, setSnapshot] = React.useState(null);
-  const [micApi, setMicApi] = React.useState(false);
-  React.useEffect(() => {
-    if (!live) setMicApi(typeof navigator !== "undefined" && !!navigator.mediaDevices?.getUserMedia);
-  }, [live]);
-  const fns = React.useState(() => {
-    const run = (fn, fail) => {
-      if (shared.voice && shared.openAudioSettings) {
-        fn(shared.voice, shared.openAudioSettings);
-        return;
-      }
-      shared.queue.push({ fn, fail });
-      void door.engage().then((addOnsNow) => {
-        if (addOnsNow) setTimeout(() => shared.drain?.(), 0);
-        else {
-          const dropped = shared.queue.splice(0);
-          for (const q of dropped) q.fail?.(new Error("The writing field's add-ons did not load."));
-        }
-      });
-    };
-    return {
-      run,
-      handleVoiceClick: () => run((v) => void v.handleVoiceClick()),
-      startDictation: () => new Promise(
-        (resolve, reject) => run((v) => void Promise.resolve(v.startDictation()).then(resolve, reject), reject)
-      ),
-      stopDictation: () => shared.voice?.stopDictation(),
-      requestClose: () => shared.voice ? shared.voice.requestClose() : shared.options?.onRequestClose?.(),
-      setShowProtectionDialog: (open) => shared.voice?.setShowProtectionDialog(open),
-      confirmClose: () => shared.voice ? shared.voice.confirmClose() : shared.options?.onRequestClose?.(),
-      cancelClose: () => shared.voice?.cancelClose(),
-      openAudioSettings: () => run((_v, open) => open())
-    };
-  })[0];
-  const args = {};
-  return {
-    /** The add-ons are still on the way (draw the light stand-ins, open the door on engagement). */
-    pending: door.pending,
-    failed: door.failed,
-    /** Hold the first right-click for the add-ons' menu (only where it will open one). */
-    holdsContextMenu: (field) => door.pending && !door.failed && (door.light.holdsContextMenu?.(field) ?? false),
-    /** Open the door now (a press, a key, a right-click, the mic, "…"). */
-    engage: door.engage,
-    notify: addOns.notify ?? STAND_IN_NOTIFY,
-    useOpenAudioSettings: () => fns.openAudioSettings,
-    useFormatting: (element, on, props) => {
-      args.formatting = [element, on, props];
-    },
-    useVoice: (options) => {
-      args.voice = options;
-      shared.options = options;
-      const s = snapshot ?? { ...PENDING_SNAPSHOT, microphone: live ? false : micApi };
-      return {
-        ...s,
-        handleVoiceClick: fns.handleVoiceClick,
-        startDictation: fns.startDictation,
-        stopDictation: fns.stopDictation,
-        requestClose: fns.requestClose,
-        setShowProtectionDialog: fns.setShowProtectionDialog,
-        confirmClose: fns.confirmClose,
-        cancelClose: fns.cancelClose,
-        dialogs: null
-      };
-    },
-    /** The runner element: render it once inside the field (it draws the voice port's dialogs). */
-    renderRunner: () => live && args.voice ? /* @__PURE__ */ jsx2(
-      PortRunner,
-      {
-        addOns,
-        voiceOptions: args.voice,
-        formatting: args.formatting ?? null,
-        shared,
-        publish: setSnapshot
-      }
-    ) : null
-  };
+
+// src/writing-field/voice-chrome.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function ListeningStrip({ liveTranscript, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("absolute flex items-center gap-1.5 px-2 py-1 rounded-md", className), children: [
+    /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: "w-2 h-2 bg-primary rounded-full flex-shrink-0 animate-pulse" }),
+    /* @__PURE__ */ jsx2("span", { className: "type-secondary text-primary font-medium truncate", children: liveTranscript ? liveTranscript.slice(-60) : "Listening..." })
+  ] });
 }
-function PortRunner({
-  addOns,
-  voiceOptions,
-  formatting,
-  shared,
-  publish
-}) {
-  const ports = resolveHookPorts(addOns);
-  const openAudioSettings = ports.useOpenAudioSettings();
-  ports.useFormatting(formatting?.[0] ?? null, formatting?.[1] ?? false, formatting?.[2] ?? EMPTY_PROPS);
-  const voice = ports.useVoice(voiceOptions);
-  const last = React.useRef(null);
-  React.useLayoutEffect(() => {
-    shared.voice = voice;
-    shared.openAudioSettings = openAudioSettings;
-    shared.drain = () => {
-      if (!shared.voice || !shared.openAudioSettings) return;
-      for (const q of shared.queue.splice(0)) q.fn(shared.voice, shared.openAudioSettings);
-    };
-    const prev = last.current;
-    if (!prev || SNAPSHOT_KEYS.some((k) => prev[k] !== voice[k])) {
-      const next = Object.fromEntries(SNAPSHOT_KEYS.map((k) => [k, voice[k]]));
-      last.current = next;
-      publish(next);
+function FinalizingStrip({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "absolute flex items-center gap-1.5 px-2 py-1 rounded-md bg-blue-100 dark:bg-blue-900/30",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx2(Loader2Icon, { className: "w-3 h-3 animate-spin text-blue-600 dark:text-blue-400" }),
+        /* @__PURE__ */ jsx2("span", { className: "type-secondary text-blue-600 dark:text-blue-400 font-medium", children: "Finalizing..." })
+      ]
     }
-  });
-  React.useEffect(() => {
-    if (shared.queue.length) shared.drain?.();
-  });
-  React.useEffect(
-    () => () => {
-      shared.voice = null;
-      shared.openAudioSettings = null;
-      shared.drain = null;
-    },
-    [shared]
   );
-  return /* @__PURE__ */ jsx2(Fragment2, { children: voice.dialogs });
 }
-var EMPTY_PROPS = {};
-function PendingMicButton({ onMicClick, disabled, micAriaLabel: label = "Start voice input", tabIndex, dense = false }) {
-  const { engage, failed } = useWritingFieldDoor();
-  const title = failed ? "Voice input did not load. Press to try again." : label;
-  return /* @__PURE__ */ jsx2("div", { className: cn("relative mx-[3px] inline-flex shrink-0 items-center", dense ? "h-6" : "h-7 pointer-coarse:h-10"), children: /* @__PURE__ */ jsx2("div", { className: cn("relative flex items-stretch rounded-full", dense ? "h-6" : "h-7 pointer-coarse:h-9"), children: /* @__PURE__ */ jsx2(
-    Button,
+function VoiceProtectionDialog({ voice }) {
+  const { isRecording, isTranscribing } = voice;
+  const busy = isRecording || isTranscribing;
+  return /* @__PURE__ */ jsx2(AlertDialog, { open: voice.showProtectionDialog, onOpenChange: voice.setShowProtectionDialog, children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+    /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+      /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-3 mb-2", children: busy ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx2(Loader2Icon, { className: "h-5 w-5 animate-spin text-blue-500" }),
+        /* @__PURE__ */ jsx2(AlertDialogTitle, { children: isRecording ? "Recording in Progress" : "Transcription in Progress" })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx2(CheckIcon, { className: "h-5 w-5 text-green-500" }),
+        /* @__PURE__ */ jsx2(AlertDialogTitle, { children: "Voice Input Complete" })
+      ] }) }),
+      /* @__PURE__ */ jsx2(AlertDialogDescription, { children: isRecording ? "Your voice is currently being recorded. If you close now, the recording will be stopped and lost." : isTranscribing ? "Your voice recording is currently being transcribed. If you close now, the transcription will be lost." : "Your voice input has been processed successfully! You can now safely close this panel." })
+    ] }),
+    /* @__PURE__ */ jsx2(AlertDialogFooter, { children: busy ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx2(AlertDialogCancel, { onClick: voice.cancelClose, children: "Cancel & Wait" }),
+      /* @__PURE__ */ jsx2(
+        AlertDialogAction,
+        {
+          onClick: voice.confirmClose,
+          className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+          children: isRecording ? "Stop Recording" : "End Transcription"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx2(AlertDialogAction, { onClick: voice.confirmClose, children: "Close" }) })
+  ] }) });
+}
+function FieldMenuRow({
+  icon,
+  children,
+  onClick,
+  disabled
+}) {
+  return /* @__PURE__ */ jsx2(
+    Tile,
     {
       type: "button",
-      variant: "ghost",
-      size: "xs",
-      tabIndex,
-      onClick: onMicClick,
-      onContextMenu: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        void engage();
-      },
       disabled,
-      "aria-label": title,
-      title,
-      "data-touch-exempt": "The field row owns the microphone touch target.",
-      className: cn(
-        "relative z-[1] h-full touch-manipulation select-none rounded-full transition-colors focus-visible:ring-primary/40 disabled:opacity-40 hover:bg-muted/60 hover:text-muted-foreground active:bg-muted-foreground/15 active:scale-100 text-muted-foreground",
-        dense ? "px-1 [&_svg]:size-3.5" : "px-1.5 pointer-coarse:px-3 [&_svg]:size-4",
-        failed && "text-destructive"
-      ),
-      children: /* @__PURE__ */ jsx2(MicIcon, { className: dense ? "h-3.5 w-3.5" : "h-4 w-4" })
+      onClick,
+      variant: "quiet",
+      className: "w-full",
+      icon,
+      title: children
     }
-  ) }) });
+  );
 }
-function PendingMenu({ ownRows, trailingRows }) {
-  const { engage, failed } = useWritingFieldDoor();
-  React.useEffect(() => {
-    void engage();
-  }, [engage]);
-  return /* @__PURE__ */ jsxs2("div", { className: "flex w-48 flex-col p-1", "data-writing-field-host": "pending", children: [
-    ownRows,
-    failed ? /* @__PURE__ */ jsx2(FieldMenuRow, { icon: /* @__PURE__ */ jsx2(RotateCcwIcon, {}), onClick: () => void engage(), children: "Actions did not load. Retry" }) : /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-center py-2 text-muted-foreground", role: "status", "aria-label": "Loading actions", children: /* @__PURE__ */ jsx2(Loader2Icon, { className: "h-4 w-4 animate-spin" }) }),
-    trailingRows
-  ] });
+function micAriaLabel(isRecording, label) {
+  if (isRecording) return label ? `Stop recording for ${label}` : "Stop recording";
+  return label ? `Start voice input for ${label}` : "Start voice input";
 }
 
 // src/writing-field/pro-textarea.tsx
-import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var FILL_HEIGHT_REGEX = /(?:^|\s)(h-full|h-dvh|flex-1|grow|inset-0|min-h-0)(?:\s|$)/;
 function wantsFillHeight(className, wrapperClassName) {
   return FILL_HEIGHT_REGEX.test(className ?? "") || FILL_HEIGHT_REGEX.test(wrapperClassName ?? "");
@@ -666,7 +420,7 @@ var ProTextarea = React2.forwardRef(
     ...rest
   }, ref) => {
     const addOns = useWritingFieldAddOns();
-    const ports = useFieldPorts(addOns);
+    const ports = resolveHookPorts(addOns);
     const { dom: props, addOnProps } = splitAddOnProps(
       rest,
       addOns.propNames
@@ -730,51 +484,11 @@ var ProTextarea = React2.forwardRef(
     const [showTextStatsBar, setShowTextStatsBar] = React2.useState(defaultShowTextStatsBar);
     const internalRef = React2.useRef(null);
     const textareaRef = internalRef;
-    const handoff = React2.useRef(null);
-    const valueRef = React2.useRef(value);
-    valueRef.current = value;
-    const setTextareaRef = React2.useCallback((node) => {
-      const prev = internalRef.current;
-      if (!node && prev) {
-        handoff.current = {
-          from: prev,
-          value: prev.value,
-          start: prev.selectionStart ?? 0,
-          end: prev.selectionEnd ?? 0,
-          scroll: prev.scrollTop,
-          focused: typeof document !== "undefined" && document.activeElement === prev
-        };
-      } else if (node && handoff.current) {
-        const carried = handoff.current;
-        handoff.current = null;
-        if (carried.from !== node) {
-          if (valueRef.current === void 0 && node.value !== carried.value) node.value = carried.value;
-          node.scrollTop = carried.scroll;
-          if (carried.focused) {
-            node.focus({ preventScroll: true });
-            node.setSelectionRange(carried.start, carried.end);
-          }
-        }
-      }
+    const setTextareaRef = (node) => {
       internalRef.current = node;
       if (typeof ref === "function") ref(node);
       else if (ref) ref.current = node;
-    }, [ref]);
-    const heldContextMenu = React2.useRef(null);
-    const holdContextMenuUntilLoaded = (e) => {
-      e.preventDefault();
-      heldContextMenu.current = { x: e.clientX, y: e.clientY };
-      void ports.engage();
     };
-    React2.useEffect(() => {
-      const held = heldContextMenu.current;
-      if (ports.pending || !held) return;
-      heldContextMenu.current = null;
-      if (!addOns.ContextMenu) return;
-      internalRef.current?.dispatchEvent(
-        new MouseEvent("contextmenu", { bubbles: true, cancelable: true, clientX: held.x, clientY: held.y })
-      );
-    }, [ports.pending, addOns.ContextMenu]);
     const formattingOn = markdownFormatting ?? (!editor && !submitOnEnter && (props.rows === void 0 || Number(props.rows) >= 2));
     const [formatElement, setFormatElement] = React2.useState(null);
     React2.useLayoutEffect(() => {
@@ -966,8 +680,8 @@ var ProTextarea = React2.forwardRef(
     const Stats = addOns.TextStats;
     const showTextStats = enableTextStats && showMenu && !!Stats;
     React2.useEffect(() => {
-      if (enableTextStats && !addOns.TextStats && !ports.pending) announceMissingPort("TextStats");
-    }, [enableTextStats, addOns.TextStats, ports.pending]);
+      if (enableTextStats && !addOns.TextStats) announceMissingPort("TextStats");
+    }, [enableTextStats, addOns.TextStats]);
     const showPinnedTextStatsBar = showTextStats && showTextStatsBar;
     const fillHeight = !autoGrow && wantsFillHeight(className, wrapperClassName);
     React2.useEffect(() => {
@@ -1004,7 +718,7 @@ var ProTextarea = React2.forwardRef(
       ...inlineControls ? inlineControlsFieldPadding(clusterWidth, inlineMinHeight) : {}
     };
     const closeMenu = () => setMenuOpen(false);
-    const ownRows = expandInMenu || voiceInMenu || audioSettingsInMenu ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    const ownRows = expandInMenu || voiceInMenu || audioSettingsInMenu ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
       expandInMenu ? /* @__PURE__ */ jsx3(
         FieldMenuRow,
         {
@@ -1041,7 +755,7 @@ var ProTextarea = React2.forwardRef(
       ) : null,
       showMenu ? /* @__PURE__ */ jsx3("div", { className: "my-1 h-px bg-border", role: "separator" }) : null
     ] }) : null;
-    const trailingRows = showTextStats && Stats ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    const trailingRows = showTextStats && Stats ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
       /* @__PURE__ */ jsx3("div", { className: "my-1 h-px bg-border", role: "separator" }),
       /* @__PURE__ */ jsx3(
         Stats.MenuItems,
@@ -1054,7 +768,7 @@ var ProTextarea = React2.forwardRef(
     ] }) : null;
     const Menu = addOns.Menu;
     const menuBody = statsOpen && Stats ? /* @__PURE__ */ jsx3("div", { className: "w-56", children: /* @__PURE__ */ jsx3(Stats.Panel, { text: valueAsString, onBack: () => setStatsOpen(false), onClose: closeMenu }) }) : Menu && menuActions !== "none" ? /* @__PURE__ */ jsx3(Menu, { field: fieldApi, ownRows, trailingRows, close: closeMenu }) : /* @__PURE__ */ jsx3(StandInMenu, { field: fieldApi, ownRows, trailingRows, close: closeMenu, registry: menuActions !== "none" });
-    const cluster = /* @__PURE__ */ jsxs3(
+    const cluster = /* @__PURE__ */ jsxs2(
       "div",
       {
         ref: setClusterNode,
@@ -1077,7 +791,7 @@ var ProTextarea = React2.forwardRef(
               className: "text-muted-foreground"
             }
           ) : null,
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsxs2(
             "div",
             {
               "data-matrx-glass-plane": true,
@@ -1100,7 +814,7 @@ var ProTextarea = React2.forwardRef(
                     micAriaLabel: micAriaLabel(isRecording, auxiliaryControlsLabel)
                   }
                 ) : null,
-                menuShown && /* @__PURE__ */ jsxs3(
+                menuShown && /* @__PURE__ */ jsxs2(
                   Popover,
                   {
                     open: menuOpen,
@@ -1155,18 +869,14 @@ var ProTextarea = React2.forwardRef(
       {
         ref: setFieldBoxNode,
         className: cn("relative group", wrapperClassName),
-        "data-writing-field": "textarea",
-        "data-writing-field-host": ports.pending ? "pending" : addOns.Menu && addOns.useVoice ? void 0 : UNCONFIGURED,
-        onPointerDownCapture: ports.pending ? () => void ports.engage() : void 0,
-        onKeyDownCapture: ports.pending ? () => void ports.engage() : void 0,
-        onContextMenuCapture: !disabled && ports.holdsContextMenu({ kind: "textarea", addOnProps }) ? holdContextMenuUntilLoaded : void 0,
+        "data-writing-field-host": addOns.Menu && addOns.useVoice ? void 0 : UNCONFIGURED,
         onMouseEnter: () => setIsHovered(true),
         onMouseMove: () => {
           if (!isHovered) setIsHovered(true);
         },
         onMouseLeave: () => setIsHovered(false),
-        children: /* @__PURE__ */ jsxs3("div", { className: cn("flex min-h-0 min-w-0 w-full flex-col", fillHeight ? "h-full flex-1" : "flex-1"), children: [
-          /* @__PURE__ */ jsxs3("div", { className: cn("relative min-w-0 w-full", fillHeight && "flex min-h-0 flex-1 flex-col"), children: [
+        children: /* @__PURE__ */ jsxs2("div", { className: cn("flex min-h-0 min-w-0 w-full flex-col", fillHeight ? "h-full flex-1" : "flex-1"), children: [
+          /* @__PURE__ */ jsxs2("div", { className: cn("relative min-w-0 w-full", fillHeight && "flex min-h-0 flex-1 flex-col"), children: [
             editor ? editor.render({
               id: inputId,
               className: fieldClassName,
@@ -1199,7 +909,7 @@ var ProTextarea = React2.forwardRef(
                 ...props
               }
             ),
-            expandable && !editor ? /* @__PURE__ */ jsx3(Dialog, { open: expandOpen, onOpenChange: setExpandOpen, children: /* @__PURE__ */ jsxs3(DialogContent, { className: "flex max-h-[90dvh] w-[min(56rem,calc(100vw-2rem))] max-w-none flex-col gap-3 sm:max-w-none", children: [
+            expandable && !editor ? /* @__PURE__ */ jsx3(Dialog, { open: expandOpen, onOpenChange: setExpandOpen, children: /* @__PURE__ */ jsxs2(DialogContent, { className: "flex max-h-[90dvh] w-[min(56rem,calc(100vw-2rem))] max-w-none flex-col gap-3 sm:max-w-none", children: [
               /* @__PURE__ */ jsx3(DialogTitle, { className: "truncate", children: auxiliaryControlsLabel ?? floatingLabel ?? "Text" }),
               /* @__PURE__ */ jsx3(
                 ProTextarea,
@@ -1248,7 +958,6 @@ var ProTextarea = React2.forwardRef(
             enableVoice && isTranscribing && !isRecording && /* @__PURE__ */ jsx3(FinalizingStrip, { className: inlineControls ? "left-0 bottom-full mb-1.5" : "left-2 bottom-2" })
           ] }),
           voice.dialogs,
-          ports.renderRunner(),
           /* @__PURE__ */ jsx3(VoiceProtectionDialog, { voice }),
           showPinnedTextStatsBar && Stats ? /* @__PURE__ */ jsx3("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsx3(Stats.Bar, { text: valueAsString }) }) : null
         ] })
@@ -1270,7 +979,7 @@ function StandInMenu({
   React2.useEffect(() => {
     if (registry2) announceMissingPort("Menu");
   }, [registry2]);
-  return /* @__PURE__ */ jsxs3("div", { className: "flex w-48 flex-col p-1", "data-writing-field-host": registry2 ? UNCONFIGURED : void 0, children: [
+  return /* @__PURE__ */ jsxs2("div", { className: "flex w-48 flex-col p-1", "data-writing-field-host": registry2 ? UNCONFIGURED : void 0, children: [
     ownRows,
     registry2 && field.showCopyButton ? /* @__PURE__ */ jsx3(
       FieldMenuRow,
@@ -1314,7 +1023,7 @@ function hoverRevealsCluster(inputWidth) {
 }
 
 // src/writing-field/pro-input.tsx
-import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var joinWithSpace = (base, text) => `${base}${base.endsWith(" ") ? "" : " "}${text}`;
 var ProInput = React3.forwardRef(
   ({
@@ -1350,7 +1059,7 @@ var ProInput = React3.forwardRef(
     ...rest
   }, ref) => {
     const addOns = useWritingFieldAddOns();
-    const ports = useFieldPorts(addOns);
+    const ports = resolveHookPorts(addOns);
     const { dom: props, addOnProps } = splitAddOnProps(rest, addOns.propNames);
     const generatedId = React3.useId();
     const { size: _nativeSize, width: nativeWidth, style: nativeStyle, ...fieldProps } = props;
@@ -1548,7 +1257,7 @@ var ProInput = React3.forwardRef(
     const labelFloated = isFocused || valueAsString.length > 0;
     const showVoiceStatus = isRecording || isTranscribing && !isRecording;
     const closeMenu = () => setMenuOpen(false);
-    const ownRows = /* @__PURE__ */ jsxs4(Fragment4, { children: [
+    const ownRows = /* @__PURE__ */ jsxs3(Fragment3, { children: [
       clearInMenu ? /* @__PURE__ */ jsx4(
         FieldMenuRow,
         {
@@ -1586,14 +1295,11 @@ var ProInput = React3.forwardRef(
       clearInMenu || voiceInMenu || audioSettingsInMenu ? /* @__PURE__ */ jsx4("div", { className: "my-1 h-px bg-border", role: "separator" }) : null
     ] });
     const Menu = addOns.Menu;
-    return /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs3(
       "div",
       {
         className: cn("relative group", wrapperClassName),
-        "data-writing-field": "input",
-        "data-writing-field-host": ports.pending ? "pending" : addOns.Menu && addOns.useVoice ? void 0 : UNCONFIGURED,
-        onPointerDownCapture: ports.pending ? () => void ports.engage() : void 0,
-        onKeyDownCapture: ports.pending ? () => void ports.engage() : void 0,
+        "data-writing-field-host": addOns.Menu && addOns.useVoice ? void 0 : UNCONFIGURED,
         onMouseEnter: () => setIsHovered(true),
         onMouseMove: () => {
           if (!isHovered) setIsHovered(true);
@@ -1633,7 +1339,7 @@ var ProInput = React3.forwardRef(
               children: floatingLabel
             }
           ),
-          /* @__PURE__ */ jsxs4(
+          /* @__PURE__ */ jsxs3(
             "div",
             {
               ref: setClusterNode,
@@ -1642,7 +1348,7 @@ var ProInput = React3.forwardRef(
               "data-matrx-tap-dense": denseField ? "" : void 0,
               className: "absolute right-0 top-1/2 -translate-y-1/2 flex items-center z-10",
               children: [
-                /* @__PURE__ */ jsxs4(
+                /* @__PURE__ */ jsxs3(
                   "div",
                   {
                     ref: auxRef,
@@ -1664,7 +1370,7 @@ var ProInput = React3.forwardRef(
                           micAriaLabel: micAriaLabel(isRecording, auxiliaryControlsLabel)
                         }
                       ) : null,
-                      showMenu && /* @__PURE__ */ jsxs4(Popover, { open: menuOpen, onOpenChange: setMenuOpen, children: [
+                      showMenu && /* @__PURE__ */ jsxs3(Popover, { open: menuOpen, onOpenChange: setMenuOpen, children: [
                         /* @__PURE__ */ jsx4(PopoverTrigger, { asChild: true, children: hasCopied ? /* @__PURE__ */ jsx4(
                           CheckTapButton,
                           {
@@ -1723,12 +1429,11 @@ var ProInput = React3.forwardRef(
               ]
             }
           ),
-          showVoiceStatus && /* @__PURE__ */ jsx4("div", { className: "absolute left-0 top-full mt-1 flex items-center gap-1.5 px-2 py-1 rounded-md max-w-full", children: isRecording ? /* @__PURE__ */ jsxs4("div", { className: "relative flex items-center gap-1.5 px-2 py-1 bg-primary/10 dark:bg-primary/15 rounded-md max-w-full", children: [
+          showVoiceStatus && /* @__PURE__ */ jsx4("div", { className: "absolute left-0 top-full mt-1 flex items-center gap-1.5 px-2 py-1 rounded-md max-w-full", children: isRecording ? /* @__PURE__ */ jsxs3("div", { className: "relative flex items-center gap-1.5 px-2 py-1 bg-primary/10 dark:bg-primary/15 rounded-md max-w-full", children: [
             /* @__PURE__ */ jsx4("span", { "aria-hidden": true, className: "w-2 h-2 bg-primary rounded-full flex-shrink-0 animate-pulse" }),
             /* @__PURE__ */ jsx4("span", { className: "type-secondary text-primary font-medium truncate", children: voice.liveTranscript ? voice.liveTranscript.slice(-60) : "Listening..." })
           ] }) : /* @__PURE__ */ jsx4(FinalizingStrip, { className: "relative" }) }),
           voice.dialogs,
-          ports.renderRunner(),
           /* @__PURE__ */ jsx4(VoiceProtectionDialog, { voice })
         ]
       }
@@ -1766,7 +1471,6 @@ export {
   proTextareaClusterPlacement,
   reservedRightPaddingPx,
   splitAddOnProps,
-  useWritingFieldAddOns,
-  useWritingFieldDoor
+  useWritingFieldAddOns
 };
 //# sourceMappingURL=writing-field.js.map