@ai-matrx/rich-editor 0.1.2 → 0.2.0

package/dist/visual/menus/SuggestionMenu.d.ts

@@ -0,0 +1,37 @@
+import { type ComponentType } from "react";
+import type { SuggestionKeyDownProps, SuggestionProps } from "@tiptap/suggestion";
+export interface MenuItem {
+    id: string;
+    title: string;
+    description?: string;
+    group?: string;
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    /** Right-aligned hint (a shortcut, a type). */
+    hint?: string;
+}
+export interface SuggestionListHandle {
+    onKeyDown: (props: SuggestionKeyDownProps) => boolean;
+}
+interface SuggestionListProps {
+    items: MenuItem[];
+    command: (item: MenuItem) => void;
+    emptyText: string;
+    label: string;
+    /** With nothing to pick, Enter still belongs to the menu (a half-typed `{{name`). */
+    holdEnterWhenEmpty: boolean;
+}
+export declare const SuggestionList: import("react").ForwardRefExoticComponent<SuggestionListProps & import("react").RefAttributes<SuggestionListHandle>>;
+/** The suggestion plugin's render() — one popup per active menu. */
+export declare function suggestionRenderer(options: {
+    emptyText: string;
+    label: string;
+    holdEnterWhenEmpty?: boolean;
+}): () => {
+    onStart: (props: SuggestionProps<MenuItem, MenuItem>) => void;
+    onUpdate: (props: SuggestionProps<MenuItem, MenuItem>) => void;
+    onKeyDown: (props: SuggestionKeyDownProps) => boolean;
+    onExit: () => void;
+};
+export {};

package/dist/visual/menus/SuggestionMenu.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { ReactRenderer } from "@tiptap/react";
+import { cn } from "@ai-matrx/design-system";
+const SuggestionList = forwardRef(
+  function SuggestionList2({ items, command, emptyText, label, holdEnterWhenEmpty }, ref) {
+    const [active, setActive] = useState(0);
+    const list = useRef(null);
+    useEffect(() => setActive(0), [items]);
+    useEffect(() => {
+      list.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: "nearest" });
+    }, [active]);
+    useImperativeHandle(ref, () => ({
+      onKeyDown: ({ event }) => {
+        if (!items.length) return holdEnterWhenEmpty && event.key === "Enter";
+        if (event.key === "ArrowDown") {
+          setActive((index) => (index + 1) % items.length);
+          return true;
+        }
+        if (event.key === "ArrowUp") {
+          setActive((index) => (index + items.length - 1) % items.length);
+          return true;
+        }
+        if (event.key === "Enter" || event.key === "Tab") {
+          const item = items[active];
+          if (item) command(item);
+          return true;
+        }
+        return false;
+      }
+    }));
+    let lastGroup;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: list,
+        role: "listbox",
+        "aria-label": label,
+        className: "matrx-touch-targets z-50 max-h-[min(22rem,60dvh)] w-72 overflow-y-auto rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-lg",
+        children: [
+          items.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: emptyText }),
+          items.map((item, index) => {
+            const Icon = item.icon;
+            const header = item.group && item.group !== lastGroup ? item.group : null;
+            lastGroup = item.group;
+            return /* @__PURE__ */ jsxs("div", { children: [
+              header && /* @__PURE__ */ jsx("div", { className: "px-2 pb-0.5 pt-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: header }),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": index === active,
+                  "data-index": index,
+                  className: cn(
+                    "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm",
+                    index === active ? "bg-accent text-accent-foreground" : "hover:bg-muted"
+                  ),
+                  onMouseEnter: () => setActive(index),
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    command(item);
+                  },
+                  children: [
+                    Icon && /* @__PURE__ */ jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded border border-border bg-background", children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }) }),
+                    /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ jsx("span", { className: "block truncate font-medium", children: item.title }),
+                      item.description && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-muted-foreground", children: item.description })
+                    ] }),
+                    item.hint && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: item.hint })
+                  ]
+                }
+              )
+            ] }, item.id);
+          })
+        ]
+      }
+    );
+  }
+);
+function suggestionRenderer(options) {
+  return () => {
+    let renderer = null;
+    let unmount = null;
+    const toProps = (props) => ({
+      items: props.items,
+      command: props.command,
+      emptyText: options.emptyText,
+      label: options.label,
+      holdEnterWhenEmpty: options.holdEnterWhenEmpty ?? true
+    });
+    return {
+      onStart: (props) => {
+        renderer = new ReactRenderer(SuggestionList, { props: toProps(props), editor: props.editor });
+        unmount = props.mount(renderer.element);
+      },
+      onUpdate: (props) => {
+        renderer?.updateProps(toProps(props));
+      },
+      onKeyDown: (props) => {
+        if (props.event.key === "Escape") {
+          unmount?.();
+          unmount = null;
+          return true;
+        }
+        return renderer?.ref?.onKeyDown(props) ?? false;
+      },
+      onExit: () => {
+        unmount?.();
+        unmount = null;
+        renderer?.destroy();
+        renderer = null;
+      }
+    };
+  };
+}
+export {
+  SuggestionList,
+  suggestionRenderer
+};

package/dist/visual/nodes/CalloutView.d.ts

@@ -0,0 +1,2 @@
+import { type NodeViewProps } from "@tiptap/react";
+export declare function CalloutView({ node, updateAttributes, editor }: NodeViewProps): import("react").JSX.Element;

package/dist/visual/nodes/CalloutView.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
+import { AlertOctagon, AlertTriangle, Info, Lightbulb, MessageSquareWarning } from "lucide-react";
+import { cn } from "@ai-matrx/design-system";
+import { CALLOUT_TYPES } from "../../core/commands.js";
+const CALLOUT_STYLE = {
+  NOTE: { icon: Info, label: "Note", className: "border-sky-500/60 bg-sky-500/5 [&_.rich-callout-head]:text-sky-700 dark:[&_.rich-callout-head]:text-sky-300" },
+  TIP: { icon: Lightbulb, label: "Tip", className: "border-emerald-500/60 bg-emerald-500/5 [&_.rich-callout-head]:text-emerald-700 dark:[&_.rich-callout-head]:text-emerald-300" },
+  IMPORTANT: { icon: MessageSquareWarning, label: "Important", className: "border-violet-500/60 bg-violet-500/5 [&_.rich-callout-head]:text-violet-700 dark:[&_.rich-callout-head]:text-violet-300" },
+  WARNING: { icon: AlertTriangle, label: "Warning", className: "border-amber-500/60 bg-amber-500/5 [&_.rich-callout-head]:text-amber-700 dark:[&_.rich-callout-head]:text-amber-300" },
+  CAUTION: { icon: AlertOctagon, label: "Caution", className: "border-red-500/60 bg-red-500/5 [&_.rich-callout-head]:text-red-700 dark:[&_.rich-callout-head]:text-red-300" }
+};
+function CalloutView({ node, updateAttributes, editor }) {
+  const alert = node.attrs.mdAlert;
+  const type = alert ? alert.slice(2, -1).toUpperCase() : null;
+  const style = type ? CALLOUT_STYLE[type] : null;
+  if (!type || !style || !alert) {
+    return /* @__PURE__ */ jsx(NodeViewWrapper, { as: "blockquote", children: /* @__PURE__ */ jsx(NodeViewContent, {}) });
+  }
+  const Icon = style.icon;
+  const lower = alert === alert.toLowerCase();
+  return /* @__PURE__ */ jsxs(NodeViewWrapper, { as: "div", className: cn("rich-editor-callout my-3 rounded-md border-l-4 px-3 py-2", style.className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "rich-callout-head mb-1 flex items-center gap-1.5 text-sm font-semibold", contentEditable: false, children: [
+      /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+      editor.isEditable ? /* @__PURE__ */ jsx(
+        "select",
+        {
+          "aria-label": "Callout type",
+          className: "rounded bg-transparent text-sm font-semibold outline-none hover:bg-muted/60",
+          value: type,
+          onChange: (event) => {
+            const next = event.target.value;
+            updateAttributes({ mdAlert: `[!${lower ? next.toLowerCase() : next}]` });
+          },
+          children: CALLOUT_TYPES.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: CALLOUT_STYLE[option].label }, option))
+        }
+      ) : style.label
+    ] }),
+    /* @__PURE__ */ jsx(NodeViewContent, { className: "rich-callout-body" })
+  ] });
+}
+export {
+  CalloutView
+};

package/dist/visual/nodes/InlineIslandView.d.ts

@@ -0,0 +1,2 @@
+import { type NodeViewProps } from "@tiptap/react";
+export declare function InlineIslandView({ node, updateAttributes, selected, editor }: NodeViewProps): import("react").JSX.Element;

package/dist/visual/nodes/InlineIslandView.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { humanizeIdentifier } from "@ai-matrx/kit/text-case";
+import { useState } from "react";
+import { NodeViewWrapper } from "@tiptap/react";
+import { Popover, PopoverContent, PopoverTrigger } from "@ai-matrx/design-system";
+import { Braces, Sigma } from "lucide-react";
+import { cn } from "@ai-matrx/design-system";
+import { useRichEditorContext } from "../../editor/RichEditorContext.js";
+import { IslandCodeEditor } from "../../islands/IslandCodeEditor.js";
+import { IslandPreview } from "../../islands/IslandPreview.js";
+import { inlineIslandLabel, texOf } from "../../islands/island-meta.js";
+import { isEscapedBracketMath } from "@ai-matrx/rich-content/markdown-core/math-normalizer";
+import {
+  VARIABLE_STATE_CLASS,
+  classifyVariable,
+  toVariableName
+} from "../../core/variables.js";
+function mathDelimiters(raw) {
+  if (raw.startsWith("\\(")) return ["\\(", "\\)"];
+  if (raw.startsWith("\\[")) return ["\\[", "\\]"];
+  if (raw.startsWith("$$")) return ["$$", "$$"];
+  return ["$", "$"];
+}
+function imageParts(raw) {
+  const match = /^!\[([^\]]*)\]\(([^)\s]+)/.exec(raw);
+  return match ? { alt: match[1] ?? "", src: match[2] ?? "" } : null;
+}
+function InlineIslandView({ node, updateAttributes, selected, editor }) {
+  const context = useRichEditorContext();
+  const raw = String(node.attrs.raw ?? "");
+  const islandType = String(node.attrs.islandType ?? "variable");
+  const [open, setOpen] = useState(false);
+  const readOnly = context.readOnly || !editor.isEditable;
+  const write = (next) => {
+    if (next === raw || !next) return;
+    context.approveIsland(raw);
+    updateAttributes({ raw: next });
+  };
+  if (islandType === "variable") {
+    const info = classifyVariable(raw, context.variables);
+    const [renaming, setRenaming] = [open, setOpen];
+    return /* @__PURE__ */ jsx(NodeViewWrapper, { as: "span", className: "rich-editor-inline-island", contentEditable: false, children: /* @__PURE__ */ jsxs(Popover, { open: renaming && !readOnly, onOpenChange: setRenaming, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "span",
+        {
+          role: "button",
+          tabIndex: -1,
+          title: info.title,
+          className: cn(
+            "mx-px inline-flex cursor-pointer items-center gap-0.5 rounded-md border px-1 py-px align-baseline font-medium text-[0.92em]",
+            VARIABLE_STATE_CLASS[info.state],
+            selected && "ring-2 ring-primary/50"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Braces, { className: "h-3 w-3 opacity-70" }),
+            info.name,
+            info.declared?.type && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-[0.8em] opacity-70", children: info.declared.type })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(PopoverContent, { sizing: "content", className: "p-2", align: "start", children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-1 text-xs font-medium text-muted-foreground", children: "Variable" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "mb-2 h-8 w-full rounded-md border border-border bg-background px-2 text-base sm:text-sm",
+            defaultValue: info.name,
+            "aria-label": "Variable name",
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                const name = toVariableName(event.currentTarget.value);
+                if (name) write(`{{${name}}}`);
+                setRenaming(false);
+                editor.commands.focus();
+              }
+            }
+          }
+        ),
+        context.variables && context.variables.length > 0 && /* @__PURE__ */ jsx("div", { className: "max-h-48 overflow-y-auto", children: context.variables.map((variable) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "flex w-full items-center justify-between rounded px-2 py-1 text-left text-sm hover:bg-muted",
+            onClick: () => {
+              write(`{{${variable.name}}}`);
+              setRenaming(false);
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { children: humanizeIdentifier(variable.name) }),
+              variable.type && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: variable.type })
+            ]
+          },
+          variable.name
+        )) }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-[11px] text-muted-foreground", children: info.title })
+      ] })
+    ] }) });
+  }
+  if (islandType === "math_inline") {
+    const tex = texOf(raw);
+    const [open$, close$] = mathDelimiters(raw);
+    if (open$ === "\\[" && !isEscapedBracketMath(tex, void 0)) {
+      return /* @__PURE__ */ jsx(NodeViewWrapper, { as: "span", className: "rich-editor-inline-island", contentEditable: false, children: /* @__PURE__ */ jsxs("span", { title: "Escaped brackets \u2014 kept exactly as written", className: cn(selected && "rounded ring-2 ring-primary/50"), children: [
+        "[",
+        raw.slice(2, -2),
+        "]"
+      ] }) });
+    }
+    return /* @__PURE__ */ jsx(NodeViewWrapper, { as: "span", className: "rich-editor-inline-island", contentEditable: false, children: /* @__PURE__ */ jsxs(Popover, { open: open && !readOnly, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "span",
+        {
+          role: "button",
+          tabIndex: -1,
+          title: "Equation \u2014 click to edit",
+          className: cn(
+            "mx-px inline-flex cursor-pointer items-center gap-0.5 rounded border border-violet-300/60 bg-violet-50 px-1 font-mono text-[0.85em] text-violet-700 dark:border-violet-700/60 dark:bg-violet-950/40 dark:text-violet-300",
+            selected && "ring-2 ring-primary/50"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Sigma, { className: "h-3 w-3 opacity-70" }),
+            tex || "equation"
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(PopoverContent, { sizing: "content", className: "space-y-2 p-2", align: "start", children: [
+        /* @__PURE__ */ jsx(
+          IslandCodeEditor,
+          {
+            value: tex,
+            onChange: (next) => write(`${open$}${next}${close$}`),
+            language: "math",
+            autoFocus: true,
+            ariaLabel: "Equation (TeX)",
+            onExit: () => {
+              setOpen(false);
+              editor.commands.focus();
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "rounded-md border border-dashed border-border px-2 py-1", children: /* @__PURE__ */ jsx(IslandPreview, { raw: `$$
+${tex}
+$$`, islandType: "math_block" }) })
+      ] })
+    ] }) });
+  }
+  const image = islandType === "md_image" ? imageParts(raw) : null;
+  if (image) {
+    return /* @__PURE__ */ jsx(NodeViewWrapper, { as: "span", className: "rich-editor-inline-island", contentEditable: false, children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: image.src,
+        alt: image.alt,
+        title: raw,
+        className: cn("inline-block max-h-64 max-w-full rounded-md align-middle", selected && "ring-2 ring-primary")
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(NodeViewWrapper, { as: "span", className: "rich-editor-inline-island", contentEditable: false, children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      title: `${inlineIslandLabel(islandType)} \u2014 kept exactly as written`,
+      className: cn(
+        "mx-px inline rounded border border-border bg-muted/60 px-1 font-mono text-[0.82em] text-muted-foreground",
+        selected && "ring-2 ring-primary/50"
+      ),
+      children: raw
+    }
+  ) });
+}
+export {
+  InlineIslandView
+};

package/dist/visual/nodes/IslandBlockView.d.ts

@@ -0,0 +1,2 @@
+import { type NodeViewProps } from "@tiptap/react";
+export declare function IslandBlockView({ node, updateAttributes, deleteNode, selected, editor, getPos }: NodeViewProps): import("react").JSX.Element;

package/dist/visual/nodes/IslandBlockView.js

@@ -0,0 +1,206 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useClipboard } from "@ai-matrx/kit/clipboard";
+import { useEffect, useState } from "react";
+import { NodeViewWrapper } from "@tiptap/react";
+import { AlertTriangle, Check, Copy, GripVertical, Lock, Pencil, Trash2 } from "lucide-react";
+import { cn } from "@ai-matrx/design-system";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@ai-matrx/design-system";
+import { toast } from "@ai-matrx/rich-content/host/toast";
+import { useRichEditorContext } from "../../editor/RichEditorContext.js";
+import { IslandCodeEditor } from "../../islands/IslandCodeEditor.js";
+import { IslandPreview } from "../../islands/IslandPreview.js";
+import {
+  CODE_LANGUAGES,
+  islandMeta,
+  texOf,
+  fenceLanguage as fenceLanguageOf,
+  isMatrxFence,
+  withFenceLanguage
+} from "../../islands/island-meta.js";
+import { consumeAutoEdit } from "../auto-edit.js";
+const PLAIN_TEXT = "__plain_text";
+function IslandBlockView({ node, updateAttributes, deleteNode, selected, editor, getPos }) {
+  const { copyText } = useClipboard({
+    notify: (message, kind) => kind === "error" ? toast.error(message) : toast.success(message)
+  });
+  const context = useRichEditorContext();
+  const raw = String(node.attrs.raw ?? "");
+  const islandType = String(node.attrs.islandType ?? "fence");
+  const complete = node.attrs.complete !== false;
+  const meta = islandMeta(islandType, raw);
+  const Icon = meta.icon;
+  const [editing, setEditing] = useState(false);
+  const [copied, setCopied] = useState(false);
+  useEffect(() => {
+    const pos = typeof getPos === "function" ? getPos() : void 0;
+    if (typeof pos === "number" && consumeAutoEdit(editor, pos)) setEditing(true);
+  }, [editor, getPos]);
+  const write = (next) => {
+    if (next === raw) return;
+    context.approveIsland(raw);
+    updateAttributes({ raw: next, complete: true });
+  };
+  const remove = () => {
+    context.approveIsland(raw);
+    deleteNode();
+    toast.info(`${meta.label} removed.`, {
+      action: { label: "Undo", onClick: () => editor.commands.undo() }
+    });
+  };
+  const copy = async () => {
+    try {
+      if (!await copyText(raw)) return;
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1200);
+    } catch {
+      toast.error("Copy failed \u2014 your browser blocked clipboard access.");
+    }
+  };
+  const isFence = islandType === "fence";
+  const isMath = meta.language === "math";
+  const readOnly = context.readOnly || !editor.isEditable;
+  if (isMatrxFence(islandType, raw)) {
+    return /* @__PURE__ */ jsxs(
+      NodeViewWrapper,
+      {
+        className: cn(
+          "rich-editor-island rich-editor-reference group/island relative my-1 flex min-w-0 items-start gap-1 rounded-md transition-colors",
+          selected && "ring-1 ring-primary/40"
+        ),
+        "data-island-type": "matrx",
+        contentEditable: false,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-drag-handle": true,
+              className: "mt-1.5 shrink-0 cursor-grab touch-none text-muted-foreground/60 opacity-100 hover:text-foreground sm:opacity-0 sm:group-hover/island:opacity-100",
+              "aria-hidden": true,
+              children: /* @__PURE__ */ jsx(GripVertical, { className: "h-3.5 w-3.5" })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(IslandPreview, { raw, islandType }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5 text-muted-foreground opacity-100 sm:opacity-0 sm:transition-opacity sm:group-hover/island:opacity-100 sm:group-focus-within/island:opacity-100", children: [
+            /* @__PURE__ */ jsx("button", { type: "button", className: "rounded p-1 hover:bg-muted hover:text-foreground pointer-coarse:flex pointer-coarse:h-11 pointer-coarse:w-11 pointer-coarse:items-center pointer-coarse:justify-center", onClick: copy, title: `Copy this ${meta.label.toLowerCase()}`, children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" }) }),
+            !readOnly && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "rounded p-1 hover:bg-destructive/10 hover:text-destructive-ink pointer-coarse:flex pointer-coarse:h-11 pointer-coarse:w-11 pointer-coarse:items-center pointer-coarse:justify-center",
+                onClick: remove,
+                title: `Remove this ${meta.label.toLowerCase()} (Undo brings it back)`,
+                children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    NodeViewWrapper,
+    {
+      className: cn(
+        "rich-editor-island group/island relative my-3 rounded-lg border bg-card/60 transition-colors",
+        selected ? "border-primary ring-1 ring-primary/40" : "border-border"
+      ),
+      "data-island-type": islandType,
+      contentEditable: false,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-8 min-w-0 items-center gap-1.5 border-b border-border/60 px-2 py-1 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { "data-drag-handle": true, className: "shrink-0 cursor-grab touch-none text-muted-foreground/60 hover:text-foreground", "aria-hidden": true, children: /* @__PURE__ */ jsx(GripVertical, { className: "h-3.5 w-3.5" }) }),
+          /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
+          !(isFence && !readOnly) && /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-medium text-foreground/80", children: meta.label }),
+          !isFence && /* @__PURE__ */ jsx(Lock, { className: "h-3 w-3 shrink-0 opacity-60", "aria-label": "Protected \u2014 never rewritten by the editor" }),
+          !complete && /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1 text-amber-600 dark:text-amber-400", title: "This block's closing marker is missing, so it runs to the end of the text. It is kept exactly as written.", children: [
+            /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3 w-3" }),
+            " not closed"
+          ] }),
+          isFence && !readOnly && // The app's Select (not a native one). Radix needs a non-empty
+          // value, so "Plain text" rides a sentinel.
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: fenceLanguageOf(raw) || PLAIN_TEXT,
+              onValueChange: (value) => write(withFenceLanguage(raw, value === PLAIN_TEXT ? "" : value)),
+              children: [
+                /* @__PURE__ */ jsx(
+                  SelectTrigger,
+                  {
+                    "aria-label": "Code language",
+                    className: "ml-1 min-w-[5.5rem] max-w-[9rem] shrink",
+                    children: /* @__PURE__ */ jsx(SelectValue, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(SelectContent, { children: [.../* @__PURE__ */ new Set([fenceLanguageOf(raw), ...CODE_LANGUAGES])].map((language) => /* @__PURE__ */ jsx(SelectItem, { value: language || PLAIN_TEXT, className: "text-xs", children: language || "Plain text" }, language || PLAIN_TEXT)) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-0.5 opacity-100 sm:opacity-0 sm:transition-opacity sm:group-hover/island:opacity-100 sm:group-focus-within/island:opacity-100", children: [
+            /* @__PURE__ */ jsx("button", { type: "button", className: "rounded p-1 hover:bg-muted hover:text-foreground pointer-coarse:flex pointer-coarse:h-11 pointer-coarse:w-11 pointer-coarse:items-center pointer-coarse:justify-center", onClick: copy, title: "Copy its exact source", children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" }) }),
+            !readOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: cn("rounded p-1 hover:bg-muted hover:text-foreground pointer-coarse:flex pointer-coarse:h-11 pointer-coarse:w-11 pointer-coarse:items-center pointer-coarse:justify-center", editing && "bg-muted text-foreground"),
+                  onClick: () => setEditing((value) => !value),
+                  title: editing ? "Done editing" : "Edit its source",
+                  "aria-pressed": editing,
+                  children: /* @__PURE__ */ jsx(Pencil, { className: "h-3.5 w-3.5" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "rounded p-1 hover:bg-destructive/10 hover:text-destructive-ink pointer-coarse:flex pointer-coarse:h-11 pointer-coarse:w-11 pointer-coarse:items-center pointer-coarse:justify-center",
+                  onClick: remove,
+                  title: "Remove this block from the document (Undo brings it back)",
+                  children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        editing && !readOnly ? /* @__PURE__ */ jsxs("div", { className: "space-y-2 p-2", children: [
+          /* @__PURE__ */ jsx(
+            IslandCodeEditor,
+            {
+              value: raw,
+              onChange: write,
+              language: meta.language,
+              autoFocus: true,
+              ariaLabel: `${meta.label} source`,
+              onExit: () => {
+                setEditing(false);
+                editor.commands.focus();
+              }
+            }
+          ),
+          isMath && /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-dashed border-border px-3 py-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "mb-1 text-[11px] uppercase tracking-wide text-muted-foreground", children: "Preview" }),
+            /* @__PURE__ */ jsx(IslandPreview, { raw, islandType }),
+            !texOf(raw).trim() && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+              "Type TeX above, e.g. \\frac",
+              "{a}",
+              "{b}",
+              "."
+            ] })
+          ] })
+        ] }) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "max-h-[32rem] overflow-auto px-3 py-2",
+            onDoubleClick: () => !readOnly && setEditing(true),
+            children: /* @__PURE__ */ jsx(IslandPreview, { raw, islandType })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  IslandBlockView
+};

package/dist/visual/nodes/SourceLockedView.d.ts

@@ -0,0 +1,2 @@
+import { type NodeViewProps } from "@tiptap/react";
+export declare function SourceLockedView({ node, updateAttributes, selected, editor }: NodeViewProps): import("react").JSX.Element;

package/dist/visual/nodes/SourceLockedView.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { NodeViewWrapper } from "@tiptap/react";
+import { FileLock2, GripVertical, Pencil } from "lucide-react";
+import { cn } from "@ai-matrx/design-system";
+import { useRichEditorContext } from "../../editor/RichEditorContext.js";
+import { IslandCodeEditor } from "../../islands/IslandCodeEditor.js";
+import { IslandPreview } from "../../islands/IslandPreview.js";
+function SourceLockedView({ node, updateAttributes, selected, editor }) {
+  const context = useRichEditorContext();
+  const raw = String(node.attrs.raw ?? "");
+  const reason = node.attrs.reason ? String(node.attrs.reason) : "source";
+  const [editing, setEditing] = useState(false);
+  const readOnly = context.readOnly || !editor.isEditable;
+  const isPageBreak = reason === "page break";
+  return /* @__PURE__ */ jsxs(
+    NodeViewWrapper,
+    {
+      className: cn(
+        "rich-editor-locked group/locked relative my-2 rounded-md border border-dashed transition-colors",
+        selected ? "border-primary" : "border-border/70"
+      ),
+      contentEditable: false,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-2 pt-1 text-[11px] text-muted-foreground opacity-100 sm:opacity-0 sm:transition-opacity sm:group-hover/locked:opacity-100 sm:group-focus-within/locked:opacity-100", children: [
+          /* @__PURE__ */ jsx("span", { "data-drag-handle": true, className: "cursor-grab text-muted-foreground/60", "aria-hidden": true, children: /* @__PURE__ */ jsx(GripVertical, { className: "h-3 w-3" }) }),
+          /* @__PURE__ */ jsx(FileLock2, { className: "h-3 w-3" }),
+          /* @__PURE__ */ jsx("span", { children: isPageBreak ? "Page break" : `Kept exactly as written \u2014 ${reason}` }),
+          !readOnly && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cn("ml-auto rounded p-1 hover:bg-muted hover:text-foreground", editing && "bg-muted text-foreground"),
+              onClick: () => setEditing((value) => !value),
+              title: editing ? "Done editing" : "Edit as source",
+              "aria-pressed": editing,
+              children: /* @__PURE__ */ jsx(Pencil, { className: "h-3 w-3" })
+            }
+          )
+        ] }),
+        editing && !readOnly ? /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx(
+          IslandCodeEditor,
+          {
+            value: raw,
+            onChange: (next) => updateAttributes({ raw: next }),
+            language: "markdown",
+            autoFocus: true,
+            ariaLabel: "Source",
+            onExit: () => {
+              setEditing(false);
+              editor.commands.focus();
+            }
+          }
+        ) }) : /* @__PURE__ */ jsx("div", { className: "px-3 pb-2", onDoubleClick: () => !readOnly && setEditing(true), children: /* @__PURE__ */ jsx(IslandPreview, { raw, islandType: isPageBreak ? "html_comment" : "prose" }) })
+      ]
+    }
+  );
+}
+export {
+  SourceLockedView
+};