@pixerate/editor-svelte 0.21.0 → 0.23.0

package/README.md

@@ -69,13 +69,18 @@ Requires **Svelte 5** (the components use runes). Components ship as `.svelte` s
 
 `ReviewToolbar` steps through insertions, deletions, formatting and block changes and shows the current one's author and description (e.g. "Ada: Formatted: Bold"); hide it with `showDescription={false}` or restyle it with `descriptionClass`. Put `<CommentButton {editor} />` inside a `BubbleMenu` to comment on the selection. `createComments(editorOrStore)` and `createTrackChanges(editor)` are rune (and Svelte store) adapters for custom UIs.
 
+`<FindReplaceBar {editor} />` is a Word-style find bar for editors with the `FindReplace` extension (`createRichTextPreset({ findReplace: true })`): it appears on Mod+F / Mod+H (or `editor.commands.openFindReplace()`), with find and replace fields, option toggles, a "3 of 12" counter, previous/next, Replace and Replace all; Enter / Shift+Enter step, Mod+Enter in the replace field replaces all, Escape closes (`onclose`). `createFindReplace(editor)` is the rune (and Svelte store) adapter for custom UIs.
+
 ## More exports
 
 | Import | Exports |
 | :--- | :--- |
-| `@pixerate/editor-svelte` | `EditableTextNodeEditor`, `BubbleMenu`, `TemplateRenderer`, `initiateEditor`, `createReactiveEditor`, `createHistory`, `createHistoryShortcuts`, `navigationGuard` (action), `createNavigationGuard`, `SpreadsheetEditor`, `FormulaBar`, `FormulaHints`, `createReactiveSpreadsheet`, `DirtyTracker` |
+| `@pixerate/editor-svelte` | `EditableTextNodeEditor`, `BubbleMenu`, `TemplateRenderer`, `initiateEditor`, `createReactiveEditor`, `createHistory`, `createHistoryDirty`, `createHistoryShortcuts`, `navigationGuard` (action), `createNavigationGuard`, `SpreadsheetEditor`, `FormulaBar`, `FormulaHints`, `createReactiveSpreadsheet`, `DirtyTracker` |
 | `@pixerate/editor-svelte/spreadsheet` | `SpreadsheetEditor`, `FormulaBar`, `FormulaHints`, `SpreadsheetContextMenu`, `SpreadsheetGroupRow`, `createReactiveSpreadsheet` (also re-exported from the root entry) |
 | `@pixerate/editor-svelte/image-editor` | `ImageEditor`, `createReactiveImageEditor`: crop, rotate/flip, adjustments, annotations, depth masks, and `onInpaint` / `onRemoveBackground` AI hooks |
+| `@pixerate/editor-svelte/commands` | `CommandPalette`, `createCommandPalette` (`hotkey: "Mod+K"`; call `destroy()` when done), `createCommandShortcuts`, `useRegisterCommands` over a `CommandRegistry` from `@pixerate/editor/commands` (also re-exported from the root entry) |
+| `@pixerate/editor-svelte/persistence` | `createAutosave` (crash-recovery snapshots bound to a history / dirty flag, flushed on `pagehide`; call `destroy()` when done) and `<RecoveryPrompt>` (also re-exported from the root entry) |
+| `@pixerate/editor-svelte/generation` | `GenerationSettings` (controls generated from a model's capabilities, reference slots by role, plan adjustments; `onchange` / `onaddreference`), `createGenerationPlan(() => request, () => caps)`, `JobProgress`, `createJobProgress` (call `destroy()` when done) over `@pixerate/editor/generation` (also re-exported from the root entry) |
 | `@pixerate/editor-svelte/canvas` | Runes for `@xyflow/svelte`: `createCanvasGraph`, `createCanvasClipboard`, `createCanvasDocking`, `createCanvasShortcuts`, `createCanvasInteractions`, `createCanvasExplosion`, `createCanvasNodeSync`, `createCanvasMultiDrag`, `createStreamingCanvas`, `AgentPresenceLayer`, `FloatingHorizontalScrollbar`, plus layout helpers |
 
 Prop types are exported alongside each component, for example `EditableTextNodeEditorProps`, `BubbleMenuProps`, `ImageEditorProps` and `SpreadsheetEditorProps`.

package/dist/MergePreview.svelte

@@ -0,0 +1,201 @@
+<!--
+  Mail-merge preview: paste or pick a CSV / JSON data source, check the
+  automatic field mapping, step through records with the resolved prompt shown
+  by TemplateRenderer, and merge every record into text or JSON.
+  Inputs are nested in their labels, which associates them without ids.
+-->
+<script lang="ts">
+  import type {
+    ColorGradient,
+    MergeRecordsOptions,
+    MergeRecordsResult,
+    ParseDataSourceOptions,
+    Template,
+  } from "@pixerate/editor";
+  import TemplateRenderer from "./TemplateRenderer.svelte";
+  import { createMergePreview } from "./merge.svelte.js";
+
+  interface Props {
+    /** The prompt merged with each record. */
+    content: string;
+    templates?: Template[];
+    bindings?: Record<string, string>;
+    templateColorMap?: Map<string, ColorGradient>;
+    /** Initial CSV / TSV / JSON data source text. */
+    defaultSource?: string;
+    parseOptions?: ParseDataSourceOptions;
+    /** Drop records matching this condition (e.g. `"status=void"`) when merging. */
+    skipIf?: MergeRecordsOptions["skipIf"];
+    /** Separator between merged outputs (default a blank line; `"none"` for nothing). */
+    separator?: string;
+    maxOutputs?: number;
+    /** Called after "Merge all". */
+    onMerge?: (result: MergeRecordsResult) => void;
+    /** Base file name for downloads (default `merged`). */
+    downloadName?: string;
+    class?: string;
+  }
+
+  let {
+    content,
+    templates,
+    bindings,
+    templateColorMap,
+    defaultSource = "",
+    parseOptions,
+    skipIf,
+    separator,
+    maxOutputs,
+    onMerge,
+    downloadName = "merged",
+    class: className = "flex flex-col gap-3 text-sm",
+  }: Props = $props();
+
+  // svelte-ignore state_referenced_locally
+  const merge = createMergePreview(
+    () => ({ template: content, templates, bindings, parseOptions, skipIf, separator, maxOutputs }),
+    defaultSource,
+  );
+  let copied = $state(false);
+
+  const plural = (n: number, word: string) => `${n} ${word}${n === 1 ? "" : "s"}`;
+
+  function downloadText(text: string, fileName: string, type: string) {
+    if (typeof document === "undefined" || typeof URL.createObjectURL !== "function") return;
+    const url = URL.createObjectURL(new Blob([text], { type }));
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = fileName;
+    link.click();
+    setTimeout(() => URL.revokeObjectURL(url), 0);
+  }
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(merge.serialize("text"));
+      copied = true;
+    } catch {
+      copied = false;
+    }
+  }
+
+  function mergeAll() {
+    const result = merge.merge();
+    copied = false;
+    onMerge?.(result);
+  }
+</script>
+
+<div class={className} data-merge-preview="">
+  <label class="flex flex-col gap-1">
+    <span class="font-medium">Data source (CSV, TSV or JSON)</span>
+    <textarea
+      data-merge-source=""
+      value={merge.sourceText}
+      rows={5}
+      spellcheck={false}
+      oninput={(event) => merge.setSourceText(event.currentTarget.value)}
+      class="px-2 py-1 font-mono text-xs rounded-md border border-violet-400/40 bg-transparent"
+    ></textarea>
+  </label>
+  <div class="flex flex-wrap items-center gap-2">
+    <input
+      type="file"
+      accept=".csv,.tsv,.txt,.json,text/csv,application/json"
+      aria-label="Load data source file"
+      data-merge-file=""
+      onchange={(event) => {
+        const file = event.currentTarget.files?.[0];
+        if (file) void merge.loadFile(file);
+      }}
+    />
+    <span data-merge-summary="" class="opacity-70"
+      >{`${plural(merge.source.records.length, "record")} · ${plural(merge.source.fields.length, "field")}`}</span
+    >
+  </div>
+  {#if merge.source.warnings.length > 0 && merge.sourceText.trim() !== ""}
+    <ul data-merge-warnings="" class="text-amber-600 text-xs">
+      {#each merge.source.warnings as warning}
+        <li>{warning.message}</li>
+      {/each}
+    </ul>
+  {/if}
+
+  {#if merge.variables.length > 0}
+    <fieldset class="flex flex-col gap-1">
+      <legend class="font-medium">Field mapping</legend>
+      {#each merge.variables as variable (variable)}
+        <label class="flex items-center gap-2" data-merge-mapping={variable}>
+          <span class="min-w-24 font-mono">{`{${variable}}`}</span>
+          <select
+            value={merge.mapping[variable] ?? ""}
+            aria-label={`Field for ${variable}`}
+            onchange={(event) => merge.setFieldMapping(variable, event.currentTarget.value || null)}
+            class="px-1 py-0.5 rounded-md border border-violet-400/40 bg-transparent"
+          >
+            <option value="">(none)</option>
+            {#each merge.source.fields as field (field)}
+              <option value={field}>{field}</option>
+            {/each}
+          </select>
+        </label>
+      {/each}
+    </fieldset>
+  {/if}
+
+  <div class="flex items-center gap-2">
+    <button type="button" data-merge-prev="" onclick={merge.prev} disabled={merge.index <= 0}>Prev</button>
+    <span data-merge-position=""
+      >{merge.count === 0 ? "No records" : `Record ${merge.index + 1} of ${merge.count}`}</span
+    >
+    <button
+      type="button"
+      data-merge-next=""
+      onclick={merge.next}
+      disabled={merge.index >= merge.count - 1}>Next</button
+    >
+  </div>
+
+  <div data-merge-output="">
+    <TemplateRenderer
+      {content}
+      templates={templates ?? []}
+      {bindings}
+      {templateColorMap}
+      resolve={!!templates && templates.length > 0}
+      values={merge.values}
+    />
+  </div>
+
+  <div class="flex flex-wrap items-center gap-2">
+    <button type="button" data-merge-all="" disabled={merge.count === 0} onclick={mergeAll}>Merge all</button>
+    {#if merge.result}
+      <span data-merge-result=""
+        >{`${merge.result.outputs.length} merged${merge.result.skipped.length ? `, ${merge.result.skipped.length} skipped` : ""}${merge.result.truncated ? " (stopped early)" : ""}`}</span
+      >
+      <button type="button" data-merge-copy="" onclick={copy}>{copied ? "Copied" : "Copy"}</button>
+      <button
+        type="button"
+        data-merge-download="text"
+        onclick={() => downloadText(merge.serialize("text"), `${downloadName}.txt`, "text/plain")}
+        >Download .txt</button
+      >
+      <button
+        type="button"
+        data-merge-download="json"
+        onclick={() => downloadText(merge.serialize("json"), `${downloadName}.json`, "application/json")}
+        >Download .json</button
+      >
+    {/if}
+  </div>
+  {#if merge.result}
+    <textarea
+      readonly
+      aria-label="Merged output"
+      data-merge-text=""
+      rows={6}
+      value={merge.serialize("text")}
+      class="px-2 py-1 font-mono text-xs rounded-md border border-violet-400/40 bg-transparent"
+    ></textarea>
+  {/if}
+</div>

package/dist/MergePreview.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { ColorGradient, MergeRecordsOptions, MergeRecordsResult, ParseDataSourceOptions, Template } from "@pixerate/editor";
+interface Props {
+    /** The prompt merged with each record. */
+    content: string;
+    templates?: Template[];
+    bindings?: Record<string, string>;
+    templateColorMap?: Map<string, ColorGradient>;
+    /** Initial CSV / TSV / JSON data source text. */
+    defaultSource?: string;
+    parseOptions?: ParseDataSourceOptions;
+    /** Drop records matching this condition (e.g. `"status=void"`) when merging. */
+    skipIf?: MergeRecordsOptions["skipIf"];
+    /** Separator between merged outputs (default a blank line; `"none"` for nothing). */
+    separator?: string;
+    maxOutputs?: number;
+    /** Called after "Merge all". */
+    onMerge?: (result: MergeRecordsResult) => void;
+    /** Base file name for downloads (default `merged`). */
+    downloadName?: string;
+    class?: string;
+}
+declare const MergePreview: import("svelte").Component<Props, {}, "">;
+type MergePreview = ReturnType<typeof MergePreview>;
+export default MergePreview;
+//# sourceMappingURL=MergePreview.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MergePreview.svelte.d.ts","sourceRoot":"","sources":["../src/MergePreview.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACR,aAAa,EACb,mBAAmB,EACnB,kBAAkB,EAClB,sBAAsB,EACtB,QAAQ,EACT,MAAM,kBAAkB,CAAC;AAK1B,UAAU,KAAK;IACb,0CAA0C;IAC1C,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,gBAAgB,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC9C,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,sBAAsB,CAAC;IACtC,gFAAgF;IAChF,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC/C,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyHH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/TemplateRenderer.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import {
     evaluatePromptTokens,
+    describeConditionalTag,
+    formatConditionalTag,
     resolveTemplates,
     type Template,
     type ColorGradient,
@@ -36,8 +38,6 @@
     onVariableClick,
   }: Props = $props();
 
-  const CONDITIONAL_PREFIX = { if: "?", unless: "!", end: "/" } as const;
-
   let displayText = $derived(
     resolve && templates.length > 0
       ? resolveTemplates(content, templates, { bindings })
@@ -58,12 +58,6 @@
       .join("\n");
   }
 
-  function conditionalTitle(token: (typeof tokens)[number]): string {
-    if (token.conditional === "end") return `End of section: ${token.value}`;
-    return token.conditional === "if"
-      ? `Shown when "${token.value}" has a value`
-      : `Shown when "${token.value}" is empty`;
-  }
 </script>
 
 <div class={className}>
@@ -102,8 +96,8 @@
       <span
         data-conditional={token.conditional}
         class="inline-flex items-center px-1 py-0.5 mx-0.5 text-xs font-medium rounded-md border border-amber-400/40 bg-amber-400/15 text-amber-700"
-        title={conditionalTitle(token)}
-      >{`{${CONDITIONAL_PREFIX[token.conditional]}${token.value}}`}</span>
+        title={describeConditionalTag(token)}
+      >{formatConditionalTag(token)}</span>
     {:else if token.type === "instruction"}
       <span
         class="inline-flex items-center px-1.5 py-0.5 mx-0.5 text-xs italic font-medium rounded-md border border-rose-400/40 bg-rose-400/15 text-rose-600"

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateRenderer.svelte.d.ts","sourceRoot":"","sources":["../src/TemplateRenderer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAGH,KAAK,QAAQ,EACb,KAAK,aAAa,EAClB,KAAK,YAAY,EAClB,MAAM,kBAAkB,CAAC;AAG1B,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,gBAAgB,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AA6EH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"TemplateRenderer.svelte.d.ts","sourceRoot":"","sources":["../src/TemplateRenderer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAKH,KAAK,QAAQ,EACb,KAAK,aAAa,EAClB,KAAK,YAAY,EAClB,MAAM,kBAAkB,CAAC;AAG1B,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,gBAAgB,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAqEH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/canvas/CanvasGuidesLayer.svelte

@@ -10,6 +10,8 @@
 		color?: string;
 		/** Colour of equal-spacing guides. */
 		spacingColor?: string;
+		/** Colour of measuring lines, their labels and extension lines. */
+		measureColor?: string;
 		class?: string;
 	}
 
@@ -18,6 +20,7 @@
 		viewport = { x: 0, y: 0, zoom: 1 },
 		color = '#f59e0b',
 		spacingColor = '#ec4899',
+		measureColor = '#ef4444',
 		class: className = ''
 	}: Props = $props();
 
@@ -42,11 +45,38 @@
 				y1={a.y}
 				x2={b.x}
 				y2={b.y}
-				stroke={guide.kind === 'spacing' ? spacingColor : color}
+				stroke={guide.kind === 'measure' || guide.kind === 'extension'
+					? measureColor
+					: guide.kind === 'spacing'
+						? spacingColor
+						: color}
 				stroke-width="1"
-				stroke-dasharray={guide.kind === 'centre' ? '4 3' : undefined}
+				stroke-dasharray={guide.kind === 'centre' ? '4 3' : guide.kind === 'extension' ? '3 3' : undefined}
 				shape-rendering="crispEdges"
 			/>
 		{/each}
+		{#each guides as guide, i (i)}
+			{#if guide.label}
+				{@const mid = toScreen((guide.x1 + guide.x2) / 2, (guide.y1 + guide.y2) / 2)}
+				{@const vertical = guide.orientation === 'vertical'}
+				{@const width = guide.label.length * 6.5 + 8}
+				<!-- Labels sit beside vertical lines and below horizontal ones. -->
+				<g
+					class="pixerate-canvas-guides__label"
+					data-label={guide.label}
+					transform="translate({vertical ? mid.x + 4 : mid.x - width / 2} {vertical ? mid.y - 8 : mid.y + 4})"
+				>
+					<rect {width} height="16" rx="3" fill={measureColor} />
+					<text
+						x={width / 2}
+						y="11.5"
+						text-anchor="middle"
+						font-size="11"
+						font-family="system-ui, sans-serif"
+						fill="#fff">{guide.label}</text
+					>
+				</g>
+			{/if}
+		{/each}
 	</svg>
 {/if}

package/dist/canvas/CanvasGuidesLayer.svelte.d.ts

@@ -8,6 +8,8 @@ interface Props {
     color?: string;
     /** Colour of equal-spacing guides. */
     spacingColor?: string;
+    /** Colour of measuring lines, their labels and extension lines. */
+    measureColor?: string;
     class?: string;
 }
 declare const CanvasGuidesLayer: import("svelte").Component<Props, {}, "">;

package/dist/canvas/CanvasGuidesLayer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasGuidesLayer.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/CanvasGuidesLayer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGxE,UAAU,KAAK;IACd,kEAAkE;IAClE,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AA+BF,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"CanvasGuidesLayer.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/CanvasGuidesLayer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGxE,UAAU,KAAK;IACd,kEAAkE;IAClE,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAgDF,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/canvas/createCanvasArrange.svelte.d.ts

@@ -16,10 +16,21 @@ export interface CreateCanvasArrangeOptions<TNode extends CanvasNode = CanvasNod
  * Wire snapping to SvelteFlow with `onnodedragstart={() => arrange.beginDrag()}`,
  * `onnodedrag={({ nodes }) => arrange.drag(nodes.map((n) => n.id))}` and
  * `onnodedragstop={() => arrange.endDrag()}`, and render `arrange.guides` with
- * `<CanvasGuidesLayer>`.
+ * `<CanvasGuidesLayer>`. Snap resizes with `<NodeResizer {...arrange.resizerHandlers(id)} />`.
  */
 export declare function createCanvasArrange<TNode extends CanvasNode = CanvasNode>(options: CreateCanvasArrangeOptions<TNode>): {
     guides: GuideLine[];
+    /**
+     * Resize snapping for SvelteFlow's `<NodeResizer>` / `<NodeResizeControl>`:
+     * `<NodeResizer {...arrange.resizerHandlers(id)} />`. The resizer writes the raw size
+     * to the nodes after `onResize`, so snapping runs a microtask later and writes the
+     * snapped box back. Locked nodes snap back to their starting box.
+     */
+    resizerHandlers(id: string): {
+        onResizeStart: () => void;
+        onResize: () => void;
+        onResizeEnd: () => void;
+    };
     apply: (name: string, updates: import("@pixerate/editor/canvas").CanvasNodeUpdate[]) => import("@pixerate/editor/canvas").CanvasNodeUpdate[];
     align(edge: import("@pixerate/editor/canvas").AlignEdge, ids?: Iterable<string>, alignOptions?: import("@pixerate/editor/canvas").AlignNodesOptions): import("@pixerate/editor/canvas").CanvasNodeUpdate[];
     distribute(axis: import("@pixerate/editor/canvas").DistributeAxis, mode?: import("@pixerate/editor/canvas").DistributeMode, ids?: Iterable<string>, distributeOptions?: import("@pixerate/editor/canvas").DistributeNodesOptions): import("@pixerate/editor/canvas").CanvasNodeUpdate[];
@@ -44,6 +55,10 @@ export declare function createCanvasArrange<TNode extends CanvasNode = CanvasNod
     beginDrag(ids?: Iterable<string>): void;
     drag(ids?: Iterable<string>): import("@pixerate/editor/canvas").SnapNodeDragResult | null;
     snapPositionChanges<TChange extends import("@pixerate/editor/canvas").PositionChangeLike>(changes: TChange[]): TChange[];
+    beginResize(id: string): void;
+    resize(id: string, handle?: import("@pixerate/editor/canvas").ResizeHandle): import("@pixerate/editor/canvas").SnapNodeResizeResult | null;
+    endResize(): void;
+    snapResizeChanges<TChange extends import("@pixerate/editor/canvas").PositionChangeLike>(changes: TChange[]): TChange[];
     endDrag(): void;
 };
 export type CanvasArrange<TNode extends CanvasNode = CanvasNode> = ReturnType<typeof createCanvasArrange<TNode>>;

package/dist/canvas/createCanvasArrange.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createCanvasArrange.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasArrange.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAGN,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,EACxB,KAAK,8BAA8B,EACnC,KAAK,SAAS,EACd,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAI7C,KAAK,WAAW,GAAG,8BAA8B,CAAC,GAAG,CAAC,CAAC;AAEvD,MAAM,WAAW,0BAA0B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,CAChF,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,GAAG,gBAAgB,CAAC;IACrE,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EACxE,OAAO,EAAE,0BAA0B,CAAC,KAAK,CAAC;;;;;;;sBA2D2rlD,CAAC;sBAAiE,CAAC;sBAAiE,CAAC;oBAA+D,CAAC;cAAyD,CAAC;gBAAiD,CAAC;;;;;;;;;0BAA8tC,CAAC;;;;;;EAxCrvoD;AAED,MAAM,MAAM,aAAa,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,IAAI,UAAU,CAAC,OAAO,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC;AAEjH,MAAM,WAAW,6BAA6B;IAC7C,OAAO,EAAE;QAAE,SAAS,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,OAAO,CAAA;KAAE,CAAC;IACjE,uEAAuE;IACvE,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,OAAO,CAAA;KAAE,CAAC;IAC1D,aAAa,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,sBAAsB,EAAE,CAAC;CAC7C;AAED;;;;;GAKG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,6BAA6B,GAAG,MAAM,IAAI,CAqB/F"}
+{"version":3,"file":"createCanvasArrange.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasArrange.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAGN,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,EACxB,KAAK,8BAA8B,EACnC,KAAK,SAAS,EACd,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAI7C,KAAK,WAAW,GAAG,8BAA8B,CAAC,GAAG,CAAC,CAAC;AAEvD,MAAM,WAAW,0BAA0B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,CAChF,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,GAAG,gBAAgB,CAAC;IACrE,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EACxE,OAAO,EAAE,0BAA0B,CAAC,KAAK,CAAC;;IAkBzC;;;;;OAKG;wBACiB,MAAM;;;;;;;;;;sBAoDwv0D,CAAC;sBAAiE,CAAC;sBAAiE,CAAC;oBAA+D,CAAC;cAAyD,CAAC;gBAAiD,CAAC;;;;;;;;;0BAA8tC,CAAC;;;;;;;;;;EAxCny3D;AAED,MAAM,MAAM,aAAa,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,IAAI,UAAU,CAAC,OAAO,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC;AAEjH,MAAM,WAAW,6BAA6B;IAC7C,OAAO,EAAE;QAAE,SAAS,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,OAAO,CAAA;KAAE,CAAC;IACjE,uEAAuE;IACvE,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,OAAO,CAAA;KAAE,CAAC;IAC1D,aAAa,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,sBAAsB,EAAE,CAAC;CAC7C;AAED;;;;;GAKG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,6BAA6B,GAAG,MAAM,IAAI,CAqB/F"}

package/dist/canvas/createCanvasArrange.svelte.js

@@ -9,7 +9,7 @@ import { createCanvasArrangeController, matchArrangeShortcut } from '@pixerate/e
  * Wire snapping to SvelteFlow with `onnodedragstart={() => arrange.beginDrag()}`,
  * `onnodedrag={({ nodes }) => arrange.drag(nodes.map((n) => n.id))}` and
  * `onnodedragstop={() => arrange.endDrag()}`, and render `arrange.guides` with
- * `<CanvasGuidesLayer>`.
+ * `<CanvasGuidesLayer>`. Snap resizes with `<NodeResizer {...arrange.resizerHandlers(id)} />`.
  */
 export function createCanvasArrange(options) {
     let guides = $state.raw([]);
@@ -22,9 +22,26 @@ export function createCanvasArrange(options) {
     });
     return {
         ...controller,
-        /** Guide segments (flow coordinates) for the active drag; empty otherwise. */
+        /** Guide segments (flow coordinates) for the active drag or resize; empty otherwise. */
         get guides() {
             return guides;
+        },
+        /**
+         * Resize snapping for SvelteFlow's `<NodeResizer>` / `<NodeResizeControl>`:
+         * `<NodeResizer {...arrange.resizerHandlers(id)} />`. The resizer writes the raw size
+         * to the nodes after `onResize`, so snapping runs a microtask later and writes the
+         * snapped box back. Locked nodes snap back to their starting box.
+         */
+        resizerHandlers(id) {
+            return {
+                onResizeStart: () => controller.beginResize(id),
+                onResize: () => {
+                    queueMicrotask(() => controller.resize(id));
+                },
+                onResizeEnd: () => {
+                    queueMicrotask(() => controller.endResize());
+                }
+            };
         }
     };
 }

package/dist/canvas/createCanvasAutoLayout.svelte.d.ts

@@ -0,0 +1,68 @@
+import { type CanvasAutoLayoutControllerOptions, type GuideLine, type PositionChangeLike } from '@pixerate/editor/canvas';
+import type { CanvasNode } from './types.js';
+type CoreOptions = CanvasAutoLayoutControllerOptions<any>;
+export interface CreateCanvasAutoLayoutOptions<TNode extends CanvasNode = CanvasNode> extends Omit<CoreOptions, 'getNodes' | 'setNodes' | 'onGuidesChange'> {
+    getNodes: () => TNode[];
+    setNodes: (nodes: TNode[]) => void;
+    onGuidesChange?: (guides: GuideLine[]) => void;
+}
+/**
+ * Headless Svelte 5 rune for Figma-style auto layout on SvelteFlow sub-flows. Frames are
+ * nodes with `data.layout`; their children (`parentId`) are stacked, wrapped or placed on a
+ * grid, with hug / fill / fixed sizing, min / max, padding, alignment and constraints.
+ *
+ * Its actions (`addNode`, `removeNodes`, `resizeNode`, `moveChild`, `applyAutoLayout`) relayout
+ * in the same undoable step when a `HistoryManager` is passed. Wire the flow's own edits with
+ * `onnodedrag={({ targetNode }) => autoLayout.dragReorder(targetNode.id)}`,
+ * `onnodedragstop={({ targetNode }) => autoLayout.endReorderDrag(targetNode.id)}`,
+ * `ondelete={({ nodes }) => autoLayout.nodesDeleted(nodes)}`,
+ * `<NodeResizer {...autoLayout.resizerHandlers(id)} />` and call `autoLayout.measured(id)` when
+ * a node's content size changes. Render `guides` (the drop marker) with `<CanvasGuidesLayer>`.
+ */
+export declare function createCanvasAutoLayout<TNode extends CanvasNode = CanvasNode>(options: CreateCanvasAutoLayoutOptions<TNode>): {
+    guides: GuideLine[];
+    hasPending: boolean;
+    /** Notes node changes (see the core controller) and flushes them on the next microtask. */
+    handleChanges<TChange extends PositionChangeLike>(changes: TChange[]): TChange[];
+    /** For SvelteFlow's `ondelete`: relayouts the frames the deleted nodes left. */
+    nodesDeleted(removed: Iterable<{
+        id: string;
+        parentId?: string;
+    }>): void;
+    /** Relayouts around node `id` after its measured (content) size changed. */
+    measured(id: string): void;
+    /**
+     * Handlers for SvelteFlow's `<NodeResizer>`: children follow their constraints and the
+     * frames around the node relayout when the resize ends.
+     */
+    resizerHandlers(id: string): {
+        onResizeStart: () => void;
+        onResizeEnd: () => void;
+    };
+    applyAutoLayout(frameId?: string): import("@pixerate/editor/canvas").CanvasNodeUpdate[];
+    layoutUpdates(ids: Iterable<string>): import("@pixerate/editor/canvas").CanvasNodeUpdate[];
+    relayout(ids: Iterable<string>): import("@pixerate/editor/canvas").CanvasNodeUpdate[];
+    addNode(node: any, addOptions?: {
+        index?: number;
+    }): import("@pixerate/editor/canvas").CanvasNodeUpdate[];
+    removeNodes(ids: Iterable<string>): import("@pixerate/editor/canvas").CanvasNodeUpdate[];
+    resizeNode(id: string, size: {
+        width?: number;
+        height?: number;
+    }): import("@pixerate/editor/canvas").CanvasNodeUpdate[];
+    moveChild(childId: string, index: number): import("@pixerate/editor/canvas").CanvasNodeUpdate[];
+    getInsertTarget(id: string, point?: import("@pixerate/editor/canvas").XYPosition): import("@pixerate/editor/canvas").AutoLayoutInsertTarget | undefined;
+    beginReorderDrag(id: string): void;
+    dragReorder(id: string, point?: import("@pixerate/editor/canvas").XYPosition): import("@pixerate/editor/canvas").AutoLayoutInsertTarget | undefined;
+    endReorderDrag(id: string, point?: import("@pixerate/editor/canvas").XYPosition): import("@pixerate/editor/canvas").CanvasNodeUpdate[];
+    noteChanges<TChange extends PositionChangeLike>(changes: TChange[]): TChange[];
+    noteRemoved(removed: Iterable<{
+        id: string;
+        parentId?: string;
+    }>): void;
+    flush(): import("@pixerate/editor/canvas").CanvasNodeUpdate[];
+    isFrame: (id: string) => boolean;
+};
+export type CanvasAutoLayout<TNode extends CanvasNode = CanvasNode> = ReturnType<typeof createCanvasAutoLayout<TNode>>;
+export {};
+//# sourceMappingURL=createCanvasAutoLayout.svelte.d.ts.map

package/dist/canvas/createCanvasAutoLayout.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createCanvasAutoLayout.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasAutoLayout.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,iCAAiC,EACtC,KAAK,SAAS,EACd,KAAK,kBAAkB,EACvB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAI7C,KAAK,WAAW,GAAG,iCAAiC,CAAC,GAAG,CAAC,CAAC;AAE1D,MAAM,WAAW,6BAA6B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,CACnF,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,GAAG,gBAAgB,CAAC;IACrE,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EAAE,OAAO,EAAE,6BAA6B,CAAC,KAAK,CAAC;;;IA+BzH,2FAA2F;kBAC7E,OAAO,SAAS,kBAAkB,WAAW,OAAO,EAAE,GAAG,OAAO,EAAE;IAKhF,gFAAgF;0BAC1D,QAAQ,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAIjE,4EAA4E;iBAC/D,MAAM;IAInB;;;OAGG;wBACiB,MAAM;;;;;;;;aAiBw1vE,CAAC;;;;aAAiX,CAAC;cAAwB,CAAC;;;;;;;;;;gBAAqrD,CAAC;;;;EAHr7zE;AAED,MAAM,MAAM,gBAAgB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,IAAI,UAAU,CAAC,OAAO,sBAAsB,CAAC,KAAK,CAAC,CAAC,CAAC"}

package/dist/canvas/createCanvasAutoLayout.svelte.js

@@ -0,0 +1,78 @@
+import { createCanvasAutoLayoutController } from '@pixerate/editor/canvas';
+/**
+ * Headless Svelte 5 rune for Figma-style auto layout on SvelteFlow sub-flows. Frames are
+ * nodes with `data.layout`; their children (`parentId`) are stacked, wrapped or placed on a
+ * grid, with hug / fill / fixed sizing, min / max, padding, alignment and constraints.
+ *
+ * Its actions (`addNode`, `removeNodes`, `resizeNode`, `moveChild`, `applyAutoLayout`) relayout
+ * in the same undoable step when a `HistoryManager` is passed. Wire the flow's own edits with
+ * `onnodedrag={({ targetNode }) => autoLayout.dragReorder(targetNode.id)}`,
+ * `onnodedragstop={({ targetNode }) => autoLayout.endReorderDrag(targetNode.id)}`,
+ * `ondelete={({ nodes }) => autoLayout.nodesDeleted(nodes)}`,
+ * `<NodeResizer {...autoLayout.resizerHandlers(id)} />` and call `autoLayout.measured(id)` when
+ * a node's content size changes. Render `guides` (the drop marker) with `<CanvasGuidesLayer>`.
+ */
+export function createCanvasAutoLayout(options) {
+    let guides = $state.raw([]);
+    let scheduled = false;
+    const controller = createCanvasAutoLayoutController({
+        ...options,
+        onGuidesChange: (next) => {
+            guides = next;
+            options.onGuidesChange?.(next);
+        }
+    });
+    // SvelteFlow writes its own changes after its callbacks run, so the flush waits a microtask.
+    const schedule = () => {
+        if (scheduled)
+            return;
+        scheduled = true;
+        queueMicrotask(() => {
+            scheduled = false;
+            controller.flush();
+        });
+    };
+    return {
+        ...controller,
+        /** Drop marker of the active reorder drag (flow coordinates); empty otherwise. */
+        get guides() {
+            return guides;
+        },
+        get hasPending() {
+            return controller.hasPending;
+        },
+        /** Notes node changes (see the core controller) and flushes them on the next microtask. */
+        handleChanges(changes) {
+            controller.noteChanges(changes);
+            schedule();
+            return changes;
+        },
+        /** For SvelteFlow's `ondelete`: relayouts the frames the deleted nodes left. */
+        nodesDeleted(removed) {
+            controller.noteRemoved(removed);
+            schedule();
+        },
+        /** Relayouts around node `id` after its measured (content) size changed. */
+        measured(id) {
+            controller.noteChanges([{ type: 'dimensions', id }]);
+            schedule();
+        },
+        /**
+         * Handlers for SvelteFlow's `<NodeResizer>`: children follow their constraints and the
+         * frames around the node relayout when the resize ends.
+         */
+        resizerHandlers(id) {
+            return {
+                onResizeStart: () => {
+                    controller.noteChanges([{ type: 'dimensions', id, resizing: true }]);
+                },
+                onResizeEnd: () => {
+                    queueMicrotask(() => {
+                        controller.noteChanges([{ type: 'dimensions', id, resizing: false }]);
+                        controller.flush();
+                    });
+                }
+            };
+        }
+    };
+}