@zephytiju/prism-main-editor 0.1.0

package/dist/blocks/AssessmentBlockView.d.ts

@@ -0,0 +1,21 @@
+import type { AssessmentBlock as AssessmentBlockModel } from "../types.js";
+import type { MainEditorLocale } from "../locales/index.js";
+export interface AssessmentBlockViewProps {
+    readonly block: AssessmentBlockModel;
+    readonly locale: MainEditorLocale;
+    /**
+     * D11: in the editor variant the judgment body is an editable text surface —
+     * selecting inside it opens the floating selection toolbar.
+     */
+    readonly editable?: boolean;
+}
+/**
+ * Normal document block — analyst-judgment highlight (D10): an accent bar +
+ * tint ONLY — no outlining box, no card chrome, no kind pill outside the
+ * label. The tint and the bar both derive from the warn token; the label
+ * defaults to the locale's "ANALYST JUDGMENT" string. When editable (D11) the
+ * body carries the data-main-editor-editable attribute the selection toolbar
+ * anchors to.
+ */
+export declare function AssessmentBlockView({ block, locale, editable }: AssessmentBlockViewProps): import("react").JSX.Element;
+//# sourceMappingURL=AssessmentBlockView.d.ts.map

package/dist/blocks/AssessmentBlockView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssessmentBlockView.d.ts","sourceRoot":"","sources":["../../src/blocks/AssessmentBlockView.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,IAAI,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAC3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG5D,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,KAAK,EAAE,oBAAoB,CAAC;IACrC,QAAQ,CAAC,MAAM,EAAE,gBAAgB,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAgB,EAAE,EAAE,wBAAwB,+BAwDhG"}

package/dist/blocks/AssessmentBlockView.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Group, Stack, Text } from "@mantine/core";
+import { stringsForLocale } from "../locales/index.js";
+import { HIGHLIGHT_TINT, MONO, WARN } from "../tokens.js";
+/**
+ * Normal document block — analyst-judgment highlight (D10): an accent bar +
+ * tint ONLY — no outlining box, no card chrome, no kind pill outside the
+ * label. The tint and the bar both derive from the warn token; the label
+ * defaults to the locale's "ANALYST JUDGMENT" string. When editable (D11) the
+ * body carries the data-main-editor-editable attribute the selection toolbar
+ * anchors to.
+ */
+export function AssessmentBlockView({ block, locale, editable = false }) {
+    const strings = stringsForLocale(locale);
+    return (_jsx(Box, { px: 16, py: 14, style: { background: HIGHLIGHT_TINT, borderRadius: 4 }, "data-testid": `main-editor-block-${block.id}`, children: _jsxs(Group, { align: "stretch", gap: 16, wrap: "nowrap", children: [_jsx("span", { style: {
+                        display: "inline-block",
+                        width: 5,
+                        borderRadius: 2,
+                        background: WARN,
+                        alignSelf: "stretch",
+                        flexShrink: 0,
+                    }, "data-testid": `main-editor-assessment-bar-${block.id}` }), _jsxs(Stack, { gap: 8, miw: 0, style: { flex: 1 }, children: [_jsx(Text, { ff: MONO, fz: 9, fw: 500, style: { color: WARN, letterSpacing: "0.08em" }, "data-testid": `main-editor-assessment-label-${block.id}`, children: block.label ?? strings.kindAssessment }), _jsx(Text, { fz: 14, fw: 500, c: "text", style: {
+                                lineHeight: 1.45,
+                                letterSpacing: "0.01em",
+                                ...(editable ? { cursor: "text", outline: "none" } : {}),
+                            }, "data-testid": `main-editor-assessment-text-${block.id}`, ...(editable
+                                ? {
+                                    contentEditable: true,
+                                    suppressContentEditableWarning: true,
+                                    spellCheck: false,
+                                    "data-main-editor-editable": block.id,
+                                }
+                                : {}), children: block.text })] })] }) }));
+}

package/dist/blocks/BlockRow.d.ts

@@ -0,0 +1,33 @@
+import type { MainEditorLocale } from "../locales/index.js";
+import type { MainEditorBlock, MainEditorBlockKind } from "../types.js";
+import type { KindLabelFn } from "./InsertMenu.js";
+export interface BlockRowProps {
+    readonly block: MainEditorBlock;
+    readonly locale: MainEditorLocale;
+    /** editor — insert + drag controls render; readonly — published view. */
+    readonly editor: boolean;
+    readonly showInsert: boolean;
+    readonly kinds: readonly MainEditorBlockKind[];
+    readonly kindLabel: KindLabelFn;
+    readonly canMoveUp: boolean;
+    readonly canMoveDown: boolean;
+    readonly focused: boolean;
+    /**
+     * D11: narrative + assessment text surfaces are editable (selection toolbar
+     * targets them) in the editor variant only.
+     */
+    readonly editable: boolean;
+    /** Publishes "main-editor.focused-block" for the clicked block id. */
+    readonly onFocusBlock: (blockId: string) => void;
+}
+/**
+ * One row of the typed block stack: the editor-variant insert rail (gutter)
+ * beside the block surface. The gutter renders ONLY on row hover or keyboard
+ * focus within the row (D11 — a 120ms opacity fade, kept reachable by TAB
+ * because the hidden controls stay focusable and reveal on focus). Clicking
+ * the surface publishes "main-editor.focused-block"; the focus wash is an
+ * interaction state, not an outlining box — normal blocks stay plain
+ * document elements.
+ */
+export declare function BlockRow({ block, locale, editor, showInsert, kinds, kindLabel, canMoveUp, canMoveDown, focused, editable, onFocusBlock, }: BlockRowProps): import("react").JSX.Element;
+//# sourceMappingURL=BlockRow.d.ts.map

package/dist/blocks/BlockRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockRow.d.ts","sourceRoot":"","sources":["../../src/blocks/BlockRow.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAMxE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAInD,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC;IAChC,QAAQ,CAAC,MAAM,EAAE,gBAAgB,CAAC;IAClC,yEAAyE;IACzE,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,SAAS,mBAAmB,EAAE,CAAC;IAC/C,QAAQ,CAAC,SAAS,EAAE,WAAW,CAAC;IAChC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,sEAAsE;IACtE,QAAQ,CAAC,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAED;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,MAAM,EACN,MAAM,EACN,UAAU,EACV,KAAK,EACL,SAAS,EACT,SAAS,EACT,WAAW,EACX,OAAO,EACP,QAAQ,EACR,YAAY,GACb,EAAE,aAAa,+BAqDf"}

package/dist/blocks/BlockRow.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box } from "@mantine/core";
+import { FOCUS_WASH } from "../tokens.js";
+import { AssessmentBlockView } from "./AssessmentBlockView.js";
+import { EvidenceTableView } from "./EvidenceTableView.js";
+import { GeovisionEmbedView } from "./GeovisionEmbedView.js";
+import { InsertRail } from "./InsertRail.js";
+import { NarrativeBlockView } from "./NarrativeBlockView.js";
+import { NativeTableView } from "./NativeTableView.js";
+/**
+ * One row of the typed block stack: the editor-variant insert rail (gutter)
+ * beside the block surface. The gutter renders ONLY on row hover or keyboard
+ * focus within the row (D11 — a 120ms opacity fade, kept reachable by TAB
+ * because the hidden controls stay focusable and reveal on focus). Clicking
+ * the surface publishes "main-editor.focused-block"; the focus wash is an
+ * interaction state, not an outlining box — normal blocks stay plain
+ * document elements.
+ */
+export function BlockRow({ block, locale, editor, showInsert, kinds, kindLabel, canMoveUp, canMoveDown, focused, editable, onFocusBlock, }) {
+    const [hovered, setHovered] = useState(false);
+    const [focusWithin, setFocusWithin] = useState(false);
+    return (_jsxs(Box, { style: { display: "flex", alignItems: "flex-start", width: "100%" }, "data-testid": `main-editor-block-row-${block.id}`, "data-block-row-id": block.id, onMouseEnter: () => {
+            setHovered(true);
+        }, onMouseLeave: () => {
+            setHovered(false);
+        }, onFocus: () => {
+            setFocusWithin(true);
+        }, onBlur: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget)) {
+                setFocusWithin(false);
+            }
+        }, children: [editor ? (_jsx(InsertRail, { blockId: block.id, kinds: kinds, kindLabel: kindLabel, canMoveUp: canMoveUp, canMoveDown: canMoveDown, locale: locale, showInsert: showInsert, revealed: hovered || focusWithin })) : null, _jsx(Box, { w: editor ? 860 : "100%", onClick: () => {
+                    onFocusBlock(block.id);
+                }, style: {
+                    background: focused ? FOCUS_WASH : "transparent",
+                    borderRadius: 6,
+                    cursor: "pointer",
+                    transition: "background .15s ease",
+                }, "data-testid": `main-editor-block-surface-${block.id}`, children: _jsx(BlockView, { block: block, locale: locale, editable: editable }) })] }));
+}
+/** Dispatches one dossier block to its D10 block-surface view. */
+function BlockView({ block, locale, editable, }) {
+    switch (block.kind) {
+        case "narrative":
+            return _jsx(NarrativeBlockView, { block: block, editable: editable });
+        case "assessment":
+            return _jsx(AssessmentBlockView, { block: block, locale: locale, editable: editable });
+        case "geovision-embed":
+            return _jsx(GeovisionEmbedView, { block: block, locale: locale });
+        case "evidence-table":
+            return _jsx(EvidenceTableView, { block: block, locale: locale });
+        case "native-table":
+            return _jsx(NativeTableView, { block: block });
+    }
+}

package/dist/blocks/BlockStack.d.ts

@@ -0,0 +1,27 @@
+import type { MainEditorLocale } from "../locales/index.js";
+import type { MainEditorBlockKind, MainEditorDossier } from "../types.js";
+export interface BlockStackProps {
+    readonly dossier: MainEditorDossier;
+    readonly locale: MainEditorLocale;
+    /** editor — insert + drag controls (default); readonly — published view. */
+    readonly variant: "editor" | "readonly";
+    /** Block kinds the insert menu offers (configuration key enabledBlockKinds). */
+    readonly enabledBlockKinds: readonly MainEditorBlockKind[];
+    /** Configuration key showInsertControls; drag handles follow the editor variant. */
+    readonly showInsertControls: boolean;
+    readonly focusedBlockId: string | null;
+}
+/**
+ * The typed block stack (D3/D10/D11): same-kind blocks added at app runtime
+ * through dossier actions, each preceded by its hover-revealed circular
+ * insert control (the + opens the block-kind menu and emits
+ * "main-editor.insert-block-requested") and ⠿ drag handle (single click opens
+ * the Feishu-style block popover; drag reorders — both emit
+ * "main-editor.reorder-block-requested" / "main-editor.remove-block-requested"
+ * / "main-editor.duplicate-block-requested" dossier actions the host applies,
+ * never composition mutations). Clicking a block publishes
+ * "main-editor.focused-block"; the focus wash is an interaction state, not an
+ * outlining box — normal blocks stay plain document elements.
+ */
+export declare function BlockStack({ dossier, locale, variant, enabledBlockKinds, showInsertControls, focusedBlockId, }: BlockStackProps): import("react").JSX.Element;
+//# sourceMappingURL=BlockStack.d.ts.map

package/dist/blocks/BlockStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockStack.d.ts","sourceRoot":"","sources":["../../src/blocks/BlockStack.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,KAAK,EACV,mBAAmB,EACnB,iBAAiB,EAElB,MAAM,aAAa,CAAC;AAMrB,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,OAAO,EAAE,iBAAiB,CAAC;IACpC,QAAQ,CAAC,MAAM,EAAE,gBAAgB,CAAC;IAClC,4EAA4E;IAC5E,QAAQ,CAAC,OAAO,EAAE,QAAQ,GAAG,UAAU,CAAC;IACxC,gFAAgF;IAChF,QAAQ,CAAC,iBAAiB,EAAE,SAAS,mBAAmB,EAAE,CAAC;IAC3D,oFAAoF;IACpF,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAC;IACrC,QAAQ,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;CACxC;AAUD;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,MAAM,EACN,OAAO,EACP,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,GACf,EAAE,eAAe,+BA+EjB"}

package/dist/blocks/BlockStack.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Stack, Text } from "@mantine/core";
+import { usePrismStateSetter } from "@zephytiju/prism-react";
+import { formatMessage, stringsForLocale } from "../locales/index.js";
+import { BlockRow } from "./BlockRow.js";
+import { InsertMenu } from "./InsertMenu.js";
+import { BORDER, MONO, MUTED } from "../tokens.js";
+const ALL_KINDS = [
+    "narrative",
+    "assessment",
+    "geovision-embed",
+    "evidence-table",
+    "native-table",
+];
+/**
+ * The typed block stack (D3/D10/D11): same-kind blocks added at app runtime
+ * through dossier actions, each preceded by its hover-revealed circular
+ * insert control (the + opens the block-kind menu and emits
+ * "main-editor.insert-block-requested") and ⠿ drag handle (single click opens
+ * the Feishu-style block popover; drag reorders — both emit
+ * "main-editor.reorder-block-requested" / "main-editor.remove-block-requested"
+ * / "main-editor.duplicate-block-requested" dossier actions the host applies,
+ * never composition mutations). Clicking a block publishes
+ * "main-editor.focused-block"; the focus wash is an interaction state, not an
+ * outlining box — normal blocks stay plain document elements.
+ */
+export function BlockStack({ dossier, locale, variant, enabledBlockKinds, showInsertControls, focusedBlockId, }) {
+    const strings = stringsForLocale(locale);
+    const kinds = enabledBlockKinds.length > 0 ? enabledBlockKinds : ALL_KINDS;
+    const publishFocusedBlock = usePrismStateSetter("main-editor.focused-block");
+    const editor = variant === "editor";
+    const showInsert = editor && showInsertControls;
+    const kindLabel = (kind) => kind === "narrative"
+        ? strings.kindNarrative
+        : kind === "assessment"
+            ? strings.kindAssessment
+            : kind === "geovision-embed"
+                ? strings.kindGeovision
+                : kind === "evidence-table"
+                    ? strings.kindEvidenceTable
+                    : strings.kindNativeTable;
+    return (_jsxs(Stack, { gap: 16, miw: 0, "data-testid": "main-editor-block-stack", children: [_jsxs(Stack, { gap: 4, miw: 0, children: [_jsx(Text, { ff: MONO, fz: 9, fw: 500, c: "accent", style: { letterSpacing: "0.05em" }, "data-testid": "main-editor-workspace-code", children: `${strings.docPrefix}  /  ${dossier.docCode}` }), _jsx(Text, { fz: 26, fw: 700, c: "text", style: { lineHeight: 1.25, letterSpacing: "0.01em" }, "data-testid": "main-editor-workspace-title", children: dossier.title }), _jsx(Text, { ff: MONO, fz: 8, style: { color: MUTED, letterSpacing: "0.03em" }, "data-testid": "main-editor-workspace-meta", children: `${dossier.docMeta}  •  ${formatMessage(strings.blocksCount, { count: dossier.blocks.length })}` })] }), _jsxs(Stack, { gap: 20, miw: 0, align: "flex-start", children: [dossier.blocks.map((block, index) => (_jsx(BlockRow, { block: block, locale: locale, editor: editor, showInsert: showInsert, editable: editor, kinds: kinds, kindLabel: kindLabel, canMoveUp: index > 0, canMoveDown: index < dossier.blocks.length - 1, focused: focusedBlockId === block.id, onFocusBlock: (blockId) => {
+                            publishFocusedBlock({ blockId });
+                        } }, block.id))), showInsert ? (_jsx(EndInsertRail, { kinds: kinds, kindLabel: kindLabel, locale: locale, afterBlockId: dossier.blocks.length > 0 ? dossier.blocks[dossier.blocks.length - 1].id : null })) : null] })] }));
+}
+/**
+ * The end-of-stack insert affordance (D11): like every block-row gutter it
+ * renders ONLY on hover (or focus within), fading in over ~120ms.
+ */
+function EndInsertRail({ kinds, kindLabel, locale, afterBlockId, }) {
+    const [revealed, setRevealed] = useState(false);
+    return (_jsx(Box, { w: 72, pl: 0, style: { display: "flex", alignItems: "center", flexShrink: 0 }, "data-testid": "main-editor-end-insert", onMouseEnter: () => {
+            setRevealed(true);
+        }, onMouseLeave: () => {
+            setRevealed(false);
+        }, onFocus: () => {
+            setRevealed(true);
+        }, onBlur: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget)) {
+                setRevealed(false);
+            }
+        }, children: _jsxs(Box, { style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 6,
+                flex: 1,
+                opacity: revealed ? 1 : 0,
+                transition: "opacity .12s ease",
+            }, "data-testid": "main-editor-end-gutter", children: [_jsx(InsertMenu, { buttonTestId: "main-editor-insert-end", kinds: kinds, kindLabel: kindLabel, afterBlockId: afterBlockId, locale: locale, compact: true }), _jsx("span", { style: {
+                        flex: 1,
+                        borderTop: `1px dashed ${BORDER}`,
+                        marginTop: 2,
+                    }, "aria-hidden": "true" })] }) }));
+}

package/dist/blocks/DragMenu.d.ts

@@ -0,0 +1,22 @@
+import type { MainEditorLocale } from "../locales/index.js";
+export interface DragMenuProps {
+    readonly blockId: string;
+    readonly canMoveUp: boolean;
+    readonly canMoveDown: boolean;
+    readonly locale: MainEditorLocale;
+}
+/**
+ * The block gutter's ⠿ handle (D3/D11): the drag-to-reorder affordance AND a
+ * single-click popover trigger. Click vs drag is distinguished by pointer
+ * travel — moving less than DRAG_THRESHOLD_PX before release is a click and
+ * opens the Feishu-style block popover; crossing the threshold starts a live
+ * drag reorder that emits "main-editor.reorder-block-requested" stepwise each
+ * time the pointer crosses onto another block row (the host applies each
+ * action and republishes, so the dragged block follows the pointer). The
+ * popover mutates the block (move up / move down / duplicate / delete — all
+ * IDossierDoc ACTIONS the host applies, never composition mutations) or
+ * anchors a new comment thread to the block via
+ * "main-editor.comment-requested" (D11). It closes on outside click and ESC.
+ */
+export declare function DragMenu({ blockId, canMoveUp, canMoveDown, locale }: DragMenuProps): import("react").JSX.Element;
+//# sourceMappingURL=DragMenu.d.ts.map

package/dist/blocks/DragMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragMenu.d.ts","sourceRoot":"","sources":["../../src/blocks/DragMenu.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAO5D,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,MAAM,EAAE,gBAAgB,CAAC;CACnC;AAKD;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,aAAa,+BAoSlF"}

package/dist/blocks/DragMenu.js

@@ -0,0 +1,219 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Box } from "@mantine/core";
+import { emitPrismEvent } from "@zephytiju/prism-react";
+import { stringsForLocale } from "../locales/index.js";
+import { ACCENT, BORDER, CARD, LINE, MUTED, POPOVER_SHADOW } from "../tokens.js";
+/** Pointer-travel beyond this many px counts as a drag, not a click (D11). */
+const DRAG_THRESHOLD_PX = 4;
+/**
+ * The block gutter's ⠿ handle (D3/D11): the drag-to-reorder affordance AND a
+ * single-click popover trigger. Click vs drag is distinguished by pointer
+ * travel — moving less than DRAG_THRESHOLD_PX before release is a click and
+ * opens the Feishu-style block popover; crossing the threshold starts a live
+ * drag reorder that emits "main-editor.reorder-block-requested" stepwise each
+ * time the pointer crosses onto another block row (the host applies each
+ * action and republishes, so the dragged block follows the pointer). The
+ * popover mutates the block (move up / move down / duplicate / delete — all
+ * IDossierDoc ACTIONS the host applies, never composition mutations) or
+ * anchors a new comment thread to the block via
+ * "main-editor.comment-requested" (D11). It closes on outside click and ESC.
+ */
+export function DragMenu({ blockId, canMoveUp, canMoveDown, locale }) {
+    const [open, setOpen] = useState(false);
+    const [dragging, setDragging] = useState(false);
+    const strings = stringsForLocale(locale);
+    const pointerStart = useRef(null);
+    const didDrag = useRef(false);
+    const draggedRow = useRef(null);
+    const lastRowUnder = useRef(null);
+    const buttonRef = useRef(null);
+    useEffect(() => {
+        if (!dragging) {
+            return;
+        }
+        // Global cursor + selection lock while the block is being dragged.
+        const previousCursor = document.body.style.cursor;
+        const previousSelect = document.body.style.userSelect;
+        document.body.style.cursor = "grabbing";
+        document.body.style.userSelect = "none";
+        return () => {
+            document.body.style.cursor = previousCursor;
+            document.body.style.userSelect = previousSelect;
+        };
+    }, [dragging]);
+    const act = (direction) => {
+        emitPrismEvent("main-editor.reorder-block-requested", { blockId, direction });
+        setOpen(false);
+    };
+    /** Rows of the block stack in DOM order — DOM order is the block order. */
+    const stackRows = () => {
+        const row = draggedRow.current;
+        if (row === null || row.parentElement === null) {
+            return [];
+        }
+        return Array.from(row.parentElement.children).filter((child) => child instanceof HTMLElement && child.hasAttribute("data-block-row-id"));
+    };
+    /** Live drag reorder: emit one single-step move per row boundary crossed. */
+    const dragTo = (clientX, clientY) => {
+        const row = draggedRow.current;
+        if (row === null) {
+            return;
+        }
+        const under = document
+            .elementsFromPoint(clientX, clientY)
+            .map((element) => element instanceof HTMLElement ? element.closest("[data-block-row-id]") : null)
+            .find((candidate) => candidate !== null);
+        if (under === undefined || under === null) {
+            return;
+        }
+        if (under === row) {
+            lastRowUnder.current = null;
+            return;
+        }
+        if (under === lastRowUnder.current) {
+            return;
+        }
+        lastRowUnder.current = under;
+        const rows = stackRows();
+        const from = rows.indexOf(row);
+        const to = rows.indexOf(under);
+        if (from < 0 || to < 0) {
+            return;
+        }
+        emitPrismEvent("main-editor.reorder-block-requested", {
+            blockId,
+            direction: to < from ? "up" : "down",
+        });
+    };
+    return (_jsxs(Box, { style: { position: "relative", flexShrink: 0 }, onKeyDown: (event) => {
+            // ESC closes the popover from the handle OR any item (D11).
+            if (open && event.key === "Escape") {
+                setOpen(false);
+                buttonRef.current?.focus();
+            }
+        }, children: [_jsx("button", { ref: buttonRef, type: "button", style: {
+                    width: 24,
+                    height: 30,
+                    fontSize: 16,
+                    color: dragging ? ACCENT : MUTED,
+                    background: "transparent",
+                    border: "none",
+                    cursor: dragging ? "grabbing" : "grab",
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    lineHeight: 1,
+                    touchAction: "none",
+                }, title: strings.dragMenuTitle, "aria-haspopup": "menu", "aria-expanded": open, "data-testid": `main-editor-drag-${blockId}`, onPointerDown: (event) => {
+                    // Browsers always report the primary button as 0; synthetic events
+                    // without button data (undefined) are treated as primary presses.
+                    if (event.button !== undefined && event.button !== 0) {
+                        return;
+                    }
+                    pointerStart.current = { x: event.clientX, y: event.clientY };
+                    didDrag.current = false;
+                    draggedRow.current = event.currentTarget.closest("[data-block-row-id]");
+                    // Pointer capture routes the whole gesture to the handle; guarded
+                    // because non-browser surfaces (jsdom) lack the API.
+                    if (typeof event.currentTarget.setPointerCapture === "function") {
+                        event.currentTarget.setPointerCapture(event.pointerId);
+                    }
+                }, onPointerMove: (event) => {
+                    const start = pointerStart.current;
+                    const primaryHeld = event.buttons === undefined || (event.buttons & 1) !== 0;
+                    if (start === null || !primaryHeld) {
+                        return;
+                    }
+                    const dx = event.clientX - start.x;
+                    const dy = event.clientY - start.y;
+                    if (!didDrag.current && dx * dx + dy * dy < DRAG_THRESHOLD_PX * DRAG_THRESHOLD_PX) {
+                        return;
+                    }
+                    didDrag.current = true;
+                    setDragging(true);
+                    dragTo(event.clientX, event.clientY);
+                }, onPointerUp: (event) => {
+                    if (pointerStart.current !== null &&
+                        typeof event.currentTarget.hasPointerCapture === "function" &&
+                        event.currentTarget.hasPointerCapture(event.pointerId)) {
+                        event.currentTarget.releasePointerCapture(event.pointerId);
+                    }
+                    pointerStart.current = null;
+                    lastRowUnder.current = null;
+                    draggedRow.current = null;
+                    if (didDrag.current) {
+                        setDragging(false);
+                    }
+                }, onPointerCancel: () => {
+                    pointerStart.current = null;
+                    lastRowUnder.current = null;
+                    draggedRow.current = null;
+                    setDragging(false);
+                }, onClick: () => {
+                    // A completed drag suppresses the trailing click; only a true click
+                    // (pointer travel under the threshold) toggles the popover.
+                    if (didDrag.current) {
+                        didDrag.current = false;
+                        return;
+                    }
+                    setOpen((value) => !value);
+                }, children: "\u283F" }), open ? (_jsxs(_Fragment, { children: [_jsx("div", { style: { position: "fixed", inset: 0, zIndex: 8 }, "data-testid": `main-editor-drag-${blockId}-overlay`, onClick: () => {
+                            setOpen(false);
+                        } }), _jsxs(Box, { component: "ul", w: 240, py: 4, style: {
+                            position: "absolute",
+                            top: 32,
+                            left: 0,
+                            background: CARD,
+                            border: `1px solid ${LINE}`,
+                            borderRadius: 8,
+                            boxShadow: POPOVER_SHADOW,
+                            zIndex: 9,
+                            listStyle: "none",
+                            margin: 0,
+                        }, "data-testid": `main-editor-drag-${blockId}-menu`, role: "menu", "aria-label": strings.dragMenuTitle, children: [_jsx("li", { children: _jsxs("button", { type: "button", role: "menuitem", style: { ...popoverItemStyle, color: ACCENT }, "data-testid": `main-editor-drag-${blockId}-comment`, onClick: () => {
+                                        const request = { blockId };
+                                        emitPrismEvent("main-editor.comment-requested", request);
+                                        setOpen(false);
+                                    }, children: [_jsx("span", { "aria-hidden": "true", style: { fontSize: 12 }, children: "\uD83D\uDCAC" }), strings.commentOnBlock] }) }), _jsx("li", { style: popoverDividerStyle, "aria-hidden": "true" }), _jsx("li", { children: _jsxs("button", { type: "button", role: "menuitem", disabled: !canMoveUp, style: {
+                                        ...popoverItemStyle,
+                                        opacity: canMoveUp ? 1 : 0.4,
+                                        cursor: canMoveUp ? "pointer" : "default",
+                                    }, "data-testid": `main-editor-drag-${blockId}-up`, onClick: () => {
+                                        act("up");
+                                    }, children: [_jsx("span", { "aria-hidden": "true", children: "\u2912" }), strings.moveUp] }) }), _jsx("li", { children: _jsxs("button", { type: "button", role: "menuitem", disabled: !canMoveDown, style: {
+                                        ...popoverItemStyle,
+                                        opacity: canMoveDown ? 1 : 0.4,
+                                        cursor: canMoveDown ? "pointer" : "default",
+                                    }, "data-testid": `main-editor-drag-${blockId}-down`, onClick: () => {
+                                        act("down");
+                                    }, children: [_jsx("span", { "aria-hidden": "true", children: "\u2913" }), strings.moveDown] }) }), _jsx("li", { children: _jsxs("button", { type: "button", role: "menuitem", style: popoverItemStyle, "data-testid": `main-editor-drag-${blockId}-duplicate`, onClick: () => {
+                                        const request = { blockId };
+                                        emitPrismEvent("main-editor.duplicate-block-requested", request);
+                                        setOpen(false);
+                                    }, children: [_jsx("span", { "aria-hidden": "true", children: "\u29C9" }), strings.duplicateBlock] }) }), _jsx("li", { children: _jsxs("button", { type: "button", role: "menuitem", style: { ...popoverItemStyle, color: "var(--mantine-color-threat-filled)" }, "data-testid": `main-editor-drag-${blockId}-remove`, onClick: () => {
+                                        emitPrismEvent("main-editor.remove-block-requested", { blockId });
+                                        setOpen(false);
+                                    }, children: [_jsx("span", { "aria-hidden": "true", children: "\u2715" }), strings.removeBlock] }) })] })] })) : null] }));
+}
+/** One row of the ⠿ block popover (the v10 prototype's .bpitem). */
+const popoverItemStyle = {
+    width: "100%",
+    height: 28,
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    padding: "0 12px",
+    fontSize: 11,
+    color: "var(--mantine-color-text-filled)",
+    background: "transparent",
+    border: "none",
+    cursor: "pointer",
+    textAlign: "left",
+};
+/** The popover's divider rule (the v10 prototype's .bpdiv). */
+const popoverDividerStyle = {
+    height: 1,
+    background: BORDER,
+    margin: "4px 12px",
+};

package/dist/blocks/EmbeddedBlockChrome.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+import type { MainEditorLocale } from "../locales/index.js";
+import type { EvidenceTableBlock, GeovisionEmbedBlock } from "../types.js";
+/** Any embedded (file-preview) block the chrome wraps. */
+export type EmbeddedBlockModel = GeovisionEmbedBlock | EvidenceTableBlock;
+export interface EmbeddedBlockChromeProps {
+    readonly block: EmbeddedBlockModel;
+    /** Locale label for the kind tag (e.g. "GEOVISION 3D"). */
+    readonly kindLabel: string;
+    readonly locale: MainEditorLocale;
+    /** The live preview of the selected saved view (the render slot body). */
+    readonly children: ReactNode;
+}
+/**
+ * Card chrome shared by the embedded file-preview blocks (D10/D11): an
+ * outlined card with a kind tag, the SRC FILE chip naming the previewed
+ * source file, the source-file variant dropdown (SavedViewDropdown), and —
+ * per the D10 addendum — the ↗ open arrow at the block's top-right BESIDE the
+ * dropdown. The embedded body keeps its simple interactive features inline
+ * and is NOT click-to-open: the only navigation out of the block is the
+ * arrow, which emits "main-editor.open-view-requested" {sourceFileRef,
+ * viewId} for the host to open the source view.
+ *
+ * Render handoff (coordination-channel contract, FINALIZED 2026-09-22): the
+ * card body is a render slot stamped with the seven-field handoff
+ * `{sourceFileRef, viewId, mode, interactionMode, locale, width, height}`
+ * (mode "static" in v1, interactionMode "rich"); the slot enforces the
+ * contracted 240px min-height and may be pointer-captured by the hosted
+ * component. The Main Editor keeps its internal item-template renders — real
+ * hosting of the published GeoVision render package happens in the separate
+ * embed-block package, which receives exactly this shape.
+ */
+export declare function EmbeddedBlockChrome({ block, kindLabel, locale, children }: EmbeddedBlockChromeProps): import("react").JSX.Element;
+//# sourceMappingURL=EmbeddedBlockChrome.d.ts.map

package/dist/blocks/EmbeddedBlockChrome.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmbeddedBlockChrome.d.ts","sourceRoot":"","sources":["../../src/blocks/EmbeddedBlockChrome.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,KAAK,EAEV,kBAAkB,EAClB,mBAAmB,EAGpB,MAAM,aAAa,CAAC;AAarB,0DAA0D;AAC1D,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;AAE1E,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,KAAK,EAAE,kBAAkB,CAAC;IACnC,2DAA2D;IAC3D,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,MAAM,EAAE,gBAAgB,CAAC;IAClC,0EAA0E;IAC1E,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,wBAAwB,+BA4GnG"}

package/dist/blocks/EmbeddedBlockChrome.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Group } from "@mantine/core";
+import { emitPrismEvent, usePrismStateValue } from "@zephytiju/prism-react";
+import { formatMessage, stringsForLocale } from "../locales/index.js";
+import { ACCENT, BORDER, CARD, CARD_DARK, EMBED_SLOT_MIN_HEIGHT, EMBED_SLOT_WIDTH, MONO, MUTED, } from "../tokens.js";
+import { SavedViewDropdown } from "./SavedViewDropdown.js";
+/**
+ * Card chrome shared by the embedded file-preview blocks (D10/D11): an
+ * outlined card with a kind tag, the SRC FILE chip naming the previewed
+ * source file, the source-file variant dropdown (SavedViewDropdown), and —
+ * per the D10 addendum — the ↗ open arrow at the block's top-right BESIDE the
+ * dropdown. The embedded body keeps its simple interactive features inline
+ * and is NOT click-to-open: the only navigation out of the block is the
+ * arrow, which emits "main-editor.open-view-requested" {sourceFileRef,
+ * viewId} for the host to open the source view.
+ *
+ * Render handoff (coordination-channel contract, FINALIZED 2026-09-22): the
+ * card body is a render slot stamped with the seven-field handoff
+ * `{sourceFileRef, viewId, mode, interactionMode, locale, width, height}`
+ * (mode "static" in v1, interactionMode "rich"); the slot enforces the
+ * contracted 240px min-height and may be pointer-captured by the hosted
+ * component. The Main Editor keeps its internal item-template renders — real
+ * hosting of the published GeoVision render package happens in the separate
+ * embed-block package, which receives exactly this shape.
+ */
+export function EmbeddedBlockChrome({ block, kindLabel, locale, children }) {
+    const strings = stringsForLocale(locale);
+    const selectedView = usePrismStateValue("main-editor.selected-view");
+    const viewId = selectedView?.blockId === block.id ? selectedView.viewId : block.sourceFile.defaultViewId;
+    const handoff = {
+        sourceFileRef: block.sourceFile.id,
+        viewId,
+        mode: "static",
+        interactionMode: "rich",
+        locale,
+        width: EMBED_SLOT_WIDTH,
+        height: EMBED_SLOT_MIN_HEIGHT,
+    };
+    return (_jsxs(Box, { p: 12, style: { background: CARD_DARK, border: `1px solid ${BORDER}`, borderRadius: 6 }, "data-testid": `main-editor-block-${block.id}`, children: [_jsxs(Group, { justify: "space-between", align: "flex-start", gap: 10, wrap: "nowrap", children: [_jsxs(Group, { gap: 10, align: "center", wrap: "nowrap", miw: 0, children: [_jsx(Box, { h: 22, px: 10, style: {
+                                    borderRadius: 11,
+                                    background: CARD,
+                                    border: `1px solid ${ACCENT}`,
+                                    fontFamily: MONO,
+                                    fontSize: 7,
+                                    fontWeight: 500,
+                                    color: ACCENT,
+                                    display: "inline-flex",
+                                    alignItems: "center",
+                                    letterSpacing: "0.03em",
+                                    flexShrink: 0,
+                                }, "data-testid": `main-editor-kind-tag-${block.id}`, children: kindLabel }), _jsx("span", { style: {
+                                    fontFamily: MONO,
+                                    fontSize: 7,
+                                    color: MUTED,
+                                    letterSpacing: "0.05em",
+                                    whiteSpace: "nowrap",
+                                }, "data-testid": `main-editor-src-file-${block.id}`, children: formatMessage(strings.srcFile, { file: block.sourceFile.name }) })] }), _jsxs(Group, { gap: 6, align: "center", wrap: "nowrap", children: [_jsx(SavedViewDropdown, { blockId: block.id, sourceFile: block.sourceFile, locale: locale }), _jsx("button", { type: "button", style: {
+                                    width: 24,
+                                    height: 22,
+                                    background: CARD,
+                                    border: `1px solid ${BORDER}`,
+                                    borderRadius: 5,
+                                    fontFamily: MONO,
+                                    fontSize: 11,
+                                    fontWeight: 500,
+                                    color: ACCENT,
+                                    display: "inline-flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    cursor: "pointer",
+                                    flexShrink: 0,
+                                    lineHeight: 1,
+                                }, title: strings.openSourceView, "aria-label": strings.openSourceView, "data-testid": `main-editor-open-${block.id}`, onClick: (event) => {
+                                    event.stopPropagation();
+                                    const request = {
+                                        sourceFileRef: block.sourceFile.id,
+                                        viewId,
+                                    };
+                                    emitPrismEvent("main-editor.open-view-requested", request);
+                                }, children: "\u2197" })] })] }), _jsx(Box, { mt: 8, style: { minHeight: EMBED_SLOT_MIN_HEIGHT }, "data-embed-handoff": JSON.stringify(handoff), "data-testid": `main-editor-embed-slot-${block.id}`, children: children })] }));
+}