@voithos-labs/aragonite 0.10.2 → 0.10.4

package/dist/components/Editor.svelte.d.ts

@@ -18,7 +18,7 @@ declare const Editor: import("svelte").Component<$$ComponentProps, {
     setSelection: (selection: EditorSelection) => Promise<boolean>;
     placeCaretAtPoint: (x: number, y: number) => boolean;
     insertMarkdown: (md: string) => boolean;
-    runCommand: (commandId: string) => boolean;
+    runCommand: (commandId: string, arg?: unknown) => boolean;
     canRunCommand: (commandId: string) => boolean;
     isCommandActive: (commandId: string) => boolean;
     getEvents: () => EditorEvents;

package/dist/components/SelectionOverlay.svelte

@@ -9,10 +9,11 @@
 	} from '../editor-keys';
 	import {
 		normalize,
+		blockPaintsWholeBox,
 		classifyBlockForSelection,
 		charOffsetOf,
 		cellIndexOf,
-		type BlockSelectionClass
+		type EditorSelection
 	} from '../selection/primitives';
 	import { snapCrossBlockTableEndpoints } from '../selection/table-endpoint-snap';
 	import { wireOverlayRemeasure } from '../cursor/overlay-remeasure';
@@ -27,7 +28,7 @@
 		path: number[];
 		blockRef: BlockComponent | undefined;
 		blockEl: HTMLElement | null | undefined;
-		/** This container's children paint their own overlays, so it paints none. */
+		/** This container's children paint the range's endpoint rects, so it measures none. */
 		delegatesPainting?: boolean;
 		/** This container measures its own rects instead of delegating. Both are decided
 		 *  at BlockHost, which hands the same pair to DecorationOverlay. */
@@ -41,23 +42,26 @@
 	const getEditorRoot = editorDoc?.editorRoot;
 	const getDoc = editorDoc?.doc;
 
-	const classification = $derived.by<BlockSelectionClass>(() => {
-		if (delegatesPainting) return 'outside';
-		if (!selection?.isCustomRendered || !selection.anchor || !selection.focus) {
-			return 'outside';
-		}
-		return classifyBlockForSelection(path, {
-			anchor: selection.anchor,
-			focus: selection.focus
-		});
+	const range = $derived.by<EditorSelection | null>(() => {
+		if (!selection?.isCustomRendered || !selection.anchor || !selection.focus) return null;
+		return { anchor: selection.anchor, focus: selection.focus };
 	});
 
+	const classification = $derived(range ? classifyBlockForSelection(path, range) : 'outside');
+
+	// Delegation-blind on purpose: a block the range holds whole paints one box over everything it
+	// renders, chrome included, and the seam already keeps its children from painting under it.
+	const paintsWholeBox = $derived(
+		range !== null && blockPaintsWholeBox(path, range, selection?.wholeUnitPath ?? null)
+	);
+
 	// The measuring effect and the template read this one predicate, so a rendered
 	// rect is always one the effect measured; two predicates render a stale box.
 	const paintsEndpoints = $derived(
-		classification === 'start' ||
-			classification === 'end' ||
-			(classification === 'single-block' && containerPaintsRects)
+		!delegatesPainting &&
+			(classification === 'start' ||
+				classification === 'end' ||
+				(classification === 'single-block' && containerPaintsRects))
 	);
 
 	interface LocalRect {
@@ -67,7 +71,9 @@
 		height: number;
 	}
 
-	/** Merge rects on the same visual line into a single rect to prevent double-highlight. */
+	/** Merge rects on the same visual line into a single rect to prevent double-highlight. Same
+	 *  line means vertically overlapping, not equal tops: an inline widget (a KaTeX box) stands
+	 *  taller than the text beside it, and two rects painted over one span read twice as dark. */
 	function mergeRectsPerLine(rects: LocalRect[]): LocalRect[] {
 		if (rects.length <= 1) return rects;
 		const sorted = [...rects].sort((a, b) => a.top - b.top);
@@ -76,7 +82,9 @@
 
 		for (let i = 1; i < sorted.length; i++) {
 			const r = sorted[i];
-			if (Math.abs(r.top - current.top) < 2) {
+			const overlap =
+				Math.min(current.top + current.height, r.top + r.height) - Math.max(current.top, r.top);
+			if (overlap > Math.min(current.height, r.height) * 0.5) {
 				const left = Math.min(current.left, r.left);
 				const right = Math.max(current.left + current.width, r.left + r.width);
 				const top = Math.min(current.top, r.top);
@@ -146,7 +154,7 @@
 	});
 </script>
 
-{#if classification === 'middle'}
+{#if paintsWholeBox}
 	<div class="selection-overlay selection-overlay-middle" contenteditable="false"></div>
 {:else if paintsEndpoints}
 	{#each endpointRects as rect, i (i)}

package/dist/components/SelectionOverlay.svelte.d.ts

@@ -3,7 +3,7 @@ type $$ComponentProps = {
     path: number[];
     blockRef: BlockComponent | undefined;
     blockEl: HTMLElement | null | undefined;
-    /** This container's children paint their own overlays, so it paints none. */
+    /** This container's children paint the range's endpoint rects, so it measures none. */
     delegatesPainting?: boolean;
     /** This container measures its own rects instead of delegating. Both are decided
      *  at BlockHost, which hands the same pair to DecorationOverlay. */

package/dist/components/TailInsert.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	/**
+	 * The row below the last block: a full-width strip that adds an empty paragraph at the end
+	 * of the document and lands the caret in it, with a `+` in the left gutter that does the
+	 * same — so there is always a way to write below whatever the last block is (a table, a
+	 * fence, an equation), and a place to add the next block from.
+	 */
+	import type { BlockEditActions } from '../action-contracts';
+	import { TAIL_ADD_BLOCK, TAIL_ADD_ROW } from '../a11y-strings';
+	import MenuIcon from './menu/MenuIcon.svelte';
+
+	let {
+		blockEdit,
+		childCount,
+		readOnly,
+		onPlus
+	}: {
+		blockEdit: BlockEditActions | undefined;
+		childCount: number;
+		readOnly: boolean;
+		/** The `+`: the editor appends the paragraph and opens the block menu over it. */
+		onPlus: (button: HTMLElement) => void;
+	} = $props();
+
+	// The mint's own focus lands the caret; the mousedown is swallowed so nothing else seats one.
+	function append(): void {
+		if (readOnly) return;
+		void blockEdit?.insertParagraph(childCount, '');
+	}
+</script>
+
+{#if !readOnly}
+	<div class="editor-tail">
+		<button
+			type="button"
+			class="editor-tail-plus"
+			aria-label={TAIL_ADD_BLOCK}
+			title={TAIL_ADD_BLOCK}
+			onmousedown={(e) => e.preventDefault()}
+			onclick={(e) => onPlus(e.currentTarget)}><MenuIcon name="plus" size={14} /></button
+		>
+		<button
+			type="button"
+			class="editor-tail-row"
+			aria-label={TAIL_ADD_ROW}
+			onmousedown={(e) => e.preventDefault()}
+			onclick={append}
+		></button>
+	</div>
+{/if}
+
+<style>
+	.editor-tail {
+		position: relative;
+		display: flex;
+		align-items: center;
+		height: 34px;
+		margin-top: 2px;
+	}
+	.editor-tail-row {
+		flex: 1;
+		height: 100%;
+		padding: 0;
+		border: 0;
+		background: transparent;
+		cursor: text;
+	}
+	.editor-tail-row:focus-visible {
+		outline: 1px solid var(--color-border, #3e3e3b);
+		outline-offset: -1px;
+		border-radius: 4px;
+	}
+	/* In the editor's gutter, exactly where a block's drag handle sits (`BlockDragHandle`): the
+	   root's 1rem padding holds a 0.85rem slot, and this is the handle of the imaginary last line. */
+	.editor-tail-plus {
+		position: absolute;
+		left: -1rem;
+		top: 50%;
+		transform: translateY(-50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 1rem;
+		height: 1rem;
+		padding: 0;
+		border: 0;
+		border-radius: 3px;
+		background: transparent;
+		color: var(--color-ui-muted, #8f8f89);
+		cursor: pointer;
+		opacity: 0;
+		transition: opacity 120ms ease-out;
+	}
+	.editor-tail:hover .editor-tail-plus,
+	.editor-tail-plus:focus-visible {
+		opacity: 1;
+	}
+	.editor-tail-plus:hover {
+		background: var(--color-ui-faint, rgba(255, 255, 255, 0.07));
+		color: var(--color-text-primary, #e8e8e5);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.editor-tail-plus {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/TailInsert.svelte.d.ts

@@ -0,0 +1,17 @@
+/**
+     * The row below the last block: a full-width strip that adds an empty paragraph at the end
+     * of the document and lands the caret in it, with a `+` in the left gutter that does the
+     * same — so there is always a way to write below whatever the last block is (a table, a
+     * fence, an equation), and a place to add the next block from.
+     */
+import type { BlockEditActions } from '../action-contracts';
+type $$ComponentProps = {
+    blockEdit: BlockEditActions | undefined;
+    childCount: number;
+    readOnly: boolean;
+    /** The `+`: the editor appends the paragraph and opens the block menu over it. */
+    onPlus: (button: HTMLElement) => void;
+};
+declare const TailInsert: import("svelte").Component<$$ComponentProps, {}, "">;
+type TailInsert = ReturnType<typeof TailInsert>;
+export default TailInsert;

package/dist/components/block-content-selector.d.ts

@@ -1,6 +1,6 @@
 /**
  * A block's content element is the first child of its `data-block-path` wrapper that is not chrome
- * wrapped around it (child order: badges, content, the code block's language chip, selection
+ * wrapped around it (child order: badges, content, the code block's rail, selection
  * overlay, decoration overlays, drag handle). One definition, shared by the runtime and the e2e
  * page-object.
  */
@@ -9,4 +9,8 @@
 export declare const BLOCK_CONTENT_SELECTOR = ":scope > :not(.selection-overlay):not(.decoration-badge)";
 /** For a Playwright `locator`, which enumerates ALL matches, so every chrome child
  *  must be named — the decoration overlay is one per painted mark, not per block. */
-export declare const BLOCK_CONTENT_LOCATOR_SELECTOR = ":scope > *:not(.selection-overlay):not(.decoration-overlay):not(.block-drag-handle):not(.decoration-badge):not(.code-lang-chip)";
+export declare const BLOCK_CONTENT_LOCATOR_SELECTOR = ":scope > *:not(.selection-overlay):not(.decoration-overlay):not(.block-drag-handle):not(.decoration-badge):not(.code-rail)";
+/** Marks the element a block's drag grip centres on (`drag-handle.ts`); absent, the block's
+ *  first line of text is it. Here rather than beside the handle so the ambient-prefix DOM
+ *  builder can set it without reaching into the components layer. */
+export declare const DRAG_ANCHOR_ATTR = "data-drag-anchor";

package/dist/components/block-content-selector.js

@@ -1,6 +1,6 @@
 /**
  * A block's content element is the first child of its `data-block-path` wrapper that is not chrome
- * wrapped around it (child order: badges, content, the code block's language chip, selection
+ * wrapped around it (child order: badges, content, the code block's rail, selection
  * overlay, decoration overlays, drag handle). One definition, shared by the runtime and the e2e
  * page-object.
  */
@@ -9,4 +9,8 @@
 export const BLOCK_CONTENT_SELECTOR = ':scope > :not(.selection-overlay):not(.decoration-badge)';
 /** For a Playwright `locator`, which enumerates ALL matches, so every chrome child
  *  must be named — the decoration overlay is one per painted mark, not per block. */
-export const BLOCK_CONTENT_LOCATOR_SELECTOR = ':scope > *:not(.selection-overlay):not(.decoration-overlay):not(.block-drag-handle):not(.decoration-badge):not(.code-lang-chip)';
+export const BLOCK_CONTENT_LOCATOR_SELECTOR = ':scope > *:not(.selection-overlay):not(.decoration-overlay):not(.block-drag-handle):not(.decoration-badge):not(.code-rail)';
+/** Marks the element a block's drag grip centres on (`drag-handle.ts`); absent, the block's
+ *  first line of text is it. Here rather than beside the handle so the ambient-prefix DOM
+ *  builder can set it without reaching into the components layer. */
+export const DRAG_ANCHOR_ATTR = 'data-drag-anchor';

package/dist/components/blocks/ThematicBreakBlock.svelte

@@ -72,13 +72,21 @@
 	export function runCommand(id: CommandId): boolean {
 		return reorderRunCommand(id, reorder, () => myPath);
 	}
+
+	// The rule has no text to measure, so any non-empty range over it is its whole box — what a
+	// range ending on it, or the rule taken as a unit, paints.
+	export function measurePartialRects(startOffset: number, endOffset: number): DOMRect[] {
+		if (endOffset <= startOffset || !boxEl) return [];
+		return [boxEl.getBoundingClientRect()];
+	}
 	void ({
 		editable,
 		focusable,
 		focus,
 		parkCaret,
 		getCursorOffset,
-		runCommand
+		runCommand,
+		measurePartialRects
 	} satisfies BlockComponent);
 
 	// ── Event Handlers ──────────────────────────────────────────────────
@@ -136,21 +144,26 @@
 		position: relative;
 	}
 
+	/* The rule is a hairline, so the SPACE around it is what reads as a division. Cramped
+	   padding on a heavy line reads as a border instead. */
 	.thematic-break-rule {
 		outline: none;
-		padding: 8px 0;
+		padding: 14px 0;
 	}
 
-	/* `:focus-within`: whole-block focus lands on the host, not the separator. */
+	/* `:focus-within`: whole-block focus lands on the host, not the separator. Painted as the
+	   SAME wash the selection overlay uses, not an accent ring: a rule that showed focus one
+	   way and selection another read as two different states of the same block. */
 	.thematic-break-block:focus-within .thematic-break-rule {
-		outline: 2px solid var(--color-accent, #567b67);
-		outline-offset: 2px;
+		background: var(--selection-overlay-bg, rgba(100, 150, 255, 0.3));
 		border-radius: 2px;
 	}
 
 	hr {
 		border: none;
-		border-top: 2px solid var(--color-ui-muted, #a4a4a4);
+		/* A hairline on the BORDER token, not the muted-UI one: a divider separates, and at
+		   2px of mid-grey it competed with the text it sits between. */
+		border-top: 1px solid var(--color-border, #3e3e3b);
 		margin: 0;
 	}
 </style>

package/dist/components/blocks/ThematicBreakBlock.svelte.d.ts

@@ -12,6 +12,7 @@ declare const ThematicBreakBlock: import("svelte").Component<$$ComponentProps, {
     parkCaret: (_offset: number) => void;
     getCursorOffset: () => number | null;
     runCommand: (id: CommandId) => boolean;
+    measurePartialRects: (startOffset: number, endOffset: number) => DOMRect[];
 }, "">;
 type ThematicBreakBlock = ReturnType<typeof ThematicBreakBlock>;
 export default ThematicBreakBlock;