@ai-matrx/rich-content 0.2.39 → 0.2.41

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.2.41
+
+- **Copy is two rows.** `CopySplitButton`'s chevron menu is exactly "Copy markdown" and "Copy plain text"; the `mountMore` slot (the Alchemy palette under the chevron) is removed.
+- **"Export…" holds the palette.** New `copy/ExportPalette` (`ExportPaletteAnchor`, `openExportPalette`, `hasExportPalette`) and the registry action `export-palette` ("Export…", ⋯ menu). `ActionBar` mounts the anchor at its ⋯; with `hideOverflow` the anchor is its own "Export…" icon. Formatted, JSON, download and AI are unchanged — they moved, nothing was removed.
+- **One compact selection row.** The mode table gains `SELECTION_PRIMARY` (the only actions that take a button) and `SELECTION_MAX_VISIBLE = 6`. Reading: Copy · Highlight · Comment · Ask AI · More. Editing: Copy · Bold · Italic · Link · Ask AI · More. The five `selection:highlight-<colour>` ids are replaced by one `selection:highlight` that opens the colours.
+
+**Consumer action:** stop passing `mountMore`; register one `selection:highlight` action (a colour panel) instead of five colour actions; a surface with no ⋯ menu renders `<ExportPaletteAnchor trigger controllerRef=…/>` beside its split Copy.
+
+## 0.2.40
+
+- The selection toolbar's outer strip is `role="group"`, not a second `role=toolbar` wrapped around the real SelectionToolbar: one toolbar on screen.
+
+**Consumer action:** none.
+
 ## 0.2.39
 
 - The selection toolbar's mode table knows `selection:format-color` (edit mode): text colour is a registered format action, so an editor whose engine has colour (the Spaces editor) offers it in the one toolbar instead of a second bubble.

package/dist/copy/CopySplitButton.d.ts

@@ -7,8 +7,6 @@ export interface CopySplitButtonProps {
     label?: string;
     /** "sm" (32px, an action bar) or "xs" (28px, a dense strip). */
     size?: "sm" | "xs";
-    /** Mount more copy options (the Alchemy palette) under the two rows; called with null on close. */
-    mountMore?: (element: HTMLElement | null, close: () => void) => void;
     /**
      * Render only the chevron and its menu — for a host whose main control is already its own one-click
      * tile (the phone note dock). Same rows, same "Default" tag, same copy module; the host positions it
@@ -20,5 +18,5 @@ export interface CopySplitButtonProps {
     disabled?: boolean;
     className?: string;
 }
-export declare function CopySplitButton({ copy, label, size, mountMore, moreOnly, preserveSelection, disabled, className, }: CopySplitButtonProps): React.ReactElement;
+export declare function CopySplitButton({ copy, label, size, moreOnly, preserveSelection, disabled, className, }: CopySplitButtonProps): React.ReactElement;
 export default CopySplitButton;

package/dist/copy/CopySplitButton.js

@@ -12,7 +12,6 @@ function CopySplitButton({
   copy,
   label = "Copy",
   size = "sm",
-  mountMore,
   moreOnly = false,
   preserveSelection = false,
   disabled = false,
@@ -32,7 +31,6 @@ function CopySplitButton({
     if (timer.current) clearTimeout(timer.current);
     timer.current = setTimeout(() => setCopied(null), 1600);
   };
-  const close = React.useCallback(() => setOpen(false), []);
   const keep = preserveSelection ? (event) => event.preventDefault() : void 0;
   const mainName = `${label} (${flavor === "text" ? "plain text" : "markdown"})`;
   const box = size === "xs" ? "h-7" : "h-8";
@@ -88,36 +86,33 @@ function CopySplitButton({
               children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" })
             }
           ) }),
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(
             PopoverContent,
             {
               align: "start",
               className: "w-auto min-w-60 max-w-[min(24rem,calc(100vw-16px))] p-1",
               onOpenAutoFocus: preserveSelection ? (event) => event.preventDefault() : void 0,
               "data-copy-split-menu": "",
-              children: [
-                /* @__PURE__ */ jsx("div", { role: "menu", "aria-label": "Copy as", children: ROWS.map(({ flavor: rowFlavor, label: rowLabel, icon: Icon }) => /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    role: "menuitem",
-                    "data-copy-flavor": rowFlavor,
-                    onMouseDown: keep,
-                    onClick: () => {
-                      setOpen(false);
-                      void run(rowFlavor);
-                    },
-                    className: "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm hover:bg-accent",
-                    children: [
-                      /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-                      /* @__PURE__ */ jsx("span", { className: "flex-1", children: rowLabel }),
-                      rowFlavor === flavor ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Default" }) : null
-                    ]
+              children: /* @__PURE__ */ jsx("div", { role: "menu", "aria-label": "Copy as", children: ROWS.map(({ flavor: rowFlavor, label: rowLabel, icon: Icon }) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  "data-copy-flavor": rowFlavor,
+                  onMouseDown: keep,
+                  onClick: () => {
+                    setOpen(false);
+                    void run(rowFlavor);
                   },
-                  rowFlavor
-                )) }),
-                mountMore ? /* @__PURE__ */ jsx(MoreSlot, { mount: mountMore, close }) : null
-              ]
+                  className: "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm hover:bg-accent",
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+                    /* @__PURE__ */ jsx("span", { className: "flex-1", children: rowLabel }),
+                    rowFlavor === flavor ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Default" }) : null
+                  ]
+                },
+                rowFlavor
+              )) })
             }
           )
         ] })
@@ -125,24 +120,6 @@ function CopySplitButton({
     }
   );
 }
-function MoreSlot({ mount, close }) {
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    const element = ref.current;
-    try {
-      mount(element, close);
-    } catch (error) {
-      console.error("[copy] more copy options could not open:", error);
-    }
-    return () => {
-      try {
-        mount(null, close);
-      } catch {
-      }
-    };
-  }, [mount, close]);
-  return /* @__PURE__ */ jsx("div", { ref, "data-copy-split-more-slot": "", className: "mt-1 border-t border-border pt-1 empty:hidden" });
-}
 var CopySplitButton_default = CopySplitButton;
 export {
   CopySplitButton,

package/dist/copy/ExportPalette.d.ts

@@ -0,0 +1,20 @@
+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. */
+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>;
+    /** Render a visible "Export…" icon button (a surface with no ⋯ menu of its own). */
+    trigger?: boolean;
+    /** What is exported, for the trigger's name ("Export note"). */
+    label?: string;
+    size?: "sm" | "xs";
+    className?: string;
+}
+export declare function ExportPaletteAnchor({ exportKey, controllerRef, trigger, label, size, className, }: ExportPaletteAnchorProps): React.ReactElement;
+export default ExportPaletteAnchor;

package/dist/copy/ExportPalette.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Share } from "lucide-react";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, cn } from "@ai-matrx/design-system";
+const hosts = /* @__PURE__ */ new Map();
+function hasExportPalette(key) {
+  return hosts.has(key);
+}
+function openExportPalette(key) {
+  const open = hosts.get(key);
+  if (!open) return false;
+  open();
+  return true;
+}
+function ExportPaletteAnchor({
+  exportKey,
+  controllerRef,
+  trigger = false,
+  label,
+  size = "sm",
+  className
+}) {
+  const [open, setOpen] = React.useState(false);
+  React.useEffect(() => {
+    if (!exportKey) return;
+    const opener = () => {
+      window.setTimeout(() => setOpen(true), 0);
+    };
+    hosts.set(exportKey, opener);
+    return () => {
+      if (hosts.get(exportKey) === opener) hosts.delete(exportKey);
+    };
+  }, [exportKey]);
+  const close = React.useCallback(() => setOpen(false), []);
+  const name = `Export${label ? ` ${label}` : ""}\u2026`;
+  const box = size === "xs" ? "h-7 min-w-7" : "h-8 min-w-8";
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    trigger ? /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": name,
+        title: "Export\u2026",
+        "data-export-palette-trigger": "",
+        "data-matrx-button": "",
+        "data-tap-floor": "",
+        "data-tap-floor-square": "",
+        className: cn(
+          "inline-flex shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground pointer-coarse:h-11 pointer-coarse:min-w-11",
+          box,
+          className
+        ),
+        children: /* @__PURE__ */ jsx(Share, { className: size === "xs" ? "h-3.5 w-3.5" : "h-4 w-4" })
+      }
+    ) }) : /* @__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(
+      PopoverContent,
+      {
+        align: "end",
+        className: "w-auto min-w-60 max-w-[min(24rem,calc(100vw-16px))] p-1",
+        "data-export-palette": "",
+        children: open ? /* @__PURE__ */ jsx(PaletteSlot, { controllerRef, close }) : null
+      }
+    )
+  ] });
+}
+function PaletteSlot({
+  controllerRef,
+  close
+}) {
+  const ref = React.useRef(null);
+  const [failed, setFailed] = React.useState(null);
+  React.useEffect(() => {
+    const element = ref.current;
+    try {
+      if (!controllerRef.current) throw new Error("Export is unavailable here.");
+      controllerRef.current.mountPalette(element, close);
+    } catch (error) {
+      setFailed(error instanceof Error ? error.message : "Export is unavailable here.");
+    }
+    return () => {
+      try {
+        controllerRef.current?.mountPalette(null);
+      } catch {
+      }
+    };
+  }, [controllerRef, close]);
+  return /* @__PURE__ */ jsx("div", { ref, "data-export-palette-slot": "", children: failed ? /* @__PURE__ */ jsx("p", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: failed }) : null });
+}
+var ExportPalette_default = ExportPaletteAnchor;
+export {
+  ExportPaletteAnchor,
+  ExportPalette_default as default,
+  hasExportPalette,
+  openExportPalette
+};

package/dist/rich-document/actions/export-palette-action.d.ts

@@ -0,0 +1,5 @@
+import type { RichDocumentAction } from "../types.js";
+export declare const EXPORT_PALETTE_ACTION_ID = "export-palette";
+export declare const EXPORT_PALETTE_ACTION: RichDocumentAction;
+/** Idempotent: the bar calls this on load. */
+export declare function ensureExportPaletteAction(): void;

package/dist/rich-document/actions/export-palette-action.js

@@ -0,0 +1,26 @@
+import { Share } from "lucide-react";
+import { getAction, registerAction } from "./provider.js";
+import { hasExportPalette, openExportPalette } from "../../copy/ExportPalette.js";
+const EXPORT_PALETTE_ACTION_ID = "export-palette";
+const EXPORT_PALETTE_ACTION = {
+  id: EXPORT_PALETTE_ACTION_ID,
+  label: "Export\u2026",
+  icon: Share,
+  category: "export",
+  supportedSources: "*",
+  renderSlot: "overflow",
+  order: 0,
+  visible: (ctx) => hasExportPalette(ctx.instanceKey("alchemy")),
+  run: (ctx) => {
+    openExportPalette(ctx.instanceKey("alchemy"));
+  }
+};
+function ensureExportPaletteAction() {
+  if (getAction(EXPORT_PALETTE_ACTION_ID)) return;
+  registerAction(EXPORT_PALETTE_ACTION);
+}
+export {
+  EXPORT_PALETTE_ACTION,
+  EXPORT_PALETTE_ACTION_ID,
+  ensureExportPaletteAction
+};

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

@@ -7,8 +7,11 @@ import { cn } from "@ai-matrx/design-system";
 import { AlchemyDocumentMenu } from "./shared/AlchemyDocumentMenu.js";
 import { CopySplitButton } from "../../copy/CopySplitButton.js";
 import { copyRichContent } from "../../copy/copy-commands.js";
+import { ExportPaletteAnchor } from "../../copy/ExportPalette.js";
+import { ensureExportPaletteAction } from "../actions/export-palette-action.js";
 import { OpenOneMenuButton, useOneMenuFor } from "./shared/OpenOneMenuButton.js";
 import { StandaloneOneMenu } from "./shared/StandaloneOneMenu.js";
+ensureExportPaletteAction();
 const BAR_RESTRICT = { exclude: ["copy"] };
 const SPLIT_COPY_ACTION_IDS = {
   markdown: "copy-markdown",
@@ -26,9 +29,6 @@ function ActionBar(props) {
   const hasCopy = actions.some((action) => action.category === "copy");
   const palette = React.useRef(null);
   const copy = React.useCallback((flavor) => runDocumentCopy(actions, getCtx, flavor), [actions, getCtx]);
-  const mountMore = React.useCallback((element, close) => {
-    palette.current?.mountPalette(element, close);
-  }, []);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -43,7 +43,7 @@ function ActionBar(props) {
       ),
       children: [
         hasCopy ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(CopySplitButton, { copy, size: mini ? "xs" : "sm", mountMore }),
+          /* @__PURE__ */ jsx(CopySplitButton, { copy, size: mini ? "xs" : "sm" }),
           /* @__PURE__ */ jsx(
             AlchemyDocumentMenu,
             {
@@ -67,6 +67,7 @@ function ActionBar(props) {
             hideOverflow: true
           }
         ),
+        hasCopy ? /* @__PURE__ */ jsx(ExportPaletteAnchor, { exportKey: sourceId, controllerRef: palette, trigger: hideOverflow, size: mini ? "xs" : "sm" }) : null,
         hideOverflow ? null : oneMenu ? /* @__PURE__ */ jsx(OpenOneMenuButton, { source: getCtx().source }) : /* @__PURE__ */ jsx(StandaloneOneMenu, { getCtx, target })
       ]
     }

package/dist/selection-toolbar/SelectionToolbarFrame.js

@@ -185,10 +185,12 @@ function SelectionToolbarFrame({
           // ONE row: the split Copy first (copies the selection; markdown and
           // plain text one click away), then the Alchemy strip (formatting while
           // editing, highlight / comment / AI while reading).
+          // role="group": the inner SelectionToolbar is THE toolbar; a second
+          // role=toolbar here made two toolbars nested on screen.
           /* @__PURE__ */ jsxs(
             "div",
             {
-              role: "toolbar",
+              role: "group",
               "aria-label": "Selection actions",
               "data-selection-strip": "",
               className: cn(

package/dist/selection-toolbar/selection-actions.d.ts

@@ -42,7 +42,8 @@ export declare function hostHalf<T>(target: ClickTarget, key: string): T | null;
 type ModeRule = readonly SelectionMode[] | ((knobs: SelectionToolbarKnobs) => readonly SelectionMode[]);
 /**
  * THE MODE TABLE. Editing: formatting + AI + comment. Reading: highlight,
- * comment, suggest, AI, link and report. AI shows in both.
+ * comment, suggest, AI, link and report. AI shows in both. WHERE each shows —
+ * a button or a More row — is `SELECTION_PRIMARY` below.
  */
 export declare const SELECTION_ACTION_MODES: Readonly<Record<string, ModeRule>>;
 /**
@@ -50,7 +51,7 @@ export declare const SELECTION_ACTION_MODES: Readonly<Record<string, ModeRule>>;
  * the census test checks against the providers (selection-host-kinds.test.ts):
  * a host kind is the set of host halves present on the target.
  *
- *   annotated reading  (annotation + context menu)  highlight ×5, comment, suggest, link, report, AI and more —
+ *   annotated reading  (annotation + context menu)  highlight, comment, Ask AI; More: suggest, link, report —
  *                                                    the study guide, document Annotate, and EVERY saved record
  *                                                    (annotations/RecordAnnotations): a note's preview, a chat
  *                                                    answer, the studio previewing an unedited saved document.
@@ -98,6 +99,16 @@ export interface SelectionCommonHost {
         messageId: string;
     }): void;
 }
+/**
+ * THE BUTTONS (Arman, 2026-10-07: "simple, obvious, nothing extra"). The strip
+ * is the split Copy, these, then More — on every surface, desktop and phone.
+ * Every other action of the mode table is a More row.
+ *   reading:  Copy · Highlight (opens the colours) · Comment · Ask AI · More
+ *   editing:  Copy · Bold · Italic · Link · Ask AI · More (headings, lists, comment…)
+ */
+export declare const SELECTION_PRIMARY: Readonly<Record<SelectionMode, readonly string[]>>;
+/** The most controls the strip ever shows: the split Copy, the buttons, and More. */
+export declare const SELECTION_MAX_VISIBLE = 6;
 /**
  * Which actions keep a button when the bar cannot show them all (a phone).
  * Everything else — including "AI and more" when space is tight — moves into

package/dist/selection-toolbar/selection-actions.js

@@ -35,12 +35,8 @@ const SELECTION_ACTION_MODES = {
   "selection:format-codeblock": ["edit"],
   "selection:format-variable": ["edit"],
   "selection:format-color": ["edit"],
-  // Annotations (the annotation sidecar)
-  "selection:highlight-yellow": HIGHLIGHT,
-  "selection:highlight-green": HIGHLIGHT,
-  "selection:highlight-blue": HIGHLIGHT,
-  "selection:highlight-pink": HIGHLIGHT,
-  "selection:highlight-purple": HIGHLIGHT,
+  // Annotations (the annotation sidecar). ONE Highlight button; it opens the colour choice.
+  "selection:highlight": HIGHLIGHT,
   "selection:comment": ["read", "edit"],
   "selection:suggest": ["read"],
   "selection:link-record": ["read"],
@@ -85,6 +81,11 @@ function shownInSelectionMode(actionId, target) {
   return modes.includes(toolbar.mode);
 }
 const SELECTION_COMMON_HOST_KEY = "selectionCommon";
+const SELECTION_PRIMARY = {
+  edit: ["selection:format-bold", "selection:format-italic", "selection:format-link", "selection:ai"],
+  read: ["selection:highlight", "selection:comment", "selection:ai"]
+};
+const SELECTION_MAX_VISIBLE = 6;
 const SELECTION_PRIORITY = {
   edit: [
     "selection:format-bold",
@@ -102,11 +103,7 @@ const SELECTION_PRIORITY = {
     "selection:format-quote",
     "selection:format-list",
     "selection:format-variable",
-    "selection:highlight-yellow",
-    "selection:highlight-green",
-    "selection:highlight-blue",
-    "selection:highlight-pink",
-    "selection:highlight-purple",
+    "selection:highlight",
     "selection:table-row-above",
     "selection:table-col-left",
     "selection:table-align-left",
@@ -119,15 +116,11 @@ const SELECTION_PRIORITY = {
     "selection:save-to-table"
   ],
   read: [
-    "selection:highlight-yellow",
+    "selection:highlight",
     "selection:comment",
     "selection:ai",
     "selection:suggest",
     "selection:tutor-explain",
-    "selection:highlight-green",
-    "selection:highlight-blue",
-    "selection:highlight-pink",
-    "selection:highlight-purple",
     "selection:tutor-ask",
     "selection:link-record",
     "selection:report",
@@ -165,8 +158,10 @@ function presentAt(id, target) {
 }
 function selectionPlacement(id, target) {
   const toolbar = selectionToolbarHostOf(target);
-  if (!toolbar || toolbar.slots === null) return "primary";
-  const shown = SELECTION_PRIORITY[toolbar.mode].filter((x) => presentAt(x, target));
+  if (!toolbar) return "primary";
+  if (!SELECTION_PRIMARY[toolbar.mode].includes(id)) return "overflow";
+  if (toolbar.slots === null) return "primary";
+  const shown = SELECTION_PRIMARY[toolbar.mode].filter((x) => presentAt(x, target));
   if (shown.length <= toolbar.slots) return "primary";
   const rank = shown.indexOf(id);
   return rank >= 0 && rank < Math.max(1, toolbar.slots - 1) ? "primary" : "overflow";
@@ -226,6 +221,8 @@ export {
   SELECTION_ACTION_MODES,
   SELECTION_COMMON_HOST_KEY,
   SELECTION_HOST_KINDS,
+  SELECTION_MAX_VISIBLE,
+  SELECTION_PRIMARY,
   SELECTION_PRIORITY,
   SELECTION_TOOLBAR_KNOB_FEATURE,
   declareSelectionProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/rich-content",
-  "version": "0.2.39",
+  "version": "0.2.41",
   "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",
@@ -130,21 +130,21 @@
     "unist-util-visit": "^5.1.0",
     "unist-util-visit-parents": "^6.0.2",
     "yaml": "^2.9.1",
+    "@ai-matrx/agents": "latest",
+    "@ai-matrx/alchemy": "latest",
     "@ai-matrx/canvas": "latest",
-    "@ai-matrx/content-ir": "latest",
+    "@ai-matrx/data": "latest",
     "@ai-matrx/design-system": "latest",
-    "@ai-matrx/alchemy": "latest",
+    "@ai-matrx/diff": "latest",
+    "@ai-matrx/content-ir": "latest",
+    "@ai-matrx/icons": "latest",
     "@ai-matrx/content-ir-react": "latest",
-    "@ai-matrx/data": "latest",
     "@ai-matrx/kit": "latest",
-    "@ai-matrx/icons": "latest",
-    "@ai-matrx/diff": "latest",
-    "@ai-matrx/media": "latest",
     "@ai-matrx/print": "latest",
     "@ai-matrx/records": "latest",
     "@ai-matrx/records-ui": "latest",
-    "@ai-matrx/tap-target": "latest",
-    "@ai-matrx/agents": "latest"
+    "@ai-matrx/media": "latest",
+    "@ai-matrx/tap-target": "latest"
   },
   "peerDependencies": {
     "react": ">=19.0.0",