@ai-matrx/rich-content 0.2.53 → 0.2.55

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.2.55
+
+- Transform works on the rich-document bar (chat answers, notes). `ExportPaletteAnchor` kept ONE opener per key, and two bars for one document share `instanceKey("alchemy")`: the newest overwrote the rest and, on unmount, deleted the key while the bar on screen still needed it. The registry now keeps every anchor per key (newest on-screen wins, on `globalThis`), and `openerRef` hands each host its own anchor — the bar's Transform opens its own palette. Guard: `copy/__tests__/export-palette-anchor.test.tsx`.
+- `ContentActionMenuRows` — the set's rows (Plain, the five exports, Print, Transform) for a host whose phone bar already has a ⋯ sheet; the set's own "…" renders the same rows.
+- Plain's tooltip reads "Show source text" (it shows the exact source — a JSON answer shows its JSON).
+
+Consumer action: none.
+
+## 0.2.54
+
+- `RemoteImageGate` (every image the core draws, `DurableMarkdownImg` included) waits for the app's lazy host (`RichContentHostGate`) before it reads the knob hooks. Rendered before the host landed — Write's image island after a reload, whose node view sits outside any gate — it ran the bare defaults, then the app's hooks on the next render: React refused ("Rendered more hooks") and the image vanished.
+
+Consumer action: none.
+
 ## 0.2.53
 
 - `RichDocumentActions` / `ActionBar` take `contentActions={false}` for a host whose own bar already carries the content action set for the same item (a `<RichCopySplit>` beside it), so Copy, Export, Print and Transform show once.

package/dist/copy/ContentActions.d.ts

@@ -30,6 +30,18 @@ export interface ContentActionsProps {
     className?: string;
 }
 export declare function ContentActions({ content, title, copy, viewKey, onTransform, exporters, onPrint, label, size, preserveSelection, disabled, className, }: ContentActionsProps): React.ReactElement;
+export interface ContentActionMenuRowsProps extends Pick<ContentActionsProps, "content" | "title" | "viewKey" | "onTransform" | "exporters" | "onPrint"> {
+    /** Close the host's menu / sheet (called before the action runs). */
+    onDone?: () => void;
+    /** Row class (a bottom sheet wants 44px rows). */
+    rowClassName?: string;
+}
+/**
+ * The set's rows — Plain, PDF · Word · HTML · Markdown file · Text file, Print, Transform — each ONE tap.
+ * The set's own phone "…" renders them; a host whose phone bar already has a ⋯ sheet (the note dock)
+ * renders them there instead of a second "…".
+ */
+export declare function ContentActionMenuRows({ content, title, viewKey, onTransform, exporters, onPrint, onDone, rowClassName, }: ContentActionMenuRowsProps): React.ReactElement;
 /** The exact source, shown in place of the render: monospace, wrapped, selectable. */
 export declare function PlainTextView({ text, className }: {
     text: string;

package/dist/copy/ContentActions.js

@@ -42,7 +42,7 @@ function ContentActions({
     void (own ? own() : exportContent(read(), format, title));
   };
   const runPrint = () => void (onPrint ? onPrint() : printContent(read(), title));
-  const plainName = plain ? "Show formatted" : "Show plain text";
+  const plainName = plain ? "Show formatted" : "Show source text";
   const PlainIcon = plain ? BookOpen : Code2;
   const exportRows = (close) => CONTENT_EXPORT_FORMATS.map(({ format, label: rowLabel }) => /* @__PURE__ */ jsxs(
     "button",
@@ -140,65 +140,95 @@ function ContentActions({
               children: /* @__PURE__ */ jsx(MoreHorizontal, { className: iconSize })
             }
           ) }),
-          /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "w-auto min-w-52 p-1", "data-content-actions-sheet": "", children: /* @__PURE__ */ jsxs("div", { role: "menu", "aria-label": "Content actions", children: [
-            viewKey ? /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                role: "menuitem",
-                "data-content-plain-toggle": plain ? "plain" : "formatted",
-                onClick: () => {
-                  setMoreOpen(false);
-                  togglePlainView(viewKey);
-                },
-                className: menuRow,
-                children: [
-                  /* @__PURE__ */ jsx(PlainIcon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-                  /* @__PURE__ */ jsx("span", { className: "flex-1", children: plainName })
-                ]
-              }
-            ) : null,
-            exportRows(() => setMoreOpen(false)),
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                role: "menuitem",
-                "data-content-print": "",
-                onClick: () => {
-                  setMoreOpen(false);
-                  runPrint();
-                },
-                className: menuRow,
-                children: [
-                  /* @__PURE__ */ jsx(Printer, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-                  /* @__PURE__ */ jsx("span", { className: "flex-1", children: "Print" })
-                ]
-              }
-            ),
-            onTransform ? /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                role: "menuitem",
-                "data-content-transform": "",
-                onClick: () => {
-                  setMoreOpen(false);
-                  onTransform();
-                },
-                className: menuRow,
-                children: [
-                  /* @__PURE__ */ jsx(WandSparkles, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-                  /* @__PURE__ */ jsx("span", { className: "flex-1", children: "Transform" })
-                ]
-              }
-            ) : null
-          ] }) })
+          /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "w-auto min-w-52 p-1", "data-content-actions-sheet": "", children: /* @__PURE__ */ jsx("div", { role: "menu", "aria-label": "Content actions", children: /* @__PURE__ */ jsx(
+            ContentActionMenuRows,
+            {
+              content: read,
+              title,
+              viewKey,
+              onTransform,
+              exporters,
+              onPrint,
+              onDone: () => setMoreOpen(false)
+            }
+          ) }) })
         ] })
       ]
     }
   );
 }
+function ContentActionMenuRows({
+  content,
+  title,
+  viewKey,
+  onTransform,
+  exporters,
+  onPrint,
+  onDone,
+  rowClassName
+}) {
+  const read = () => typeof content === "function" ? content() : content;
+  const plain = usePlainView(viewKey);
+  const plainName = plain ? "Show formatted" : "Show source text";
+  const PlainIcon = plain ? BookOpen : Code2;
+  const row = cn(menuRow, rowClassName);
+  const run = (action) => () => {
+    onDone?.();
+    void action();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    viewKey ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        "data-content-plain-toggle": plain ? "plain" : "formatted",
+        onClick: run(() => togglePlainView(viewKey)),
+        className: row,
+        children: [
+          /* @__PURE__ */ jsx(PlainIcon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1", children: plainName })
+        ]
+      }
+    ) : null,
+    CONTENT_EXPORT_FORMATS.map(({ format, label: rowLabel }) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        "data-content-export": format,
+        onClick: run(() => {
+          const own = exporters?.[format];
+          return own ? own() : exportContent(read(), format, title);
+        }),
+        className: row,
+        children: [
+          /* @__PURE__ */ jsx(Download, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1", children: rowLabel })
+        ]
+      },
+      format
+    )),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        "data-content-print": "",
+        onClick: run(() => onPrint ? onPrint() : printContent(read(), title)),
+        className: row,
+        children: [
+          /* @__PURE__ */ jsx(Printer, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1", children: "Print" })
+        ]
+      }
+    ),
+    onTransform ? /* @__PURE__ */ jsxs("button", { type: "button", role: "menuitem", "data-content-transform": "", onClick: run(onTransform), className: row, children: [
+      /* @__PURE__ */ jsx(WandSparkles, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ jsx("span", { className: "flex-1", children: "Transform" })
+    ] }) : null
+  ] });
+}
 function PlainTextView({ text, className }) {
   return /* @__PURE__ */ jsx(
     "pre",
@@ -224,6 +254,7 @@ function ContentView({
 }
 var ContentActions_default = ContentActions;
 export {
+  ContentActionMenuRows,
   ContentActions,
   ContentView,
   PlainTextView,

package/dist/copy/ExportPalette.d.ts

@@ -2,16 +2,21 @@ import * as React from "react";
 import type { ContentTransferController } from "@ai-matrx/alchemy/react/workspace";
 /** Is an export palette mounted for this key (a ⋯ "Export…" row shows only then)? */
 export declare function hasExportPalette(key: string): boolean;
-/** Open the export palette mounted under `key`. False when nothing is mounted there. */
+/** Open the export palette mounted under `key` (the newest one on screen). False when nothing is mounted there. */
 export declare function openExportPalette(key: string): boolean;
 export interface ExportPaletteAnchorProps {
     /** The key a ⋯ "Export…" row opens this palette by (the document's `instanceKey("alchemy")`). */
     exportKey?: string;
     /** The host's hidden ContentTransferMenu — the palette that mounts here. */
     controllerRef: React.RefObject<ContentTransferController | null>;
+    /**
+     * Receives THIS anchor's opener. A host's own Transform calls it so it always opens its own
+     * palette, never another anchor that shares the key.
+     */
+    openerRef?: React.MutableRefObject<(() => void) | null>;
     className?: string;
 }
-export declare function ExportPaletteAnchor({ exportKey, controllerRef, className, }: ExportPaletteAnchorProps): React.ReactElement;
+export declare function ExportPaletteAnchor({ exportKey, controllerRef, openerRef, className, }: ExportPaletteAnchorProps): React.ReactElement;
 /** A key for a host that opens its own anchor (the split Copy's "Export…" row). */
 export declare function useExportPaletteKey(): string;
 export default ExportPaletteAnchor;

package/dist/copy/ExportPalette.js

@@ -2,35 +2,46 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Popover, PopoverAnchor, PopoverContent, cn } from "@ai-matrx/design-system";
-const hosts = /* @__PURE__ */ new Map();
+const hosts = globalThis[/* @__PURE__ */ Symbol.for("ai-matrx.rich-content.export-palette-hosts")] ??= /* @__PURE__ */ new Map();
+function onScreen(element) {
+  return Boolean(element?.isConnected && element.getClientRects().length > 0);
+}
 function hasExportPalette(key) {
-  return hosts.has(key);
+  return (hosts.get(key)?.length ?? 0) > 0;
 }
 function openExportPalette(key) {
-  const open = hosts.get(key);
-  if (!open) return false;
-  open();
+  const list = hosts.get(key);
+  if (!list?.length) return false;
+  const visible = [...list].reverse().find((entry) => onScreen(entry.anchor()));
+  (visible ?? list[list.length - 1]).open();
   return true;
 }
 function ExportPaletteAnchor({
   exportKey,
   controllerRef,
+  openerRef,
   className
 }) {
   const [open, setOpen] = React.useState(false);
+  const anchorRef = React.useRef(null);
   React.useEffect(() => {
-    if (!exportKey) return;
     const opener = () => {
       window.setTimeout(() => setOpen(true), 0);
     };
-    hosts.set(exportKey, opener);
+    if (openerRef) openerRef.current = opener;
+    const entry = { open: opener, anchor: () => anchorRef.current };
+    if (exportKey) hosts.set(exportKey, [...hosts.get(exportKey) ?? [], entry]);
     return () => {
-      if (hosts.get(exportKey) === opener) hosts.delete(exportKey);
+      if (openerRef?.current === opener) openerRef.current = null;
+      if (!exportKey) return;
+      const rest = (hosts.get(exportKey) ?? []).filter((other) => other !== entry);
+      if (rest.length) hosts.set(exportKey, rest);
+      else hosts.delete(exportKey);
     };
-  }, [exportKey]);
+  }, [exportKey, openerRef]);
   const close = React.useCallback(() => setOpen(false), []);
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, "data-export-palette-anchor": "", className: cn("inline-block h-0 w-0", className) }) }),
+    /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx("span", { ref: anchorRef, "aria-hidden": true, "data-export-palette-anchor": "", className: cn("inline-block h-0 w-0", className) }) }),
     /* @__PURE__ */ jsx(
       PopoverContent,
       {

package/dist/levels/prose/remote-image-policy.d.ts

@@ -25,8 +25,14 @@ export declare function remoteImageHost(src: string): string | null;
 /**
  * Renders `children` (the real image) when it may load; otherwise the
  * click-to-load placeholder. `block` lays the placeholder out as a line.
+ *
+ * It reads the app's knob hooks, so it waits for the app's lazy host first
+ * (RichContentHostGate): rendered before the host lands it would run the bare
+ * defaults, then the app's hooks on the next render — a different hook list
+ * React refuses, and the image vanished. Write's image island hit exactly that
+ * after a reload (its node view mounts outside any gate); Read sits behind one.
  */
-export declare function RemoteImageGate({ src, alt, block, children, }: {
+export declare function RemoteImageGate(props: {
     src: string;
     alt?: string;
     block?: boolean;

package/dist/levels/prose/remote-image-policy.js

@@ -5,6 +5,7 @@ import { ImageOff } from "lucide-react";
 import { recognizeOurFileUrl } from "@ai-matrx/media/files/engine/media/our-file-sources";
 import { imageKnobPrincipals as sessionKnobPrincipals, setImageKnobMapEntry as setUserKnobMapEntry, useImageKnob as useEffectiveKnob } from "../../host/app-bindings.js";
 import { ErrorNotice } from "../../host/ErrorNotice.js";
+import { RichContentHostGate } from "../../host/RichContentHostGate.js";
 function withImagePolicy(declaration, node) {
   return declaration && declaration !== "inherit" ? /* @__PURE__ */ jsx(ImagePolicyProvider, { value: declaration, children: node }) : node;
 }
@@ -47,7 +48,10 @@ function remoteImageHost(src) {
 function asHostMap(v) {
   return v && typeof v === "object" && !Array.isArray(v) ? v : {};
 }
-function RemoteImageGate({
+function RemoteImageGate(props) {
+  return /* @__PURE__ */ jsx(RichContentHostGate, { fallback: /* @__PURE__ */ jsx("span", { "data-rc-image-waiting": "", "aria-label": props.alt || "Image" }), children: /* @__PURE__ */ jsx(RemoteImageGateWithHost, { ...props }) });
+}
+function RemoteImageGateWithHost({
   src,
   alt,
   block = false,

package/dist/rich-document/variants/ActionBar.js

@@ -33,6 +33,7 @@ function ActionBar(props) {
   const oneMenu = useOneMenuFor(getCtx().source);
   const hasCopy = actions.some((action) => action.category === "copy");
   const palette = React.useRef(null);
+  const openOwnPalette = React.useRef(null);
   const copy = React.useCallback((flavor) => runDocumentCopy(actions, getCtx, flavor), [actions, getCtx]);
   const exporters = React.useMemo(() => {
     const out = {};
@@ -67,7 +68,7 @@ function ActionBar(props) {
               viewKey: sourceId,
               exporters,
               onPrint: printAction ? () => printAction.run(getCtx()) : void 0,
-              onTransform: () => void openExportPalette(sourceId)
+              onTransform: () => openOwnPalette.current ? openOwnPalette.current() : void openExportPalette(sourceId)
             }
           ) : null,
           /* @__PURE__ */ jsx(
@@ -93,7 +94,7 @@ function ActionBar(props) {
             hideOverflow: true
           }
         ),
-        hasCopy ? /* @__PURE__ */ jsx(ExportPaletteAnchor, { exportKey: sourceId, controllerRef: palette }) : null,
+        hasCopy ? /* @__PURE__ */ jsx(ExportPaletteAnchor, { exportKey: sourceId, controllerRef: palette, openerRef: openOwnPalette }) : null,
         hideOverflow ? null : oneMenu ? /* @__PURE__ */ jsx(OpenOneMenuButton, { source: getCtx().source }) : /* @__PURE__ */ jsx(StandaloneOneMenu, { getCtx, target })
       ]
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/rich-content",
-  "version": "0.2.53",
+  "version": "0.2.55",
   "description": "The AI Matrx formatted-text engine: the one markdown renderer, streaming markdown, the block splitter and renderer, the generic blocks, <RichContent> levels, the rich-document action registry and menus, copy, and the selection toolbar — as portable React.",
   "type": "module",
   "license": "MIT",
@@ -133,16 +133,16 @@
     "@ai-matrx/agents": "latest",
     "@ai-matrx/alchemy": "latest",
     "@ai-matrx/canvas": "latest",
+    "@ai-matrx/content-ir": "latest",
     "@ai-matrx/content-ir-react": "latest",
     "@ai-matrx/data": "latest",
-    "@ai-matrx/content-ir": "latest",
     "@ai-matrx/design-system": "latest",
     "@ai-matrx/diff": "latest",
-    "@ai-matrx/kit": "latest",
     "@ai-matrx/icons": "latest",
+    "@ai-matrx/kit": "latest",
     "@ai-matrx/media": "latest",
-    "@ai-matrx/records": "latest",
     "@ai-matrx/print": "latest",
+    "@ai-matrx/records": "latest",
     "@ai-matrx/records-ui": "latest",
     "@ai-matrx/tap-target": "latest"
   },