edytor 1.0.0-rc.3 → 2.0.0

package/dist/plugins/Control.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" generics="T">
+	import { getContext, type Snippet } from 'svelte';
+	import type { Edytor } from '../edytor.svelte.js';
+
+	/**
+	 * A control inside a block: the app's snippet for it in the view
+	 * rendering it (`own`; a suggestion's preview's too), else the package's
+	 * markup (`initial`), with the control's `payload`.
+	 */
+	let {
+		own,
+		initial,
+		payload
+	}: {
+		own: (view: Edytor | undefined) => Snippet<[T]> | undefined;
+		initial: Snippet<[T]>;
+		payload: T;
+	} = $props();
+	const view = getContext<Edytor | undefined>('edytor');
+	const snippet = $derived(own(view) ?? initial);
+</script>
+
+{@render snippet(payload)}

package/dist/plugins/Control.svelte.d.ts

@@ -0,0 +1,30 @@
+import { type Snippet } from 'svelte';
+import type { Edytor } from '../edytor.svelte.js';
+declare function $$render<T>(): {
+    props: {
+        own: (view: Edytor | undefined) => Snippet<[T]> | undefined;
+        initial: Snippet<[T]>;
+        payload: T;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Control: $$IsomorphicComponent;
+type Control<T> = InstanceType<typeof Control<T>>;
+export default Control;

package/dist/plugins/anchored.svelte.d.ts

@@ -0,0 +1,47 @@
+/**
+ * A panel the overlay draws under an element of the page (the code
+ * language list under its button, the equation editor under its
+ * equation): the anchor's box, measured on the overlay's frames, and the
+ * one rule that closes the panel without moving the keys: its anchor gone,
+ * a press or a focus outside the panel and its anchor, the view turning
+ * readonly.
+ */
+import type { Component } from 'svelte';
+import type { Edytor } from '../edytor.svelte.js';
+import { type LayerBox } from '../surface/overlay.js';
+export declare class Anchored {
+    #private;
+    private edytor;
+    /** The overlay host's name: its element is `[data-<name>]`. */
+    private name;
+    /** The element the panel stands under: `null` when it left the page, `undefined` while closed. */
+    private anchor;
+    /** Close the panel, the keys where they are. */
+    private dismiss;
+    /** The anchor's box in the overlay's frame while the panel is open, else `null` (reactive). */
+    box: LayerBox | null;
+    constructor(edytor: Edytor, 
+    /** The overlay host's name: its element is `[data-<name>]`. */
+    name: string, 
+    /** The element the panel stands under: `null` when it left the page, `undefined` while closed. */
+    anchor: () => Element | null | undefined, 
+    /** Close the panel, the keys where they are. */
+    dismiss: () => void);
+    /** Where the panel stands: `gap` under its anchor, from its middle with `center`, layer-relative. */
+    place: (gap: number, center?: boolean) => {
+        left: number;
+        top: number;
+    } | null;
+    /**
+     * Focus left a field of the panel (its `focusout`): for somewhere outside
+     * the panel and its anchor, it closes; with no new focus (the window went
+     * to the background), it stays.
+     */
+    blurred: (event: FocusEvent) => void;
+    /**
+     * Mount the panel in the overlay at `zIndex` (above the block handles, 5,
+     * by default), with a press listener (capture) on `node`'s document and
+     * the readonly rule. Answers the teardown, which closes it.
+     */
+    mount: <Props extends Record<string, unknown>>(node: HTMLElement, component: Component<Props>, props: Props, zIndex?: number) => () => void;
+}

package/dist/plugins/anchored.svelte.js

@@ -0,0 +1,73 @@
+import { onPress } from '../events/onFocus.js';
+import { layerBox, pin, sameValues } from '../surface/overlay.js';
+export class Anchored {
+    edytor;
+    name;
+    anchor;
+    dismiss;
+    /** The anchor's box in the overlay's frame while the panel is open, else `null` (reactive). */
+    box = $state.raw(null);
+    constructor(edytor, 
+    /** The overlay host's name: its element is `[data-<name>]`. */
+    name, 
+    /** The element the panel stands under: `null` when it left the page, `undefined` while closed. */
+    anchor, 
+    /** Close the panel, the keys where they are. */
+    dismiss) {
+        this.edytor = edytor;
+        this.name = name;
+        this.anchor = anchor;
+        this.dismiss = dismiss;
+    }
+    /** Where the panel stands: `gap` under its anchor, from its middle with `center`, layer-relative. */
+    place = (gap, center = false) => {
+        const box = this.box;
+        return box && { left: box.x + (center ? box.width / 2 : 0), top: box.y + box.height + gap };
+    };
+    /** `at` is outside the panel's host and its anchor: the panel closes. */
+    #outside = (at, host) => {
+        if (!(at instanceof Node))
+            return;
+        if (!host?.contains(at) && !this.anchor()?.contains(at))
+            this.dismiss();
+    };
+    /**
+     * Focus left a field of the panel (its `focusout`): for somewhere outside
+     * the panel and its anchor, it closes; with no new focus (the window went
+     * to the background), it stays.
+     */
+    blurred = (event) => this.#outside(event.relatedTarget, event.currentTarget?.closest(`[data-${this.name}]`));
+    /**
+     * Mount the panel in the overlay at `zIndex` (above the block handles, 5,
+     * by default), with a press listener (capture) on `node`'s document and
+     * the readonly rule. Answers the teardown, which closes it.
+     */
+    mount = (node, component, props, zIndex = 7) => {
+        const { edytor } = this;
+        const offPress = onPress(edytor, node.ownerDocument, (event) => this.anchor() !== undefined &&
+            this.#outside(event.target, event.target?.closest?.(`[data-${this.name}]`)), true);
+        const unmount = edytor.overlay.mount(component, props, this.name, zIndex, (host, origin) => {
+            const anchor = this.anchor();
+            const box = layerBox(anchor, origin);
+            return () => {
+                pin(host);
+                if (anchor === null)
+                    return this.dismiss();
+                if (!sameValues(box, this.box))
+                    this.box = box;
+            };
+        });
+        const offLock = $effect.root(() => {
+            $effect(() => {
+                if (edytor.readonly)
+                    this.dismiss();
+            });
+        });
+        return () => {
+            offPress();
+            offLock();
+            unmount();
+            this.dismiss();
+        };
+    };
+}

package/dist/plugins/arrowMove/arrowMove.d.ts

@@ -1,2 +1,3 @@
 import type { Plugin } from '../../plugins.js';
-export declare const arrowMovePlugin: Plugin;
+/** Block moves from the keyboard (Mod+Up/Down, Mod+Shift+Up/Down): apps list it (`createArrowMovePlugin()`), it is not a default. */
+export declare const createArrowMovePlugin: () => Plugin;

package/dist/plugins/arrowMove/arrowMove.js

@@ -1,3 +1,4 @@
+import { branded } from '../brand.js';
 import { getSelectionBlocks, movable, outermost, selectMoved } from '../../selection/replaceSelection.js';
 /**
  * One relative step for the selected blocks; with `caret`, the block
@@ -8,24 +9,27 @@ import { getSelectionBlocks, movable, outermost, selectMoved } from '../../selec
  */
 const move = (direction, caret = false) => ({ edytor, prevent }) => {
     const selected = [...edytor.selection.selectedBlocks];
-    const { startBlock: at, isCollapsed } = edytor.selection.state;
+    const { startText } = edytor.selection.textRange();
+    const { isCollapsed } = edytor.selection.projection;
+    const at = startText?.parent;
     // A code line moves as its code block (`movable`).
     const spanned = () => outermost(movable(isCollapsed ? (at ? [at] : []) : getSelectionBlocks(edytor)));
     // A selected block's selected descendants travel with it (`outermost`), as the menu's Move does.
     const blocks = selected.length ? outermost(movable(selected)) : caret ? spanned() : [];
-    if (!blocks.length || !edytor.canMoveBlocks({ blocks, direction }))
+    if (!blocks.length || !edytor.canMove({ blocks, direction }))
         return;
     prevent(() => {
-        const moved = edytor.moveBlocks({ blocks, direction });
+        const moved = edytor.move({ blocks, direction });
         if (moved.length && selected.length)
             selectMoved(edytor, moved, selected);
     });
 };
-export const arrowMovePlugin = () => ({
+/** Block moves from the keyboard (Mod+Up/Down, Mod+Shift+Up/Down): apps list it (`createArrowMovePlugin()`), it is not a default. */
+export const createArrowMovePlugin = () => branded('arrowMove', () => ({
     hotkeys: {
         'mod+arrowdown': move('down'),
         'mod+arrowup': move('up'),
         'mod+shift+arrowdown': move('down', true),
         'mod+shift+arrowup': move('up', true)
     }
-});
+}));

package/dist/plugins/bands.svelte.d.ts

@@ -0,0 +1,57 @@
+/**
+ * What the chrome over a view's blocks shares (the table's grips and
+ * bands, the column resize): its listeners on the host, the overlay and the
+ * page, and a resize band's gesture.
+ */
+import type { Attachment } from 'svelte/attachments';
+import type { Edytor } from '../edytor.svelte.js';
+/**
+ * The pointer over a view for its chrome: `over` hears it over the host,
+ * `leave` it leaving the host or the overlay for `relatedTarget`, and
+ * `drag` every drag starting (`dragstart`) or ending (`dragend`, `drop`)
+ * in the page. Answers the cleanup.
+ */
+export declare const hoverChrome: (edytor: Edytor, node: HTMLElement, over: (target: EventTarget | null) => void, leave: (to: EventTarget | null) => void, drag: (event: Event) => void) => () => void;
+/**
+ * A resize band's gesture (a table column's, a layout gap's): a press
+ * drags a view-only preview (`drag`, its `at` the pointer's x) and the
+ * release writes once; Escape, a cancel or the view turning readonly
+ * (`lock`) drop the preview, nothing written. A focused band's keys are its
+ * own (`key`).
+ */
+export declare class BandDrag<D extends {
+    at: number;
+}> {
+    #private;
+    private edytor;
+    /** The drag in progress. */
+    drag: D | null;
+    constructor(edytor: Edytor);
+    /** A text selection is in progress (`selection.dragging`): the bands take no pointer. */
+    get selecting(): boolean;
+    /**
+     * A band's press (`{@attach band.press(start)}`): its `pointerdown`, or
+     * its lone `mousedown` (`isLonePress`: WebKit's first press after a
+     * block drag); no `mousedown` there starts a native selection.
+     */
+    press: (start: (event: PointerEvent | MouseEvent) => void) => Attachment<HTMLElement>;
+    /**
+     * Start `drag` from `event` (a primary press in an editable view, none in
+     * progress): `moved` hears each move, `end` the release (the drag at its
+     * x) or `null` when it ends without one.
+     */
+    start(event: PointerEvent | MouseEvent, drag: D, end: (drag: D | null) => void, moved?: () => void): void;
+    /**
+     * The view turned readonly (or the document read-only): a drag in progress
+     * ends at once, its preview dropped, nothing written.
+     */
+    lock: () => void;
+}
+/**
+ * A key on a focused band of `band`: every key there is the band's, never
+ * the editor's; Escape gives the keys back to the editor. The step `steps`
+ * gives the key, when one does and a write may start (no drag in progress).
+ */
+export declare const bandKey: (edytor: Edytor, band: BandDrag<{
+    at: number;
+}>, event: KeyboardEvent, steps: Record<string, number>) => number | undefined;

package/dist/plugins/bands.svelte.js

@@ -0,0 +1,95 @@
+import { trackDrag } from '../dnd/track.js';
+import { isLonePress, takeKeys } from '../events/onFocus.js';
+import { all, listen } from '../utils/listen.js';
+/**
+ * The pointer over a view for its chrome: `over` hears it over the host,
+ * `leave` it leaving the host or the overlay for `relatedTarget`, and
+ * `drag` every drag starting (`dragstart`) or ending (`dragend`, `drop`)
+ * in the page. Answers the cleanup.
+ */
+export const hoverChrome = (edytor, node, over, leave, drag) => {
+    const out = (event) => leave(event.relatedTarget);
+    const off = all(listen(node, 'pointerover', (event) => over(event.target)), listen(node, 'pointerleave', out), listen(edytor.overlay.layer, 'pointerleave', out), listen(node.ownerDocument, 'dragstart dragend drop', drag, true));
+    return off;
+};
+/**
+ * A resize band's gesture (a table column's, a layout gap's): a press
+ * drags a view-only preview (`drag`, its `at` the pointer's x) and the
+ * release writes once; Escape, a cancel or the view turning readonly
+ * (`lock`) drop the preview, nothing written. A focused band's keys are its
+ * own (`key`).
+ */
+export class BandDrag {
+    edytor;
+    /** The drag in progress. */
+    drag = $state(null);
+    /** Ends the drag in progress without a write. */
+    #cancel = null;
+    constructor(edytor) {
+        this.edytor = edytor;
+    }
+    /** A text selection is in progress (`selection.dragging`): the bands take no pointer. */
+    get selecting() {
+        return this.drag === null && this.edytor.selection.dragging;
+    }
+    /**
+     * A band's press (`{@attach band.press(start)}`): its `pointerdown`, or
+     * its lone `mousedown` (`isLonePress`: WebKit's first press after a
+     * block drag); no `mousedown` there starts a native selection.
+     */
+    press = (start) => (node) => {
+        const off = all(listen(node, 'pointerdown', start), listen(node, 'mousedown', (event) => {
+            event.preventDefault();
+            if (isLonePress(this.edytor, event))
+                start(event);
+        }));
+        return off;
+    };
+    /**
+     * Start `drag` from `event` (a primary press in an editable view, none in
+     * progress): `moved` hears each move, `end` the release (the drag at its
+     * x) or `null` when it ends without one.
+     */
+    start(event, drag, end, moved) {
+        if (event.button !== 0 || this.edytor.readonly || this.drag)
+            return;
+        this.drag = drag;
+        this.#cancel = trackDrag(this.edytor, event, (x) => {
+            if (!this.drag)
+                return;
+            this.drag.at = x;
+            moved?.();
+        }, (x) => {
+            const drag = this.drag;
+            this.drag = null;
+            this.#cancel = null;
+            end(drag && x !== null ? { ...drag, at: x } : null);
+        });
+    }
+    /**
+     * The view turned readonly (or the document read-only): a drag in progress
+     * ends at once, its preview dropped, nothing written.
+     */
+    lock = () => {
+        if (this.drag && !this.edytor.dispatcher.permits())
+            this.#cancel?.();
+    };
+}
+/**
+ * A key on a focused band of `band`: every key there is the band's, never
+ * the editor's; Escape gives the keys back to the editor. The step `steps`
+ * gives the key, when one does and a write may start (no drag in progress).
+ */
+export const bandKey = (edytor, band, event, steps) => {
+    event.stopPropagation();
+    if (event.key === 'Escape') {
+        event.preventDefault();
+        takeKeys(edytor);
+        return;
+    }
+    const step = steps[event.key];
+    if (step === undefined)
+        return;
+    event.preventDefault();
+    return band.drag || !edytor.dispatcher.permits() ? undefined : step;
+};

package/dist/plugins/blockHandles/BlockHandle.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { Block } from '../../block/block.svelte.js';
 	import type { BlockHandleController } from './BlockHandleController.svelte.js';
-
-	import type { Snippet } from 'svelte';
 	import type { BlockHandleSnippetPayload } from './blockHandlesPlugin.js';
 
+	/** One block's handle: the app's `handle` snippet, with the block's payload (reactive). */
 	let {
 		block,
 		controller,
@@ -12,159 +12,19 @@
 	}: {
 		block: Block;
 		controller: BlockHandleController;
-		handle?: Snippet<[BlockHandleSnippetPayload]>;
+		handle: Snippet<[BlockHandleSnippetPayload]>;
 	} = $props();
 	const grip = $derived(controller.grip(block));
-	/** Alt+click on the `+` of a block directly in a column adds a column right of it (Notion). */
-	const beside = $derived(controller.addsColumn(block));
-	/** The block's kind as people read it: the controls' names. */
-	const label = $derived(controller.labelOf(block));
-	/** The menus this handle's `+` and grip opened, while open: their `aria-expanded`. */
-	const added = $derived(controller.opened(block, 'add'));
-	const gripped = $derived(controller.opened(block, 'grip'));
-	const labels = $derived(controller.labels);
+	const plus = $derived(controller.plus(block));
 </script>
 
-{#if handle}
-	{@render handle({
-		block,
-		label,
-		grip,
-		add: (alt = false, anchor) => controller.addBlock(block, alt, anchor ?? block.node ?? null),
-		addable: true,
-		readonly: controller.readonly,
-		draggable: controller.draggable,
-		expanded: { add: added !== undefined, grip: gripped !== undefined },
-		controls: { add: added?.id, grip: gripped?.id },
-		labels
-	})}
-{:else}
-	<button
-		type="button"
-		class="edytor-block-add"
-		contenteditable="false"
-		hidden={controller.readonly}
-		data-testid="block-add"
-		aria-label={beside ? labels.addBeside(label) : labels.add(label)}
-		aria-expanded={added ? 'true' : undefined}
-		aria-controls={added?.id}
-		aria-haspopup={added?.haspopup}
-		title={beside ? labels.addBesideHint : labels.addHint}
-		onmousedown={(event) => event.preventDefault()}
-		onpointerdown={(event) => event.stopPropagation()}
-		onclick={(event) => {
-			event.preventDefault();
-			event.stopPropagation();
-			controller.addBlock(block, event.altKey, event.currentTarget);
-		}}
-	>
-		<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false">
-			<path
-				d="M8 2.75v10.5M2.75 8h10.5"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="1.4"
-				stroke-linecap="round"
-			/>
-		</svg>
-	</button><button
-		type="button"
-		class="edytor-block-handle"
-		contenteditable="false"
-		use:grip
-		hidden={controller.readonly}
-		data-testid="block-handle"
-		data-block-id={block.id}
-		aria-label={labels.grip(label)}
-		aria-expanded={gripped ? 'true' : undefined}
-		aria-controls={gripped?.id}
-		aria-haspopup={gripped?.haspopup}
-		aria-keyshortcuts="Alt+ArrowUp Alt+ArrowDown Alt+ArrowRight Alt+ArrowLeft"
-		data-draggable={controller.draggable ? 'true' : undefined}
-	>
-		<svg viewBox="0 0 10 16" width="10" height="16" aria-hidden="true" focusable="false">
-			<circle cx="2.5" cy="3" r="1.3" />
-			<circle cx="7.5" cy="3" r="1.3" />
-			<circle cx="2.5" cy="8" r="1.3" />
-			<circle cx="7.5" cy="8" r="1.3" />
-			<circle cx="2.5" cy="13" r="1.3" />
-			<circle cx="7.5" cy="13" r="1.3" />
-		</svg>
-	</button>
-{/if}
-
-<style>
-	.edytor-block-handle,
-	.edytor-block-add {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: 24px;
-		height: 24px;
-		padding: 0;
-		border: 0;
-		border-radius: 6px;
-		background: transparent;
-		color: #ada9a3;
-		cursor: pointer;
-		transition: background-color 80ms ease;
-	}
-
-	.edytor-block-handle {
-		width: 18px;
-	}
-
-	.edytor-block-handle[data-draggable='true'] {
-		cursor: grab;
-	}
-
-	.edytor-block-handle[hidden],
-	.edytor-block-add[hidden] {
-		display: none;
-	}
-
-	.edytor-block-handle:hover,
-	.edytor-block-handle:focus-visible,
-	.edytor-block-add:hover,
-	.edytor-block-add:focus-visible {
-		background: rgba(33, 27, 23, 0.06);
-		outline: 0;
-	}
-
-	.edytor-block-handle[data-draggable='true']:active {
-		cursor: grabbing;
-	}
-
-	.edytor-block-handle svg {
-		fill: currentColor;
-	}
-
-	/* Notion's drop bar: plain, 4px, indented when the block nests. */
-	:global([data-edytor-drop-indicator]) {
-		position: absolute;
-		z-index: 100;
-		box-sizing: border-box;
-		height: 4px;
-		border: 0;
-		border-radius: 0;
-		background: var(--edytor-drop-indicator-color, rgba(35, 131, 226, 0.43));
-		pointer-events: none;
-	}
-
-	/* Notion's nest backdrop: the future parent's own row, softly tinted. */
-	:global([data-edytor-drop-backdrop]) {
-		position: absolute;
-		z-index: 99;
-		border-radius: 4px;
-		/* One plain color: lightningcss rewrites light-dark() into variables it
-		 * only defines beside a `color-scheme`, voiding the background. */
-		background: var(--edytor-drop-backdrop-color, rgba(35, 131, 226, 0.14));
-		opacity: 0;
-		pointer-events: none;
-		transition: opacity 120ms ease;
-	}
-
-	:global([data-edytor-drop-backdrop][data-shown='true']) {
-		opacity: 1;
-	}
-</style>
+{@render handle({
+	block,
+	label: controller.labelOf(block),
+	grip,
+	plus,
+	add: (alt = false, anchor) => controller.addBlock(block, alt, anchor ?? block.node ?? null),
+	beside: controller.addsColumn(block),
+	readonly: controller.readonly,
+	draggable: controller.draggable
+})}

package/dist/plugins/blockHandles/BlockHandle.svelte.d.ts

@@ -1,11 +1,11 @@
+import type { Snippet } from 'svelte';
 import type { Block } from '../../block/block.svelte.js';
 import type { BlockHandleController } from './BlockHandleController.svelte.js';
-import type { Snippet } from 'svelte';
 import type { BlockHandleSnippetPayload } from './blockHandlesPlugin.js';
 type $$ComponentProps = {
     block: Block;
     controller: BlockHandleController;
-    handle?: Snippet<[BlockHandleSnippetPayload]>;
+    handle: Snippet<[BlockHandleSnippetPayload]>;
 };
 declare const BlockHandle: import("svelte").Component<$$ComponentProps, {}, "">;
 type BlockHandle = ReturnType<typeof BlockHandle>;