@ai-matrx/chat 0.6.0 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @ai-matrx/chat
 
+## 0.6.1
+### rendered-output P2 WP4: every artifact type attaches
+
+- `RenderedArtifactSource` carries `artifact_type`, the type's own `options` (first = default,
+  per-type labels: "Code", "Source", "Data", …; `unavailable` names why one is not offered yet)
+  and, for an UNSAVED block, `record_type: "inline"` + `body: { code, text }` — its content/text
+  ride `request.context` as a named entry (never `user_input`). Saved items keep the
+  `canvas_item` / `html_page` resource reference.
+- `readableText(value)` — the readable text form of structured data (server twin
+  `canvas_sources.readable_text`).
+- Composer: a `rendered_artifact` chip is `RenderedArtifactChip` — a representation part
+  switches content ↔ text, or captures a Screenshot now through the capture kept from attach time.
+- `attachRenderedArtifact` uploads a local (`kind: "file"`) capture through the file funnel when
+  no React upload hook is passed (canvas menus, message block actions).
+
+Consumer action: optional — pass `artifact_type` + `options` (and `body` for unsaved blocks).
+
+### rendered-output P2 WP3: Full Print draws canvases and marked surfaces
+
+- Full Print's pre-pass (`conversation/utils/frame-print`) now also swaps every `<canvas>` for the
+  picture it holds (an honest stand-in when another origin drew into it) and every
+  `[data-matrx-print-picture]` element for the host's picture of it — new port
+  `setElementPrintCapture` in `@ai-matrx/chat/host/frame-print` (a Leaflet map's tiles).
+
+Consumer action: optional — plug `setElementPrintCapture` to draw marked surfaces.
+
 ## 0.6.0
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/dist/agents/components/inputs/resources/RenderedArtifactChip.d.ts

@@ -0,0 +1,8 @@
+import type { ManagedResource } from "../../../types/instance.types.js";
+export declare function RenderedArtifactChip({ conversationId, resource, onRemove, onOpen, pressed, }: {
+    conversationId: string;
+    resource: ManagedResource;
+    onRemove: () => void;
+    onOpen: () => void;
+    pressed: boolean;
+}): import("react").JSX.Element | null;

package/dist/agents/components/inputs/resources/RenderedArtifactChip.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement, useState } from "react";
+import { Check, ChevronDown, Shapes } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@ai-matrx/design-system";
+import { Tile } from "@ai-matrx/design-system/controls";
+import { useAppStore } from "../../../../store/hooks.js";
+import {
+  isRenderedArtifactRepresentation,
+  isRenderedArtifactSource,
+  renderedArtifactCaptureFor,
+  renderedArtifactOptionsOf,
+  renderedArtifactRepresentationLabel
+} from "../../../utils/renderedArtifactContext.js";
+import { ComposerChip, ComposerChipPart } from "../smart-input/ComposerChip.js";
+import { compactChipLabel } from "../../messages-display/user/compact-chip-label.js";
+import { attachRenderedArtifact } from "./useAttachRenderedArtifact.js";
+import {
+  removeResource,
+  setResourcePreview,
+  updateResourceOptions
+} from "../../../redux/execution-system/instance-resources/instance-resources.slice.js";
+function RenderedArtifactChip({
+  conversationId,
+  resource,
+  onRemove,
+  onOpen,
+  pressed
+}) {
+  const store = useAppStore();
+  const [open, setOpen] = useState(false);
+  const source = isRenderedArtifactSource(resource.source) ? resource.source : null;
+  if (!source) return null;
+  const current = isRenderedArtifactRepresentation(
+    resource.options.representation
+  ) ? resource.options.representation : "code";
+  const title = source.title || "Artifact";
+  const capture = renderedArtifactCaptureFor(source);
+  const choose = async (value) => {
+    setOpen(false);
+    if (value === current) return;
+    const { resourceId } = resource;
+    if (value !== "screenshot") {
+      store.dispatch(updateResourceOptions({ conversationId, resourceId, options: { representation: value } }));
+      store.dispatch(
+        setResourcePreview({
+          conversationId,
+          resourceId,
+          preview: `${title} \xB7 ${renderedArtifactRepresentationLabel(source, value)}`
+        })
+      );
+      return;
+    }
+    if (!capture) return;
+    const ok = await attachRenderedArtifact(
+      { dispatch: store.dispatch, getState: store.getState },
+      conversationId,
+      { source, representation: "screenshot", capture }
+    );
+    if (ok) store.dispatch(removeResource({ conversationId, resourceId }));
+  };
+  const stop = (event) => event.stopPropagation();
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(
+      ComposerChip,
+      {
+        tone: "quiet",
+        onClick: onOpen,
+        "aria-label": `Attached ${source.artifact_type ?? "artifact"}: ${title}`,
+        pressed,
+        icon: createElement(Shapes),
+        label: compactChipLabel(title),
+        remove: { label: `Remove ${title}`, onRemove },
+        parts: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          ComposerChipPart,
+          {
+            tone: "quiet",
+            onClick: stop,
+            onPointerDown: stop,
+            "aria-label": `What the AI receives from ${title}: ${renderedArtifactRepresentationLabel(source, current)}`,
+            children: [
+              /* @__PURE__ */ jsx("span", { children: renderedArtifactRepresentationLabel(source, current) }),
+              /* @__PURE__ */ jsx(ChevronDown, { className: "!size-3" })
+            ]
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsx(PopoverContent, { sizing: "content", side: "top", align: "start", sideOffset: 6, className: "p-1", onClick: stop, children: renderedArtifactOptionsOf(source).map((option) => {
+      const blocked = option.unavailable ?? (option.value === "screenshot" && !capture ? "Attach again to capture" : void 0);
+      return /* @__PURE__ */ jsx(
+        Tile,
+        {
+          variant: "quiet",
+          icon: option.value === current ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx("span", {}),
+          title: option.label,
+          selected: option.value === current,
+          line: blocked ?? option.hint,
+          disabled: Boolean(blocked),
+          onClick: () => void choose(option.value)
+        },
+        option.value
+      );
+    }) })
+  ] });
+}
+export {
+  RenderedArtifactChip
+};

package/dist/agents/components/inputs/resources/SmartAgentResourceChips.js

@@ -22,6 +22,7 @@ import { revokeTrackedObjectUrl } from "@ai-matrx/media/files";
 import { resolveContextItemDef } from "../../context-items/registry.js";
 import { remarkKindDisplay } from "../../context-items/remark-display.js";
 import { dismissRemarkChip, remarkSourceOf } from "../../../redux/execution-system/instance-resources/remarks.js";
+import { RenderedArtifactChip } from "./RenderedArtifactChip.js";
 import {
   AttachedDocumentChip
 } from "./AttachedDocumentChip.js";
@@ -293,6 +294,25 @@ function SmartAgentResourceChips({
             onSettingsChange: (settings) => handleDocumentSettings(resource.resourceId, settings)
           },
           resource.resourceId
+        ) : resource.blockType === "rendered_artifact" && resource.status === "ready" ? /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { opacity: 0, scale: 0.85 },
+            animate: { opacity: 1, scale: 1 },
+            exit: { opacity: 0, scale: 0.85 },
+            className: "inline-flex shrink-0",
+            children: /* @__PURE__ */ jsx(
+              RenderedArtifactChip,
+              {
+                conversationId,
+                resource,
+                onRemove: () => handleRemove(resource.resourceId),
+                onOpen: () => openDrawerForResource(resource.resourceId),
+                pressed: isShowingResource(resource.resourceId)
+              }
+            )
+          },
+          resource.resourceId
         ) : /* @__PURE__ */ jsx(
           ResourceChip,
           {

package/dist/agents/components/inputs/resources/useAttachRenderedArtifact.js

@@ -9,10 +9,34 @@ import {
 } from "../../../redux/execution-system/instance-resources/instance-resources.slice.js";
 import { generateResourceId } from "../../../redux/execution-system/utils/ids.js";
 import {
-  RENDERED_ARTIFACT_BLOCK_TYPE
+  RENDERED_ARTIFACT_BLOCK_TYPE,
+  registerRenderedArtifactCapture,
+  renderedArtifactRepresentationLabel
 } from "../../../utils/renderedArtifactContext.js";
+import { fileHandler } from "@ai-matrx/media/files/engine/handler/handler";
+import { composeUploadFolderPath } from "@ai-matrx/media/files";
+import {
+  ensureExecutionOrganization,
+  requireExecutionOrganizationId
+} from "../../../redux/execution-system/utils/required-organization.js";
 import { attachResourceToConversation } from "./attach-resource.js";
 import { useUploadAgentResources } from "./usePasteImageResource.js";
+async function uploadCapturedImage(store, conversationId, file) {
+  const state = store.getState();
+  const organizationId = await ensureExecutionOrganization(state, conversationId) ?? requireExecutionOrganizationId(state, conversationId);
+  const uploaded = await fileHandler.upload(
+    { kind: "file", file },
+    {
+      folderPath: composeUploadFolderPath("attachments", "screenshots"),
+      visibility: "personal",
+      metadata: { scope: { organization_id: organizationId } },
+      createShareLink: true,
+      shareLinkPermissionLevel: "viewer"
+    }
+  );
+  if (!uploaded.fileId) throw new Error("The screenshot upload returned no file id");
+  return { fileId: uploaded.fileId, url: uploaded.url ?? null };
+}
 function screenshotName(title) {
   const base = title.trim().replace(/[^\w\s.-]+/g, "").trim().slice(0, 60) || "page";
   return `${base} screenshot.png`;
@@ -37,6 +61,7 @@ async function attachRenderedArtifact(store, conversationId, { source, represent
     toast.error("Open a chat to attach this to.");
     return false;
   }
+  if (capture) registerRenderedArtifactCapture(source, capture);
   if (representation !== "screenshot") {
     const resourceId = generateResourceId();
     dispatch(
@@ -52,7 +77,7 @@ async function attachRenderedArtifact(store, conversationId, { source, represent
       setResourcePreview({
         conversationId,
         resourceId,
-        preview: `${source.title || "Page"} \xB7 ${representation === "code" ? "Code" : "Text"}`
+        preview: `${source.title || "Artifact"} \xB7 ${renderedArtifactRepresentationLabel(source, representation)}`
       })
     );
     return true;
@@ -77,18 +102,18 @@ async function attachRenderedArtifact(store, conversationId, { source, represent
     if (state.instanceResources.byConversationId[conversationId]?.[placeholderId] === void 0) {
       return false;
     }
-    if (result.kind === "file") {
-      if (!uploadFiles) throw new Error("This capture needs an upload, which is not available here");
+    if (result.kind === "file" && uploadFiles) {
       dispatch(removeResource({ conversationId, resourceId: placeholderId }));
       await uploadFiles([result.file]);
       return true;
     }
+    const stored = result.kind === "file" ? await uploadCapturedImage(store, conversationId, result.file) : result;
     const attached = await attachResourceToConversation(store, conversationId, {
       type: "file",
       data: {
-        id: result.fileId,
+        id: stored.fileId,
         filename: name,
-        url: result.url ?? void 0,
+        url: stored.url ?? void 0,
         type: "image/png",
         mime_type: "image/png",
         details: { filename: name }

package/dist/agents/utils/renderedArtifactContext.d.ts

@@ -1,41 +1,79 @@
 /**
  * Rendered-artifact context items (rendered-output standard, guarantee 3).
  *
- * An HTML page or HTML canvas item is attachable to a chat turn three ways:
- *   - `code`       — the document, as a resource reference (canvas_item preferred),
- *   - `text`       — what a reader sees, the server resolver's `text` representation,
- *   - `screenshot` — the page as rendered, captured at ATTACH time by the host's
- *                    capture port and attached as an explicit image part
+ * Any artifact the person sees — an HTML page, a canvas item, a table / code /
+ * diagram / quiz block inside a message — is attachable to a chat turn in the
+ * representations ITS TYPE offers (the host declares them per artifact type on
+ * the source's `options`; HTML's are the default list below):
+ *   - `code`       — the artifact's content: the HTML document, the code, the
+ *                    diagram source, the markdown, or the kind's data as JSON
+ *                    (labelled per type: "Code", "Source", "Data", …),
+ *   - `text`       — a readable plain-text form, where one exists,
+ *   - `screenshot` — the artifact as rendered, captured at ATTACH time by the
+ *                    host's capture port and attached as an explicit image part
  *                    (`input_image`, the paste-image path). Never captured at send.
  *
- * `code` / `text` ride `request.context` as a resource reference
- * (`selectResourceContextPayload`); they never become `user_input`.
+ * A SAVED artifact (`canvas_item` / `html_page`) rides `request.context` as a
+ * resource reference with the chosen representation; the server resolver reads
+ * it. An UNSAVED one (a block in a message that was never materialised) is an
+ * `inline` source: its content/text ride `request.context` as a named entry.
+ * Neither ever becomes `user_input` (THE USER-INPUT LAW).
  */
-import { createResourceReference } from "../agent-context/resource-reference.js";
 import type { RenderedArtifactRepresentation, ResourceRepresentation } from "../types/instance.types.js";
 export declare const RENDERED_ARTIFACT_BLOCK_TYPE = "rendered_artifact";
-export type RenderedArtifactRecordType = "canvas_item" | "html_page";
+export type RenderedArtifactRecordType = "canvas_item" | "html_page" | "inline";
+export interface RenderedArtifactRepresentationOption {
+    value: RenderedArtifactRepresentation;
+    label: string;
+    hint: string;
+    /** Present when this type cannot offer it yet — shown, with the reason, never hidden. */
+    unavailable?: string;
+}
+/** The body of an `inline` (unsaved) artifact — what its context entries carry. */
+export interface RenderedArtifactInlineBody {
+    /** The content representation: code, source, markdown, or the data as JSON. */
+    code: string;
+    /** The readable plain-text form, when the type has one. */
+    text?: string | null;
+}
 /** The `source` of a `rendered_artifact` resource. */
 export interface RenderedArtifactSource {
     kind: "rendered_artifact";
     record_type: RenderedArtifactRecordType;
+    /** The record id; for `inline`, a stable key of the block. */
     record_id: string;
     title: string;
+    /** The artifact type (canvas content type / `__kind`) — names it to the model. */
+    artifact_type?: string;
+    /** What this artifact offers, in menu order, first = default. Absent → HTML's list. */
+    options?: RenderedArtifactRepresentationOption[];
+    /** Only for `inline`. */
+    body?: RenderedArtifactInlineBody;
 }
-export interface RenderedArtifactRepresentationOption {
-    value: RenderedArtifactRepresentation;
-    label: string;
-    hint: string;
-}
-/** The options a rendered artifact offers, data-driven so a new one is one entry. */
+/** HTML's options — the default when a source declares none. */
 export declare function availableRenderedArtifactRepresentations(): RenderedArtifactRepresentationOption[];
+/** The options a source offers (its own, else HTML's). */
+export declare function renderedArtifactOptionsOf(source: RenderedArtifactSource): RenderedArtifactRepresentationOption[];
+/** The chip's short name for a representation of this source. */
+export declare function renderedArtifactRepresentationLabel(source: RenderedArtifactSource, representation: RenderedArtifactRepresentation): string;
 export declare function isRenderedArtifactSource(source: unknown): source is RenderedArtifactSource;
 export declare function isRenderedArtifactRepresentation(value: unknown): value is RenderedArtifactRepresentation;
 /**
- * The `request.context` entry for a code/text attachment, or null when the
+ * The `request.context` entry for a content/text attachment, or null when the
  * source is malformed or the choice is `screenshot` (an image part, not context).
  */
 export declare function renderedArtifactContextEntry(source: unknown, representation: ResourceRepresentation | undefined): {
     key: string;
-    reference: ReturnType<typeof createResourceReference>;
+    reference: unknown;
 } | null;
+/**
+ * A readable plain-text form of structured data (a kind value, a table, a
+ * quiz): one `label: value` line per leaf, nested objects indented, arrays as
+ * numbered items, `__kind` named once at the top. Server twin:
+ * `canvas_sources.readable_text` (same rules, same corpus in both tests).
+ */
+export declare function readableText(value: unknown): string;
+type CaptureFn = () => Promise<unknown>;
+export declare function registerRenderedArtifactCapture(source: Pick<RenderedArtifactSource, "record_type" | "record_id">, capture: CaptureFn): void;
+export declare function renderedArtifactCaptureFor<T = unknown>(source: Pick<RenderedArtifactSource, "record_type" | "record_id">): (() => Promise<T>) | null;
+export {};

package/dist/agents/utils/renderedArtifactContext.js

@@ -7,10 +7,23 @@ function availableRenderedArtifactRepresentations() {
     { value: "text", label: "Text", hint: "The words on the page" }
   ];
 }
+function renderedArtifactOptionsOf(source) {
+  return source.options && source.options.length > 0 ? source.options : availableRenderedArtifactRepresentations();
+}
+function renderedArtifactRepresentationLabel(source, representation) {
+  const option = renderedArtifactOptionsOf(source).find((o) => o.value === representation);
+  if (option) return option.label;
+  return representation === "code" ? "Code" : representation === "text" ? "Text" : "Screenshot";
+}
 function isRenderedArtifactSource(source) {
   if (!source || typeof source !== "object") return false;
   const s = source;
-  return s.kind === "rendered_artifact" && (s.record_type === "canvas_item" || s.record_type === "html_page") && typeof s.record_id === "string" && s.record_id.length > 0;
+  if (s.kind !== "rendered_artifact") return false;
+  if (typeof s.record_id !== "string" || s.record_id.length === 0) return false;
+  if (s.record_type === "canvas_item" || s.record_type === "html_page") return true;
+  if (s.record_type !== "inline") return false;
+  const body = s.body;
+  return !!body && typeof body.code === "string";
 }
 function isRenderedArtifactRepresentation(value) {
   return value === "code" || value === "screenshot" || value === "text";
@@ -19,12 +32,28 @@ function serverRepresentation(recordType, representation) {
   if (representation === "text") return "text";
   return recordType === "html_page" ? "html" : "content";
 }
+function inlineEntryValue(source, representation) {
+  const body = source.body;
+  const text = representation === "text" ? body.text ?? body.code : body.code;
+  const label = renderedArtifactRepresentationLabel(source, representation);
+  const type = source.artifact_type ? ` ${source.artifact_type}` : "";
+  return `Attached${type} "${source.title || "artifact"}" (${label.toLowerCase()}):
+
+${text}`;
+}
 function renderedArtifactContextEntry(source, representation) {
   if (!isRenderedArtifactSource(source)) return null;
   const rep = isRenderedArtifactRepresentation(
     representation
   ) ? representation : "code";
   if (rep === "screenshot") return null;
+  if (source.record_type === "inline") {
+    const safeId = source.record_id.replace(/[^\w-]+/g, "_").slice(0, 64);
+    return {
+      key: `artifact_${safeId}_${rep === "code" ? "content" : "text"}`,
+      reference: inlineEntryValue(source, rep)
+    };
+  }
   return {
     key: `resource_${source.record_type}_${source.record_id}_${rep}`,
     reference: createResourceReference(source.record_type, source.record_id, {
@@ -32,10 +61,62 @@ function renderedArtifactContextEntry(source, representation) {
     })
   };
 }
+function readableText(value) {
+  const lines = [];
+  const humanize = (key) => key.replace(/[_-]+/g, " ").replace(/\s+/g, " ").trim();
+  const walk = (node, depth, label) => {
+    const pad = "  ".repeat(depth);
+    const prefix = label ? `${label}: ` : "";
+    if (node === null || node === void 0 || node === "") return;
+    if (typeof node !== "object") {
+      lines.push(`${pad}${prefix}${String(node)}`);
+      return;
+    }
+    if (Array.isArray(node)) {
+      if (node.length === 0) return;
+      if (label) lines.push(`${pad}${label}:`);
+      node.forEach((item, index) => {
+        if (item !== null && typeof item === "object") {
+          lines.push(`${pad}${label ? "  " : ""}${index + 1}.`);
+          walk(item, depth + (label ? 2 : 1), null);
+        } else {
+          walk(item, depth + (label ? 1 : 0), `${index + 1}`);
+        }
+      });
+      return;
+    }
+    const record = node;
+    if (label) lines.push(`${pad}${label}:`);
+    for (const [key, child] of Object.entries(record)) {
+      if (key === "__kind") {
+        if (depth === 0 && !label && typeof child === "string") lines.push(`(${child})`);
+        continue;
+      }
+      walk(child, depth + (label ? 1 : 0), humanize(key));
+    }
+  };
+  walk(value, 0, null);
+  return lines.join("\n");
+}
+const captures = /* @__PURE__ */ new Map();
+function sourceKey(source) {
+  return `${source.record_type}:${source.record_id}`;
+}
+function registerRenderedArtifactCapture(source, capture) {
+  captures.set(sourceKey(source), capture);
+}
+function renderedArtifactCaptureFor(source) {
+  return captures.get(sourceKey(source)) ?? null;
+}
 export {
   RENDERED_ARTIFACT_BLOCK_TYPE,
   availableRenderedArtifactRepresentations,
   isRenderedArtifactRepresentation,
   isRenderedArtifactSource,
-  renderedArtifactContextEntry
+  readableText,
+  registerRenderedArtifactCapture,
+  renderedArtifactCaptureFor,
+  renderedArtifactContextEntry,
+  renderedArtifactOptionsOf,
+  renderedArtifactRepresentationLabel
 };

package/dist/conversation/utils/frame-print.d.ts

@@ -1,10 +1,15 @@
 /**
- * Full Print's frame pre-pass (the `renderAllDiagrams` of live pages): every
- * `<iframe>` inside the captured message is shown as its picture — from the
- * host's frame capture port — or as an honest stand-in, for exactly as long
- * as the capture runs. The frames are hidden, never removed (removing one
- * reloads its page), and come back untouched when `restore` runs.
+ * Full Print's live-surface pre-pass (the `renderAllDiagrams` of live pages):
+ * every `<iframe>` inside the captured message is shown as its picture — from
+ * the host's frame capture port — or as an honest stand-in; every `<canvas>`
+ * (a chart, a document editor's page) as the picture it holds right now; every
+ * `[data-matrx-print-picture]` element (a map) as the host's picture of it.
+ * Each lasts exactly as long as the capture runs. The originals are hidden,
+ * never removed (removing a frame reloads its page), and come back untouched
+ * when `restore` runs.
  */
+/** What prints in a canvas's place when its pixels cannot be read (another origin drew into it). */
+export declare const CANVAS_PRINT_STAND_IN = "Drawing unavailable \u2014 print it from its card.";
 export declare function framesToPictures(root: HTMLElement): Promise<{
     restore: () => void;
     frames: number;

package/dist/conversation/utils/frame-print.js

@@ -1,11 +1,41 @@
-import { FRAME_PRINT_STAND_IN, getFramePrintCapture } from "../../host/frame-print.js";
+import { FRAME_PRINT_STAND_IN, getElementPrintCapture, getFramePrintCapture } from "../../host/frame-print.js";
+const CANVAS_PRINT_STAND_IN = "Drawing unavailable \u2014 print it from its card.";
+function standInFor(text, width, height) {
+  const stand = document.createElement("div");
+  stand.textContent = text;
+  stand.style.cssText = `display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:${width ? `${width}px` : "100%"};max-width:100%;min-height:${Math.min(Math.max(height, 96), 240)}px;padding:16px;border:1px dashed #94a3b8;border-radius:8px;color:#475569;font:italic 13px/1.4 system-ui,sans-serif;text-align:center;background:#f8fafc`;
+  return stand;
+}
+async function pictureOf(src, alt, width, height) {
+  const img = document.createElement("img");
+  img.src = src;
+  img.alt = alt;
+  img.style.cssText = `display:block;width:${width ? `${width}px` : "100%"};max-width:100%;height:${height ? `${height}px` : "auto"}`;
+  await img.decode().catch(() => void 0);
+  return img;
+}
+function swap(original, stand) {
+  stand.setAttribute("data-matrx-frame-print", "");
+  const display = original.style.display;
+  original.style.display = "none";
+  original.after(stand);
+  return () => {
+    stand.remove();
+    original.style.display = display;
+  };
+}
 async function framesToPictures(root) {
-  const frames = [...root.querySelectorAll("iframe")];
-  if (frames.length === 0) return { restore: () => void 0, frames: 0 };
+  const marked = [...root.querySelectorAll("[data-matrx-print-picture]")];
+  const insideMarked = (node) => marked.some((element) => element !== node && element.contains(node));
+  const frames = [...root.querySelectorAll("iframe")].filter((frame) => !insideMarked(frame));
+  const canvases = [...root.querySelectorAll("canvas")].filter((canvas) => !insideMarked(canvas));
+  const total = frames.length + canvases.length + marked.length;
+  if (total === 0) return { restore: () => void 0, frames: 0 };
   const capture = getFramePrintCapture();
+  const elementCapture = getElementPrintCapture();
   const undo = [];
-  await Promise.all(
-    frames.map(async (frame) => {
+  await Promise.all([
+    ...frames.map(async (frame) => {
       let src = null;
       if (capture) {
         try {
@@ -16,31 +46,39 @@ async function framesToPictures(root) {
       }
       const width = frame.clientWidth || frame.offsetWidth;
       const height = frame.clientHeight || frame.offsetHeight;
-      let stand;
-      if (src) {
-        const img = document.createElement("img");
-        img.src = src;
-        img.alt = frame.title || "Web page";
-        img.style.cssText = `display:block;width:${width ? `${width}px` : "100%"};max-width:100%;height:auto`;
-        await img.decode().catch(() => void 0);
-        stand = img;
-      } else {
-        stand = document.createElement("div");
-        stand.textContent = FRAME_PRINT_STAND_IN;
-        stand.style.cssText = `display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:${width ? `${width}px` : "100%"};max-width:100%;min-height:${Math.min(Math.max(height, 96), 240)}px;padding:16px;border:1px dashed #94a3b8;border-radius:8px;color:#475569;font:italic 13px/1.4 system-ui,sans-serif;text-align:center;background:#f8fafc`;
+      const stand = src ? await pictureOf(src, frame.title || "Web page", width, null) : standInFor(FRAME_PRINT_STAND_IN, width, height);
+      undo.push(swap(frame, stand));
+    }),
+    ...canvases.map(async (canvas) => {
+      const width = canvas.clientWidth || canvas.offsetWidth;
+      const height = canvas.clientHeight || canvas.offsetHeight;
+      if (!width || !height) return;
+      let src = null;
+      try {
+        src = canvas.toDataURL("image/png");
+      } catch (error) {
+        console.error("[print] a drawing could not be read for print", error);
+      }
+      const stand = src ? await pictureOf(src, canvas.getAttribute("aria-label") || "Drawing", width, height) : standInFor(CANVAS_PRINT_STAND_IN, width, height);
+      undo.push(swap(canvas, stand));
+    }),
+    ...marked.map(async (element) => {
+      if (!elementCapture) return;
+      let src = null;
+      try {
+        src = await elementCapture(element);
+      } catch (error) {
+        console.error("[print] a live surface could not be captured for print", error);
       }
-      stand.setAttribute("data-matrx-frame-print", "");
-      const display = frame.style.display;
-      frame.style.display = "none";
-      frame.after(stand);
-      undo.push(() => {
-        stand.remove();
-        frame.style.display = display;
-      });
+      if (!src) return;
+      const width = element.clientWidth || element.offsetWidth;
+      const height = element.clientHeight || element.offsetHeight;
+      undo.push(swap(element, await pictureOf(src, element.getAttribute("aria-label") || "Picture", width, height || null)));
     })
-  );
-  return { restore: () => undo.forEach((fn) => fn()), frames: frames.length };
+  ]);
+  return { restore: () => undo.forEach((fn) => fn()), frames: total };
 }
 export {
+  CANVAS_PRINT_STAND_IN,
   framesToPictures
 };

package/dist/host/frame-print.d.ts

@@ -15,3 +15,13 @@ export declare const FRAME_PRINT_STAND_IN = "Page image unavailable \u2014 print
 /** Plugs (or, with null, removes) the host's frame capture engine. */
 export declare function setFramePrintCapture(capture: FramePrintCapture | null): void;
 export declare function getFramePrintCapture(): FramePrintCapture | null;
+/**
+ * A picture of one marked element (`data-matrx-print-picture`) — a surface a
+ * DOM capture draws wrong or blank (a map whose tiles come from another
+ * origin). The host plugs the drawing in; without it the element is captured
+ * as it is.
+ */
+export type ElementPrintCapture = (element: HTMLElement) => Promise<string | null>;
+/** Plugs (or, with null, removes) the host's capture for `[data-matrx-print-picture]` elements. */
+export declare function setElementPrintCapture(capture: ElementPrintCapture | null): void;
+export declare function getElementPrintCapture(): ElementPrintCapture | null;

package/dist/host/frame-print.js

@@ -6,8 +6,17 @@ function setFramePrintCapture(capture) {
 function getFramePrintCapture() {
   return globalThis[PORT] ?? null;
 }
+const ELEMENT_PORT = /* @__PURE__ */ Symbol.for("ai-matrx.chat.element-print-capture");
+function setElementPrintCapture(capture) {
+  globalThis[ELEMENT_PORT] = capture;
+}
+function getElementPrintCapture() {
+  return globalThis[ELEMENT_PORT] ?? null;
+}
 export {
   FRAME_PRINT_STAND_IN,
+  getElementPrintCapture,
   getFramePrintCapture,
+  setElementPrintCapture,
   setFramePrintCapture
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/chat",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "THE one AI Matrx person-to-agent chat system: the full chat (running agents, conversations, tool calls, streaming, context, surfaces, voice) as per-module subpaths @ai-matrx/chat/<domain>/<module> over a host contract (/host, /host/react) whose only required value is a db. One chat, one renderer: the old kernel entries (., /external-store, /matrx, /react, /tools, styles.css, tokens.css) are retired.",
   "type": "module",
   "license": "MIT",
@@ -166,16 +166,15 @@
     "server-only": "^0.0.1",
     "uuid": "^14.0.2",
     "zod": "^4.6.5",
-    "@ai-matrx/alchemy": "latest",
-    "@ai-matrx/agents": "latest",
     "@ai-matrx/associations": "latest",
     "@ai-matrx/browser-audio": "latest",
     "@ai-matrx/canvas": "latest",
     "@ai-matrx/content-ir": "latest",
     "@ai-matrx/content-ir-react": "latest",
+    "@ai-matrx/alchemy": "latest",
     "@ai-matrx/data": "latest",
-    "@ai-matrx/diff": "latest",
     "@ai-matrx/design-system": "latest",
+    "@ai-matrx/diff": "latest",
     "@ai-matrx/icons": "latest",
     "@ai-matrx/kit": "latest",
     "@ai-matrx/media": "latest",
@@ -184,7 +183,8 @@
     "@ai-matrx/records": "latest",
     "@ai-matrx/records-ui": "latest",
     "@ai-matrx/rich-content": "latest",
-    "@ai-matrx/rich-editor": "latest"
+    "@ai-matrx/rich-editor": "latest",
+    "@ai-matrx/agents": "latest"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",
@@ -300,5 +300,5 @@
     "check:side-panel-bundle": "node ./scripts/check-side-panel-bundle.mjs",
     "check:side-effects": "node ../scripts/check-side-effects-listed.mjs . && node ../scripts/check-side-effects-listed.mjs --self-test"
   },
-  "gitHead": "168e2544282fe09d4c753a4e2fb5daf43aede766"
+  "gitHead": "f891cf7d6f77d82f035823fda1565422baa3d62e"
 }