edytor 1.0.0-rc.2 → 1.0.0-rc.3

package/README.md

@@ -17,7 +17,7 @@
 
 Edytor aims to be for Svelte what Slate.js is for React: a heavily customizable editor with an API to build any kind of collaborative rich text editor.
 
-> **Release candidate.** Edytor `1.0.0-rc.2` is the 1.0 release candidate (`edytor` on npm): its API is frozen, and a change to it before 1.0 is a listed breaking change. It has no production track record yet: read the [limitations](https://edytor.dev/docs/reference/limitations) before you build on it. Issues and PRs are welcome: when you report a bug, include the document's JSON value.
+> **Release candidate.** Edytor `1.0.0-rc.3` is the 1.0 release candidate (`edytor` on npm): its API is frozen, and a change to it before 1.0 is a listed breaking change. It has no production track record yet: read the [limitations](https://edytor.dev/docs/reference/limitations) before you build on it. Issues and PRs are welcome: when you report a bug, include the document's JSON value.
 
 ## Features
 

package/dist/block/block.svelte.js

@@ -117,10 +117,10 @@ export class Block {
         this.patchData({ ops: [{ path: [], value: data }] });
     };
     get selected() {
-        return this.edytor.selection.selectedBlocks.has(this);
+        return this.edytor.selection.isSelected(this);
     }
     get focused() {
-        return this.edytor.selection.focusedBlocks.has(this) && !this.selected;
+        return this.edytor.selection.isFocused(this) && !this.selected;
     }
     /** May this block move at all: `canPlace` without a destination (drag handles). */
     get movable() {
@@ -195,10 +195,24 @@ export class Block {
         return this.edytor.facade.isVisibleBlock(this.id);
     }
     get nextBlock() {
-        return this.parent ? this.parent.children[this.index + 1] : null;
+        return this.#sibling(1);
     }
     get previousBlock() {
-        return this.parent ? this.parent.children[this.index - 1] : null;
+        return this.#sibling(-1);
+    }
+    /**
+     * The sibling `step` places away (none past either end): one id read, no
+     * handle for every sibling (a top-level block's are the whole page's).
+     * Tracks what `parent` and `index` track: this block's cell and its
+     * parent's child list.
+     */
+    #sibling(step) {
+        const parent = this.parent;
+        if (!parent)
+            return null;
+        const ids = this.edytor.facade.childrenIds(parent.isRoot ? null : parent.id);
+        const id = ids[this.index + step];
+        return id === undefined ? null : this.edytor.idToBlock.block(id);
     }
     get closestPreviousBlock() {
         return this.edytor.blockBefore(this);
@@ -422,6 +436,8 @@ export class Block {
                 node.setAttribute(name, value);
         this.node = node;
         const release = this.edytor.surface.register(node, 'block', this.id);
+        // Its attributes follow its own selected and focused membership.
+        this.edytor.selection.keep(this);
         // A block laid out again with no commit moves the chrome beside it (the overlay measures).
         const unobserve = this.edytor.overlay.observe(node);
         const onDestroy = this.edytor.plugins.flatMap((plugin) => {

package/dist/clipboard/htmlFlow.d.ts

@@ -7,7 +7,12 @@ export type ImportKinds = Pick<Edytor, 'blocks' | 'marks'> & Partial<Pick<Edytor
     document: Pick<Edytor['document'], 'defaultChild'>;
 };
 type Values = Record<string, SerializableContent>;
-/** The tag a kind writes for `data`: its export form's first tag, else its element's, else its content element's. */
+/**
+ * The tag a kind writes for `data`: its export form's first tag, else its
+ * element's, else its content element's. A generic one (`div`, `span`) is
+ * none: an export form written as one (a callout's `<div data-edytor-callout>`)
+ * is found by its `parse` hook only.
+ */
 export declare const tagOf: (type: string, kind: BlockDefinition, data: Values) => string | undefined;
 /**
  * External HTML as a flow: the browser parses (inert: no script

package/dist/clipboard/htmlFlow.js

@@ -33,14 +33,21 @@ const isGlyph = (node) => {
 };
 /** Tags that carry no meaning of their own: a kind rendering one is not found by it. */
 const GENERIC = /^(div|span)$/;
-/** The tag a kind writes for `data`: its export form's first tag, else its element's, else its content element's. */
+/**
+ * The tag a kind writes for `data`: its export form's first tag, else its
+ * element's, else its content element's. A generic one (`div`, `span`) is
+ * none: an export form written as one (a callout's `<div data-edytor-callout>`)
+ * is found by its `parse` hook only.
+ */
 export const tagOf = (type, kind, data) => {
     const { html, element, contentElement } = kind;
     if (typeof html === 'string')
         return html;
     try {
-        if (html)
-            return /^<([a-z][\w-]*)/i.exec(html({ type, data }, '', ''))?.[1]?.toLowerCase();
+        if (html) {
+            const tag = /^<([a-z][\w-]*)/i.exec(html({ type, data }, '', ''))?.[1]?.toLowerCase();
+            return tag && !GENERIC.test(tag) ? tag : undefined;
+        }
     }
     catch {
         return undefined;
@@ -251,18 +258,24 @@ export const flowOfHtml = (kinds, html) => {
                 texts.add(current);
             }
         };
+        /** Whether a leading paragraph gave the element its text: one only, empty or not. */
+        let led = false;
         for (const node of element.childNodes)
             if (isVoid(node))
                 at.apart(node);
             else if (!isBlock(node))
                 inline(node, at, {}, pre);
-            // A leading plain paragraph is the element's own text (`<li><p>Item</p></li>`).
-            else if (!current.content.length &&
+            // A leading plain paragraph is the element's own text (`<li><p>Item</p></li>`,
+            // a callout's title): an empty one too, so the paragraph after it is a child.
+            else if (!led &&
+                !current.content.length &&
                 !current.children?.length &&
                 !kindOf(node) &&
-                !wraps(node))
+                !wraps(node)) {
+                led = true;
                 for (const child of node.childNodes)
                     inline(child, at, {}, pre);
+            }
             else
                 (current.children ??= []).push(...blockOf(node, childType));
         for (const part of texts)

package/dist/cloudflare/DocumentRoom.d.ts

@@ -128,6 +128,8 @@ export declare const DEFAULT_SAVE_AFTER = 2000;
  * about 100 MB at worst. Raise it for documents of long text.
  */
 export declare const DEFAULT_MAX_DOCUMENT_BYTES: number;
+/** The share of the document quota past which the room logs its size, by default. */
+export declare const DEFAULT_DOCUMENT_WARNING = 0.8;
 /**
  * The largest frame a socket may send, reassembled from chunks: room for a
  * whole document at the default quota (a client seeding an empty room).
@@ -211,6 +213,8 @@ export type DocumentRoomEnv = {
     EDYTOR_COMPACT_AFTER?: string | number;
     EDYTOR_SAVE_AFTER?: string | number;
     EDYTOR_MAX_DOCUMENT_BYTES?: string | number;
+    /** The share of the document quota past which the room logs its size (`documentWarning`). */
+    EDYTOR_DOCUMENT_WARNING?: string | number;
     EDYTOR_MAX_INBOUND_FRAME_BYTES?: string | number;
     EDYTOR_MAX_BUFFERED_BYTES?: string | number;
     EDYTOR_MAX_UPDATES_PER_SECOND?: string | number;
@@ -290,6 +294,8 @@ export type Timing = {
 export type RoomMetrics = {
     /** The document's size as the document quota measures it: its records, uncompressed. */
     documentBytes: number;
+    /** The document quota (`maxDocumentBytes`): writes past it are refused (`4413`). */
+    documentLimit: number;
     /** What its rows take in storage (a snapshot compressed). */
     storedBytes: number;
     /** Logical records stored (the generation record included), and their rows. */
@@ -366,6 +372,11 @@ export type RoomLogEntry = {
     edytor: 'quota';
     user: string;
     quota: string;
+} | {
+    edytor: 'size';
+    bytes: number;
+    limit: number;
+    share: number;
 } | {
     edytor: 'denied';
     user: string;
@@ -495,6 +506,12 @@ export type AttachRoomOptions = {
     tablePrefix?: string;
     /** Largest document, in stored bytes (default {@link DEFAULT_MAX_DOCUMENT_BYTES}). */
     maxDocumentBytes?: number;
+    /**
+     * The share of `maxDocumentBytes` past which the room logs the
+     * document's size (`size`, once per crossing), above 0 and at most 1
+     * (default {@link DEFAULT_DOCUMENT_WARNING}, 0.8).
+     */
+    documentWarning?: number;
     /** Largest frame a socket may send, reassembled (default {@link DEFAULT_MAX_INBOUND_FRAME_BYTES}). */
     maxInboundFrameBytes?: number;
     /**
@@ -588,6 +605,7 @@ export declare class AttachedDocument {
     readonly compactAfter: number;
     readonly saveAfter: number;
     readonly maxDocumentBytes: number;
+    readonly documentWarning: number;
     readonly maxInboundFrameBytes: number;
     readonly maxBufferedBytes: number;
     readonly maxUpdatesPerSecond: number;

package/dist/cloudflare/DocumentRoom.js

@@ -137,6 +137,8 @@ export const DEFAULT_SAVE_AFTER = 2000;
  * about 100 MB at worst. Raise it for documents of long text.
  */
 export const DEFAULT_MAX_DOCUMENT_BYTES = 2 * 1024 * 1024;
+/** The share of the document quota past which the room logs its size, by default. */
+export const DEFAULT_DOCUMENT_WARNING = 0.8;
 /**
  * The largest frame a socket may send, reassembled from chunks: room for a
  * whole document at the default quota (a client seeding an empty room).
@@ -200,6 +202,7 @@ export class AttachedDocument {
     compactAfter;
     saveAfter;
     maxDocumentBytes;
+    documentWarning;
     maxInboundFrameBytes;
     maxBufferedBytes;
     maxUpdatesPerSecond;
@@ -225,6 +228,8 @@ export class AttachedDocument {
         this.compactAfter = knob(options.compactAfter, DEFAULT_COMPACT_AFTER, 1e9);
         this.saveAfter = knob(options.saveAfter, DEFAULT_SAVE_AFTER, 1e9);
         this.maxDocumentBytes = knob(options.maxDocumentBytes, DEFAULT_MAX_DOCUMENT_BYTES, QUOTA_CEILING);
+        const warning = Number(options.documentWarning);
+        this.documentWarning = warning > 0 && warning <= 1 ? warning : DEFAULT_DOCUMENT_WARNING;
         this.maxInboundFrameBytes = knob(options.maxInboundFrameBytes, DEFAULT_MAX_INBOUND_FRAME_BYTES, QUOTA_CEILING);
         this.maxBufferedBytes = Math.max(this.maxInboundFrameBytes, knob(options.maxBufferedBytes, 2 * this.maxInboundFrameBytes, QUOTA_CEILING));
         this.maxUpdatesPerSecond = knob(options.maxUpdatesPerSecond, DEFAULT_MAX_UPDATES_PER_SECOND, QUOTA_CEILING);
@@ -492,6 +497,7 @@ export class AttachedDocument {
             const { counters } = room;
             return {
                 documentBytes: room.storage.documentBytes,
+                documentLimit: room.limits.maxDocumentBytes,
                 storedBytes: stored?.bytes ?? 0,
                 records: stored?.records ?? 0,
                 rows: stored?.rows ?? 0,
@@ -649,6 +655,7 @@ export class DocumentRoom extends DurableObject {
             compactAfter: Number(knobs.EDYTOR_COMPACT_AFTER),
             saveAfter: Number(knobs.EDYTOR_SAVE_AFTER),
             maxDocumentBytes: Number(knobs.EDYTOR_MAX_DOCUMENT_BYTES),
+            documentWarning: Number(knobs.EDYTOR_DOCUMENT_WARNING),
             maxInboundFrameBytes: Number(knobs.EDYTOR_MAX_INBOUND_FRAME_BYTES),
             maxBufferedBytes: Number(knobs.EDYTOR_MAX_BUFFERED_BYTES),
             maxUpdatesPerSecond: Number(knobs.EDYTOR_MAX_UPDATES_PER_SECOND),

package/dist/cloudflare/index.d.ts

@@ -4,7 +4,7 @@
  * `cloudflare:workers`); built on the Worker-safe CRDT entry. Documented in
  * the site's `server/` section (room, authorization, extending, protocol).
  */
-export { DocumentRoom, AttachedDocument, attachRoom, SOCKET_TAG, closedSocket, type AttachRoomOptions, type CommentOptions, DEFAULT_COMPACT_AFTER, DEFAULT_MAX_ROW_BYTES, DEFAULT_SAVE_AFTER, DEFAULT_MAX_DOCUMENT_BYTES, DEFAULT_MAX_INBOUND_FRAME_BYTES, DEFAULT_MAX_BUFFERED_BYTES, DEFAULT_MAX_UPDATES_PER_SECOND, DEFAULT_MAX_PRESENCE_BYTES, DEFAULT_MAX_PRESENCE_PER_SECOND, DEFAULT_MAX_PRESENCE_FANOUT, DEFAULT_MAX_COMMENT_BYTES, DEFAULT_MAX_COMMENT_REQUESTS_PER_SECOND, MAX_REFUSALS, MAX_WAITING_DELETES, ROOM_ORIGIN, RESTORE_ORIGIN, PURGE_ORIGIN, IDENTITY_HEADERS, PROBE_HEADER, noTimers, type Attachment, type DocumentRoomEnv, type LoadedDocument, type Refusal, type ReplicaOwner, type SavedDocument, type SocketIdentity, type StoredRecord, type FrameValidation, type ValidatedBlock, type RoomMetrics, type RoomLogEntry, type RestoreResult, type Timing } from './DocumentRoom.js';
+export { DocumentRoom, AttachedDocument, attachRoom, SOCKET_TAG, closedSocket, type AttachRoomOptions, type CommentOptions, DEFAULT_COMPACT_AFTER, DEFAULT_MAX_ROW_BYTES, DEFAULT_SAVE_AFTER, DEFAULT_MAX_DOCUMENT_BYTES, DEFAULT_DOCUMENT_WARNING, DEFAULT_MAX_INBOUND_FRAME_BYTES, DEFAULT_MAX_BUFFERED_BYTES, DEFAULT_MAX_UPDATES_PER_SECOND, DEFAULT_MAX_PRESENCE_BYTES, DEFAULT_MAX_PRESENCE_PER_SECOND, DEFAULT_MAX_PRESENCE_FANOUT, DEFAULT_MAX_COMMENT_BYTES, DEFAULT_MAX_COMMENT_REQUESTS_PER_SECOND, MAX_REFUSALS, MAX_WAITING_DELETES, ROOM_ORIGIN, RESTORE_ORIGIN, PURGE_ORIGIN, IDENTITY_HEADERS, PROBE_HEADER, noTimers, type Attachment, type DocumentRoomEnv, type LoadedDocument, type Refusal, type ReplicaOwner, type SavedDocument, type SocketIdentity, type StoredRecord, type FrameValidation, type ValidatedBlock, type RoomMetrics, type RoomLogEntry, type RestoreResult, type Timing } from './DocumentRoom.js';
 export { DEFAULT_RETENTION_DAYS, HISTORY_MAX_VALUE_BYTES, R2_HISTORY_MAX_VALUE_BYTES, ROOM_HISTORY_MAX_BYTES, ROOM_HISTORY_MAX_VALUE_BYTES, kvHistory, r2History, roomHistory, type HistoryEntry, type HistoryMetadata, type HistoryOptions, type HistoryRoomStorage, type HistoryStore, type HistoryStoreFactory, type HistoryStoreRecord, type KVLike, type R2BucketLike } from './history.js';
 export { type PurgeReport } from '../crdt/purge.js';
 export { COMMENT_ROW_BYTES, COMMENT_STATUS, MAX_COMMENT_LENGTH, MAX_COMMENTS_PER_THREAD, MAX_THREADS, commentAnchors, commentBytes, decideComment, type ThreadComment, type CommentActor, type CommentChange, type CommentOutcome, type CommentRefusal, type CommentRequest, type CommentRun, type CommentSnapshot, type CommentThread } from '../crdt/protocols/comments.js';

package/dist/cloudflare/index.js

@@ -4,7 +4,7 @@
  * `cloudflare:workers`); built on the Worker-safe CRDT entry. Documented in
  * the site's `server/` section (room, authorization, extending, protocol).
  */
-export { DocumentRoom, AttachedDocument, attachRoom, SOCKET_TAG, closedSocket, DEFAULT_COMPACT_AFTER, DEFAULT_MAX_ROW_BYTES, DEFAULT_SAVE_AFTER, DEFAULT_MAX_DOCUMENT_BYTES, DEFAULT_MAX_INBOUND_FRAME_BYTES, DEFAULT_MAX_BUFFERED_BYTES, DEFAULT_MAX_UPDATES_PER_SECOND, DEFAULT_MAX_PRESENCE_BYTES, DEFAULT_MAX_PRESENCE_PER_SECOND, DEFAULT_MAX_PRESENCE_FANOUT, DEFAULT_MAX_COMMENT_BYTES, DEFAULT_MAX_COMMENT_REQUESTS_PER_SECOND, MAX_REFUSALS, MAX_WAITING_DELETES, ROOM_ORIGIN, RESTORE_ORIGIN, PURGE_ORIGIN, IDENTITY_HEADERS, PROBE_HEADER, noTimers } from './DocumentRoom.js';
+export { DocumentRoom, AttachedDocument, attachRoom, SOCKET_TAG, closedSocket, DEFAULT_COMPACT_AFTER, DEFAULT_MAX_ROW_BYTES, DEFAULT_SAVE_AFTER, DEFAULT_MAX_DOCUMENT_BYTES, DEFAULT_DOCUMENT_WARNING, DEFAULT_MAX_INBOUND_FRAME_BYTES, DEFAULT_MAX_BUFFERED_BYTES, DEFAULT_MAX_UPDATES_PER_SECOND, DEFAULT_MAX_PRESENCE_BYTES, DEFAULT_MAX_PRESENCE_PER_SECOND, DEFAULT_MAX_PRESENCE_FANOUT, DEFAULT_MAX_COMMENT_BYTES, DEFAULT_MAX_COMMENT_REQUESTS_PER_SECOND, MAX_REFUSALS, MAX_WAITING_DELETES, ROOM_ORIGIN, RESTORE_ORIGIN, PURGE_ORIGIN, IDENTITY_HEADERS, PROBE_HEADER, noTimers } from './DocumentRoom.js';
 export { DEFAULT_RETENTION_DAYS, HISTORY_MAX_VALUE_BYTES, R2_HISTORY_MAX_VALUE_BYTES, ROOM_HISTORY_MAX_BYTES, ROOM_HISTORY_MAX_VALUE_BYTES, kvHistory, r2History, roomHistory } from './history.js';
 export {} from '../crdt/purge.js';
 export { COMMENT_ROW_BYTES, COMMENT_STATUS, MAX_COMMENT_LENGTH, MAX_COMMENTS_PER_THREAD, MAX_THREADS, commentAnchors, commentBytes, decideComment } from '../crdt/protocols/comments.js';

package/dist/cloudflare/room/context.d.ts

@@ -685,6 +685,7 @@ export type RoomLimits = Readonly<{
     compactAfter: number;
     saveAfter: number;
     maxDocumentBytes: number;
+    documentWarning: number;
     maxInboundFrameBytes: number;
     maxBufferedBytes: number;
     maxUpdatesPerSecond: number;

package/dist/cloudflare/room/storage.d.ts

@@ -10,6 +10,14 @@ export declare class RoomStorage {
     updates: number;
     /** What the records hold, uncompressed (the generation record aside): the document quota's measure. */
     documentBytes: number;
+    /** The size passed `documentWarning` of the quota and was logged (memory: a wake logs it again). */
+    private warned;
+    /**
+     * Log the document's size when it passes `documentWarning` of its quota
+     * (`room.quota.warning`): once per crossing; under it again, the next
+     * crossing logs again.
+     */
+    private watch;
     /** The waiting deletes stored as `pending` records (the engine may hold more, in memory). */
     storedWaiting: Decoded['ds'];
     /**

package/dist/cloudflare/room/storage.js

@@ -93,6 +93,25 @@ export class RoomStorage {
     updates = 0;
     /** What the records hold, uncompressed (the generation record aside): the document quota's measure. */
     documentBytes = 0;
+    /** The size passed `documentWarning` of the quota and was logged (memory: a wake logs it again). */
+    warned = false;
+    /**
+     * Log the document's size when it passes `documentWarning` of its quota
+     * (`room.quota.warning`): once per crossing; under it again, the next
+     * crossing logs again.
+     */
+    watch() {
+        const room = this.room;
+        const { maxDocumentBytes: limit, documentWarning: share } = room.limits;
+        if (this.documentBytes < limit * share) {
+            this.warned = false;
+            return;
+        }
+        if (this.warned)
+            return;
+        this.warned = true;
+        room.log({ edytor: 'size', bytes: this.documentBytes, limit, share });
+    }
     /** The waiting deletes stored as `pending` records (the engine may hold more, in memory). */
     storedWaiting = Y.createIdSet();
     /**
@@ -338,6 +357,7 @@ export class RoomStorage {
             // records keeps every keystroke's struct and the deleted content.
             const doc = admit(rest.map((record) => (record.v2 ? { v2: record.bytes } : record.bytes)), `room ${room.ctx.id}`, () => room.history.restoreKeep);
             this.documentBytes = rest.reduce((n, record) => n + record.bytes.length, 0);
+            this.watch();
             this.adopt(doc);
             // Every delete the engine holds waiting came from the rows.
             this.storedWaiting = pendingDeletes(doc);
@@ -388,6 +408,7 @@ export class RoomStorage {
         });
         room.history.clearRestore();
         this.documentBytes = snapshot.length;
+        this.watch();
         this.updates = 0;
         this.storedWaiting = Y.createIdSet();
         this.adopt(doc);
@@ -450,8 +471,10 @@ export class RoomStorage {
         }
         const record = this.nextRecord++;
         this.writeRecord(kind, record, bytes);
-        if (kind !== 'generation')
+        if (kind !== 'generation') {
             this.documentBytes += bytes.length;
+            this.watch();
+        }
         return record;
     }
     /** Record `record`'s rows (at the row positions `seqs`, when given). */

package/dist/collaboration/history/HistoryPanel.svelte

@@ -15,6 +15,7 @@
 	import { versionDiff } from './diff.js';
 	import { versionHighlightsPlugin } from './versionHighlights.js';
 	import { labelsWith } from '../../labels.js';
+	import { optionAttributes } from '../../plugins/chrome.js';
 
 	let {
 		client,
@@ -28,6 +29,7 @@
 		class: className,
 		previewClass,
 		version: versionRow,
+		item: itemRow,
 		onRestore,
 		onUndo,
 		onError
@@ -186,6 +188,20 @@
 
 	const selectedEntry = $derived(versions?.find((entry) => entry.key === selected) ?? null);
 
+	/** The panel's own prefix: its rows' ids are page-unique. */
+	const uid = $props.id();
+	/** The row of `entry` at `index`: an option, the list's one tab stop when it is selected (else the first). */
+	const optionOf = (entry: HistoryVersion, index: number) => {
+		const isSelected = entry.key === selected;
+		return optionAttributes(
+			`${uid}-version-${index}`,
+			'option',
+			isSelected,
+			{ tabindex: isSelected || (selected === null && index === 0) ? 0 : -1 },
+			false
+		);
+	};
+
 	/** The listbox's keys: the arrows, Home and End move the selection and the focus. */
 	const onListKey = (event: KeyboardEvent) => {
 		if (!versions?.length) return;
@@ -272,28 +288,41 @@
 					aria-label={labels.versions}
 					onkeydown={onListKey}
 				>
-					{#each versions as entry (entry.key)}
+					{#each versions as entry, index (entry.key)}
 						{@const isSelected = entry.key === selected}
+						{@const option = optionOf(entry, index)}
+						{@const preview = () => void select(entry.key)}
 						<li role="presentation">
-							<button
-								type="button"
-								role="option"
-								aria-selected={isSelected}
-								tabindex={isSelected || (selected === null && entry === versions[0]) ? 0 : -1}
-								data-edytor-history-version={entry.key}
-								onclick={() => void select(entry.key)}
-							>
-								{#if versionRow}
-									{@render versionRow(entry, { selected: isSelected })}
-								{:else}
-									<span data-edytor-history-version-title>{titleOf(entry)}</span>
-									<span data-edytor-history-version-editors>{editorsOf(entry)}</span>
-									<span data-edytor-history-version-time>
-										{labels.saved}
-										<time datetime={new Date(entry.at).toISOString()}>{timeOf(entry)}</time>
-									</span>
-								{/if}
-							</button>
+							{#if itemRow}
+								{@render itemRow({
+									item: entry,
+									version: entry,
+									id: option.id,
+									label: titleOf(entry),
+									selected: isSelected,
+									run: preview,
+									select: preview,
+									option
+								})}
+							{:else}
+								<button
+									type="button"
+									{...option}
+									data-edytor-history-version={entry.key}
+									onclick={preview}
+								>
+									{#if versionRow}
+										{@render versionRow(entry, { selected: isSelected })}
+									{:else}
+										<span data-edytor-history-version-title>{titleOf(entry)}</span>
+										<span data-edytor-history-version-editors>{editorsOf(entry)}</span>
+										<span data-edytor-history-version-time>
+											{labels.saved}
+											<time datetime={new Date(entry.at).toISOString()}>{timeOf(entry)}</time>
+										</span>
+									{/if}
+								</button>
+							{/if}
 						</li>
 					{/each}
 				</ul>

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

@@ -6,4 +6,4 @@
 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 } from './panel.js';
+export { defaultHistoryLabels, type HistoryPanelLabels, type HistoryPanelProps, type HistoryVersionItem } from './panel.js';

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

@@ -6,9 +6,21 @@ import type { EdytorDocument } from '../../crdt/document.js';
 import type { Plugin } from '../../plugins.js';
 import type { HistoryClient, HistoryRestoreResult, HistoryUndoResult, HistoryVersion } from './client.js';
 import { type HistoryPanelLabels, type PartialLabels } from '../../labels.js';
+import type { MenuItemPayload } from '../../plugins/chrome.js';
 export type { HistoryPanelLabels };
 /** The panel's English words: the label dictionary's `history` section (`englishLabels.history`). */
 export declare const defaultHistoryLabels: HistoryPanelLabels;
+/**
+ * One row of the versions list, for an `item` snippet: the row shape every
+ * menu shares (`item` is the version, `label` its date and slot, `run` and
+ * `select` preview it), with the version again. Spread `option` on the
+ * row's focusable element (its `role="option"`, id, `aria-selected` and the
+ * list's one tab stop): the list's arrows, Home and End walk those rows.
+ */
+export type HistoryVersionItem = MenuItemPayload<HistoryVersion> & {
+    /** The version (the same as `item`). */
+    version: HistoryVersion;
+};
 export type HistoryPanelProps = {
     /** Where the versions come from: `createHistoryClient(…)`, or any object with `list`, `read`, `restore` and `undo`. */
     client: HistoryClient;
@@ -34,6 +46,12 @@ export type HistoryPanelProps = {
     version?: Snippet<[HistoryVersion, {
         selected: boolean;
     }]>;
+    /**
+     * Replace a version's whole row (the list item's content): one object
+     * argument, the shape every menu's rows share. Spread its `option` on
+     * the row's button. Takes precedence over `version`.
+     */
+    item?: Snippet<[HistoryVersionItem]>;
     /** After a restore the room answered. */
     onRestore?: (result: HistoryRestoreResult) => void;
     /** After an undo the room answered. */