@ai-matrx/rich-content 0.2.165 → 0.2.167

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.2.167
+
+UNVERIFIED: this release has no Unreleased entry and the source comparison could not be made (the caller supplied no source comparison). Whether source changed is unknown; consumer action is unknown.
+Check the package's gitHead on npm against this version's gitHead: `git diff <previous gitHead> <this gitHead> -- apps/shared/rich-content/src`.
+
+## 0.2.166
+
+SOURCE CHANGED WITH NO RELEASE NOTE. This release shipped source changes that nobody described in an Unreleased entry,
+so they may include breaking API changes. Consumer action is UNKNOWN: read the diff before upgrading.
+Diff: `git diff 6a0868df3e c3135c57b9 -- apps/shared/rich-content/src`
+
+Changed shipped source files (1):
+- `apps/shared/rich-content/src/rich-document/variants/shared/AlchemyDocumentMenu.tsx`
+
 ## 0.2.165
 ### Unreleased
 

package/dist/code-block/CodeBlock.js

@@ -22,6 +22,7 @@ import { ShikiCodeView } from "./highlight/ShikiCodeView.js";
 import { parseFenceMeta } from "@ai-matrx/content-ir/source";
 import { agentForPromptKey } from "../utils/lifted/code-editor-agents.js";
 import { useOpenSmartCodeEditorWindow } from "../host/app-bindings.js";
+import { useBlockHostSlot } from "../display/block-host.js";
 import {
   normalizeViewLanguage,
   mapLanguageForMonaco,
@@ -74,6 +75,7 @@ const CodeBlockBody = ({
     setEditedCode(initialCode);
   }
   const [isCopied, setIsCopied] = useState(false);
+  const host = useBlockHostSlot();
   const [isFullScreen, setIsFullScreen] = useState(false);
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
@@ -241,7 +243,8 @@ const CodeBlockBody = ({
       {
         ref: containerRef,
         className: cn(
-          "w-full my-4 rounded-t-xl rounded-b-lg border border-neutral-200 dark:border-neutral-700",
+          "w-full my-4 rounded-t-xl rounded-b-lg border transition-colors",
+          host.selected ? "border-primary" : "border-neutral-200 dark:border-neutral-700",
           // `overflow-clip` (NOT `overflow-hidden`) so this box still clips to
           // its rounded corners without becoming a scroll container — an
           // overflow-hidden ancestor would trap StickyButtons' `position:
@@ -287,7 +290,8 @@ const CodeBlockBody = ({
               allowEdit,
               customBuiltinKeys,
               headerLeftSlot,
-              extraMenuItems
+              extraMenuItems,
+              headerRightSlot: host.actions
             }
           ),
           showStickyButtons && /* @__PURE__ */ jsx(

package/dist/code-block/CodeBlockHeader.d.ts

@@ -54,6 +54,8 @@ interface CodeBlockHeaderProps {
      * (e.g. "Data" from JsonBlock) appear as their own section.
      */
     extraMenuItems?: CodeBlockMenuItem[];
+    /** Rendered after the kebab: a host's own tools for this block (the editor's "</>", Remove). */
+    headerRightSlot?: React.ReactNode;
 }
 export declare const CodeBlockHeader: React.FC<CodeBlockHeaderProps>;
 export declare const EditButton: ({ isEditing, toggleEdit, }: {

package/dist/code-block/CodeBlockHeader.js

@@ -67,7 +67,8 @@ const CodeBlockHeader = ({
   allowEdit = true,
   customBuiltinKeys = [],
   headerLeftSlot,
-  extraMenuItems
+  extraMenuItems,
+  headerRightSlot
 }) => {
   const canCollapse = linesCount > 5;
   return /* @__PURE__ */ jsxs(
@@ -143,7 +144,8 @@ const CodeBlockHeader = ({
             isCompleteHTML,
             handleViewHTML,
             isCreatingPage,
-            extraMenuItems
+            extraMenuItems,
+            headerRightSlot
           }
         )
       ]
@@ -183,7 +185,8 @@ const CodeBlockButtons = ({
   isCompleteHTML = false,
   handleViewHTML,
   isCreatingPage = false,
-  extraMenuItems
+  extraMenuItems,
+  headerRightSlot
 }) => {
   const menu = useAdvancedMenu();
   const kebabRef = useRef(null);
@@ -395,6 +398,7 @@ const CodeBlockButtons = ({
         }
       }
     ) }),
+    headerRightSlot,
     /* @__PURE__ */ jsx(
       AdvancedMenu,
       {

package/dist/display/block-host.d.ts

@@ -0,0 +1,40 @@
+/**
+ * THE BLOCK HOST SLOT — one frame per block (Arman, 2026-10-14: "create a nice and clean wrapper
+ * that replaces whatever the components already have or you don't have any type of visible
+ * wrapper or anything that takes up space").
+ *
+ * A host that draws a rendered block with tools of its own (the rich editor's "</>", Remove,
+ * drag) never wraps the block in a second box. It provides `BlockHostProvider`; a block whose
+ * card has a header row calls `useBlockHostSlot()` and draws its `actions` among its own header
+ * buttons, so the host's tools join that row, and shows `selected` as its own border colour.
+ * A block that claims no slot leaves the host to draw a small overlay inside the block's corner
+ * (the provider's `onClaimedChange` reports false).
+ *
+ * Only the outermost block that claims the slot gets it: a block nested inside another block's
+ * render (markdown inside a card) draws nothing, so the tools appear once. With no host (Read, chat),
+ * every export here renders nothing and changes nothing.
+ */
+import { type ReactNode } from "react";
+export interface BlockHostProviderProps {
+    /** The host's own tools for this block, drawn in the block's header row. */
+    renderActions: () => ReactNode;
+    /** The block is selected in its host; the block shows it on its own border. */
+    selected?: boolean;
+    /** Told whether a header in the block took the tools (false → the host draws its overlay). */
+    onClaimedChange?: (claimed: boolean) => void;
+    children: ReactNode;
+}
+export declare function BlockHostProvider({ renderActions, selected, onClaimedChange, children }: BlockHostProviderProps): import("react").JSX.Element;
+export interface BlockHostSlot {
+    /** The host's tools for the block's header row; null without a host or for a nested block. */
+    actions: ReactNode;
+    /** The host has this block selected: show it as the block's own border colour. */
+    selected: boolean;
+}
+/**
+ * Claims the host slot for a block's header. Call it in the component that draws the card;
+ * `enabled: false` while that component draws no header of its own (a child block does).
+ */
+export declare function useBlockHostSlot(enabled?: boolean): BlockHostSlot;
+/** The host's tools as an element, for a header that needs nothing else from the slot. */
+export declare function BlockHostActions(): import("react").JSX.Element;

package/dist/display/block-host.js

@@ -0,0 +1,40 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { createContext, useContext, useLayoutEffect, useMemo, useRef, useState } from "react";
+const BlockHostContext = createContext(null);
+let nextClaimId = 1;
+function BlockHostProvider({ renderActions, selected = false, onClaimedChange, children }) {
+  const [claimants, setClaimants] = useState([]);
+  const owner = claimants.length ? Math.min(...claimants) : null;
+  const report = useRef(onClaimedChange);
+  report.current = onClaimedChange;
+  const claim = useMemo(
+    () => (id) => {
+      setClaimants((current) => current.includes(id) ? current : [...current, id]);
+      return () => setClaimants((current) => current.filter((other) => other !== id));
+    },
+    []
+  );
+  useLayoutEffect(() => {
+    report.current?.(owner !== null);
+  }, [owner]);
+  const value = useMemo(() => ({ renderActions, selected, owner, claim }), [renderActions, selected, owner, claim]);
+  return /* @__PURE__ */ jsx(BlockHostContext.Provider, { value, children });
+}
+function useBlockHostSlot(enabled = true) {
+  const host = useContext(BlockHostContext);
+  const id = useRef(0);
+  if (id.current === 0) id.current = nextClaimId++;
+  const claim = enabled ? host?.claim : void 0;
+  useLayoutEffect(() => claim ? claim(id.current) : void 0, [claim]);
+  if (!host || host.owner !== id.current) return { actions: null, selected: false };
+  return { actions: host.renderActions(), selected: host.selected };
+}
+function BlockHostActions() {
+  return /* @__PURE__ */ jsx(Fragment, { children: useBlockHostSlot().actions });
+}
+export {
+  BlockHostActions,
+  BlockHostProvider,
+  useBlockHostSlot
+};

package/dist/display/blocks/ChatCollapsibleWrapper.js

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@ai-matrx/design-system";
 import { ChevronDown } from "lucide-react";
 import { ControlRow } from "@ai-matrx/design-system/controls";
+import { useBlockHostSlot } from "../block-host.js";
 const ChatCollapsibleWrapper = ({
   icon,
   title,
@@ -15,6 +16,7 @@ const ChatCollapsibleWrapper = ({
   maxWidth = "max-w-5xl"
 }) => {
   const [isOpen, setIsOpen] = useState(initialOpen);
+  const host = useBlockHostSlot();
   const handleOpenChange = (open) => {
     setIsOpen(open);
     if (onStateChange) {
@@ -26,7 +28,7 @@ const ChatCollapsibleWrapper = ({
     {
       open: isOpen,
       onOpenChange: handleOpenChange,
-      className: `border-2 border-zinc-200 dark:border-zinc-700 rounded-3xl shadow-sm my-1 w-full ${maxWidth} mx-auto hover:bg-accent/50 hover:shadow-sm ${className}`,
+      className: `border-2 ${host.selected ? "border-primary" : "border-zinc-200 dark:border-zinc-700"} transition-colors rounded-3xl shadow-sm my-1 w-full ${maxWidth} mx-auto hover:bg-accent/50 hover:shadow-sm ${className}`,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "relative flex w-full items-center justify-between rounded-t-lg hover:bg-accent/50 hover:shadow-sm", children: [
           /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "flex-1 flex items-center gap-2 py-1 pl-4 pr-1 font-medium hover:bg-accent/50 hover:shadow-sm", children: [
@@ -39,8 +41,11 @@ const ChatCollapsibleWrapper = ({
               }
             )
           ] }),
-          controls && // One ControlRow: every action carries its own 3px half-gap, the row adds none.
-          /* @__PURE__ */ jsx(ControlRow, { nowrap: true, className: "shrink-0 pr-3", onClick: (e) => e.stopPropagation(), children: controls })
+          (controls || host.actions) && // One ControlRow: every action carries its own 3px half-gap, the row adds none.
+          /* @__PURE__ */ jsxs(ControlRow, { nowrap: true, className: "shrink-0 pr-3", onClick: (e) => e.stopPropagation(), children: [
+            controls,
+            host.actions
+          ] })
         ] }),
         /* @__PURE__ */ jsx(CollapsibleContent, { className: "bg-transparent dark:bg-transparent border-none", children: /* @__PURE__ */ jsxs("div", { className: "relative p-0 border-none", children: [
           /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-8 right-8 h-px bg-zinc-200 dark:bg-zinc-700" }),

package/dist/display/blocks/chart/ChartBlock.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useClipboard } from "@ai-matrx/kit/clipboard";
 import { useEffect, useMemo, useState } from "react";
 import { clientLazy } from "../../../utils/client-lazy.js";
@@ -11,6 +11,7 @@ import { cn } from "@ai-matrx/design-system";
 import { parseChartSpec } from "./chart-spec.js";
 import { useCanvasPresentation } from "@ai-matrx/canvas/react";
 import { chartPaneLayout } from "../canvas-adaptive.js";
+import { useBlockHostSlot } from "../../block-host.js";
 import { Button } from "@ai-matrx/design-system/controls";
 const CHART_TYPE_LABEL = {
   bar: "Bar chart",
@@ -35,40 +36,54 @@ const ChartBlock = ({ content = "", isStreamActive = false, className }) => {
   const [showSource, setShowSource] = useState(false);
   const title = spec?.title ?? (spec ? CHART_TYPE_LABEL[spec.type] ?? "Chart" : "Chart");
   const presentation = useCanvasPresentation();
+  const host = useBlockHostSlot();
   const paneLayout = chartPaneLayout(presentation, spec?.type ?? "");
   const handleCopy = async () => {
     if (!await copyText(source, void 0, "Couldn't copy the chart source")) return;
     setCopied(true);
     setTimeout(() => setCopied(false), 1500);
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("my-3 overflow-hidden rounded-lg border border-border bg-card", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border bg-muted/50 px-3 py-1.5", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
-        /* @__PURE__ */ jsx(BarChart3, { className: "h-3.5 w-3.5 shrink-0 text-primary" }),
-        /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: title }),
-        spec && /* @__PURE__ */ jsx("span", { className: "hidden shrink-0 text-xs text-muted-foreground sm:inline", children: CHART_TYPE_LABEL[spec.type] ?? "Chart" }),
-        isStreamActive && /* @__PURE__ */ jsx("span", { className: "shrink-0 animate-pulse text-xs text-muted-foreground", children: "building\u2026" })
-      ] }),
-      !isStreamActive && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
-        /* @__PURE__ */ jsx(IconBtn, { label: copied ? "Copied" : "Copy chart source", onClick: handleCopy, children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" }) }),
-        spec && presentation === null && /* @__PURE__ */ jsx(IconBtn, { label: "View fullscreen", onClick: () => setFullscreen(true), children: /* @__PURE__ */ jsx(Expand, { className: "h-3.5 w-3.5" }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "p-3", children: isStreamActive ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", "aria-busy": "true", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/3" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-48 w-full" })
-    ] }) : error ? /* @__PURE__ */ jsx(ChartError, { error, source, show: showSource, onToggle: () => setShowSource((v) => !v) }) : spec ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: paneLayout ? "w-full" : "h-[340px] w-full",
-        style: paneLayout ? { height: paneLayout.height } : void 0,
-        "data-chart-legend": paneLayout?.legend ?? "default",
-        "data-chart-bars": paneLayout?.horizontalBars ? "horizontal" : "vertical",
-        children: /* @__PURE__ */ jsx(ChartCanvas, { spec, paneLayout })
-      }
-    ) : null }),
-    fullscreen && spec && /* @__PURE__ */ jsx(ChartFullscreen, { spec, title, onClose: () => setFullscreen(false) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "my-3 overflow-hidden rounded-lg border bg-card transition-colors",
+        host.selected ? "border-primary" : "border-border",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border bg-muted/50 px-3 py-1.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsx(BarChart3, { className: "h-3.5 w-3.5 shrink-0 text-primary" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: title }),
+            spec && /* @__PURE__ */ jsx("span", { className: "hidden shrink-0 text-xs text-muted-foreground sm:inline", children: CHART_TYPE_LABEL[spec.type] ?? "Chart" }),
+            isStreamActive && /* @__PURE__ */ jsx("span", { className: "shrink-0 animate-pulse text-xs text-muted-foreground", children: "building\u2026" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
+            !isStreamActive && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(IconBtn, { label: copied ? "Copied" : "Copy chart source", onClick: handleCopy, children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" }) }),
+              spec && presentation === null && /* @__PURE__ */ jsx(IconBtn, { label: "View fullscreen", onClick: () => setFullscreen(true), children: /* @__PURE__ */ jsx(Expand, { className: "h-3.5 w-3.5" }) })
+            ] }),
+            host.actions
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "p-3", children: isStreamActive ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", "aria-busy": "true", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/3" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-48 w-full" })
+        ] }) : error ? /* @__PURE__ */ jsx(ChartError, { error, source, show: showSource, onToggle: () => setShowSource((v) => !v) }) : spec ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: paneLayout ? "w-full" : "h-[340px] w-full",
+            style: paneLayout ? { height: paneLayout.height } : void 0,
+            "data-chart-legend": paneLayout?.legend ?? "default",
+            "data-chart-bars": paneLayout?.horizontalBars ? "horizontal" : "vertical",
+            children: /* @__PURE__ */ jsx(ChartCanvas, { spec, paneLayout })
+          }
+        ) : null }),
+        fullscreen && spec && /* @__PURE__ */ jsx(ChartFullscreen, { spec, title, onClose: () => setFullscreen(false) })
+      ]
+    }
+  );
 };
 function IconBtn({ label, onClick, children }) {
   return /* @__PURE__ */ jsx(Button, { variant: "quiet", "aria-label": label, title: label, onClick, children });

package/dist/display/blocks/common/BlockHeaderWrapper.js

@@ -20,6 +20,7 @@ import IconButton from "../../../utils/lifted/IconButton.js";
 import { AdvancedMenu } from "../../../host/app-bindings.js";
 import { useIsMobile } from "@ai-matrx/kit/media-query";
 import { Button } from "@ai-matrx/design-system/controls";
+import { useBlockHostSlot } from "../../block-host.js";
 const BlockHeaderWrapper = ({
   icon: Icon,
   iconClassName = "bg-blue-500 dark:bg-blue-600",
@@ -42,6 +43,7 @@ const BlockHeaderWrapper = ({
   canvasButtonClassName = "bg-brand-secondary text-brand-secondary-foreground shadow-sm hover:bg-brand-secondary/80 hover:shadow-md transform hover:scale-105 transition-all"
 }) => {
   const [isFullScreen, setIsFullScreen] = useState(false);
+  const host = useBlockHostSlot();
   const [menuOpen, setMenuOpen] = useState(false);
   const [descriptionExpanded, setDescriptionExpanded] = useState(false);
   const menuAnchorRef = useRef(null);
@@ -170,7 +172,7 @@ const BlockHeaderWrapper = ({
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: `${headerGradient} rounded-xl p-2 shadow-md border ${headerBorder}`,
+                  className: `${headerGradient} rounded-xl p-2 shadow-md border transition-colors ${host.selected ? "border-primary" : headerBorder}`,
                   children: [
                     /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 mb-3", children: [
                       /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 flex-1", children: [
@@ -282,7 +284,8 @@ const BlockHeaderWrapper = ({
                               categorizeItems: false
                             }
                           )
-                        ] })
+                        ] }),
+                        host.actions
                       ] })
                     ] }),
                     controls && /* @__PURE__ */ jsx("div", { children: controls })

package/dist/display/blocks/common/ContentBlockWrapper.js

@@ -21,6 +21,7 @@ import IconButton from "../../../utils/lifted/IconButton.js";
 import { toast } from "../../../host/toast.js";
 import { reportCanvasOpenDrop } from "../../../host/app-bindings.js";
 import { ErrorAlchemyMenu } from "../../../host/ErrorActions.js";
+import { useBlockHostSlot } from "../../block-host.js";
 const ContentBlockWrapper = ({
   children,
   title,
@@ -46,6 +47,7 @@ const ContentBlockWrapper = ({
   closeOnEscape = true
 }) => {
   const [isFullScreen, setIsFullScreen] = useState(defaultFullscreen);
+  const host = useBlockHostSlot();
   const { open: openCanvas } = useCanvas();
   const { openArtifact } = useOpenArtifactInCanvas();
   const { isCanvasAvailable } = useCanvasOpenGuard();
@@ -161,7 +163,7 @@ const ContentBlockWrapper = ({
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: isFullScreen ? "flex-1 overflow-y-auto p-3" : "p-3", children: [
-          (title || subtitle || headerContent || actionButtons.length > 0) && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+          (title || subtitle || headerContent || actionButtons.length > 0 || host.actions) && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
             (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
               title && /* @__PURE__ */ jsx(
                 "h1",
@@ -173,7 +175,7 @@ const ContentBlockWrapper = ({
               subtitle && /* @__PURE__ */ jsx("div", { className: "text-center mt-2", children: /* @__PURE__ */ jsx("span", { className: "text-sm bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 px-3 py-1 rounded-full", children: subtitle }) })
             ] }),
             headerContent,
-            actionButtons.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-1 flex-wrap", children: [
+            (actionButtons.length > 0 || host.actions) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-1 flex-wrap", children: [
               onSave && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 mr-2", children: [
                 isSaving && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 text-blue-600 dark:text-blue-400 text-xs", title: "Saving...", children: /* @__PURE__ */ jsx(Cloud, { className: "h-4 w-4 animate-pulse" }) }),
                 !isSaving && lastSaved && /* @__PURE__ */ jsx(
@@ -199,7 +201,8 @@ const ContentBlockWrapper = ({
                   className: action.className
                 },
                 index
-              ))
+              )),
+              host.actions
             ] })
           ] }),
           /* @__PURE__ */ jsx("div", { className: contentClassName, children })

package/dist/display/blocks/csv/CsvBlock.js

@@ -18,6 +18,7 @@ import {
 import { toast } from "../../../host/toast.js";
 import { useOpenSaveToTable } from "../../../host/tables.js";
 import { Button } from "@ai-matrx/design-system/controls";
+import { useBlockHostSlot } from "../../block-host.js";
 function parseCsv(content, delimiter) {
   return parseDelimited(content, { delimiter, skipEmptyLines: "greedy" }).data.map(
     (row) => row.map((cell) => cell.trim())
@@ -36,6 +37,7 @@ const CsvBlock = ({
     notify: (message, kind) => kind === "error" ? toast.error(message) : toast.success(message)
   });
   const [copied, setCopied] = useState(false);
+  const host = useBlockHostSlot();
   const [sortCol, setSortCol] = useState(null);
   const [sortDir, setSortDir] = useState(null);
   const [editCell, setEditCell] = useState(
@@ -116,7 +118,8 @@ const CsvBlock = ({
     "div",
     {
       className: cn(
-        "my-3 rounded-lg border border-border bg-card overflow-hidden",
+        "my-3 rounded-lg border bg-card overflow-hidden transition-colors",
+        host.selected ? "border-primary" : "border-border",
         className
       ),
       children: [
@@ -132,7 +135,8 @@ const CsvBlock = ({
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
             openSaveToTable ? /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(Table2, {}), onClick: handleSaveAsTable, title: "Save to a table", children: /* @__PURE__ */ jsx("span", { children: "Save to a table" }) }) : null,
-            /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), glyphTone: copied ? "success" : void 0, onClick: handleCopy, "aria-label": "Copy" })
+            /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), glyphTone: copied ? "success" : void 0, onClick: handleCopy, "aria-label": "Copy" }),
+            host.actions
           ] })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm border-collapse", children: [

package/dist/display/blocks/diagram/InteractiveDiagramBlock.js

@@ -123,6 +123,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from "@ai-matrx/design-system";
+import { useBlockHostSlot } from "../../block-host.js";
 function backgroundVariantFromDiagram(diagram) {
   if (diagram.renderHints?.background === "lines")
     return BackgroundVariant.Lines;
@@ -2056,6 +2057,7 @@ const InteractiveDiagramBlock = ({
 }) => {
   const isWorkspace = presentation === "workspace";
   const [isFullScreen, setIsFullScreen] = useState(false);
+  const host = useBlockHostSlot(!isWorkspace);
   const [editing, setEditing] = useState(defaultEditing);
   const canEdit = Boolean(onDiagramChange);
   const [cardShowMiniMap, setCardShowMiniMap] = useState(false);
@@ -2179,7 +2181,7 @@ const InteractiveDiagramBlock = ({
           // own <Controls/> (Zoom in/out, Fit view) and the hand-rolled
           // Arrange-map/Restore-layout/background/minimap/export buttons
           // below all render at 26-34px, well under the iOS floor.
-          isWorkspace ? "relative h-full min-h-0 w-full overflow-hidden bg-background matrx-touch-targets" : `w-full rounded-xl border border-border matrx-touch-targets ${isFullScreen ? "fixed inset-0 z-50 flex items-center justify-center p-2" : "py-2"}`
+          isWorkspace ? "relative h-full min-h-0 w-full overflow-hidden bg-background matrx-touch-targets" : `w-full rounded-xl border transition-colors ${host.selected ? "border-primary" : "border-border"} matrx-touch-targets ${isFullScreen ? "fixed inset-0 z-50 flex items-center justify-center p-2" : "py-2"}`
         ),
         children: /* @__PURE__ */ jsxs(
           "div",
@@ -2299,7 +2301,8 @@ const InteractiveDiagramBlock = ({
                             onClick: exportDiagramJSON,
                             variant: "outline"
                           }
-                        )
+                        ),
+                        host.actions
                       ] })
                     ] }) }),
                     isWorkspace && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-3 left-1/2 z-20 -translate-x-1/2", children: /* @__PURE__ */ jsxs("div", { className: "pointer-events-auto flex items-center gap-1 rounded-xl border border-border/70 bg-card/90 p-1 shadow-lg backdrop-blur-xl", children: [

package/dist/display/blocks/diff/DiffBlock.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useClipboard } from "@ai-matrx/kit/clipboard";
 import { useMemo, useState } from "react";
 import { clientLazy } from "../../../utils/client-lazy.js";
@@ -13,6 +13,7 @@ import { ErrorAlchemyMenu } from "../../../host/ErrorActions.js";
 import { useCanvasPresentation } from "@ai-matrx/canvas/react";
 import { diffIsSplit } from "../canvas-adaptive.js";
 import { Button } from "@ai-matrx/design-system/controls";
+import { useBlockHostSlot } from "../../block-host.js";
 const DiffCanvas = clientLazy(() => import("./DiffCanvas.js"), {
   loading: () => /* @__PURE__ */ jsx(Skeleton, { className: "h-40 w-full" })
 });
@@ -75,6 +76,7 @@ const DiffSpecBlock = ({ content = "", isStreamActive = false, className }) => {
   const spec = parsed && !("error" in parsed) ? parsed : null;
   const error = parsed && "error" in parsed ? parsed.error : null;
   const [copied, setCopied] = useState(false);
+  const host = useBlockHostSlot();
   const [split, setSplit] = useState(null);
   const presentation = useCanvasPresentation();
   const effectiveSplit = diffIsSplit({
@@ -88,16 +90,19 @@ const DiffSpecBlock = ({ content = "", isStreamActive = false, className }) => {
     setCopied(true);
     setTimeout(() => setCopied(false), 1500);
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("my-3 overflow-hidden rounded-lg border border-border bg-card", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("my-3 overflow-hidden rounded-lg border bg-card transition-colors", host.selected ? "border-primary" : "border-border", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border bg-muted/50 px-3 py-1.5", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
         /* @__PURE__ */ jsx(GitCompareArrows, { className: "h-3.5 w-3.5 shrink-0 text-primary" }),
         /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: spec?.title ?? "Changes" }),
         isStreamActive && /* @__PURE__ */ jsx("span", { className: "shrink-0 animate-pulse text-xs text-muted-foreground", children: "\u2026" })
       ] }),
-      !isStreamActive && spec && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: effectiveSplit ? /* @__PURE__ */ jsx(Rows3, {}) : /* @__PURE__ */ jsx(Columns2, {}), "aria-label": effectiveSplit ? "Unified view" : "Split view", title: effectiveSplit ? "Unified view" : "Split view", onClick: () => setSplit(!effectiveSplit) }),
-        /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), "aria-label": copied ? "Copied" : "Copy source", title: copied ? "Copied" : "Copy source", onClick: handleCopy })
+      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
+        !isStreamActive && spec && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: effectiveSplit ? /* @__PURE__ */ jsx(Rows3, {}) : /* @__PURE__ */ jsx(Columns2, {}), "aria-label": effectiveSplit ? "Unified view" : "Split view", title: effectiveSplit ? "Unified view" : "Split view", onClick: () => setSplit(!effectiveSplit) }),
+          /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), "aria-label": copied ? "Copied" : "Copy source", title: copied ? "Copied" : "Copy source", onClick: handleCopy })
+        ] }),
+        host.actions
       ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "max-h-[60dvh] overflow-auto", children: isStreamActive ? /* @__PURE__ */ jsx("div", { className: "p-3", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-40 w-full" }) }) : error ? /* @__PURE__ */ jsxs("div", { className: "m-3 flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm", children: [

package/dist/display/blocks/json/JsonBlock.js

@@ -58,6 +58,7 @@ const JsonTableView = lazy(
   () => import("./JsonTableView.js")
 );
 import { JsonTreeViewer, RawJsonExplorer } from "../../../host/app-bindings.js";
+import { useBlockHostSlot } from "../../block-host.js";
 function PaneFallback({ label = "Loading\u2026" }) {
   return /* @__PURE__ */ jsx("div", { className: "p-4 text-xs text-muted-foreground italic", children: label });
 }
@@ -85,6 +86,7 @@ const JsonBlock = ({
   const openConvertToShape = useOpenConvertToShapeWindow();
   const routedAbove = useContext(JsonKindRouteContext);
   const [mode, setMode] = useState("code");
+  const host = useBlockHostSlot(mode !== "code");
   const openSaveToTable = useOpenSaveToTable();
   const [formatOverride, setFormatOverride] = useState(null);
   const effectiveContent = formatOverride ?? content;
@@ -369,7 +371,8 @@ const JsonBlock = ({
           "div",
           {
             className: cn(
-              "w-full my-4 rounded-xl overflow-hidden border border-neutral-200 dark:border-neutral-700 bg-background",
+              "w-full my-4 rounded-xl overflow-hidden border bg-background transition-colors",
+              host.selected ? "border-primary" : "border-neutral-200 dark:border-neutral-700",
               className
             ),
             children: [
@@ -379,7 +382,8 @@ const JsonBlock = ({
                   toggle: viewToggle,
                   menuItems: fullMenuItems,
                   caption: mode === "table" ? tabularCaption || "" : "",
-                  content: effectiveContent
+                  content: effectiveContent,
+                  hostActions: host.actions
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "bg-card", children: [
@@ -479,7 +483,8 @@ const JsonViewHeader = ({
   toggle,
   menuItems,
   caption,
-  content
+  content,
+  hostActions
 }) => {
   const { copyText } = useClipboard({
     notify: (message, kind) => kind === "error" ? toast.error(message) : toast.success(message)
@@ -546,7 +551,8 @@ const JsonViewHeader = ({
           width: "260px",
           maxWidth: "300px"
         }
-      )
+      ),
+      hostActions
     ] })
   ] });
 };

package/dist/display/blocks/markdown-preview/MarkdownPreviewBlock.js

@@ -8,6 +8,7 @@ import { Copy, Check, Eye, Code2, FileText } from "lucide-react";
 import { NestedRichContent } from "../../../levels/standard/NestedRichContent.js";
 import MatrxMiniLoader from "../../../utils/lifted/MatrxMiniLoader.js";
 import { Button } from "@ai-matrx/design-system/controls";
+import { useBlockHostSlot } from "../../block-host.js";
 const CodeBlock = lazy(
   () => import("../../../code-block/CodeBlock.js")
 );
@@ -23,6 +24,7 @@ const MarkdownPreviewBlock = ({
   });
   const [mode, setMode] = useState("preview");
   const [copied, setCopied] = useState(false);
+  const host = useBlockHostSlot();
   const handleCopy = async () => {
     if (!await copyText(content)) return;
     setCopied(true);
@@ -32,7 +34,8 @@ const MarkdownPreviewBlock = ({
     "div",
     {
       className: cn(
-        "my-3 rounded-lg border border-border bg-card overflow-hidden",
+        "my-3 rounded-lg border bg-card overflow-hidden transition-colors",
+        host.selected ? "border-primary" : "border-border",
         className
       ),
       children: [
@@ -46,7 +49,8 @@ const MarkdownPreviewBlock = ({
               /* @__PURE__ */ jsx(Button, { variant: "quiet", pressed: mode === "preview", icon: /* @__PURE__ */ jsx(Eye, {}), onClick: () => setMode("preview"), children: "Preview" }),
               /* @__PURE__ */ jsx(Button, { variant: "quiet", pressed: mode === "source", icon: /* @__PURE__ */ jsx(Code2, {}), onClick: () => setMode("source"), children: "Source" })
             ] }),
-            /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), glyphTone: copied ? "success" : void 0, onClick: handleCopy, "aria-label": "Copy" })
+            /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), glyphTone: copied ? "success" : void 0, onClick: handleCopy, "aria-label": "Copy" }),
+            host.actions
           ] })
         ] }),
         mode === "preview" ? /* @__PURE__ */ jsx("div", { className: "px-4 py-3", children: renderedPreview && !isStreamActive ? renderedPreview : /* @__PURE__ */ jsx(NestedRichContent, { source: content, isStreaming: isStreamActive }) }) : /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(MatrxMiniLoader, {}), children: /* @__PURE__ */ jsx(

package/dist/display/blocks/mermaid/MermaidBlock.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@ai-matrx/design-system/controls";
 import { Suspense, lazy, useEffect, useState } from "react";
 import {
@@ -54,6 +54,7 @@ import {
   resolveMermaidTheme,
   DEFAULT_MERMAID_PREFERENCES
 } from "../../../mermaid/types.js";
+import { useBlockHostSlot } from "../../block-host.js";
 const CodeBlock = lazy(
   () => import("../../../code-block/CodeBlock.js")
 );
@@ -100,6 +101,7 @@ const MermaidBlock = ({
   };
   const [showSource, setShowSource] = useState(false);
   const [copied, setCopied] = useState(false);
+  const host = useBlockHostSlot();
   const [fullscreen, setFullscreen] = useState(false);
   const [svgEl, setSvgEl] = useState(null);
   const [frameMaxHeight, setFrameMaxHeight] = useState(520);
@@ -221,7 +223,8 @@ const MermaidBlock = ({
         "div",
         {
           className: cn(
-            "my-3 overflow-hidden rounded-lg border border-border bg-card",
+            "my-3 overflow-hidden rounded-lg border bg-card transition-colors",
+            host.selected ? "border-primary" : "border-border",
             className
           ),
           children: [
@@ -236,122 +239,125 @@ const MermaidBlock = ({
                 ] }) : null,
                 isStreamActive && /* @__PURE__ */ jsx("span", { className: "shrink-0 animate-pulse text-xs text-muted-foreground", children: "drawing\u2026" })
               ] }),
-              !isStreamActive && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
-                /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-                  /* @__PURE__ */ jsx(SimpleTooltip, { text: "Diagram style", children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(Palette, {}), "aria-label": "Diagram style" }) }) }),
-                  /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-44", children: [
-                    /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs", children: "Theme" }),
-                    THEME_CHOICES.map((theme) => /* @__PURE__ */ jsxs(
-                      DropdownMenuItem,
-                      {
-                        onClick: () => setOption("theme", theme),
-                        children: [
-                          /* @__PURE__ */ jsx("span", { className: "flex-1 capitalize", children: theme }),
-                          effective.theme === theme && /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" })
-                        ]
-                      },
-                      theme
-                    )),
-                    /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-                    /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs", children: "Style" }),
-                    LOOK_CHOICES.map((look) => /* @__PURE__ */ jsxs(
-                      DropdownMenuItem,
-                      {
-                        onClick: () => setOption("look", look),
-                        children: [
-                          /* @__PURE__ */ jsx("span", { className: "flex-1", children: look === "handDrawn" ? "Hand-drawn" : "Classic" }),
-                          effective.look === look && /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" })
-                        ]
-                      },
-                      look
-                    )),
-                    /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-                    /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs", children: "Layout" }),
-                    LAYOUT_CHOICES.map((layout) => /* @__PURE__ */ jsxs(
-                      DropdownMenuItem,
-                      {
-                        onClick: () => setOption("layout", layout),
-                        children: [
-                          /* @__PURE__ */ jsx("span", { className: "flex-1 uppercase", children: layout }),
-                          effective.layout === layout && /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" })
-                        ]
-                      },
-                      layout
-                    )),
-                    /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-                    /* @__PURE__ */ jsx(
-                      DropdownMenuItem,
-                      {
-                        onClick: () => {
-                          setMermaidPreferences(effective);
-                          toast.success("Saved as your default diagram style");
+              /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
+                !isStreamActive && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                    /* @__PURE__ */ jsx(SimpleTooltip, { text: "Diagram style", children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(Palette, {}), "aria-label": "Diagram style" }) }) }),
+                    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-44", children: [
+                      /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs", children: "Theme" }),
+                      THEME_CHOICES.map((theme) => /* @__PURE__ */ jsxs(
+                        DropdownMenuItem,
+                        {
+                          onClick: () => setOption("theme", theme),
+                          children: [
+                            /* @__PURE__ */ jsx("span", { className: "flex-1 capitalize", children: theme }),
+                            effective.theme === theme && /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" })
+                          ]
                         },
-                        children: "Save as my default"
-                      }
-                    )
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-                  /* @__PURE__ */ jsx(SimpleTooltip, { text: "Export diagram", children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(Download, {}), "aria-label": "Export diagram" }) }) }),
-                  /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-48", children: [
-                    /* @__PURE__ */ jsx(
-                      DropdownMenuItem,
-                      {
-                        onClick: () => {
-                          const svg = currentSvg();
-                          if (svg) downloadMermaidSvg(svg, title);
-                          else toast.error("Nothing rendered yet");
+                        theme
+                      )),
+                      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                      /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs", children: "Style" }),
+                      LOOK_CHOICES.map((look) => /* @__PURE__ */ jsxs(
+                        DropdownMenuItem,
+                        {
+                          onClick: () => setOption("look", look),
+                          children: [
+                            /* @__PURE__ */ jsx("span", { className: "flex-1", children: look === "handDrawn" ? "Hand-drawn" : "Classic" }),
+                            effective.look === look && /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" })
+                          ]
                         },
-                        children: "Download SVG"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      DropdownMenuItem,
-                      {
-                        onClick: async () => {
-                          const svg = currentSvg();
-                          if (!svg) {
-                            toast.error("Nothing rendered yet");
-                            return;
-                          }
-                          try {
-                            await downloadMermaidPng(svg, title);
-                          } catch (err) {
-                            console.error("[MermaidBlock] PNG export failed", err);
-                            toast.error("PNG export failed");
-                          }
+                        look
+                      )),
+                      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                      /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs", children: "Layout" }),
+                      LAYOUT_CHOICES.map((layout) => /* @__PURE__ */ jsxs(
+                        DropdownMenuItem,
+                        {
+                          onClick: () => setOption("layout", layout),
+                          children: [
+                            /* @__PURE__ */ jsx("span", { className: "flex-1 uppercase", children: layout }),
+                            effective.layout === layout && /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" })
+                          ]
                         },
-                        children: "Download PNG"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      DropdownMenuItem,
-                      {
-                        onClick: () => downloadMermaidSource(source, title),
-                        children: "Download source (.mmd)"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-                    /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: handleSaveToWorkspace, children: [
-                      /* @__PURE__ */ jsx(FolderUp, { className: "mr-1.5 h-3.5 w-3.5" }),
-                      "Save to my files"
+                        layout
+                      )),
+                      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                      /* @__PURE__ */ jsx(
+                        DropdownMenuItem,
+                        {
+                          onClick: () => {
+                            setMermaidPreferences(effective);
+                            toast.success("Saved as your default diagram style");
+                          },
+                          children: "Save as my default"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                    /* @__PURE__ */ jsx(SimpleTooltip, { text: "Export diagram", children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(Download, {}), "aria-label": "Export diagram" }) }) }),
+                    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-48", children: [
+                      /* @__PURE__ */ jsx(
+                        DropdownMenuItem,
+                        {
+                          onClick: () => {
+                            const svg = currentSvg();
+                            if (svg) downloadMermaidSvg(svg, title);
+                            else toast.error("Nothing rendered yet");
+                          },
+                          children: "Download SVG"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        DropdownMenuItem,
+                        {
+                          onClick: async () => {
+                            const svg = currentSvg();
+                            if (!svg) {
+                              toast.error("Nothing rendered yet");
+                              return;
+                            }
+                            try {
+                              await downloadMermaidPng(svg, title);
+                            } catch (err) {
+                              console.error("[MermaidBlock] PNG export failed", err);
+                              toast.error("PNG export failed");
+                            }
+                          },
+                          children: "Download PNG"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        DropdownMenuItem,
+                        {
+                          onClick: () => downloadMermaidSource(source, title),
+                          children: "Download source (.mmd)"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                      /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: handleSaveToWorkspace, children: [
+                        /* @__PURE__ */ jsx(FolderUp, { className: "mr-1.5 h-3.5 w-3.5" }),
+                        "Save to my files"
+                      ] })
                     ] })
-                  ] })
+                  ] }),
+                  /* @__PURE__ */ jsx(SimpleTooltip, { text: copied ? "Copied" : "Copy diagram source", children: /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), "aria-label": "Copy diagram source", onClick: handleCopy }) }),
+                  /* @__PURE__ */ jsx(SimpleTooltip, { text: showSource ? "Hide source" : "Show source", children: /* @__PURE__ */ jsx(Button, { variant: "quiet", pressed: showSource, icon: /* @__PURE__ */ jsx(Code2, {}), "aria-label": showSource ? "Hide source" : "Show source", onClick: () => setShowSource((v) => !v) }) }),
+                  /* @__PURE__ */ jsx(SimpleTooltip, { text: "View fullscreen", children: /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(Expand, {}), "aria-label": "View fullscreen", onClick: () => setFullscreen(true) }) }),
+                  isCanvasAvailable && /* @__PURE__ */ jsx(SimpleTooltip, { text: "Open in canvas", children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      "aria-label": "Open in canvas",
+                      onClick: () => handleOpenCanvas(),
+                      variant: "quiet",
+                      icon: /* @__PURE__ */ jsx(Maximize2, {}),
+                      children: "Canvas"
+                    }
+                  ) })
                 ] }),
-                /* @__PURE__ */ jsx(SimpleTooltip, { text: copied ? "Copied" : "Copy diagram source", children: /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), "aria-label": "Copy diagram source", onClick: handleCopy }) }),
-                /* @__PURE__ */ jsx(SimpleTooltip, { text: showSource ? "Hide source" : "Show source", children: /* @__PURE__ */ jsx(Button, { variant: "quiet", pressed: showSource, icon: /* @__PURE__ */ jsx(Code2, {}), "aria-label": showSource ? "Hide source" : "Show source", onClick: () => setShowSource((v) => !v) }) }),
-                /* @__PURE__ */ jsx(SimpleTooltip, { text: "View fullscreen", children: /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(Expand, {}), "aria-label": "View fullscreen", onClick: () => setFullscreen(true) }) }),
-                isCanvasAvailable && /* @__PURE__ */ jsx(SimpleTooltip, { text: "Open in canvas", children: /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    type: "button",
-                    "aria-label": "Open in canvas",
-                    onClick: () => handleOpenCanvas(),
-                    variant: "quiet",
-                    icon: /* @__PURE__ */ jsx(Maximize2, {}),
-                    children: "Canvas"
-                  }
-                ) })
+                host.actions
               ] })
             ] }),
             /* @__PURE__ */ jsx(

package/dist/display/blocks/svg/SvgBlock.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { downloadFile } from "@ai-matrx/kit/download";
 import { useClipboard } from "@ai-matrx/kit/clipboard";
 import { useEffect, useMemo, useState } from "react";
@@ -10,6 +10,7 @@ import { Skeleton } from "@ai-matrx/design-system";
 import SandboxedHtml from "../common/SandboxedHtml.js";
 import { cn } from "@ai-matrx/design-system";
 import { Button } from "@ai-matrx/design-system/controls";
+import { useBlockHostSlot } from "../../block-host.js";
 function readSvgMeta(svg) {
   let aspect = 16 / 9;
   const viewBox = /viewBox\s*=\s*["']\s*[\d.+-]+\s+[\d.+-]+\s+([\d.]+)\s+([\d.]+)\s*["']/i.exec(svg);
@@ -38,6 +39,7 @@ const SvgBlock = ({ content = "", isStreamActive = false, className }) => {
   const { aspect, title } = useMemo(() => readSvgMeta(svg), [svg]);
   const srcDoc = useMemo(() => toSrcDoc(svg), [svg]);
   const [copied, setCopied] = useState(false);
+  const host = useBlockHostSlot();
   const [fullscreen, setFullscreen] = useState(false);
   const handleCopy = async () => {
     if (!await copyText(svg, void 0, "Couldn't copy the SVG")) return;
@@ -52,7 +54,7 @@ const SvgBlock = ({ content = "", isStreamActive = false, className }) => {
     }
   };
   const hasSvg = /<svg[\s>]/i.test(svg);
-  return /* @__PURE__ */ jsxs("div", { className: cn("my-3 overflow-hidden rounded-lg border border-border bg-card", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("my-3 overflow-hidden rounded-lg border bg-card transition-colors", host.selected ? "border-primary" : "border-border", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border bg-muted/50 px-3 py-1.5", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
         /* @__PURE__ */ jsx(ImageIcon, { className: "h-3.5 w-3.5 shrink-0 text-primary" }),
@@ -60,10 +62,13 @@ const SvgBlock = ({ content = "", isStreamActive = false, className }) => {
         /* @__PURE__ */ jsx("span", { className: "hidden shrink-0 text-xs text-muted-foreground sm:inline", children: "SVG" }),
         isStreamActive && /* @__PURE__ */ jsx("span", { className: "shrink-0 animate-pulse text-xs text-muted-foreground", children: "drawing\u2026" })
       ] }),
-      !isStreamActive && hasSvg && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
-        /* @__PURE__ */ jsx(IconBtn, { label: copied ? "Copied" : "Copy SVG source", onClick: handleCopy, children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" }) }),
-        /* @__PURE__ */ jsx(IconBtn, { label: "Download SVG", onClick: handleDownload, children: /* @__PURE__ */ jsx(Download, { className: "h-3.5 w-3.5" }) }),
-        /* @__PURE__ */ jsx(IconBtn, { label: "View fullscreen", onClick: () => setFullscreen(true), children: /* @__PURE__ */ jsx(Expand, { className: "h-3.5 w-3.5" }) })
+      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
+        !isStreamActive && hasSvg && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(IconBtn, { label: copied ? "Copied" : "Copy SVG source", onClick: handleCopy, children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" }) }),
+          /* @__PURE__ */ jsx(IconBtn, { label: "Download SVG", onClick: handleDownload, children: /* @__PURE__ */ jsx(Download, { className: "h-3.5 w-3.5" }) }),
+          /* @__PURE__ */ jsx(IconBtn, { label: "View fullscreen", onClick: () => setFullscreen(true), children: /* @__PURE__ */ jsx(Expand, { className: "h-3.5 w-3.5" }) })
+        ] }),
+        host.actions
       ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "p-3", children: isStreamActive || !hasSvg ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", "aria-busy": "true", children: [

package/dist/display/blocks/toml/TomlBlock.js

@@ -6,6 +6,7 @@ import { useState } from "react";
 import { cn } from "@ai-matrx/design-system";
 import { Copy, Check, ChevronRight, ChevronDown } from "lucide-react";
 import { Button } from "@ai-matrx/design-system/controls";
+import { useBlockHostSlot } from "../../block-host.js";
 function parseTomlLines(content) {
   return content.split("\n").map((raw) => {
     const trimmed = raw.trim();
@@ -70,6 +71,7 @@ const TomlBlock = ({ content, className }) => {
     notify: (message, kind) => kind === "error" ? toast.error(message) : toast.success(message)
   });
   const [copied, setCopied] = useState(false);
+  const host = useBlockHostSlot();
   const [collapsedSections, setCollapsedSections] = useState(
     /* @__PURE__ */ new Set()
   );
@@ -105,13 +107,17 @@ const TomlBlock = ({ content, className }) => {
     "div",
     {
       className: cn(
-        "my-3 rounded-lg border border-border bg-card overflow-hidden",
+        "my-3 rounded-lg border bg-card overflow-hidden transition-colors",
+        host.selected ? "border-primary" : "border-border",
         className
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-1.5 border-b border-border/50 bg-muted/30", children: [
           /* @__PURE__ */ jsx("span", { className: "text-xs font-mono font-semibold text-violet-600 dark:text-violet-400", children: "TOML" }),
-          /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), glyphTone: copied ? "success" : void 0, onClick: handleCopy, "aria-label": "Copy" })
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), glyphTone: copied ? "success" : void 0, onClick: handleCopy, "aria-label": "Copy" }),
+            host.actions
+          ] })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "px-3 py-2 font-mono text-sm leading-relaxed overflow-x-auto", children: lines.map((line, idx) => {
           if (hiddenLines.has(idx)) return null;

package/dist/display/blocks/tree/TreeBlock.js

@@ -8,6 +8,7 @@ import { Copy, Check } from "lucide-react";
 import { useCanvasPresentation } from "@ai-matrx/canvas/react";
 import { treeWrapsLines } from "../canvas-adaptive.js";
 import { Button } from "@ai-matrx/design-system/controls";
+import { useBlockHostSlot } from "../../block-host.js";
 const CONNECTORS = [
   "\u251C\u2500",
   "\u2514\u2500",
@@ -91,6 +92,7 @@ const TreeBlock = ({ content, className }) => {
     notify: (message, kind) => kind === "error" ? toast.error(message) : toast.success(message)
   });
   const [copied, setCopied] = useState(false);
+  const host = useBlockHostSlot();
   const lines = parseTreeLines(content);
   const wrap = treeWrapsLines(useCanvasPresentation());
   const handleCopy = async () => {
@@ -102,13 +104,17 @@ const TreeBlock = ({ content, className }) => {
     "div",
     {
       className: cn(
-        "my-3 rounded-lg border border-border bg-card overflow-hidden",
+        "my-3 rounded-lg border bg-card overflow-hidden transition-colors",
+        host.selected ? "border-primary" : "border-border",
         className
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-1.5 border-b border-border/50 bg-muted/30", children: [
           /* @__PURE__ */ jsx("span", { className: "text-xs font-mono font-semibold text-teal-600 dark:text-teal-400", children: "Tree" }),
-          /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), glyphTone: copied ? "success" : void 0, onClick: handleCopy, "aria-label": "Copy" })
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), glyphTone: copied ? "success" : void 0, onClick: handleCopy, "aria-label": "Copy" }),
+            host.actions
+          ] })
         ] }),
         /* @__PURE__ */ jsx(
           "div",

package/dist/display/blocks/xml/XmlBlock.js

@@ -10,6 +10,7 @@ import { cn } from "@ai-matrx/design-system";
 import { tokenizeXml } from "./xml-tokenize.js";
 import { useMarkdownStreaming } from "../../../markdown-core/streaming-context.js";
 import { Button } from "@ai-matrx/design-system/controls";
+import { useBlockHostSlot } from "../../block-host.js";
 function renderAttributes(attrs) {
   return attrs.map((attr, i) => /* @__PURE__ */ jsxs("span", { children: [
     " ",
@@ -33,6 +34,7 @@ const XmlBlock = ({
     notify: (message, kind) => kind === "error" ? toast.error(message) : toast.success(message)
   });
   const [copied, setCopied] = useState(false);
+  const host = useBlockHostSlot();
   const [collapsed, setCollapsed] = useState(/* @__PURE__ */ new Set());
   const [cardCollapsed, setCardCollapsed] = useState(false);
   const tokens = tokenizeXml(content);
@@ -94,7 +96,8 @@ const XmlBlock = ({
     "div",
     {
       className: cn(
-        "my-3 rounded-lg border border-border bg-card overflow-hidden",
+        "my-3 rounded-lg border bg-card overflow-hidden transition-colors",
+        host.selected ? "border-primary" : "border-border",
         className
       ),
       children: [
@@ -110,7 +113,8 @@ const XmlBlock = ({
               }
             ) : null
           ] }),
-          /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), glyphTone: copied ? "success" : void 0, "aria-label": "Copy XML", onClick: handleCopy, className: "size-11 lg:size-auto" })
+          /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), glyphTone: copied ? "success" : void 0, "aria-label": "Copy XML", onClick: handleCopy, className: "size-11 lg:size-auto" }),
+          host.actions
         ] }),
         !cardCollapsed && /* @__PURE__ */ jsx(
           "div",

package/dist/display/blocks/yaml/YamlBlock.js

@@ -6,6 +6,7 @@ import { useState } from "react";
 import { cn } from "@ai-matrx/design-system";
 import { ChevronRight, ChevronDown, Copy, Check } from "lucide-react";
 import { Button } from "@ai-matrx/design-system/controls";
+import { useBlockHostSlot } from "../../block-host.js";
 function parseYamlLines(content) {
   return content.split("\n").map((raw) => {
     const indent = raw.search(/\S|$/);
@@ -78,6 +79,7 @@ const YamlBlock = ({ content, className }) => {
     notify: (message, kind) => kind === "error" ? toast.error(message) : toast.success(message)
   });
   const [copied, setCopied] = useState(false);
+  const host = useBlockHostSlot();
   const [collapsed, setCollapsed] = useState(/* @__PURE__ */ new Set());
   const lines = parseYamlLines(content);
   const handleCopy = async () => {
@@ -121,13 +123,17 @@ const YamlBlock = ({ content, className }) => {
     "div",
     {
       className: cn(
-        "my-3 rounded-lg border border-border bg-card overflow-hidden",
+        "my-3 rounded-lg border bg-card overflow-hidden transition-colors",
+        host.selected ? "border-primary" : "border-border",
         className
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-1.5 border-b border-border/50 bg-muted/30", children: [
           /* @__PURE__ */ jsx("span", { className: "text-xs font-mono font-semibold text-amber-600 dark:text-amber-400", children: "YAML" }),
-          /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), glyphTone: copied ? "success" : void 0, onClick: handleCopy, "aria-label": "Copy" })
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), glyphTone: copied ? "success" : void 0, onClick: handleCopy, "aria-label": "Copy" }),
+            host.actions
+          ] })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "px-3 py-2 font-mono text-sm leading-relaxed overflow-x-auto", children: visibleLines.map((idx) => {
           const line = lines[idx];

package/dist/rich-document/variants/shared/AlchemyDocumentMenu.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useAlchemyDisclosure } from "../../../host/app-bindings.js";
-import * as React from "react";
 import { ContentTransferMenu } from "@ai-matrx/alchemy/react/workspace";
 import { unwrapKindEnvelopes } from "@ai-matrx/content-ir/source";
 import { directSource } from "@ai-matrx/alchemy/operate";
@@ -15,7 +14,6 @@ function AlchemyDocumentMenu({
   richCopy
 }) {
   useAlchemyDisclosure();
-  const [hasThinking, setHasThinking] = React.useState(false);
   const source = {
     id: sourceId,
     label: "Document",
@@ -29,7 +27,6 @@ function AlchemyDocumentMenu({
           "The document changed. Reopen Alchemy Menu for the current document."
         );
       const unthought = removeThinkingContent(ctx.content);
-      setHasThinking(unthought !== ctx.content);
       const text = unwrapKindEnvelopes(unthought);
       return directSource(
         { kind: "markdown", text },
@@ -42,28 +39,6 @@ function AlchemyDocumentMenu({
       );
     }
   };
-  const includingThinkingSource = {
-    id: `${sourceId}:including-thinking`,
-    label: "Document",
-    capture: async ({ signal }) => {
-      signal.throwIfAborted();
-      const ctx = getCtx();
-      const capturedSourceId = ctx.instanceKey("alchemy");
-      if (capturedSourceId !== sourceId)
-        throw new Error(
-          "The document changed. Reopen Alchemy Menu for the current document."
-        );
-      return directSource(
-        { kind: "markdown", text: ctx.content },
-        {
-          id: `${capturedSourceId}:including-thinking`,
-          sourceId: capturedSourceId,
-          revision: ctx.content,
-          label: "Document"
-        }
-      );
-    }
-  };
   return /* @__PURE__ */ jsx(
     ContentTransferMenu,
     {
@@ -80,17 +55,7 @@ function AlchemyDocumentMenu({
         // The split button carries the three ways to copy (COPY_LABELS); the palette keeps the rest.
         richCopy: (flavor) => richCopy(flavor === "default" ? "markdown" : flavor),
         richCopyFlavors: []
-      } : {},
-      variants: hasThinking ? [
-        {
-          id: "include-thinking",
-          label: "Raw with thinking",
-          copyLabel: "Raw with thinking",
-          section: "copy",
-          hint: "Includes the original reasoning content",
-          source: includingThinkingSource
-        }
-      ] : []
+      } : {}
     },
     sourceId
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/rich-content",
-  "version": "0.2.165",
+  "version": "0.2.167",
   "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",
@@ -131,20 +131,20 @@
     "unist-util-visit-parents": "^6.0.2",
     "yaml": "^2.9.1",
     "@ai-matrx/agents": "latest",
+    "@ai-matrx/alchemy": "latest",
+    "@ai-matrx/api": "latest",
     "@ai-matrx/content-ir": "latest",
     "@ai-matrx/content-ir-react": "latest",
+    "@ai-matrx/canvas": "latest",
     "@ai-matrx/data": "latest",
-    "@ai-matrx/alchemy": "latest",
     "@ai-matrx/diff": "latest",
-    "@ai-matrx/design-system": "latest",
+    "@ai-matrx/kit": "latest",
+    "@ai-matrx/media": "latest",
     "@ai-matrx/print": "latest",
-    "@ai-matrx/api": "latest",
     "@ai-matrx/records": "latest",
     "@ai-matrx/records-ui": "latest",
     "@ai-matrx/icons": "latest",
-    "@ai-matrx/canvas": "latest",
-    "@ai-matrx/media": "latest",
-    "@ai-matrx/kit": "latest"
+    "@ai-matrx/design-system": "latest"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
@@ -205,5 +205,5 @@
     "verify:modules-tarball": "node ./scripts/verify-modules-tarball.mjs",
     "verify:tarball": "node ./scripts/verify-tarball.mjs"
   },
-  "gitHead": "6a0868df3e9f82a0f02d077c67e206a003dc3a0e"
+  "gitHead": "ebc4f61cd17a04b88022d1a42f79b586e89c30a1"
 }