@ai-matrx/rich-content 0.2.4 → 0.2.7

package/dist/display/blocks/generic/StructuredValueTabs.js

@@ -0,0 +1,124 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useClipboard } from "@ai-matrx/kit/clipboard";
+import { toast } from "../../../host/toast.js";
+import { useState } from "react";
+import { Braces, Check, Copy, TriangleAlert } from "lucide-react";
+import { cn } from "@ai-matrx/design-system";
+import { hasKindErrors } from "../../../kinds/react/kind-problems.js";
+import { IntoTileActions, useHasTileActionsSlot } from "./tile-actions-slot.js";
+import { ErrorAlchemyMenu } from "../../../host/ErrorActions.js";
+function GhostIconButton({
+  active,
+  label,
+  icon: Icon,
+  onClick,
+  iconClassName
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-pressed": active,
+      "aria-label": label,
+      title: label,
+      className: cn(
+        "inline-flex h-6 w-6 items-center justify-center rounded-md transition-colors",
+        active ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"
+      ),
+      children: /* @__PURE__ */ jsx(Icon, { className: cn("h-3.5 w-3.5", iconClassName) })
+    }
+  );
+}
+function StructuredValueTabs({
+  value,
+  raw,
+  header,
+  problems,
+  children
+}) {
+  const { copyText } = useClipboard({
+    notify: (message, kind) => kind === "error" ? toast.error(message) : toast.success(message)
+  });
+  const [tab, setTab] = useState("preview");
+  const [copied, setCopied] = useState(false);
+  const hasSlot = useHasTileActionsSlot();
+  const json = value !== void 0 && value !== null ? JSON.stringify(value, null, 2) : raw ?? "";
+  const copy = async () => {
+    try {
+      await copyText(json);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+    }
+  };
+  const jsonActive = tab === "json";
+  const errorsActive = tab === "errors";
+  const shownProblems = problems ?? [];
+  const hasErrors = hasKindErrors(shownProblems);
+  const controls = /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-0.5", children: [
+    shownProblems.length > 0 ? /* @__PURE__ */ jsx(
+      GhostIconButton,
+      {
+        active: errorsActive,
+        label: errorsActive ? "Back to preview" : `View ${shownProblems.length} problem${shownProblems.length === 1 ? "" : "s"}`,
+        icon: TriangleAlert,
+        onClick: () => setTab(errorsActive ? "preview" : "errors"),
+        iconClassName: errorsActive ? void 0 : hasErrors ? "text-destructive" : "text-amber-600 dark:text-amber-400"
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      GhostIconButton,
+      {
+        active: jsonActive,
+        label: jsonActive ? "Back to preview" : "View JSON",
+        icon: Braces,
+        onClick: () => setTab(jsonActive ? "preview" : "json")
+      }
+    ),
+    jsonActive ? /* @__PURE__ */ jsx(
+      GhostIconButton,
+      {
+        active: false,
+        label: copied ? "Copied" : "Copy JSON",
+        icon: copied ? Check : Copy,
+        onClick: copy,
+        iconClassName: copied ? "text-emerald-600 dark:text-emerald-400" : void 0
+      }
+    ) : null
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: cn(!hasSlot && "relative"), children: [
+    /* @__PURE__ */ jsx(IntoTileActions, { children: hasSlot ? controls : (
+      // No header slot and no reserved row: the button sits in the
+      // content area's own top-right corner (see file header for why
+      // that's safe for the bodies this wraps).
+      /* @__PURE__ */ jsx("span", { className: "absolute right-0 top-0 z-10", children: controls })
+    ) }),
+    header,
+    tab === "preview" ? children : tab === "errors" ? /* @__PURE__ */ jsxs("div", { className: "max-h-[28rem] space-y-2 overflow-auto rounded-md border border-border bg-muted/30 p-3", children: [
+      shownProblems.map((problem, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-xs leading-relaxed", children: [
+        /* @__PURE__ */ jsx(
+          TriangleAlert,
+          {
+            className: cn(
+              "mt-0.5 h-3.5 w-3.5 shrink-0",
+              problem.severity === "error" ? "text-destructive" : problem.severity === "warning" ? "text-amber-600 dark:text-amber-400" : "text-muted-foreground"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsxs("span", { className: "mr-1.5 rounded bg-muted px-1 py-0.5 font-mono text-[10px] text-muted-foreground", children: [
+            problem.code,
+            problem.path ? ` @ ${problem.path}` : ""
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-foreground", children: problem.message })
+        ] })
+      ] }, i)),
+      /* @__PURE__ */ jsx(ErrorAlchemyMenu, {})
+    ] }) : /* @__PURE__ */ jsx("pre", { className: "max-h-[28rem] overflow-auto rounded-md border border-border bg-muted/30 p-3 font-mono text-xs leading-relaxed text-foreground", children: json })
+  ] });
+}
+export {
+  StructuredValueTabs
+};

package/dist/display/blocks/generic/tile-actions-slot.d.ts

@@ -0,0 +1,39 @@
+/**
+ * THE HEADER-ACTIONS SLOT — lets deep content place its small controls in its
+ * host tile's HEADER line instead of spending a body row on them.
+ *
+ * Arman (2026-08-26, Study Pack run page): "the preview versus JSON is
+ * sitting outside of the component, but not in the header section as tiny
+ * buttons as they should be. Instead, they're giant buttons wasting all of
+ * the most valuable user interface space." The header row already exists and
+ * already has dead space to the right of the title; the controls belong
+ * there.
+ *
+ * Mechanics: the HOST (a run-surface tile, a deliverable card) renders
+ * `<TileActionsTarget/>` inside its header and wraps its body in
+ * `<TileActionsProvider>`. Body content (StructuredValueTabs) portals its
+ * controls into the target when one exists, and renders them inline —
+ * compactly — when it doesn't, so every non-tile surface keeps working with
+ * zero changes.
+ */
+import React from "react";
+export declare function TileActionsProvider({ target, children, }: {
+    target: HTMLElement | null;
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** The header-side mount point. Renders nothing visible of its own. */
+export declare function useTileActionsTarget(): {
+    target: HTMLElement | null;
+    targetProps: {
+        ref: (el: HTMLElement | null) => void;
+    };
+};
+/**
+ * Render `children` into the host tile's header slot when one is provided,
+ * inline otherwise. The one seam every in-body control row uses.
+ */
+export declare function IntoTileActions({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** True when a header slot exists (content can drop its inline reserved row). */
+export declare function useHasTileActionsSlot(): boolean;

package/dist/display/blocks/generic/tile-actions-slot.js

@@ -0,0 +1,33 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+const TileActionsContext = createContext(null);
+function TileActionsProvider({
+  target,
+  children
+}) {
+  return /* @__PURE__ */ jsx(TileActionsContext.Provider, { value: target, children });
+}
+function useTileActionsTarget() {
+  const [el, setEl] = useState(null);
+  return { target: el, targetProps: { ref: setEl } };
+}
+function IntoTileActions({ children }) {
+  const target = useContext(TileActionsContext);
+  if (target) return createPortal(children, target);
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function useHasTileActionsSlot() {
+  return useContext(TileActionsContext) !== null;
+}
+export {
+  IntoTileActions,
+  TileActionsProvider,
+  useHasTileActionsSlot,
+  useTileActionsTarget
+};

package/dist/display/blocks/images/ImageBlock.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface ImageBlockProps {
+    src: string;
+    alt?: string;
+}
+/** A remote image obeys the surrounding policy (remote-image-policy.tsx); our own files always draw. */
+declare const ImageBlock: React.FC<ImageBlockProps>;
+export default ImageBlock;

package/dist/display/blocks/images/ImageBlock.js

@@ -0,0 +1,265 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import {
+  DownloadIcon,
+  ClipboardCopyIcon,
+  ThumbsUpIcon,
+  ThumbsDownIcon,
+  ShareIcon,
+  Maximize2Icon,
+  ZoomInIcon,
+  ZoomOutIcon,
+  XIcon,
+  CopyIcon,
+  PencilIcon
+} from "lucide-react";
+import {
+  useMediaBlob,
+  useMediaLoadRecovery,
+  useMediaResolution
+} from "@ai-matrx/media/core";
+import { fileSourceToMediaRef } from "../../../utils/lifted/media-refs.js";
+import { recognizeOurFileUrl } from "@ai-matrx/media/files/engine/media/our-file-sources";
+import { RemoteImageGate, remoteImageHost } from "../../../levels/prose/remote-image-policy.js";
+import { Button } from "@ai-matrx/design-system/controls";
+import { TapTargetButton } from "@ai-matrx/design-system/tap-target";
+const MAX_IMAGE_HEIGHT = 700;
+const ImageBlockImpl = ({ src: srcProp, alt = "Image" }) => {
+  const ourFile = recognizeOurFileUrl(srcProp);
+  const mediaRef = fileSourceToMediaRef(ourFile?.source);
+  const { resolution } = useMediaResolution(mediaRef);
+  const needsBlob = resolution?.transport === "blob";
+  const authenticatedBlob = useMediaBlob(needsBlob ? mediaRef : null);
+  const resolvedFromIdentity = needsBlob ? authenticatedBlob.url : resolution?.src ?? null;
+  const effectiveSrc = mediaRef ? resolvedFromIdentity : srcProp;
+  const src = effectiveSrc ?? "";
+  const renderSrc = effectiveSrc ?? void 0;
+  const remoteReferrer = renderSrc && remoteImageHost(renderSrc) ? "no-referrer" : void 0;
+  const {
+    retryKey,
+    onLoadError: handleImageError
+  } = useMediaLoadRecovery(effectiveSrc ?? null, {
+    recoverable: !needsBlob && (!!ourFile?.fileId || !!effectiveSrc && recognizeOurFileUrl(effectiveSrc) !== null),
+    failureRef: mediaRef
+  });
+  const editableFileId = ourFile?.fileId ?? null;
+  const [feedback, setFeedback] = useState("none");
+  const [showCopySuccess, setShowCopySuccess] = useState(false);
+  const [showShareModal, setShowShareModal] = useState(false);
+  const [showExpandedView, setShowExpandedView] = useState(false);
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const imageRef = useRef(null);
+  const handleDownload = async (e) => {
+    e?.preventDefault();
+    try {
+      const response = await fetch(src);
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = src.split("/").pop() || "image";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error("Failed to download image:", err);
+    }
+  };
+  const handleCopyUrl = (e) => {
+    e?.preventDefault();
+    navigator.clipboard.writeText(src).then(() => {
+      setShowCopySuccess(true);
+      setTimeout(() => setShowCopySuccess(false), 2e3);
+    }).catch((err) => {
+      console.error("Failed to copy URL:", err);
+    });
+  };
+  const handleCopyImage = async (e) => {
+    e?.preventDefault();
+    try {
+      const response = await fetch(src);
+      const blob = await response.blob();
+      if (navigator.clipboard && navigator.clipboard.write) {
+        await navigator.clipboard.write([
+          new ClipboardItem({
+            [blob.type]: blob
+          })
+        ]);
+        setShowCopySuccess(true);
+        setTimeout(() => setShowCopySuccess(false), 2e3);
+      } else {
+        console.error("Clipboard API not supported");
+      }
+    } catch (err) {
+      console.error("Failed to copy image to clipboard:", err);
+    }
+  };
+  const handleShare = async (e) => {
+    e?.preventDefault();
+    if (navigator.share) {
+      try {
+        await navigator.share({
+          title: "Shared Image",
+          url: src
+        });
+      } catch (err) {
+        console.error("Failed to share:", err);
+      }
+    } else {
+      setShowShareModal(true);
+    }
+  };
+  const handleFeedback = (type) => {
+    setFeedback(type);
+    console.log(`User ${type}d this image`);
+  };
+  const openInNewTab = (url) => {
+    window.open(url, "_blank", "noopener,noreferrer");
+  };
+  const handleExpand = () => {
+    setShowExpandedView(true);
+    setZoomLevel(1);
+  };
+  const handleZoomIn = () => {
+    setZoomLevel((prev) => Math.min(prev + 0.25, 3));
+  };
+  const handleZoomOut = () => {
+    setZoomLevel((prev) => Math.max(prev - 0.25, 0.5));
+  };
+  const handleCloseExpanded = () => {
+    setShowExpandedView(false);
+    setZoomLevel(1);
+  };
+  useEffect(() => {
+    if (!showExpandedView) return void 0;
+    const onKey = (e) => {
+      if (e.key === "Escape") handleCloseExpanded();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [showExpandedView]);
+  return /* @__PURE__ */ jsxs("div", { className: "relative my-4 rounded-3xl group max-w-[900px]", "data-matrx-glass-plane": "", children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        ref: imageRef,
+        src: renderSrc,
+        referrerPolicy: remoteReferrer,
+        alt,
+        onDoubleClick: handleExpand,
+        onError: handleImageError,
+        className: "w-full h-auto rounded-3xl object-contain cursor-zoom-in",
+        style: { maxHeight: MAX_IMAGE_HEIGHT }
+      },
+      retryKey
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "absolute top-4 right-2 flex opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: [
+      /* @__PURE__ */ jsx(TapTargetButton, { icon: /* @__PURE__ */ jsx(DownloadIcon, {}), ariaLabel: "Download", onClick: handleDownload }),
+      /* @__PURE__ */ jsx(TapTargetButton, { icon: /* @__PURE__ */ jsx(ClipboardCopyIcon, {}), ariaLabel: "Copy URL", onClick: handleCopyUrl }),
+      /* @__PURE__ */ jsx(TapTargetButton, { icon: /* @__PURE__ */ jsx(CopyIcon, {}), ariaLabel: "Copy Image", onClick: handleCopyImage }),
+      /* @__PURE__ */ jsx(TapTargetButton, { icon: /* @__PURE__ */ jsx(ShareIcon, {}), ariaLabel: "Share", onClick: handleShare }),
+      editableFileId && /* @__PURE__ */ jsx(TapTargetButton, { icon: /* @__PURE__ */ jsx(PencilIcon, {}), ariaLabel: "Edit image", onClick: () => window.open(
+        `/images/edit/${editableFileId}`,
+        "_blank",
+        "noopener,noreferrer"
+      ) }),
+      /* @__PURE__ */ jsx(TapTargetButton, { icon: /* @__PURE__ */ jsx(Maximize2Icon, {}), ariaLabel: "Expand", onClick: handleExpand })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "absolute bottom-2 left-2 flex items-center opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: [
+      /* @__PURE__ */ jsx(TapTargetButton, { icon: /* @__PURE__ */ jsx(ThumbsUpIcon, {}), ariaLabel: "Like", pressed: feedback === "like", onClick: () => handleFeedback("like") }),
+      /* @__PURE__ */ jsx(TapTargetButton, { icon: /* @__PURE__ */ jsx(ThumbsDownIcon, {}), ariaLabel: "Dislike", pressed: feedback === "dislike", onClick: () => handleFeedback("dislike") })
+    ] }),
+    showShareModal && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50",
+        onClick: () => setShowShareModal(false),
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "bg-card text-card-foreground border border-border p-6 rounded-lg max-w-md w-full",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold mb-4", children: "Share this image" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-4 mb-4", children: [
+                /* @__PURE__ */ jsx(Button, { variant: "quiet", onClick: () => openInNewTab(
+                  `https://twitter.com/intent/tweet?url=${encodeURIComponent(src)}`
+                ), children: "Twitter" }),
+                /* @__PURE__ */ jsx(Button, { variant: "quiet", onClick: () => openInNewTab(
+                  `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(src)}`
+                ), children: "Facebook" }),
+                /* @__PURE__ */ jsx(Button, { variant: "quiet", onClick: () => openInNewTab(
+                  `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(src)}`
+                ), children: "LinkedIn" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mt-4", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    value: src,
+                    readOnly: true,
+                    className: "flex-1 border border-border bg-background p-2 rounded mr-2"
+                  }
+                ),
+                /* @__PURE__ */ jsx(Button, { variant: "quiet", onClick: handleCopyUrl, children: showCopySuccess ? "Copied!" : "Copy" })
+              ] }),
+              /* @__PURE__ */ jsx(Button, { variant: "quiet", onClick: () => setShowShareModal(false), className: "mt-4 w-full", children: "Close" })
+            ]
+          }
+        )
+      }
+    ),
+    showExpandedView && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "fixed inset-0 z-[9999] bg-black/95 flex items-center justify-center",
+        onClick: handleCloseExpanded,
+        children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: renderSrc,
+              referrerPolicy: remoteReferrer,
+              alt,
+              onClick: (e) => e.stopPropagation(),
+              onDoubleClick: handleCloseExpanded,
+              onError: handleImageError,
+              style: {
+                transform: `scale(${zoomLevel})`,
+                transformOrigin: "center center"
+              },
+              className: "h-[94dvh] w-[96vw] object-contain transition-transform duration-200 cursor-zoom-out"
+            },
+            retryKey
+          ),
+          /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(XIcon, {}), onClick: handleCloseExpanded, title: "Close (Esc)", className: "fixed top-3 left-1/2 z-[10000]", children: /* @__PURE__ */ jsx("span", { children: "Close" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "fixed bottom-6 left-1/2 -translate-x-1/2 z-[10000] flex items-center gap-3 bg-black/70 backdrop-blur-sm px-5 py-2.5 rounded-full", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(ZoomOutIcon, {}), onClick: (e) => {
+              e.stopPropagation();
+              handleZoomOut();
+            }, title: "Zoom Out", "aria-label": "Zoom Out" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-white text-sm font-medium min-w-[3rem] text-center", children: [
+              Math.round(zoomLevel * 100),
+              "%"
+            ] }),
+            /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(ZoomInIcon, {}), onClick: (e) => {
+              e.stopPropagation();
+              handleZoomIn();
+            }, title: "Zoom In", "aria-label": "Zoom In" }),
+            /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-white/20" }),
+            /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(XIcon, {}), onClick: handleCloseExpanded, title: "Close (Esc)", "aria-label": "Close (Esc)" })
+          ] })
+        ]
+      }
+    ),
+    showCopySuccess && /* @__PURE__ */ jsx("div", { className: "fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded shadow-lg", children: "Copied to clipboard!" })
+  ] });
+};
+const ImageBlock = (props) => /* @__PURE__ */ jsx(RemoteImageGate, { src: props.src, alt: props.alt, block: true, children: /* @__PURE__ */ jsx(ImageBlockImpl, { ...props }) });
+var ImageBlock_default = ImageBlock;
+export {
+  ImageBlock_default as default
+};

package/dist/display/blocks/json/JsonBlock.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import type { CanonicalBlockIR } from "@ai-matrx/content-ir";
+interface JsonBlockProps {
+    content: string;
+    className?: string;
+    isStreamActive?: boolean;
+    allowEdit?: boolean;
+    customBuiltinKeys?: string[];
+    onCodeChange?: (newCode: string) => void;
+    /** When set with messageId, enables "Add to conversation context". */
+    conversationId?: string | null;
+    messageId?: string | null;
+    /** Hide the self-referential conversion action inside conversion previews. */
+    allowConvertToShape?: boolean;
+    /** Canonical promotion evidence for this JSON region, when one exists. */
+    irEnvelope?: CanonicalBlockIR | null;
+    /** The fence meta (title, highlighted lines) — see markdown-core/fence-meta.ts. */
+    meta?: string;
+}
+/**
+ * JSON-aware wrapper around CodeBlock. Default view is the standard code
+ * editor (zero regression); a small view-mode toggle in the header lets
+ * the user switch to Tree, Table (when tabular), or Path Explorer.
+ *
+ * JSON-specific extras (save-to-table, NDJSON/CSV/XLSX downloads) feed
+ * through CodeBlock's unified kebab menu via `extraMenuItems`. Non-code
+ * views render their own header using the same AdvancedMenu pattern.
+ *
+ * If JSON parsing fails or the content is mid-stream, falls back to a
+ * plain CodeBlock with no view toggle — the user keeps the original
+ * experience, just without the extras.
+ */
+export declare const JsonBlock: React.FC<JsonBlockProps>;
+export default JsonBlock;