edytor 1.0.0-rc.3 → 1.0.0

package/dist/collaboration/RemoteSelections.svelte

@@ -12,12 +12,6 @@
 	/** The peers' carets and ranges, positioned by the overlay once per frame. */
 	let selections: RenderedRemoteSelection[] = $state([]);
 
-	const rectStyle = (rect: RemoteSelectionRect, color: string) =>
-		`left:${rect.left}px;top:${rect.top}px;width:${rect.width}px;height:${rect.height}px;background:${color};`;
-
-	const cursorStyle = (rect: RemoteSelectionRect, color: string) =>
-		`left:${rect.left}px;top:${rect.top}px;height:${rect.height}px;background:${color};`;
-
 	const rectKey = (rect: RemoteSelectionRect) =>
 		`${rect.left}:${rect.top}:${rect.width}:${rect.height}`;
 
@@ -42,19 +36,25 @@
 			<span
 				data-edytor-remote-selection
 				data-client-id={selection.clientId}
-				style={rectStyle(rect, selection.color)}
+				style:left="{rect.left}px"
+				style:top="{rect.top}px"
+				style:width="{rect.width}px"
+				style:height="{rect.height}px"
+				style:--edytor-remote-color={selection.color}
 			></span>
 		{/each}
+		<!-- The peer's colour is a variable a theme paints with (its label inherits it). -->
 		<span
 			data-edytor-remote-cursor
 			data-edytor-remote-block={selection.block ? '' : undefined}
 			data-client-id={selection.clientId}
-			style={cursorStyle(selection.cursor, selection.color)}
+			style:left="{selection.cursor.left}px"
+			style:top="{selection.cursor.top}px"
+			style:height="{selection.cursor.height}px"
+			style:--edytor-remote-color={selection.color}
 		>
 			{#if selection.label}
-				<span data-edytor-remote-cursor-label style:background={selection.color}>
-					{selection.label}
-				</span>
+				<span data-edytor-remote-cursor-label>{selection.label}</span>
 			{/if}
 		</span>
 	{/each}
@@ -69,23 +69,19 @@
 		z-index: 20;
 	}
 
+	/* Placed here; painted by a theme in each peer's `--edytor-remote-color`
+	 * (`edytor/themes/notion.css`). */
 	[data-edytor-remote-selection] {
-		opacity: 0.18;
 		position: absolute;
 	}
 
 	[data-edytor-remote-cursor] {
-		border-radius: 999px;
 		position: absolute;
 		width: 2px;
 	}
 
 	[data-edytor-remote-cursor-label] {
-		border-radius: 999px;
-		color: white;
-		font: 500 11px/1.4 sans-serif;
 		left: 0;
-		padding: 1px 6px;
 		position: absolute;
 		top: -1.6em;
 		transform: translateX(-1px);

package/dist/collaboration/comments/client.d.ts

@@ -30,9 +30,9 @@ export type CommentsClient = {
      */
     attach?(document: CommentDocument): (() => void) | void;
 };
-/** What a client reads and writes of a document: its blocks' content, and a mark removal. */
+/** What a client reads and writes of a document: its blocks' content, and its marks (a removal). */
 export type CommentDocument = CommentAnchorSource & {
-    unsetMark(block: string, offset: number, length: number, mark: string): unknown;
+    formatRange(block: string, offset: number, length: number, marks: Record<string, unknown>): unknown;
     transact<T>(fn: () => T): T;
 };
 /** Options of {@link createCommentsClient}. */

package/dist/collaboration/comments/client.js

@@ -128,6 +128,6 @@ const removeAnchors = (document, id) => {
         return;
     document.transact(() => {
         for (const run of [...runs].reverse())
-            document.unsetMark(run.block, run.offset, run.length, `${COMMENT_MARK}:${id}`);
+            document.formatRange(run.block, run.offset, run.length, { [`${COMMENT_MARK}:${id}`]: null });
     });
 };

package/dist/collaboration/history/index.d.ts

@@ -1,9 +1,9 @@
 /**
- * The version history panel: a room's stored versions, a read-only preview
- * of one with the blocks changed since highlighted, and Restore / Undo
- * restore (site `server/history-panel`).
+ * The version history: a room's stored versions, a read-only preview of one
+ * with the blocks changed since highlighted, and Restore / Undo restore
+ * (`VersionHistory`; site `server/history-panel`). The panel's markup is
+ * the app's.
  */
-export { default as HistoryPanel } from './HistoryPanel.svelte';
 export { createHistoryClient, HistoryRequestError, type HistoryClient, type HistoryClientOptions, type HistoryRestoreResult, type HistoryUndoResult, type HistoryVersion } from './client.js';
 export { versionDiff, type VersionChange, type VersionDiff } from './diff.js';
-export { defaultHistoryLabels, type HistoryPanelLabels, type HistoryPanelProps, type HistoryVersionItem } from './panel.js';
+export { VersionHistory, type VersionHistoryStatus, type VersionHistoryOptions } from './panel.svelte.js';

package/dist/collaboration/history/index.js

@@ -1,9 +1,9 @@
 /**
- * The version history panel: a room's stored versions, a read-only preview
- * of one with the blocks changed since highlighted, and Restore / Undo
- * restore (site `server/history-panel`).
+ * The version history: a room's stored versions, a read-only preview of one
+ * with the blocks changed since highlighted, and Restore / Undo restore
+ * (`VersionHistory`; site `server/history-panel`). The panel's markup is
+ * the app's.
  */
-export { default as HistoryPanel } from './HistoryPanel.svelte';
 export { createHistoryClient, HistoryRequestError } from './client.js';
 export { versionDiff } from './diff.js';
-export { defaultHistoryLabels } from './panel.js';
+export { VersionHistory } from './panel.svelte.js';

package/dist/collaboration/history/panel.svelte.d.ts

@@ -0,0 +1,91 @@
+import type { EdytorDocument } from '../../crdt/document.js';
+import type { Plugin } from '../../plugins.js';
+import type { JSONDoc } from '../../utils/json.js';
+import { type HistoryClient, type HistoryRestoreResult, type HistoryUndoResult, type HistoryVersion } from './client.js';
+import { type VersionChange } from './diff.js';
+import type { Attachment } from 'svelte/attachments';
+/**
+ * The last outcome to announce (`''`: none): a restore in flight or done
+ * (`unchanged`: the page already matched), the previewed version gone
+ * (`unavailable`), an undo done or with nothing to undo, a request refused
+ * (`denied`: a `401` or `403`) or failed. Your panel says it in its words.
+ */
+export type VersionHistoryStatus = '' | 'restoring' | 'restored' | 'unchanged' | 'unavailable' | 'undone' | 'nothingToUndo' | 'denied' | 'failed';
+export type VersionHistoryOptions = {
+    /** Where the versions come from: `createHistoryClient(…)`, or any object with `list`, `read`, `restore` and `undo`. */
+    client: HistoryClient;
+    /** The live document the preview is compared with. Without it, no change is highlighted. */
+    document?: EdytorDocument;
+    /** The preview's plugins: the ones the live view uses, so every kind renders as it does there. */
+    plugins?: Plugin[];
+    /** The locale dates and times are written in (default the browser's). */
+    locale?: string | string[];
+    /** The id prefix of the list's rows (page-unique: `$props.id()`). */
+    id?: string;
+    /** After a restore the room answered. */
+    onRestore?: (result: HistoryRestoreResult) => void;
+    /** After an undo the room answered. */
+    onUndo?: (result: HistoryUndoResult) => void;
+    /** A request failed (`status` is `denied` or `failed`). */
+    onError?: (error: unknown) => void;
+};
+/**
+ * A view of a room's versions, made in a component's script (its effects
+ * list the versions, and follow the live document's commits). Read its
+ * state reactively; `select`, `restore`, `undo` and `refresh` act.
+ */
+export declare class VersionHistory {
+    #private;
+    /** The versions, newest first (`null` while the first list loads). */
+    versions: HistoryVersion[] | null;
+    /** The previewed version's key. */
+    selected: string | null;
+    /** The previewed version's JSON, once read (`null` while it loads or when it is gone). */
+    shown: JSONDoc | null;
+    /** The previewed version is being read. */
+    reading: boolean;
+    /** A restore or an undo is in flight. */
+    busy: boolean;
+    /** A restore this view applied, which `undo` can take back. */
+    undoable: boolean;
+    /** The last outcome, to announce (`aria-live`) in your words. */
+    status: VersionHistoryStatus;
+    /** The last outcome failed. */
+    failed: boolean;
+    /** Highlight the blocks added, removed and changed since the version. */
+    highlight: boolean;
+    constructor(options: VersionHistoryOptions);
+    /** The previewed version against the live document: its counts and the changed blocks. */
+    diff: import("./diff.js").VersionDiff | null;
+    /** What the preview renders: the version, with the blocks removed since when highlighting. */
+    preview: JSONDoc | null;
+    /** A key for the preview: it remounts when what it renders changes (`value` is read once). */
+    previewKey: string | null;
+    /** The blocks changed since the version, by id, while highlighting (else none). */
+    changes: ReadonlyMap<string, VersionChange>;
+    /** The preview's plugins: the highlights of the changes (read live), then the app's. */
+    previewPlugins: Plugin[];
+    /** The previewed version, as listed. */
+    selectedVersion: HistoryVersion | null;
+    /** List the versions again; keeps the selection when it is still listed, else selects the newest. */
+    refresh: () => Promise<void>;
+    /** Preview the version `key` (`null`: none). */
+    select: (key: string | null) => Promise<void>;
+    /** Restore the previewed version (the room writes it as one change). */
+    restore: () => Promise<void>;
+    /** Take back the restore this view applied. */
+    undo: () => Promise<void>;
+    /** A version's day (`Oct 8, 2026`), in `locale`; its half of the day is `entry.slot`. */
+    dateOf: (entry: HistoryVersion) => string;
+    /** When a version was saved, in `locale`. */
+    timeOf: (entry: HistoryVersion) => string;
+    /**
+     * The attachment of the version at `index`'s row
+     * (`{@attach history.option(index)}`, on its focusable element):
+     * `role="option"`, its id, `aria-selected`, the list's one tab stop when
+     * it is selected, else the first.
+     */
+    option: (index: number) => Attachment<HTMLElement>;
+    /** The list's attachment (`{@attach history.keys}`): the arrows, Home and End move the selection and the focus. */
+    keys: Attachment<HTMLElement>;
+}

package/dist/collaboration/history/panel.svelte.js

@@ -0,0 +1,223 @@
+/**
+ * The version history's controller (`VersionHistory`): a room's stored
+ * versions, the one previewed and its changes since (`versionDiff`), and
+ * Restore / Undo restore. The app draws the panel: the list (its rows'
+ * `option(index)` and the list's `keys`, attachments), the preview (`<Edytor readonly
+ * value={history.preview} plugins={history.previewPlugins}>`), the status.
+ */
+import { untrack } from 'svelte';
+import { HistoryRequestError } from './client.js';
+import { versionDiff } from './diff.js';
+import { versionHighlightsPlugin } from './versionHighlights.js';
+import { optionAttachment } from '../../plugins/list.svelte.js';
+import { listen } from '../../utils/listen.js';
+/** No change highlighted. */
+const NONE = new Map();
+/**
+ * A view of a room's versions, made in a component's script (its effects
+ * list the versions, and follow the live document's commits). Read its
+ * state reactively; `select`, `restore`, `undo` and `refresh` act.
+ */
+export class VersionHistory {
+    /** The versions, newest first (`null` while the first list loads). */
+    versions = $state.raw(null);
+    /** The previewed version's key. */
+    selected = $state(null);
+    /** The previewed version's JSON, once read (`null` while it loads or when it is gone). */
+    shown = $state.raw(null);
+    /** The previewed version is being read. */
+    reading = $state(false);
+    /** A restore or an undo is in flight. */
+    busy = $state(false);
+    /** A restore this view applied, which `undo` can take back. */
+    undoable = $state(false);
+    /** The last outcome, to announce (`aria-live`) in your words. */
+    status = $state('');
+    /** The last outcome failed. */
+    failed = $state(false);
+    /** Highlight the blocks added, removed and changed since the version. */
+    highlight = $state(true);
+    /** The live document as JSON, read again at each of its commits. */
+    #current = $state.raw(null);
+    /** The request serial: an older answer never replaces a newer one. */
+    #serial = 0;
+    #options;
+    constructor(options) {
+        this.#options = options;
+        $effect(() => {
+            const document = options.document;
+            if (!document)
+                return void (this.#current = null);
+            this.#current = document.toJSON();
+            return document.onChange(() => (this.#current = document.toJSON()));
+        });
+        $effect(() => untrack(() => void this.refresh()));
+    }
+    /** The previewed version against the live document: its counts and the changed blocks. */
+    diff = $derived.by(() => this.shown && this.#current ? versionDiff(this.shown, this.#current) : null);
+    /** What the preview renders: the version, with the blocks removed since when highlighting. */
+    preview = $derived.by(() => this.shown && (this.highlight && this.diff ? this.diff.preview : this.shown));
+    /** A key for the preview: it remounts when what it renders changes (`value` is read once). */
+    previewKey = $derived.by(() => this.preview && JSON.stringify(this.preview));
+    /** The blocks changed since the version, by id, while highlighting (else none). */
+    changes = $derived.by(() => (this.highlight && this.diff ? this.diff.changes : NONE));
+    /** The preview's plugins: the highlights of the changes (read live), then the app's. */
+    previewPlugins = $derived.by(() => [
+        versionHighlightsPlugin(() => this.changes),
+        ...(this.#options.plugins ?? [])
+    ]);
+    /** The previewed version, as listed. */
+    selectedVersion = $derived.by(() => this.versions?.find((entry) => entry.key === this.selected) ?? null);
+    #fail = (error) => {
+        this.failed = true;
+        this.status =
+            error instanceof HistoryRequestError && (error.status === 401 || error.status === 403)
+                ? 'denied'
+                : 'failed';
+        this.#options.onError?.(error);
+    };
+    /** List the versions again; keeps the selection when it is still listed, else selects the newest. */
+    refresh = async () => {
+        try {
+            const listed = await this.#options.client.list();
+            this.versions = listed;
+            if (this.selected === null || !listed.some((entry) => entry.key === this.selected))
+                void this.select(listed[0]?.key ?? null);
+        }
+        catch (error) {
+            this.versions = this.versions ?? [];
+            this.#fail(error);
+        }
+    };
+    /** Preview the version `key` (`null`: none). */
+    select = async (key) => {
+        this.selected = key;
+        this.shown = null;
+        this.failed = false;
+        this.status = '';
+        const mine = ++this.#serial;
+        if (key === null)
+            return;
+        this.reading = true;
+        try {
+            const json = await this.#options.client.read(key);
+            if (mine !== this.#serial)
+                return;
+            this.shown = json;
+            if (json === null) {
+                this.failed = true;
+                this.status = 'unavailable';
+            }
+        }
+        catch (error) {
+            if (mine === this.#serial)
+                this.#fail(error);
+        }
+        finally {
+            if (mine === this.#serial)
+                this.reading = false;
+        }
+    };
+    /** Restore the previewed version (the room writes it as one change). */
+    restore = async () => {
+        const { selected } = this;
+        if (selected === null || this.busy)
+            return;
+        this.busy = true;
+        this.failed = false;
+        this.status = 'restoring';
+        try {
+            const result = await this.#options.client.restore(selected);
+            if (result.status === 'applied')
+                this.undoable = true;
+            // A version gone since it was listed: list again, then say so.
+            if (result.status === 'refused')
+                await this.refresh();
+            this.failed = result.status === 'refused';
+            this.status =
+                result.status === 'applied'
+                    ? 'restored'
+                    : result.status === 'noop'
+                        ? 'unchanged'
+                        : 'unavailable';
+            this.#options.onRestore?.(result);
+        }
+        catch (error) {
+            this.#fail(error);
+        }
+        finally {
+            this.busy = false;
+        }
+    };
+    /** Take back the restore this view applied. */
+    undo = async () => {
+        if (this.busy)
+            return;
+        this.busy = true;
+        this.failed = false;
+        try {
+            const result = await this.#options.client.undo();
+            this.undoable = false;
+            this.status = result.status === 'applied' ? 'undone' : 'nothingToUndo';
+            this.#options.onUndo?.(result);
+        }
+        catch (error) {
+            this.#fail(error);
+        }
+        finally {
+            this.busy = false;
+        }
+    };
+    /** A version's day (`Oct 8, 2026`), in `locale`; its half of the day is `entry.slot`. */
+    dateOf = (entry) => {
+        const day = new Date(`${entry.date}T00:00:00Z`);
+        return Number.isNaN(day.getTime())
+            ? entry.date
+            : new Intl.DateTimeFormat(this.#options.locale, {
+                dateStyle: 'medium',
+                timeZone: 'UTC'
+            }).format(day);
+    };
+    /** When a version was saved, in `locale`. */
+    timeOf = (entry) => {
+        const at = new Date(entry.at);
+        return Number.isNaN(at.getTime())
+            ? ''
+            : new Intl.DateTimeFormat(this.#options.locale, {
+                dateStyle: 'medium',
+                timeStyle: 'short'
+            }).format(at);
+    };
+    /**
+     * The attachment of the version at `index`'s row
+     * (`{@attach history.option(index)}`, on its focusable element):
+     * `role="option"`, its id, `aria-selected`, the list's one tab stop when
+     * it is selected, else the first.
+     */
+    option = (index) => {
+        const selected = this.versions?.[index]?.key === this.selected;
+        return optionAttachment(`${this.#options.id ?? 'edytor-history'}-version-${index}`, 'option', selected, { tabindex: selected || (this.selected === null && index === 0) ? 0 : -1 }, false);
+    };
+    /** The list's attachment (`{@attach history.keys}`): the arrows, Home and End move the selection and the focus. */
+    keys = (node) => listen(node, 'keydown', this.#keydown);
+    #keydown = (event) => {
+        const { versions } = this;
+        if (!versions?.length)
+            return;
+        const at = versions.findIndex((entry) => entry.key === this.selected);
+        const next = {
+            ArrowDown: Math.min(versions.length - 1, at + 1),
+            ArrowUp: Math.max(0, at - 1),
+            Home: 0,
+            End: versions.length - 1
+        }[event.key];
+        if (next === undefined)
+            return;
+        event.preventDefault();
+        const key = versions[next].key;
+        if (key !== this.selected)
+            void this.select(key);
+        const list = event.currentTarget;
+        list.querySelectorAll('[role="option"]')[next]?.focus();
+    };
+}

package/dist/collaboration/providers.d.ts

@@ -1,3 +1,12 @@
+/**
+ * The sync factories of the package root (`import { createIndexeddbSync }
+ * from 'edytor'`): the provider stack bound once to the vendored engine
+ * (`crdt/providers/bound.ts`, shared with `edytor/protocol`'s raw provider
+ * classes). The factories themselves live in ONE place, `bindProviders(Y)`
+ * in `src/lib/crdt/providers/index.ts`.
+ */
+import { prefetch as prefetchStack } from '../crdt/providers/bound.js';
+import { documentSnapshot as snapshotOf, lastUpdated as lastUpdatedOf } from '../crdt/providers/index.js';
 import { type Awareness, type EdytorSync, type EdytorSyncCleanup, type EdytorSyncPayload, type IndexeddbSyncOptions as CrdtIndexeddbSyncOptions, type ProviderStack, type WebsocketSync, type WebsocketSyncOptions as CrdtWebsocketSyncOptions, type YDoc } from '../crdt/index.js';
 export type { EdytorSync, EdytorSyncCleanup, EdytorSyncPayload, WebsocketSync, Awareness, YDoc };
 export type IndexeddbSyncOptions = CrdtIndexeddbSyncOptions;
@@ -9,8 +18,8 @@ export declare const createIndexeddbSync: (name: string) => EdytorSync;
 export declare const createWebsocketSync: (options: WebsocketSyncOptions) => WebsocketSync;
 export declare const clearDocument: ProviderStack['clearDocument'];
 /** Keep a document's local copy fresh without opening it (sync once, then close). */
-export declare const prefetch: ProviderStack['prefetch'];
+export declare const prefetch: typeof prefetchStack;
 /** When a room last stored a change: one authorized HTTP request, no document opened. */
-export declare const lastUpdated: ProviderStack['lastUpdated'];
+export declare const lastUpdated: typeof lastUpdatedOf;
 /** A room's document as JSON (one authorized HTTP request), for `<Edytor snapshot>`. */
-export declare const documentSnapshot: ProviderStack['documentSnapshot'];
+export declare const documentSnapshot: typeof snapshotOf;

package/dist/collaboration/providers.js

@@ -5,7 +5,8 @@
  * classes). The factories themselves live in ONE place, `bindProviders(Y)`
  * in `src/lib/crdt/providers/index.ts`.
  */
-import { providers } from '../crdt/providers/bound.js';
+import { prefetch as prefetchStack, providers } from '../crdt/providers/bound.js';
+import { documentSnapshot as snapshotOf, lastUpdated as lastUpdatedOf } from '../crdt/providers/index.js';
 import {} from '../crdt/index.js';
 export const createIndexeddbSync = providers.createIndexeddbSync;
 export const createWebsocketSync = providers.createWebsocketSync;
@@ -15,8 +16,8 @@ export const createWebsocketSync = providers.createWebsocketSync;
 // (`../crdt/providers/indexeddb`), which `nodenext` consumers reject.
 export const clearDocument = providers.clearDocument;
 /** Keep a document's local copy fresh without opening it (sync once, then close). */
-export const prefetch = providers.prefetch;
+export const prefetch = prefetchStack;
 /** When a room last stored a change: one authorized HTTP request, no document opened. */
-export const lastUpdated = providers.lastUpdated;
+export const lastUpdated = lastUpdatedOf;
 /** A room's document as JSON (one authorized HTTP request), for `<Edytor snapshot>`. */
-export const documentSnapshot = providers.documentSnapshot;
+export const documentSnapshot = snapshotOf;

package/dist/components/Block.svelte

@@ -42,15 +42,14 @@
 		void: voidChrome
 	});
 
-	/** A child in the flow: a block's id, a block suggestion, or a preview's own block. */
-	type Kid = string | Suggestion | PreviewCell;
+	/**
+	 * A child in the flow: a block's id, a block suggestion's preview in the
+	 * flow among its siblings (in place of a block), or a suggestion's own
+	 * block, rendered from its preview cell, never registered (`Suggestion`).
+	 */
+	export type Kid = string | Suggestion | PreviewCell;
 	const kidKey = (kid: Kid) =>
 		typeof kid === 'string' || kid instanceof Suggestion ? kid : kid.id;
-	const idOf = (kid: Kid) =>
-		typeof kid === 'string' ? kid : kid instanceof Suggestion ? undefined : kid.id;
-	const previewOf = (kid: Kid) =>
-		typeof kid === 'string' || kid instanceof Suggestion ? undefined : kid;
-	const suggestionOf = (kid: Kid) => (kid instanceof Suggestion ? kid : undefined);
 
 	/** Tags that take no content: the kind renders the element only. */
 	const VOID_TAGS = new Set(['area', 'br', 'col', 'embed', 'hr', 'img', 'input', 'wbr']);
@@ -93,20 +92,15 @@
 	import Child from './Block.svelte';
 	import Content from './Content.svelte';
 	import SuggestionPreview from './Suggestion.svelte';
-	import { blockDir, ownText } from '../surface/attributes.js';
+	import { blockDir, ownText, type Owned } from '../surface/attributes.js';
 	import { colorAttributes } from '../block/colors.js';
 
-	let {
-		id,
-		preview,
-		suggestion
-	}: {
-		id?: string;
-		/** A suggestion's block: rendered from its preview cell, never registered (`Suggestion`). */
-		preview?: PreviewCell;
-		/** A block suggestion's preview in the flow among its siblings, in place of a block. */
-		suggestion?: Suggestion;
-	} = $props();
+	let { kid }: { kid: Kid } = $props();
+	const suggestion = $derived(kid instanceof Suggestion ? kid : undefined);
+	const preview = $derived(
+		typeof kid === 'string' || suggestion ? undefined : (kid as PreviewCell)
+	);
+	const id = $derived(typeof kid === 'string' ? kid : preview?.id);
 
 	const edytor = getContext<Edytor>('edytor');
 	// The structure renders from the cell; the snippet receives a view object.
@@ -142,20 +136,18 @@
 			? elementOf(definition.contentElement, cell?.data, id)
 			: undefined
 	);
-	/** Its direction from its own text (`blockDir`, bidi): none in a preview. */
-	const dir = $derived(preview ? null : blockDir(ownText(cell?.runs ?? [])));
 	/**
-	 * `dir` as an attribute, absent when `null`: Svelte writes `dir` as a
-	 * property, which would leave `dir=""` where the table wants none.
+	 * Registers the block element (one element per block, re-registered when
+	 * the tag changes) with what it owns: the core's attributes below, not
+	 * the kind's (`surface/attributes.ts` heals them).
 	 */
-	const direction = (node: HTMLElement, value: 'rtl' | 'ltr' | null) => {
-		const write = (next: 'rtl' | 'ltr' | null) =>
-			next ? node.setAttribute('dir', next) : node.removeAttribute('dir');
-		write(value);
-		return { update: write };
-	};
-	/** Registers the block element: one element per block, re-registered when the tag changes. */
-	const register = (node: HTMLElement) => block?.handle?.attach(node);
+	const register = (node: HTMLElement) =>
+		block?.handle?.attach(node, (): Owned => {
+			const owned: Record<string, string | null> = {};
+			for (const [name, value] of Object.entries(attributes ?? {}))
+				if (!(name in (element?.attributes ?? {}))) owned[name] = (value as string) ?? null;
+			return { strict: false, owned, style: userSelect ? { 'user-select': userSelect } : {} };
+		});
 	/**
 	 * Whether the selection holds this block, and whether it touches it: one
 	 * boolean each, read from the block's own membership (`isSelected`,
@@ -184,7 +176,9 @@
 			'data-edytor-selected': selected ? 'true' : undefined,
 			'data-edytor-focused': focused ? 'true' : undefined,
 			'data-edytor-suggestion-replaced': shown ? (replacedMark(shown) ?? undefined) : undefined,
-			contenteditable: definition?.void ? ('false' as const) : undefined
+			contenteditable: definition?.void ? ('false' as const) : undefined,
+			// Its direction from its own text (`blockDir`, bidi), absent without one: none in a preview.
+			dir: (!preview && blockDir(ownText(cell?.runs ?? []))) || undefined
 		}
 	);
 	const userSelect = $derived(definition?.void ? 'none' : undefined);
@@ -199,9 +193,11 @@
 
 	// The kind `content()` last rendered under — read after each render.
 	let contentRenderedFor: string | undefined;
-	$effect(() => {
-		if (DEV && block?.handle) checkRendersContent(block.handle, contentRenderedFor === cell?.type);
-	});
+	// Development only: production keeps no effect per block for it.
+	if (DEV)
+		$effect(() => {
+			if (block?.handle) checkRendersContent(block.handle, contentRenderedFor === cell?.type);
+		});
 </script>
 
 <!--
@@ -235,7 +231,7 @@
 {/snippet}<!--
 -->{#snippet children()}
 	{#each kids as kid (kidKey(kid))}
-		<Child id={idOf(kid)} preview={previewOf(kid)} suggestion={suggestionOf(kid)} />
+		<Child {kid} />
 	{/each}
 {/snippet}<!--
 	A kind this view does not register: a plain block, its text and children.
@@ -255,39 +251,27 @@
 -->{#if suggestion}
 	<SuggestionPreview {suggestion} />
 {:else if tag === 'div'}
-	<div {...attributes} style:user-select={userSelect} use:register use:direction={dir}>
+	<div {...attributes} style:user-select={userSelect} use:register>
 		{@render body?.(payload)}
 	</div>
 {:else if tag === 'li'}
-	<li {...attributes} style:user-select={userSelect} use:register use:direction={dir}>
+	<li {...attributes} style:user-select={userSelect} use:register>
 		{@render body?.(payload)}
 	</li>
 {:else if tag === 'details'}
-	<details {...attributes} style:user-select={userSelect} use:register use:direction={dir}>
+	<details {...attributes} style:user-select={userSelect} use:register>
 		{@render body?.(payload)}
 	</details>
 {:else if tag === 'figure'}
-	<figure {...attributes} style:user-select={userSelect} use:register use:direction={dir}>
+	<figure {...attributes} style:user-select={userSelect} use:register>
 		{@render body?.(payload)}
 	</figure>
 {:else if tag === 'hr'}
-	<hr {...attributes} style:user-select={userSelect} use:register use:direction={dir} />
+	<hr {...attributes} style:user-select={userSelect} use:register />
 {:else if tag && VOID_TAGS.has(tag)}
-	<svelte:element
-		this={tag}
-		{...attributes}
-		style:user-select={userSelect}
-		use:register
-		use:direction={dir}
-	/>
+	<svelte:element this={tag} {...attributes} style:user-select={userSelect} use:register />
 {:else if tag}
-	<svelte:element
-		this={tag}
-		{...attributes}
-		style:user-select={userSelect}
-		use:register
-		use:direction={dir}
-	>
+	<svelte:element this={tag} {...attributes} style:user-select={userSelect} use:register>
 		{@render body?.(payload)}
 	</svelte:element>
 {/if}