@ai-matrx/design-system 0.86.328 → 0.86.330

package/dist/writing-field.cjs

@@ -60,8 +60,7 @@ __export(writing_field_exports, {
   proTextareaClusterPlacement: () => proTextareaClusterPlacement,
   reservedRightPaddingPx: () => reservedRightPaddingPx,
   splitAddOnProps: () => splitAddOnProps,
-  useWritingFieldAddOns: () => useWritingFieldAddOns,
-  useWritingFieldDoor: () => useWritingFieldDoor
+  useWritingFieldAddOns: () => useWritingFieldAddOns
 });
 module.exports = __toCommonJS(writing_field_exports);
 
@@ -224,12 +223,6 @@ function MicIcon(props) {
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 19v3" })
   ] });
 }
-function RotateCcwIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { ...lucideProps("rotate-ccw", props), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3 3v5h5" })
-  ] });
-}
 function SlidersHorizontalIcon(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { ...lucideProps("sliders-horizontal", props), children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M10 5H3" }),
@@ -2502,13 +2495,120 @@ function clusterPlacementProblems(p) {
 }
 
 // src/writing-field/add-ons.tsx
+var React10 = __toESM(require("react"), 1);
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var ADD_ON_PROP_NAMES = [
+  "surfaceName",
+  "getApplicationScope",
+  "sourceFeature",
+  "surfaceContextItems",
+  "enableBoundAgents",
+  "enableContextMenu",
+  "enableCleanup",
+  "cleanupAgentId",
+  "cleanupContextItems",
+  "enableHelpWithThis",
+  "helpMandateKey",
+  "helpContextItems",
+  "enableCustomAgent",
+  "customAgentMandateKey",
+  "customAgentContextItems",
+  "uploadImage"
+];
+function splitAddOnProps(props, extra = []) {
+  const dom = {};
+  const addOnProps = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (ADD_ON_PROP_NAMES.includes(key) || extra.includes(key)) addOnProps[key] = value;
+    else dom[key] = value;
+  }
+  return { dom, addOnProps };
+}
+var KEY = /* @__PURE__ */ Symbol.for("@ai-matrx/design-system/writing-field-add-ons");
+var registry3 = globalThis;
+var AddOnsContext = registry3[KEY] ?? (registry3[KEY] = React10.createContext(null));
+function WritingFieldAddOnsProvider({
+  addOns,
+  children
+}) {
+  const first = React10.useRef(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)."
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AddOnsContext.Provider, { value: first.current, children });
+}
+var EMPTY = {};
+function useWritingFieldAddOns() {
+  return React10.useContext(AddOnsContext) ?? EMPTY;
+}
+function announceMissingPort(port) {
+  announceStandIn(
+    `writing-field:${port}`,
+    `A writing field drew without its "${port}" add-on: the host did not register it in <WritingFieldAddOnsProvider addOns={{ ${port} }}>.`
+  );
+}
+var INERT = () => void 0;
+function useStandInVoice(options) {
+  React10.useEffect(() => {
+    if (options.enabled) announceMissingPort("useVoice");
+  }, [options.enabled]);
+  return {
+    microphone: false,
+    available: false,
+    isRecording: false,
+    isTranscribing: false,
+    audioLevel: 0,
+    liveTranscript: "",
+    handleVoiceClick: INERT,
+    startDictation: async () => void 0,
+    stopDictation: INERT,
+    requestClose: () => options.onRequestClose?.(),
+    showProtectionDialog: false,
+    setShowProtectionDialog: INERT,
+    confirmClose: () => options.onRequestClose?.(),
+    cancelClose: INERT
+  };
+}
+var STAND_IN_NOTIFY = {
+  error: (message) => {
+    announceMissingPort("notify");
+    console.error(`[writing-field] ${message}`);
+  },
+  info: (message) => {
+    announceMissingPort("notify");
+    console.info(`[writing-field] ${message}`);
+  },
+  success: (message) => {
+    announceMissingPort("notify");
+    console.info(`[writing-field] ${message}`);
+  }
+};
+function useNoFormatting() {
+}
+function useNoAudioSettings() {
+  return () => announceMissingPort("useOpenAudioSettings");
+}
+function resolveHookPorts(addOns) {
+  return {
+    useVoice: addOns.useVoice ?? useStandInVoice,
+    useFormatting: addOns.useFormatting ?? useNoFormatting,
+    useOpenAudioSettings: addOns.useOpenAudioSettings ?? useNoAudioSettings,
+    notify: addOns.notify ?? STAND_IN_NOTIFY
+  };
+}
+
+// src/controls/surfaces.tsx
+var import_react_slot4 = require("@radix-ui/react-slot");
 var React15 = __toESM(require("react"), 1);
 
 // src/button.tsx
 var import_react_slot2 = require("@radix-ui/react-slot");
 var import_class_variance_authority = require("class-variance-authority");
-var React10 = __toESM(require("react"), 1);
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var React11 = __toESM(require("react"), 1);
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.cva)(
   "matrx-glyph-trim inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:opacity-50 active:scale-[0.98] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
@@ -2575,14 +2675,14 @@ function swallowClick(event) {
   event.preventDefault();
   event.stopPropagation();
 }
-var Button = React10.forwardRef(
+var Button = React11.forwardRef(
   ({ className, variant, size, asChild = false, onClick, ...props }, ref) => {
     const Component = asChild ? import_react_slot2.Slot : "button";
     const resolvedSize = size ?? "default";
     const disabledChild = asChild && Boolean(props.disabled);
     const ariaDisabled = props["aria-disabled"];
     const inert = disabledChild || ariaDisabled === true || ariaDisabled === "true";
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       Component,
       {
         className: cn(buttonVariants({ variant, size, className })),
@@ -2600,25 +2700,21 @@ var Button = React10.forwardRef(
 );
 Button.displayName = "Button";
 
-// src/controls/surfaces.tsx
-var import_react_slot4 = require("@radix-ui/react-slot");
-var React14 = __toESM(require("react"), 1);
-
 // src/alert-dialog.tsx
 var AlertDialogPrimitive = __toESM(require("@radix-ui/react-alert-dialog"), 1);
 var import_react_tree2 = require("@ai-matrx/kit/react-tree");
-var React11 = __toESM(require("react"), 1);
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var React12 = __toESM(require("react"), 1);
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogPortal = ({
   container,
   ...props
 }) => {
   const resolved = usePortalContainer(container);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AlertDialogPrimitive.Portal, { container: resolved ?? null, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogPrimitive.Portal, { container: resolved ?? null, ...props });
 };
 AlertDialogPortal.displayName = "AlertDialogPortal";
-var AlertDialogOverlay = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var AlertDialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   AlertDialogPrimitive.Overlay,
   {
     ref,
@@ -2632,12 +2728,12 @@ var AlertDialogOverlay = React11.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContentPrimitive = React11.forwardRef(({ onCloseAutoFocus, ...props }, ref) => {
+var AlertDialogContentPrimitive = React12.forwardRef(({ onCloseAutoFocus, ...props }, ref) => {
   useModalLayer(true);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AlertDialogPrimitive.Content, { ...props, ref, "aria-modal": "true", onCloseAutoFocus: keepMovedFocus(onCloseAutoFocus) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogPrimitive.Content, { ...props, ref, "aria-modal": "true", onCloseAutoFocus: keepMovedFocus(onCloseAutoFocus) });
 });
 AlertDialogContentPrimitive.displayName = "AlertDialogContentPrimitive";
-var AlertDialogDescription = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var AlertDialogDescription = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   AlertDialogPrimitive.Description,
   {
     ref,
@@ -2647,11 +2743,11 @@ var AlertDialogDescription = React11.forwardRef(({ className, ...props }, ref) =
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogContent = React11.forwardRef(({ className, children, container, animated = true, ...props }, ref) => {
+var AlertDialogContent = React12.forwardRef(({ className, children, container, animated = true, ...props }, ref) => {
   const hasDescription = (0, import_react_tree2.treeContainsComponent)(children, AlertDialogDescription) || (0, import_react_tree2.treeContainsComponent)(children, AlertDialogPrimitive.Description);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(AlertDialogPortal, { container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AlertDialogOverlay, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(AlertDialogPortal, { container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       AlertDialogContentPrimitive,
       {
         ref,
@@ -2671,7 +2767,7 @@ var AlertDialogContent = React11.forwardRef(({ className, children, container, a
         ),
         ...props,
         children: [
-          hasDescription ? null : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AlertDialogPrimitive.Description, { className: "sr-only", children: "Please confirm the action described in this dialog." }),
+          hasDescription ? null : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogPrimitive.Description, { className: "sr-only", children: "Please confirm the action described in this dialog." }),
           children
         ]
       }
@@ -2682,7 +2778,7 @@ AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 var AlertDialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   "div",
   {
     "data-slot": "alert-dialog-header",
@@ -2694,7 +2790,7 @@ AlertDialogHeader.displayName = "AlertDialogHeader";
 var AlertDialogFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   "div",
   {
     "data-slot": "alert-dialog-footer",
@@ -2726,7 +2822,7 @@ var AlertDialogFooter = ({
   }
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var AlertDialogTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   AlertDialogPrimitive.Title,
   {
     ref,
@@ -2736,7 +2832,7 @@ var AlertDialogTitle = React11.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogAction = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var AlertDialogAction = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   AlertDialogPrimitive.Action,
   {
     ref,
@@ -2746,7 +2842,7 @@ var AlertDialogAction = React11.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var AlertDialogCancel = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   AlertDialogPrimitive.Cancel,
   {
     ref,
@@ -2764,14 +2860,14 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 // src/controls/controls.tsx
 var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"), 1);
 var import_react_slot3 = require("@radix-ui/react-slot");
-var React13 = __toESM(require("react"), 1);
+var React14 = __toESM(require("react"), 1);
 
 // src/field-surface.ts
 var FIELD_SURFACE_CLASS = "border border-border bg-card";
 
 // src/textarea.tsx
-var React12 = __toESM(require("react"), 1);
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var React13 = __toESM(require("react"), 1);
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var FILL_HEIGHT_REGEX = /(?:^|\s)(h-full|h-dvh|flex-1|grow)(?:\s|$)/;
 var FILL_WIDTH_REGEX = /(?:^|\s)(w-full|w-screen)(?:\s|$)/;
 function getStretchClasses(className) {
@@ -2784,7 +2880,7 @@ function getStretchClasses(className) {
 var TEXTAREA_ELEVATED_CLASS = `flex h-auto w-full rounded-md ${FIELD_SURFACE_CLASS} px-3 py-2 text-sm text-foreground shadow-textarea transition duration-400 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/15 disabled:cursor-not-allowed disabled:opacity-50`;
 var TEXTAREA_CONTROL_CLASS = `flex w-full rounded-md ${FIELD_SURFACE_CLASS} px-3 py-2 text-sm text-foreground shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/15 disabled:cursor-not-allowed disabled:opacity-50`;
 function useAutoGrow(ref, value, autoGrow = false, minHeight, maxHeight) {
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     if (!autoGrow || !ref.current) return;
     const textarea = ref.current;
     textarea.style.height = "auto";
@@ -2800,8 +2896,8 @@ function useAutoGrow(ref, value, autoGrow = false, minHeight, maxHeight) {
   }, [value, autoGrow, minHeight, maxHeight, ref]);
 }
 function useMergedTextareaRef(forwarded) {
-  const internal = React12.useRef(null);
-  const callback = React12.useCallback(
+  const internal = React13.useRef(null);
+  const callback = React13.useCallback(
     (node) => {
       internal.current = node;
       if (typeof forwarded === "function") forwarded(node);
@@ -2818,13 +2914,13 @@ function boxStyle(minHeight, maxHeight) {
     maxHeight: maxHeight ? `${maxHeight}px` : void 0
   };
 }
-var Textarea = React12.forwardRef(
+var Textarea = React13.forwardRef(
   ({ className, autoGrow, minHeight, maxHeight, wrapperClassName, ...props }, forwarded) => {
     const { ref, callback } = useMergedTextareaRef(forwarded);
     const stretchClasses = getStretchClasses(className);
     const needsWrapper = Boolean(wrapperClassName || stretchClasses);
     useAutoGrow(ref, props.value, autoGrow, minHeight, maxHeight);
-    const textarea = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    const textarea = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "textarea",
       {
         ref: callback,
@@ -2840,15 +2936,15 @@ var Textarea = React12.forwardRef(
       }
     );
     if (!needsWrapper) return textarea;
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cn(stretchClasses, wrapperClassName), children: textarea });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn(stretchClasses, wrapperClassName), children: textarea });
   }
 );
 Textarea.displayName = "Textarea";
-var BasicTextarea = React12.forwardRef(
+var BasicTextarea = React13.forwardRef(
   ({ className, autoGrow, minHeight, maxHeight, ...props }, forwarded) => {
     const { ref, callback } = useMergedTextareaRef(forwarded);
     useAutoGrow(ref, props.value, autoGrow, minHeight, maxHeight);
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "textarea",
       {
         ref: callback,
@@ -2866,7 +2962,7 @@ var BasicTextarea = React12.forwardRef(
   }
 );
 BasicTextarea.displayName = "BasicTextarea";
-var TextareaWithPrefix = React12.forwardRef(
+var TextareaWithPrefix = React13.forwardRef(
   ({
     prefix,
     className,
@@ -2878,13 +2974,13 @@ var TextareaWithPrefix = React12.forwardRef(
   }, forwarded) => {
     const { ref, callback } = useMergedTextareaRef(forwarded);
     useAutoGrow(ref, props.value, autoGrow, minHeight, maxHeight);
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       "div",
       {
         className: cn("relative", getStretchClasses(className), wrapperClassName),
         children: [
-          prefix ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "pointer-events-none absolute left-3 top-3 z-10 text-muted-foreground", children: prefix }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          prefix ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "pointer-events-none absolute left-3 top-3 z-10 text-muted-foreground", children: prefix }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "textarea",
             {
               ref: callback,
@@ -2908,9 +3004,9 @@ var TextareaWithPrefix = React12.forwardRef(
 TextareaWithPrefix.displayName = "TextareaWithPrefix";
 
 // src/controls/controls.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var ControlRow = React13.forwardRef(
-  ({ className, nowrap, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var ControlRow = React14.forwardRef(
+  ({ className, nowrap, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
       ref,
@@ -2922,8 +3018,8 @@ var ControlRow = React13.forwardRef(
   )
 );
 ControlRow.displayName = "ControlRow";
-var ControlScope = React13.forwardRef(
-  (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref, "data-matrx-controls": "", ...props })
+var ControlScope = React14.forwardRef(
+  (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref, "data-matrx-controls": "", ...props })
 );
 ControlScope.displayName = "ControlScope";
 function glyphSlot(icon, iconEnd, label) {
@@ -2933,16 +3029,16 @@ function glyphSlot(icon, iconEnd, label) {
   if (iconEnd) return "end";
   return void 0;
 }
-var Button2 = React13.forwardRef(
+var Button2 = React14.forwardRef(
   ({ className, variant = "outline", tone, icon, iconEnd, asChild = false, collapse, pressed, badge, glyphTone, removes, meta, width, hero, children, onClick, type, ...props }, ref) => {
     const Component = asChild ? import_react_slot3.Slot : "button";
     const badgeText = typeof badge === "number" ? badge > 0 ? badge > 99 ? "99+" : String(badge) : null : badge ? "" : null;
     const ariaDisabled = props["aria-disabled"];
     const disabledChild = asChild && Boolean(props.disabled);
     const inert = disabledChild || ariaDisabled === true || ariaDisabled === "true";
-    const label = asChild && React13.isValidElement(children) ? children.props.children : children;
+    const label = asChild && React14.isValidElement(children) ? children.props.children : children;
     const collapses = collapse === "container" && Boolean(icon) && Boolean(label);
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       Component,
       {
         ref,
@@ -2968,22 +3064,22 @@ var Button2 = React13.forwardRef(
         onClick: inert ? swallowClick : onClick,
         children: [
           icon,
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_slot3.Slottable, { children: !asChild && (typeof children === "string" || typeof children === "number") ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "matrx-control-button-label", children }) : children }),
-          meta === void 0 || meta === null || meta === false ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "matrx-control-button-meta", children: meta }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_slot3.Slottable, { children: !asChild && (typeof children === "string" || typeof children === "number") ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "matrx-control-button-label", children }) : children }),
+          meta === void 0 || meta === null || meta === false ? null : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "matrx-control-button-meta", children: meta }),
           iconEnd,
-          badgeText === null ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "matrx-control-button-badge", "aria-hidden": "true", children: badgeText })
+          badgeText === null ? null : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "matrx-control-button-badge", "aria-hidden": "true", children: badgeText })
         ]
       }
     );
   }
 );
 Button2.displayName = "Button";
-var SplitButton = React13.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref, role: "group", "data-matrx-control": "split", className: cn("matrx-control-split", className), ...props })
+var SplitButton = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref, role: "group", "data-matrx-control": "split", className: cn("matrx-control-split", className), ...props })
 );
 SplitButton.displayName = "SplitButton";
-var Field = React13.forwardRef(
-  ({ className, style, icon, end, width, hero, filled, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+var Field = React14.forwardRef(
+  ({ className, style, icon, end, width, hero, filled, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "label",
     {
       "data-matrx-control": "field",
@@ -2995,20 +3091,20 @@ var Field = React13.forwardRef(
       style,
       children: [
         icon,
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("input", { ref, ...props }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("input", { ref, ...props }),
         end
       ]
     }
   )
 );
 Field.displayName = "Field";
-var SearchField = React13.forwardRef(
-  ({ placeholder = "Search", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var SearchField = React14.forwardRef(
+  ({ placeholder = "Search", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     Field,
     {
       ref,
       type: "search",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MagnifyingGlassIcon, { "aria-hidden": "true" }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MagnifyingGlassIcon, { "aria-hidden": "true" }),
       placeholder,
       "aria-label": props["aria-label"] ?? placeholder,
       ...props
@@ -3016,13 +3112,13 @@ var SearchField = React13.forwardRef(
   )
 );
 SearchField.displayName = "SearchField";
-var Chip = React13.forwardRef(
+var Chip = React14.forwardRef(
   ({ label, variant = "item", tone, icon, asChild = false, pressed, children, className, title, ...props }, ref) => {
     const Component = asChild ? import_react_slot3.Slot : "span";
-    const glyph = variant === "add" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PlusIcon, { className: "lucide lucide-plus" }) : icon;
+    const glyph = variant === "add" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PlusIcon, { className: "lucide lucide-plus" }) : icon;
     const toggle = pressed !== void 0 && variant === "item";
     const resolvedTone = tone ?? (toggle ? "primary" : "neutral");
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       Component,
       {
         ref,
@@ -3038,16 +3134,16 @@ var Chip = React13.forwardRef(
         children: [
           glyph,
           variant === "add" ? icon : null,
-          asChild ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_slot3.Slottable, { children }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "matrx-control-chip-label", children: label })
+          asChild ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_slot3.Slottable, { children }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "matrx-control-chip-label", children: label })
         ]
       }
     );
   }
 );
 Chip.displayName = "Chip";
-var ChipSet = React13.forwardRef(
-  ({ layout = "flow", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var ChipSet = React14.forwardRef(
+  ({ layout = "flow", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
       ref,
@@ -3059,24 +3155,24 @@ var ChipSet = React13.forwardRef(
   )
 );
 ChipSet.displayName = "ChipSet";
-var Switch = React13.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var Switch = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     SwitchPrimitives.Root,
     {
       ref,
       "data-matrx-control": "switch",
       className: cn("matrx-control matrx-control-switch", className),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "matrx-control-switch-track", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SwitchPrimitives.Thumb, { className: "matrx-control-switch-thumb" }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "matrx-control-switch-track", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SwitchPrimitives.Thumb, { className: "matrx-control-switch-thumb" }) })
     }
   )
 );
 Switch.displayName = "Switch";
-var Textarea2 = React13.forwardRef(
+var Textarea2 = React14.forwardRef(
   ({ className, style, variant = "field", mono, hero, joinedBottom, autoGrow, minHeight, maxHeight, reservedInlineEnd, reservedBlockEnd, ...props }, forwarded) => {
     const { ref, callback } = useMergedTextareaRef(forwarded);
     useAutoGrow(ref, props.value, autoGrow, minHeight, maxHeight);
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "textarea",
       {
         ref: callback,
@@ -3100,21 +3196,21 @@ var Textarea2 = React13.forwardRef(
 Textarea2.displayName = "Textarea";
 
 // src/controls/surfaces.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var Tile = React14.forwardRef(
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Tile = React15.forwardRef(
   ({ layout = "row", variant = "outline", icon, title, wrapTitle, line, end, selected, selectedStyle, tooltip, level, fit, endInset, oneLine, dashed, hoverStyle, danger, dimmed, glyphTone, hero, tone, dense, asChild = false, className, children, onClick, type, ...props }, ref) => {
     const Component = asChild ? import_react_slot4.Slot : "button";
     const ariaDisabled = props["aria-disabled"];
     const inert = ariaDisabled === true || ariaDisabled === "true";
-    const body = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-      icon ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "matrx-tile-icon", children: icon }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "matrx-tile-text", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "matrx-tile-title", children: title }),
-        line ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "matrx-tile-line", children: line }) : null
+    const body = /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+      icon ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-tile-icon", children: icon }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "matrx-tile-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-tile-title", children: title }),
+        line ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-tile-line", children: line }) : null
       ] }),
-      end ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "matrx-tile-end", children: end }) : null
+      end ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-tile-end", children: end }) : null
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       Component,
       {
         ref,
@@ -3142,14 +3238,14 @@ var Tile = React14.forwardRef(
         className: cn("matrx-tile", className),
         ...props,
         onClick: inert ? swallowClick : onClick,
-        children: asChild && React14.isValidElement(children) ? React14.cloneElement(children, void 0, body) : body
+        children: asChild && React15.isValidElement(children) ? React15.cloneElement(children, void 0, body) : body
       }
     );
   }
 );
 Tile.displayName = "Tile";
-var DisclosureHeader = React14.forwardRef(
-  ({ open, variant = "row", icon, glyphTone, title, meta, end, line, chevron = "start", className, type, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+var DisclosureHeader = React15.forwardRef(
+  ({ open, variant = "row", icon, glyphTone, title, meta, end, line, chevron = "start", className, type, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "button",
     {
       ref,
@@ -3162,33 +3258,33 @@ var DisclosureHeader = React14.forwardRef(
       className: cn("matrx-disclosure", className),
       ...props,
       children: [
-        chevron === "start" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "matrx-disclosure-chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronRightIcon, {}) }) : null,
-        icon ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "matrx-disclosure-icon", "data-glyph-tone": glyphTone, children: icon }) : null,
-        line ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "matrx-disclosure-text", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "matrx-disclosure-title", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "matrx-disclosure-line", children: line })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "matrx-disclosure-title", children: title }),
-        meta === void 0 || meta === null || meta === false ? null : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "matrx-disclosure-meta", children: meta }),
-        end ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "matrx-disclosure-end", children: end }) : null,
-        chevron === "end" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "matrx-disclosure-chevron", "data-end": "", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronRightIcon, {}) }) : null
+        chevron === "start" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-disclosure-chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronRightIcon, {}) }) : null,
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-disclosure-icon", "data-glyph-tone": glyphTone, children: icon }) : null,
+        line ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "matrx-disclosure-text", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-disclosure-title", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-disclosure-line", children: line })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-disclosure-title", children: title }),
+        meta === void 0 || meta === null || meta === false ? null : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-disclosure-meta", children: meta }),
+        end ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-disclosure-end", children: end }) : null,
+        chevron === "end" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-disclosure-chevron", "data-end": "", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronRightIcon, {}) }) : null
       ]
     }
   )
 );
 DisclosureHeader.displayName = "DisclosureHeader";
-var DeleteButton = React14.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button2, { ref, variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Trash2Icon, {}), "data-delete": "", title: props["aria-label"], ...props }));
+var DeleteButton = React15.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button2, { ref, variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Trash2Icon, {}), "data-delete": "", title: props["aria-label"], ...props }));
 DeleteButton.displayName = "DeleteButton";
 
 // src/writing-field/voice-chrome.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function ListeningStrip({ liveTranscript, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cn("absolute flex items-center gap-1.5 px-2 py-1 rounded-md", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { "aria-hidden": true, className: "w-2 h-2 bg-primary rounded-full flex-shrink-0 animate-pulse" }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "type-secondary text-primary font-medium truncate", children: liveTranscript ? liveTranscript.slice(-60) : "Listening..." })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cn("absolute flex items-center gap-1.5 px-2 py-1 rounded-md", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { "aria-hidden": true, className: "w-2 h-2 bg-primary rounded-full flex-shrink-0 animate-pulse" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "type-secondary text-primary font-medium truncate", children: liveTranscript ? liveTranscript.slice(-60) : "Listening..." })
   ] });
 }
 function FinalizingStrip({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
       className: cn(
@@ -3196,8 +3292,8 @@ function FinalizingStrip({ className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader2Icon, { className: "w-3 h-3 animate-spin text-blue-600 dark:text-blue-400" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "type-secondary text-blue-600 dark:text-blue-400 font-medium", children: "Finalizing..." })
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loader2Icon, { className: "w-3 h-3 animate-spin text-blue-600 dark:text-blue-400" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "type-secondary text-blue-600 dark:text-blue-400 font-medium", children: "Finalizing..." })
       ]
     }
   );
@@ -3205,20 +3301,20 @@ function FinalizingStrip({ className }) {
 function VoiceProtectionDialog({ voice }) {
   const { isRecording, isTranscribing } = voice;
   const busy = isRecording || isTranscribing;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AlertDialog, { open: voice.showProtectionDialog, onOpenChange: voice.setShowProtectionDialog, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(AlertDialogContent, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(AlertDialogHeader, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center gap-3 mb-2", children: busy ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader2Icon, { className: "h-5 w-5 animate-spin text-blue-500" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AlertDialogTitle, { children: isRecording ? "Recording in Progress" : "Transcription in Progress" })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CheckIcon, { className: "h-5 w-5 text-green-500" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AlertDialogTitle, { children: "Voice Input Complete" })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AlertDialog, { open: voice.showProtectionDialog, onOpenChange: voice.setShowProtectionDialog, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(AlertDialogContent, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(AlertDialogHeader, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center gap-3 mb-2", children: busy ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loader2Icon, { className: "h-5 w-5 animate-spin text-blue-500" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AlertDialogTitle, { children: isRecording ? "Recording in Progress" : "Transcription in Progress" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CheckIcon, { className: "h-5 w-5 text-green-500" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AlertDialogTitle, { children: "Voice Input Complete" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.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__ */ (0, import_jsx_runtime22.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__ */ (0, import_jsx_runtime21.jsx)(AlertDialogFooter, { children: busy ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AlertDialogCancel, { onClick: voice.cancelClose, children: "Cancel & Wait" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AlertDialogFooter, { children: busy ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AlertDialogCancel, { onClick: voice.cancelClose, children: "Cancel & Wait" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         AlertDialogAction,
         {
           onClick: voice.confirmClose,
@@ -3226,7 +3322,7 @@ function VoiceProtectionDialog({ voice }) {
           children: isRecording ? "Stop Recording" : "End Transcription"
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AlertDialogAction, { onClick: voice.confirmClose, children: "Close" }) })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AlertDialogAction, { onClick: voice.confirmClose, children: "Close" }) })
   ] }) });
 }
 function FieldMenuRow({
@@ -3235,7 +3331,7 @@ function FieldMenuRow({
   onClick,
   disabled
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     Tile,
     {
       type: "button",
@@ -3253,352 +3349,6 @@ function micAriaLabel(isRecording, label) {
   return label ? `Start voice input for ${label}` : "Start voice input";
 }
 
-// src/writing-field/add-ons.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var ADD_ON_PROP_NAMES = [
-  "surfaceName",
-  "getApplicationScope",
-  "sourceFeature",
-  "surfaceContextItems",
-  "enableBoundAgents",
-  "enableContextMenu",
-  "enableCleanup",
-  "cleanupAgentId",
-  "cleanupContextItems",
-  "enableHelpWithThis",
-  "helpMandateKey",
-  "helpContextItems",
-  "enableCustomAgent",
-  "customAgentMandateKey",
-  "customAgentContextItems",
-  "uploadImage"
-];
-function splitAddOnProps(props, extra = []) {
-  const dom = {};
-  const addOnProps = {};
-  for (const [key, value] of Object.entries(props)) {
-    if (ADD_ON_PROP_NAMES.includes(key) || extra.includes(key)) addOnProps[key] = value;
-    else dom[key] = value;
-  }
-  return { dom, addOnProps };
-}
-var KEY = /* @__PURE__ */ Symbol.for("@ai-matrx/design-system/writing-field-door");
-var registry3 = globalThis;
-var DoorContext = registry3[KEY] ?? (registry3[KEY] = React15.createContext(null));
-var EMPTY = {};
-var NO_LIGHT = {};
-function WritingFieldAddOnsProvider({
-  addOns,
-  load,
-  light = NO_LIGHT,
-  children
-}) {
-  const first = React15.useRef(addOns);
-  if (addOns && 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 = React15.useRef(load);
-  const [loaded, setLoaded] = React15.useState(first.current ?? null);
-  const [failed, setFailed] = React15.useState(false);
-  const inflight = React15.useRef(null);
-  const engage = React15.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 = React15.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 = React15.useMemo(
-    () => ({ addOns: loaded, pending, failed, light, engage, effective: loaded ?? (pending ? pendingSet : EMPTY) }),
-    [loaded, pending, failed, light, engage, pendingSet]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(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 React15.useContext(DoorContext) ?? NO_DOOR;
-}
-function useWritingFieldAddOns() {
-  return useDoor().effective;
-}
-function useWritingFieldDoor() {
-  const door = useDoor();
-  return { pending: door.pending, failed: door.failed, engage: door.engage };
-}
-function announceMissingPort(port) {
-  announceStandIn(
-    `writing-field:${port}`,
-    `A writing field drew without its "${port}" add-on: the host did not register it in <WritingFieldAddOnsProvider addOns={{ ${port} }}>.`
-  );
-}
-var INERT = () => void 0;
-function useStandInVoice(options) {
-  React15.useEffect(() => {
-    if (options.enabled) announceMissingPort("useVoice");
-  }, [options.enabled]);
-  return {
-    microphone: false,
-    available: false,
-    isRecording: false,
-    isTranscribing: false,
-    audioLevel: 0,
-    liveTranscript: "",
-    handleVoiceClick: INERT,
-    startDictation: async () => void 0,
-    stopDictation: INERT,
-    requestClose: () => options.onRequestClose?.(),
-    showProtectionDialog: false,
-    setShowProtectionDialog: INERT,
-    confirmClose: () => options.onRequestClose?.(),
-    cancelClose: INERT
-  };
-}
-var STAND_IN_NOTIFY = {
-  error: (message) => {
-    announceMissingPort("notify");
-    console.error(`[writing-field] ${message}`);
-  },
-  info: (message) => {
-    announceMissingPort("notify");
-    console.info(`[writing-field] ${message}`);
-  },
-  success: (message) => {
-    announceMissingPort("notify");
-    console.info(`[writing-field] ${message}`);
-  }
-};
-function useNoFormatting() {
-}
-function useNoAudioSettings() {
-  return () => announceMissingPort("useOpenAudioSettings");
-}
-function resolveHookPorts(addOns) {
-  return {
-    useVoice: addOns.useVoice ?? useStandInVoice,
-    useFormatting: addOns.useFormatting ?? useNoFormatting,
-    useOpenAudioSettings: addOns.useOpenAudioSettings ?? useNoAudioSettings,
-    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 = React15.useRef({ voice: null, openAudioSettings: null, queue: [], options: null, drain: null }).current;
-  const [snapshot, setSnapshot] = React15.useState(null);
-  const [micApi, setMicApi] = React15.useState(false);
-  React15.useEffect(() => {
-    if (!live) setMicApi(typeof navigator !== "undefined" && !!navigator.mediaDevices?.getUserMedia);
-  }, [live]);
-  const fns = React15.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__ */ (0, import_jsx_runtime22.jsx)(
-      PortRunner,
-      {
-        addOns,
-        voiceOptions: args.voice,
-        formatting: args.formatting ?? null,
-        shared,
-        publish: setSnapshot
-      }
-    ) : null
-  };
-}
-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 = React15.useRef(null);
-  React15.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);
-    }
-  });
-  React15.useEffect(() => {
-    if (shared.queue.length) shared.drain?.();
-  });
-  React15.useEffect(
-    () => () => {
-      shared.voice = null;
-      shared.openAudioSettings = null;
-      shared.drain = null;
-    },
-    [shared]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { 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__ */ (0, import_jsx_runtime22.jsx)("div", { className: cn("relative mx-[3px] inline-flex shrink-0 items-center", dense ? "h-6" : "h-7 pointer-coarse:h-10"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cn("relative flex items-stretch rounded-full", dense ? "h-6" : "h-7 pointer-coarse:h-9"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    Button,
-    {
-      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__ */ (0, import_jsx_runtime22.jsx)(MicIcon, { className: dense ? "h-3.5 w-3.5" : "h-4 w-4" })
-    }
-  ) }) });
-}
-function PendingMenu({ ownRows, trailingRows }) {
-  const { engage, failed } = useWritingFieldDoor();
-  React15.useEffect(() => {
-    void engage();
-  }, [engage]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex w-48 flex-col p-1", "data-writing-field-host": "pending", children: [
-    ownRows,
-    failed ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FieldMenuRow, { icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(RotateCcwIcon, {}), onClick: () => void engage(), children: "Actions did not load. Retry" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center justify-center py-2 text-muted-foreground", role: "status", "aria-label": "Loading actions", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loader2Icon, { className: "h-4 w-4 animate-spin" }) }),
-    trailingRows
-  ] });
-}
-
 // src/writing-field/pro-textarea.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var FILL_HEIGHT_REGEX2 = /(?:^|\s)(h-full|h-dvh|flex-1|grow|inset-0|min-h-0)(?:\s|$)/;
@@ -3652,7 +3402,7 @@ var ProTextarea = React16.forwardRef(
     ...rest
   }, ref) => {
     const addOns = useWritingFieldAddOns();
-    const ports = useFieldPorts(addOns);
+    const ports = resolveHookPorts(addOns);
     const { dom: props, addOnProps } = splitAddOnProps(
       rest,
       addOns.propNames
@@ -3716,51 +3466,11 @@ var ProTextarea = React16.forwardRef(
     const [showTextStatsBar, setShowTextStatsBar] = React16.useState(defaultShowTextStatsBar);
     const internalRef = React16.useRef(null);
     const textareaRef = internalRef;
-    const handoff = React16.useRef(null);
-    const valueRef = React16.useRef(value);
-    valueRef.current = value;
-    const setTextareaRef = React16.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 = React16.useRef(null);
-    const holdContextMenuUntilLoaded = (e) => {
-      e.preventDefault();
-      heldContextMenu.current = { x: e.clientX, y: e.clientY };
-      void ports.engage();
     };
-    React16.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] = React16.useState(null);
     React16.useLayoutEffect(() => {
@@ -3952,8 +3662,8 @@ var ProTextarea = React16.forwardRef(
     const Stats = addOns.TextStats;
     const showTextStats = enableTextStats && showMenu && !!Stats;
     React16.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);
     React16.useEffect(() => {
@@ -4141,11 +3851,7 @@ var ProTextarea = React16.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);
@@ -4234,7 +3940,6 @@ var ProTextarea = React16.forwardRef(
             enableVoice && isTranscribing && !isRecording && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FinalizingStrip, { className: inlineControls ? "left-0 bottom-full mb-1.5" : "left-2 bottom-2" })
           ] }),
           voice.dialogs,
-          ports.renderRunner(),
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(VoiceProtectionDialog, { voice }),
           showPinnedTextStatsBar && Stats ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "hidden sm:block", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Stats.Bar, { text: valueAsString }) }) : null
         ] })
@@ -4336,7 +4041,7 @@ var ProInput = React17.forwardRef(
     ...rest
   }, ref) => {
     const addOns = useWritingFieldAddOns();
-    const ports = useFieldPorts(addOns);
+    const ports = resolveHookPorts(addOns);
     const { dom: props, addOnProps } = splitAddOnProps(rest, addOns.propNames);
     const generatedId = React17.useId();
     const { size: _nativeSize, width: nativeWidth, style: nativeStyle, ...fieldProps } = props;
@@ -4576,10 +4281,7 @@ var ProInput = React17.forwardRef(
       "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);
@@ -4714,7 +4416,6 @@ var ProInput = React17.forwardRef(
             /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "type-secondary text-primary font-medium truncate", children: voice.liveTranscript ? voice.liveTranscript.slice(-60) : "Listening..." })
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FinalizingStrip, { className: "relative" }) }),
           voice.dialogs,
-          ports.renderRunner(),
           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(VoiceProtectionDialog, { voice })
         ]
       }