@ai-matrx/rich-content 0.2.4 → 0.2.7

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

@@ -0,0 +1,296 @@
+import {
+  DEFAULT_DIAGRAM_RENDER_HINTS,
+  DIAGRAM_BACKGROUNDS,
+  DIAGRAM_BORDER_STYLES,
+  DIAGRAM_EDGE_MARKERS,
+  DIAGRAM_NODE_SHAPES,
+  inferDiagramNodeVisuals,
+  normalizeDiagramIconName
+} from "./diagram-visual-defaults.js";
+import { extractErrorMessage } from "../../../utils/lifted/errors.js";
+function isOneOf(value, values) {
+  return typeof value === "string" && values.includes(value);
+}
+function materializeDiagramDefaults(diagram) {
+  const type = diagram.type || "flowchart";
+  const nodes = diagram.nodes.map((node, index) => {
+    const nodeType = node.nodeType || node.type || "default";
+    const inferred = inferDiagramNodeVisuals({
+      diagramType: type,
+      nodeType,
+      label: node.label,
+      description: node.description,
+      details: node.details,
+      isGroup: node.isGroup
+    });
+    const isGroup = node.isGroup === true;
+    return {
+      ...node,
+      nodeType,
+      position: node.position ?? generateDefaultPosition(index, type),
+      isGroup,
+      ...isGroup ? {
+        width: node.width ?? 420,
+        height: node.height ?? 260,
+        groupStyle: node.groupStyle ?? "dashed"
+      } : {},
+      color: node.color || inferred.color,
+      icon: normalizeDiagramIconName(node.icon || inferred.icon),
+      shape: node.shape ?? inferred.shape,
+      borderStyle: node.borderStyle ?? inferred.borderStyle,
+      textAlign: node.textAlign ?? inferred.textAlign
+    };
+  });
+  const edges = (diagram.edges ?? []).map((edge, index) => {
+    const isMarriage = edge.relationship === "marriage" || edge.relationship === "divorced";
+    const marker = edge.marker ?? (edge.arrow === false || isMarriage ? "none" : "end");
+    return {
+      ...edge,
+      id: edge.id || `edge_${edge.source}_to_${edge.target}_${index}`,
+      type: !edge.type || edge.type === "default" ? "bezier" : edge.type,
+      color: edge.color || "gray",
+      lineStyle: edge.lineStyle ?? (edge.dashed ? "dashed" : "solid"),
+      dashed: edge.lineStyle === "dashed" || edge.dashed === true,
+      strokeWidth: edge.strokeWidth ?? 2,
+      marker,
+      arrow: marker !== "none",
+      animated: edge.animated === true
+    };
+  });
+  return {
+    ...diagram,
+    type,
+    nodes,
+    edges,
+    layout: {
+      direction: diagram.layout?.direction ?? "TB",
+      spacing: diagram.layout?.spacing ?? 100,
+      algorithm: diagram.layout?.algorithm ?? (type === "pedigree" ? "pedigree" : "dagre")
+    },
+    renderHints: {
+      ...DEFAULT_DIAGRAM_RENDER_HINTS,
+      ...diagram.renderHints
+    }
+  };
+}
+function parseDiagramJSON(content) {
+  try {
+    let jsonContent = content.trim();
+    const codeBlockMatch = jsonContent.match(/```(?:json)?\s*([\s\S]*?)\s*```/);
+    if (codeBlockMatch) {
+      jsonContent = codeBlockMatch[1].trim();
+    }
+    const parsed = JSON.parse(jsonContent);
+    const diagramData = parsed.diagram || parsed;
+    if (!diagramData) throw new Error("No diagram data found in JSON");
+    if (!diagramData.title || !diagramData.nodes || !Array.isArray(diagramData.nodes)) {
+      throw new Error("Missing required fields: title or nodes array");
+    }
+    const processedNodes = diagramData.nodes.map(
+      (node, index) => {
+        if (!node.id || !node.label) {
+          throw new Error(`Node ${index} missing required id or label`);
+        }
+        return {
+          id: node.id,
+          label: node.label,
+          type: node.type,
+          nodeType: node.nodeType || node.type || "default",
+          description: node.description,
+          details: node.details,
+          position: node.position || generateDefaultPosition(index, diagramData.type || "flowchart"),
+          isGroup: node.isGroup === true,
+          parentId: typeof node.parentId === "string" ? node.parentId : void 0,
+          width: typeof node.width === "number" ? node.width : void 0,
+          height: typeof node.height === "number" ? node.height : void 0,
+          groupStyle: isOneOf(node.groupStyle, DIAGRAM_BORDER_STYLES) ? node.groupStyle : void 0,
+          // Pedigree fields
+          gender: node.gender,
+          affected: node.affected,
+          deceased: node.deceased,
+          proband: node.proband,
+          birthYear: node.birthYear,
+          deathYear: node.deathYear,
+          generation: node.generation,
+          // Generic
+          metadata: node.metadata,
+          color: node.color,
+          icon: node.icon,
+          shape: isOneOf(node.shape, DIAGRAM_NODE_SHAPES) ? node.shape : void 0,
+          borderStyle: isOneOf(node.borderStyle, DIAGRAM_BORDER_STYLES) ? node.borderStyle : void 0,
+          textAlign: node.textAlign === "left" || node.textAlign === "center" ? node.textAlign : void 0
+        };
+      }
+    );
+    const processedEdges = (diagramData.edges || []).map(
+      (edge, index) => {
+        const source = edge.source || edge.from;
+        const target = edge.target || edge.to;
+        if (!source || !target) {
+          throw new Error(
+            `Edge ${index} missing required source/from or target/to field`
+          );
+        }
+        const id = edge.id || `edge_${source}_to_${target}_${index}`;
+        return {
+          id,
+          source,
+          target,
+          label: edge.label,
+          type: edge.type || "default",
+          color: edge.color,
+          dashed: edge.dashed || false,
+          lineStyle: edge.lineStyle === "solid" || edge.lineStyle === "dashed" || edge.lineStyle === "dotted" ? edge.lineStyle : void 0,
+          strokeWidth: edge.strokeWidth || 2,
+          relationship: edge.relationship,
+          arrow: edge.arrow,
+          marker: isOneOf(edge.marker, DIAGRAM_EDGE_MARKERS) ? edge.marker : void 0,
+          animated: edge.animated
+        };
+      }
+    );
+    return materializeDiagramDefaults({
+      title: diagramData.title,
+      description: diagramData.description,
+      type: diagramData.type || "flowchart",
+      nodes: processedNodes,
+      edges: processedEdges,
+      layout: diagramData.layout || {
+        direction: "TB",
+        spacing: 100
+      },
+      renderHints: diagramData.renderHints && typeof diagramData.renderHints === "object" ? {
+        ...diagramData.renderHints,
+        ...isOneOf(
+          diagramData.renderHints.background,
+          DIAGRAM_BACKGROUNDS
+        ) ? {
+          background: diagramData.renderHints.background
+        } : {}
+      } : void 0
+    });
+  } catch (error) {
+    console.error("Error parsing diagram JSON:", error);
+    throw new Error(
+      `Failed to parse diagram JSON: ${extractErrorMessage(error, "Unknown error")}`
+    );
+  }
+}
+function generateDefaultPosition(index, diagramType) {
+  switch (diagramType) {
+    case "flowchart":
+    case "process":
+      return { x: 250, y: index * 120 + 50 };
+    case "orgchart":
+    case "pedigree": {
+      const level = Math.floor(index / 3);
+      const position = index % 3;
+      return { x: position * 200 + 100, y: level * 200 + 50 };
+    }
+    case "mindmap": {
+      const angle = index * 2 * Math.PI / 8;
+      const radius = 200 + Math.floor(index / 8) * 100;
+      return {
+        x: 300 + radius * Math.cos(angle),
+        y: 300 + radius * Math.sin(angle)
+      };
+    }
+    case "timeline":
+      return { x: index * 200 + 100, y: 200 };
+    case "network": {
+      const cols = 4;
+      const row = Math.floor(index / cols);
+      const col = index % cols;
+      return { x: col * 180 + 100 + row % 2 * 90, y: row * 140 + 80 };
+    }
+    case "system": {
+      const gridCols = 3;
+      const gridRow = Math.floor(index / gridCols);
+      const gridCol = index % gridCols;
+      return { x: gridCol * 220 + 120, y: gridRow * 160 + 100 };
+    }
+    default:
+      return {
+        x: index % 3 * 200 + 100,
+        y: Math.floor(index / 3) * 150 + 100
+      };
+  }
+}
+function validateDiagram(diagram) {
+  if (!diagram.title || !diagram.nodes || !Array.isArray(diagram.nodes))
+    return false;
+  const nodeIds = /* @__PURE__ */ new Set();
+  for (const node of diagram.nodes) {
+    if (!node.id || !node.label) return false;
+    if (nodeIds.has(node.id)) return false;
+    nodeIds.add(node.id);
+  }
+  const byId = new Map(diagram.nodes.map((node) => [node.id, node]));
+  for (const node of diagram.nodes) {
+    if (!node.parentId) continue;
+    const parent = byId.get(node.parentId);
+    if (!parent?.isGroup || parent.id === node.id) return false;
+    const seen = /* @__PURE__ */ new Set([node.id]);
+    let ancestor = parent;
+    while (ancestor) {
+      if (seen.has(ancestor.id)) return false;
+      seen.add(ancestor.id);
+      ancestor = ancestor.parentId ? byId.get(ancestor.parentId) : void 0;
+    }
+  }
+  if (diagram.edges) {
+    const edgeIds = /* @__PURE__ */ new Set();
+    for (const edge of diagram.edges) {
+      if (!edge.source || !edge.target) return false;
+      if (edgeIds.has(edge.id)) return false;
+      edgeIds.add(edge.id);
+      if (!nodeIds.has(edge.source) || !nodeIds.has(edge.target)) return false;
+    }
+  }
+  return true;
+}
+function diagramToJSON(diagram) {
+  return JSON.stringify({ diagram }, null, 2);
+}
+function parseDiagramContent(content) {
+  try {
+    return parseDiagramJSON(content);
+  } catch {
+    return materializeDiagramDefaults({
+      title: "Simple Diagram",
+      description: "Generated from content",
+      type: "flowchart",
+      nodes: [
+        {
+          id: "node1",
+          label: "Start",
+          nodeType: "start",
+          position: { x: 250, y: 50 }
+        },
+        {
+          id: "node2",
+          label: "Process",
+          nodeType: "process",
+          position: { x: 250, y: 170 }
+        },
+        {
+          id: "node3",
+          label: "End",
+          nodeType: "end",
+          position: { x: 250, y: 290 }
+        }
+      ],
+      edges: [
+        { id: "edge1", source: "node1", target: "node2" },
+        { id: "edge2", source: "node2", target: "node3" }
+      ]
+    });
+  }
+}
+export {
+  diagramToJSON,
+  materializeDiagramDefaults,
+  parseDiagramContent,
+  parseDiagramJSON,
+  validateDiagram
+};

package/dist/display/blocks/diagram/presentation-direction.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Which way a diagram flows when the canvas tells us the shape of its pane.
+ *
+ * Outside the canvas there is no presentation (`flow === null`) and the
+ * diagram keeps the direction its data asks for — behaviour unchanged.
+ *
+ * Inside the canvas the AXIS follows the pane: a tall narrow pane flows top to
+ * bottom, a wide one left to right (`preferredFlowDirection` from
+ * `@ai-matrx/canvas`). The data's hint only keeps its SENSE — a "BT" diagram
+ * stays bottom-up in a portrait pane and becomes right-to-left in a wide one.
+ * A family tree (pedigree) and an org chart are generational/hierarchical by
+ * meaning, so their direction is never re-chosen.
+ */
+export type DiagramDirection = "TB" | "LR" | "BT" | "RL";
+export type CanvasFlow = "vertical" | "horizontal";
+export declare function diagramDirectionForFlow(flow: CanvasFlow | null, hinted: DiagramDirection | undefined, diagramType: string): DiagramDirection;
+/**
+ * When the pane's flow flips (split, unsplit, expand), re-lay the diagram out
+ * only when the current arrangement is still OURS: the automatic layout has
+ * run, nobody re-arranged it by hand, and the diagram is not an authored map
+ * whose layout is the document.
+ */
+export declare function shouldRelayoutOnFlowChange(input: {
+    previousFlow: CanvasFlow | null;
+    flow: CanvasFlow | null;
+    autoLaidOut: boolean;
+    personArranged: boolean;
+    authoring: boolean;
+}): boolean;

package/dist/display/blocks/diagram/presentation-direction.js

@@ -0,0 +1,19 @@
+const DIRECTION_IS_MEANING = /* @__PURE__ */ new Set(["pedigree", "orgchart"]);
+function diagramDirectionForFlow(flow, hinted, diagramType) {
+  const authored = hinted ?? "TB";
+  if (flow === null || DIRECTION_IS_MEANING.has(diagramType)) return authored;
+  const reversed = authored === "BT" || authored === "RL";
+  if (flow === "vertical") return reversed ? "BT" : "TB";
+  return reversed ? "RL" : "LR";
+}
+function shouldRelayoutOnFlowChange(input) {
+  const { previousFlow, flow, autoLaidOut, personArranged, authoring } = input;
+  if (flow === null || previousFlow === null || flow === previousFlow) {
+    return false;
+  }
+  return autoLaidOut && !personArranged && !authoring;
+}
+export {
+  diagramDirectionForFlow,
+  shouldRelayoutOnFlowChange
+};

package/dist/display/blocks/diagram/ui-utils.d.ts

@@ -0,0 +1 @@
+export declare const formatDiagramType: (type: string) => string;

package/dist/display/blocks/diagram/ui-utils.js

@@ -0,0 +1,18 @@
+const formatDiagramType = (type) => {
+  const typeMap = {
+    flowchart: "Flow Chart",
+    mindmap: "Mind Map",
+    orgchart: "Organizational Chart",
+    network: "Network Diagram",
+    system: "System Architecture",
+    process: "Process Flow",
+    pedigree: "Family Pedigree",
+    timeline: "Timeline",
+    erd: "Entity Relationship Diagram",
+    sequence: "Sequence Diagram"
+  };
+  return typeMap[type] || type.charAt(0).toUpperCase() + type.slice(1);
+};
+export {
+  formatDiagramType
+};

package/dist/display/blocks/diff/DiffBlock.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface DiffBlockProps {
+    content?: string;
+    isStreamActive?: boolean;
+    className?: string;
+}
+/** A unified diff (not a JSON spec): at least one hunk header or +/- line. */
+export declare function isUnifiedDiff(raw: string): boolean;
+export declare const DiffBlock: React.FC<DiffBlockProps>;
+export default DiffBlock;

package/dist/display/blocks/diff/DiffBlock.js

@@ -0,0 +1,119 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useClipboard } from "@ai-matrx/kit/clipboard";
+import { useMemo, useState } from "react";
+import { clientLazy } from "../../../utils/client-lazy.js";
+import { Check, Columns2, Copy, GitCompareArrows, Rows3, TriangleAlert } from "lucide-react";
+import { toast } from "../../../host/toast.js";
+import { Skeleton } from "@ai-matrx/design-system";
+import { cn } from "@ai-matrx/design-system";
+import CodeBlock from "../../../code-block/CodeBlock.js";
+import { soleFence } from "@ai-matrx/content-ir/source";
+import { ErrorAlchemyMenu } from "../../../host/ErrorActions.js";
+import { useCanvasPresentation } from "@ai-matrx/canvas/react";
+import { diffIsSplit } from "../canvas-adaptive.js";
+import { Button } from "@ai-matrx/design-system/controls";
+const DiffCanvas = clientLazy(() => import("./DiffCanvas.js"), {
+  loading: () => /* @__PURE__ */ jsx(Skeleton, { className: "h-40 w-full" })
+});
+function str(v) {
+  return v == null ? "" : typeof v === "string" ? v : String(v);
+}
+function parseDiff(raw) {
+  let s = raw.trim();
+  const fenced = soleFence(s);
+  if (fenced && ["", "json", "diff"].includes(fenced.lang.toLowerCase())) s = fenced.body.trim();
+  let obj;
+  try {
+    obj = JSON.parse(s);
+  } catch {
+    try {
+      obj = JSON.parse(s.replace(/,(\s*[}\]])/g, "$1"));
+    } catch {
+      return { error: "Diff needs a JSON object with `old` and `new` strings." };
+    }
+  }
+  if (!obj || typeof obj !== "object") return { error: "Diff needs a JSON object with `old` and `new`." };
+  const o = obj;
+  const oldValue = str(o.old ?? o.before ?? o.original ?? o.left);
+  const newValue = str(o.new ?? o.after ?? o.updated ?? o.modified ?? o.right);
+  if (!oldValue && !newValue) return { error: "Diff needs at least one of `old` / `new`." };
+  return {
+    title: typeof o.title === "string" ? o.title : void 0,
+    oldValue,
+    newValue,
+    split: o.split !== false,
+    splitExplicit: typeof o.split === "boolean"
+  };
+}
+function isUnifiedDiff(raw) {
+  const s = raw.trimStart();
+  if (!s || s.startsWith("{") || s.startsWith("[")) return false;
+  return /^(@@ .* @@|\+\+\+ |--- |[+-](?![+-]{2}))/m.test(s);
+}
+const DiffBlock = (props) => {
+  const content = props.content ?? "";
+  if (isUnifiedDiff(content)) {
+    return /* @__PURE__ */ jsx(
+      CodeBlock,
+      {
+        showSource: true,
+        code: content,
+        language: "diff",
+        isStreamActive: props.isStreamActive,
+        className: props.className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(DiffSpecBlock, { ...props });
+};
+const DiffSpecBlock = ({ content = "", isStreamActive = false, className }) => {
+  const { copyText } = useClipboard({
+    notify: (message, kind) => kind === "error" ? toast.error(message) : toast.success(message)
+  });
+  const parsed = useMemo(() => isStreamActive ? null : parseDiff(content), [content, isStreamActive]);
+  const spec = parsed && !("error" in parsed) ? parsed : null;
+  const error = parsed && "error" in parsed ? parsed.error : null;
+  const [copied, setCopied] = useState(false);
+  const [split, setSplit] = useState(null);
+  const presentation = useCanvasPresentation();
+  const effectiveSplit = diffIsSplit({
+    presentation,
+    personChoice: split,
+    authored: spec?.split ?? true,
+    authoredExplicitly: spec?.splitExplicit ?? false
+  });
+  const handleCopy = async () => {
+    try {
+      await copyText(content.trim());
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      toast.error("Couldn't copy");
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("my-3 overflow-hidden rounded-lg border border-border bg-card", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border bg-muted/50 px-3 py-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+        /* @__PURE__ */ jsx(GitCompareArrows, { className: "h-3.5 w-3.5 shrink-0 text-primary" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: spec?.title ?? "Changes" }),
+        isStreamActive && /* @__PURE__ */ jsx("span", { className: "shrink-0 animate-pulse text-xs text-muted-foreground", children: "\u2026" })
+      ] }),
+      !isStreamActive && spec && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: effectiveSplit ? /* @__PURE__ */ jsx(Rows3, {}) : /* @__PURE__ */ jsx(Columns2, {}), "aria-label": effectiveSplit ? "Unified view" : "Split view", title: effectiveSplit ? "Unified view" : "Split view", onClick: () => setSplit(!effectiveSplit) }),
+        /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), "aria-label": copied ? "Copied" : "Copy source", title: copied ? "Copied" : "Copy source", onClick: handleCopy })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "max-h-[60dvh] overflow-auto", children: isStreamActive ? /* @__PURE__ */ jsx("div", { className: "p-3", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-40 w-full" }) }) : error ? /* @__PURE__ */ jsxs("div", { className: "m-3 flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm", children: [
+      /* @__PURE__ */ jsx(TriangleAlert, { className: "mt-0.5 h-4 w-4 shrink-0 text-destructive" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: error }),
+      /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error })
+    ] }) : spec ? /* @__PURE__ */ jsx("div", { "data-diff-view": effectiveSplit ? "split" : "unified", children: /* @__PURE__ */ jsx(DiffCanvas, { oldValue: spec.oldValue, newValue: spec.newValue, split: effectiveSplit }) }) : null })
+  ] });
+};
+var DiffBlock_default = DiffBlock;
+export {
+  DiffBlock,
+  DiffBlock_default as default,
+  isUnifiedDiff
+};

package/dist/display/blocks/diff/DiffCanvas.d.ts

@@ -0,0 +1,15 @@
+/**
+ * DiffCanvas — the diff renderer for a DiffBlock (```diff fences).
+ *
+ * Self-sizing, chrome-less light-engine diff (DiffBlock provides the card,
+ * title, split/unified toggle, and copy). Uses the canonical InlineTextDiff so
+ * it shares the one diff engine + GitHub-style color palette with the rest of
+ * the app — no third-party diff library. DiffBlock still loads this file via
+ * `next/dynamic ssr:false`, the single boundary for this subtree.
+ */
+import React from "react";
+export default function DiffCanvas({ oldValue, newValue, split, }: {
+    oldValue: string;
+    newValue: string;
+    split: boolean;
+}): React.JSX.Element;

package/dist/display/blocks/diff/DiffCanvas.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { InlineTextDiff } from "@ai-matrx/diff/react";
+function DiffCanvas({
+  oldValue,
+  newValue,
+  split
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "px-1 py-1 text-[13px]", children: /* @__PURE__ */ jsx(
+    InlineTextDiff,
+    {
+      original: oldValue,
+      modified: newValue,
+      view: split ? "split" : "inline"
+    }
+  ) });
+}
+export {
+  DiffCanvas as default
+};

package/dist/display/blocks/generic/GenericStructuredBlock.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The Matrix binding of the OFFICIAL fallback renderer for a resolved `__kind`
+ * block that has no registered component (Shape System ruling R6).
+ *
+ * The view lives in `@ai-matrx/content-ir-react` (`GenericStructuredView`):
+ * envelope-first value recovery, the honest "no custom view yet" / "registered
+ * but held inactive" distinction, and the zero-data-loss verbatim backstop when
+ * nothing parsed. Its body renders through THIS app's structured-value floor
+ * (`StructuredValueView`) via the host seam — the reason a Study Pack step is a
+ * readable document instead of a JSON dump.
+ *
+ * Bare by construction (THE WRAPPER LAW): every host that routes a block here
+ * already draws chrome.
+ */
+import React from "react";
+export interface GenericStructuredBlockProps {
+    /** 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>;
+    className?: string;
+}
+declare const GenericStructuredBlock: React.FC<GenericStructuredBlockProps>;
+export default GenericStructuredBlock;

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

@@ -0,0 +1,53 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { Braces } from "lucide-react";
+import { GenericStructuredView } from "@ai-matrx/content-ir-react";
+import { reconstructRegionValue } from "@ai-matrx/content-ir";
+import { ContentIrHostBoundary } from "../../../host/ContentIrHostBoundary.js";
+import { readIrRouteMarker } from "../../../kinds/react/kind-route.js";
+import { collectKindProblems } from "../../../kinds/react/kind-problems.js";
+import { readEnvelope } from "../../../kinds/redux/render-block-envelope.js";
+import { reportKindComponentIncident } from "../../../host/kind-incident.js";
+import { KindFixItBar } from "../../../host/app-bindings.js";
+import { StructuredValueTabs } from "./StructuredValueTabs.js";
+const StillArriving = /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+  /* @__PURE__ */ jsx(Braces, { className: "h-3.5 w-3.5 shrink-0 animate-pulse" }),
+  /* @__PURE__ */ jsx("span", { children: "Still arriving\u2026" })
+] });
+function useGenericFloorAlarm(metadata) {
+  const kind = readEnvelope(metadata)?.root.kind ?? null;
+  const reason = readIrRouteMarker(metadata)?.reason ?? null;
+  useEffect(() => {
+    if (!kind) return;
+    reportKindComponentIncident({
+      kind,
+      errorType: "generic_floor_render",
+      message: `"${kind}" rendered through the GENERIC structured viewer` + (reason === "inactive" ? " \u2014 a component row exists but is held is_active=false." : " \u2014 no component is bound, so the reader sees a key/value dump.")
+    });
+  }, [kind, reason]);
+}
+const GenericStructuredBlock = (props) => {
+  useGenericFloorAlarm(props.metadata);
+  const envelope = readEnvelope(props.metadata);
+  const value = envelope ? reconstructRegionValue(envelope) : void 0;
+  const settledKind = envelope?.root.kind && envelope.root.status === "complete" ? envelope.root.kind : null;
+  const problems = collectKindProblems(
+    envelope,
+    readIrRouteMarker(props.metadata)
+  );
+  return /* @__PURE__ */ jsx(ContentIrHostBoundary, { children: /* @__PURE__ */ jsx(
+    StructuredValueTabs,
+    {
+      value,
+      raw: props.content,
+      problems,
+      header: settledKind ? /* @__PURE__ */ jsx(KindFixItBar, { kind: settledKind, value }) : void 0,
+      children: /* @__PURE__ */ jsx(GenericStructuredView, { ...props, streamingIndicator: StillArriving })
+    }
+  ) });
+};
+var GenericStructuredBlock_default = GenericStructuredBlock;
+export {
+  GenericStructuredBlock_default as default
+};

package/dist/display/blocks/generic/StructuredValueTabs.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import type { KindProblem } from "../../../kinds/react/kind-problems.js";
+/**
+ * `value` feeds the JSON tab (pretty-printed, copyable); `raw` is the
+ * zero-loss fallback when no structured value survived. `header` renders any
+ * host status line (kind drift note, "still arriving") above the content.
+ */
+export declare function StructuredValueTabs({ value, raw, header, problems, children, }: {
+    value: unknown;
+    raw?: string | null;
+    header?: React.ReactNode;
+    /**
+     * What the parser/route recorded about this value being a BROKEN or
+     * unroutable kind instance (`collectKindProblems`). Non-empty adds the
+     * Errors tab — the exact problems, in-band, for everyone (Arman,
+     * 2026-08-29: a `__kind` that isn't kind-rendered must be acknowledged as
+     * a kind, with its exact errors — never an anonymous JSON dump).
+     */
+    problems?: KindProblem[];
+    children: React.ReactNode;
+}): React.JSX.Element;