@voithos-labs/aragonite 0.10.2 → 0.10.3

package/README.md

@@ -1,6 +1,8 @@
 # <img alt="header" src="docs/assets/header.png" />
 
-This project is an effort (perhaps in vain) to create a markdown editor that is both open source and not crap. In my book, this means that it has to be lossless, extensible, lean, fast, have a graceful ui/ux, and have a hella good plugin interface. So you know, just some simplistic and easy to achieve goals [^1] [^2].
+> Made for [Limestone Notes](https://limestone.app/) ([source](https://github.com/voithos-labs/limestone)), by [Voithos Labs](https://voithoslabs.com/).
+
+This project is an effort (perhaps in vain) to create a markdown editor that is both open source and not crap. In my book, this means that it has to be lossless, extensible, fast, have a graceful ui/ux, and have a hella good plugin interface. So you know, just some simplistic and easy to achieve goals [^1] [^2].
 
 Note that aragonite is a work in progress [^3]. It's written in typescript and svelte [^4] [^5] [^6] [^7], and tested on chromium browsers (chrome and edge) [^8]. Yes, there are plans to port to different frontend frameworks and test in different browsers. No, not right now, sometime in the future.
 
@@ -189,27 +191,12 @@ The one deliberate byte write a plugin makes is its own kind's raw rebuild, whic
 
 A plugin component that throws takes down its own block, which degrades to a readable fallback while its siblings keep working. Uninstall a plugin and every document written with it still round trips byte for byte, because unknown syntax is handled gracefully.
 
-Also, shipping a kind forces the boring questions up front: the registration type requires declaring how the kind behaves under all nine cross-cutting subsystems (round-tripping, focus, merge, selection, search, reordering, undo, clipboard, and how the fuzzer drives it), and registering enrolls it in a conformance battery that actually exercises those behaviors.
+Also, shipping a kind forces the boring questions up front: the registration type requires declaring how the kind behaves under all nine cross-cutting subsystems (round-tripping, focus, merge, selection, search, reordering, undo, clipboard, and how the fuzzer drives it), and registering enrolls it in a conformance battery: the headless half runs in your own test suite, the browser half in this repo's e2e sweep.
 
 This is the bet. Aragonite cannot top Obsidian in plugin count (in the short term, at least), but what it can try to do is trade plugin count for plugin quality. Score it against my three criterias: reach is the whole own a kind story above, safety is the lossless promise doing double duty, and ergonomics is the part I haven't argued yet, so here it is: svelte and typescript end to end, the entire authoring surface on one import path (`@voithos-labs/aragonite/plugin`), and a public testing seam so your plugin's own test suite isn't an afterthought.
 
 Does the design actually work in practice? Well, the nine bundled first party plugins (admonitions, details, footnotes, emoji, math, diagrams, table of contents, occurrence highlighting, and a party parrot) are built on the exact surface third parties get, so I would describe it as "so far, so good".
 
-# Lean
-
-Let's start by establishing the right context: most editors ship as a toolkit, and you assemble the editor yourself. CodeMirror is seven `@codemirror/*` packages plus a Lezer grammar; ProseMirror is `prosemirror-model` and `-state` and `-view` and `-transform` and however much glue you write to make them a product. Aragonite, on the other hand, is one library you import, with the parser, serializer, block editing, windowing, undo, selection, decorations, presentation modes, and the plugin platform already wired to each other.
-
-(Yes, there is a small set of dependencies. Two hard runtime dependencies: highlight.js, for code-block syntax colors, and esm-env, a few bytes of bundler-agnostic dev-flag resolution that svelte itself already depends on. Svelte is a peer you already have, and compiles to far less runtime than a virtual-DOM framework; katex and mermaid are optional peers, pulled in only if you use the math or diagram plugins. That is the whole tree.)
-
-Currently, the codebase lands at around 69k lines of typescript and svelte for the shipped library, roughly 6k of which is the nine bundled plugins [^13]. Here is where the lines actually went:
-
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="docs/assets/loc-dark.svg">
-  <img alt="Horizontal bar chart of the shipped library's lines of code by area: block UIs and rendering is the largest slice, then editing/commits/undo, the parser and serializer, selection, and the bundled plugins; the schema registry, invariants, public API, decorations, and windowing each take progressively smaller slices." src="docs/assets/loc-light.svg">
-</picture>
-
-I guess the number itself is nothing special, but the ratio turns out to be quite dense. A whole block editor (a full markdown parser and serializer, structural editing, windowing, cross-block selection, undo, decorations, five presentation modes, and a plugin platform) fits in a codebase one person can still realistically read end to end. The test suite, meanwhile, is ard 2.4x the size of the library (~168k lines), which says more about my paranoia than the leanness.
-
 # Fast
 
 Aragonite is fast, and its this way due to one main reason: the editor only mounts what you can see. A 10KB note and a 10MB document have the same number of live components on screen, so typing costs the same in both. This is, as people call it, windowing, and is also one of the reasons why the block editor model earned its keep.
@@ -310,9 +297,9 @@ Now, the numbers here depend on the machine; however, the scale of the numbers a
 
 Now, here's a conundrum Finn and I faced early on: we wanted Notion's uiux, but we (by we, I meant Finn) wanted a document, not a pile of blocks. In summary, we wanted the benefits of Notion's uiux in our uiux, not necessarily its look. Which is why even though under the hood aragonite is as much a block editor as Notion is, on the surface it reads like a document you are writing, not a fucking game of tetris.
 
-Notion never lets you forget you are in a builder. Hover any block and a drag grip and a plus button fade into the gutter; the surface is a scaffold, and a stray click + drag can rearrange the page. Obsidian sits at the other pole, and reads as a calm plain document, because under the hood it is one (a text buffer, with all of the limitations I mentioned before). Aragonite wants the best of both world: the calm surface and a real structure.
+Notion never lets you forget you are in a builder. Hover any block, a plain paragraph included, and a drag grip and a plus button fade into the gutter; the surface is a scaffold, and a stray click + drag can rearrange the page. Obsidian sits at the other pole, and reads as a calm plain document, because under the hood it is one (a text buffer, with all of the limitations I mentioned before). Aragonite wants the best of both world: the calm surface and a real structure.
 
-So, if you open aragonite, the blocks are there, mostly invisible. No card chrome, no per block outline, no gutter furniture by default. The reorder handle is off unless you ask for it, and even then only appears on hover; keyboard reorder is always available and shows nothing until you use it.
+So, if you open aragonite, the blocks are there, mostly invisible. No card chrome, no per block outline, and prose never grows a handle. The blocks you would pick up whole (a table, a picture, a code block, a list item, a divider) get one on hover, and you turn that off easily (`blockDragHandles={false}`); keyboard reorder is always available and shows nothing until you use it.
 
 Oh, live preview? You think I forgot about it? nah. By default, markdown syntax stays visible but dimmed. Aragonite provide the `presentationMode` prop, which dials the same document along a spectrum, from the raw side to the rendered side:
 
@@ -361,8 +348,6 @@ Aragonite is free software, released under [AGPL-3.0-or-later](./LICENSE): use i
 
 [^12]: ProseMirror friends: yes, this means no `StateField`. The forward-mapping problem it solves is downstream of positions being integers into a flat sequence. Ours aren't.
 
-[^13]: counted from the tracked `src/lib` source, excluding the tests; `scripts/render-loc-chart.mjs` does the counting and draws the chart above. Give or take a refactor.
-
 [^14]: before anyone suggests it: CSS `content-visibility` is not this. It skips paint and layout but leaves the components mounted, and the cost that matters here is script, not layout.
 
 [^15]: don't you dare try it lol

package/THIRD-PARTY-NOTICES.md

@@ -63,6 +63,31 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 ```
 
+## Lucide (ISC)
+
+The editor's own chrome embeds icon path data from Lucide: the code block's rail
+(`src/lib/components/blocks/code/CodeBlockRail.svelte`) and the menus, the image toolbar and the
+demo's selection bar (`src/lib/components/menu/MenuIcon.svelte`). The paths are inlined rather
+than taken as a dependency; no Lucide code ships.
+
+```
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+```
+
 ## WHATWG HTML Standard (CC BY 4.0)
 
 `src/lib/core/inline/html-entities.ts` vendors the named-character-reference table from <https://html.spec.whatwg.org/entities.json>.

package/dist/a11y-strings.d.ts

@@ -9,11 +9,23 @@ export declare const FAILED_BLOCK_LABEL = "Block failed to render";
 export declare const GAP_CARET_LABEL = "Insertion point between blocks";
 export declare const WHOLE_BLOCK_INPUT_LABEL = "Focused block input";
 export declare const IMAGE_PROPERTIES_LABEL = "Image properties";
+export declare const IMAGE_ALT_FIELD = "Alt text";
+export declare const IMAGE_ALT_PLACEHOLDER = "Describe the image";
+export declare const IMAGE_CROP = "Crop image";
+export declare const IMAGE_CROP_APPLY = "Apply crop";
+export declare const IMAGE_CROP_CANCEL = "Cancel crop";
+export declare const IMAGE_REMOVE = "Remove image";
 export declare const LINK_CARD_LABEL = "Link properties";
 export declare const LINK_CARD_URL = "Link URL";
 export declare const LINK_CARD_OPEN = "Open link";
 export declare const LINK_CARD_REMOVE = "Remove link";
 export declare const CODE_LANGUAGE_FIELD = "Code block language";
+export declare const CODE_RUN_LABEL = "Run code block";
+export declare const CODE_COPY_LABEL = "Copy code";
+export declare const CODE_COPIED_LABEL = "Code copied";
+export declare const CODE_MENU_LABEL = "Code block actions";
+export declare const CODE_RAIL_LABEL = "Code block controls";
+export declare const CODE_LANGUAGE_LIST = "Code block languages";
 /** Chrome, not an announcement: the language chip's accessible name. */
 export declare function codeLanguageLabel(language: string): string;
 export declare const SEARCH_TOGGLE_REPLACE = "Toggle replace";
@@ -30,6 +42,12 @@ export declare const SEARCH_CLOSE_TITLE = "Close";
 export declare const SEARCH_CLOSE_LABEL = "Close search";
 export declare const TABLE_ACTIONS = "Table actions";
 export declare const COLUMN_ALIGNMENT = "Column alignment";
+export declare const ADD_ROW_BELOW = "Add row";
+export declare const ADD_COLUMN_RIGHT = "Add column";
+export declare const TAIL_ADD_ROW = "Add a line below";
+export declare const TAIL_ADD_BLOCK = "Add a block";
+export declare const BLOCK_MENU_LABEL = "Insert a block";
+export declare const BLOCK_ACTIONS_LABEL = "Block actions";
 export declare const ALIGN_LEFT = "Left";
 export declare const ALIGN_CENTER = "Center";
 export declare const ALIGN_RIGHT = "Right";

package/dist/a11y-strings.js

@@ -9,11 +9,23 @@ export const FAILED_BLOCK_LABEL = 'Block failed to render';
 export const GAP_CARET_LABEL = 'Insertion point between blocks';
 export const WHOLE_BLOCK_INPUT_LABEL = 'Focused block input';
 export const IMAGE_PROPERTIES_LABEL = 'Image properties';
+export const IMAGE_ALT_FIELD = 'Alt text';
+export const IMAGE_ALT_PLACEHOLDER = 'Describe the image';
+export const IMAGE_CROP = 'Crop image';
+export const IMAGE_CROP_APPLY = 'Apply crop';
+export const IMAGE_CROP_CANCEL = 'Cancel crop';
+export const IMAGE_REMOVE = 'Remove image';
 export const LINK_CARD_LABEL = 'Link properties';
 export const LINK_CARD_URL = 'Link URL';
 export const LINK_CARD_OPEN = 'Open link';
 export const LINK_CARD_REMOVE = 'Remove link';
 export const CODE_LANGUAGE_FIELD = 'Code block language';
+export const CODE_RUN_LABEL = 'Run code block';
+export const CODE_COPY_LABEL = 'Copy code';
+export const CODE_COPIED_LABEL = 'Code copied';
+export const CODE_MENU_LABEL = 'Code block actions';
+export const CODE_RAIL_LABEL = 'Code block controls';
+export const CODE_LANGUAGE_LIST = 'Code block languages';
 /** Chrome, not an announcement: the language chip's accessible name. */
 export function codeLanguageLabel(language) {
     return `Code language: ${language}`;
@@ -35,6 +47,12 @@ export const SEARCH_CLOSE_LABEL = 'Close search';
 // ── Table action menu ────────────────────────────────────────────────────────
 export const TABLE_ACTIONS = 'Table actions';
 export const COLUMN_ALIGNMENT = 'Column alignment';
+export const ADD_ROW_BELOW = 'Add row';
+export const ADD_COLUMN_RIGHT = 'Add column';
+export const TAIL_ADD_ROW = 'Add a line below';
+export const TAIL_ADD_BLOCK = 'Add a block';
+export const BLOCK_MENU_LABEL = 'Insert a block';
+export const BLOCK_ACTIONS_LABEL = 'Block actions';
 export const ALIGN_LEFT = 'Left';
 export const ALIGN_CENTER = 'Center';
 export const ALIGN_RIGHT = 'Right';

package/dist/action-contracts.d.ts

@@ -5,7 +5,7 @@
 import type { CstNode, TableAlignment } from './core/nodes';
 import type { NodeView } from './core/node-views';
 import type { StructuralChange } from './tree-operations/structural-change';
-import type { TrackedPosition } from './tree-operations/node-ops';
+import type { TrackedPosition } from './tree-operations/settle';
 import type { SharingState } from './tree-operations/sharing';
 import type { BlockComponent, FocusPosition } from './block-component';
 import type { ScopedOpDescriptor } from './schema/operations';
@@ -290,6 +290,12 @@ export interface TableContext {
     cycleAlignment(colIdx: number): Promise<void>;
     /** Set a column's alignment directly — distinct from the cycle step. */
     setColumnAlignment(colIdx: number, alignment: TableAlignment): Promise<void>;
+    /** Write a grid of cell texts from `origin`, appending the rows and columns it needs, as one
+     *  commit: a spreadsheet-like paste. Empty grids are a no-op. */
+    pasteGrid(origin: {
+        rowIdx: number;
+        colIdx: number;
+    }, grid: string[][]): Promise<void>;
 }
 /**
  * The TableContext mutations addressed by ONE axis index, the vocabulary the affordance

package/dist/ambient/ambient-dom.js

@@ -2,6 +2,7 @@
  * DOM construction and lookup for the ambient marker span — the read-only
  * prefix container blocks contribute to their first prose child's textContent.
  */
+import { DRAG_ANCHOR_ATTR } from '../components/block-content-selector';
 import { domDescendants } from '../cursor/dom-walk';
 import { isAtomicInlineWidget, isHiddenMarkerText } from '../cursor/widget-offset';
 import { devWarn } from '../dev-warn';
@@ -10,7 +11,8 @@ export function buildAmbientSpan(prefix) {
     const outer = document.createElement('span');
     outer.className = 'md-marker';
     outer.setAttribute('contenteditable', 'false');
-    const ranges = normalized.interactive ?? [];
+    // Document order, whatever order the host listed them in: the walk below is a single pass.
+    const ranges = [...(normalized.interactive ?? [])].sort((a, b) => a.start - b.start);
     let cursor = 0;
     for (const range of ranges) {
         if (range.start < 0 || range.end > normalized.text.length || range.start >= range.end) {
@@ -30,6 +32,8 @@ export function buildAmbientSpan(prefix) {
         if (range.ariaChecked !== undefined) {
             inner.setAttribute('aria-checked', String(range.ariaChecked));
         }
+        if (range.dragAnchor)
+            inner.setAttribute(DRAG_ANCHOR_ATTR, '');
         inner.textContent = normalized.text.slice(range.start, range.end);
         inner.addEventListener('click', range.onClick);
         outer.appendChild(inner);

package/dist/block-component.d.ts

@@ -71,6 +71,8 @@ export interface AmbientInteractiveRange {
     className: string;
     role?: 'checkbox';
     ariaChecked?: boolean;
+    /** The block's drag grip centres on this span's box rather than on its text line. */
+    dragAnchor?: boolean;
     /** The click lands on the range's own span, before the leaf's caret handling; a handler
      *  reading the chord (`isWidgetActivationClick`) stops propagation to keep the gesture. */
     onClick: (e: MouseEvent) => void;
@@ -78,6 +80,11 @@ export interface AmbientInteractiveRange {
 export type AmbientPrefix = string | {
     text: string;
     interactive?: AmbientInteractiveRange[];
+    /**
+     * The hanging indent the rendered prefix needs, when its painted width is not its text
+     * width (a task item's `- [ ] ` paints as one box). Defaults to one `ch` per character.
+     */
+    indent?: string;
 };
 /**
  * The props BlockHost passes every block component; a registry `extraProps` may add
@@ -145,6 +152,13 @@ export interface BlockComponent {
      * surfaces with no such snap.
      */
     snapCaretToPoint?(clientX: number, clientY: number): void;
+    /**
+     * A press beside the block (the editor's margin, the host's own padding) that may become a
+     * drag: start the block's OWN drag anchored at the leaf nearest the point — a table's cell
+     * rectangle — exactly as a press on that leaf would. True when it did; false leaves the press
+     * to the editor's generic drag.
+     */
+    startDragAtPoint?(clientX: number, clientY: number, event: PointerEvent): boolean;
     /**
      * Descend child indices to the BlockComponent at the leaf, or null if the path
      * doesn't resolve. Empty `path` returns this component. Containers implement it.

package/dist/components/BlockDragHandle.svelte

@@ -1,30 +1,35 @@
 <script lang="ts">
 	import { DRAG_HANDLE_TITLE } from '../a11y-strings';
+	import MenuIcon from './menu/MenuIcon.svelte';
+	import { alignDragHandle } from './drag-handle';
 </script>
 
 <!-- aria-hidden + non-focusable: keyboard reorder (Alt+Arrow) is the operable,
 	screen-reader-visible path, so this mouse-only grip stays out of the tab/SR flow. -->
-<span class="block-drag-handle" aria-hidden="true" title={DRAG_HANDLE_TITLE}>
-	<span class="grip"><span class="dots"></span></span>
+<span
+	class="block-drag-handle"
+	aria-hidden="true"
+	title={DRAG_HANDLE_TITLE}
+	{@attach alignDragHandle}
+>
+	<span class="grip"><MenuIcon name="grip-vertical" size={16} /></span>
 </span>
 
 <style>
 	.block-drag-handle {
 		position: absolute;
-		/* Sits inside the editor's own 1rem padding, so the grip clears the block's left
+		/* Sits inside the editor's own left padding, so the grip clears the block's left
 		   border instead of being clipped behind it (overflow-x:auto). */
-		left: -0.85rem;
+		left: -1.25rem;
 		/* Spans gutter to content-left (width === |left|) so a pointer gliding from the
 		   block never crosses an un-hovered gap, which would hide the handle and — being
 		   pointer-events:none once hidden — strand it. Stopping AT content-left keeps
 		   line-start caret/marker clicks from being hijacked into a drag. */
-		width: 0.85rem;
+		width: 1.25rem;
 		/* Full-height hit strip so the handle is reachable at ANY height; the visible
-		   grip aligns to the first line. */
+		   grip sits on the block's first line. */
 		top: 0;
 		bottom: 0;
-		display: flex;
-		align-items: flex-start;
 		opacity: 0;
 		pointer-events: none;
 		cursor: grab;
@@ -32,35 +37,41 @@
 		color: var(--color-ui-muted, #a4a4a4);
 	}
 
-	/* One line-height box so the dots sit on the first line; a block with a divergent
-	   inner line-height is off by a few px, which is cosmetic — reachability rides the strip. */
+	/* Flush left in the strip (the glyph ends a few px clear of the content), centred on the
+	   measured band that `alignDragHandle` writes as an inline `top`.
+
+	   ALWAYS hittable, unlike the strip around it: a grip reachable only by first hovering its
+	   block is a flyout you traverse the block to get to. Its own box, not the full-height
+	   strip, which would swallow every gutter click the block has. */
 	.grip {
+		position: absolute;
+		left: 0;
+		width: 100%;
+		height: 1.25rem;
+		top: 0.5lh;
+		transform: translateY(-50%);
 		display: flex;
 		align-items: center;
-		height: 1lh;
+		justify-content: flex-start;
+		pointer-events: auto;
 	}
 
-	.dots {
-		display: block;
-		width: 0.5rem;
-		height: 0.85rem;
-		background-image: radial-gradient(currentColor 40%, transparent 45%);
-		background-size: 0.25rem 0.28rem;
+	/* The hit target is bigger than the glyph: a 16px box in a gutter is a target the pointer
+	   misses between two rows, and a miss here reads as the grip belonging to the block above.
+	   Never past the strip's right edge, which is the content's first character. */
+	.grip::before {
+		content: '';
+		position: absolute;
+		inset: -8px 0 -8px -4px;
 	}
 
-	/* Touch never fires the hover reveal, so the handle shows unasked. The pointer goes to the
-	   grip rather than the full-height strip, which would make the whole gutter unscrollable. */
+	/* Touch never fires the hover reveal, so the handle shows unasked. */
 	@media (hover: none) {
 		.block-drag-handle {
 			opacity: 1;
 		}
 		.grip {
-			pointer-events: auto;
 			touch-action: none;
-			/* The whole gutter slot, not just the dots: 1rem of editor padding is all the width
-			   there is, and any more would reach over the line's first character. */
-			width: 100%;
-			justify-content: center;
 		}
 	}
 </style>

package/dist/components/BlockHost.svelte

@@ -13,6 +13,7 @@
 	import SelectionOverlay from './SelectionOverlay.svelte';
 	import DecorationOverlay from './DecorationOverlay.svelte';
 	import BlockDragHandle from './BlockDragHandle.svelte';
+	import { showsDragHandle } from './drag-handle';
 	import TextEditableBlock from './blocks/text/TextEditableBlock.svelte';
 	import { defaultRegistryView } from '../schema/registry-view';
 	import { FAILED_BLOCK_LABEL } from '../a11y-strings';
@@ -59,12 +60,16 @@
 	const getDoc = getContext<EditorDoc | undefined>(EDITOR_DOC_KEY)?.doc;
 	// Stable object, so a plain read rather than a getter.
 	const rects = services?.rects;
-	const getDragHandles = getContext<EditorPolicies | undefined>(
-		EDITOR_POLICIES_KEY
-	)?.blockDragHandles;
+	const policies = getContext<EditorPolicies | undefined>(EDITOR_POLICIES_KEY);
+	const getDragHandles = policies?.blockDragHandles;
 	// $derived, not a mount-time snapshot: a runtime prop toggle must reach blocks
 	// that window in after the change.
 	const dragHandles = $derived(getDragHandles?.() ?? false);
+	// The affordance opt-in already folds reading mode in, but a picture's grip does not wait
+	// for that opt-in, so reading mode is asked here too.
+	const isReading = $derived(policies?.presentationMode?.() === 'reading');
+	// A reorder unit without a grip (a paragraph) is still a drop neighbour and keyboard-movable.
+	const showsHandle = $derived(reorderable && !isReading && showsDragHandle(node, dragHandles));
 
 	let myPath = $derived([...parentPath, index]);
 
@@ -167,7 +172,7 @@
 
 	// A block can grow after mount without its `raw` changing (async content decoding
 	// in), which the effect above never sees, and overflow-anchor is off so the growth
-	// would slide the viewport. The scope gates on the height it already recorded.
+	// would slide the viewport. The scope gates on the height it last applied.
 	$effect(() => {
 		if (!hostEl || !measureChannel) return;
 		const observer = new ResizeObserver((entries) => {
@@ -233,7 +238,7 @@
 <div
 	class={[
 		'block-host',
-		{ 'reorder-host': reorderable && dragHandles },
+		{ 'reorder-host': reorderable && dragHandles, 'handle-host': showsHandle },
 		...blockDecs.flatMap((d) => d.class ?? [])
 	]}
 	data-block-path={JSON.stringify(myPath)}
@@ -291,7 +296,7 @@
 	/>
 	<!-- Rendered LAST so the block-el lookup still resolves block content as its
 		 first match. -->
-	{#if reorderable && dragHandles}
+	{#if showsHandle}
 		<BlockDragHandle />
 	{/if}
 </div>
@@ -302,9 +307,11 @@
 	}
 
 	/* Pure-CSS hover reveal: no per-block reactive state on a path whose cost scales
-	   with mounted-component count. Global because reorder hosts nest; the `:not(:has(
-	   ...))` reveals the innermost hovered handle, not a staircase of ancestors. */
-	:global(.reorder-host:hover:not(:has(.reorder-host:hover)) > .block-drag-handle) {
+	   with mounted-component count. Global because handle hosts nest; the `:not(:has(
+	   ...))` reveals the innermost hovered handle, not a staircase of ancestors. A gripless
+	   unit (a paragraph in a quote) is no host, so hovering it reveals its container's. */
+	:global(.handle-host:hover:not(:has(.handle-host:hover)) > .block-drag-handle),
+	:global(.block-drag-handle:hover) {
 		opacity: 1;
 		pointer-events: auto;
 	}