@pixerate/editor-svelte 0.23.0 → 0.24.0

package/dist/image-editor/RefineEdgePanel.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+  import type {
+    AdjustmentKind,
+    AdjustmentLayer,
+    ImageEditorController,
+    RefineEdgeParams,
+    SelectionMask,
+  } from '@pixerate/editor/image-editor';
+  import {
+    ADJUSTMENT_KINDS,
+    REFINE_EDGE_CONTROLS,
+    adjustmentKindLabel,
+    layerMaskFromSelection,
+  } from '@pixerate/editor/image-editor';
+  import { untrack } from 'svelte';
+
+  interface Props {
+    controller: ImageEditorController;
+    /** The current selection (`state.selection`). Omit to follow the controller. */
+    selection?: SelectionMask | null;
+    /** The adjustment layers (`state.adjustments.layers`). Omit to follow the controller. */
+    layers?: AdjustmentLayer[];
+    class?: string;
+  }
+
+  let { controller, selection, layers: layersProp, class: className = '' }: Props = $props();
+
+  let tick = $state(0);
+  $effect(() => {
+    const c = controller;
+    return untrack(() => c.subscribe(() => tick++));
+  });
+  const sel = $derived.by(() => {
+    void tick;
+    return selection === undefined ? controller.getSelection() : selection;
+  });
+  const list = $derived.by(() => {
+    void tick;
+    return layersProp ?? controller.getAdjustmentLayers();
+  });
+
+  const DEFAULT_PARAMS: Required<RefineEdgeParams> = { radius: 8, smartRadius: false, smooth: 0, feather: 0, contrast: 0, shiftEdge: 0 };
+  let params = $state<Required<RefineEdgeParams>>({ ...DEFAULT_PARAMS });
+  let busy = $state(false);
+  let error = $state<string | null>(null);
+  let layerId = $state('');
+  let newKind = $state<AdjustmentKind>('hueSaturation');
+  const target = $derived(list.find((l) => l.id === layerId) ?? list[list.length - 1]);
+
+  async function refine() {
+    busy = true;
+    error = null;
+    try {
+      await controller.refineSelection({ ...params });
+    } catch (err) {
+      error = err instanceof Error ? err.message : String(err);
+    } finally {
+      busy = false;
+    }
+  }
+
+  function newMaskedLayer() {
+    const s = controller.getSelection();
+    if (s) layerId = controller.addAdjustmentLayer({ kind: newKind, mask: layerMaskFromSelection(s) });
+  }
+
+  const button =
+    'px-2 py-1 rounded-md border border-slate-800 bg-slate-950 text-[11px] text-slate-200 hover:text-white disabled:opacity-40';
+</script>
+
+<div data-testid="refine-edge-panel" class="flex flex-col gap-3 text-xs {className}">
+  <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Refine Edge</span>
+  {#each REFINE_EDGE_CONTROLS as c (c.id)}
+    <label class="flex flex-col gap-1">
+      <span class="flex justify-between text-slate-400">
+        <span>{c.label}</span>
+        <span class="font-mono">{params[c.id]}{c.unit}</span>
+      </span>
+      <input
+        type="range"
+        min={c.min}
+        max={c.max}
+        step={c.step}
+        aria-label={c.label}
+        value={params[c.id]}
+        oninput={(e) => (params = { ...params, [c.id]: Number((e.currentTarget as HTMLInputElement).value) })}
+        class="w-full accent-indigo-500"
+      />
+    </label>
+  {/each}
+  <label class="flex items-center gap-2 text-slate-300">
+    <input
+      type="checkbox"
+      checked={params.smartRadius}
+      onchange={(e) => (params = { ...params, smartRadius: (e.currentTarget as HTMLInputElement).checked })}
+    />
+    Smart Radius
+  </label>
+  <div class="flex gap-1">
+    <button type="button" class={button} disabled={!sel || busy} onclick={refine}>Refine Edge</button>
+    <button type="button" class={button} onclick={() => (params = { ...DEFAULT_PARAMS })}>Reset</button>
+  </div>
+  {#if error}
+    <p role="alert" class="text-rose-400">{error}</p>
+  {/if}
+
+  <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px] mt-2">Layer Mask</span>
+  <div class="flex gap-1 items-center">
+    <select
+      aria-label="New masked layer kind"
+      value={newKind}
+      onchange={(e) => (newKind = (e.currentTarget as HTMLSelectElement).value as AdjustmentKind)}
+      class="flex-1 bg-slate-950 border border-slate-800 rounded px-1 py-1 text-slate-200"
+    >
+      {#each ADJUSTMENT_KINDS as k (k.kind)}
+        <option value={k.kind}>{k.label}</option>
+      {/each}
+    </select>
+    <button type="button" class={button} disabled={!sel} onclick={newMaskedLayer}>New Masked Layer</button>
+  </div>
+  {#if list.length > 0 && target}
+    <div class="flex flex-col gap-2">
+      <select
+        aria-label="Mask layer"
+        value={target.id}
+        onchange={(e) => (layerId = (e.currentTarget as HTMLSelectElement).value)}
+        class="bg-slate-950 border border-slate-800 rounded px-1 py-1 text-slate-200"
+      >
+        {#each list as l (l.id)}
+          <option value={l.id}>{l.name || adjustmentKindLabel(l.kind)}{l.mask ? ' (masked)' : ''}</option>
+        {/each}
+      </select>
+      <div class="flex flex-wrap gap-1">
+        <button type="button" class={button} disabled={!sel} onclick={() => controller.applySelectionAsLayerMask(target.id)}>
+          Mask with Selection
+        </button>
+        <button type="button" class={button} disabled={!target.mask} onclick={() => controller.selectionFromLayerMask(target.id)}>
+          Load as Selection
+        </button>
+        <button type="button" class={button} disabled={!target.mask} onclick={() => controller.setAdjustmentLayerMask(target.id, null)}>
+          Remove Mask
+        </button>
+      </div>
+      {#if target.mask}
+        <label class="flex flex-col gap-1">
+          <span class="flex justify-between text-slate-400">
+            <span>Density</span>
+            <span class="font-mono">{Math.round((target.mask.density ?? 1) * 100)}%</span>
+          </span>
+          <input
+            type="range"
+            min="0"
+            max="100"
+            step="1"
+            aria-label="Mask density"
+            value={Math.round((target.mask.density ?? 1) * 100)}
+            oninput={(e) => controller.setAdjustmentLayerMaskProps(target.id, { density: Number((e.currentTarget as HTMLInputElement).value) / 100 })}
+            class="w-full accent-indigo-500"
+          />
+        </label>
+        <label class="flex flex-col gap-1">
+          <span class="flex justify-between text-slate-400">
+            <span>Mask Feather</span>
+            <span class="font-mono">{target.mask.feather ?? 0}px</span>
+          </span>
+          <input
+            type="range"
+            min="0"
+            max="50"
+            step="0.5"
+            aria-label="Mask feather"
+            value={target.mask.feather ?? 0}
+            oninput={(e) => controller.setAdjustmentLayerMaskProps(target.id, { feather: Number((e.currentTarget as HTMLInputElement).value) })}
+            class="w-full accent-indigo-500"
+          />
+        </label>
+      {/if}
+    </div>
+  {/if}
+</div>

package/dist/image-editor/RefineEdgePanel.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { AdjustmentLayer, ImageEditorController, SelectionMask } from '@pixerate/editor/image-editor';
+interface Props {
+    controller: ImageEditorController;
+    /** The current selection (`state.selection`). Omit to follow the controller. */
+    selection?: SelectionMask | null;
+    /** The adjustment layers (`state.adjustments.layers`). Omit to follow the controller. */
+    layers?: AdjustmentLayer[];
+    class?: string;
+}
+declare const RefineEdgePanel: import("svelte").Component<Props, {}, "">;
+type RefineEdgePanel = ReturnType<typeof RefineEdgePanel>;
+export default RefineEdgePanel;
+//# sourceMappingURL=RefineEdgePanel.svelte.d.ts.map

package/dist/image-editor/RefineEdgePanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RefineEdgePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/RefineEdgePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAER,eAAe,EACf,qBAAqB,EAErB,aAAa,EACd,MAAM,+BAA+B,CAAC;AAUvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,gFAAgF;IAChF,SAAS,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACjC,yFAAyF;IACzF,MAAM,CAAC,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA4HH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/image-editor/SelectionOptionsBar.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import type {
+    ImageEditorController,
+    SelectionMask,
+    SelectionModifyOp,
+    SelectionToolOptions,
+  } from '@pixerate/editor/image-editor';
+  import {
+    SELECTION_MODES,
+    SELECTION_MODE_LABELS,
+    SELECTION_TOOLS,
+    describeSelection,
+  } from '@pixerate/editor/image-editor';
+  import { untrack } from 'svelte';
+
+  interface Props {
+    controller: ImageEditorController;
+    options: SelectionToolOptions;
+    onOptionsChange: (next: SelectionToolOptions) => void;
+    /** The current selection (`state.selection`). Omit to follow the controller. */
+    selection?: SelectionMask | null;
+    /** The Quick Mask view flag (`state.quickMask`). Omit to follow the controller. */
+    quickMask?: boolean;
+    class?: string;
+  }
+
+  let { controller, options, onOptionsChange, selection, quickMask, class: className = '' }: Props = $props();
+
+  let tick = $state(0);
+  $effect(() => {
+    const c = controller;
+    return untrack(() => c.subscribe(() => tick++));
+  });
+  const sel = $derived.by(() => {
+    void tick;
+    return selection === undefined ? controller.getSelection() : selection;
+  });
+  const qm = $derived.by(() => {
+    void tick;
+    return quickMask ?? Boolean(controller.getState().quickMask);
+  });
+
+  let radius = $state(2);
+
+  const MODIFY_OPS: { op: SelectionModifyOp; label: string }[] = [
+    { op: 'grow', label: 'Grow' },
+    { op: 'shrink', label: 'Shrink' },
+    { op: 'feather', label: 'Feather' },
+    { op: 'border', label: 'Border' },
+    { op: 'smooth', label: 'Smooth' },
+  ];
+
+  function set(patch: Partial<SelectionToolOptions>) {
+    onOptionsChange({ ...options, ...patch });
+  }
+
+  const btn = (on: boolean) =>
+    `px-2 py-1 rounded-md border text-[11px] transition-colors ${
+      on ? 'bg-indigo-600 border-indigo-500 text-white' : 'bg-slate-950 border-slate-800 text-slate-300 hover:text-white'
+    }`;
+</script>
+
+<div data-testid="selection-options-bar" class="flex flex-col gap-3 text-xs {className}">
+  <div role="group" aria-label="Selection tool" class="flex flex-wrap gap-1">
+    {#each SELECTION_TOOLS as t (t.id)}
+      <button type="button" aria-pressed={options.tool === t.id} class={btn(options.tool === t.id)} onclick={() => set({ tool: t.id })}>
+        {t.label}
+      </button>
+    {/each}
+  </div>
+  <div role="group" aria-label="Selection mode" class="flex flex-wrap gap-1">
+    {#each SELECTION_MODES as m (m)}
+      <button type="button" aria-pressed={options.mode === m} class={btn(options.mode === m)} onclick={() => set({ mode: m })}>
+        {SELECTION_MODE_LABELS[m]}
+      </button>
+    {/each}
+  </div>
+  {#if options.tool === 'wand'}
+    <div class="flex flex-col gap-2">
+      <label class="flex flex-col gap-1">
+        <span class="flex justify-between text-slate-400">
+          <span>Tolerance</span>
+          <span class="font-mono">{options.tolerance}</span>
+        </span>
+        <input
+          type="range"
+          min="0"
+          max="255"
+          step="1"
+          aria-label="Tolerance"
+          value={options.tolerance}
+          oninput={(e) => set({ tolerance: Number((e.currentTarget as HTMLInputElement).value) })}
+          class="w-full accent-indigo-500"
+        />
+      </label>
+      <label class="flex items-center gap-2 text-slate-300">
+        <input type="checkbox" checked={options.contiguous} onchange={(e) => set({ contiguous: (e.currentTarget as HTMLInputElement).checked })} />
+        Contiguous
+      </label>
+      <label class="flex items-center gap-2 text-slate-300">
+        <input type="checkbox" checked={options.sampleMerged} onchange={(e) => set({ sampleMerged: (e.currentTarget as HTMLInputElement).checked })} />
+        Sample adjusted image
+      </label>
+    </div>
+  {/if}
+  <label class="flex items-center gap-2 text-slate-300">
+    <input type="checkbox" checked={options.antiAlias} onchange={(e) => set({ antiAlias: (e.currentTarget as HTMLInputElement).checked })} />
+    Anti-alias
+  </label>
+  <div class="flex flex-wrap gap-1">
+    <button type="button" class={btn(false)} onclick={() => controller.selectAll()}>Select All</button>
+    <button type="button" class={btn(false)} disabled={!sel} onclick={() => controller.deselect()}>Deselect</button>
+    <button type="button" class={btn(false)} onclick={() => controller.invertSelection()}>Inverse</button>
+    <button type="button" aria-pressed={qm} class={btn(qm)} onclick={() => controller.setQuickMask(!qm)}>Quick Mask</button>
+  </div>
+  <div class="flex flex-wrap items-center gap-1">
+    <label class="flex items-center gap-1 text-slate-400">
+      Radius
+      <input
+        type="number"
+        min="0"
+        max="500"
+        step="1"
+        aria-label="Modify radius"
+        value={radius}
+        oninput={(e) => (radius = Math.max(0, Number((e.currentTarget as HTMLInputElement).value) || 0))}
+        class="w-14 bg-slate-950 border border-slate-800 rounded px-1 py-0.5 text-slate-200"
+      />
+    </label>
+    {#each MODIFY_OPS as m (m.op)}
+      <button type="button" class={btn(false)} disabled={!sel} onclick={() => controller.modifySelection(m.op, radius)}>{m.label}</button>
+    {/each}
+  </div>
+  <p data-testid="selection-status" class="text-slate-400">{describeSelection(sel)}</p>
+</div>

package/dist/image-editor/SelectionOptionsBar.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { ImageEditorController, SelectionMask, SelectionToolOptions } from '@pixerate/editor/image-editor';
+interface Props {
+    controller: ImageEditorController;
+    options: SelectionToolOptions;
+    onOptionsChange: (next: SelectionToolOptions) => void;
+    /** The current selection (`state.selection`). Omit to follow the controller. */
+    selection?: SelectionMask | null;
+    /** The Quick Mask view flag (`state.quickMask`). Omit to follow the controller. */
+    quickMask?: boolean;
+    class?: string;
+}
+declare const SelectionOptionsBar: import("svelte").Component<Props, {}, "">;
+type SelectionOptionsBar = ReturnType<typeof SelectionOptionsBar>;
+export default SelectionOptionsBar;
+//# sourceMappingURL=SelectionOptionsBar.svelte.d.ts.map

package/dist/image-editor/SelectionOptionsBar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionOptionsBar.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/SelectionOptionsBar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACR,qBAAqB,EACrB,aAAa,EAEb,oBAAoB,EACrB,MAAM,+BAA+B,CAAC;AAUvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,OAAO,EAAE,oBAAoB,CAAC;IAC9B,eAAe,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACtD,gFAAgF;IAChF,SAAS,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACjC,mFAAmF;IACnF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqGH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/image-editor/index.d.ts

@@ -4,15 +4,21 @@ import type HistogramComponent from "./Histogram.svelte";
 import type AdjustmentLayersPanelComponent from "./AdjustmentLayersPanel.svelte";
 import type CurvesEditorComponent from "./CurvesEditor.svelte";
 import type ControlSliderComponent from "./ControlSlider.svelte";
+import type SelectionOptionsBarComponent from "./SelectionOptionsBar.svelte";
+import type RefineEdgePanelComponent from "./RefineEdgePanel.svelte";
 export { default as ImageEditor } from './ImageEditor.svelte';
 export { default as Histogram } from './Histogram.svelte';
 export { default as AdjustmentLayersPanel } from './AdjustmentLayersPanel.svelte';
 export { default as CurvesEditor } from './CurvesEditor.svelte';
 export { default as ControlSlider } from './ControlSlider.svelte';
+export { default as SelectionOptionsBar } from './SelectionOptionsBar.svelte';
+export { default as RefineEdgePanel } from './RefineEdgePanel.svelte';
 export * from './imageEditorState.svelte.js';
 export type ImageEditorProps = ComponentProps<typeof ImageEditorComponent>;
 export type HistogramProps = ComponentProps<typeof HistogramComponent>;
 export type AdjustmentLayersPanelProps = ComponentProps<typeof AdjustmentLayersPanelComponent>;
 export type CurvesEditorProps = ComponentProps<typeof CurvesEditorComponent>;
 export type ControlSliderProps = ComponentProps<typeof ControlSliderComponent>;
+export type SelectionOptionsBarProps = ComponentProps<typeof SelectionOptionsBarComponent>;
+export type RefineEdgePanelProps = ComponentProps<typeof RefineEdgePanelComponent>;
 //# sourceMappingURL=index.d.ts.map

package/dist/image-editor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/image-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,kBAAkB,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,8BAA8B,MAAM,gCAAgC,CAAC;AACjF,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AAEjE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,cAAc,8BAA8B,CAAC;AAE7C,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,kBAAkB,CAAC,CAAC;AACvE,MAAM,MAAM,0BAA0B,GAAG,cAAc,CAAC,OAAO,8BAA8B,CAAC,CAAC;AAC/F,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/image-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,kBAAkB,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,8BAA8B,MAAM,gCAAgC,CAAC;AACjF,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,4BAA4B,MAAM,8BAA8B,CAAC;AAC7E,OAAO,KAAK,wBAAwB,MAAM,0BAA0B,CAAC;AAErE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,cAAc,8BAA8B,CAAC;AAE7C,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,kBAAkB,CAAC,CAAC;AACvE,MAAM,MAAM,0BAA0B,GAAG,cAAc,CAAC,OAAO,8BAA8B,CAAC,CAAC;AAC/F,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,OAAO,4BAA4B,CAAC,CAAC;AAC3F,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC"}

package/dist/image-editor/index.js

@@ -3,4 +3,6 @@ export { default as Histogram } from './Histogram.svelte';
 export { default as AdjustmentLayersPanel } from './AdjustmentLayersPanel.svelte';
 export { default as CurvesEditor } from './CurvesEditor.svelte';
 export { default as ControlSlider } from './ControlSlider.svelte';
+export { default as SelectionOptionsBar } from './SelectionOptionsBar.svelte';
+export { default as RefineEdgePanel } from './RefineEdgePanel.svelte';
 export * from './imageEditorState.svelte.js';

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import type TemplateRendererComponent from "./TemplateRenderer.svelte";
 import type VariableFormComponent from "./VariableForm.svelte";
 import type OutlinePanelComponent from "./OutlinePanel.svelte";
 import type MergePreviewComponent from "./MergePreview.svelte";
+import type StylesGalleryComponent from "./StylesGallery.svelte";
 export * from "./editor.svelte.js";
 export * from "./navigationGuard.js";
 export * from "./createNavigationGuard.svelte.js";
@@ -27,6 +28,9 @@ export type MergePreviewProps = ComponentProps<typeof MergePreviewComponent>;
 export { default as MergePreview } from "./MergePreview.svelte";
 export type OutlinePanelProps = ComponentProps<typeof OutlinePanelComponent>;
 export { default as OutlinePanel } from "./OutlinePanel.svelte";
+export * from "./paragraphStyles.svelte.js";
+export type StylesGalleryProps = ComponentProps<typeof StylesGalleryComponent>;
+export { default as StylesGallery } from "./StylesGallery.svelte";
 export type { Template, TemplateVersion, Token, TokenType, ColorGradient, RichTextPresetOptions, ImageOptions, } from "@pixerate/editor";
 export type { PromptValues, PromptDiagnostic, VariableFormField, MergeDataSource, MergeRecord, MergeRecordsResult, MergeOutput, } from "@pixerate/editor";
 export * from "./spreadsheet/index.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,KAAK,+BAA+B,MAAM,iCAAiC,CAAC;AACnF,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,yBAAyB,MAAM,2BAA2B,CAAC;AACvE,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAE/D,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mCAAmC,CAAC;AAClD,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAElC,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,kBAAkB,EAClB,YAAY,GACb,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,mBAAmB,EACnB,OAAO,EACP,YAAY,EACZ,qBAAqB,EACrB,YAAY,EACZ,WAAW,EACX,sBAAsB,EACtB,mBAAmB,EACnB,yBAAyB,GAC1B,MAAM,kBAAkB,CAAC;AAG1B,MAAM,MAAM,2BAA2B,GAAG,cAAc,CACtD,OAAO,+BAA+B,CACvC,CAAC;AACF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAChD,OAAO,yBAAyB,CACjC,CAAC;AACF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAE7E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEhE,YAAY,EACV,QAAQ,EACR,eAAe,EACf,KAAK,EACL,SAAS,EACT,aAAa,EACb,qBAAqB,EACrB,YAAY,GACb,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,WAAW,GACZ,MAAM,kBAAkB,CAAC;AAE1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,KAAK,+BAA+B,MAAM,iCAAiC,CAAC;AACnF,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,yBAAyB,MAAM,2BAA2B,CAAC;AACvE,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AAEjE,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mCAAmC,CAAC;AAClD,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAElC,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,kBAAkB,EAClB,YAAY,GACb,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,mBAAmB,EACnB,OAAO,EACP,YAAY,EACZ,qBAAqB,EACrB,YAAY,EACZ,WAAW,EACX,sBAAsB,EACtB,mBAAmB,EACnB,yBAAyB,GAC1B,MAAM,kBAAkB,CAAC;AAG1B,MAAM,MAAM,2BAA2B,GAAG,cAAc,CACtD,OAAO,+BAA+B,CACvC,CAAC;AACF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAChD,OAAO,yBAAyB,CACjC,CAAC;AACF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAE7E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,cAAc,6BAA6B,CAAC;AAC5C,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAElE,YAAY,EACV,QAAQ,EACR,eAAe,EACf,KAAK,EACL,SAAS,EACT,aAAa,EACb,qBAAqB,EACrB,YAAY,GACb,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,WAAW,GACZ,MAAM,kBAAkB,CAAC;AAE1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC"}

package/dist/index.js

@@ -13,6 +13,8 @@ export { default as TemplateRenderer } from "./TemplateRenderer.svelte";
 export { default as VariableForm } from "./VariableForm.svelte";
 export { default as MergePreview } from "./MergePreview.svelte";
 export { default as OutlinePanel } from "./OutlinePanel.svelte";
+export * from "./paragraphStyles.svelte.js";
+export { default as StylesGallery } from "./StylesGallery.svelte";
 export * from "./spreadsheet/index.js";
 export * from "./image-editor/index.js";
 export * from "./review/index.js";

package/dist/paragraphStyles.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Editor } from "@tiptap/core";
+import { type CreateStyleFromSelectionOptions, type ParagraphStylesSnapshot, type StyleDefinition, type StyleRegistry } from "@pixerate/editor";
+export type { ParagraphStylesSnapshot, StyleDefinition } from "@pixerate/editor";
+export interface SvelteParagraphStyles {
+    /** Snapshot: gallery, styles, character styles, current style id, version. */
+    readonly current: ParagraphStylesSnapshot;
+    readonly registry: StyleRegistry | null;
+    /** The style of the block at the selection. */
+    readonly currentStyle: StyleDefinition | null;
+    /** Applies a paragraph style to the selected blocks. */
+    apply(id: string): boolean;
+    /** Resets the selected blocks to Normal. */
+    clear(): boolean;
+    /** Updates a style (default: the current one) to the formatting at the selection. */
+    updateFromSelection(id?: string): boolean;
+    /** Creates (and applies) a style from the formatting at the selection; returns its id. */
+    createFromSelection(name: string, options?: CreateStyleFromSelectionOptions): string | null;
+    /** Applies a character style to the selection. */
+    applyCharacterStyle(id: string): boolean;
+    destroy(): void;
+}
+/**
+ * Reactive paragraph styles for Svelte 5 (the counterpart of React's
+ * `useParagraphStyles`): the gallery, all styles and the style at the
+ * selection, with commands. `current` is replaced only when the styles or
+ * the current style change. Call `destroy()` when done (or create it inside
+ * a component's `$effect`).
+ */
+export declare function createParagraphStyles(editor: Editor | null | undefined): SvelteParagraphStyles;
+//# sourceMappingURL=paragraphStyles.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"paragraphStyles.svelte.d.ts","sourceRoot":"","sources":["../src/paragraphStyles.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAGL,KAAK,+BAA+B,EACpC,KAAK,uBAAuB,EAC5B,KAAK,eAAe,EACpB,KAAK,aAAa,EACnB,MAAM,kBAAkB,CAAC;AAE1B,YAAY,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEjF,MAAM,WAAW,qBAAqB;IACpC,8EAA8E;IAC9E,QAAQ,CAAC,OAAO,EAAE,uBAAuB,CAAC;IAC1C,QAAQ,CAAC,QAAQ,EAAE,aAAa,GAAG,IAAI,CAAC;IACxC,+CAA+C;IAC/C,QAAQ,CAAC,YAAY,EAAE,eAAe,GAAG,IAAI,CAAC;IAC9C,wDAAwD;IACxD,KAAK,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,4CAA4C;IAC5C,KAAK,IAAI,OAAO,CAAC;IACjB,qFAAqF;IACrF,mBAAmB,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1C,0FAA0F;IAC1F,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,+BAA+B,GAAG,MAAM,GAAG,IAAI,CAAC;IAC5F,kDAAkD;IAClD,mBAAmB,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC;IACzC,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,qBAAqB,CAmC9F"}

package/dist/paragraphStyles.svelte.js

@@ -0,0 +1,44 @@
+import { createParagraphStylesStore, getStyleRegistry, } from "@pixerate/editor";
+/**
+ * Reactive paragraph styles for Svelte 5 (the counterpart of React's
+ * `useParagraphStyles`): the gallery, all styles and the style at the
+ * selection, with commands. `current` is replaced only when the styles or
+ * the current style change. Call `destroy()` when done (or create it inside
+ * a component's `$effect`).
+ */
+export function createParagraphStyles(editor) {
+    const store = createParagraphStylesStore(editor);
+    const registry = getStyleRegistry(editor);
+    let current = $state.raw(store.getSnapshot());
+    const unsubscribe = store.subscribe(() => {
+        current = store.getSnapshot();
+    });
+    const live = () => (editor && !editor.isDestroyed ? editor : null);
+    return {
+        get current() {
+            return current;
+        },
+        get registry() {
+            return registry;
+        },
+        get currentStyle() {
+            return (current.currentStyleId && registry?.get(current.currentStyleId)) || null;
+        },
+        apply: (id) => !!live()?.chain().focus().setParagraphStyle(id).run(),
+        clear: () => !!live()?.chain().focus().clearParagraphStyle().run(),
+        updateFromSelection: (id) => !!live()?.chain().focus().updateParagraphStyleFromSelection(id).run(),
+        createFromSelection: (name, options) => {
+            const e = live();
+            if (!e || !registry)
+                return null;
+            const id = options?.id ?? registry.newId(name.trim());
+            const ok = e.chain().focus().createParagraphStyleFromSelection(name, { ...options, id }).run();
+            return ok ? id : null;
+        },
+        applyCharacterStyle: (id) => !!live()?.chain().focus().setCharacterStyle(id).run(),
+        destroy() {
+            unsubscribe();
+            store.destroy();
+        },
+    };
+}

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/index.d.ts

@@ -2,6 +2,9 @@ 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";

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;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"}
+{"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,3 +1,4 @@
+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";

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;
 }