@ai-matrx/rich-content 0.2.4 → 0.2.7

package/dist/display/blocks/links/LinkComponent.js

@@ -0,0 +1,373 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect, useCallback, useId, memo } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "@ai-matrx/design-system";
+import { Copy, Check, Bookmark, ExternalLink, FileText } from "lucide-react";
+import { addUtmSource } from "../../../utils/lifted/url-utm.js";
+class LinkErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("LinkComponent Error:", error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      const { href, fallbackChildren } = this.props;
+      const safeHref = href ? addUtmSource(href) : "#";
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: safeHref,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "text-blue-600 dark:text-blue-400 underline",
+          children: fallbackChildren || "Link"
+        }
+      );
+    }
+    return this.props.children;
+  }
+}
+let activePopupId = null;
+const popupListeners = /* @__PURE__ */ new Set();
+const LINK_MENU_OPEN_DELAY_MS = 250;
+const setActivePopup = (id) => {
+  activePopupId = id;
+  popupListeners.forEach((listener) => listener(id));
+};
+const useGlobalPopupState = (componentId) => {
+  const [isActive, setIsActive] = useState(false);
+  useEffect(() => {
+    const listener = (activeId) => {
+      setIsActive(activeId === componentId);
+    };
+    popupListeners.add(listener);
+    setIsActive(activePopupId === componentId);
+    return () => {
+      popupListeners.delete(listener);
+    };
+  }, [componentId]);
+  const openPopup = useCallback(
+    () => setActivePopup(componentId),
+    [componentId]
+  );
+  const closePopup = useCallback(() => setActivePopup(null), []);
+  return { isActive, openPopup, closePopup };
+};
+const LinkComponentCore = ({
+  href,
+  children
+}) => {
+  if (!href || typeof href !== "string") {
+    return /* @__PURE__ */ jsx("span", { className: "text-blue-600 dark:text-blue-400", children: children || "Invalid Link" });
+  }
+  return /* @__PURE__ */ jsx(ValidLinkComponentCore, { href, children });
+};
+const ValidLinkComponentCore = ({
+  href,
+  children
+}) => {
+  const finalHref = addUtmSource(href);
+  const componentId = `link-popup-${useId()}`;
+  const [isHovered, setIsHovered] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
+  const isMountedRef = useRef(false);
+  const linkRef = useRef(null);
+  const menuRef = useRef(null);
+  const mouseTrackingRef = useRef(false);
+  const openTimerRef = useRef(null);
+  const {
+    isActive: isPopupActive,
+    openPopup,
+    closePopup
+  } = useGlobalPopupState(componentId);
+  const clearOpenTimer = useCallback(() => {
+    if (openTimerRef.current) {
+      clearTimeout(openTimerRef.current);
+      openTimerRef.current = null;
+    }
+  }, []);
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+      clearOpenTimer();
+      if (activePopupId === componentId) {
+        setActivePopup(null);
+      }
+    };
+  }, [clearOpenTimer, componentId]);
+  const handleMouseMove = useCallback(
+    (e) => {
+      if (!menuRef.current || !mouseTrackingRef.current) return;
+      try {
+        const menuRect = menuRef.current.getBoundingClientRect();
+        const isMouseNearMenu = e.clientX >= menuRect.left - 20 && e.clientX <= menuRect.right + 20 && e.clientY >= menuRect.top - 20 && e.clientY <= menuRect.bottom + 20;
+        const linkRect = linkRef.current?.getBoundingClientRect();
+        const isMouseNearLink = linkRect && e.clientX >= linkRect.left - 5 && e.clientX <= linkRect.right + 5 && e.clientY >= linkRect.top - 5 && e.clientY <= linkRect.bottom + 5;
+        if (!isMouseNearMenu && !isMouseNearLink) {
+          mouseTrackingRef.current = false;
+          setIsHovered(false);
+          closePopup();
+        }
+      } catch (error) {
+        console.error("Error in handleMouseMove:", error);
+        mouseTrackingRef.current = false;
+        setIsHovered(false);
+        closePopup();
+      }
+    },
+    [closePopup]
+  );
+  useEffect(() => {
+    if (isPopupActive && isHovered) {
+      mouseTrackingRef.current = true;
+      document.addEventListener("mousemove", handleMouseMove);
+    } else {
+      mouseTrackingRef.current = false;
+      document.removeEventListener("mousemove", handleMouseMove);
+    }
+    return () => {
+      mouseTrackingRef.current = false;
+      document.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, [isPopupActive, isHovered, handleMouseMove]);
+  useEffect(() => {
+    if (!isPopupActive && isHovered) {
+      setIsHovered(false);
+    }
+  }, [isPopupActive, isHovered]);
+  const handleMouseEnter = useCallback(
+    (e) => {
+      try {
+        clearOpenTimer();
+        setMenuPosition({ x: e.clientX, y: e.clientY });
+        openTimerRef.current = setTimeout(() => {
+          openTimerRef.current = null;
+          setIsHovered(true);
+          openPopup();
+        }, LINK_MENU_OPEN_DELAY_MS);
+      } catch (error) {
+        console.error("Error in handleMouseEnter:", error);
+      }
+    },
+    [clearOpenTimer, openPopup]
+  );
+  const handleMouseLeave = useCallback(() => {
+    clearOpenTimer();
+  }, [clearOpenTimer]);
+  const handleCopyLink = useCallback(() => {
+    if (!navigator.clipboard) {
+      console.error("Clipboard API not available");
+      return;
+    }
+    navigator.clipboard.writeText(finalHref).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }).catch((err) => {
+      console.error("Failed to copy link:", err);
+    });
+  }, [finalHref]);
+  const handleOpenInNewTab = useCallback(
+    (e) => {
+      e.stopPropagation();
+      try {
+        window.open(finalHref, "_blank", "noopener,noreferrer");
+      } catch (error) {
+        console.error("Failed to open link:", error);
+      }
+    },
+    [finalHref]
+  );
+  const handleAddToFavorites = useCallback(() => {
+    console.log("Added to favorites:", { url: finalHref, title: children });
+  }, [finalHref, children]);
+  const handleGetContent = useCallback(() => {
+    console.log("Getting content from:", finalHref);
+  }, [finalHref]);
+  const getMenuStyle = useCallback(() => {
+    if (!menuPosition || !isMountedRef.current) return {};
+    try {
+      const menuWidth = 300;
+      const menuHeight = 200;
+      const windowWidth = window.innerWidth;
+      const windowHeight = window.innerHeight;
+      let left = menuPosition.x;
+      let top = menuPosition.y;
+      if (left + menuWidth > windowWidth) {
+        left = Math.max(10, windowWidth - menuWidth - 10);
+      }
+      if (top + menuHeight > windowHeight) {
+        top = Math.max(10, windowHeight - menuHeight - 10);
+      }
+      return {
+        position: "fixed",
+        top: `${top}px`,
+        left: `${left}px`,
+        zIndex: 100
+      };
+    } catch (error) {
+      console.error("Error calculating menu position:", error);
+      return {};
+    }
+  }, [menuPosition]);
+  const truncateUrl = useCallback((url, maxLength = 40) => {
+    if (!url || url.length <= maxLength) return url;
+    const start = url.substring(0, maxLength / 2);
+    const end = url.substring(url.length - maxLength / 2);
+    return `${start}...${end}`;
+  }, []);
+  const displayText = typeof children === "string" ? children : "Link";
+  const popupMenu = isPopupActive && isHovered && isMountedRef.current && /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: menuRef,
+      className: "bg-white dark:bg-gray-900 border-border rounded-lg shadow-2xl backdrop-blur-sm py-0 w-[280px] text-gray-700 dark:text-gray-200 text-sm overflow-hidden",
+      style: getMenuStyle(),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-b border-gray-100 dark:border-gray-800", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "font-semibold text-base truncate text-gray-900 dark:text-gray-100",
+            title: displayText,
+            children: displayText
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "py-2", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "px-4 py-2.5 hover:bg-blue-50 dark:hover:bg-blue-900/20 cursor-pointer flex items-center gap-3 transition-colors duration-150 group",
+              onClick: handleCopyLink,
+              children: [
+                copied ? /* @__PURE__ */ jsx(
+                  Check,
+                  {
+                    size: 16,
+                    className: "text-green-600 dark:text-green-400 flex-shrink-0"
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  Copy,
+                  {
+                    size: 16,
+                    className: "text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 flex-shrink-0 transition-colors"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `${copied ? "text-green-700 dark:text-green-300" : "text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100"}`,
+                    children: copied ? "Copied!" : "Copy link"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "px-4 py-2.5 hover:bg-blue-50 dark:hover:bg-blue-900/20 cursor-pointer flex items-center gap-3 transition-colors duration-150 group",
+              onClick: handleOpenInNewTab,
+              children: [
+                /* @__PURE__ */ jsx(
+                  ExternalLink,
+                  {
+                    size: 16,
+                    className: "text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 flex-shrink-0 transition-colors"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100 truncate", children: "Open in new tab" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "px-4 py-2.5 hover:bg-blue-50 dark:hover:bg-blue-900/20 cursor-pointer flex items-center gap-3 transition-colors duration-150 group",
+              onClick: handleAddToFavorites,
+              children: [
+                /* @__PURE__ */ jsx(
+                  Bookmark,
+                  {
+                    size: 16,
+                    className: "text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 flex-shrink-0 transition-colors"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100 truncate", children: "Add to favorites" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "px-4 py-2.5 hover:bg-blue-50 dark:hover:bg-blue-900/20 cursor-pointer flex items-center gap-3 transition-colors duration-150 group",
+              onClick: handleGetContent,
+              children: [
+                /* @__PURE__ */ jsx(
+                  FileText,
+                  {
+                    size: 16,
+                    className: "text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 flex-shrink-0 transition-colors"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100 truncate", children: "Get content" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "px-4 py-2.5 bg-gray-50 dark:bg-gray-800/50 border-t border-gray-100 dark:border-gray-800", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "text-[11px] text-gray-500 dark:text-gray-400 truncate font-mono",
+            title: finalHref,
+            children: truncateUrl(finalHref, 40)
+          }
+        ) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "a",
+      {
+        ref: linkRef,
+        href: finalHref,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        className: cn(
+          "relative inline text-blue-600 dark:text-blue-400 underline font-medium",
+          "transition-all duration-200 hover:text-blue-700 dark:hover:text-blue-300",
+          isHovered && isPopupActive && "text-blue-800 dark:text-blue-200"
+        ),
+        children
+      }
+    ),
+    popupMenu && typeof document !== "undefined" && createPortal(popupMenu, document.body)
+  ] });
+};
+const MemoizedLinkComponentCore = memo(
+  LinkComponentCore,
+  (prevProps, nextProps) => {
+    return prevProps.href === nextProps.href && prevProps.children === nextProps.children;
+  }
+);
+const LinkComponent = ({
+  href,
+  children
+}) => {
+  return /* @__PURE__ */ jsx(LinkErrorBoundary, { href, fallbackChildren: children, children: /* @__PURE__ */ jsx(MemoizedLinkComponentCore, { href, children }) });
+};
+var LinkComponent_default = LinkComponent;
+export {
+  LinkComponent,
+  LinkComponent_default as default
+};

package/dist/display/blocks/links/LinkComponentWithFetch.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/display/blocks/markdown/MarkdownKindBlock.d.ts

@@ -0,0 +1,48 @@
+/**
+ * MarkdownKindBlock — the registered web renderer for the `markdown` kind.
+ *
+ * ## Why it exists
+ *
+ * Arman's render law had two paths: "official declared kind component, or
+ * streaming markdown — that's it"
+ * (common-docs/systems/architecture/content-ir/FEATURE.md §4). The
+ * `markdown` kind — `{ text: string }`, the shape the agent output contract
+ * (§6) folds prose into — collapses those two paths into ONE by making the
+ * second path a kind whose component IS the proven streaming renderer.
+ *
+ * So this component invents NOTHING. It reads `text` off the kind instance and
+ * hands it to {@link MarkdownStream}, the engine that already renders every
+ * streamed assistant message. Prose renders as prose; a fenced kind payload
+ * inside that prose routes to ITS component through the same pipeline, exactly
+ * as it does in chat. Without this route the kind fell to
+ * `GenericStructuredBlock`, which showed a reader the field label "Text" above
+ * their own document — markdown source, unrendered.
+ *
+ * ## Route contract
+ *
+ * Reached ONLY through `applyIrKindRoute`'s resolver-only path (a
+ * `content_ir.kind_component` row: `markdown` / web / output /
+ * `markdown_stream`), which CLEARS `serverData` — the raw region's
+ * `{ language: "json" }` annotation is not kind data. The value comes from the
+ * envelope on `metadata.__ir`, with the same descending-fidelity recovery
+ * `WebAnalysisItemBlock` and the generic block use, so a region that never
+ * parsed still shows its source verbatim rather than nothing.
+ *
+ * ## Bare by construction (THE WRAPPER LAW)
+ *
+ * Every host that routes a block here already draws chrome, and MarkdownStream
+ * is the documented import for "bare rendering with no actions" (the
+ * `RichDocument` front door adds the toolkit). No card, no border, no padding.
+ */
+import React from "react";
+export interface MarkdownKindBlockProps {
+    /** The raw region source — the zero-loss floor when no envelope survived. */
+    content: string;
+    /** Carries `__ir` (the parsed envelope) and `__ir_route` (the seam marker). */
+    metadata?: Record<string, unknown>;
+    /** True while the producing stream is still open. */
+    isStreamActive?: boolean;
+    className?: string;
+}
+declare const MarkdownKindBlock: React.FC<MarkdownKindBlockProps>;
+export default MarkdownKindBlock;

package/dist/display/blocks/markdown/MarkdownKindBlock.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { MarkdownStream } from "../../../host/app-bindings.js";
+import {
+  RichContentDepthProvider,
+  useRichContentDepth
+} from "../../../levels/depth.js";
+import { NestedRichContent } from "../../../levels/standard/NestedRichContent.js";
+import { readEnvelope } from "../../../kinds/redux/render-block-envelope.js";
+import { reconstructRegionValue } from "@ai-matrx/content-ir";
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function readValue(content, metadata) {
+  const envelope = readEnvelope(metadata);
+  if (envelope) return reconstructRegionValue(envelope);
+  try {
+    return JSON.parse(content);
+  } catch {
+    return null;
+  }
+}
+function readText(value) {
+  if (!isRecord(value)) return null;
+  return typeof value.text === "string" ? value.text : null;
+}
+const MarkdownKindBlock = ({
+  content,
+  metadata,
+  isStreamActive,
+  className
+}) => {
+  const { depth } = useRichContentDepth();
+  const text = readText(readValue(content, metadata));
+  const markdown = text ?? content;
+  if (!markdown) return null;
+  if (depth > 0) {
+    return /* @__PURE__ */ jsx(
+      NestedRichContent,
+      {
+        source: markdown,
+        isStreaming: isStreamActive,
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(RichContentDepthProvider, { depth: 1, children: /* @__PURE__ */ jsx(MarkdownStream, { imagePolicy: "inherit", content: markdown, isStreamActive }) }) });
+};
+var MarkdownKindBlock_default = MarkdownKindBlock;
+export {
+  MarkdownKindBlock_default as default
+};

package/dist/display/blocks/markdown-preview/MarkdownPreviewBlock.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+interface MarkdownPreviewBlockProps {
+    content: string;
+    className?: string;
+    isStreamActive?: boolean;
+    onCodeChange?: (newCode: string) => void;
+    /**
+     * The fenced document ALREADY RENDERED by a static root (the server level or
+     * the SSR'd static leaf — standard/static-standard.tsx), so its prose is in
+     * the server HTML. Used for the Preview view while the block is not
+     * streaming; without it the preview renders client-side through
+     * NestedRichContent. Both are the same core at the same depth.
+     */
+    renderedPreview?: React.ReactNode;
+}
+declare const MarkdownPreviewBlock: React.FC<MarkdownPreviewBlockProps>;
+export default MarkdownPreviewBlock;

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

@@ -0,0 +1,70 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useClipboard } from "@ai-matrx/kit/clipboard";
+import { toast } from "../../../host/toast.js";
+import { useState, lazy, Suspense } from "react";
+import { cn } from "@ai-matrx/design-system";
+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";
+const CodeBlock = lazy(
+  () => import("../../../code-block/CodeBlock.js")
+);
+const MarkdownPreviewBlock = ({
+  content,
+  className,
+  isStreamActive,
+  onCodeChange,
+  renderedPreview
+}) => {
+  const { copyText } = useClipboard({
+    notify: (message, kind) => kind === "error" ? toast.error(message) : toast.success(message)
+  });
+  const [mode, setMode] = useState("preview");
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    await copyText(content);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "my-3 rounded-lg border border-border bg-card overflow-hidden",
+        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__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(FileText, { className: "w-3.5 h-3.5 text-blue-500" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-mono font-semibold text-blue-600 dark:text-blue-400", children: "Markdown" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md border border-border/50 overflow-hidden mr-1", children: [
+              /* @__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" })
+          ] })
+        ] }),
+        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(
+          CodeBlock,
+          {
+            showSource: true,
+            code: content,
+            language: "markdown",
+            fontSize: 14,
+            isStreamActive,
+            onCodeChange
+          }
+        ) })
+      ]
+    }
+  );
+};
+var MarkdownPreviewBlock_default = MarkdownPreviewBlock;
+export {
+  MarkdownPreviewBlock_default as default
+};

package/dist/display/blocks/mermaid/MermaidBlock.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { MermaidBlockData } from "@ai-matrx/agents/generated/stream-events";
+export interface MermaidBlockProps {
+    content?: string;
+    serverData?: MermaidBlockData | null;
+    metadata?: Record<string, unknown>;
+    isStreamActive?: boolean;
+    conversationId?: string;
+    messageId?: string;
+    blockIndex?: number;
+    taskId?: string;
+    className?: string;
+    /** canvas_items row id when rendering a materialized artifact by reference. */
+    artifactId?: string;
+    /** Artifact version when known (rendered as a chip). */
+    artifactVersion?: number;
+}
+declare const MermaidBlock: React.FC<MermaidBlockProps>;
+export default MermaidBlock;