@voithos-labs/aragonite 0.10.2 → 0.10.4

package/dist/selection/table-rect-extend.js

@@ -5,7 +5,7 @@
  * horizontal extension clamps at the column edges, since a rectangle has no sideways exit.
  */
 import { metadataOf } from '../core/nodes';
-import { isBlockNode, nodeAt } from '../tree-operations/node-ops';
+import { isBlockNode, nodeAt } from '../tree-operations/node-primitives';
 import { cellRowCol } from '../cursor/coordinate-spaces';
 import { pathsEqual } from './path-math';
 /**

package/dist/styles/editor-theme.css

@@ -9,40 +9,51 @@
 /* ── Host-chrome tier: the consumer's vocabulary, defaults behind the class ── */
 
 :where(.aragonite-editor-theme) {
+	/* Two faces, because they answer different questions. `--font-editor` is the SURFACE
+	   face — prose, headings, markers — and a host may legitimately set it proportional.
+	   `--font-code` is what must stay monospace whatever that choice is: code blocks, code
+	   spans, raw HTML, revealed source. Defaulted to the same stack, so a consumer that
+	   never names the second one sees exactly what it saw before. */
 	--font-editor: 'Cascadia Code', 'Cascadia Mono', 'Consolas', ui-monospace, monospace;
+	--font-code: 'Cascadia Code', 'Cascadia Mono', 'Consolas', ui-monospace, monospace;
+	/* The menus' and popovers' face: the host's own UI font where it names one. */
+	--font-ui: 'Inter', system-ui, sans-serif;
 	/* Type-scale root: headings, code and markers are all `em`-relative, so one override
 	   scales the surface. A themed host sets it on any ancestor instead. */
 	--editor-font-size: 1rem;
 
 	/* Corner radii by role: small controls (buttons, inputs, chips) and elevated surfaces
 	   (overlays, popovers). Chrome whose corner is neither keeps its own literal. */
-	--radius-ui: 3px;
+	--radius-ui: 4px;
 	--radius-surface: 8px;
 
-	--color-surface: #1b1c21;
-	--color-text-secondary: #d6d9e0;
-	--color-text-primary: #ffffff;
-	--color-border: #3d4047;
-	--color-ui-muted: #a4a4a4;
-	--color-ui-dulled: #afb1b3;
-	/* Split per mode: no single value clears AA on both a near-black and a white surface. */
-	--color-accent: #6c9d83;
+	/* The page ground, which the menus and the image toolbar paint on. */
+	--color-bg: #2c2c2a;
+	--color-surface: #1a1a19;
+	--color-text-secondary: #cfcfca;
+	--color-text-primary: #e8e8e5;
+	--color-border: #3e3e3b;
+	--color-ui-muted: #8f8f89;
+	--color-ui-dulled: #a3a39d;
+	--color-accent: #567b67;
 	/* Base the selection, search-match and reorder washes derive from, so one declaration
-	   moves all of them; the washes themselves stay editor-owned. */
-	--color-selection: #6496ff;
-	--color-error: #e06c75;
+	   moves all of them; the washes themselves stay editor-owned. Tracking the accent means
+	   a host that recolors one recolors all four. */
+	--color-selection: var(--color-accent, #567b67);
+	--color-error: #ff5f57;
 }
 
 :where(.aragonite-editor-theme)[data-editor-theme='light'] {
-	--color-surface: #ffffff;
-	--color-text-secondary: #1f2328;
-	--color-text-primary: #000000;
-	--color-border: #d0d7de;
-	--color-ui-muted: #6e7781;
-	--color-ui-dulled: #8c959f;
-	--color-accent: #496e5b;
-	--color-selection: #6496ff;
-	--color-error: #cf222e;
+	--color-bg: #dfddd7;
+	--color-surface: #efeee9;
+	--color-text-secondary: #4a4a45;
+	--color-text-primary: #2a2a27;
+	--color-border: #c9c7c0;
+	--color-ui-muted: #83837b;
+	--color-ui-dulled: #71716a;
+	--color-accent: #567b67;
+	--color-selection: var(--color-accent, #567b67);
+	--color-error: #d03025;
 }
 
 /* ── Editor-owned tier: defaults on `.editor`, so they hold with or without the class ── */
@@ -58,6 +69,10 @@
 	   --color-bg-secondary, which is measured against the base bg. */
 	--color-ui-faint: rgba(255, 255, 255, 0.07);
 
+	/* One radius for a picture, the crop frame that clips it and the selection ring on the
+	   overlay above it: half the surface radius, enough to soften a photo without a card look. */
+	--md-image-radius: 4px;
+
 	/* Markdown syntax override points, deliberately neutral so the default rendering carries no
 	   extra palette. Mode-independent: the chrome tokens they chain to carry the light/dark
 	   split. */
@@ -69,7 +84,10 @@
 	--syntax-code: currentColor;
 	--syntax-comment: currentColor;
 	--syntax-list: currentColor;
-	--syntax-separator: var(--color-ui-muted, #a4a4a4);
+	/* The rendered rule's colour, and its ONLY consumer. A divider separates rather than
+	   announces, so it defaults to the border token; mid-grey at this weight competed with
+	   the text either side. A host that wants a louder rule still names this token. */
+	--syntax-separator: var(--color-border, #3e3e3b);
 	--syntax-task: currentColor;
 	--syntax-task-done: rgba(128, 128, 128, 0.7);
 
@@ -98,8 +116,8 @@
 	/* Presentational tokens (mode-independent). */
 	/* Washes over the host-declarable selection base, alpha apart, so a host that names one
 	   base moves the selection, the search matches and the reorder chrome together. */
-	--selection-overlay-bg: color-mix(in srgb, var(--color-selection, #6496ff) 30%, transparent);
-	--search-match-bg: color-mix(in srgb, var(--color-selection, #6496ff) 22%, transparent);
+	--selection-overlay-bg: rgba(100, 150, 255, 0.3);
+	--search-match-bg: rgba(100, 150, 255, 0.22);
 	/* Painted on top of the match text, so it must keep an alpha channel or it hides it. */
 	--search-match-active-bg: rgba(216, 166, 87, 0.55);
 	--md-ref-label-color: rgba(128, 128, 128, 0.45);
@@ -111,38 +129,64 @@
 	--md-reorder-indicator: var(--color-selection, #6496ff);
 	/* Wash on the container being reordered within during a nested drag. Tinted with the reorder
 	   accent, not neutral grey, so the shift stays perceptible for low-contrast vision. */
-	--reorder-scope-bg: color-mix(in srgb, var(--color-selection, #6496ff) 14%, transparent);
+	--reorder-scope-bg: rgba(100, 150, 255, 0.14);
 	--syntax-marker-dim: 0.65;
 
+	/* Menu/popout elevation, per mode: a shadow tuned for a near-black surface is invisible
+	   over a white one. Editor-owned rather than host-family, since a host palette names
+	   colors, not elevation. */
+	--menu-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
+	/* The rest of the host app's menu family, so a menu here is the host's menu to the pixel. */
+	--menu-item-hover: rgba(255, 255, 255, 0.07);
+	--menu-search-divider: rgba(255, 255, 255, 0.08);
+	--menu-scrollbar-thumb: rgba(255, 255, 255, 0.18);
+	--menu-scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
+
 	/* Placeholder tint behind off-window content (VR-8), so a spacer that outruns the
 	   window recompute reads as "loading" rather than a white tear. */
 	--vr-spacer-bg: rgba(255, 255, 255, 0.025);
 }
 
+/* The washes follow a host's `--color-selection` where the engine can mix; the static values
+   above are the same tints of the default base, for engines without `color-mix` (WebKit before
+   Safari 16.2). */
+@supports (color: color-mix(in srgb, red, blue)) {
+	:where(.editor, .aragonite-editor-theme) {
+		--selection-overlay-bg: color-mix(in srgb, var(--color-selection, #6496ff) 30%, transparent);
+		--search-match-bg: color-mix(in srgb, var(--color-selection, #6496ff) 22%, transparent);
+		--reorder-scope-bg: color-mix(in srgb, var(--color-selection, #6496ff) 14%, transparent);
+	}
+}
+
 :where(.editor, .aragonite-editor-theme)[data-editor-theme='light'] {
-	--color-bg-secondary: rgba(0, 0, 0, 0.05);
+	--color-bg-secondary: rgba(0, 0, 0, 0.035);
 	--color-bg-elevated: #f5f6f8;
 	--color-bg-muted: #eaeaea;
 	--color-text-muted: #57606a;
 	--color-ui-faint: rgba(0, 0, 0, 0.06);
+	--menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
+	--menu-item-hover: rgba(0, 0, 0, 0.05);
+	--menu-search-divider: rgba(0, 0, 0, 0.07);
+	--menu-scrollbar-thumb: rgba(0, 0, 0, 0.2);
+	--menu-scrollbar-thumb-hover: rgba(0, 0, 0, 0.32);
 
 	/* --syntax-* tokens are mode-independent — no light overrides. */
 
 	/* Code block syntax highlighting — GitHub Light-inspired palette */
-	--code-tok-keyword: #cf222e;
+	--code-tok-keyword: #c1202b;
 	--code-tok-string: #0a3069;
 	--code-tok-number: #0550ae;
 	--code-tok-literal: #0550ae;
-	--code-tok-comment: #666f79;
+	--code-tok-comment: #5c646d;
 	--code-tok-type: #953800;
-	--code-tok-function: #8250df;
-	--code-tok-operator: #cf222e;
+	--code-tok-function: #7447c6;
+	--code-tok-operator: #c1202b;
 	--code-tok-meta: #953800;
 	--code-tok-attr: #116329;
 	--code-tok-regexp: #116329;
 	--code-tok-symbol: #0550ae;
 	--code-tok-added: #116329;
-	--code-tok-removed: #cf222e;
+	--code-tok-removed: #c1202b;
 	--code-tok-heading: #0550ae;
 	--code-tok-link: #0550ae;
 

package/dist/styles/editor.css

@@ -168,6 +168,28 @@
 	max-width: 100%;
 	height: auto;
 	display: block;
+	border-radius: var(--md-image-radius);
+}
+
+/* A cropped image: the widget is the frame (width and aspect set inline from the `|WxH` hint,
+   capped to the column) and the image pans inside it, sized and offset by `image-crop.ts`. */
+:where(.editor) .md-image-widget.md-image-cropped {
+	overflow: hidden;
+	max-width: 100%;
+	/* The frame clips the picture, so the rounding belongs to it. `clip-path` alongside
+	   `overflow`, because a rounded overflow clip is the one Chromium drops when the picture
+	   inside gets its own compositing layer, and a crop is exactly when that happens. */
+	border-radius: var(--md-image-radius);
+	clip-path: inset(0 round var(--md-image-radius));
+}
+
+/* The picture keeps its own radius rather than going square inside the frame: at zoom 1 it sits
+   exactly on the frame, so the two corners coincide, and above 1 its corners are outside the
+   frame entirely. Either way the crop cannot come out with harder corners than the plain image. */
+:where(.editor) .md-image-widget.md-image-cropped img {
+	position: absolute;
+	max-width: none;
+	object-fit: cover;
 }
 
 /* Image-bearing list-item / blockquote paragraph: the ambient marker sits at the image's
@@ -249,6 +271,12 @@
 	pointer-events: none;
 }
 
+/* The tint IS the widget's selection paint: native `::selection` on the text inside it (a KaTeX
+   box is text) would stack a second wash on the same pixels. */
+:where(.editor) [data-inline-widget].md-widget-selected ::selection {
+	background: transparent;
+}
+
 /* Synthetic caret on the snap-target edge — Chromium doesn't reliably render
    the live caret adjacent to a contenteditable=false neighbor. */
 :where(.editor) [data-inline-widget].md-snap-after::before,
@@ -263,12 +291,14 @@
 	pointer-events: none;
 }
 
+/* Clear of the widget's own edge: against a picture, a caret drawn tight to the frame reads as
+   part of the border rather than as a caret waiting for the next character. */
 :where(.editor) [data-inline-widget].md-snap-after::before {
-	right: -2px;
+	right: -4px;
 }
 
 :where(.editor) [data-inline-widget].md-snap-before::before {
-	left: -2px;
+	left: -4px;
 }
 
 @keyframes md-snap-caret-blink {
@@ -290,6 +320,20 @@
 	z-index: 10;
 }
 
+/* A selected image says so with a hairline ring. It rides the overlay, not the widget: a cropped
+   widget clips its own pseudo-elements, and a border on the picture would move the layout. Held
+   just off the edge so it reads as a ring around the picture rather than part of it, over a
+   translucent dark line that keeps it legible against a pale photo. */
+:where(.editor) .md-image-overlay::before {
+	content: '';
+	position: absolute;
+	inset: -2px;
+	border: 1px solid var(--color-accent, #567b67);
+	border-radius: calc(var(--md-image-radius, 4px) + 2px);
+	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
+	pointer-events: none;
+}
+
 :where(.editor) .md-image-overlay > * {
 	pointer-events: auto;
 }
@@ -350,7 +394,7 @@
 /* Dimmed monospace gives inline raw HTML a code-ish feel without becoming a code span. */
 :where(.editor) .md-raw-html {
 	color: var(--md-raw-html-color, rgba(120, 120, 120, 0.85));
-	font-family: var(--font-editor, ui-monospace, monospace);
+	font-family: var(--font-code, ui-monospace, monospace);
 	font-size: 0.92em;
 }
 
@@ -367,7 +411,7 @@
 	width: 100%;
 	box-sizing: border-box;
 	min-height: 1.4em;
-	font-family: var(--font-editor, ui-monospace, monospace);
+	font-family: var(--font-code, ui-monospace, monospace);
 	font-size: 0.9em;
 	line-height: 1.5;
 	color: inherit;
@@ -394,6 +438,13 @@
 	color: var(--syntax-code, currentColor);
 }
 
+/* An inline widget's source while it is revealed for editing (`$x$`, a footnote ref): the
+   inline-code wash, so the span being edited reads as a span, in the prose face so the line
+   does not reflow around it. */
+::highlight(md-inline-reveal) {
+	background-color: var(--color-bg-secondary, rgba(128, 128, 128, 0.12));
+}
+
 /* Raw-HTML block source text; inline raw HTML keeps --md-raw-html-color above. */
 :where(.editor) .text-editable-block.raw-block {
 	color: var(--syntax-comment, currentColor);
@@ -404,7 +455,7 @@
 }
 
 :where(.editor) .thematic-break-rule[role='separator'] > hr {
-	border-top-color: var(--syntax-separator, var(--color-ui-muted, #a4a4a4));
+	border-top-color: var(--syntax-separator, var(--color-border, #3e3e3b));
 }
 
 /* The [contenteditable='false'] qualifier scopes to the structurally-injected ambient
@@ -417,12 +468,69 @@
 	color: var(--syntax-task, currentColor);
 }
 
-/* Table grips reveal on table hover, in pure CSS with no per-grip reactive state. The grip's
-   own <style> holds the at-rest state, so it never intercepts a caret click until then. */
-:where(.editor) [role='table']:hover [data-table-col-grip],
-:where(.editor) [role='table']:hover [data-table-row-grip] {
-	opacity: 1;
-	pointer-events: auto;
+/* ── Menus ──────────────────────────────────────────────────────────────────
+   One surface for every menu the editor opens (the table's context menu, the code rail's
+   picker and overflow), copied from the host app's context menu value for value and reading
+   the same tokens, so a menu here is indistinguishable from one of the host's. */
+:where(.editor) .md-menu {
+	position: fixed;
+	z-index: 2000;
+	min-width: 168px;
+	padding: 4px;
+	background: var(--color-bg, #2c2c2a);
+	border: 1px solid var(--color-border, #3e3e3b);
+	border-radius: 8px;
+	box-shadow: var(--menu-shadow, 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35));
+	font-family: var(--font-ui, system-ui, sans-serif);
+	font-size: 13px;
+	line-height: 1.4;
+	color: var(--color-text-primary, #e8e8e5);
+	user-select: none;
+}
+
+:where(.editor) .md-menu-item {
+	display: flex;
+	align-items: center;
+	gap: 9px;
+	width: 100%;
+	padding: 7px 10px;
+	border: none;
+	border-radius: 5px;
+	background: transparent;
+	color: inherit;
+	font: inherit;
+	text-align: left;
+	cursor: pointer;
+}
+
+:where(.editor) .md-menu-item:hover,
+:where(.editor) .md-menu-item:focus-visible,
+:where(.editor) .md-menu-item[aria-pressed='true'],
+:where(.editor) .md-menu-item[data-active='true'] {
+	background: var(--menu-item-hover, rgba(255, 255, 255, 0.07));
+	outline: none;
+}
+
+:where(.editor) .md-menu-item:disabled {
+	opacity: 0.4;
+	cursor: default;
+}
+
+:where(.editor) .md-menu-item:disabled:hover {
+	background: transparent;
+}
+
+:where(.editor) .md-menu-icon {
+	display: inline-flex;
+	align-items: center;
+	flex-shrink: 0;
+	color: var(--color-ui-muted, #8f8f89);
+}
+
+:where(.editor) .md-menu-divider {
+	height: 1px;
+	margin: 4px 6px;
+	background: var(--color-border, #3e3e3b);
 }
 
 /* ── Rendered chrome, shared by every marker-hiding mode ──────────────────────
@@ -450,17 +558,33 @@
 }
 
 /* Chrome with nothing behind it has nowhere to hide: a construct whose only bytes are its own
-   markers would paint as an empty line with no caret position, so an editable rung shows them
-   dimmed exactly as source does. Mirrored in `cursor/widget-offset.ts` (same two modes, same
-   two families); reading takes no keystrokes and keeps its silence. The `[contenteditable]`
-   qualifier scopes the stamp to the walk containers its JS twin reads, which is what a block
-   decoration spelling `data-content-empty` onto the block host cannot reach. */
+   markers has no caret position, so an editable rung shows them dimmed as source does — but
+   only while the surface holds focus, since the seat is for a caret and a block nobody is in
+   reads as the empty construct it is. Mirrored in `cursor/widget-offset.ts` (same modes, same
+   families); reading keeps its silence. `[contenteditable]` scopes the stamp to the walk
+   containers its JS twin reads, which a decoration on the block host cannot reach. */
 :where(.editor):is([data-presentation^='preview-'], [data-presentation='live'])
-	[contenteditable][data-content-empty]
+	[contenteditable][data-content-empty]:focus-within
 	:is(.md-marker:not([contenteditable='false']), .md-fence-line) {
 	display: inline;
 }
 
+/* A code block or table is a box, and prose gives it nothing to stand off from: blocks stack flush,
+   with only a text line's own leading between them. The box brings its own breathing room —
+   about a text line's leading each side, so code-to-code and code-to-prose match. Padding,
+   not margin: the height model measures the host's border box. */
+:where(.editor) .block-host:is([data-block-kind='fencedCode'], [data-block-kind='table']) {
+	padding-block: 6px;
+}
+
+/* Room for the add strips (`TableBlock.svelte`) INSIDE the host's box: on the right so a
+   full-width table still leaves the column strip inside the editor's scroll box, and below so
+   the row strip never lies over whatever follows the table (the trailing insert row, a block). */
+:where(.editor) .block-host[data-block-kind='table'] {
+	padding-right: 30px;
+	padding-bottom: 24px;
+}
+
 /* Ambient list markers own the hanging indent (padding/text-indent are keyed to the span's
    ch width), so they keep their box: visibility, not display. */
 :where(.editor):is(
@@ -498,7 +622,21 @@
 	visibility: visible;
 }
 
-/* GitHub task lists carry no bullet, so the `- ` prefix hides and the checkbox stays. */
+/* GitHub task lists: no bullet, the box at the margin, the text one gap after it. The `- `
+   marker collapses to nothing (its bytes stay for the walk), the `[ ]` span becomes a fixed
+   slot so checked and unchecked are the same width, and the box paints in that slot. */
+:where(.editor):is(
+		[data-presentation='reading'],
+		[data-presentation^='preview-'],
+		[data-presentation='live']
+	)
+	.list-item-block[data-list-marker='task']
+	.task-list-marker {
+	display: inline-block;
+	width: 0;
+	overflow: hidden;
+}
+
 :where(.editor):is(
 		[data-presentation='reading'],
 		[data-presentation^='preview-'],
@@ -506,7 +644,110 @@
 	)
 	.list-item-block[data-list-marker='task']
 	.task-checkbox {
+	/* Visible inside the hidden ambient marker, its `[ ]` bytes gone by colour: a hidden span
+	   leaves the accessibility tree and the hit-test, and the pseudo-elements draw the box. */
 	visibility: visible;
+	color: transparent;
+	position: relative;
+	display: inline-block;
+	/* Slot + gap; `TASK_HANGING_INDENT` in task-checkbox.ts is these plus the trailing space. */
+	width: 1.2em;
+	margin-right: 0.65em;
+	vertical-align: baseline;
+}
+
+:where(.editor):is(
+		[data-presentation='reading'],
+		[data-presentation^='preview-'],
+		[data-presentation='live']
+	)
+	.list-item-block[data-list-marker='task']
+	.task-checkbox::before {
+	content: '';
+	visibility: visible;
+	/* Centred by layout and sized to whole pixels, never by a translate: a transformed box
+	   rasterises at fractional edges on a scaled desktop and reads shorter than it is wide.
+	   The unrounded pair is the fallback for a browser without `round()`. */
+	position: absolute;
+	inset: 0;
+	margin: auto;
+	width: 1.2em;
+	height: 1.2em;
+	width: round(1.2em, 1px);
+	height: round(1.2em, 1px);
+	box-sizing: border-box;
+	border: 1.5px solid var(--color-ui-muted, #8f8f89);
+	border-radius: 0.28em;
+	background: transparent;
+}
+
+/* Checked: the box fills with the text colour and the tick is cut from it in the page's
+   background — two borders of a rotated box, so it needs no glyph and scales with the type. */
+:where(.editor):is(
+		[data-presentation='reading'],
+		[data-presentation^='preview-'],
+		[data-presentation='live']
+	)
+	.list-item-block[data-task-checked='true']
+	.task-checkbox::before {
+	background: var(--color-text-primary, currentColor);
+	border-color: var(--color-text-primary, currentColor);
+}
+
+:where(.editor):is(
+		[data-presentation='reading'],
+		[data-presentation^='preview-'],
+		[data-presentation='live']
+	)
+	.list-item-block[data-task-checked='true']
+	.task-checkbox::after {
+	content: '';
+	visibility: visible;
+	position: absolute;
+	/* The slot's centre, nudged up and right: the visible strokes are the L's right and
+	   bottom edges, which rotation swings down and left. */
+	left: 53%;
+	top: 45%;
+	width: 0.32em;
+	height: 0.6em;
+	box-sizing: border-box;
+	border: solid var(--color-bg, #2c2c2a);
+	border-width: 0 0.15em 0.15em 0;
+	transform: translate(-50%, -50%) rotate(45deg);
+}
+
+/* The span is the SLOT, a full line-height tall; the box is the pseudo-element inside it. The
+   hover tint the source modes put on the span (ListItemBlock) would draw a tall rectangle
+   round the square, so in the rendered modes it moves onto the box: an open box fills with
+   the tint, a checked one is already a solid fill and keeps it. */
+:where(.editor):is(
+		[data-presentation='reading'],
+		[data-presentation^='preview-'],
+		[data-presentation='live']
+	)
+	.list-item-block[data-list-marker='task']
+	.task-checkbox:hover {
+	background-color: transparent;
+}
+
+:where(.editor):is(
+		[data-presentation='reading'],
+		[data-presentation^='preview-'],
+		[data-presentation='live']
+	)
+	.list-item-block[data-list-marker='task']
+	.task-checkbox::before {
+	transition: background-color 60ms ease-out;
+}
+
+:where(.editor):is(
+		[data-presentation='reading'],
+		[data-presentation^='preview-'],
+		[data-presentation='live']
+	)
+	.list-item-block[data-list-marker='task']:not([data-task-checked='true'])
+	.task-checkbox:hover::before {
+	background-color: var(--md-marker-hover-bg, rgba(128, 128, 128, 0.15));
 }
 
 /* ── Reading mode ─────────────────────────────────────────────────────────────
@@ -550,6 +791,15 @@
 	display: inline;
 }
 
+/* The body's caret anchor stands in for the closer line while that line hides (see
+   `code-renderer.ts`); wherever the closer paints it would add a blank line instead. */
+:where(.editor):not([data-presentation]) br[data-caret-anchor='closer'],
+:where(.editor)[data-presentation^='preview-']
+	.block-host[data-focused]
+	br[data-caret-anchor='closer'] {
+	display: none;
+}
+
 /* Reference labels reveal on the focused block under preview-block. */
 :where(.editor)[data-presentation='preview-block'] .block-host[data-focused] .md-ref-label {
 	display: inline;

package/dist/testing/container-conformance.js

@@ -19,7 +19,7 @@ import { isBlockOpenerRegistered } from '../schema/block-openers';
 import { getBlockKindDescriptor } from '../schema/block-kind-descriptor';
 import { rebuildContainerRawIfContainer } from '../schema/container-raw';
 import { createSharingState } from '../tree-operations/sharing';
-import { rebuildUnsharedAncestry } from '../tree-operations/unshare';
+import { rebuildUnsharedAncestry } from '../tree-operations/chain-rebuild';
 import { assertParseConverged } from './parse-convergence';
 import { createHeadlessActions, mountBlockListState, recordingFocus, stubBlockEdit, stubStickyColumn } from './headless-actions';
 import { assert, assertExemptionDocumented, assertIndices, assertIs, assertRebuildIsParseCanonical, assertReasonDocumented, fail, findFirstOfKind, firstChildOfKind, nodeAtPath, pathPassesThroughKind } from './conformance-core';
@@ -487,7 +487,7 @@ function assertContentStartSpaceIsRebuilt(kind, descriptor) {
 /**
  * `container.bodyWrap` is probed, never trusted: the separator settle reads it to decide whether
  * a freed blank line belongs to the wrap, and a kind whose parse disagrees loses its body head
- * on reload (`tree-operations/node-ops.clearRedundantSeparator`).
+ * on reload (`tree-operations/settle.clearRedundantSeparator`).
  */
 function assertBodyWrapMatchesParse(kind, descriptor) {
     if (descriptor.containerContract === 'grid')

package/dist/testing/inline-conformance.js

@@ -379,7 +379,8 @@ function assertRewriteReproducesSource(fixture, node, rung) {
         ...(node.title !== undefined ? { title: node.title } : {}),
         ...(node.label !== undefined ? { label: node.label } : {}),
         ...(node.width !== undefined ? { width: node.width } : {}),
-        ...(node.height !== undefined ? { height: node.height } : {})
+        ...(node.height !== undefined ? { height: node.height } : {}),
+        ...(node.crop !== undefined ? { crop: node.crop } : {})
     };
     assertIs(rung.rewriteImage(source, fields), source, `rewriteImage re-emits ${JSON.stringify(source)} from the fields the scan read out of it`);
 }

package/dist/tree-operations/blockquote.js

@@ -2,7 +2,7 @@ import { cloneMetadata, cloneNode } from './clone';
 import { rebuildBlockquoteRaw } from '../schema/container-rebuilders';
 import { rebuildContainerRaw } from '../schema/container-raw';
 import { assignIds } from '../block-id';
-import { emptyParagraph } from './node-ops';
+import { emptyParagraph } from './node-primitives';
 import { trailingLineEnding } from '../core/lines';
 /**
  * Unwrap a quote-shaped container's first child (Rule U2), returning fresh clones without

package/dist/tree-operations/chain-rebuild.d.ts

@@ -0,0 +1,63 @@
+/**
+ * The ancestry rebuild: raws re-derived along an owned spine chain innermost-first, each
+ * container's kind re-derived and the seam at its own slot asked on the way out (editor.md § 9).
+ */
+import type { CstNode } from '../core/nodes';
+import type { SharingState } from './sharing';
+import type { NodeParent } from './node-primitives';
+import type { StructuralChange } from './structural-change';
+import type { GrammarView } from '../schema/block-openers';
+import { type TrackedPosition } from './settle';
+/**
+ * Longest prefix of `chain` still attached under `root`, identity-checked level by level. A
+ * commit mutation can splice a node out mid-ceremony, and rebuilding the detached node's raw
+ * against its emptied children writes `raw: ''`; ancestors above the detachment still rebuild.
+ */
+export declare function attachedChainPrefix(root: NodeParent, chain: CstNode[]): CstNode[];
+/**
+ * One container slot a rebuild re-kinded. `previous` is the rollback register: a commit
+ * unwinding after the swap has already published `replacement` into a live children array.
+ */
+export interface ContainerReclassification {
+    siblings: CstNode[];
+    index: number;
+    previous: CstNode;
+    replacement: CstNode;
+}
+/**
+ * A fold the rebuilt container's own slot owed: its bytes stopped interrupting a neighbour, so
+ * the parent's array reloads as fewer blocks. `before` is the pre-splice array, the rollback
+ * register, since the splice lands in an array no commit descriptor covers.
+ */
+export interface AncestrySeamFold {
+    /** Chain level of the folded container, so a caller composes the owner's path from its own. */
+    depth: number;
+    siblings: CstNode[];
+    /** The chain node owning `siblings`, or null when they are the rebuild root's children. */
+    owner: CstNode | null;
+    change: StructuralChange;
+    before: CstNode[];
+    landing: TrackedPosition;
+}
+/**
+ * What the typing door knows and a bare chain does not: where the chain sits in the document,
+ * and the bytes its leaf carried before the write. Both are guesses the rebuild identity-checks.
+ */
+export interface ChainWriteHint {
+    path: number[];
+    leafPreviousRaw: string;
+}
+/**
+ * Rebuild raws along an owned spine chain innermost-first, re-deriving each container's kind and
+ * settling the seams at its own slot; chain- rather than path-based so it survives index shifts.
+ * Both passes gate on a boundary line of the rebuilt raw moving. `folds` is required-nullable: a
+ * fold splices the PARENT's array, so only a caller that reconciles that scope's ids/refs passes
+ * a sink.
+ */
+export declare function rebuildUnsharedChain(root: NodeParent | CstNode, chain: CstNode[], sharing: SharingState, folds: AncestrySeamFold[] | null, grammar: GrammarView | undefined, hint?: ChainWriteHint): ContainerReclassification[];
+/**
+ * Unshare the spine to `path` and rebuild it innermost-first, tolerating paths that ran out of
+ * range mid-walk (post-delete rebuild passes). Prefer `rebuildUnsharedChain` when indices may
+ * have shifted since the unshare.
+ */
+export declare function rebuildUnsharedAncestry(root: NodeParent, path: number[], sharing: SharingState, folds: AncestrySeamFold[] | null, grammar: GrammarView | undefined): ContainerReclassification[];