@ai-matrx/rich-content 0.2.3 → 0.2.6

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

@@ -0,0 +1,310 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import {
+  Maximize2,
+  Minimize2,
+  ExternalLink,
+  Upload,
+  Download,
+  MoreHorizontal
+} from "lucide-react";
+import { useCanvas } from "../../../host/app-bindings.js";
+import { reportCanvasOpenDrop } from "../../../host/app-bindings.js";
+import { useOpenArtifactInCanvas } from "../../../host/app-bindings.js";
+import { useCanvasPresentation } from "@ai-matrx/canvas/react";
+import { isMaterializedArtifactId } from "../../../utils/lifted/artifactId.js";
+import { getArtifactDef } from "../../../host/app-bindings.js";
+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";
+const BlockHeaderWrapper = ({
+  icon: Icon,
+  iconClassName = "bg-blue-500 dark:bg-blue-600",
+  title,
+  description,
+  controls,
+  children,
+  canvasType,
+  canvasData,
+  canvasMetadata,
+  taskId,
+  exportData,
+  exportFilename = "export",
+  onDataImport,
+  extraActions,
+  extraMenuItems = [],
+  headerGradient = "bg-gradient-to-br from-blue-100 via-indigo-50 to-purple-100 dark:from-blue-950/40 dark:via-indigo-950/30 dark:to-purple-950/40",
+  headerBorder = "border-blue-200 dark:border-blue-800/50",
+  actionButtonClassName = "bg-primary text-primary-foreground shadow-sm hover:bg-primary/80 hover:shadow-md transform hover:scale-105 transition-all",
+  canvasButtonClassName = "bg-secondary text-primary-foreground shadow-sm hover:bg-secondary/80 hover:shadow-md transform hover:scale-105 transition-all"
+}) => {
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [descriptionExpanded, setDescriptionExpanded] = useState(false);
+  const menuAnchorRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const isMobile = useIsMobile();
+  const { open: openCanvas } = useCanvas();
+  const { openArtifact } = useOpenArtifactInCanvas();
+  const inCanvasPane = useCanvasPresentation() !== null;
+  useEffect(() => {
+    if (!isFullScreen) return void 0;
+    const handleEsc = (e) => {
+      if (e.key === "Escape") setIsFullScreen(false);
+    };
+    window.addEventListener("keydown", handleEsc);
+    return () => window.removeEventListener("keydown", handleEsc);
+  }, [isFullScreen]);
+  const handleCanvasOpen = () => {
+    if (!canvasType || !canvasData) {
+      reportCanvasOpenDrop({
+        reason: "no-content",
+        requested: title,
+        detail: !canvasType ? "no canvas type on this block" : "no canvas data on this block"
+      });
+      return;
+    }
+    const artifactId = typeof canvasMetadata?.artifactId === "string" ? canvasMetadata.artifactId : void 0;
+    const def = getArtifactDef(canvasType);
+    if (def?.materializable && isMaterializedArtifactId(artifactId)) {
+      const rawPayload = typeof canvasData === "string" ? canvasData : JSON.stringify(canvasData) ?? String(canvasData);
+      const messageId = typeof canvasMetadata?.messageId === "string" ? canvasMetadata.messageId : typeof canvasMetadata?.sourceMessageId === "string" ? canvasMetadata.sourceMessageId : void 0;
+      const conversationId = typeof canvasMetadata?.conversationId === "string" ? canvasMetadata.conversationId : void 0;
+      const artifactIndex = typeof canvasMetadata?.artifactIndex === "number" && canvasMetadata.artifactIndex > 0 ? canvasMetadata.artifactIndex : 1;
+      void openArtifact({
+        canvasType,
+        title,
+        content: rawPayload,
+        messageId,
+        conversationId,
+        artifactId,
+        artifactIndex,
+        metadata: canvasMetadata
+      });
+      return;
+    }
+    openCanvas({
+      type: canvasType,
+      data: canvasData,
+      metadata: { ...canvasMetadata, sourceTaskId: taskId }
+    });
+  };
+  const handleExport = () => {
+    if (exportData === void 0) return;
+    const blob = new Blob([JSON.stringify(exportData, null, 2)], {
+      type: "application/json"
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${exportFilename}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+  const handleImportClick = () => fileInputRef.current?.click();
+  const handleFileChange = (e) => {
+    const file = e.target.files?.[0];
+    if (!file || !onDataImport) return;
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      try {
+        onDataImport(JSON.parse(event.target?.result));
+      } catch {
+        console.error("BlockHeaderWrapper: failed to parse imported JSON file");
+      }
+    };
+    reader.readAsText(file);
+    e.target.value = "";
+  };
+  const mobileMenuItems = [];
+  if (onDataImport) {
+    mobileMenuItems.push({
+      key: "import",
+      icon: Upload,
+      iconColor: "text-primary",
+      label: "Import from JSON",
+      action: handleImportClick,
+      showToast: false
+    });
+  }
+  if (exportData !== void 0) {
+    mobileMenuItems.push({
+      key: "export",
+      icon: Download,
+      iconColor: "text-primary",
+      label: "Save as JSON",
+      action: handleExport,
+      showToast: false
+    });
+  }
+  mobileMenuItems.push(...extraMenuItems);
+  if (!isFullScreen && !inCanvasPane && canvasType && canvasData) {
+    mobileMenuItems.push({
+      key: "canvas",
+      icon: ExternalLink,
+      iconColor: "text-secondary",
+      label: "Open Canvas",
+      action: handleCanvasOpen,
+      showToast: false
+    });
+  }
+  const showCanvas = !isFullScreen && !inCanvasPane && canvasType && canvasData;
+  const showFullScreenToggle = isFullScreen || !inCanvasPane;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept: ".json,application/json",
+        className: "hidden",
+        onChange: handleFileChange
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `w-full ${isFullScreen ? "fixed inset-0 z-50 flex items-center justify-center p-2 matrx-glass-thin-border cursor-pointer" : "py-3"}`,
+        onClick: isFullScreen ? () => setIsFullScreen(false) : void 0,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `max-w-6xl mx-auto ${isFullScreen ? "bg-textured rounded-xl shadow-2xl h-full max-h-[98dvh] w-full flex flex-col overflow-hidden border border-primary cursor-default" : ""}`,
+            onClick: isFullScreen ? (e) => e.stopPropagation() : void 0,
+            children: /* @__PURE__ */ jsx("div", { className: isFullScreen ? "flex-1 overflow-y-auto" : "", children: /* @__PURE__ */ jsxs("div", { className: "p-2 space-y-4", children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `${headerGradient} rounded-xl p-2 shadow-md border ${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: [
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: `p-2 ${iconClassName} rounded-lg shadow-sm flex-shrink-0`,
+                            children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5 text-primary-foreground" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                          /* @__PURE__ */ jsx("h1", { className: "text-sm font-bold text-foreground leading-tight line-clamp-2", children: title }),
+                          description && /* @__PURE__ */ jsxs(Button, { variant: "quiet", onClick: () => setDescriptionExpanded((prev) => !prev), "aria-expanded": descriptionExpanded, "aria-label": descriptionExpanded ? "Collapse description" : "Expand description", className: "mt-1 w-full", children: [
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: `flex-1 min-w-0 ${descriptionExpanded ? "leading-relaxed" : "line-clamp-1"}`,
+                                children: description
+                              }
+                            ),
+                            /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 mt-0.5 opacity-70 group-hover:opacity-100 transition-opacity" })
+                          ] })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+                        !isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [
+                          onDataImport && /* @__PURE__ */ jsx(
+                            IconButton,
+                            {
+                              icon: Upload,
+                              tooltip: "Import from JSON file",
+                              onClick: handleImportClick,
+                              className: actionButtonClassName
+                            }
+                          ),
+                          exportData !== void 0 && /* @__PURE__ */ jsx(
+                            IconButton,
+                            {
+                              icon: Download,
+                              tooltip: "Save as JSON file",
+                              onClick: handleExport,
+                              className: actionButtonClassName
+                            }
+                          ),
+                          extraActions,
+                          showCanvas && /* @__PURE__ */ jsx(
+                            IconButton,
+                            {
+                              icon: ExternalLink,
+                              tooltip: "Open Canvas",
+                              onClick: handleCanvasOpen,
+                              className: canvasButtonClassName
+                            }
+                          ),
+                          !showFullScreenToggle ? null : !isFullScreen ? /* @__PURE__ */ jsx(
+                            IconButton,
+                            {
+                              icon: Maximize2,
+                              tooltip: "Expand to full screen",
+                              onClick: () => setIsFullScreen(true),
+                              className: actionButtonClassName
+                            }
+                          ) : /* @__PURE__ */ jsx(
+                            IconButton,
+                            {
+                              icon: Minimize2,
+                              tooltip: "Exit full screen",
+                              onClick: () => setIsFullScreen(false),
+                              className: actionButtonClassName
+                            }
+                          )
+                        ] }),
+                        isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [
+                          !showFullScreenToggle ? null : isFullScreen ? /* @__PURE__ */ jsx(
+                            IconButton,
+                            {
+                              icon: Minimize2,
+                              tooltip: "Exit full screen",
+                              onClick: () => setIsFullScreen(false),
+                              className: actionButtonClassName
+                            }
+                          ) : /* @__PURE__ */ jsx(
+                            IconButton,
+                            {
+                              icon: Maximize2,
+                              tooltip: "Full screen",
+                              onClick: () => setIsFullScreen(true),
+                              className: actionButtonClassName
+                            }
+                          ),
+                          mobileMenuItems.length > 0 && /* @__PURE__ */ jsx("div", { ref: menuAnchorRef, className: "contents", children: /* @__PURE__ */ jsx(
+                            IconButton,
+                            {
+                              icon: MoreHorizontal,
+                              tooltip: "More options",
+                              onClick: () => setMenuOpen((prev) => !prev),
+                              className: actionButtonClassName
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx(
+                            AdvancedMenu,
+                            {
+                              isOpen: menuOpen,
+                              onClose: () => setMenuOpen(false),
+                              items: mobileMenuItems,
+                              title: "Options",
+                              position: "bottom-right",
+                              anchorElement: menuAnchorRef.current,
+                              categorizeItems: false
+                            }
+                          )
+                        ] })
+                      ] })
+                    ] }),
+                    controls && /* @__PURE__ */ jsx("div", { children: controls })
+                  ]
+                }
+              ),
+              children
+            ] }) })
+          }
+        )
+      }
+    )
+  ] });
+};
+var BlockHeaderWrapper_default = BlockHeaderWrapper;
+export {
+  BlockHeaderWrapper_default as default
+};

package/dist/display/blocks/common/ContentBlockWrapper.d.ts

@@ -0,0 +1,40 @@
+import React, { ReactNode } from "react";
+import { LucideIcon } from "lucide-react";
+import type { CanvasContent, CanvasContentType } from "../../../utils/lifted/canvasContent.js";
+export interface ContentBlockAction {
+    icon: LucideIcon;
+    tooltip: string;
+    onClick: () => void;
+    disabled?: boolean;
+    className?: string;
+    hidden?: boolean;
+}
+export interface ContentBlockWrapperProps {
+    children: ReactNode;
+    title?: string;
+    subtitle?: string;
+    enableCanvas?: boolean;
+    canvasType?: CanvasContentType;
+    canvasData?: CanvasContent["data"];
+    canvasMetadata?: CanvasContent["metadata"] & {
+        artifactId?: string;
+        artifactIndex?: number;
+    };
+    taskId?: string;
+    onDownload?: () => void;
+    onUpload?: () => Promise<void>;
+    onSave?: () => Promise<void>;
+    isSaving?: boolean;
+    lastSaved?: Date | null;
+    saveError?: string | null;
+    defaultFullscreen?: boolean;
+    allowFullscreen?: boolean;
+    customActions?: ContentBlockAction[];
+    headerContent?: ReactNode;
+    className?: string;
+    contentClassName?: string;
+    fullscreenClassName?: string;
+    closeOnEscape?: boolean;
+}
+declare const ContentBlockWrapper: React.FC<ContentBlockWrapperProps>;
+export default ContentBlockWrapper;

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

@@ -0,0 +1,214 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import {
+  Maximize2,
+  Minimize2,
+  Download,
+  Upload,
+  Save,
+  Cloud,
+  CloudOff,
+  ExternalLink,
+  X
+} from "lucide-react";
+import { useCanvas } from "../../../host/app-bindings.js";
+import { useOpenArtifactInCanvas } from "../../../host/app-bindings.js";
+import { isMaterializedArtifactId } from "../../../utils/lifted/artifactId.js";
+import { getArtifactDef } from "../../../host/app-bindings.js";
+import { useCanvasOpenGuard } from "../../../host/app-bindings.js";
+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";
+const ContentBlockWrapper = ({
+  children,
+  title,
+  subtitle,
+  enableCanvas = true,
+  canvasType,
+  canvasData,
+  canvasMetadata,
+  taskId,
+  onDownload,
+  onUpload,
+  onSave,
+  isSaving = false,
+  lastSaved = null,
+  saveError = null,
+  defaultFullscreen = false,
+  allowFullscreen = true,
+  customActions = [],
+  headerContent,
+  className = "",
+  contentClassName = "",
+  fullscreenClassName = "",
+  closeOnEscape = true
+}) => {
+  const [isFullScreen, setIsFullScreen] = useState(defaultFullscreen);
+  const { open: openCanvas } = useCanvas();
+  const { openArtifact } = useOpenArtifactInCanvas();
+  const { isCanvasAvailable } = useCanvasOpenGuard();
+  useEffect(() => {
+    if (!closeOnEscape) return void 0;
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && isFullScreen) {
+        setIsFullScreen(false);
+      }
+    };
+    window.addEventListener("keydown", handleEscape);
+    return () => window.removeEventListener("keydown", handleEscape);
+  }, [isFullScreen, closeOnEscape]);
+  const handleCanvasOpen = () => {
+    if (!canvasType || !canvasData) {
+      reportCanvasOpenDrop({
+        reason: "no-content",
+        requested: title ?? null,
+        detail: !canvasType ? "no canvas type on this block" : "no canvas data on this block"
+      });
+      return;
+    }
+    const artifactId = canvasMetadata?.artifactId;
+    const def = getArtifactDef(canvasType);
+    if (def?.materializable && isMaterializedArtifactId(artifactId)) {
+      const rawPayload = typeof canvasData === "string" ? canvasData : JSON.stringify(canvasData) ?? String(canvasData);
+      const artifactTitle = title ?? (typeof canvasMetadata?.title === "string" ? canvasMetadata.title : "Artifact");
+      const artifactIndex = canvasMetadata?.artifactIndex && canvasMetadata.artifactIndex > 0 ? canvasMetadata.artifactIndex : 1;
+      void openArtifact({
+        canvasType,
+        title: artifactTitle,
+        content: rawPayload,
+        messageId: canvasMetadata?.messageId ?? canvasMetadata?.sourceMessageId,
+        conversationId: canvasMetadata?.conversationId,
+        artifactId,
+        artifactIndex,
+        metadata: { ...canvasMetadata }
+      });
+      return;
+    }
+    openCanvas({
+      type: canvasType,
+      data: canvasData,
+      metadata: {
+        ...canvasMetadata,
+        sourceTaskId: taskId
+      }
+    });
+  };
+  const handleUpload = async () => {
+    if (!onUpload) return;
+    try {
+      await onUpload();
+    } catch (error) {
+      console.error("Upload failed:", error);
+      toast.error("Failed to upload. Please check the file format.");
+    }
+  };
+  const actionButtons = [];
+  if (onSave) {
+    actionButtons.push({
+      icon: Save,
+      tooltip: "Save now",
+      onClick: onSave,
+      disabled: isSaving,
+      className: "bg-green-500 dark:bg-green-600 text-white hover:bg-green-600 dark:hover:bg-green-700"
+    });
+  }
+  if (onDownload) {
+    actionButtons.push({
+      icon: Download,
+      tooltip: "Download as file",
+      onClick: onDownload,
+      className: "bg-gray-500 dark:bg-gray-600 text-white hover:bg-gray-600 dark:hover:bg-gray-700"
+    });
+  }
+  if (onUpload) {
+    actionButtons.push({
+      icon: Upload,
+      tooltip: "Import from file",
+      onClick: handleUpload,
+      className: "bg-gray-500 dark:bg-gray-600 text-white hover:bg-gray-600 dark:hover:bg-gray-700"
+    });
+  }
+  if (enableCanvas && !isFullScreen && canvasType && canvasData && isCanvasAvailable) {
+    actionButtons.push({
+      icon: ExternalLink,
+      tooltip: "Open in Canvas",
+      onClick: handleCanvasOpen,
+      className: "bg-purple-500 dark:bg-purple-600 text-white hover:bg-purple-600 dark:hover:bg-purple-700"
+    });
+  }
+  actionButtons.push(...customActions.filter((action) => !action.hidden));
+  if (allowFullscreen) {
+    actionButtons.push({
+      icon: isFullScreen ? Minimize2 : Maximize2,
+      tooltip: isFullScreen ? "Exit focus mode" : "Enter focus mode",
+      onClick: () => setIsFullScreen(!isFullScreen),
+      className: isFullScreen ? "bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300" : "bg-blue-500 dark:bg-blue-600 text-white hover:bg-blue-600 dark:hover:bg-blue-700"
+    });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `w-full ${isFullScreen ? "fixed inset-0 z-50 bg-textured" : className}`,
+      children: /* @__PURE__ */ jsxs("div", { className: isFullScreen ? `h-full flex flex-col ${fullscreenClassName}` : "", children: [
+        isFullScreen && /* @__PURE__ */ jsx("div", { className: "absolute top-3 right-3 z-10", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            icon: X,
+            tooltip: "Exit focus mode (ESC)",
+            onClick: () => setIsFullScreen(false)
+          }
+        ) }),
+        /* @__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) && /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+              title && /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: `font-bold text-center text-gray-800 dark:text-gray-100 ${isFullScreen ? "text-3xl" : "text-2xl"}`,
+                  children: title
+                }
+              ),
+              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: [
+              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(
+                  "div",
+                  {
+                    className: "flex items-center gap-1 text-green-600 dark:text-green-400 text-xs",
+                    title: `Last saved: ${lastSaved.toLocaleTimeString()}`,
+                    children: /* @__PURE__ */ jsx(Cloud, { className: "h-4 w-4" })
+                  }
+                ),
+                saveError && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-red-600 dark:text-red-400 text-xs", title: saveError, children: [
+                  /* @__PURE__ */ jsx(CloudOff, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error: saveError })
+                ] })
+              ] }),
+              actionButtons.map((action, index) => /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  icon: action.icon,
+                  tooltip: action.tooltip,
+                  onClick: action.onClick,
+                  disabled: action.disabled,
+                  className: action.className
+                },
+                index
+              ))
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: contentClassName, children })
+        ] })
+      ] })
+    }
+  );
+};
+var ContentBlockWrapper_default = ContentBlockWrapper;
+export {
+  ContentBlockWrapper_default as default
+};

package/dist/display/blocks/common/SandboxedHtml.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+interface SandboxedHtmlProps {
+    /** Raw HTML to render. May be authored by another user — treat as hostile. */
+    html: string;
+    title?: string;
+    className?: string;
+    /** Frame height. Number → px; string passed through (e.g. "100%"). Default 480. */
+    height?: number | string;
+}
+/**
+ * Renders untrusted, author-supplied HTML inside a fully sandboxed iframe.
+ *
+ * WHY an iframe and not `dangerouslySetInnerHTML`: artifact / canvas HTML can be
+ * authored by ANOTHER user (public shared canvases, the discovery feed, forked
+ * or shared conversations). Injecting it with `dangerouslySetInnerHTML` runs any
+ * embedded `<script>` / `onerror` in the aimatrx.com origin — stored XSS
+ * (session + localStorage theft, authenticated calls to `/api/*`). A `sandbox`
+ * iframe with NO `allow-scripts` and NO `allow-same-origin` still renders the
+ * markup but neutralizes script execution and parent-origin access.
+ *
+ * Do NOT widen this sandbox for HTML artifacts. Interactive app artifacts that
+ * legitimately need scripts use the `iframe` artifact type, which runs scripts
+ * in a unique opaque origin (allow-scripts WITHOUT allow-same-origin) so they
+ * still cannot reach the parent origin.
+ */
+export default function SandboxedHtml({ html, title, className, height, }: SandboxedHtmlProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+function SandboxedHtml({
+  html,
+  title = "Content",
+  className,
+  height = 480
+}) {
+  return /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      title,
+      className,
+      sandbox: "",
+      srcDoc: typeof html === "string" ? html : String(html ?? ""),
+      style: {
+        width: "100%",
+        height: typeof height === "number" ? `${height}px` : height,
+        border: "0"
+      }
+    }
+  );
+}
+export {
+  SandboxedHtml as default
+};

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

@@ -1,5 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useClipboard } from "@ai-matrx/kit/clipboard";
 import { useState, useEffect } from "react";
 import { cn } from "@ai-matrx/design-system";
 import {
@@ -66,6 +67,9 @@ const CsvBlock = ({
   className,
   onInnerContentChange
 }) => {
+  const { copyText } = useClipboard({
+    notify: (message, kind) => kind === "error" ? toast.error(message) : toast.success(message)
+  });
   const [copied, setCopied] = useState(false);
   const [sortCol, setSortCol] = useState(null);
   const [sortDir, setSortDir] = useState(null);
@@ -82,7 +86,7 @@ const CsvBlock = ({
   const headers = data[0] || [];
   const bodyRows = data.slice(1);
   const handleCopy = async () => {
-    await navigator.clipboard.writeText(content);
+    await copyText(content);
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   };

package/dist/display/blocks/diagram/DiagramLoadingVisualization.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface DiagramLoadingVisualizationProps {
+    title?: string;
+}
+declare const DiagramLoadingVisualization: React.FC<DiagramLoadingVisualizationProps>;
+export default DiagramLoadingVisualization;