@quillmark/svelte 0.6.0 → 0.7.1

package/dist/visual/hold.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Run `change` and keep `anchor` inside the fold for the length of the move.
+ *
+ * A section closing above the pressed control carries that control off the fold with it,
+ * and what answers that is the trip every landing here already takes: the minimum, to the
+ * nearest edge, never a centring (VISUAL_EDITOR §"Focus and the preview bridge"). So a
+ * control the collapse never carries out of view costs no scroll at all, and one it would
+ * rides up and parks at the edge, which is where a section just opened wants its header:
+ * the fold below it is the room its fields unfold into, where a control held on the line
+ * it was pressed on opens its section into the screen it sits on the edge of.
+ *
+ * Per frame, because both panels move over the motion rung: a trip taken once is taken
+ * against a track that has not moved yet, the same flush a reveal's landing measures in
+ * (`Card.revealLeaf`). `instant`, because a host's `scroll-behavior: smooth` would
+ * otherwise animate each frame's correction toward the one before it.
+ */
+export declare function holdInView(anchor: HTMLElement | undefined, change: () => void): void;

package/dist/visual/hold.js

@@ -0,0 +1,39 @@
+// The gesture's anchor, which scroll anchoring is not: the platform picks its anchor off
+// the layout, and what fills the viewport as a section collapses is that section's own
+// content, whose top never moves.
+import { flushSync } from 'svelte';
+import { rungMs } from './motion.js';
+/**
+ * Run `change` and keep `anchor` inside the fold for the length of the move.
+ *
+ * A section closing above the pressed control carries that control off the fold with it,
+ * and what answers that is the trip every landing here already takes: the minimum, to the
+ * nearest edge, never a centring (VISUAL_EDITOR §"Focus and the preview bridge"). So a
+ * control the collapse never carries out of view costs no scroll at all, and one it would
+ * rides up and parks at the edge, which is where a section just opened wants its header:
+ * the fold below it is the room its fields unfold into, where a control held on the line
+ * it was pressed on opens its section into the screen it sits on the edge of.
+ *
+ * Per frame, because both panels move over the motion rung: a trip taken once is taken
+ * against a track that has not moved yet, the same flush a reveal's landing measures in
+ * (`Card.revealLeaf`). `instant`, because a host's `scroll-behavior: smooth` would
+ * otherwise animate each frame's correction toward the one before it.
+ */
+export function holdInView(anchor, change) {
+    if (!anchor)
+        return void change();
+    change();
+    flushSync();
+    const reveal = () => anchor.scrollIntoView({ block: 'nearest', behavior: 'instant' });
+    reveal();
+    const rung = rungMs(getComputedStyle(anchor), '--_qm-duration-slow');
+    if (rung === undefined)
+        return;
+    const until = performance.now() + rung;
+    const step = (now) => {
+        reveal();
+        if (now < until)
+            requestAnimationFrame(step);
+    };
+    requestAnimationFrame(step);
+}

package/dist/visual/index.js

@@ -13,7 +13,7 @@
 // reaches modules inside `core/` and never its entry, so a sheet hanging off that
 // entry arrives only for a consumer importing `/core` for some other reason. The
 // sheet rather than the entry, because the barrel needs the derivation and not
-// `init`. `check:deps` (rule 4) walks this file's own graph and holds the reach.
+// `init`. `check:deps` holds the reach.
 import '../core/theme.css';
 export { default as VisualEditor } from './VisualEditor.svelte';
 // The prose leaf: the vanilla mount API a non-Svelte consumer (or a custom

package/dist/visual/motion.d.ts

@@ -1,4 +1,13 @@
 import type { AnimationConfig } from 'svelte/animate';
+/** The trips this module is running on `node`. A run holds the slot at its pre-move
+ *  position for its whole length, so anything that measures the node's box waits on
+ *  these rather than reading the one a transform is holding. */
+export declare function reorderTrips(node: HTMLElement): Animation[];
+/** A duration rung off `style`, in ms; `undefined` where the derivation is out of reach
+ *  (an unstyled root, or jsdom, where `getComputedStyle` reports custom properties as
+ *  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;
 /**
  * Slide a keyed slot from where it was to where it now is.
  *

package/dist/visual/motion.js

@@ -7,11 +7,19 @@
 /** Marks this module's runs, so a second reorder cancels the first rather than layering
  *  a second transform over it. */
 const RUN_ID = 'qm-reorder';
+/** The trips this module is running on `node`. A run holds the slot at its pre-move
+ *  position for its whole length, so anything that measures the node's box waits on
+ *  these rather than reading the one a transform is holding. */
+export function reorderTrips(node) {
+    if (typeof node.getAnimations !== 'function')
+        return [];
+    return node.getAnimations().filter((run) => run.id === RUN_ID);
+}
 /** A duration rung off `style`, in ms; `undefined` where the derivation is out of reach
  *  (an unstyled root, or jsdom, where `getComputedStyle` reports custom properties as
  *  empty). No rung, no motion: a fallback here would be the scale restated in the one
  *  place `check:style` cannot read. */
-function rungMs(style, rung) {
+export function rungMs(style, rung) {
     const raw = style.getPropertyValue(rung).trim();
     const n = Number.parseFloat(raw);
     if (!Number.isFinite(n))
@@ -34,7 +42,7 @@ function rungMs(style, rung) {
 export function reorder(node, { from, to }, armed) {
     // The returned config is empty by design, in both exits and the run below: Svelte
     // samples a config's keyframes through a JS easing function, and this curve is a
-    // rung the derivation mints and `check:style` holds.
+    // rung the derivation mints.
     if (!armed() || typeof node.animate !== 'function')
         return {};
     const style = getComputedStyle(node);

package/dist/visual/strings.d.ts

@@ -25,9 +25,10 @@ export interface VisualStrings extends TableChromeStrings, SlashStrings {
      *  ghosts ({@link EnumField}). */
     enumUnsetTag: string;
     /**
-     * What stands where a subform declines to recurse (a nested prose / array /
-     * object property), and where to edit that property instead. The whole sentence,
-     * since a translator orders the kind within it.
+     * What stands where a subform declines to recurse — a nested `array` or `object`
+     * property, whose own figure would nest a field past the depth this one draws —
+     * and where to edit that property instead. The whole sentence, since a translator
+     * orders the kind within it.
      */
     nestedUnsupported: (kind: string) => string;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@quillmark/svelte",
-	"version": "0.6.0",
+	"version": "0.7.1",
 	"description": "Editor, live-preview and source surfaces over a Quillmark WASM session.",
 	"repository": {
 		"type": "git",
@@ -66,7 +66,7 @@
 		"check": "svelte-check --tsconfig ./tsconfig.json"
 	},
 	"peerDependencies": {
-		"@quillmark/wasm": ">=0.108.0-0",
+		"@quillmark/wasm": ">=0.108.1-0",
 		"svelte": "^5.0.0"
 	},
 	"dependencies": {

package/dist/visual/ProseArrayElement.svelte

@@ -1,139 +0,0 @@
-<!--
- One element of an array of `richtext` (fixture `keywords`) or `plaintext`
- (`errata`). Array elements are not `applyChange`-addressable: `Addr.field` is a
- flat name, so `keywords[0]` has no op address. So
- this is not a `createField` leaf: it mounts a minimal PM view over the codec's
- decode/encode + inline schema, and on every edit hands the re-encoded
- `Content` up to the parent {@link ArrayField}, which commits the whole array
- by value (`writer.set(field, arrayWithElementReplaced)`). Anchors within an
- element are dropped on that value write: acceptable for inline refs. Mounts
- once per stable element id (no reset on the parent's re-derive).
-
- The content is read, not passed: `reader.getContentAt(addr, [k])` decodes an
- element through the codec its `items` type declares, so what the element rests
- as — the content object, a `plaintext` literal, the authored string a transport
- door left — stops being this row's business. Read once, at mount, since that is
- when this leaf takes its state.
--->
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { EditorState, Selection } from 'prosemirror-state';
-	import { EditorView } from 'prosemirror-view';
-	import {
-		decode,
-		pmToContent,
-		inlineSchema,
-		plaintextSchema,
-		proseLeafPlugins,
-		buildLineIndex,
-		usvToPM
-	} from '../core/codec/index.js';
-	import './controls.css';
-	import type { Content } from '@quillmark/wasm';
-
-	interface Props {
-		/** This element's content, read at mount (`ArrayField`, through the boundary's
-		 * element read). A thunk rather than a value: the parent re-derives per
-		 * revision and this leaf takes its state once, so a value prop would be a
-		 * boundary read per row per render, all but one of them discarded. */
-		content: () => Content;
-		/** The mark-free schema (a `plaintext` item): literal text, no formatting,
-		 * exactly as the scalar field of that type mounts. */
-		plaintext?: boolean;
-		/** Accessible name for the editable region (the array has no per-element label). */
-		label?: string;
-		onChange: (rt: Content) => void;
-		/** Raw keydown, for a container whose own keys run through this element: the
-		 * array repeater's Enter/Backspace (`ArrayField`). Fires before the view's own
-		 * keymap, so the state it reads is the one this keystroke has yet to change. */
-		onKey?: (e: KeyboardEvent) => void;
-	}
-	let { content, plaintext = false, label, onChange, onKey }: Props = $props();
-
-	let containerEl: HTMLDivElement | undefined = $state();
-	let view: EditorView | undefined;
-	/** Take the caret: what a parent placing focus on this element calls. The view's
-	 * focus, not the element's: a PM view restores its selection, where a bare DOM
-	 * focus on a contenteditable leaves the caret unplaced. And the reveal beside it,
-	 * since PM's focus prevents the scroll a `string` element's input takes by
-	 * default — an array whose two item types revealed differently is one row of it
-	 * landing off screen. */
-	export function focus(): void {
-		if (!view) return;
-		view.focus();
-		view.dom.scrollIntoView({ block: 'nearest' });
-	}
-	/** Take the caret to USV `pos` in this element's own content: what a landing on an
-	 * element address resolves to when the compile answered a cluster-exact offset
-	 * (`leaves.ts`). `createField`'s body over the view this component owns.
-	 *
-	 * The index is built here rather than held: a landing is a discrete act, and one
-	 * doc walk per click is cheaper than a cache to invalidate per keystroke. `usvToPM`
-	 * clamps, so an offset past a value the compile has moved on from lands the end.
-	 *
-	 * `Selection.near`, not `TextSelection.create`: the mapped position can be
-	 * non-inline. Focus first, then the caret, flagged for scroll — the order and the
-	 * reasons are `FieldController.setCaret`'s (`codec/field.ts`). */
-	export function setCaret(pos: number): void {
-		if (!view) return;
-		const pm = usvToPM(buildLineIndex(view.state.doc), pos);
-		const sel = Selection.near(view.state.doc.resolve(pm));
-		view.focus();
-		view.dispatch(view.state.tr.setSelection(sel).scrollIntoView());
-	}
-
-	onMount(() => {
-		if (!containerEl) return;
-		// An array element is an inline, value-by-value leaf: the same keymap and
-		// plugin stack a `createField` leaf mounts (shared `proseLeafPlugins`), minus
-		// the anchor-position plugin (element anchors are dropped on the array's value
-		// write, per the header). Its own `dispatchTransaction` hands `Content` up.
-		//
-		// The schema is the declared type's, as `createField` picks it: `plaintext`
-		// declares no mark types, so there is nothing to toggle, to paste in, or to
-		// mint a shorthand with.
-		const schema = plaintext ? plaintextSchema : inlineSchema;
-		const pmDoc = decode(content(), schema);
-		const state = EditorState.create({
-			doc: pmDoc,
-			plugins: proseLeafPlugins(schema, { inline: true })
-		});
-		const mounted = new EditorView(containerEl, {
-			state,
-			// Names the `contenteditable` for assistive tech (the array row has no
-			// label element to associate).
-			attributes: label ? { 'aria-label': label } : undefined,
-			dispatchTransaction(tr) {
-				const next = mounted.state.apply(tr);
-				mounted.updateState(next);
-				if (tr.docChanged) onChange(pmToContent(next.doc));
-			},
-			handleDOMEvents: {
-				keydown: (_v, e) => {
-					onKey?.(e);
-					return false;
-				}
-			}
-		});
-		view = mounted;
-		return () => {
-			view = undefined;
-			mounted.destroy();
-		};
-	});
-</script>
-
-<!-- `.qm-control-box` (controls.css) is the whole box, so an array of `richtext` and
- an array of `string` render rows of equal height. No floor: the reset in
- `core/codec/prose.css` makes one line of prose measure one line. Width is the
- row's to give: the element fills the track it is placed in (`ArrayField`). -->
-<div bind:this={containerEl} class="qm-array-prose qm-control-box qm-focus-ring-within"></div>
-
-<style>
-	/* Caret-primary, matching ProseField: the contenteditable's own outline is
-	   dropped and the ring rides the wrapper (`qm-focus-ring-within`,
-	   controls.css), which is where the box is. */
-	.qm-array-prose :global(.ProseMirror) {
-		outline: none;
-	}
-</style>

package/dist/visual/ProseArrayElement.svelte.d.ts

@@ -1,25 +0,0 @@
-import './controls.css';
-import type { Content } from '@quillmark/wasm';
-interface Props {
-    /** This element's content, read at mount (`ArrayField`, through the boundary's
-     * element read). A thunk rather than a value: the parent re-derives per
-     * revision and this leaf takes its state once, so a value prop would be a
-     * boundary read per row per render, all but one of them discarded. */
-    content: () => Content;
-    /** The mark-free schema (a `plaintext` item): literal text, no formatting,
-     * exactly as the scalar field of that type mounts. */
-    plaintext?: boolean;
-    /** Accessible name for the editable region (the array has no per-element label). */
-    label?: string;
-    onChange: (rt: Content) => void;
-    /** Raw keydown, for a container whose own keys run through this element: the
-     * array repeater's Enter/Backspace (`ArrayField`). Fires before the view's own
-     * keymap, so the state it reads is the one this keystroke has yet to change. */
-    onKey?: (e: KeyboardEvent) => void;
-}
-declare const ProseArrayElement: import("svelte").Component<Props, {
-    focus: () => void;
-    setCaret: (pos: number) => void;
-}, "">;
-type ProseArrayElement = ReturnType<typeof ProseArrayElement>;
-export default ProseArrayElement;