@threadlabs/looma 0.7.1 → 0.7.3

package/editor/chunks/extensions.js

@@ -1,14 +1,79 @@
 import { n as TABLE_CELL_BACKGROUND_PRESETS } from "./table-backgrounds.js";
 import { Extension, Mark, Node, callOrReturn, canInsertNode, combineTransactionSteps, escapeForRegEx, findChildren, findChildrenInRange, findParentNodeClosestToPos, getAttributes, getChangedRanges, getExtensionField, getMarksBetween, isNodeEmpty, isNodeSelection, markInputRule, markPasteRule, mergeAttributes, nodeInputRule, textInputRule, textblockTypeInputRule, wrappingInputRule } from "@tiptap/core";
 import { NodeSelection, Plugin, PluginKey, Selection, TextSelection } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import { history, redo, undo } from "@tiptap/pm/history";
 import { dropCursor } from "@tiptap/pm/dropcursor";
 import { gapCursor } from "@tiptap/pm/gapcursor";
-import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import { common, createLowlight } from "lowlight";
 import { DOMParser, Node as Node$1 } from "@tiptap/pm/model";
 import MarkdownIt from "markdown-it";
 import { CellSelection, TableMap, addColumn, addColumnAfter, addColumnBefore, addRow, addRowAfter, addRowBefore, cellAround, columnResizing, deleteCellSelection, deleteColumn, deleteRow, deleteTable, fixTables, goToNextCell, mergeCells, setCellAttr, splitCell, tableEditing, toggleHeader, toggleHeaderCell } from "@tiptap/pm/tables";
+//#region src/editor/extensions/active-block.ts
+/**
+* Marks the top-level block holding the caret so a stylesheet can show where
+* editing is happening without drawing chrome inside the reading column.
+*
+* The decoration lands on the document's direct child, not on the textblock the
+* caret sits in: a marker that tracked the caret's own line would move on every
+* wrap and every arrow key, and one that tracked a nested list item would step
+* in and out of the list's inset. The outermost block is the stable answer to
+* "where am I", which is the question the marker exists to answer.
+*/
+/** Class applied to the decorated block; `looma-editor.css` owns its appearance. */
+var LOOMA_ACTIVE_BLOCK_CLASS = "looma-active-block";
+/** Plugin state is the editor's focus, so the marker is absent while reading. */
+var LoomaActiveBlockPluginKey = new PluginKey("loomaActiveBlock");
+/**
+* Decorates the outermost block containing the selection head while the editor
+* has focus.
+*
+* @contract Adds `LOOMA_ACTIVE_BLOCK_CLASS` to at most one top-level block, and
+* nothing at all when the editor is unfocused or not editable. The document is
+* never modified.
+* @invariant Focus is tracked in plugin state rather than read from the editor,
+* so the decoration recomputes on focus and blur even when neither changes the
+* selection.
+* @ownership The consuming stylesheet owns every visual property; this extension
+* owns only which block carries the class.
+*/
+var LoomaActiveBlock = Extension.create({
+	name: "loomaActiveBlock",
+	addProseMirrorPlugins() {
+		return [new Plugin({
+			key: LoomaActiveBlockPluginKey,
+			state: {
+				init: () => false,
+				apply: (transaction, focused) => {
+					const next = transaction.getMeta(LoomaActiveBlockPluginKey);
+					return typeof next === "boolean" ? next : focused;
+				}
+			},
+			props: {
+				handleDOMEvents: {
+					focus: (view) => {
+						view.dispatch(view.state.tr.setMeta(LoomaActiveBlockPluginKey, true));
+						return false;
+					},
+					blur: (view) => {
+						view.dispatch(view.state.tr.setMeta(LoomaActiveBlockPluginKey, false));
+						return false;
+					}
+				},
+				decorations: (state) => {
+					if (!LoomaActiveBlockPluginKey.getState(state)) return null;
+					const { $head } = state.selection;
+					if ($head.depth === 0) return null;
+					const from = $head.before(1);
+					const block = state.doc.nodeAt(from);
+					if (!block) return null;
+					return DecorationSet.create(state.doc, [Decoration.node(from, from + block.nodeSize, { class: LOOMA_ACTIVE_BLOCK_CLASS })]);
+				}
+			}
+		})];
+	}
+});
+//#endregion
 //#region src/editor/extensions/callout.ts
 /** Canonical tone values that may be persisted in a Looma callout node. */
 var LOOMA_CALLOUT_TONES = [
@@ -6631,7 +6696,8 @@ function getDefaultEditorExtensions(options = {}) {
 		}),
 		...mention ? [mention] : [],
 		LoomaTableKit,
-		LoomaListBehavior
+		LoomaListBehavior,
+		LoomaActiveBlock
 	];
 }
 //#endregion
@@ -7264,4 +7330,4 @@ function createLoomaSlashCommandExtension(options = {}) {
 	});
 }
 //#endregion
-export { DEFAULT_MENTION_RESULT_LIMIT as C, LOOMA_CALLOUT_TONES as D, normalizeMentionResultLimit as E, LoomaCallout as O, createLoomaMentionExtension as S, filterLoomaMentionItems as T, getActiveTableCellBackground as _, handleTableAction as a, LoomaSmartPaste as b, normalizeActiveTableColumnWidths as c, getDefaultEditorExtensions as d, getLoomaTableExtensions as f, getActiveTableCellAlignment as g, LoomaTableHeader as h, getActiveTableUiState as i, shouldShowTextFormattingToolbar as l, LoomaTableCell as m, createLoomaSlashCommandExtension as n, handleTableOverlayAction as o, LoomaTable as p, getDefaultSlashCommands as r, insertTableAtRange as s, LoomaSlashCommand as t, LoomaTableKit as u, setActiveTableCellAlignment as v, MAX_MENTION_RESULT_LIMIT as w, LoomaMentionSuggestionPluginKey as x, setActiveTableCellBackground as y };
+export { LoomaActiveBlock as A, DEFAULT_MENTION_RESULT_LIMIT as C, LOOMA_CALLOUT_TONES as D, normalizeMentionResultLimit as E, LoomaCallout as O, createLoomaMentionExtension as S, filterLoomaMentionItems as T, getActiveTableCellBackground as _, handleTableAction as a, LoomaSmartPaste as b, normalizeActiveTableColumnWidths as c, getDefaultEditorExtensions as d, getLoomaTableExtensions as f, getActiveTableCellAlignment as g, LoomaTableHeader as h, getActiveTableUiState as i, LoomaActiveBlockPluginKey as j, LOOMA_ACTIVE_BLOCK_CLASS as k, shouldShowTextFormattingToolbar as l, LoomaTableCell as m, createLoomaSlashCommandExtension as n, handleTableOverlayAction as o, LoomaTable as p, getDefaultSlashCommands as r, insertTableAtRange as s, LoomaSlashCommand as t, LoomaTableKit as u, setActiveTableCellAlignment as v, MAX_MENTION_RESULT_LIMIT as w, LoomaMentionSuggestionPluginKey as x, setActiveTableCellBackground as y };

package/editor/extensions/active-block.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Marks the top-level block holding the caret so a stylesheet can show where
+ * editing is happening without drawing chrome inside the reading column.
+ *
+ * The decoration lands on the document's direct child, not on the textblock the
+ * caret sits in: a marker that tracked the caret's own line would move on every
+ * wrap and every arrow key, and one that tracked a nested list item would step
+ * in and out of the list's inset. The outermost block is the stable answer to
+ * "where am I", which is the question the marker exists to answer.
+ */
+import { Extension } from "@tiptap/core";
+import { PluginKey } from "@tiptap/pm/state";
+/** Class applied to the decorated block; `looma-editor.css` owns its appearance. */
+export declare const LOOMA_ACTIVE_BLOCK_CLASS = "looma-active-block";
+/** Plugin state is the editor's focus, so the marker is absent while reading. */
+export declare const LoomaActiveBlockPluginKey: PluginKey<boolean>;
+/**
+ * Decorates the outermost block containing the selection head while the editor
+ * has focus.
+ *
+ * @contract Adds `LOOMA_ACTIVE_BLOCK_CLASS` to at most one top-level block, and
+ * nothing at all when the editor is unfocused or not editable. The document is
+ * never modified.
+ * @invariant Focus is tracked in plugin state rather than read from the editor,
+ * so the decoration recomputes on focus and blur even when neither changes the
+ * selection.
+ * @ownership The consuming stylesheet owns every visual property; this extension
+ * owns only which block carries the class.
+ */
+export declare const LoomaActiveBlock: Extension<any, any>;

package/editor/extensions/index.d.ts

@@ -6,6 +6,7 @@
  * application owns wiring and editor-instance lifetime. Tiptap remains a peer
  * dependency so Looma and the host execute against the same editor runtime.
  */
+export { LOOMA_ACTIVE_BLOCK_CLASS, LoomaActiveBlock, LoomaActiveBlockPluginKey, } from "./active-block.js";
 export { LoomaCallout, LOOMA_CALLOUT_TONES, type LoomaCalloutTone, } from "./callout.js";
 export { getDefaultEditorExtensions, getLoomaTableExtensions, LoomaTableKit, type DefaultEditorExtensionsOptions, } from "./preset.js";
 export { LoomaSmartPaste } from "./smart-paste.js";

package/editor/extensions/index.js

@@ -1,3 +1,3 @@
 import { n as TABLE_CELL_BACKGROUND_PRESETS } from "../chunks/table-backgrounds.js";
-import { C as DEFAULT_MENTION_RESULT_LIMIT, D as LOOMA_CALLOUT_TONES, E as normalizeMentionResultLimit, O as LoomaCallout, S as createLoomaMentionExtension, T as filterLoomaMentionItems, _ as getActiveTableCellBackground, a as handleTableAction, b as LoomaSmartPaste, c as normalizeActiveTableColumnWidths, d as getDefaultEditorExtensions, f as getLoomaTableExtensions, g as getActiveTableCellAlignment, h as LoomaTableHeader, i as getActiveTableUiState, l as shouldShowTextFormattingToolbar, m as LoomaTableCell, n as createLoomaSlashCommandExtension, o as handleTableOverlayAction, p as LoomaTable, r as getDefaultSlashCommands, s as insertTableAtRange, t as LoomaSlashCommand, u as LoomaTableKit, v as setActiveTableCellAlignment, w as MAX_MENTION_RESULT_LIMIT, x as LoomaMentionSuggestionPluginKey, y as setActiveTableCellBackground } from "../chunks/extensions.js";
-export { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_CALLOUT_TONES, LoomaCallout, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, LoomaSmartPaste, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, MAX_MENTION_RESULT_LIMIT, TABLE_CELL_BACKGROUND_PRESETS, createLoomaMentionExtension, createLoomaSlashCommandExtension, filterLoomaMentionItems, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, handleTableAction, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, normalizeMentionResultLimit, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar };
+import { A as LoomaActiveBlock, C as DEFAULT_MENTION_RESULT_LIMIT, D as LOOMA_CALLOUT_TONES, E as normalizeMentionResultLimit, O as LoomaCallout, S as createLoomaMentionExtension, T as filterLoomaMentionItems, _ as getActiveTableCellBackground, a as handleTableAction, b as LoomaSmartPaste, c as normalizeActiveTableColumnWidths, d as getDefaultEditorExtensions, f as getLoomaTableExtensions, g as getActiveTableCellAlignment, h as LoomaTableHeader, i as getActiveTableUiState, j as LoomaActiveBlockPluginKey, k as LOOMA_ACTIVE_BLOCK_CLASS, l as shouldShowTextFormattingToolbar, m as LoomaTableCell, n as createLoomaSlashCommandExtension, o as handleTableOverlayAction, p as LoomaTable, r as getDefaultSlashCommands, s as insertTableAtRange, t as LoomaSlashCommand, u as LoomaTableKit, v as setActiveTableCellAlignment, w as MAX_MENTION_RESULT_LIMIT, x as LoomaMentionSuggestionPluginKey, y as setActiveTableCellBackground } from "../chunks/extensions.js";
+export { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_ACTIVE_BLOCK_CLASS, LOOMA_CALLOUT_TONES, LoomaActiveBlock, LoomaActiveBlockPluginKey, LoomaCallout, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, LoomaSmartPaste, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, MAX_MENTION_RESULT_LIMIT, TABLE_CELL_BACKGROUND_PRESETS, createLoomaMentionExtension, createLoomaSlashCommandExtension, filterLoomaMentionItems, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, handleTableAction, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, normalizeMentionResultLimit, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar };

package/editor/index.js

@@ -1,6 +1,6 @@
 import { n as TABLE_CELL_BACKGROUND_PRESETS, t as TABLE_CELL_BACKGROUND_OPTIONS } from "./chunks/table-backgrounds.js";
 import { n as resolveTableCellAt, t as measureTableOverlayGeometry } from "./chunks/ui.js";
-import { C as DEFAULT_MENTION_RESULT_LIMIT, D as LOOMA_CALLOUT_TONES, E as normalizeMentionResultLimit, O as LoomaCallout, S as createLoomaMentionExtension, T as filterLoomaMentionItems, _ as getActiveTableCellBackground, a as handleTableAction, b as LoomaSmartPaste, c as normalizeActiveTableColumnWidths, d as getDefaultEditorExtensions, f as getLoomaTableExtensions, g as getActiveTableCellAlignment, h as LoomaTableHeader, i as getActiveTableUiState, l as shouldShowTextFormattingToolbar, m as LoomaTableCell, n as createLoomaSlashCommandExtension, o as handleTableOverlayAction, p as LoomaTable, r as getDefaultSlashCommands, s as insertTableAtRange, t as LoomaSlashCommand, u as LoomaTableKit, v as setActiveTableCellAlignment, w as MAX_MENTION_RESULT_LIMIT, x as LoomaMentionSuggestionPluginKey, y as setActiveTableCellBackground } from "./chunks/extensions.js";
+import { A as LoomaActiveBlock, C as DEFAULT_MENTION_RESULT_LIMIT, D as LOOMA_CALLOUT_TONES, E as normalizeMentionResultLimit, O as LoomaCallout, S as createLoomaMentionExtension, T as filterLoomaMentionItems, _ as getActiveTableCellBackground, a as handleTableAction, b as LoomaSmartPaste, c as normalizeActiveTableColumnWidths, d as getDefaultEditorExtensions, f as getLoomaTableExtensions, g as getActiveTableCellAlignment, h as LoomaTableHeader, i as getActiveTableUiState, j as LoomaActiveBlockPluginKey, k as LOOMA_ACTIVE_BLOCK_CLASS, l as shouldShowTextFormattingToolbar, m as LoomaTableCell, n as createLoomaSlashCommandExtension, o as handleTableOverlayAction, p as LoomaTable, r as getDefaultSlashCommands, s as insertTableAtRange, t as LoomaSlashCommand, u as LoomaTableKit, v as setActiveTableCellAlignment, w as MAX_MENTION_RESULT_LIMIT, x as LoomaMentionSuggestionPluginKey, y as setActiveTableCellBackground } from "./chunks/extensions.js";
 import { AlignCenter, AlignLeft, AlignRight, Bold, Braces, ChevronDown, ChevronLeft, CircleCheck, CircleX, CodeXml, Columns3, Ellipsis, Eraser, GripHorizontal, GripVertical, Heading1, Heading2, Heading3, Highlighter, Image, Info, Italic, List, ListOrdered, ListTodo, Merge, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Pilcrow, Plus, Quote, Redo2, Rows3, Split, Strikethrough, Table2, Trash2, TriangleAlert, Underline, Undo2 } from "lucide";
 //#region src/editor/icons.ts
 /** The opinionated Lucide set used by Looma's shipped interaction surfaces. */
@@ -94,4 +94,4 @@ function getVisualViewportRect(owner = window) {
 	};
 }
 //#endregion
-export { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_CALLOUT_TONES, LOOMA_ICONS, LoomaCallout, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, LoomaSmartPaste, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, MAX_MENTION_RESULT_LIMIT, TABLE_CELL_BACKGROUND_OPTIONS, TABLE_CELL_BACKGROUND_PRESETS, createLoomaMentionExtension, createLoomaSlashCommandExtension, filterLoomaMentionItems, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, getVisualViewportRect, handleTableAction, handleTableOverlayAction, insertTableAtRange, loomaIconMarkup, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeMentionResultLimit, resolveTableCellAt, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar };
+export { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_ACTIVE_BLOCK_CLASS, LOOMA_CALLOUT_TONES, LOOMA_ICONS, LoomaActiveBlock, LoomaActiveBlockPluginKey, LoomaCallout, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, LoomaSmartPaste, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, MAX_MENTION_RESULT_LIMIT, TABLE_CELL_BACKGROUND_OPTIONS, TABLE_CELL_BACKGROUND_PRESETS, createLoomaMentionExtension, createLoomaSlashCommandExtension, filterLoomaMentionItems, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, getVisualViewportRect, handleTableAction, handleTableOverlayAction, insertTableAtRange, loomaIconMarkup, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeMentionResultLimit, resolveTableCellAt, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-button.css

@@ -180,7 +180,7 @@
     }
 
     /* Disabled drops the tone rather than the shape: every variant keeps its own structure, so a
-       disabled outline is still an outline and a disabled ghost is still text. Intent goes — an
+       disabled outline is still an outline and a disabled ghost still has no edge. Intent goes — an
        unavailable action says "unavailable", not "unavailable, and destructive" — and so do the
        highlight and shadow, because nothing that cannot be pressed should look raised. */
     :scope:disabled {
@@ -205,9 +205,11 @@
     }
 
     /* Ghost has no hover to fall back on, so disabled is the one state it has to state outright:
-       it takes a surface, light and tinted, rather than reading as plain text. */
+       it takes a surface rather than reading as plain text. The surface is a wash of the faded tone,
+       the way hover washes the live one, so it stays light in every tone. An opaque mix toward the
+       hue came out a mid-grey slab for neutral, whose hue is the ink: louder than the enabled button. */
     :scope[data-ui-button-state~="variant=ghost"]:disabled {
-      background-color: color-mix(in oklab, var(--_hue) 28%, var(--ui-surface));
+      background-color: oklch(from var(--_tone) l c h / 14%);
       border-color: transparent;
     }
 
@@ -280,14 +282,16 @@
     /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
 
     /* Disabled drops the tone rather than the shape: every variant keeps its own structure, so a
-       disabled outline is still an outline and a disabled ghost is still text. Intent goes — an
+       disabled outline is still an outline and a disabled ghost still has no edge. Intent goes — an
        unavailable action says "unavailable", not "unavailable, and destructive" — and so do the
        highlight and shadow, because nothing that cannot be pressed should look raised. */
 
     /* A filled button keeps its fill, faded further so its text stays legible on it. */
 
     /* Ghost has no hover to fall back on, so disabled is the one state it has to state outright:
-       it takes a surface, light and tinted, rather than reading as plain text. */
+       it takes a surface rather than reading as plain text. The surface is a wash of the faded tone,
+       the way hover washes the live one, so it stays light in every tone. An opaque mix toward the
+       hue came out a mid-grey slab for neutral, whose hue is the ink: louder than the enabled button. */
 
     @media (pointer: coarse) {
     }

package/vue/UiButton.vue

@@ -230,7 +230,7 @@ const hostState = computed(() =>
 }
 
 /* Disabled drops the tone rather than the shape: every variant keeps its own structure, so a
-   disabled outline is still an outline and a disabled ghost is still text. Intent goes — an
+   disabled outline is still an outline and a disabled ghost still has no edge. Intent goes — an
    unavailable action says "unavailable", not "unavailable, and destructive" — and so do the
    highlight and shadow, because nothing that cannot be pressed should look raised. */
 [data-component~="ui-button"]:disabled {
@@ -255,9 +255,11 @@ const hostState = computed(() =>
 }
 
 /* Ghost has no hover to fall back on, so disabled is the one state it has to state outright:
-   it takes a surface, light and tinted, rather than reading as plain text. */
+   it takes a surface rather than reading as plain text. The surface is a wash of the faded tone,
+   the way hover washes the live one, so it stays light in every tone. An opaque mix toward the
+   hue came out a mid-grey slab for neutral, whose hue is the ink: louder than the enabled button. */
 [data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:disabled {
-  background-color: color-mix(in oklab, var(--_hue) 28%, var(--ui-surface));
+  background-color: oklch(from var(--_tone) l c h / 14%);
   border-color: transparent;
 }
 

package/vue/chunks/UiButton.js

@@ -41,6 +41,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-8513eb5d"]]);
+}), [["__scopeId", "data-v-c6ef4679"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/components.css

@@ -204,7 +204,7 @@
   display: none;
 }
 
-[data-component~="ui-button"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-v-c6ef4679] {
   --_hue: var(--ui-accent);
   --_hue-hover: var(--ui-accent-hover);
   --_hue-active: var(--ui-accent-active);
@@ -223,15 +223,15 @@
   vertical-align: middle;
   color: var(--_tone-text);
 }
-[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-c6ef4679] {
   justify-content: flex-start;
   text-align: start;
 }
-[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-c6ef4679] {
   display: flex;
   inline-size: 100%;
 }
-[data-component~="ui-button"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-v-c6ef4679] {
   appearance: none;
   min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
   border-style: solid;
@@ -255,44 +255,44 @@
   margin: 0;
 }
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-button"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-v-c6ef4679] {
     text-box-trim: trim-both;
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-c6ef4679] {
   min-block-size: var(--ui-control-size-sm);
   padding: var(--ui-space-1) var(--ui-space-2);
   font-size: 0.875rem;
 }
-[data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-c6ef4679] {
   min-block-size: var(--ui-control-size-lg);
   padding: var(--ui-space-3) var(--ui-space-4);
   font-size: 1rem;
 }
-[data-component~="ui-button"][data-v-8513eb5d]:hover:enabled {
+[data-component~="ui-button"][data-v-c6ef4679]:hover:enabled {
   border-color: var(--ui-button-hover-border, var(--_tone-hover));
   background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
 }
 
 /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
-[data-component~="ui-button"][data-v-8513eb5d]:active:enabled {
+[data-component~="ui-button"][data-v-c6ef4679]:active:enabled {
   background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
   background-image: none;
   box-shadow: var(--ui-pressed);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-8513eb5d],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-c6ef4679],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-c6ef4679] {
   border-color: var(--_tone);
   background-color: var(--_tone);
   color: var(--_on-tone);
   box-shadow: var(--ui-button-solid-shadow, var(--ui-raised));
 }
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-8513eb5d], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-8513eb5d]):hover:enabled {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-c6ef4679], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-c6ef4679]):hover:enabled {
   background-color: var(--_tone-hover);
   border-color: var(--_tone-hover);
 }
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-8513eb5d], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-8513eb5d]):active:enabled {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-c6ef4679], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-c6ef4679]):active:enabled {
   background-color: var(--_tone-active);
   border-color: var(--_tone-active);
   background-image: none;
@@ -301,43 +301,43 @@
 
 /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
    destructive secondary action, not a special case. */
-[data-component~="ui-button"][data-ui-button-state~="tone=neutral"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-ui-button-state~="tone=neutral"][data-v-c6ef4679] {
   --_hue: var(--ui-text);
   --_hue-hover: var(--ui-text);
   --_hue-active: var(--ui-text);
   --_hue-text: var(--ui-text);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=danger"][data-v-8513eb5d],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-ui-button-state~="tone=danger"][data-v-c6ef4679],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-c6ef4679] {
   --_hue: var(--ui-danger);
   --_hue-hover: var(--ui-danger-hover);
   --_hue-active: var(--ui-danger-hover);
   --_hue-text: var(--ui-danger-hover);
   --_on-hue: var(--ui-on-danger);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=success"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-ui-button-state~="tone=success"][data-v-c6ef4679] {
   --_hue: var(--ui-success);
   --_hue-hover: color-mix(in srgb, var(--ui-success) 85%, #000);
   --_hue-active: color-mix(in srgb, var(--ui-success) 75%, #000);
   --_hue-text: color-mix(in srgb, var(--ui-success) 85%, #000);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=warning"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-ui-button-state~="tone=warning"][data-v-c6ef4679] {
   --_hue: var(--ui-warning);
   --_hue-hover: color-mix(in srgb, var(--ui-warning) 85%, #000);
   --_hue-active: color-mix(in srgb, var(--ui-warning) 75%, #000);
   --_hue-text: color-mix(in srgb, var(--ui-warning) 85%, #000);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=info"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-ui-button-state~="tone=info"][data-v-c6ef4679] {
   --_hue: var(--ui-info);
   --_hue-hover: color-mix(in srgb, var(--ui-info) 85%, #000);
   --_hue-active: color-mix(in srgb, var(--ui-info) 75%, #000);
   --_hue-text: color-mix(in srgb, var(--ui-info) 85%, #000);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-c6ef4679] {
   border-color: transparent;
   background: transparent;
   box-shadow: none;
@@ -345,34 +345,34 @@
 }
 
 /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-8513eb5d]:hover:enabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-c6ef4679]:hover:enabled {
   background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
   border-color: transparent;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-8513eb5d]:active:enabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-c6ef4679]:active:enabled {
   background-color: var(--ui-button-ghost-active-surface, oklch(from var(--_tone) l c h / 16%));
   border-color: transparent;
   box-shadow: var(--ui-pressed);
 }
 
 /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
-[data-component~="ui-button"][data-v-8513eb5d]:focus-visible {
+[data-component~="ui-button"][data-v-c6ef4679]:focus-visible {
   outline: none;
   box-shadow:
     var(--ui-button-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-8513eb5d]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-c6ef4679]:focus-visible {
   box-shadow:
     var(--ui-button-solid-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
 }
 
 /* Disabled drops the tone rather than the shape: every variant keeps its own structure, so a
-   disabled outline is still an outline and a disabled ghost is still text. Intent goes — an
+   disabled outline is still an outline and a disabled ghost still has no edge. Intent goes — an
    unavailable action says "unavailable", not "unavailable, and destructive" — and so do the
    highlight and shadow, because nothing that cannot be pressed should look raised. */
-[data-component~="ui-button"][data-v-8513eb5d]:disabled {
+[data-component~="ui-button"][data-v-c6ef4679]:disabled {
   /* Derived from the tone itself, not from a separate disabled palette: faded toward the
      page, which desaturates it at the same time. Toward the page rather than toward white,
      so a dark theme dims where a light one lightens — the same rule, both schemes. */
@@ -389,25 +389,27 @@
 }
 
 /* A filled button keeps its fill, faded further so its text stays legible on it. */
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-8513eb5d], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-8513eb5d]):disabled {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-c6ef4679], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-c6ef4679]):disabled {
   --_tone: color-mix(in oklab, var(--_hue) 34%, var(--ui-surface));
 }
 
 /* Ghost has no hover to fall back on, so disabled is the one state it has to state outright:
-   it takes a surface, light and tinted, rather than reading as plain text. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-8513eb5d]:disabled {
-  background-color: color-mix(in oklab, var(--_hue) 28%, var(--ui-surface));
+   it takes a surface rather than reading as plain text. The surface is a wash of the faded tone,
+   the way hover washes the live one, so it stays light in every tone. An opaque mix toward the
+   hue came out a mid-grey slab for neutral, whose hue is the ink: louder than the enabled button. */
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-c6ef4679]:disabled {
+  background-color: oklch(from var(--_tone) l c h / 14%);
   border-color: transparent;
 }
 @media (pointer: coarse) {
-[data-component~="ui-button"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-v-c6ef4679] {
     min-block-size: var(--ui-control-min-block-size);
 }
 }
 
 /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
    WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-c6ef4679] {
   display: inline;
   min-block-size: 0;
   padding: 0;
@@ -425,22 +427,22 @@
     color var(--ui-motion-fast) var(--ui-motion-ease),
     text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-8513eb5d]:hover:enabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-c6ef4679]:hover:enabled {
   color: var(--ui-button-link-hover-text, var(--ui-text-primary));
   text-decoration-color: currentColor;
   background: none;
   transform: none;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-8513eb5d]:active:enabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-c6ef4679]:active:enabled {
   background: none;
   transform: none;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-8513eb5d]:disabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-c6ef4679]:disabled {
   background: none;
   border-color: transparent;
   color: var(--ui-button-disabled-text, var(--ui-disabled-text));
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-8513eb5d]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-c6ef4679]:focus-visible {
   box-shadow: none;
   /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
   outline: 2px solid var(--ui-focus-ring);
@@ -448,7 +450,7 @@
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-button"][hidden][data-v-8513eb5d] {
+[data-component~="ui-button"][hidden][data-v-c6ef4679] {
   display: none;
 }
 
@@ -4372,6 +4374,28 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
   }
 }
 
+/*
+ * Marker for the block being edited, drawn in the gutter beside the text rather
+ * than around it: a border or fill on the reading column reads as a form field.
+ * The bar sits outside the content box, so a consumer that zeroes
+ * --ui-editor-content-padding-inline must leave room on its own wrapper.
+ */
+.looma-editor .ProseMirror > .looma-active-block {
+  position: relative;
+}
+
+.looma-editor .ProseMirror > .looma-active-block::before {
+  position: absolute;
+  z-index: 1;
+  inset-block: 0;
+  inset-inline-start: calc(-1 * var(--ui-editor-active-block-offset, var(--ui-space-3)));
+  inline-size: var(--ui-editor-active-block-width, 2px);
+  border-radius: var(--ui-radius-round);
+  background: var(--ui-editor-active-block-color, var(--ui-border-strong));
+  content: "";
+  pointer-events: none;
+}
+
 .looma-editor .ProseMirror p {
   margin: 0 0 var(--ui-editor-paragraph-gap, var(--ui-space-3));
 }