@zephytiju/prism-main-editor 0.1.0

package/README.md

@@ -0,0 +1,252 @@
+# PrismMainEditorMicroUI
+
+Platform Prism main-editor micro-UI. Component id: `main-editor`.
+Published to npm as [`@zephytiju/prism-main-editor`](https://www.npmjs.com/package/@zephytiju/prism-main-editor).
+
+The dossier editor axiom component (design decision D9): the single editor component owning the
+title bar — breadcrumb + autosave stamp, `DRAFT / V07` state chip, `COMMENTS` toggle (active state
+amber) driving the in-editor comments pane, `SHARE`, `•••` overflow — absorbed from the retired
+Title Bar component, plus the typed block stack with `+` / drag insert rows and the expandable
+block-anchored comments pane. Block surfaces follow the D10 taxonomy: narrative,
+analyst-judgment, and dossier-native table blocks render as plain document elements — no outlining
+box, no card chrome, no kind pill; the analyst-judgment highlight is an accent bar + tint only;
+source links are ordinary inline hyperlinks embedded inside paragraph text (accent-colored,
+underlined, preceded by the ↗ glyph) — never standalone link blocks; native tables render with row
+rules like Feishu native tables. Only file-preview blocks are embedded, and they HOST the REAL
+published micro-UI packages — no synthetic editor-side previews exist:
+
+- the **geovision-embed** block hosts [`@zephytiju/prism-geovision-embed-block`](https://www.npmjs.com/package/@zephytiju/prism-geovision-embed-block)
+  (>= 0.2.0), which renders the full D10 chrome (kind tag `GEOVISION`, `SRC FILE · {file}` chip,
+  `VIEW ▾` variant dropdown fed by the render package's `describeViews(sourceFileRef)` through the
+  host Lattice transport, ↗ open arrow) and itself hosts the published render dispatcher
+  (`@zephytiju/prism-geovision-embed` 0.2.0) in its body slot, rendering exactly the ONE variant
+  the current viewId (`${fileRef}#${previewKind}`) selects;
+- the **evidence-table** block hosts [`@zephytiju/prism-evidence-table`](https://www.npmjs.com/package/@zephytiju/prism-evidence-table)
+  (>= 0.1.0), which renders its own card chrome and the previewed saved view's
+  `IEvidenceSource`-shaped rows (source / observation / confidence / audit locator).
+
+All data arrives IDossierDoc-shaped over the component channels (or explicit props); add, reorder,
+and remove are dossier ACTIONS the editor emits as events for the host to apply. Composed
+applications (for example Guanlan) consume it as-is; the component is platform-owned.
+
+## Configuration keys
+
+| Prop | Meaning |
+| --- | --- |
+| `locale` | UI locale for the component-fixed strings: `"en" \| "zh-CN"` (default `"en"`) — see [i18n](#internationalization-i18n) |
+| `variant` | `"editor"` (default; insert + drag controls) or `"readonly"` (published view — controls hidden) |
+| `enabledBlockKinds` | Block kinds the insert menu offers (default: all five — `narrative`, `assessment`, `geovision-embed`, `evidence-table`, `native-table`) |
+| `showInsertControls` | Whether the `+` insert controls render in the editor variant (default `true`; drag handles follow `variant`) |
+| `titleFormat` | `(dossier) => string` workspace title line (default: the dossier `title`) |
+| `titleBarActions` | Title-bar actions to enable: `{ comments?, share?, overflow? }` (all default `true`; the title bar is component configuration — Prism has no composed title node) |
+| `dossier` | Explicit `MainEditorDossier` override; defaults to the `main-editor.dossier` channel |
+| `commentThreads` | Explicit threads override; defaults to the `main-editor.comment-threads` channel |
+| `height` | Editor surface height in px (default `900`) |
+
+## Channel contract
+
+| Direction | Kind | Id | Payload |
+| --- | --- | --- | --- |
+| consumes | state | `main-editor.dossier` | `MainEditorDossier \| null` — IDossierDoc-shaped (`id`, `title`, `blocks` of `DossierDocBlock`) widened with breadcrumb, doc code, autosave stamp, draft state, version, doc meta, and per-kind block content |
+| consumes | state | `main-editor.comment-threads` | `readonly MainEditorCommentThread[] \| null` — ICommentThread-shaped comments widened with `blockId` anchoring and open/done status |
+| consumes | state | `main-editor.comments-open` | `boolean` — the pane state channel (D6); `null` defaults to the prototype's open pane |
+| consumes | state | `main-editor.focused-block` | `{ blockId } \| null` — derived for the focus wash |
+| publishes | state | `main-editor.comments-open` | `boolean` — the title-bar COMMENTS toggle (setter-only publish; amber-active when open) |
+| publishes | state | `main-editor.focused-block` | `{ blockId }` — clicking a block or a thread card (block review mode) |
+| emits | event | `main-editor.insert-block-requested` | `{ afterBlockId: string \| null, kind }` — the `+` block-kind menu; a dossier action (IDossierDoc) the host applies |
+| emits | event | `main-editor.reorder-block-requested` | `{ blockId, direction: "up" \| "down" }` — the ⠿ drag menu; a dossier action |
+| emits | event | `main-editor.remove-block-requested` | `{ blockId }` — the ⠿ drag menu; a dossier action |
+| emits | event | `main-editor.open-view-requested` | `{ sourceFileRef, viewId }` — the ↗ open intents of the HOSTED embedded blocks, re-emitted so hosts keep ONE open-intent contract for every embedded block |
+| emits | event | `main-editor.share-requested` | `{ docId }` — the SHARE sharing intent (never grants authorization; the host performs the share and records the IAuditChain entry) |
+
+The variant state of the embedded blocks is owned by the HOSTED components through their own
+file-level channels — `geovision-embed.selected-view` (`{ sourceFileRef, viewId }`, view ids
+`${fileRef}#${previewKind}`) and `evidence-table.selected-view` (`{ sourceFileRef, viewId }`) —
+so every embed of the same source file re-previews the picked variant (D10). The editor's former
+per-block `main-editor.selected-view` channel was REMOVED in the real-components migration: it
+conflicted with the components' file-level semantics; the editor no longer reimplements embedded
+view selection at all.
+
+Channel ids are string literals at every call-site so the build-time channel-graph scanner can
+derive the graph. Channel reads use `usePrismStateValue`; every publication is setter-only (or an
+event), so publishers never re-render from their own writes. Block focus follows the EntityCard
+pattern — each item owns its binding, publishes on change, and derives its current value from the
+same channel, so every host bound to the channel stays in sync (D6 state passing).
+
+## Audit rule
+
+Routine dossier reads and interactions are NOT audit-worthy: this component emits NO audit event
+for them. The only audit-adjacent emission is the `main-editor.share-requested` intent — sharing is
+the audit-worthy action, and the recording host (not this component) appends the IAuditChain entry.
+
+## Internationalization (i18n)
+
+The component ships `en` and `zh-CN` locale bundles — `src/locales/en.json` / `src/locales/zh-CN.json` —
+and every component-fixed UI string is resolved from them (the `DOSSIER` doc prefix, `AUTOSAVED {time}`,
+the `COMMENTS · {count}` toggle and `{count} OPEN COMMENTS` chip lines, SHARE, the `INSERT BLOCK` /
+`BLOCK ACTIONS` menus, every block-kind label, the comments pane copy, and the
+empty state). The embedded-block chrome copy (kind tags, `SRC FILE · {file}` chips,
+`VIEW · {variant}` pills, `SAVED VIEWS · {file}` menus, ↗ arrow titles) lives in the HOSTED
+packages' own locale bundles and localizes through the `locale` prop the editor forwards. The
+component renders no hardcoded copy.
+
+```json
+{
+  "main-editor": {
+    "docPrefix": "DOSSIER",
+    "autosavedAt": "AUTOSAVED {time}",
+    "commentsButtonWithCount": "COMMENTS · {count}",
+    "openCommentsCount": "{count} OPEN COMMENTS",
+    "share": "SHARE",
+    "kindAssessment": "ANALYST JUDGMENT",
+    "openThreads": "{count} OPEN",
+    "threadBlockMeta": "BLOCK {block} • {status}"
+  }
+}
+```
+
+- `locale?: "en" | "zh-CN"` prop (default `"en"`) selects the string table per instance.
+- `{placeholder}` templates (`{count}`, `{time}`, `{file}`, `{variant}`, `{block}`, `{status}`) use
+  plain substitution via `formatMessage`, exported from the package entry.
+- **Composition-authored strings are localized by the composer; component-fixed strings live in the
+  locale JSONs.** Breadcrumb segments, the doc meta line, block content, saved-view labels, and
+  thread titles are data (IDossierDoc/ICommentThread-shaped), so a localized dossier supplies its
+  own translated content per locale.
+- Locale bundles are namespaced under the component id (`"main-editor"`) so a composer can
+  deep-merge every component's bundle into ONE UI language bundle without collisions:
+
+```ts
+import { locales as mainEditorLocales } from "@zephytiju/prism-main-editor";
+// mainEditorLocales["zh-CN"] -> { "main-editor": { … } }
+const uiBundle = deepMerge(hostStrings, mainEditorLocales["zh-CN"]);
+```
+
+The parsed bundles are exported from the package entry (`locales`, `en`, `zhCN`,
+`stringsForLocale`), and the raw JSONs are also served by the `./locales/*` exports subpath
+(e.g. `@zephytiju/prism-main-editor/locales/zh-CN.json`); `files` ships both `dist` and `locales`.
+
+## Theme
+
+No palette is hardcoded. Every color resolves to SEMANTIC theme tokens (`ok`, `accent`, `threat`,
+`warn`, `signal`, `card`, `card-dark`, `input`, `border`, `line`, `text`, `muted`, `deep`, `panel`)
+consumed as CSS variables, plus `--mantine-font-family-monospace` for the mono typography — the
+palette is supplied entirely by the host's `MantineProvider`. The prototype's mint/blue/amber/red/
+purple accents map onto `ok` / `accent` / `warn` / `threat` / `signal` respectively; translucent
+surfaces (the amber highlight tint, the comments-pane backdrop, the focus wash) derive from the
+same tokens through `color-mix`. The local demo ships TWO themes, both defined in `src/demo.tsx`:
+`geovisionTheme` (dark), mapping each semantic token onto the exact `:root` variables of the v9
+design prototype, and the contrasting `latticeLightTheme` (light), mapping the SAME semantic token
+keys onto a different palette — the component is skinned purely through the surrounding
+`MantineProvider`.
+
+## Source layout
+
+`src/` is strictly two parts:
+
+- Component source (what the package compiles): `MainEditor.tsx` (orchestrator — channel wiring,
+  empty state, layout), `TitleBar.tsx` (the absorbed title bar, D9), `CommentsPane.tsx` (the
+  expandable in-editor pane), `blocks/` (`BlockStack.tsx` — workspace header, insert rows, +/⠿
+  menus, per-kind dispatch; `NarrativeBlockView.tsx`, `AssessmentBlockView.tsx`,
+  `GeovisionEmbedView.tsx` — HOSTS the real `@zephytiju/prism-geovision-embed-block`;
+  `EvidenceTableView.tsx` — HOSTS the real `@zephytiju/prism-evidence-table`;
+  `NativeTableView.tsx` — the D10 block surfaces; `InsertMenu.tsx`, `InsertRail.tsx`,
+  `DragMenu.tsx`, `SelectionToolbar.tsx`, `menuStyles.ts` — the D11 affordances), `types.ts` (the
+  IDossierDoc/ICommentThread-shaped data model + event payloads), `tokens.ts`
+  (semantic-token shorthands), `index.ts` (public entry), and `src/locales/` (`en.json`,
+  `zh-CN.json`, `index.ts` — the i18n string bundles, their resolver, and the `{placeholder}`
+  interpolation helper). The embedded item templates are the hosting seams for the real published
+  packages — the editor renders NO synthetic embed previews.
+- Demo: exactly ONE file, `src/demo.tsx` — the two host themes (GeoVision v9 + Lattice Light), all
+  demo test data (the Redwater mock dossier + threads mirroring the v9 prototype; the demo
+  geovision-view file built through the bundle's own `saveGeovisionView`; the evidence saved views
+  with their rows), the channel seeding (including the two file-level selected-view channels the
+  hosted components own), the mock Lattice action executor serving the demo file (the
+  standards-compliant host pattern — the hosted block's `describeViews()` and the REAL render
+  dispatcher run end to end against it), the mock dossier-action applier (insert/reorder/remove/
+  duplicate — the host side of the action contract), the channel monitors + action log, and the
+  demo page rendering TWO `MainEditor` instances behind a global EN | 中文 language switcher (plus
+  per-instance switches).
+
+The npm package ships `dist` (compiled component + type declarations + locale JSONs) and the
+top-level `locales/` directory (the raw JSON bundles, served by the `./locales/*` exports
+subpath); no demo code is published. `scripts/copy-locales.mjs` copies the JSON bundles into both
+locations during `npm run build`.
+
+## Dependencies and build order
+
+The two embedded-block packages are **peerDependencies AND devDependencies**:
+
+```json
+"peerDependencies": {
+  "@zephytiju/prism-evidence-table": ">=0.1.0",
+  "@zephytiju/prism-geovision-embed-block": ">=0.2.0",
+  "@zephytiju/prism-react": ">=0.2.0", …
+}
+```
+
+While both consumed packages are UNPUBLISHED local builds, the devDependencies resolve them as
+`file:` links into the sibling checkouts — so the required BUILD ORDER is:
+
+1. `npm run build` in `../PrismGeovisionEmbedBlockMicroUI` (ships `dist` + `locales`),
+2. `npm run build` in `../PrismEvidenceTableMicroUI` (ships `dist` + `locales`),
+3. only then `npm install` / `npm run build` / `npm test` here — the `file:` links and the
+   `resolve.dedupe` in `vite.config.ts` / `vitest.config.ts` (react, react-dom, @mantine/core,
+   @zephytiju/prism-react, @zephytiju/prism-geovision-embed) keep the linked packages sharing ONE
+   prism-react channel store / action executor and ONE React instance with the editor.
+
+The devDependencies additionally install the hosted render stack's registry peers
+(`@zephytiju/prism-geovision-embed` 0.2.0 with its cesium/resium deps, `@zephytiju/prism-relation-fluxboard`,
+`@zephytiju/prism-stats-panel`, `@zephytiju/prism-timeline-board`, `@xyflow/react`,
+`@zephytiju/lattice-common-bundle`) so the demo and tests exercise the REAL dispatcher end to
+end. `@zephytiju/prism-react` is pinned `>=0.2.0` because the hosted stack resolves the source
+file through the 0.2.0 transport seam (`setPrismActionExecutor` / `useLatticeTransport`).
+
+## Local development
+
+```sh
+npm install
+npm run typecheck
+npm test
+npm run dev
+npm run shot-demo
+```
+
+`npm install` pulls the platform peers (`@zephytiju/prism-react`,
+`@zephytiju/lattice-common-interfaces`) from the npm registry, along with the host-side peer
+dependencies (`react`, `react-dom`, `@mantine/core`) and — through the `file:` links — the two
+locally built embedded-block packages (see the build order above). When consuming the published
+package, install it directly (`npm install @zephytiju/prism-main-editor`) and provide the peer
+dependencies (including the two embedded-block packages once published) in the host application.
+
+The demo (`npm run dev`, entry `src/demo.tsx`) plays the host: at module scope it installs the
+mock Lattice action executor serving the demo geovision-view file, then seeds the Redwater mock
+dossier, its threads, and the two file-level selected-view channels onto the GLOBAL channels, and
+renders TWO `MainEditor` instances, each inside its own MantineProvider with a different theme
+(GeoVision v9 dark, Lattice Light). The geovision-embed block row hosts the REAL
+`@zephytiju/prism-geovision-embed-block`: its VIEW ▾ list comes from the REAL `describeViews()`
+call over the demo executor (one saved view per previewKind — `${fileRef}#map / #relational /
+#timeline / #stats`), and its body renders the REAL published dispatcher — exactly the ONE
+variant the current viewId selects (the demo opts the map variant into `engine="svg"` for
+deterministic headless capture). The evidence-table block row hosts the REAL
+`@zephytiju/prism-evidence-table` with the demo saved views' rows. The COMMENTS toggle drives
+the pane through the shared `main-editor.comments-open` channel, so toggling it in EITHER
+instance opens the pane in BOTH. The `+` insert control opens the block-kind menu and emits
+`insert-block-requested`; the ⠿ drag menu emits reorder/remove — the mock host applies these
+dossier actions against its projection and republishes, exactly how a real host routes them
+through IDossierDoc actions. The hosted blocks' ↗ arrows emit their open intents, which the
+editor re-emits as `main-editor.open-view-requested`. The channel monitors and action log below
+the instances show all of this live. `npm run shot-demo` boots the vite dev server, drives the
+demo in headless Chrome, and captures the evidence states to `/tmp/guanlan-review/`:
+`demo-main-editor-real-embeds-dark-en-v4.png`,
+`demo-main-editor-real-embeds-variant-switch-v4.png`,
+`demo-main-editor-real-embeds-light-zh-cn-v4.png`, and
+`demo-main-editor-full-page.png`.
+
+## Design record
+
+https://qcnwge0wy4s0.feishu.cn/wiki/B87YwS2PriaGvlkAcOtctKm8nsd — decisions D1–D10 (esp. D3
+runtime blocks, D5 component tiers, D6 state passing, D8 channel contracts, D9 title-bar
+absorption, D10 block surface taxonomy). Component doc:
+https://qcnwge0wy4s0.feishu.cn/wiki/UqqYwbzkViRiprkNpkRcKt3tnFf. Visual reference: the
+authoritative `dossier-editor-standalone-v9.html` prototype attached to the design doc
+(`.ed-head` / `.nblock` / `.hl` / `.block` / `.vsel` / `.cpane`).

package/dist/CommentsPane.d.ts

@@ -0,0 +1,32 @@
+import type { MainEditorLocale } from "./locales/index.js";
+import type { MainEditorCommentThread } from "./types.js";
+export interface CommentsPaneProps {
+    readonly threads: readonly MainEditorCommentThread[];
+    readonly open: boolean;
+    readonly locale: MainEditorLocale;
+    /** Ordered block ids of the rendered stack — threads anchor by "BLOCK {ordinal}". */
+    readonly blockOrder: readonly string[];
+    /**
+     * D11 alignment: content-space top (px) of each rendered block row, measured
+     * by the editor — every thread card positions at its anchor block's top
+     * (minus the workspace scroll offset the rail mirrors).
+     */
+    readonly blockAnchors: Readonly<Record<string, number>>;
+    /** Current workspace scroll offset the rail mirrors (px). */
+    readonly scrollTop: number;
+}
+/**
+ * The block-anchored comments rail — expandable INSIDE the editor body (D6)
+ * and ALIGNED to the anchored blocks (D11): each card sits at the vertical
+ * position of its anchor block (the workspace's block-row tops minus the
+ * scroll offset the rail mirrors), and multiple threads on one block stack
+ * directly below each other — Feishu-style. The title-bar COMMENTS toggle
+ * drives it through the shared "main-editor.comments-open" channel state
+ * (D6), not a direct reference, so any peer bound to the same channel stays
+ * in sync. Closed, the pane slides out with the prototype's translateX(100%)
+ * transition; open-thread cards render amber; clicking a thread publishes
+ * "main-editor.focused-block". Thread entries are ICommentThread-shaped
+ * bounded comments.
+ */
+export declare function CommentsPane({ threads, open, locale, blockOrder, blockAnchors, scrollTop, }: CommentsPaneProps): import("react").JSX.Element;
+//# sourceMappingURL=CommentsPane.d.ts.map

package/dist/CommentsPane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentsPane.d.ts","sourceRoot":"","sources":["../src/CommentsPane.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,KAAK,EAAE,uBAAuB,EAA0B,MAAM,YAAY,CAAC;AAGlF,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,OAAO,EAAE,SAAS,uBAAuB,EAAE,CAAC;IACrD,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,gBAAgB,CAAC;IAClC,qFAAqF;IACrF,QAAQ,CAAC,UAAU,EAAE,SAAS,MAAM,EAAE,CAAC;IACvC;;;;OAIG;IACH,QAAQ,CAAC,YAAY,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACxD,6DAA6D;IAC7D,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;CAC5B;AAUD;;;;;;;;;;;;GAYG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,IAAI,EACJ,MAAM,EACN,UAAU,EACV,YAAY,EACZ,SAAS,GACV,EAAE,iBAAiB,+BAsFnB"}

package/dist/CommentsPane.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Group, Stack, Text } from "@mantine/core";
+import { usePrismStateSetter } from "@zephytiju/prism-react";
+import { formatMessage, stringsForLocale } from "./locales/index.js";
+import { BORDER, CARD, DEEP, MONO, MUTED, PANE_BACKDROP, WARN, pad2 } from "./tokens.js";
+/** Thread-card geometry (px): fixed-height cards with a fixed stacking gap. */
+const CARD_HEIGHT = 56;
+const CARD_GAP = 8;
+/** The pane-header height (px) the anchor tops compensate for. */
+const HEADER_HEIGHT = 56;
+/** Cards never slide under the pane header. */
+const CARD_MIN_TOP = 8;
+/**
+ * The block-anchored comments rail — expandable INSIDE the editor body (D6)
+ * and ALIGNED to the anchored blocks (D11): each card sits at the vertical
+ * position of its anchor block (the workspace's block-row tops minus the
+ * scroll offset the rail mirrors), and multiple threads on one block stack
+ * directly below each other — Feishu-style. The title-bar COMMENTS toggle
+ * drives it through the shared "main-editor.comments-open" channel state
+ * (D6), not a direct reference, so any peer bound to the same channel stays
+ * in sync. Closed, the pane slides out with the prototype's translateX(100%)
+ * transition; open-thread cards render amber; clicking a thread publishes
+ * "main-editor.focused-block". Thread entries are ICommentThread-shaped
+ * bounded comments.
+ */
+export function CommentsPane({ threads, open, locale, blockOrder, blockAnchors, scrollTop, }) {
+    const strings = stringsForLocale(locale);
+    const publishFocusedBlock = usePrismStateSetter("main-editor.focused-block");
+    const openCount = threads.filter((thread) => thread.status === "open").length;
+    // Stack index per thread: its ordinal among the threads sharing the block.
+    const seen = new Map();
+    const stackIndex = threads.map((thread) => {
+        const index = seen.get(thread.blockId) ?? 0;
+        seen.set(thread.blockId, index + 1);
+        return index;
+    });
+    return (_jsxs(Box, { w: 340, style: {
+            position: "absolute",
+            right: 0,
+            top: 0,
+            bottom: 0,
+            background: PANE_BACKDROP,
+            borderLeft: `1px solid var(--mantine-color-line-filled)`,
+            transform: open ? "translateX(0)" : "translateX(100%)",
+            transition: "transform .25s ease",
+            zIndex: 5,
+            ...(open ? {} : { pointerEvents: "none" }),
+        }, "data-testid": "main-editor-comments-pane", "aria-hidden": !open, children: [_jsxs(Group, { justify: "space-between", align: "center", px: 14, h: 56, wrap: "nowrap", style: { background: CARD, borderBottom: `1px solid ${BORDER}` }, "data-testid": "main-editor-comments-head", children: [_jsxs(Stack, { gap: 3, children: [_jsx(Text, { fz: 12, fw: 600, c: "text", children: strings.commentsTitle }), _jsx(Text, { ff: MONO, fz: 7, style: { color: MUTED, letterSpacing: "0.05em" }, children: strings.commentsSubtitle })] }), _jsx(Text, { ff: MONO, fz: 7, fw: 500, c: "warn", "data-testid": "main-editor-comments-open-count", children: formatMessage(strings.openThreads, { count: openCount }) })] }), _jsx(Box, { style: { position: "relative", height: "calc(100% - 56px)", overflow: "hidden" }, children: threads.map((thread, index) => {
+                    const anchorTop = blockAnchors[thread.blockId] ?? 0;
+                    // The track begins below the pane header; compensating HEADER_HEIGHT
+                    // puts the card at the anchor block's own viewport position.
+                    const top = Math.max(anchorTop - HEADER_HEIGHT - scrollTop + stackIndex[index] * (CARD_HEIGHT + CARD_GAP), CARD_MIN_TOP);
+                    return (_jsx(Box, { style: {
+                            position: "absolute",
+                            top,
+                            left: 14,
+                            right: 14,
+                            height: CARD_HEIGHT,
+                            transition: "top .12s ease",
+                        }, "data-testid": `main-editor-thread-${thread.id}`, "data-anchor-block": thread.blockId, "data-stack-index": stackIndex[index], onClick: () => {
+                            publishFocusedBlock({ blockId: thread.blockId });
+                        }, children: _jsx(ThreadCard, { thread: thread, locale: locale, ordinal: blockOrder.indexOf(thread.blockId) + 1 }) }, thread.id));
+                }) })] }));
+}
+function ThreadCard({ thread, locale, ordinal, }) {
+    const strings = stringsForLocale(locale);
+    const status = thread.status === "open" ? strings.statusOpen : strings.statusDone;
+    return (_jsxs(Group, { gap: 12, align: "center", wrap: "nowrap", px: 10, h: CARD_HEIGHT, style: {
+            background: CARD,
+            border: `1px solid ${thread.status === "open" ? WARN : BORDER}`,
+            borderRadius: 6,
+            cursor: "pointer",
+        }, children: [_jsx(Box, { w: 28, h: 28, style: {
+                    borderRadius: 14,
+                    background: thread.status === "open" ? WARN : BORDER,
+                    color: DEEP,
+                    fontFamily: MONO,
+                    fontSize: 9,
+                    fontWeight: 500,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    flexShrink: 0,
+                }, children: String(thread.comments.length).padStart(2, "0") }), _jsxs(Stack, { gap: 2, miw: 0, children: [_jsx(Text, { fz: 10, fw: 500, c: "text", style: { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: thread.quote === undefined ? thread.title : `“${thread.quote}”` }), _jsx(Text, { ff: MONO, fz: 7, style: { color: MUTED, letterSpacing: "0.02em" }, children: formatMessage(strings.threadBlockMeta, { block: pad2(ordinal), status }) })] })] }));
+}

package/dist/MainEditor.d.ts

@@ -0,0 +1,59 @@
+import type { MainEditorLocale } from "./locales/index.js";
+import type { MainEditorBlockKind, MainEditorCommentThread, MainEditorDossier } from "./types.js";
+export interface MainEditorProps {
+    /** Dossier projection override; defaults to the "main-editor.dossier" channel. */
+    readonly dossier?: MainEditorDossier;
+    /** Comment threads override; defaults to the "main-editor.comment-threads" channel. */
+    readonly commentThreads?: readonly MainEditorCommentThread[];
+    /** UI locale for the component-fixed strings (default "en"). */
+    readonly locale?: MainEditorLocale;
+    /** editor — insert + drag controls (default); readonly — published view. */
+    readonly variant?: "editor" | "readonly";
+    /** Block kinds the insert menu offers (default: all five D10 kinds). */
+    readonly enabledBlockKinds?: readonly MainEditorBlockKind[];
+    /** Whether insert controls render in the editor variant (default true). */
+    readonly showInsertControls?: boolean;
+    /** Workspace title line (defaults to the dossier title; titleFormat config key). */
+    readonly titleFormat?: (dossier: MainEditorDossier) => string;
+    /** Title-bar actions to enable (all default true; titleBarActions config key). */
+    readonly titleBarActions?: Readonly<{
+        comments?: boolean;
+        share?: boolean;
+        overflow?: boolean;
+    }>;
+    /** Editor surface height (default 900). */
+    readonly height?: number;
+}
+/**
+ * Platform Prism main-editor micro-UI (component id "main-editor") — the
+ * single dossier editor axiom component (D9): the title bar (breadcrumb +
+ * autosave stamp, DRAFT/V07 state chip, amber-active COMMENTS toggle, SHARE
+ * sharing intent, overflow) absorbed from the retired Title Bar component,
+ * the typed block stack with hover-revealed +/⠿ insert gutters (D11), and
+ * the block-ALIGNED comments rail (D11 — each card sits at its anchor
+ * block's vertical position and follows the workspace scroll), all rendered
+ * from IDossierDoc-shaped data on the component channels.
+ *
+ * Channel discipline: the dossier + threads arrive on
+ * "main-editor.dossier" / "main-editor.comment-threads"; the COMMENTS toggle
+ * drives the in-editor pane through the "main-editor.comments-open" channel
+ * (D6 state passing); block focus publishes through "main-editor.focused-
+ * block"; the HOSTED embedded blocks own their variant state through their
+ * component channels ("geovision-embed.selected-view" /
+ * "evidence-table.selected-view") and their ↗ open intents are re-emitted as
+ * "main-editor.open-view-requested" events; add/reorder/remove/duplicate are
+ * dossier ACTIONS emitted as events for the host to apply (D3 — blocks are
+ * added at app runtime through dossier actions, never composition mutation);
+ * comment anchors arrive as "main-editor.comment-requested" events the host
+ * turns into threads. No Lattice calls are made from the editor's own render
+ * path (the hosted geovision block's describeViews/render resolve through the
+ * HOST-supplied transport), so no audit events exist for routine reads; the
+ * only audit-adjacent emission is the SHARE intent, which the host (not this
+ * component) records on IAuditChain.
+ *
+ * No palette is hardcoded: every color resolves to semantic theme tokens
+ * (ok / threat / warn / signal / accent / card / card-dark / input / border /
+ * line / text / muted / deep / panel) supplied by the host's MantineProvider.
+ */
+export declare function MainEditor({ dossier: dossierProp, commentThreads: threadsProp, locale, variant, enabledBlockKinds, showInsertControls, titleFormat, titleBarActions, height, }: MainEditorProps): import("react").JSX.Element;
+//# sourceMappingURL=MainEditor.d.ts.map

package/dist/MainEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MainEditor.d.ts","sourceRoot":"","sources":["../src/MainEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAK3D,OAAO,KAAK,EACV,mBAAmB,EACnB,uBAAuB,EACvB,iBAAiB,EAElB,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,eAAe;IAC9B,kFAAkF;IAClF,QAAQ,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IACrC,uFAAuF;IACvF,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,uBAAuB,EAAE,CAAC;IAC7D,gEAAgE;IAChE,QAAQ,CAAC,MAAM,CAAC,EAAE,gBAAgB,CAAC;IACnC,4EAA4E;IAC5E,QAAQ,CAAC,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACzC,wEAAwE;IACxE,QAAQ,CAAC,iBAAiB,CAAC,EAAE,SAAS,mBAAmB,EAAE,CAAC;IAC5D,2EAA2E;IAC3E,QAAQ,CAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IACtC,oFAAoF;IACpF,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,MAAM,CAAC;IAC9D,kFAAkF;IAClF,QAAQ,CAAC,eAAe,CAAC,EAAE,QAAQ,CAAC;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IACjG,2CAA2C;IAC3C,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,WAAW,EAC3B,MAAa,EACb,OAAkB,EAClB,iBAAiB,EACjB,kBAAyB,EACzB,WAAW,EACX,eAAe,EACf,MAAY,GACb,EAAE,eAAe,+BA8HjB"}

package/dist/MainEditor.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Box, Card, Stack, Text } from "@mantine/core";
+import { usePrismStateValue } from "@zephytiju/prism-react";
+import { stringsForLocale } from "./locales/index.js";
+import { TitleBar } from "./TitleBar.js";
+import { BlockStack } from "./blocks/BlockStack.js";
+import { SelectionToolbar } from "./blocks/SelectionToolbar.js";
+import { CommentsPane } from "./CommentsPane.js";
+import { DEEP } from "./tokens.js";
+/**
+ * Platform Prism main-editor micro-UI (component id "main-editor") — the
+ * single dossier editor axiom component (D9): the title bar (breadcrumb +
+ * autosave stamp, DRAFT/V07 state chip, amber-active COMMENTS toggle, SHARE
+ * sharing intent, overflow) absorbed from the retired Title Bar component,
+ * the typed block stack with hover-revealed +/⠿ insert gutters (D11), and
+ * the block-ALIGNED comments rail (D11 — each card sits at its anchor
+ * block's vertical position and follows the workspace scroll), all rendered
+ * from IDossierDoc-shaped data on the component channels.
+ *
+ * Channel discipline: the dossier + threads arrive on
+ * "main-editor.dossier" / "main-editor.comment-threads"; the COMMENTS toggle
+ * drives the in-editor pane through the "main-editor.comments-open" channel
+ * (D6 state passing); block focus publishes through "main-editor.focused-
+ * block"; the HOSTED embedded blocks own their variant state through their
+ * component channels ("geovision-embed.selected-view" /
+ * "evidence-table.selected-view") and their ↗ open intents are re-emitted as
+ * "main-editor.open-view-requested" events; add/reorder/remove/duplicate are
+ * dossier ACTIONS emitted as events for the host to apply (D3 — blocks are
+ * added at app runtime through dossier actions, never composition mutation);
+ * comment anchors arrive as "main-editor.comment-requested" events the host
+ * turns into threads. No Lattice calls are made from the editor's own render
+ * path (the hosted geovision block's describeViews/render resolve through the
+ * HOST-supplied transport), so no audit events exist for routine reads; the
+ * only audit-adjacent emission is the SHARE intent, which the host (not this
+ * component) records on IAuditChain.
+ *
+ * No palette is hardcoded: every color resolves to semantic theme tokens
+ * (ok / threat / warn / signal / accent / card / card-dark / input / border /
+ * line / text / muted / deep / panel) supplied by the host's MantineProvider.
+ */
+export function MainEditor({ dossier: dossierProp, commentThreads: threadsProp, locale = "en", variant = "editor", enabledBlockKinds, showInsertControls = true, titleFormat, titleBarActions, height = 900, }) {
+    const strings = stringsForLocale(locale);
+    const channelDossier = usePrismStateValue("main-editor.dossier");
+    const channelThreads = usePrismStateValue("main-editor.comment-threads");
+    // The pane state arrives through the channel (D6): the title-bar toggle
+    // publishes it; null defaults to the prototype's open pane.
+    const commentsOpenChannel = usePrismStateValue("main-editor.comments-open");
+    const commentsOpen = commentsOpenChannel ?? true;
+    const focusedBlock = usePrismStateValue("main-editor.focused-block");
+    const dossier = dossierProp ?? channelDossier;
+    const threads = threadsProp ?? channelThreads;
+    // D11 alignment state: the workspace scroll offset the rail mirrors, plus
+    // the measured content-space tops of every block row.
+    const workspaceRef = useRef(null);
+    const [scrollTop, setScrollTop] = useState(0);
+    const [blockAnchors, setBlockAnchors] = useState({});
+    const measureAnchors = useCallback(() => {
+        const workspace = workspaceRef.current;
+        if (workspace === null) {
+            return;
+        }
+        const portTop = workspace.getBoundingClientRect().top;
+        const next = {};
+        workspace.querySelectorAll("[data-block-row-id]").forEach((row) => {
+            const id = row.getAttribute("data-block-row-id");
+            if (id !== null) {
+                next[id] = Math.max(row.getBoundingClientRect().top - portTop + workspace.scrollTop, 0);
+            }
+        });
+        setBlockAnchors(next);
+    }, []);
+    useLayoutEffect(() => {
+        if (dossier === null || dossier === undefined) {
+            return;
+        }
+        // Measure after layout settles, then once more after fonts/async paint.
+        const raf = requestAnimationFrame(measureAnchors);
+        const later = window.setTimeout(measureAnchors, 300);
+        return () => {
+            cancelAnimationFrame(raf);
+            window.clearTimeout(later);
+        };
+    }, [dossier, threads, locale, variant, measureAnchors]);
+    useEffect(() => {
+        const onResize = () => {
+            measureAnchors();
+        };
+        window.addEventListener("resize", onResize);
+        return () => {
+            window.removeEventListener("resize", onResize);
+        };
+    }, [measureAnchors]);
+    if (dossier === null || dossier === undefined) {
+        return (_jsx(Card, { withBorder: true, "data-testid": "main-editor-empty", children: _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { fw: 500, c: "text", children: strings.emptyTitle }), _jsx(Text, { size: "sm", c: "muted", children: strings.emptyHint })] }) }));
+    }
+    const openCommentCount = (threads ?? []).filter((thread) => thread.status === "open").length;
+    const shownDossier = titleFormat === undefined ? dossier : { ...dossier, title: titleFormat(dossier) };
+    return (_jsxs(Stack, { gap: 0, miw: 0, style: { background: DEEP, borderRadius: 6, overflow: "hidden", height }, "data-testid": "main-editor", children: [_jsx(TitleBar, { dossier: shownDossier, openCommentCount: openCommentCount, commentsOpen: commentsOpen, locale: locale, actions: titleBarActions }), _jsxs(Box, { style: { position: "relative", flex: 1, overflow: "hidden" }, "data-testid": "main-editor-body", children: [_jsx(Box, { ref: workspaceRef, h: "100%", px: 24, pt: 22, style: { overflowY: "auto", background: "var(--mantine-color-deep-filled)" }, "data-testid": "main-editor-workspace", onScroll: (event) => {
+                            setScrollTop(event.currentTarget.scrollTop);
+                        }, children: _jsx(Box, { w: 944, children: _jsx(BlockStack, { dossier: shownDossier, locale: locale, variant: variant, enabledBlockKinds: enabledBlockKinds ?? [], showInsertControls: showInsertControls, focusedBlockId: focusedBlock?.blockId ?? null }) }) }), _jsx(CommentsPane, { threads: threads ?? [], open: commentsOpen, locale: locale, blockOrder: shownDossier.blocks.map((block) => block.id), blockAnchors: blockAnchors, scrollTop: scrollTop }), variant === "editor" ? (_jsx(SelectionToolbar, { locale: locale, containerRef: workspaceRef })) : null] })] }));
+}

package/dist/TitleBar.d.ts

@@ -0,0 +1,28 @@
+import type { MainEditorDossier } from "./types.js";
+import type { MainEditorLocale } from "./locales/index.js";
+export interface TitleBarProps {
+    readonly dossier: MainEditorDossier;
+    /** Open thread count from the comment threads (drives the chip + toggle label). */
+    readonly openCommentCount: number;
+    /** Whether the in-editor comments pane is open (drives the amber-active state). */
+    readonly commentsOpen: boolean;
+    readonly locale: MainEditorLocale;
+    /** Configuration: title-bar actions to enable (all default true). */
+    readonly actions?: Readonly<{
+        comments?: boolean;
+        share?: boolean;
+        overflow?: boolean;
+    }>;
+}
+/**
+ * The dossier editor title bar, absorbed into the Main Editor axiom component
+ * (D9): breadcrumb + autosave stamp on the left; the DRAFT/V07 state chip,
+ * the COMMENTS toggle (active state amber) that drives the in-editor pane
+ * through the "main-editor.comments-open" channel (D6 state passing, not a
+ * direct reference), SHARE (a sharing intent the host audits via IAuditChain
+ * — the component never audits routine reads), and the ••• overflow on the
+ * right. Publishes through setter-only bindings, so the title bar never
+ * re-renders from its own publications.
+ */
+export declare function TitleBar({ dossier, openCommentCount, commentsOpen, locale, actions }: TitleBarProps): import("react").JSX.Element;
+//# sourceMappingURL=TitleBar.d.ts.map

package/dist/TitleBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TitleBar.d.ts","sourceRoot":"","sources":["../src/TitleBar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAA0B,MAAM,YAAY,CAAC;AAC5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAG3D,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,OAAO,EAAE,iBAAiB,CAAC;IACpC,mFAAmF;IACnF,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAClC,mFAAmF;IACnF,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,MAAM,EAAE,gBAAgB,CAAC;IAClC,qEAAqE;IACrE,QAAQ,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CAC1F;AAiBD;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,aAAa,+BAuGnG"}

package/dist/TitleBar.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Group, Stack, Text, UnstyledButton } from "@mantine/core";
+import { emitPrismEvent, usePrismStateSetter } from "@zephytiju/prism-react";
+import { formatMessage, stringsForLocale } from "./locales/index.js";
+import { ACCENT, BORDER, CARD, CARD_DARK, LINE, MONO, MUTED, TEXT, WARN } from "./tokens.js";
+const btnBase = {
+    height: 34,
+    background: CARD,
+    border: `1px solid ${BORDER}`,
+    borderRadius: 5,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontFamily: MONO,
+    fontSize: 9,
+    fontWeight: 500,
+    color: TEXT,
+    flexShrink: 0,
+};
+/**
+ * The dossier editor title bar, absorbed into the Main Editor axiom component
+ * (D9): breadcrumb + autosave stamp on the left; the DRAFT/V07 state chip,
+ * the COMMENTS toggle (active state amber) that drives the in-editor pane
+ * through the "main-editor.comments-open" channel (D6 state passing, not a
+ * direct reference), SHARE (a sharing intent the host audits via IAuditChain
+ * — the component never audits routine reads), and the ••• overflow on the
+ * right. Publishes through setter-only bindings, so the title bar never
+ * re-renders from its own publications.
+ */
+export function TitleBar({ dossier, openCommentCount, commentsOpen, locale, actions }) {
+    const strings = stringsForLocale(locale);
+    const enabled = { comments: true, share: true, overflow: true, ...actions };
+    // Setter-only publication: the toggle never re-renders from its own writes;
+    // the open label derives from the commentsOpen prop.
+    const publishCommentsOpen = usePrismStateSetter("main-editor.comments-open");
+    const commentsLabel = commentsOpen
+        ? formatMessage(strings.commentsButtonWithCount, { count: openCommentCount })
+        : strings.commentsButton;
+    return (_jsxs(Group, { justify: "space-between", align: "center", gap: 12, wrap: "nowrap", px: "14px 18px", h: 58, style: { background: CARD_DARK, borderBottom: `1px solid ${LINE}`, flexShrink: 0 }, "data-testid": "main-editor-title-bar", children: [_jsxs(Stack, { gap: 3, miw: 0, style: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { ff: MONO, fz: 10, fw: 500, style: { color: TEXT, letterSpacing: "0.04em", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, "data-testid": "main-editor-breadcrumb", children: dossier.breadcrumb.join("  /  ") }), _jsx(Text, { ff: MONO, fz: 8, style: { color: "var(--mantine-color-ok-filled)", letterSpacing: "0.03em" }, "data-testid": "main-editor-autosave", children: `${dossier.docCode}  •  ${formatMessage(strings.autosavedAt, { time: dossier.autosavedAt })}` })] }), _jsxs(Group, { gap: 10, wrap: "nowrap", children: [enabled.comments ? (_jsxs(UnstyledButton, { type: "button", style: {
+                            ...btnBase,
+                            width: 148,
+                            gap: 8,
+                            ...(commentsOpen
+                                ? { border: `1px solid ${WARN}`, color: WARN }
+                                : {}),
+                        }, title: "Expand / collapse comments in the editor body", "data-testid": "main-editor-comments-toggle", "aria-pressed": commentsOpen, onClick: () => {
+                            publishCommentsOpen(!commentsOpen);
+                        }, children: [_jsx("span", { "aria-hidden": "true", children: "\u2750" }), commentsLabel] })) : null, _jsxs(Box, { w: 132, h: 34, px: 10, style: { background: CARD, border: `1px solid ${BORDER}`, borderRadius: 5, flexShrink: 0 }, "data-testid": "main-editor-state-chip", children: [_jsx(Text, { ff: MONO, fz: 8, fw: 500, c: "accent", style: { paddingTop: 5, letterSpacing: "0.03em" }, "data-testid": "main-editor-state-version", children: `${dossier.draftState} / ${dossier.version}` }), _jsx(Text, { ff: MONO, fz: 7, style: { color: MUTED, letterSpacing: "0.02em" }, "data-testid": "main-editor-open-comments", children: formatMessage(strings.openCommentsCount, { count: openCommentCount }) })] }), enabled.share ? (_jsxs(UnstyledButton, { type: "button", style: { ...btnBase, width: 100, gap: 8, borderColor: ACCENT, color: ACCENT }, "data-testid": "main-editor-share", onClick: () => {
+                            // Sharing intent (D8): an action request that never grants
+                            // authorization; the host performs the share and appends the
+                            // IAuditChain entry. The component audits nothing itself.
+                            const request = { docId: dossier.id };
+                            emitPrismEvent("main-editor.share-requested", request);
+                        }, children: [_jsx("span", { "aria-hidden": "true", children: "\u2197" }), strings.share] })) : null, enabled.overflow ? (_jsx(UnstyledButton, { type: "button", style: { ...btnBase, width: 46, fontFamily: "inherit", fontSize: 14, fontWeight: 600 }, title: strings.overflowTitle, "data-testid": "main-editor-overflow", children: _jsx("span", { "aria-hidden": "true", children: "\u2022\u2022\u2022" }) })) : null] })] }));
+}