@pixerate/editor-svelte 0.22.0 → 0.24.0

package/dist/persistence/autosave.svelte.js

@@ -0,0 +1,110 @@
+import { createAutosaveController, createRevisionTracker, } from "@pixerate/editor/persistence";
+/**
+ * Svelte 5 rune: crash-recovery autosave bound to a history and dirty flag,
+ * with page lifecycle flushing and a recovery check (see
+ * `createAutosaveController` in `@pixerate/editor/persistence`). Render
+ * `<RecoveryPrompt>` with `recovery`, `restore` and `discard`.
+ */
+export function createAutosave(options) {
+    const revisions = createRevisionTracker({ history: options.history, dirty: options.dirty });
+    const controller = createAutosaveController({
+        storage: options.storage,
+        key: options.key,
+        getSnapshot: options.getSnapshot,
+        serialize: options.serialize,
+        deserialize: options.deserialize,
+        name: options.name,
+        revision: revisions.revision,
+        savedRevision: revisions.savedRevision,
+        interval: options.interval,
+        debounceMs: options.debounceMs,
+        retryBaseMs: options.retryBaseMs,
+        retryMaxMs: options.retryMaxMs,
+    });
+    const recover = options.recover !== false;
+    let status = $state.raw(controller.getStatus());
+    let recovery = $state.raw(null);
+    let pendingRecovery = $state(recover);
+    let loaded = options.ready !== false;
+    let destroyed = false;
+    const maybeReady = () => {
+        if (!destroyed && loaded && !pendingRecovery)
+            controller.ready();
+    };
+    const unsubscribeStatus = controller.subscribe((info) => {
+        status = info;
+    });
+    const unsubscribeRevisions = revisions.subscribe(() => controller.notify());
+    const checked = recover
+        ? controller
+            .checkRecovery()
+            .catch(() => null)
+            .then((found) => {
+            if (destroyed)
+                return;
+            recovery = found;
+            pendingRecovery = found !== null;
+            maybeReady();
+        })
+        : Promise.resolve();
+    maybeReady();
+    let removeListeners = () => { };
+    if (options.flushOnHide !== false && typeof window !== "undefined") {
+        const flush = () => void controller.flushNow();
+        const onVisibility = () => {
+            if (document.visibilityState === "hidden")
+                flush();
+        };
+        window.addEventListener("pagehide", flush);
+        document.addEventListener("visibilitychange", onVisibility);
+        removeListeners = () => {
+            window.removeEventListener("pagehide", flush);
+            document.removeEventListener("visibilitychange", onVisibility);
+        };
+    }
+    return {
+        get status() {
+            return status;
+        },
+        get recovery() {
+            return recovery;
+        },
+        get pendingRecovery() {
+            return pendingRecovery;
+        },
+        restore() {
+            const snapshot = recovery?.snapshot;
+            recovery = null;
+            pendingRecovery = false;
+            // Deferred so the caller can apply the snapshot first.
+            queueMicrotask(maybeReady);
+            return snapshot;
+        },
+        async discard() {
+            await controller.discardRecovery();
+            recovery = null;
+            pendingRecovery = false;
+            maybeReady();
+        },
+        ready() {
+            loaded = true;
+            maybeReady();
+        },
+        flushNow: () => controller.flushNow(),
+        async markClean() {
+            revisions.markSaved();
+            await controller.markClean();
+        },
+        notifyChange: () => revisions.bump(),
+        checked,
+        controller,
+        destroy() {
+            destroyed = true;
+            removeListeners();
+            unsubscribeStatus();
+            unsubscribeRevisions();
+            revisions.destroy();
+            controller.destroy();
+        },
+    };
+}

package/dist/persistence/index.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentProps } from "svelte";
+import type RecoveryPromptComponent from "./RecoveryPrompt.svelte";
+export { default as RecoveryPrompt } from "./RecoveryPrompt.svelte";
+export * from "./autosave.svelte.js";
+export type RecoveryPromptProps = ComponentProps<typeof RecoveryPromptComponent>;
+//# sourceMappingURL=index.d.ts.map

package/dist/persistence/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/persistence/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,uBAAuB,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,cAAc,sBAAsB,CAAC;AAErC,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,uBAAuB,CAAC,CAAC"}

package/dist/persistence/index.js

@@ -0,0 +1,2 @@
+export { default as RecoveryPrompt } from "./RecoveryPrompt.svelte";
+export * from "./autosave.svelte.js";

package/dist/review/TrackedChangesList.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import type { Editor } from "@tiptap/core";
+  import { trackedChangeLabel } from "@pixerate/editor";
+  import { createTrackChanges, type SvelteTrackChanges } from "./review.svelte.js";
+
+  interface Props {
+    editor?: Editor | null;
+    class?: string;
+    itemClass?: string;
+    activeItemClass?: string;
+    /** Text shown when there are no changes. */
+    emptyState?: string;
+  }
+
+  let {
+    editor = null,
+    class: className = "flex flex-col gap-1 text-sm",
+    itemClass = "flex items-center gap-2 rounded px-2 py-1 hover:bg-muted/50",
+    activeItemClass = "bg-primary/10",
+    emptyState = "No tracked changes.",
+  }: Props = $props();
+
+  const buttonClass =
+    "rounded px-1.5 py-0.5 text-xs text-foreground hover:bg-muted disabled:opacity-40";
+
+  let review = $state.raw<SvelteTrackChanges>(createTrackChanges(null));
+
+  $effect(() => {
+    const r = createTrackChanges(editor);
+    review = r;
+    return () => r.destroy();
+  });
+</script>
+
+{#if review.changes.length === 0}
+  <div class={className} data-tracked-changes-list="">
+    <div class="pixerate-changes-empty text-xs text-muted-foreground">{emptyState}</div>
+  </div>
+{:else}
+  <ul class={className} role="list" aria-label="Tracked changes" data-tracked-changes-list="">
+    {#each review.changes as change (`${change.type}:${change.id}`)}
+      <li
+        class={change.id === review.currentChangeId ? `${itemClass} ${activeItemClass}` : itemClass}
+        data-change-type={change.type}
+        data-change-id={change.id}
+      >
+        <button
+          type="button"
+          class="min-w-0 flex-1 truncate text-left text-xs"
+          title={`${change.author.name}: ${change.description}`}
+          onclick={() => review.select(change.id)}
+        >
+          <span class="font-medium">{trackedChangeLabel(change)}</span>{change.author.name
+            ? ` · ${change.author.name}`
+            : ""}
+          <span class="block truncate text-muted-foreground">{change.description}</span>
+        </button>
+        <button type="button" class={buttonClass} onclick={() => review.accept(change.id)}>
+          Accept
+        </button>
+        <button type="button" class={buttonClass} onclick={() => review.reject(change.id)}>
+          Reject
+        </button>
+      </li>
+    {/each}
+  </ul>
+{/if}

package/dist/review/TrackedChangesList.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Editor } from "@tiptap/core";
+interface Props {
+    editor?: Editor | null;
+    class?: string;
+    itemClass?: string;
+    activeItemClass?: string;
+    /** Text shown when there are no changes. */
+    emptyState?: string;
+}
+declare const TrackedChangesList: import("svelte").Component<Props, {}, "">;
+type TrackedChangesList = ReturnType<typeof TrackedChangesList>;
+export default TrackedChangesList;
+//# sourceMappingURL=TrackedChangesList.svelte.d.ts.map

package/dist/review/TrackedChangesList.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrackedChangesList.svelte.d.ts","sourceRoot":"","sources":["../../src/review/TrackedChangesList.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAKzC,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsDH,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/review/documentCompare.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Editor } from "@tiptap/core";
+import { type CompareSource, type CompareSummary, type EditorCompareOptions } from "@pixerate/editor";
+export type { CompareSource, CompareSummary, EditorCompareOptions } from "@pixerate/editor";
+export interface SvelteDocumentCompare {
+    /** Summary of the last comparison, or `null` (reactive). */
+    readonly summary: CompareSummary | null;
+    /**
+     * Replaces the editor content with the comparison of two versions (nodes,
+     * JSON or HTML) as tracked changes, ready to review with `ReviewToolbar`.
+     * Returns the summary, or `null` without an editor.
+     */
+    compare(original: CompareSource, revised: CompareSource, options?: EditorCompareOptions): CompareSummary | null;
+    /** Forgets the last summary. */
+    clear(): void;
+}
+/**
+ * Compare two document versions into an editor using `TrackChanges`.
+ * `options` are defaults for every comparison.
+ */
+export declare function createDocumentCompare(editor: Editor | null | undefined, options?: EditorCompareOptions): SvelteDocumentCompare;
+//# sourceMappingURL=documentCompare.svelte.d.ts.map

package/dist/review/documentCompare.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"documentCompare.svelte.d.ts","sourceRoot":"","sources":["../../src/review/documentCompare.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,oBAAoB,EAC1B,MAAM,kBAAkB,CAAC;AAE1B,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAE5F,MAAM,WAAW,qBAAqB;IACpC,4DAA4D;IAC5D,QAAQ,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CACL,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,aAAa,EACtB,OAAO,CAAC,EAAE,oBAAoB,GAC7B,cAAc,GAAG,IAAI,CAAC;IACzB,gCAAgC;IAChC,KAAK,IAAI,IAAI,CAAC;CACf;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACjC,OAAO,CAAC,EAAE,oBAAoB,GAC7B,qBAAqB,CAgBvB"}

package/dist/review/documentCompare.svelte.js

@@ -0,0 +1,23 @@
+import { applyDocumentComparison, } from "@pixerate/editor";
+/**
+ * Compare two document versions into an editor using `TrackChanges`.
+ * `options` are defaults for every comparison.
+ */
+export function createDocumentCompare(editor, options) {
+    let summary = $state.raw(null);
+    return {
+        get summary() {
+            return summary;
+        },
+        compare(original, revised, overrides) {
+            if (!editor || editor.isDestroyed)
+                return null;
+            const result = applyDocumentComparison(editor, original, revised, { ...options, ...overrides });
+            summary = result.summary;
+            return result.summary;
+        },
+        clear() {
+            summary = null;
+        },
+    };
+}

package/dist/review/index.d.ts

@@ -2,10 +2,14 @@ import type { ComponentProps } from "svelte";
 import type CommentsPanelComponent from "./CommentsPanel.svelte";
 import type ReviewToolbarComponent from "./ReviewToolbar.svelte";
 import type CommentButtonComponent from "./CommentButton.svelte";
+import type TrackedChangesListComponent from "./TrackedChangesList.svelte";
+export { default as TrackedChangesList } from "./TrackedChangesList.svelte";
+export type TrackedChangesListProps = ComponentProps<typeof TrackedChangesListComponent>;
 export { default as CommentsPanel } from "./CommentsPanel.svelte";
 export { default as ReviewToolbar } from "./ReviewToolbar.svelte";
 export { default as CommentButton } from "./CommentButton.svelte";
 export * from "./review.svelte.js";
+export * from "./documentCompare.svelte.js";
 export type CommentsPanelProps = ComponentProps<typeof CommentsPanelComponent>;
 export type ReviewToolbarProps = ComponentProps<typeof ReviewToolbarComponent>;
 export type CommentButtonProps = ComponentProps<typeof CommentButtonComponent>;

package/dist/review/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/review/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AAEjE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,cAAc,oBAAoB,CAAC;AAEnC,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/review/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,2BAA2B,MAAM,6BAA6B,CAAC;AAE3E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,2BAA2B,CAAC,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,cAAc,oBAAoB,CAAC;AACnC,cAAc,6BAA6B,CAAC;AAE5C,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC"}

package/dist/review/index.js

@@ -1,4 +1,6 @@
+export { default as TrackedChangesList } from "./TrackedChangesList.svelte";
 export { default as CommentsPanel } from "./CommentsPanel.svelte";
 export { default as ReviewToolbar } from "./ReviewToolbar.svelte";
 export { default as CommentButton } from "./CommentButton.svelte";
 export * from "./review.svelte.js";
+export * from "./documentCompare.svelte.js";

package/dist/review/review.svelte.d.ts

@@ -29,6 +29,12 @@ export interface SvelteTrackChanges extends TrackChangesSnapshot {
     rejectAll(): void;
     next(): void;
     previous(): void;
+    /** Selects a change in the editor. */
+    select(id: string): void;
+    /** Accepts a tracked move (both ends). */
+    acceptMove(id: string): void;
+    /** Rejects a tracked move (both ends). */
+    rejectMove(id: string): void;
     subscribe(run: (value: TrackChangesSnapshot) => void): () => void;
     destroy(): void;
 }

package/dist/review/review.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"review.svelte.d.ts","sourceRoot":"","sources":["../../src/review/review.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAGL,KAAK,YAAY,EACjB,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,oBAAoB,EACzB,KAAK,aAAa,EACnB,MAAM,kBAAkB,CAAC;AAE1B,eAAO,MAAM,uBAAuB,EAAE,oBAGZ,CAAC;AAE3B,eAAO,MAAM,4BAA4B,EAAE,oBAKjB,CAAC;AAE3B,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,YAAY,CAMpE;AAED,2EAA2E;AAC3E,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,GAAG,SAAS,GAC/C,YAAY,GAAG,IAAI,CAErB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,OAAO,EAAE,SAAS,aAAa,EAAE,CAAC;IAC3C,QAAQ,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,QAAQ,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,SAAS,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;IAClE,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,cAAc,CA4B/F;AAED,MAAM,WAAW,kBAAmB,SAAQ,oBAAoB;IAC9D,QAAQ,CAAC,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;IAC7C,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACnC,MAAM,IAAI,IAAI,CAAC;IACf,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,IAAI,IAAI,CAAC;IAClB,SAAS,IAAI,IAAI,CAAC;IAClB,IAAI,IAAI,IAAI,CAAC;IACb,QAAQ,IAAI,IAAI,CAAC;IACjB,SAAS,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;IAClE,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,kBAAkB,CA+CxF"}
+{"version":3,"file":"review.svelte.d.ts","sourceRoot":"","sources":["../../src/review/review.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAGL,KAAK,YAAY,EACjB,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,oBAAoB,EACzB,KAAK,aAAa,EACnB,MAAM,kBAAkB,CAAC;AAE1B,eAAO,MAAM,uBAAuB,EAAE,oBAGZ,CAAC;AAE3B,eAAO,MAAM,4BAA4B,EAAE,oBAKjB,CAAC;AAE3B,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,YAAY,CAMpE;AAED,2EAA2E;AAC3E,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,GAAG,SAAS,GAC/C,YAAY,GAAG,IAAI,CAErB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,OAAO,EAAE,SAAS,aAAa,EAAE,CAAC;IAC3C,QAAQ,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,QAAQ,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,SAAS,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;IAClE,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,cAAc,CA4B/F;AAED,MAAM,WAAW,kBAAmB,SAAQ,oBAAoB;IAC9D,QAAQ,CAAC,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;IAC7C,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACnC,MAAM,IAAI,IAAI,CAAC;IACf,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,IAAI,IAAI,CAAC;IAClB,SAAS,IAAI,IAAI,CAAC;IAClB,IAAI,IAAI,IAAI,CAAC;IACb,QAAQ,IAAI,IAAI,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,0CAA0C;IAC1C,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,SAAS,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;IAClE,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,kBAAkB,CAkDxF"}

package/dist/review/review.svelte.js

@@ -92,6 +92,9 @@ export function createTrackChanges(editor) {
         rejectAll: () => run((e) => e.commands.rejectAllChanges()),
         next: () => run((e) => e.chain().focus().selectNextChange().run()),
         previous: () => run((e) => e.chain().focus().selectPreviousChange().run()),
+        select: (id) => run((e) => e.chain().focus().selectChange(id).run()),
+        acceptMove: (id) => run((e) => e.commands.acceptMove(id)),
+        rejectMove: (id) => run((e) => e.commands.rejectMove(id)),
         subscribe(runFn) {
             if (!store) {
                 runFn(EMPTY_TRACK_CHANGES_SNAPSHOT);

package/dist/spreadsheet/FormulaBar.svelte

@@ -46,6 +46,13 @@
     return value;
   });
 
+  // Defined names for formula autocomplete.
+  let nameSuggestions = $derived.by(() => {
+    if (!sheetState) return [];
+    void sheetState.document;
+    return sheetState.controller.getNameSuggestions();
+  });
+
   // A spilled cell shows its anchor's formula greyed out (it has no formula of its own).
   let spillFormula = $derived.by(() => {
     if (!sheetState || sheetState.editingCell || !sheetState.activeCell || effectiveValue) return '';
@@ -63,10 +70,12 @@
       if (sheetState && sheetState.activeCell) {
         const row = sheetState.document.rows[sheetState.activeCell.row];
         const col = sheetState.document.columns[sheetState.activeCell.col];
-        if (row && col) {
-          sheetState.setCellValue(row.id, col.id, effectiveValue);
+        // Committed with data validation: invalid input waits for the alert.
+        if (sheetState.editingCell) {
+          sheetState.commitEditing(effectiveValue);
+        } else if (row && col) {
+          sheetState.commitCellInput(row.id, col.id, effectiveValue);
         }
-        sheetState.commitEditing();
       }
       onCommit?.(effectiveValue);
     } else if (e.key === 'Escape') {
@@ -116,5 +125,5 @@
     oninput={handleInput}
     onkeydown={handleKeyDown}
   />
-  <FormulaHints input={inputEl} value={effectiveValue} onAccept={setValue} />
+  <FormulaHints input={inputEl} value={effectiveValue} onAccept={setValue} names={nameSuggestions} />
 </div>

package/dist/spreadsheet/FormulaBar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormulaBar.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/FormulaBar.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAIvE,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;IAC1D,WAAW,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwGH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FormulaBar.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/FormulaBar.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAIvE,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;IAC1D,WAAW,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiHH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/spreadsheet/FormulaHints.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { tick } from 'svelte';
-  import { applyFormulaSuggestion, getFormulaHints } from '@pixerate/editor/spreadsheet';
+  import { applyFormulaSuggestion, getFormulaHints, type FormulaNameSuggestionSource } from '@pixerate/editor/spreadsheet';
 
   interface Props {
     /** The input being edited (a cell editor or the formula bar). */
@@ -11,9 +11,11 @@
     onAccept?: (value: string) => void;
     /** Maximum number of function suggestions (default 8). */
     limit?: number;
+    /** Defined names to suggest too (e.g. `controller.getNameSuggestions()`). */
+    names?: readonly FormulaNameSuggestionSource[];
   }
 
-  let { input = null, value = '', onAccept, limit = 8 }: Props = $props();
+  let { input = null, value = '', onAccept, limit = 8, names }: Props = $props();
 
   let caret = $state<number | null>(null);
   let focused = $state(false);
@@ -21,7 +23,7 @@
   let dismissed = $state(false);
   let position = $state<{ top: number; left: number; width: number } | null>(null);
 
-  let hints = $derived(getFormulaHints(value, caret ?? value.length, { limit }));
+  let hints = $derived(getFormulaHints(value, caret ?? value.length, { limit, names }));
   let suggestions = $derived(dismissed ? [] : hints.suggestions);
   let selectedIndex = $derived(Math.max(0, Math.min(selected, suggestions.length - 1)));
   let visible = $derived(
@@ -31,7 +33,7 @@
   async function accept(index: number) {
     const suggestion = suggestions[index];
     if (!suggestion || !input) return;
-    const next = applyFormulaSuggestion(value, caret ?? value.length, suggestion.name);
+    const next = applyFormulaSuggestion(value, caret ?? value.length, suggestion);
     caret = next.caret;
     selected = 0;
     onAccept?.(next.value);
@@ -127,7 +129,7 @@
     {/if}
     {#if suggestions.length > 0}
       <ul role="listbox" aria-label="Formula suggestions" class="max-h-64 overflow-auto m-0 list-none p-0 py-1">
-        {#each suggestions as s, i (s.name)}
+        {#each suggestions as s, i (`${s.kind ?? "fn"}:${s.name}`)}
           <li
             role="option"
             aria-selected={i === selectedIndex}

package/dist/spreadsheet/FormulaHints.svelte.d.ts

@@ -1,3 +1,4 @@
+import { type FormulaNameSuggestionSource } from '@pixerate/editor/spreadsheet';
 interface Props {
     /** The input being edited (a cell editor or the formula bar). */
     input?: HTMLInputElement | null;
@@ -7,6 +8,8 @@ interface Props {
     onAccept?: (value: string) => void;
     /** Maximum number of function suggestions (default 8). */
     limit?: number;
+    /** Defined names to suggest too (e.g. `controller.getNameSuggestions()`). */
+    names?: readonly FormulaNameSuggestionSource[];
 }
 declare const FormulaHints: import("svelte").Component<Props, {}, "">;
 type FormulaHints = ReturnType<typeof FormulaHints>;

package/dist/spreadsheet/FormulaHints.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormulaHints.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/FormulaHints.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,KAAK;IACb,iEAAiE;IACjE,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoIH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"FormulaHints.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/FormulaHints.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAA2C,KAAK,2BAA2B,EAAE,MAAM,8BAA8B,CAAC;AAGvH,UAAU,KAAK;IACb,iEAAiE;IACjE,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,KAAK,CAAC,EAAE,SAAS,2BAA2B,EAAE,CAAC;CAChD;AAoIH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/spreadsheet/NameManager.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+  import { getNameManagerRows, parseFormula, type SpreadsheetNameRow } from '@pixerate/editor/spreadsheet';
+  import type { createReactiveSpreadsheet } from './spreadsheet.svelte.js';
+
+  interface Props {
+    sheetState: ReturnType<typeof createReactiveSpreadsheet>;
+    readOnly?: boolean;
+    onClose?: () => void;
+    class?: string;
+  }
+
+  let { sheetState, readOnly = false, onClose, class: className = '' }: Props = $props();
+
+  interface Draft {
+    /** The name being edited (null for a new one). */
+    original: { name: string; sheetId?: string } | null;
+    name: string;
+    refersTo: string;
+    /** Sheet id, or '' for workbook scope. */
+    scope: string;
+    comment: string;
+  }
+
+  const EMPTY_DRAFT: Draft = { original: null, name: '', refersTo: '=', scope: '', comment: '' };
+
+  let draft = $state<Draft>({ ...EMPTY_DRAFT });
+  let error = $state<string | null>(null);
+
+  const rows = $derived.by(() => {
+    void sheetState.document;
+    void sheetState.names;
+    return getNameManagerRows(sheetState.controller);
+  });
+
+  function edit(row: SpreadsheetNameRow) {
+    error = null;
+    draft = {
+      original: { name: row.name, sheetId: row.sheetId },
+      name: row.name,
+      refersTo: row.refersTo,
+      scope: row.sheetId ?? '',
+      comment: row.comment ?? ''
+    };
+  }
+
+  function save(e: SubmitEvent) {
+    e.preventDefault();
+    const scope = draft.scope ? { sheet: draft.scope } : {};
+    try {
+      // Check before changing anything, so a failed edit keeps the old name.
+      const invalid = sheetState.controller.validateDefinedName(draft.name.trim());
+      if (invalid) throw new Error(invalid);
+      const formula = draft.refersTo.trim().startsWith('=') ? draft.refersTo.trim() : `=${draft.refersTo.trim()}`;
+      try {
+        parseFormula(formula);
+      } catch (err: any) {
+        throw new Error(`There's a problem with this formula: ${err?.message ?? formula}`);
+      }
+      const original = draft.original;
+      if (original) {
+        const originalScope = original.sheetId ? { sheet: original.sheetId } : {};
+        if ((original.sheetId ?? '') !== draft.scope) {
+          sheetState.deleteName(original.name, originalScope);
+        } else if (original.name !== draft.name.trim()) {
+          sheetState.renameName(original.name, draft.name.trim(), originalScope);
+        }
+      }
+      sheetState.defineName(draft.name.trim(), draft.refersTo, { ...scope, comment: draft.comment || undefined });
+      draft = { ...EMPTY_DRAFT };
+      error = null;
+    } catch (err: any) {
+      error = err?.message ?? String(err);
+    }
+  }
+
+  function remove(row: SpreadsheetNameRow) {
+    sheetState.deleteName(row.name, row.sheetId ? { sheet: row.sheetId } : {});
+    if (draft.original?.name === row.name && (draft.original.sheetId ?? '') === (row.sheetId ?? '')) draft = { ...EMPTY_DRAFT };
+  }
+</script>
+
+<!--
+  A simple Name Manager: lists defined names (name, current value, formula,
+  scope) and adds, edits, renames and deletes them. Renaming a name rewrites
+  the formulas that use it; deleting one leaves them showing #NAME?.
+-->
+<section aria-label="Name Manager" class="flex flex-col gap-2 text-xs {className}" data-name-manager="">
+  <div class="flex items-center justify-between">
+    <h3 class="m-0 text-sm font-semibold">Name Manager</h3>
+    {#if onClose}
+      <button type="button" aria-label="Close Name Manager" class="rounded px-2 hover:bg-muted" onclick={onClose}>×</button>
+    {/if}
+  </div>
+  <table class="w-full border-collapse">
+    <thead>
+      <tr class="text-left text-muted-foreground">
+        <th class="px-1 font-medium">Name</th>
+        <th class="px-1 font-medium">Value</th>
+        <th class="px-1 font-medium">Refers to</th>
+        <th class="px-1 font-medium">Scope</th>
+        {#if !readOnly}<th class="px-1"></th>{/if}
+      </tr>
+    </thead>
+    <tbody>
+      {#if rows.length === 0}
+        <tr><td colspan="5" class="px-1 py-2 text-muted-foreground">No names yet.</td></tr>
+      {/if}
+      {#each rows as row (`${row.sheetId ?? ''}!${row.name}`)}
+        <tr data-name={row.name} class="border-t border-border" title={row.comment}>
+          <td class="px-1 py-0.5 font-mono font-semibold">{row.name}</td>
+          <td class="px-1 py-0.5">{row.value}</td>
+          <td class="px-1 py-0.5 font-mono">{row.refersTo}</td>
+          <td class="px-1 py-0.5">{row.scopeLabel}</td>
+          {#if !readOnly}
+            <td class="whitespace-nowrap px-1 py-0.5 text-right">
+              <button type="button" aria-label="Edit {row.name}" class="rounded px-1 hover:bg-muted" onclick={() => edit(row)}>Edit</button>
+              <button type="button" aria-label="Delete {row.name}" class="rounded px-1 text-destructive hover:bg-muted" onclick={() => remove(row)}>
+                Delete
+              </button>
+            </td>
+          {/if}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+  {#if !readOnly}
+    <form
+      class="grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-1"
+      onsubmit={save}
+      aria-label={draft.original ? `Edit name ${draft.original.name}` : 'New name'}
+    >
+      <label for="pixerate-name-manager-name">Name</label>
+      <input id="pixerate-name-manager-name" class="rounded border border-border bg-background px-1 py-0.5" bind:value={draft.name} />
+      <label for="pixerate-name-manager-refers">Refers to</label>
+      <input id="pixerate-name-manager-refers" class="rounded border border-border bg-background px-1 py-0.5 font-mono" bind:value={draft.refersTo} />
+      <label for="pixerate-name-manager-scope">Scope</label>
+      <select id="pixerate-name-manager-scope" class="rounded border border-border bg-background px-1 py-0.5" bind:value={draft.scope}>
+        <option value="">Workbook</option>
+        {#each sheetState.sheets as sheet (sheet.id)}
+          <option value={sheet.id}>{sheet.name}</option>
+        {/each}
+      </select>
+      <label for="pixerate-name-manager-comment">Comment</label>
+      <input id="pixerate-name-manager-comment" class="rounded border border-border bg-background px-1 py-0.5" bind:value={draft.comment} />
+      <div class="col-span-2 flex gap-2">
+        <button type="submit" class="rounded bg-primary px-2 py-0.5 text-primary-foreground">{draft.original ? 'Save' : 'Add name'}</button>
+        {#if draft.original}
+          <button
+            type="button"
+            class="rounded px-2 py-0.5 hover:bg-muted"
+            onclick={() => {
+              draft = { ...EMPTY_DRAFT };
+              error = null;
+            }}
+          >
+            Cancel
+          </button>
+        {/if}
+      </div>
+    </form>
+  {/if}
+  {#if error}
+    <div role="alert" class="text-destructive">{error}</div>
+  {/if}
+</section>

package/dist/spreadsheet/NameManager.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { createReactiveSpreadsheet } from './spreadsheet.svelte.js';
+interface Props {
+    sheetState: ReturnType<typeof createReactiveSpreadsheet>;
+    readOnly?: boolean;
+    onClose?: () => void;
+    class?: string;
+}
+declare const NameManager: import("svelte").Component<Props, {}, "">;
+type NameManager = ReturnType<typeof NameManager>;
+export default NameManager;
+//# sourceMappingURL=NameManager.svelte.d.ts.map

package/dist/spreadsheet/NameManager.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NameManager.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/NameManager.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAGvE,UAAU,KAAK;IACb,UAAU,EAAE,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwJH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}