@voithos-labs/aragonite 0.10.1

package/dist/styles/editor.css

@@ -0,0 +1,585 @@
+/**
+ * Editor structural styles: painting rules for DOM the renderers build imperatively,
+ * which can't live in component <style> blocks. Every rule is wrapped in :where(.editor)
+ * for zero added specificity and full namespacing. Token VALUES live in editor-theme.css;
+ * host --color-* tokens are read with fallbacks here, never declared.
+ */
+
+/* Classes applied by code-renderer.ts; unknown ones fall through to --code-tok-unknown
+ * (inherit), preserving the textContent invariant without forcing a color choice. */
+:where(.editor) .code-tok-keyword {
+	color: var(--code-tok-keyword);
+	font-weight: 600;
+}
+:where(.editor) .code-tok-string {
+	color: var(--code-tok-string);
+}
+:where(.editor) .code-tok-number {
+	color: var(--code-tok-number);
+}
+:where(.editor) .code-tok-literal {
+	color: var(--code-tok-literal);
+}
+:where(.editor) .code-tok-comment {
+	color: var(--code-tok-comment);
+	font-style: italic;
+}
+:where(.editor) .code-tok-type {
+	color: var(--code-tok-type);
+}
+:where(.editor) .code-tok-function {
+	color: var(--code-tok-function);
+}
+:where(.editor) .code-tok-variable {
+	color: var(--code-tok-variable);
+}
+:where(.editor) .code-tok-operator {
+	color: var(--code-tok-operator);
+}
+:where(.editor) .code-tok-punctuation {
+	color: var(--code-tok-punctuation);
+}
+:where(.editor) .code-tok-meta {
+	color: var(--code-tok-meta);
+}
+:where(.editor) .code-tok-attr {
+	color: var(--code-tok-attr);
+}
+:where(.editor) .code-tok-regexp {
+	color: var(--code-tok-regexp);
+}
+:where(.editor) .code-tok-symbol {
+	color: var(--code-tok-symbol);
+}
+:where(.editor) .code-tok-subst {
+	color: var(--code-tok-subst);
+}
+:where(.editor) .code-tok-added {
+	color: var(--code-tok-added);
+}
+:where(.editor) .code-tok-removed {
+	color: var(--code-tok-removed);
+}
+:where(.editor) .code-tok-heading {
+	color: var(--code-tok-heading);
+	font-weight: 600;
+}
+:where(.editor) .code-tok-link {
+	color: var(--code-tok-link);
+	text-decoration: underline;
+}
+:where(.editor) .code-tok-unknown {
+	color: var(--code-tok-unknown);
+}
+
+/* Uniform selection color: single-block (native) matches cross-block (overlay) */
+:where(.editor) ::selection {
+	background: var(--selection-overlay-bg, rgba(100, 150, 255, 0.3));
+}
+
+/* Suppress native painting so it doesn't double up with SelectionOverlay's highlights. Scoped
+   to `.block-list` because the find/replace bar is a sibling that must keep painting its own. */
+:where(.editor)[data-cross-block] .block-list ::selection {
+	background: transparent;
+}
+
+:where(.editor)[data-cross-block] [contenteditable] {
+	caret-color: transparent;
+}
+
+/* The whole-block editing host: invisible, but a REAL box — Chromium fires no `beforeinput` on a
+   zero-height editing host, which would silently cost it every keystroke. Click-through, so it
+   never steals a pointer from the surface it stands over; in-flight IME text paints here. */
+:where(.editor) .whole-block-input {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 1.2em;
+	overflow: hidden;
+	outline: none;
+	pointer-events: none;
+	caret-color: transparent;
+}
+
+/* Global, not component-scoped, so a consumer's own `.decoration-overlay.<their-class>`
+   rules resolve. */
+:where(.editor) .decoration-overlay {
+	position: absolute;
+	pointer-events: none;
+	z-index: 1;
+	border-radius: 2px;
+}
+:where(.editor) .decoration-overlay-interactive {
+	pointer-events: auto;
+	cursor: pointer;
+}
+
+/* Search's marks ride the base rule above. */
+:where(.editor) .match-overlay {
+	background: var(--search-match-bg);
+}
+:where(.editor) .match-overlay-active {
+	background: var(--search-match-active-bg);
+}
+
+/* Non-editable chrome prepended to the host; the consumer positions it. */
+:where(.editor) .decoration-badge {
+	user-select: none;
+}
+
+/* Atomic non-editable inline chrome; the source's class layers styling on top. */
+:where(.editor) .decoration-island {
+	user-select: none;
+}
+
+/* The find bar is editor-level chrome and outranks a block affordance, so a per-block affordance
+   claiming the same top-right band yields it while the bar is open. Without this the pointer hits
+   the bar and the affordance is unreachable until search closes (#145). */
+.editor:has(> .search-anchor .search-bar) .code-lang-chip {
+	top: 52px;
+}
+
+:where(.editor) .md-image-widget {
+	display: block;
+	/* Shrink-wrap so the widget matches the image, not its line-box. */
+	width: fit-content;
+	margin: 0.5em 0;
+	user-select: none;
+}
+
+/* Positioning context for the ::after selection tint and ::before snap caret. */
+:where(.editor) [data-inline-widget] {
+	position: relative;
+}
+
+/* Directive with no plugin renderer: show its source dimmed like a marker. */
+:where(.editor) .directive-text-widget {
+	opacity: var(--syntax-marker-dim, 0.65);
+}
+
+/* Decoded-entity glyph (`&copy;` → ©): user-select:none keeps it whole, so no caret
+   lands inside the glyph. */
+:where(.editor) .md-entity-widget {
+	user-select: none;
+}
+
+:where(.editor) .md-image-widget img {
+	max-width: 100%;
+	height: auto;
+	display: block;
+}
+
+/* Image-bearing list-item / blockquote paragraph: the ambient marker sits at the image's
+   bottom-left, pulled out of flow rather than laid out with `display: flex`, which leaves no
+   caret anchor past a contenteditable=false widget. The widget side of each `:has()` is a
+   descendant match, since a wrapping inline construct puts the widget one level deeper; the
+   marker side stays a child combinator, matching only the structurally-injected prefix. */
+:where(.editor)
+	.text-editable-block.paragraph-block:has(> .md-marker[contenteditable='false']):has(
+		.md-image-widget
+	) {
+	position: relative;
+	text-indent: 0 !important;
+}
+
+:where(.editor)
+	.text-editable-block.paragraph-block:has(> .md-marker[contenteditable='false']):has(
+		.md-image-widget
+	)
+	> .md-marker[contenteditable='false'] {
+	position: absolute;
+	left: 0;
+	bottom: 0;
+}
+
+/* Drop the trailing empty line-box the contenteditable keeps after a block-level child,
+   which otherwise leaves dead vertical space below every image-only item. */
+:where(.editor) .text-editable-block.paragraph-block:has(.md-image-widget:last-child) {
+	min-height: 0;
+}
+
+/* An image wrapped in a link: left inline, the anchor stretches to full content width and its
+   `title` tooltip hovers beside the image. Hug the widget so the tooltip covers only it. */
+:where(.editor) a.md-link-content:has(.md-image-widget) {
+	display: inline-block;
+	width: fit-content;
+}
+
+/* An image with no pixels (broken, scheme-refused, or deferred by `imageLoadPolicy:
+   'placeholder'`) lays out 0×0 without this floor, unless a `|WxH` hint reserves its own box.
+   Display:block stays inherited: image widgets always force a visual line break. */
+:where(.editor) .md-image-broken,
+:where(.editor) .md-image-blocked,
+:where(.editor) .md-image-placeholder {
+	min-width: 100px;
+	min-height: 60px;
+	border: 1px dashed var(--color-ui-muted, #a4a4a4);
+	background: var(--color-bg-muted, #2a2a2a);
+}
+
+:where(.editor) .md-image-broken {
+	padding: 8px;
+	color: var(--color-text-muted, #aaa);
+	font-style: italic;
+}
+
+:where(.editor) .md-image-broken img {
+	display: none;
+}
+
+/* Not on `.md-image-broken`: it has padding, and border-box would change its box. */
+:where(.editor) .md-image-blocked,
+:where(.editor) .md-image-placeholder {
+	box-sizing: border-box;
+}
+
+:where(.editor) .md-image-broken::before {
+	content: '⚠ image failed to load';
+}
+
+/* Tint paints over the widget via ::after — `background-color` on the span
+   itself is hidden by the opaque <img> child (display:block, max-width:100%). */
+:where(.editor) [data-inline-widget].md-widget-selected::after {
+	content: '';
+	position: absolute;
+	inset: 0;
+	background-color: var(--selection-overlay-bg, rgba(100, 150, 255, 0.3));
+	border-radius: 2px;
+	pointer-events: none;
+}
+
+/* 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,
+:where(.editor) [data-inline-widget].md-snap-before::before {
+	content: '';
+	position: absolute;
+	top: 4px;
+	bottom: 4px;
+	width: 1.5px;
+	background-color: var(--color-text-primary, currentColor);
+	animation: md-snap-caret-blink 1s step-end infinite;
+	pointer-events: none;
+}
+
+:where(.editor) [data-inline-widget].md-snap-after::before {
+	right: -2px;
+}
+
+:where(.editor) [data-inline-widget].md-snap-before::before {
+	left: -2px;
+}
+
+@keyframes md-snap-caret-blink {
+	50% {
+		opacity: 0;
+	}
+}
+
+/* The synthetic caret REPLACES the native one: Chromium does sometimes render a caret beside a
+   contenteditable=false island, and two at one position reads as two carets. */
+:where(.editor) .md-snap-caret-active {
+	caret-color: transparent;
+}
+
+/* Top, left, width, height set inline by syncOverlayToWidget. */
+:where(.editor) .md-image-overlay {
+	position: absolute;
+	pointer-events: none;
+	z-index: 10;
+}
+
+:where(.editor) .md-image-overlay > * {
+	pointer-events: auto;
+}
+
+/* Scoped to the anchor so a blocked-scheme `span.md-link-content` never looks clickable, and
+   excluding image widgets so a wrapped one is not underlined as if it were text. */
+:where(.editor) a.md-link-content:not(:has(.md-image-widget)) {
+	color: var(--syntax-link, var(--color-accent, #567b67));
+	text-decoration: underline;
+}
+
+/* A plain click edits; only Ctrl/Cmd+click activates the link (`Editor.svelte` mirrors the
+   modifier onto the root). Stated explicitly so the caret-vs-pointer state is the editor's,
+   not the UA's `<a href>` default. */
+:where(.editor) a.md-link-content,
+:where(.editor) .md-autolink {
+	cursor: text;
+}
+
+:where(.editor)[data-mod-active] a.md-link-content,
+:where(.editor)[data-mod-active] .md-autolink:not(.md-link-blocked) {
+	cursor: pointer;
+}
+
+/* Blocked-scheme link: inert metadata, kept visually distinct from a clickable one. */
+:where(.editor) .md-link-content.md-link-blocked {
+	color: var(--md-link-blocked-color, var(--color-text-muted, #888));
+	text-decoration: none;
+	cursor: text;
+}
+
+/* Dimmer than the structural-content `[text]` / `(url)` markers, so it reads as metadata. */
+:where(.editor) .md-ref-label {
+	color: var(--md-ref-label-color, rgba(128, 128, 128, 0.45));
+	font-style: italic;
+}
+
+:where(.editor) .md-unresolved-ref {
+	color: var(--md-unresolved-color, #c0392b);
+	border-bottom: 1px dashed currentColor;
+	text-decoration: none;
+}
+
+/* A background sets image-variant unresolved refs apart from link-variant ones. */
+:where(.editor) .md-unresolved-ref-image {
+	background: var(--md-unresolved-image-bg, rgba(192, 57, 43, 0.08));
+	padding: 0 2px;
+	border-radius: 2px;
+}
+
+/* linkReferenceDefinition blocks render as metadata rather than content. */
+:where(.editor) .block-host[data-block-kind='linkReferenceDefinition'] {
+	opacity: 0.75;
+	font-size: 0.9em;
+	font-style: italic;
+}
+
+/* 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-size: 0.92em;
+}
+
+/* Off-window placeholder tint (VR-8): a fling can outrun the window recompute and paint a
+   bare spacer for one frame, which without a background tears white. */
+:where(.editor) .vr-spacer {
+	background: var(--vr-spacer-bg, rgba(128, 128, 128, 0.03));
+}
+
+/* One revealed-source identity for render-primary blocks (math, toc, mermaid): a plugin
+   component adds this class and keeps only its padding/overflow deltas. */
+:where(.editor) .md-source-surface {
+	display: block;
+	width: 100%;
+	box-sizing: border-box;
+	min-height: 1.4em;
+	font-family: var(--font-editor, ui-monospace, monospace);
+	font-size: 0.9em;
+	line-height: 1.5;
+	color: inherit;
+	background: var(--color-bg-secondary, rgba(128, 128, 128, 0.12));
+	border: 1px solid var(--color-accent, #567b67);
+	border-radius: 4px;
+}
+
+/* ── Semantic syntax-token wiring ─────────────────────────────────────────────
+   Defaults in editor-theme.css are neutral, so these rules change nothing until a consumer
+   overrides a token. Rules whose construct is also colored by a component <style> shorthand
+   carry the extra selector weight to beat the Svelte scoping class. */
+
+:where(.editor)
+	.text-editable-block:is(.heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6) {
+	color: var(--syntax-heading, currentColor);
+}
+
+:where(.editor) :is(em, strong) {
+	color: var(--syntax-emphasis, currentColor);
+}
+
+:where(.editor) .inline-code-content {
+	color: var(--syntax-code, currentColor);
+}
+
+/* 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);
+}
+
+:where(.editor) .block-host[data-block-kind='blockquote'] > .blockquote-block {
+	border-left-color: var(--syntax-quote, var(--color-ui-muted, #a4a4a4));
+}
+
+:where(.editor) .thematic-break-rule[role='separator'] > hr {
+	border-top-color: var(--syntax-separator, var(--color-ui-muted, #a4a4a4));
+}
+
+/* The [contenteditable='false'] qualifier scopes to the structurally-injected ambient
+   prefix, not inline .md-marker spans. */
+:where(.editor) .list-item-block .md-marker[contenteditable='false'] {
+	color: var(--syntax-list, currentColor);
+}
+
+:where(.editor) .task-checkbox {
+	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;
+}
+
+/* ── Rendered chrome, shared by every marker-hiding mode ──────────────────────
+   Every mode but source hides markers by CSS ONLY, never by omitting them from the render
+   path: the raw-aware offset walk counts every DOM text node regardless of layout, so
+   structural omission would desync the DOM↔raw coordinate space. Keyed on an
+   equal-specificity :is() so the per-mode rules below win by source order. */
+
+/* .md-marker: inline markers and block-own prefixes are pure syntax in normal flow, so
+   dropping them from paint and native copy joins the text up rendered-style; ambient
+   container markers carry layout and keep their box below. */
+/* .md-fence-line: a fence line's `\n` is a bare text node CSS can't reach; the wrapper
+   owns marker + newline, so collapsing it leaves no blank line at the box's edge. */
+/* .md-ref-label: resolution metadata, not content; a rendered document shows only the
+   link text. */
+/* .directive-marker: the container chrome (border/gutter) is the rendered form of a
+   directive fence; it never reveals, belonging to the container, not the focused leaf. */
+:where(.editor):is(
+		[data-presentation='reading'],
+		[data-presentation^='preview-'],
+		[data-presentation='live']
+	)
+	:is(.md-marker:not([contenteditable='false']), .md-fence-line, .md-ref-label, .directive-marker) {
+	display: none;
+}
+
+/* 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. */
+:where(.editor):is([data-presentation^='preview-'], [data-presentation='live'])
+	[contenteditable][data-content-empty]
+	:is(.md-marker:not([contenteditable='false']), .md-fence-line) {
+	display: inline;
+}
+
+/* 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(
+		[data-presentation='reading'],
+		[data-presentation^='preview-'],
+		[data-presentation='live']
+	)
+	.list-item-block
+	.md-marker[contenteditable='false'] {
+	visibility: hidden;
+	opacity: 1;
+}
+
+/* `- ` hides and a rendered bullet paints in its slot, like blockquote's border. */
+:where(.editor):is(
+		[data-presentation='reading'],
+		[data-presentation^='preview-'],
+		[data-presentation='live']
+	)
+	.list-item-block[data-list-marker='bullet']
+	.md-marker[contenteditable='false']::before {
+	content: '•';
+	visibility: visible;
+	color: var(--syntax-list, currentColor);
+}
+
+/* The ambient text IS the rendered number (`1. `), so it stays visible and undimmed. */
+:where(.editor):is(
+		[data-presentation='reading'],
+		[data-presentation^='preview-'],
+		[data-presentation='live']
+	)
+	.list-item-block[data-list-marker='ordered']
+	.md-marker[contenteditable='false'] {
+	visibility: visible;
+}
+
+/* GitHub task lists carry no bullet, so the `- ` prefix hides and the checkbox stays. */
+:where(.editor):is(
+		[data-presentation='reading'],
+		[data-presentation^='preview-'],
+		[data-presentation='live']
+	)
+	.list-item-block[data-list-marker='task']
+	.task-checkbox {
+	visibility: visible;
+}
+
+/* ── Reading mode ─────────────────────────────────────────────────────────────
+   The marker-hiding families reading shares with the preview rungs and `live` are in the
+   section above; reading adds only its read-only inertness on top — `live` takes none of it. */
+
+/* pointer-events kills the toggle click at the CSS layer; the toggleTask guard is the JS
+   belt. Toggling would rewrite the document, and reading mode writes no bytes. */
+:where(.editor)[data-presentation='reading']
+	.list-item-block[data-list-marker='task']
+	.task-checkbox {
+	cursor: default;
+	pointer-events: none;
+}
+
+:where(.editor)[data-presentation='reading'] .task-checkbox:hover {
+	background-color: transparent;
+}
+
+/* No caret to place: links read as links and activate on plain click. */
+:where(.editor)[data-presentation='reading'] a.md-link-content,
+:where(.editor)[data-presentation='reading'] .md-autolink:not(.md-link-blocked) {
+	cursor: pointer;
+}
+
+/* ── Preview rungs (block + inline granularity) ───────────────────────────────
+   `preview-block` renders the focused block as full styled source; `preview-inline` reveals
+   only the constructs at the caret. Markers hide broadly (above) and un-hide INSIDE the
+   focused host: the naive `.block-host:not([data-focused])` would hide a focused leaf's
+   markers through its unfocused container ancestor. */
+
+/* All inline spans, so the reveal restores source layout exactly. */
+:where(.editor)[data-presentation='preview-block']
+	.block-host[data-focused]
+	.md-marker:not([contenteditable='false']) {
+	display: inline;
+}
+
+/* Code fence lines are whole-block markers, so both preview modes reveal them on focus. */
+:where(.editor)[data-presentation^='preview-'] .block-host[data-focused] .md-fence-line {
+	display: inline;
+}
+
+/* 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;
+}
+
+/* preview-inline is excluded on purpose: the ambient marker is chrome the caret can never
+   enter, so at inline granularity it keeps its rendered form. */
+:where(.editor)[data-presentation='preview-block']
+	.block-host[data-focused]
+	.md-marker[contenteditable='false'] {
+	visibility: visible;
+	opacity: var(--syntax-marker-dim, 0.65);
+}
+:where(.editor)[data-presentation='preview-block']
+	.block-host[data-focused]
+	.md-marker[contenteditable='false']::before {
+	content: none;
+}
+
+/* ── Inline-granular reveal (preview-inline's focused block) ──────────────────
+   The render stamps construct markers with data-construct-* and `construct-reveal.ts` flips
+   md-construct-reveal on the chain at the caret. Unstamped markers reveal with block focus as
+   under preview-block, so a table's stampless cells degrade to that behavior. */
+:where(.editor)[data-presentation='preview-inline']
+	.block-host[data-focused]
+	.md-marker:not([contenteditable='false']):not([data-construct-start]) {
+	display: inline;
+}
+:where(.editor)[data-presentation='preview-inline']
+	.block-host[data-focused]
+	:is(.md-marker, .md-ref-label).md-construct-reveal {
+	display: inline;
+}

package/dist/testing/conformance-core.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Shared plumbing for the conformance kits: the assertion primitives and CST walks
+ * `container-conformance.ts` (G4.3) and `kind-conformance.ts` sit on. Runner-agnostic —
+ * a failure is a plain thrown `Error`, so no suite reaching for one seam is forced to
+ * load a runner.
+ */
+import type { AnyBlockKind, CstNode, Document } from '../core/nodes';
+import type { BlockKindDescriptor } from '../schema/block-kind-descriptor';
+/**
+ * How a cell is covered: `assert` runs the real check, `exempt` means the invariant has
+ * nothing to bite on, `boundary` means it needs something headless code cannot reach.
+ * Both non-assert modes carry a substantive reason — never a silent skip.
+ */
+export type ConformanceCoverage = {
+    mode: 'assert';
+} | {
+    mode: 'exempt';
+    reason: string;
+} | {
+    mode: 'boundary';
+    reason: string;
+};
+export declare function fail(message: string): never;
+export declare function assert(condition: unknown, message: string): asserts condition;
+export declare function assertIs(actual: unknown, expected: unknown, message: string): void;
+export declare function assertIndices(actual: readonly number[], expected: readonly number[], message: string): void;
+export declare function show(value: unknown): string;
+/** A documented reason is substantive, never a bare token — the visible-not-silent-skip floor. */
+export declare function assertReasonDocumented(reason: string, label: string): void;
+/** An EXEMPT/BOUNDARY cell must carry a substantive reason — visible, never a silent skip. */
+export declare function assertExemptionDocumented(cell: ConformanceCoverage, label: string): void;
+/**
+ * For a byte-faithful (strip/opaque) rebuild, `rebuildRaw` is the parse inverse: it must
+ * reproduce the SAME bytes, not merely run twice with the same wrong output. Grid rebuilds
+ * canonicalize delimiter/padding widths by contract, so they ride the determinism cell
+ * instead. Mutates `node.raw` in place — pass a fresh parse, never a shared cell node.
+ */
+export declare function assertRebuildIsParseCanonical(descriptor: BlockKindDescriptor, node: CstNode, label: string): void;
+export declare function firstChildOfKind(source: string, kind: AnyBlockKind): CstNode;
+export declare function nodeAtPath(root: Document | CstNode, path: number[]): CstNode;
+/** First node of `kind` in a pre-order walk (the kind may be nested below the root). */
+export declare function findFirstOfKind(root: Document | CstNode, kind: AnyBlockKind): CstNode | null;
+/** Doc-rooted path of the first node of `kind` in a pre-order walk, or null. */
+export declare function findFirstPathOfKind(root: Document | CstNode, kind: AnyBlockKind): number[] | null;
+export declare function pathPassesThroughKind(doc: Document, leafPath: number[], kind: AnyBlockKind): boolean;