@quillmark/svelte 0.20.1 → 0.22.0

package/dist/core/codec/table.d.ts

@@ -73,19 +73,12 @@ export declare function moveColumn(props: TableProps, c: number, by: number): Ta
  * empties is text.
  */
 export declare function clearCells(props: TableProps, r0: number, c0: number, r1: number, c1: number): TableProps;
-/** Set column `c`'s alignment: what the held column's cluster and Shift+arrow write
- *  (`table-view.ts`). */
+/** Set column `c`'s alignment and clear its cells' own `align`, which would outrank it:
+ *  what the held column's cluster and Shift+arrow write (`table-view.ts`). */
 export declare function setAlign(props: TableProps, c: number, align: TableAlign): TableProps;
 /** Draw the first row as a header or as a body row: what the header toggle writes
  *  (`table-view.ts`). */
 export declare function setHeadless(props: TableProps, headless: boolean): TableProps;
-/** A cell's horizontal alignment, and its vertical one: the keys a cell holds beside
- *  its text, each absent at the default the column or the quill supplies. */
-export type CellAlign = NonNullable<TableCell['align']>;
-export type CellValign = NonNullable<TableCell['valign']>;
-/** Every cell in the inclusive rectangle given `key`'s `value`, or cleared of it where
- *  `value` is absent, which returns the cell to its column's alignment or the quill's. */
-export declare function setCellLayout<K extends 'align' | 'valign'>(props: TableProps, r0: number, c0: number, r1: number, c1: number, key: K, value: TableCell[K] | undefined): TableProps;
 /** Set or clear the column weights: what a border drag and its double-click write
  *  (`table-view.ts`). `undefined` returns every column to auto-fit. */
 export declare function setWidths(props: TableProps, widths: (number | null)[] | undefined): TableProps;

package/dist/core/codec/table.js

@@ -184,11 +184,19 @@ export function clearCells(props, r0, c0, r1, c1) {
         rows: props.rows.map((row, i) => blank(row, i + 1))
     });
 }
-/** Set column `c`'s alignment: what the held column's cluster and Shift+arrow write
- *  (`table-view.ts`). */
+/** Set column `c`'s alignment and clear its cells' own `align`, which would outrank it:
+ *  what the held column's cluster and Shift+arrow write (`table-view.ts`). */
 export function setAlign(props, c, align) {
+    const release = (cells) => cells.map((cell, i) => {
+        if (i !== c || cell.align === undefined)
+            return cell;
+        const { align: _align, ...rest } = cell;
+        return rest;
+    });
     return normalizeTable({
         ...props,
+        header: release(props.header),
+        rows: props.rows.map(release),
         aligns: props.aligns.map((a, i) => (i === c ? align : a))
     });
 }
@@ -197,23 +205,6 @@ export function setAlign(props, c, align) {
 export function setHeadless(props, headless) {
     return normalizeTable({ ...props, headless: headless || undefined });
 }
-/** Every cell in the inclusive rectangle given `key`'s `value`, or cleared of it where
- *  `value` is absent, which returns the cell to its column's alignment or the quill's. */
-export function setCellLayout(props, r0, c0, r1, c1, key, value) {
-    const lay = (cells, r) => cells.map((cell, c) => {
-        if (r < r0 || r > r1 || c < c0 || c > c1)
-            return cell;
-        const next = { ...cell, [key]: value };
-        if (value === undefined)
-            delete next[key];
-        return next;
-    });
-    return normalizeTable({
-        ...props,
-        header: lay(props.header, 0),
-        rows: props.rows.map((row, i) => lay(row, i + 1))
-    });
-}
 /** Set or clear the column weights: what a border drag and its double-click write
  *  (`table-view.ts`). `undefined` returns every column to auto-fit. */
 export function setWidths(props, widths) {

package/dist/core/codec/tasks.d.ts

@@ -0,0 +1,19 @@
+import { type DOMOutputSpec, type NodeType } from 'prosemirror-model';
+import { Plugin, type Command } from 'prosemirror-state';
+/** The `checked` an `<li>` states: `data-qm-checked`, which `toDOM` writes, else none. */
+export declare function taskChecked(el: HTMLElement): boolean | null;
+/** Where an `<li>`'s blocks are: a task item's body, past its checkbox; the item itself
+ *  otherwise. */
+export declare function taskBody(el: Node): HTMLElement;
+/** A task item's `<li>`: the checkbox, unreachable by the caret, then the body holding
+ *  the item's blocks, which names it. The mark is the check glyph a matrix tick draws. */
+export declare function taskDOM(checked: boolean): DOMOutputSpec;
+/** The node view a block leaf mounts its list items through. */
+export declare function taskPlugin(): Plugin;
+/**
+ * `splitListItem`, leaving the item that takes none of a task item's text an open task:
+ * the one below, or the one above where Enter is pressed at the head of the item's text.
+ * An empty item the split lifts out of a nested list keeps its own `checked`, as a
+ * Shift-Tab lift keeps it.
+ */
+export declare function splitTaskItem(itemType: NodeType): Command;

package/dist/core/codec/tasks.js

@@ -0,0 +1,140 @@
+// A task item is a `list_item` whose `checked` is a boolean (CODEC §"Task items"). Its
+// `toDOM` draws a checkbox ahead of the item's blocks, disabled, which is the drawing a
+// held leaf, a copy and `renderContent` take; a leaf that edits mounts the item through
+// `taskItemView`, whose checkbox toggles. A task item is minted by source mode and by a
+// paste alone: no shorthand, command or key makes one.
+import { DOMSerializer } from 'prosemirror-model';
+import { Plugin } from 'prosemirror-state';
+import { splitListItem } from 'prosemirror-schema-list';
+const SVG = 'http://www.w3.org/2000/svg';
+/** The id the checkbox names its item's blocks by, fresh per drawing. */
+let drawn = 0;
+/** The `checked` an `<li>` states: `data-qm-checked`, which `toDOM` writes, else none. */
+export function taskChecked(el) {
+    const stated = el.getAttribute('data-qm-checked');
+    return stated === null ? null : stated === 'true';
+}
+/** Where an `<li>`'s blocks are: a task item's body, past its checkbox; the item itself
+ *  otherwise. */
+export function taskBody(el) {
+    const li = el;
+    const body = li.hasAttribute('data-qm-checked')
+        ? li.querySelector(':scope > [data-qm-task-body]')
+        : null;
+    return body ?? li;
+}
+/** A task item's `<li>`: the checkbox, unreachable by the caret, then the body holding
+ *  the item's blocks, which names it. The mark is the check glyph a matrix tick draws. */
+export function taskDOM(checked) {
+    const body = `qm-task-${++drawn}`;
+    return [
+        'li',
+        { 'data-qm-checked': String(checked) },
+        [
+            'span',
+            { class: 'qm-task', contenteditable: 'false' },
+            [
+                'input',
+                {
+                    type: 'checkbox',
+                    class: 'qm-task-box',
+                    'aria-labelledby': body,
+                    checked: checked ? '' : null,
+                    disabled: ''
+                }
+            ],
+            [
+                `${SVG} svg`,
+                {
+                    class: 'qm-task-mark',
+                    viewBox: '0 0 24 24',
+                    fill: 'none',
+                    stroke: 'currentColor',
+                    'stroke-width': '2',
+                    'stroke-linecap': 'round',
+                    'stroke-linejoin': 'round',
+                    'aria-hidden': 'true'
+                },
+                [`${SVG} path`, { d: 'M20 6 9 17l-5-5' }]
+            ]
+        ],
+        ['div', { id: body, 'data-qm-task-body': '' }, 0]
+    ];
+}
+const isTask = (node) => node.attrs.checked !== null;
+/**
+ * Every `list_item` in a leaf that edits, drawn by its own `toDOM`. A task item's checkbox
+ * is enabled, and a change to it is one `checked` transaction, so one `Mod-z` takes it
+ * back; where the leaf declines the edit the box returns to the item's value. The box
+ * keeps the press from the caret: a mousedown leaves the selection and the focus where
+ * they were, and ProseMirror reads no event aimed at it.
+ */
+function taskItemView(node, view, getPos) {
+    const { dom, contentDOM } = DOMSerializer.renderSpec(document, node.type.spec.toDOM(node));
+    const box = isTask(node)
+        ? dom.querySelector(':scope > .qm-task > input')
+        : null;
+    if (box) {
+        box.disabled = false;
+        box.addEventListener('mousedown', (e) => e.preventDefault());
+        box.addEventListener('change', () => {
+            const pos = getPos();
+            if (pos === undefined || !view.editable) {
+                box.checked = node.attrs.checked;
+                return;
+            }
+            view.dispatch(view.state.tr.setNodeAttribute(pos, 'checked', box.checked));
+        });
+    }
+    return {
+        dom,
+        contentDOM,
+        update(next) {
+            if (next.type !== node.type || isTask(next) !== isTask(node))
+                return false;
+            node = next;
+            if (box) {
+                box.checked = next.attrs.checked;
+                dom.setAttribute('data-qm-checked', String(next.attrs.checked));
+            }
+            return true;
+        },
+        stopEvent: (e) => box !== null && e.target === box,
+        ignoreMutation: (m) => m.type !== 'selection' && !contentDOM.contains(m.target)
+    };
+}
+/** The node view a block leaf mounts its list items through. */
+export function taskPlugin() {
+    return new Plugin({ props: { nodeViews: { list_item: taskItemView } } });
+}
+/**
+ * `splitListItem`, leaving the item that takes none of a task item's text an open task:
+ * the one below, or the one above where Enter is pressed at the head of the item's text.
+ * An empty item the split lifts out of a nested list keeps its own `checked`, as a
+ * Shift-Tab lift keeps it.
+ */
+export function splitTaskItem(itemType) {
+    const split = splitListItem(itemType);
+    return (state, dispatch, view) => {
+        const { $from, empty } = state.selection;
+        const item = $from.depth >= 2 ? $from.node(-1) : null;
+        if (!dispatch || item?.type !== itemType || !isTask(item))
+            return split(state, dispatch, view);
+        const lifted = $from.parent.content.size === 0 && item.childCount === 1;
+        const atHead = empty && $from.parentOffset === 0 && $from.index(-1) === 0;
+        return split(state, (tr) => {
+            const $at = tr.selection.$from;
+            const below = $at.before($at.depth - 1);
+            if (lifted)
+                tr.setNodeAttribute(below, 'checked', item.attrs.checked);
+            else if (atHead) {
+                const above = tr.doc.resolve(below).nodeBefore;
+                if (above)
+                    tr.setNodeAttribute(below - above.nodeSize, 'checked', false);
+            }
+            else
+                tr.setNodeAttribute(below, 'checked', false);
+            dispatch(tr);
+        });
+    };
+}

package/dist/core/errors.d.ts

@@ -11,8 +11,8 @@ export type EditorErrorCode =
  *  the whole projection instead, so the store is correct and this field's
  *  identity anchors were paid. */
  | 'commit-fallback'
-/** The overwrite fallback also failed, or the typed writer refused a `plaintext`
- *  leaf's text: the optimistic PM state stands and the store is stale for this
+/** The overwrite fallback also failed, or the typed writer refused a `text` leaf's
+ *  text: the optimistic PM state stands and the store is stale for this
  *  field. The one code here that leaves damage. */
  | 'commit-lost'
 /** A card operation (add, move, remove, retype) that threw. The document is

package/dist/core/rungs.d.ts

@@ -6,3 +6,9 @@ export declare function rungStyle(node: Element): CSSStyleDeclaration;
  *  empty). No rung, no motion: a fallback here would be the scale restated in the one
  *  place `check:style` cannot read. */
 export declare function rungMs(style: CSSStyleDeclaration, rung: string): number | undefined;
+/** `steps` of the space rung off `node`'s root, in px: a floating surface's offset from
+ *  its anchor. `--_qm-space` is registered, so it computes to px where the rungs derived
+ *  from it compute to their expressions; hence the multiple rather than a read of
+ *  `--_qm-space-2`. `undefined` where the derivation is out of reach, as for
+ *  {@link rungMs}. */
+export declare function spacePx(node: Element | undefined, steps?: number): number | undefined;

package/dist/core/rungs.js

@@ -22,3 +22,14 @@ export function rungMs(style, rung) {
         return undefined;
     return raw.endsWith('ms') ? n : n * 1000;
 }
+/** `steps` of the space rung off `node`'s root, in px: a floating surface's offset from
+ *  its anchor. `--_qm-space` is registered, so it computes to px where the rungs derived
+ *  from it compute to their expressions; hence the multiple rather than a read of
+ *  `--_qm-space-2`. `undefined` where the derivation is out of reach, as for
+ *  {@link rungMs}. */
+export function spacePx(node, steps = 1) {
+    if (!node)
+        return undefined;
+    const n = Number.parseFloat(rungStyle(node).getPropertyValue('--_qm-space'));
+    return Number.isFinite(n) ? n * steps : undefined;
+}

package/dist/core/theme.css

@@ -117,9 +117,9 @@
 
 	   Two planes sink. `sunken` is the ground — the column behind the cards, the
 	   desk behind the sheets — and lifting the plane above it takes very little
-	   at the light pole. `well` is the hole cut into a card: a field, a table's
-	   header band, the one native select, none of which draw an edge, so the
-	   step is the whole of what says a value is typed there. The order at the
+	   at the light pole. `well` is the hole cut into a card: a field, the one
+	   native select, neither of which draws an edge, so the step is the whole of
+	   what says a value is typed there. The order at the
 	   light pole is card, ground, well; at the dark pole the two sink to within
 	   a channel of each other, which is where a card with little light left to
 	   give up leaves them.
@@ -148,6 +148,10 @@
 	   dark. */
 	--_qm-surface-raised: color-mix(in oklab, var(--_qm-bg), #fff 8%);
 	--_qm-surface-hover: color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 8%);
+	/* A band laid on the card rather than cut into it: a table's header, and the pill a
+	   grip draws. It steps toward the ink at both poles, a shade under white in light
+	   and a shade over the card in dark, where `well` sinks to a black stripe. */
+	--_qm-surface-band: color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 6%);
 	/* The one rung whose arms are not a single ratio: a stroke is read against what it
 	   separates, and the mix that reads as a hairline on the dark default draws the
 	   light card in a line heavier than the type it frames. The light arm is
@@ -157,12 +161,11 @@
 		color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 6%),
 		color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 17%)
 	);
-	/* A rule that separates without structuring: the lines between a table's cells,
-	   where the frame around them is the structure. Half the border, and read off
-	   it rather than restated as a percentage of its own, so the two hold their
-	   relationship at any mix: a stroke against the surface behind it, not a fill
-	   stacked on one. */
-	--_qm-border-faint: color-mix(in oklab, var(--_qm-bg), var(--_qm-border) 50%);
+	/* A stroke ruled through content rather than round it: a table's frame and every
+	   line between its cells. The light arm of `border` is a card's edge against the
+	   ground, and drawn between lines of type it vanishes, so a grid takes one ratio at
+	   both poles, which lands within a few points of `border` in dark. */
+	--_qm-rule: color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 14%);
 	/* Three rungs, and nothing under the last: a step below `label` lands under 3:1 on
 	   the well a field draws it against, and what would take it — an unset value's word,
 	   an invitation — is content a reader has to read (WCAG 1.4.3), not decoration.
@@ -186,6 +189,11 @@
 	   stacks over whichever surface rung the cell already draws instead of replacing
 	   it. */
 	--_qm-accent-tint: color-mix(in oklab, var(--_qm-accent) 12%, transparent);
+	/* The accent at the default rung: a mark's fill where the `default:` supplies it, a
+	   switch's checked track and a held tick's box, stepped toward the card by the
+	   ratio `default` steps the ink. What is drawn over it in the card's colour, the
+	   thumb and the check, holds 3:1 at both poles, at 3.3:1 and 4.2:1. */
+	--_qm-accent-default: color-mix(in oklab, var(--_qm-accent), var(--_qm-bg) 20%);
 	/* The danger hue held: what a destructive control fills with where the family's
 	   neutral hover rung would read as one more button. Mixed at the accent tint's
 	   strength, so a held tint is a held tint whichever hue it carries. */
@@ -281,6 +289,10 @@
 	   arrival settles into its rest instead of stopping at it, and long enough that a
 	   control resting at nothing reads as arriving rather than as switching. */
 	--_qm-reveal: 500ms cubic-bezier(0.4, 0, 0.2, 1);
+	/* A wait rather than a trip: how long a caret rests on an empty line before the
+	   slash hint comes up. Longer than the gap between two keystrokes, so typing on
+	   through an Enter never draws it. */
+	--_qm-hint-wait: 500ms;
 
 	/* ── Geometry ──────────────────────────────────────────────────────────*/
 	/* One stroke width for every edge the chrome draws and every rule it ranks
@@ -342,9 +354,9 @@
 	   it does not move when `--qm-space` does. Every button family reads it, so the
 	   floor is one number instead of one expression per control. */
 	--_qm-tap-min: 24px;
-	/* The chrome glyph: a chip's, and the in-well remove's. Sized in CSS rather than
-	   through the icon's `size`, so a stylesheet beats the SVG presentation attribute
-	   and one rung is the whole of what a control draws. */
+	/* The chrome glyph: a chip's, a glyph button's, the enum's chevron. Sized in CSS
+	   rather than through the icon's `size`, so a stylesheet beats the SVG presentation
+	   attribute and one rung is the whole of what a control draws. */
 	--_qm-glyph-control: 14px;
 	/* The narrowest track a control that fills its width stays usable in: a table's
 	   column floors at it, rises no further than its content, and a row of them scrolls