@ai-matrx/rich-content 0.2.4 → 0.2.6

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

@@ -0,0 +1,190 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Network,
+  GitBranch,
+  Users,
+  Database,
+  Server,
+  Globe,
+  Settings,
+  CircleDot,
+  ArrowRight,
+  ArrowDown,
+  Circle,
+  Square,
+  Diamond,
+  Layers,
+  Cpu,
+  Zap,
+  Move,
+  RotateCcw
+} from "lucide-react";
+const DiagramLoadingVisualization = ({
+  title = "Loading Interactive Diagram..."
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-6xl mx-auto py-8", children: /* @__PURE__ */ jsxs("div", { className: "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 rounded-2xl p-8 shadow-lg border-2 border-blue-200 dark:border-blue-800/50", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center mb-8", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative mb-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "p-4 bg-blue-500 dark:bg-blue-600 rounded-2xl shadow-lg", children: /* @__PURE__ */ jsx(Network, { className: "h-12 w-12 text-white animate-pulse" }) }),
+        /* @__PURE__ */ jsx("div", { className: "absolute -top-2 -right-2 animate-bounce", children: /* @__PURE__ */ jsx("div", { className: "p-1.5 bg-green-500 dark:bg-green-600 rounded-full", children: /* @__PURE__ */ jsx(GitBranch, { className: "h-4 w-4 text-white" }) }) }),
+        /* @__PURE__ */ jsx("div", { className: "absolute -bottom-1 -left-2 animate-bounce delay-300", children: /* @__PURE__ */ jsx("div", { className: "p-1.5 bg-purple-500 dark:bg-purple-600 rounded-full", children: /* @__PURE__ */ jsx(Database, { className: "h-4 w-4 text-white" }) }) }),
+        /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-8 animate-pulse delay-500", children: /* @__PURE__ */ jsx(CircleDot, { className: "h-5 w-5 text-blue-400 dark:text-blue-300" }) })
+      ] }),
+      /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-400 text-sm", children: "Rendering interactive flow diagram..." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "bg-textured/50 rounded-xl border-border p-6 mb-8", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-6", children: [
+        /* @__PURE__ */ jsx(Network, { className: "h-5 w-5 text-blue-600 dark:text-blue-400 animate-pulse" }),
+        /* @__PURE__ */ jsx("div", { className: "h-4 bg-blue-300 dark:bg-blue-600 rounded w-32 animate-pulse" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center space-y-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-8", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-4 bg-green-100 dark:bg-green-950/30 rounded-lg border-2 border-green-300 dark:border-green-700 animate-pulse", children: [
+            /* @__PURE__ */ jsx(Circle, { className: "h-5 w-5 text-green-600 dark:text-green-400" }),
+            /* @__PURE__ */ jsx("div", { className: "h-4 bg-green-300 dark:bg-green-600 rounded w-20" })
+          ] }),
+          /* @__PURE__ */ jsx(ArrowRight, { className: "h-6 w-6 text-gray-400 animate-pulse delay-200" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-4 bg-blue-100 dark:bg-blue-950/30 rounded-lg border-2 border-blue-300 dark:border-blue-700 animate-pulse delay-300", children: [
+            /* @__PURE__ */ jsx(Settings, { className: "h-5 w-5 text-blue-600 dark:text-blue-400" }),
+            /* @__PURE__ */ jsx("div", { className: "h-4 bg-blue-300 dark:bg-blue-600 rounded w-24" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(ArrowDown, { className: "h-6 w-6 text-gray-400 animate-pulse delay-400" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-4 bg-orange-100 dark:bg-orange-950/30 rounded-lg border-2 border-orange-300 dark:border-orange-700 animate-pulse delay-500", children: [
+          /* @__PURE__ */ jsx(Diamond, { className: "h-5 w-5 text-orange-600 dark:text-orange-400" }),
+          /* @__PURE__ */ jsx("div", { className: "h-4 bg-orange-300 dark:bg-orange-600 rounded w-28" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-12", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center space-y-3", children: [
+            /* @__PURE__ */ jsx(ArrowDown, { className: "h-4 w-4 text-gray-400 animate-pulse delay-600" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3 bg-purple-100 dark:bg-purple-950/30 rounded-lg border border-purple-300 dark:border-purple-700 animate-pulse delay-700", children: [
+              /* @__PURE__ */ jsx(Database, { className: "h-4 w-4 text-purple-600 dark:text-purple-400" }),
+              /* @__PURE__ */ jsx("div", { className: "h-3 bg-purple-300 dark:bg-purple-600 rounded w-16" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center space-y-3", children: [
+            /* @__PURE__ */ jsx(ArrowDown, { className: "h-4 w-4 text-gray-400 animate-pulse delay-800" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3 bg-red-100 dark:bg-red-950/30 rounded-lg border border-red-300 dark:border-red-700 animate-pulse delay-900", children: [
+              /* @__PURE__ */ jsx(Square, { className: "h-4 w-4 text-red-600 dark:text-red-400" }),
+              /* @__PURE__ */ jsx("div", { className: "h-3 bg-red-300 dark:bg-red-600 rounded w-14" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6 mt-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 bg-teal-100 dark:bg-teal-950/30 rounded-lg border border-teal-300 dark:border-teal-700 animate-pulse delay-1000", children: [
+            /* @__PURE__ */ jsx(Globe, { className: "h-4 w-4 text-teal-600 dark:text-teal-400" }),
+            /* @__PURE__ */ jsx("div", { className: "h-3 bg-teal-300 dark:bg-teal-600 rounded w-12" })
+          ] }),
+          /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4 text-gray-300 animate-pulse delay-1100" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 bg-gray-100 dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-600 animate-pulse delay-1200", children: [
+            /* @__PURE__ */ jsx(Server, { className: "h-4 w-4 text-gray-600 dark:text-gray-400" }),
+            /* @__PURE__ */ jsx("div", { className: "h-3 bg-gray-300 dark:bg-gray-600 rounded w-16" })
+          ] }),
+          /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4 text-gray-300 animate-pulse delay-1300" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 bg-yellow-100 dark:bg-yellow-950/30 rounded-lg border border-yellow-300 dark:border-yellow-700 animate-pulse delay-1400", children: [
+            /* @__PURE__ */ jsx(Cpu, { className: "h-4 w-4 text-yellow-600 dark:text-yellow-400" }),
+            /* @__PURE__ */ jsx("div", { className: "h-3 bg-yellow-300 dark:bg-yellow-600 rounded w-10" })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4 mb-8", children: [
+      { type: "Flowchart", icon: GitBranch, color: "text-blue-600 dark:text-blue-400", bgColor: "bg-blue-100 dark:bg-blue-950/30" },
+      { type: "Mind Map", icon: CircleDot, color: "text-purple-600 dark:text-purple-400", bgColor: "bg-purple-100 dark:bg-purple-950/30" },
+      { type: "Org Chart", icon: Users, color: "text-green-600 dark:text-green-400", bgColor: "bg-green-100 dark:bg-green-950/30" },
+      { type: "Network", icon: Network, color: "text-orange-600 dark:text-orange-400", bgColor: "bg-orange-100 dark:bg-orange-950/30" },
+      { type: "System", icon: Server, color: "text-indigo-600 dark:text-indigo-400", bgColor: "bg-indigo-100 dark:bg-indigo-950/30" },
+      { type: "Process", icon: Settings, color: "text-teal-600 dark:text-teal-400", bgColor: "bg-teal-100 dark:bg-teal-950/30" }
+    ].map((item, index) => /* @__PURE__ */ jsxs("div", { className: "bg-textured/50 rounded-lg p-3 border-border animate-pulse", style: { animationDelay: `${index * 150}ms` }, children: [
+      /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2 ${item.color} mb-2`, children: [
+        /* @__PURE__ */ jsx("div", { className: `p-1.5 ${item.bgColor} rounded`, children: /* @__PURE__ */ jsx(item.icon, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsx("div", { className: "h-3 bg-gray-300 dark:bg-gray-600 rounded w-16" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "h-2 bg-gray-200 dark:bg-gray-700 rounded w-full" })
+    ] }, index)) }),
+    /* @__PURE__ */ jsxs("div", { className: "bg-textured/50 rounded-xl border-border p-6 mb-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
+        /* @__PURE__ */ jsx(Layers, { className: "h-5 w-5 text-indigo-600 dark:text-indigo-400 animate-pulse" }),
+        /* @__PURE__ */ jsx("div", { className: "h-4 bg-indigo-300 dark:bg-indigo-600 rounded w-24 animate-pulse" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-5 gap-3", children: [
+        { label: "Start/End", icon: Circle, color: "bg-green-100 dark:bg-green-950/30 text-green-700 dark:text-green-300" },
+        { label: "Process", icon: Square, color: "bg-blue-100 dark:bg-blue-950/30 text-blue-700 dark:text-blue-300" },
+        { label: "Decision", icon: Diamond, color: "bg-orange-100 dark:bg-orange-950/30 text-orange-700 dark:text-orange-300" },
+        { label: "Data", icon: Database, color: "bg-purple-100 dark:bg-purple-950/30 text-purple-700 dark:text-purple-300" },
+        { label: "System", icon: Server, color: "bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300" }
+      ].map((node, index) => /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2 px-3 py-2 rounded-lg ${node.color} text-xs font-medium animate-pulse`, style: { animationDelay: `${index * 100}ms` }, children: [
+        /* @__PURE__ */ jsx(node.icon, { className: "h-3 w-3" }),
+        /* @__PURE__ */ jsx("span", { children: node.label })
+      ] }, index)) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "bg-textured/50 rounded-xl border-border p-6 mb-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
+        /* @__PURE__ */ jsx(Move, { className: "h-5 w-5 text-green-600 dark:text-green-400 animate-pulse" }),
+        /* @__PURE__ */ jsx("div", { className: "h-4 bg-green-300 dark:bg-green-600 rounded w-32 animate-pulse" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid md:grid-cols-3 gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3 bg-blue-50 dark:bg-blue-950/20 rounded-lg animate-pulse", children: [
+          /* @__PURE__ */ jsx(Move, { className: "h-4 w-4 text-blue-600 dark:text-blue-400" }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "h-3 bg-blue-300 dark:bg-blue-600 rounded w-20 mb-1" }),
+            /* @__PURE__ */ jsx("div", { className: "h-2 bg-blue-200 dark:bg-blue-700 rounded w-16" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3 bg-purple-50 dark:bg-purple-950/20 rounded-lg animate-pulse delay-200", children: [
+          /* @__PURE__ */ jsx(Zap, { className: "h-4 w-4 text-purple-600 dark:text-purple-400" }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "h-3 bg-purple-300 dark:bg-purple-600 rounded w-16 mb-1" }),
+            /* @__PURE__ */ jsx("div", { className: "h-2 bg-purple-200 dark:bg-purple-700 rounded w-20" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3 bg-orange-50 dark:bg-orange-950/20 rounded-lg animate-pulse delay-400", children: [
+          /* @__PURE__ */ jsx(RotateCcw, { className: "h-4 w-4 text-orange-600 dark:text-orange-400" }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "h-3 bg-orange-300 dark:bg-orange-600 rounded w-18 mb-1" }),
+            /* @__PURE__ */ jsx("div", { className: "h-2 bg-orange-200 dark:bg-orange-700 rounded w-14" })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-3 mb-8", children: [
+      { label: "Parsing diagram structure", progress: 95, color: "from-blue-500 to-indigo-500" },
+      { label: "Creating interactive nodes", progress: 80, color: "from-indigo-500 to-purple-500" },
+      { label: "Building connections", progress: 65, color: "from-purple-500 to-pink-500" },
+      { label: "Optimizing layout", progress: 45, color: "from-pink-500 to-red-500" },
+      { label: "Enabling interactions", progress: 25, color: "from-red-500 to-orange-500" }
+    ].map((step, index) => /* @__PURE__ */ jsxs("div", { className: "space-y-2 animate-pulse", style: { animationDelay: `${index * 200}ms` }, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-gray-700 dark:text-gray-300 font-medium", children: step.label }),
+        /* @__PURE__ */ jsxs("span", { className: "text-gray-500 dark:text-gray-400", children: [
+          step.progress,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `h-full bg-gradient-to-r ${step.color} transition-all duration-1000`,
+          style: {
+            width: `${step.progress}%`,
+            animationDelay: `${index * 200 + 500}ms`
+          }
+        }
+      ) })
+    ] }, index)) }),
+    /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2 px-4 py-2 bg-textured/50 rounded-full border-border", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex space-x-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-blue-500 dark:bg-blue-400 rounded-full animate-bounce" }),
+        /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-indigo-500 dark:bg-indigo-400 rounded-full animate-bounce delay-100" }),
+        /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-purple-500 dark:bg-purple-400 rounded-full animate-bounce delay-200" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400 font-medium", children: "Rendering interactive diagram" })
+    ] }) })
+  ] }) });
+};
+var DiagramLoadingVisualization_default = DiagramLoadingVisualization;
+export {
+  DiagramLoadingVisualization_default as default
+};

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

@@ -0,0 +1,51 @@
+import React from "react";
+import "@xyflow/react/dist/style.css";
+import { type DiagramData, type DiagramNode } from "./parseDiagramJSON.js";
+export interface InteractiveDiagramBlockProps {
+    diagram: DiagramData;
+    taskId?: string;
+    /**
+     * Chat source identity. Without it the canvas item this block opens has no
+     * persisted source, so "Sync to cloud" can never materialize a canvas_items
+     * row ("need a real persisted source id"). Supplied by DiagramArtifact, the
+     * same way MermaidBlock receives it.
+     */
+    messageId?: string;
+    conversationId?: string;
+    /** Real canvas_items UUID when this diagram is already materialized. */
+    artifactId?: string;
+    blockIndex?: number;
+    /**
+     * `card` is the compact embeddable response block. `workspace` is the
+     * dedicated, full-height authoring surface: no repeated title card, no
+     * artificial width/height cap, and editing controls become an inspector rail.
+     */
+    presentation?: "card" | "workspace";
+    /**
+     * Opt-in: called with the original `DiagramNode` when a node is clicked.
+     * When set, nodes render with a pointer cursor. Omit for the default
+     * (non-interactive) behavior every existing consumer relies on. Used by the
+     * education Mind Maps tool to resolve a node to its source card / open an
+     * "Ask tutor about this" affordance.
+     */
+    onNodeClick?: (node: DiagramNode) => void;
+    /** Open directly in authoring mode for dedicated editor surfaces. */
+    defaultEditing?: boolean;
+    /** Reports the currently focused box, section, or arrow to the host surface. */
+    onSelectionChange?: (selection: {
+        kind: "box" | "section" | "arrow" | null;
+        id: string | null;
+    }) => void;
+    /**
+     * Opt-in AUTHORING. When set, the block offers an Edit toggle and calls this
+     * with the whole updated diagram on every change (rename, add, delete, draw
+     * an arrow, drag a box, tidy up). The caller owns persistence.
+     *
+     * This is why there is no second "map editor" canvas in the repo: the one
+     * renderer that already knows every node kind, layout, export and print path
+     * is also the one that edits. Consumer: features/canvas/maps.
+     */
+    onDiagramChange?: (next: DiagramData) => void;
+}
+declare const InteractiveDiagramBlock: React.FC<InteractiveDiagramBlockProps>;
+export default InteractiveDiagramBlock;