@pixerate/editor-svelte 0.18.0 → 0.19.0

package/dist/review/CommentsPanel.svelte

@@ -0,0 +1,226 @@
+<script lang="ts">
+  import type { Editor } from "@tiptap/core";
+  import {
+    formatReviewTime,
+    getCommentAuthor,
+    type CommentStore,
+    type CommentThread,
+    type ReviewAuthor,
+  } from "@pixerate/editor";
+  import { createComments, type SvelteComments } from "./review.svelte.js";
+
+  interface Props {
+    editor?: Editor | null;
+    /** Defaults to the store of the editor's `Comments` extension. */
+    store?: CommentStore;
+    /** Author of replies. Defaults to the `Comments` extension's author. */
+    author?: ReviewAuthor;
+    /** Initially show resolved threads. */
+    showResolved?: boolean;
+    class?: string;
+    formatTime?: (timestamp: number) => string;
+    emptyMessage?: string;
+  }
+
+  let {
+    editor = null,
+    store: storeProp = undefined,
+    author: authorProp = undefined,
+    showResolved: showResolvedInitial = false,
+    class: className = "flex flex-col gap-2 text-sm text-foreground",
+    formatTime = (t: number) => formatReviewTime(t),
+    emptyMessage = "No comments yet. Select text and add a comment.",
+  }: Props = $props();
+
+  const buttonClass =
+    "rounded px-2 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-50";
+  const primaryButtonClass =
+    "rounded px-2 py-1 text-xs bg-primary/10 text-primary hover:bg-primary/20 disabled:opacity-50";
+  const textareaClass =
+    "w-full resize-y rounded-md border border-input bg-background p-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary";
+
+  // svelte-ignore state_referenced_locally
+  let showResolved = $state(showResolvedInitial);
+  let drafts = $state<Record<string, string>>({});
+  let comments = $state.raw<SvelteComments>(createComments(null));
+
+  $effect(() => {
+    const c = createComments(storeProp ?? editor);
+    comments = c;
+    return () => c.destroy();
+  });
+
+  let author = $derived(
+    authorProp ?? getCommentAuthor(editor) ?? { id: "anonymous", name: "Anonymous" },
+  );
+  let threads = $derived(comments.threads);
+  let visible = $derived(threads.filter((t) => showResolved || !t.resolved));
+  let resolvedCount = $derived(threads.filter((t) => t.resolved).length);
+
+  const live = () => (editor && !editor.isDestroyed ? editor : null);
+
+  function focus(thread: CommentThread) {
+    if (thread.id === comments.activeThreadId) return;
+    const e = live();
+    if (e && !thread.orphaned) e.commands.focusComment(thread.id);
+    else comments.store?.setActiveThread(thread.id);
+  }
+
+  function remove(thread: CommentThread) {
+    const e = live();
+    if (e) e.commands.deleteComment(thread.id);
+    else comments.store?.deleteThread(thread.id);
+  }
+
+  function setResolved(thread: CommentThread, resolved: boolean) {
+    const e = live();
+    if (e) e.commands.resolveComment(thread.id, resolved);
+    else comments.store?.resolveThread(thread.id, resolved, author);
+  }
+
+  function submit(thread: CommentThread) {
+    const body = (drafts[thread.id] ?? "").trim();
+    const store = comments.store;
+    if (!body || !store) return;
+    if (thread.body === "") store.editComment(thread.id, body);
+    else store.addReply(thread.id, { body, author });
+    drafts[thread.id] = "";
+  }
+
+  function onCardKeydown(event: KeyboardEvent, thread: CommentThread) {
+    if (event.target === event.currentTarget && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      focus(thread);
+    }
+  }
+
+  function onTextareaKeydown(event: KeyboardEvent, thread: CommentThread) {
+    if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault();
+      submit(thread);
+    }
+  }
+</script>
+
+<aside class={className} aria-label="Comments">
+  <div class="flex items-center justify-between gap-2">
+    <span class="text-xs font-medium text-muted-foreground">
+      {threads.length - resolvedCount} open{resolvedCount > 0 ? ` · ${resolvedCount} resolved` : ""}
+    </span>
+    {#if resolvedCount > 0}
+      <button
+        type="button"
+        class={buttonClass}
+        aria-pressed={showResolved}
+        onclick={() => (showResolved = !showResolved)}
+      >
+        {showResolved ? "Hide resolved" : "Show resolved"}
+      </button>
+    {/if}
+  </div>
+  {#if visible.length === 0}
+    <p class="text-xs text-muted-foreground">{emptyMessage}</p>
+  {:else}
+    <ul class="flex flex-col gap-2" role="list">
+      {#each visible as thread (thread.id)}
+        {@const active = thread.id === comments.activeThreadId}
+        {@const isDraft = thread.body === ""}
+        {@const quote = thread.anchor?.quote ?? thread.lastQuote ?? ""}
+        <!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+        <li
+          class={`flex flex-col gap-2 rounded-md border bg-background p-3 cursor-pointer ${
+            active ? "border-primary ring-1 ring-primary" : "border-border"
+          } ${thread.resolved ? "opacity-70" : ""}`}
+          data-thread-id={thread.id}
+          data-active={active || undefined}
+          aria-current={active || undefined}
+          tabindex="0"
+          onclick={() => focus(thread)}
+          onkeydown={(e) => onCardKeydown(e, thread)}
+        >
+          <div class="flex items-baseline justify-between gap-2">
+            <span class="font-medium">{thread.author.name}</span>
+            <span class="text-xs text-muted-foreground">{formatTime(thread.createdAt)}</span>
+          </div>
+          {#if quote}
+            <blockquote class="border-l-2 border-border pl-2 text-xs text-muted-foreground line-clamp-2">
+              {quote}
+            </blockquote>
+          {/if}
+          {#if thread.orphaned}
+            <span class="text-xs text-destructive">The commented text was deleted.</span>
+          {/if}
+          {#if thread.resolved}
+            <span class="text-xs text-muted-foreground">Resolved</span>
+          {/if}
+          {#if !isDraft}
+            <p class="whitespace-pre-wrap break-words">{thread.body}</p>
+          {/if}
+          {#if thread.replies.length > 0}
+            <ul class="flex flex-col gap-2 border-l border-border pl-3" role="list">
+              {#each thread.replies as reply (reply.id)}
+                <li class="flex flex-col gap-0.5" data-reply-id={reply.id}>
+                  <span class="text-xs">
+                    <span class="font-medium">{reply.author.name}</span>
+                    <span class="text-muted-foreground">{formatTime(reply.createdAt)}</span>
+                  </span>
+                  <p class="whitespace-pre-wrap break-words">{reply.body}</p>
+                </li>
+              {/each}
+            </ul>
+          {/if}
+          {#if (active || isDraft) && !thread.resolved}
+            <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+            <div class="flex flex-col gap-1" onclick={(e) => e.stopPropagation()}>
+              <!-- svelte-ignore a11y_autofocus -->
+              <textarea
+                class={textareaClass}
+                rows="2"
+                aria-label={isDraft ? "Comment" : "Reply"}
+                placeholder={isDraft ? "Add a comment…" : "Reply…"}
+                autofocus={isDraft}
+                value={drafts[thread.id] ?? ""}
+                oninput={(e) => (drafts[thread.id] = e.currentTarget.value)}
+                onkeydown={(e) => onTextareaKeydown(e, thread)}
+              ></textarea>
+              <div class="flex justify-end gap-1">
+                {#if isDraft}
+                  <button type="button" class={buttonClass} onclick={() => remove(thread)}>
+                    Cancel
+                  </button>
+                {/if}
+                <button
+                  type="button"
+                  class={primaryButtonClass}
+                  disabled={!(drafts[thread.id] ?? "").trim()}
+                  onclick={() => submit(thread)}
+                >
+                  {isDraft ? "Comment" : "Reply"}
+                </button>
+              </div>
+            </div>
+          {/if}
+          {#if !isDraft}
+            <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+            <div class="flex justify-end gap-1" onclick={(e) => e.stopPropagation()}>
+              <button
+                type="button"
+                class={buttonClass}
+                onclick={() => setResolved(thread, !thread.resolved)}
+              >
+                {thread.resolved ? "Reopen" : "Resolve"}
+              </button>
+              <button
+                type="button"
+                class={`${buttonClass} hover:text-destructive`}
+                onclick={() => remove(thread)}
+              >
+                Delete
+              </button>
+            </div>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</aside>

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

@@ -0,0 +1,18 @@
+import type { Editor } from "@tiptap/core";
+import { type CommentStore, type ReviewAuthor } from "@pixerate/editor";
+interface Props {
+    editor?: Editor | null;
+    /** Defaults to the store of the editor's `Comments` extension. */
+    store?: CommentStore;
+    /** Author of replies. Defaults to the `Comments` extension's author. */
+    author?: ReviewAuthor;
+    /** Initially show resolved threads. */
+    showResolved?: boolean;
+    class?: string;
+    formatTime?: (timestamp: number) => string;
+    emptyMessage?: string;
+}
+declare const CommentsPanel: import("svelte").Component<Props, {}, "">;
+type CommentsPanel = ReturnType<typeof CommentsPanel>;
+export default CommentsPanel;
+//# sourceMappingURL=CommentsPanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommentsPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/review/CommentsPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAGH,KAAK,YAAY,EAEjB,KAAK,YAAY,EAClB,MAAM,kBAAkB,CAAC;AAI1B,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,kEAAkE;IAClE,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,wEAAwE;IACxE,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,uCAAuC;IACvC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAiLH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/review/ReviewToolbar.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { Editor } from "@tiptap/core";
+  import { createTrackChanges, type SvelteTrackChanges } from "./review.svelte.js";
+
+  interface Props {
+    editor?: Editor | null;
+    class?: string;
+  }
+
+  let {
+    editor = null,
+    class: className = "flex flex-wrap items-center gap-1 rounded-md border border-border bg-background p-1 text-sm",
+  }: Props = $props();
+
+  const buttonClass =
+    "rounded px-2 py-1 text-xs text-foreground hover:bg-muted disabled:opacity-40 disabled:hover:bg-transparent";
+
+  let review = $state.raw<SvelteTrackChanges>(createTrackChanges(null));
+
+  $effect(() => {
+    const r = createTrackChanges(editor);
+    review = r;
+    return () => r.destroy();
+  });
+
+  let count = $derived(review.changes.length);
+  let current = $derived(review.currentChange);
+  let index = $derived(current ? review.changes.findIndex((c) => c.id === current.id) + 1 : 0);
+</script>
+
+<div class={className} role="toolbar" aria-label="Review">
+  <button
+    type="button"
+    class={`${buttonClass} ${review.enabled ? "bg-primary/10 text-primary" : ""}`}
+    aria-pressed={review.enabled}
+    disabled={!editor}
+    onclick={() => review.toggle()}
+  >
+    {review.enabled ? "Tracking on" : "Track changes"}
+  </button>
+  <span class="mx-1 h-4 w-px bg-border" aria-hidden="true"></span>
+  <button
+    type="button"
+    class={buttonClass}
+    aria-label="Previous change"
+    disabled={count === 0}
+    onclick={() => review.previous()}
+  >
+    ‹
+  </button>
+  <span class="min-w-[4rem] text-center text-xs text-muted-foreground" aria-live="polite">
+    {count === 0 ? "No changes" : current ? `${index} of ${count}` : `${count} changes`}
+  </span>
+  <button
+    type="button"
+    class={buttonClass}
+    aria-label="Next change"
+    disabled={count === 0}
+    onclick={() => review.next()}
+  >
+    ›
+  </button>
+  <span class="mx-1 h-4 w-px bg-border" aria-hidden="true"></span>
+  <button
+    type="button"
+    class={buttonClass}
+    disabled={!current}
+    onclick={() => current && review.accept(current.id)}
+  >
+    Accept
+  </button>
+  <button
+    type="button"
+    class={buttonClass}
+    disabled={!current}
+    onclick={() => current && review.reject(current.id)}
+  >
+    Reject
+  </button>
+  <button type="button" class={buttonClass} disabled={count === 0} onclick={() => review.acceptAll()}>
+    Accept all
+  </button>
+  <button type="button" class={buttonClass} disabled={count === 0} onclick={() => review.rejectAll()}>
+    Reject all
+  </button>
+</div>

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

@@ -0,0 +1,9 @@
+import type { Editor } from "@tiptap/core";
+interface Props {
+    editor?: Editor | null;
+    class?: string;
+}
+declare const ReviewToolbar: import("svelte").Component<Props, {}, "">;
+type ReviewToolbar = ReturnType<typeof ReviewToolbar>;
+export default ReviewToolbar;
+//# sourceMappingURL=ReviewToolbar.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReviewToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/review/ReviewToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAIzC,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0DH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/review/index.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps } from "svelte";
+import type CommentsPanelComponent from "./CommentsPanel.svelte";
+import type ReviewToolbarComponent from "./ReviewToolbar.svelte";
+import type CommentButtonComponent from "./CommentButton.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 type CommentsPanelProps = ComponentProps<typeof CommentsPanelComponent>;
+export type ReviewToolbarProps = ComponentProps<typeof ReviewToolbarComponent>;
+export type CommentButtonProps = ComponentProps<typeof CommentButtonComponent>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/review/index.js

@@ -0,0 +1,4 @@
+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";

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

@@ -0,0 +1,40 @@
+import type { Editor } from "@tiptap/core";
+import { type CommentStore, type CommentStoreSnapshot, type CommentThread, type TrackChangesSnapshot, type TrackedChange } from "@pixerate/editor";
+export declare const EMPTY_COMMENTS_SNAPSHOT: CommentStoreSnapshot;
+export declare const EMPTY_TRACK_CHANGES_SNAPSHOT: TrackChangesSnapshot;
+export declare function isCommentStore(value: unknown): value is CommentStore;
+/** Resolves a comment store from a store or an editor using `Comments`. */
+export declare function resolveCommentStore(source: Editor | CommentStore | null | undefined): CommentStore | null;
+export interface SvelteComments {
+    readonly threads: readonly CommentThread[];
+    readonly activeThreadId: string | null;
+    readonly store: CommentStore | null;
+    subscribe(run: (value: CommentStoreSnapshot) => void): () => void;
+    destroy(): void;
+}
+/**
+ * Reactive (runes) and Svelte-store-compatible view of a comment store. Pass
+ * the store or an editor using the `Comments` extension. Call `destroy()`
+ * when done (or create it inside a component, where it lives as long as the
+ * component).
+ */
+export declare function createComments(source: Editor | CommentStore | null | undefined): SvelteComments;
+export interface SvelteTrackChanges extends TrackChangesSnapshot {
+    readonly currentChange: TrackedChange | null;
+    setEnabled(enabled: boolean): void;
+    toggle(): void;
+    accept(id: string): void;
+    reject(id: string): void;
+    acceptAll(): void;
+    rejectAll(): void;
+    next(): void;
+    previous(): void;
+    subscribe(run: (value: TrackChangesSnapshot) => void): () => void;
+    destroy(): void;
+}
+/**
+ * Reactive (runes) and Svelte-store-compatible view of an editor's tracked
+ * changes (`TrackChanges` extension) with its commands.
+ */
+export declare function createTrackChanges(editor: Editor | null | undefined): SvelteTrackChanges;
+//# sourceMappingURL=review.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/review/review.svelte.js

@@ -0,0 +1,104 @@
+import { getCommentStore, getTrackChangesStore, } from "@pixerate/editor";
+export const EMPTY_COMMENTS_SNAPSHOT = Object.freeze({
+    threads: [],
+    activeThreadId: null,
+});
+export const EMPTY_TRACK_CHANGES_SNAPSHOT = Object.freeze({
+    enabled: false,
+    author: { id: "anonymous", name: "Anonymous" },
+    changes: [],
+    currentChangeId: null,
+});
+export function isCommentStore(value) {
+    return (!!value &&
+        typeof value.getSnapshot === "function" &&
+        typeof value.createThread === "function");
+}
+/** Resolves a comment store from a store or an editor using `Comments`. */
+export function resolveCommentStore(source) {
+    return isCommentStore(source) ? source : getCommentStore(source);
+}
+/**
+ * Reactive (runes) and Svelte-store-compatible view of a comment store. Pass
+ * the store or an editor using the `Comments` extension. Call `destroy()`
+ * when done (or create it inside a component, where it lives as long as the
+ * component).
+ */
+export function createComments(source) {
+    const store = resolveCommentStore(source);
+    let snapshot = $state.raw(store?.getSnapshot() ?? EMPTY_COMMENTS_SNAPSHOT);
+    const unsubscribe = store
+        ? store.subscribe((value) => {
+            snapshot = value;
+        })
+        : () => { };
+    return {
+        get threads() {
+            return snapshot.threads;
+        },
+        get activeThreadId() {
+            return snapshot.activeThreadId;
+        },
+        get store() {
+            return store;
+        },
+        subscribe(run) {
+            if (!store) {
+                run(EMPTY_COMMENTS_SNAPSHOT);
+                return () => { };
+            }
+            return store.subscribe(run);
+        },
+        destroy: unsubscribe,
+    };
+}
+/**
+ * Reactive (runes) and Svelte-store-compatible view of an editor's tracked
+ * changes (`TrackChanges` extension) with its commands.
+ */
+export function createTrackChanges(editor) {
+    const store = getTrackChangesStore(editor ?? null);
+    let snapshot = $state.raw(store?.getSnapshot() ?? EMPTY_TRACK_CHANGES_SNAPSHOT);
+    const unsubscribe = store
+        ? store.subscribe((value) => {
+            snapshot = value;
+        })
+        : () => { };
+    const run = (fn) => {
+        if (editor && !editor.isDestroyed)
+            fn(editor);
+    };
+    return {
+        get enabled() {
+            return snapshot.enabled;
+        },
+        get author() {
+            return snapshot.author;
+        },
+        get changes() {
+            return snapshot.changes;
+        },
+        get currentChangeId() {
+            return snapshot.currentChangeId;
+        },
+        get currentChange() {
+            return snapshot.changes.find((c) => c.id === snapshot.currentChangeId) ?? null;
+        },
+        setEnabled: (enabled) => run((e) => e.commands.setTrackChanges(enabled)),
+        toggle: () => run((e) => e.commands.toggleTrackChanges()),
+        accept: (id) => run((e) => e.commands.acceptChange(id)),
+        reject: (id) => run((e) => e.commands.rejectChange(id)),
+        acceptAll: () => run((e) => e.commands.acceptAllChanges()),
+        rejectAll: () => run((e) => e.commands.rejectAllChanges()),
+        next: () => run((e) => e.chain().focus().selectNextChange().run()),
+        previous: () => run((e) => e.chain().focus().selectPreviousChange().run()),
+        subscribe(runFn) {
+            if (!store) {
+                runFn(EMPTY_TRACK_CHANGES_SNAPSHOT);
+                return () => { };
+            }
+            return store.subscribe(runFn);
+        },
+        destroy: unsubscribe,
+    };
+}

package/dist/spreadsheet/FormulaBar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { indexToColName } from '@pixerate/editor';
   import type { createReactiveSpreadsheet } from './spreadsheet.svelte.js';
+  import FormulaHints from './FormulaHints.svelte';
 
   interface Props {
     sheetState?: ReturnType<typeof createReactiveSpreadsheet>;
@@ -69,17 +70,22 @@
   }
 
   function handleInput(e: Event) {
-    const target = e.target as HTMLInputElement;
+    setValue((e.target as HTMLInputElement).value);
+  }
+
+  function setValue(next: string) {
     if (sheetState) {
-      sheetState.draftValue = target.value;
+      sheetState.draftValue = next;
       if (sheetState.activeCell && !sheetState.editingCell) {
-        sheetState.startEditing(sheetState.activeCell.row, sheetState.activeCell.col, target.value);
+        sheetState.startEditing(sheetState.activeCell.row, sheetState.activeCell.col, next);
       }
     } else {
-      value = target.value;
+      value = next;
     }
-    onChange?.(target.value);
+    onChange?.(next);
   }
+
+  let inputEl = $state<HTMLInputElement | null>(null);
 </script>
 
 <div class="flex items-center gap-2 border-b border-border bg-muted/20 px-3 py-1.5 text-xs font-mono {className}">
@@ -94,8 +100,10 @@
     class="flex-1 bg-transparent px-2 py-0.5 outline-none font-sans text-xs text-foreground placeholder:text-muted-foreground/60 focus:bg-background focus:ring-1 focus:ring-primary rounded"
     placeholder="Enter a value or formula (e.g. =SUM(A1:A5))"
     aria-label="Formula bar"
+    bind:this={inputEl}
     value={effectiveValue}
     oninput={handleInput}
     onkeydown={handleKeyDown}
   />
+  <FormulaHints input={inputEl} value={effectiveValue} onAccept={setValue} />
 </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;AAGvE,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;AAwFH,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;AA+FH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}