@pixerate/editor-svelte 0.18.0 → 0.19.0

package/README.md

@@ -35,6 +35,10 @@ Requires **Svelte 5** (the components use runes). Components ship as `.svelte` s
 
 `content` sets the initial document. Read later changes from the bound `editor` (for example in `onUpdate`), as above. The editor is preloaded with `createRichTextPreset()`. Pass `markdown`, `image`, `uploadImage`, `extensions` or `richTextOptions` to configure it.
 
+`fileImport` imports dropped/pasted `.md`, `.html`, `.txt` and `.rtf` files at the drop position, and `richClipboard` copies lossless slices between editors (both opt-in). `createFileImport(() => editor)` returns reactive `isImporting` / `error` plus `openFilePicker()` and `importFiles()` for an import button.
+
+`useAgentToolProvider(registry, () => editor && createRichTextToolProvider(editor, { id: "doc" }))` registers an agent tool provider (see `ToolRegistry` in `@pixerate/editor/agent`) for the component's lifetime. Call it during component initialisation.
+
 ## Read-only token renderer
 
 ```svelte
@@ -46,11 +50,28 @@ Requires **Svelte 5** (the components use runes). Components ship as `.svelte` s
 <TemplateRenderer content={"A photo of {subject} in {{golden_hour}}"} {templates} resolve />
 ```
 
+## Comments and tracked changes
+
+```svelte
+<script lang="ts">
+  import { Comments, TrackChanges } from "@pixerate/editor";
+  import { EditableTextNodeEditor, CommentsPanel, ReviewToolbar } from "@pixerate/editor-svelte";
+  let editor = $state();
+  const extensions = [Comments.configure({ author: me }), TrackChanges.configure({ author: me })];
+</script>
+
+<ReviewToolbar {editor} />
+<EditableTextNodeEditor bind:editor {extensions} />
+<CommentsPanel {editor} />
+```
+
+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.
+
 ## More exports
 
 | Import | Exports |
 | :--- | :--- |
-| `@pixerate/editor-svelte` | `EditableTextNodeEditor`, `BubbleMenu`, `TemplateRenderer`, `initiateEditor`, `createReactiveEditor`, `createHistory`, `createHistoryShortcuts`, `navigationGuard` (action), `createNavigationGuard`, `SpreadsheetEditor`, `FormulaBar`, `createReactiveSpreadsheet`, `DirtyTracker` |
+| `@pixerate/editor-svelte` | `EditableTextNodeEditor`, `BubbleMenu`, `TemplateRenderer`, `initiateEditor`, `createReactiveEditor`, `createHistory`, `createHistoryShortcuts`, `navigationGuard` (action), `createNavigationGuard`, `SpreadsheetEditor`, `FormulaBar`, `FormulaHints`, `createReactiveSpreadsheet`, `DirtyTracker` |
 | `@pixerate/editor-svelte/image-editor` | `ImageEditor`, `createReactiveImageEditor`: crop, rotate/flip, adjustments, annotations, depth masks, and `onInpaint` / `onRemoveBackground` AI hooks |
 | `@pixerate/editor-svelte/canvas` | Runes for `@xyflow/svelte`: `createCanvasGraph`, `createCanvasClipboard`, `createCanvasDocking`, `createCanvasShortcuts`, `createCanvasInteractions`, `createCanvasExplosion`, `createCanvasNodeSync`, `createCanvasMultiDrag`, `createStreamingCanvas`, `AgentPresenceLayer`, `FloatingHorizontalScrollbar`, plus layout helpers |
 

package/dist/EditableTextNodeEditor.svelte

@@ -1,6 +1,12 @@
 <script lang="ts">
   import type { Editor, Content, Extensions, FocusPosition } from "@tiptap/core";
-  import type { RichTextPresetOptions, MarkdownOptions, ImageOptions } from "@pixerate/editor";
+  import type {
+    RichTextPresetOptions,
+    MarkdownOptions,
+    ImageOptions,
+    FileImportOptions,
+    RichClipboardOptions,
+  } from "@pixerate/editor";
   import { onDestroy, onMount } from "svelte";
   import { initiateEditor } from "./editor.svelte.js";
 
@@ -23,6 +29,10 @@
     image?: ImageOptions | boolean;
     uploadImage?: (file: File) => Promise<string> | string;
     onUploadError?: (error: Error, file: File) => void;
+    /** Import .md, .html, .txt and .rtf files dropped or pasted into the editor (opt-in). */
+    fileImport?: FileImportOptions | boolean;
+    /** Copy/paste lossless ProseMirror slices between editors (opt-in). */
+    richClipboard?: RichClipboardOptions | boolean;
   }
 
   let {
@@ -44,6 +54,8 @@
     image = undefined,
     uploadImage = undefined,
     onUploadError = undefined,
+    fileImport = undefined,
+    richClipboard = undefined,
   }: EditorProps = $props();
 
   let element = $state<HTMLElement>();
@@ -75,12 +87,16 @@
                       },
               }
             : {}),
+          ...(fileImport !== undefined ? { fileImport } : {}),
+          ...(richClipboard !== undefined ? { richClipboard } : {}),
           ...richTextOptions,
         },
         editable,
         autofocus,
-        onCreate,
-        onUpdate,
+        // TipTap registers these as event listeners; passing `undefined`
+        // overrides its no-op defaults and makes `emit` throw.
+        ...(onCreate ? { onCreate } : {}),
+        ...(onUpdate ? { onUpdate } : {}),
         onFocus() {
           if (onFocus) onFocus();
         },

package/dist/EditableTextNodeEditor.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Editor, Content, Extensions, FocusPosition } from "@tiptap/core";
-import type { RichTextPresetOptions, MarkdownOptions, ImageOptions } from "@pixerate/editor";
+import type { RichTextPresetOptions, MarkdownOptions, ImageOptions, FileImportOptions, RichClipboardOptions } from "@pixerate/editor";
 interface EditorProps {
     class?: string;
     editorClass?: string;
@@ -19,6 +19,10 @@ interface EditorProps {
     image?: ImageOptions | boolean;
     uploadImage?: (file: File) => Promise<string> | string;
     onUploadError?: (error: Error, file: File) => void;
+    /** Import .md, .html, .txt and .rtf files dropped or pasted into the editor (opt-in). */
+    fileImport?: FileImportOptions | boolean;
+    /** Copy/paste lossless ProseMirror slices between editors (opt-in). */
+    richClipboard?: RichClipboardOptions | boolean;
 }
 declare const EditableTextNodeEditor: import("svelte").Component<EditorProps, {}, "editor">;
 type EditableTextNodeEditor = ReturnType<typeof EditableTextNodeEditor>;

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

@@ -1 +1 @@
-{"version":3,"file":"EditableTextNodeEditor.svelte.d.ts","sourceRoot":"","sources":["../src/EditableTextNodeEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC/E,OAAO,KAAK,EAAE,qBAAqB,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAK3F,UAAU,WAAW;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACrC,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC,SAAS,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC;IACpC,KAAK,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;IACvD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACpD;AA8FH,QAAA,MAAM,sBAAsB,uDAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"EditableTextNodeEditor.svelte.d.ts","sourceRoot":"","sources":["../src/EditableTextNodeEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC/E,OAAO,KAAK,EACR,qBAAqB,EACrB,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,oBAAoB,EACrB,MAAM,kBAAkB,CAAC;AAK1B,UAAU,WAAW;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACrC,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC,SAAS,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC;IACpC,KAAK,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;IACvD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnD,yFAAyF;IACzF,UAAU,CAAC,EAAE,iBAAiB,GAAG,OAAO,CAAC;IACzC,uEAAuE;IACvE,aAAa,CAAC,EAAE,oBAAoB,GAAG,OAAO,CAAC;CAChD;AAoGH,QAAA,MAAM,sBAAsB,uDAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/OutlinePanel.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import type { Editor } from "@tiptap/core";
+  import type { Snippet } from "svelte";
+  import { navigateToHeading, type OutlineHeading } from "@pixerate/editor";
+  import { createOutline } from "./outline.svelte.js";
+
+  interface Props {
+    editor?: Editor | null;
+    /** Heading shown above the list. Pass `null` to hide it. */
+    title?: string | null;
+    /** Text shown when the document has no headings. */
+    emptyText?: string;
+    /** Deepest heading level listed. Defaults to 6. */
+    maxLevel?: number;
+    /** Whether clicking an entry focuses the editor. Defaults to `true`. */
+    focusOnNavigate?: boolean;
+    class?: string;
+    itemClass?: string;
+    activeItemClass?: string;
+    /** Called after navigating to a heading. */
+    onNavigate?: (heading: OutlineHeading) => void;
+    /** Custom empty state, rendered instead of `emptyText`. */
+    empty?: Snippet;
+  }
+
+  let {
+    editor = null,
+    title = "Outline",
+    emptyText = "Add headings to see the outline.",
+    maxLevel = 6,
+    focusOnNavigate = true,
+    class: className = "flex flex-col gap-1 text-sm",
+    itemClass = "w-full truncate rounded px-2 py-1 text-left hover:bg-black/5",
+    activeItemClass = "font-semibold bg-black/5",
+    onNavigate,
+    empty,
+  }: Props = $props();
+
+  let outline = $state.raw<ReturnType<typeof createOutline> | null>(null);
+
+  $effect(() => {
+    const instance = createOutline(editor);
+    outline = instance;
+    return () => instance.destroy();
+  });
+
+  const snapshot = $derived(outline?.current ?? { headings: [], tree: [], activeId: null });
+  const visible = $derived(snapshot.headings.filter((h) => h.level <= maxLevel));
+
+  function navigate(heading: OutlineHeading) {
+    if (!editor) return;
+    if (navigateToHeading(editor, heading, { focus: focusOnNavigate })) {
+      onNavigate?.(heading);
+    }
+  }
+</script>
+
+<nav class={className} aria-label="Document outline" data-outline-panel="">
+  {#if title != null}
+    <div class="pixerate-outline-title">{title}</div>
+  {/if}
+  {#if visible.length === 0}
+    <div class="pixerate-outline-empty">
+      {#if empty}{@render empty()}{:else}{emptyText}{/if}
+    </div>
+  {:else}
+    <ul role="list" style="list-style: none; margin: 0; padding: 0;">
+      {#each visible as heading (heading.id)}
+        {@const active = heading.id === snapshot.activeId}
+        <li data-level={heading.level}>
+          <button
+            type="button"
+            class={active ? `${itemClass} ${activeItemClass}` : itemClass}
+            style="padding-left: {0.5 + heading.depth * 0.75}rem"
+            aria-current={active ? "location" : undefined}
+            data-heading-id={heading.id}
+            onclick={() => navigate(heading)}
+          >
+            {heading.text || "Untitled"}
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</nav>

package/dist/OutlinePanel.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Editor } from "@tiptap/core";
+import type { Snippet } from "svelte";
+import { type OutlineHeading } from "@pixerate/editor";
+interface Props {
+    editor?: Editor | null;
+    /** Heading shown above the list. Pass `null` to hide it. */
+    title?: string | null;
+    /** Text shown when the document has no headings. */
+    emptyText?: string;
+    /** Deepest heading level listed. Defaults to 6. */
+    maxLevel?: number;
+    /** Whether clicking an entry focuses the editor. Defaults to `true`. */
+    focusOnNavigate?: boolean;
+    class?: string;
+    itemClass?: string;
+    activeItemClass?: string;
+    /** Called after navigating to a heading. */
+    onNavigate?: (heading: OutlineHeading) => void;
+    /** Custom empty state, rendered instead of `emptyText`. */
+    empty?: Snippet;
+}
+declare const OutlinePanel: import("svelte").Component<Props, {}, "">;
+type OutlinePanel = ReturnType<typeof OutlinePanel>;
+export default OutlinePanel;
+//# sourceMappingURL=OutlinePanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OutlinePanel.svelte.d.ts","sourceRoot":"","sources":["../src/OutlinePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAqB,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIxE,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wEAAwE;IACxE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAC/C,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAgEH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/TemplateRenderer.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import {
-    tokenizePrompt,
+    evaluatePromptTokens,
     resolveTemplates,
     type Template,
     type ColorGradient,
+    type PromptValues,
   } from "@pixerate/editor";
 
   interface Props {
@@ -11,6 +12,13 @@
     templates?: Template[];
     templateColorMap?: Map<string, ColorGradient>;
     resolve?: boolean;
+    /** Template version bindings used when `resolve` is set. */
+    bindings?: Record<string, string>;
+    /**
+     * Variable values. When set, variables show their value (or default),
+     * sections whose condition fails are hidden, and section tags are dropped.
+     */
+    values?: PromptValues;
     class?: string;
     onTemplateClick?: (templateName: string) => void;
     onVariableClick?: (variableName: string) => void;
@@ -21,18 +29,41 @@
     templates = [],
     templateColorMap,
     resolve = false,
+    bindings,
+    values,
     class: className = "font-mono text-sm leading-relaxed whitespace-pre-wrap break-words",
     onTemplateClick,
     onVariableClick,
   }: Props = $props();
 
+  const CONDITIONAL_PREFIX = { if: "?", unless: "!", end: "/" } as const;
+
   let displayText = $derived(
     resolve && templates.length > 0
-      ? resolveTemplates(content, templates)
+      ? resolveTemplates(content, templates, { bindings })
       : content
   );
 
-  let tokens = $derived(tokenizePrompt(displayText));
+  let tokens = $derived(evaluatePromptTokens(displayText, values));
+
+  function variableDetails(token: (typeof tokens)[number]): string {
+    return [
+      `Variable: ${token.value}`,
+      token.description,
+      token.defaultValue !== undefined
+        ? `Default: ${token.defaultValue || "(empty)"}`
+        : undefined,
+    ]
+      .filter(Boolean)
+      .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}>
@@ -48,15 +79,31 @@
       >
         {`{{${token.value}}}`}
       </span>
+    {:else if token.type === "variable" && token.resolvedValue !== undefined}
+      <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+      <span
+        onclick={() => onVariableClick?.(token.value)}
+        data-variable={token.value}
+        data-value-source={token.valueSource}
+        class={token.valueSource === "value"
+          ? "inline px-1 mx-0.5 rounded-md bg-emerald-400/15 text-emerald-700 border-b border-emerald-400/60 cursor-pointer"
+          : "inline px-1 mx-0.5 rounded-md bg-violet-400/10 text-violet-600 italic border-b border-dashed border-violet-400/60 cursor-pointer"}
+        title={variableDetails(token)}
+      >{token.resolvedValue}</span>
     {:else if token.type === "variable"}
       <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
       <span
         onclick={() => onVariableClick?.(token.value)}
+        data-variable={token.value}
         class="inline-flex items-center px-1.5 py-0.5 mx-0.5 text-xs font-medium rounded-md border border-violet-400/40 bg-violet-400/15 text-violet-600 hover:brightness-110 cursor-pointer transition-all"
-        title={`Variable: ${token.value}`}
-      >
-        {`{${token.value}}`}
-      </span>
+        title={variableDetails(token)}
+      >{`{${token.value}`}{#if token.defaultValue !== undefined}<span class="opacity-60">{`|${token.defaultValue}`}</span>{/if}{"}"}</span>
+    {:else if token.type === "conditional" && token.conditional}
+      <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>
     {: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

@@ -1,9 +1,16 @@
-import { type Template, type ColorGradient } from "@pixerate/editor";
+import { type Template, type ColorGradient, type PromptValues } from "@pixerate/editor";
 interface Props {
     content: string;
     templates?: Template[];
     templateColorMap?: Map<string, ColorGradient>;
     resolve?: boolean;
+    /** Template version bindings used when `resolve` is set. */
+    bindings?: Record<string, string>;
+    /**
+     * Variable values. When set, variables show their value (or default),
+     * sections whose condition fails are hidden, and section tags are dropped.
+     */
+    values?: PromptValues;
     class?: string;
     onTemplateClick?: (templateName: string) => void;
     onVariableClick?: (variableName: string) => void;

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,EACnB,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,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;AAiDH,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,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"}

package/dist/VariableForm.svelte

@@ -0,0 +1,86 @@
+<!--
+  Inputs are nested in their labels, which associates them without ids
+  (`$props.id()` needs Svelte 5.20, newer than our peer range).
+-->
+<script lang="ts">
+  import {
+    compactVariableValues,
+    getVariableFormFields,
+    type PromptValues,
+    type Template,
+  } from "@pixerate/editor";
+
+  interface Props {
+    /** Prompt whose variables become form fields. */
+    content: string;
+    /** Templates searched recursively for further variables. */
+    templates?: Template[];
+    /** Template version bindings. */
+    bindings?: Record<string, string>;
+    /** Entered text per variable. Bindable. */
+    values?: Record<string, string>;
+    /**
+     * Called on every edit with the values to resolve with (blank fields
+     * dropped so defaults apply) and the raw entered text.
+     */
+    onChange?: (values: PromptValues, entered: Record<string, string>) => void;
+    class?: string;
+  }
+
+  let {
+    content,
+    templates,
+    bindings,
+    values = $bindable({}),
+    onChange,
+    class: className = "flex flex-col gap-3 text-sm",
+  }: Props = $props();
+
+  let fields = $derived(getVariableFormFields(content, { templates, bindings }));
+
+  function update(name: string, value: string) {
+    const next = { ...values, [name]: value };
+    values = next;
+    onChange?.(compactVariableValues(next), next);
+  }
+</script>
+
+{#if fields.length > 0}
+  <form class={className} onsubmit={(event) => event.preventDefault()}>
+    {#each fields as field (field.name)}
+      {#if field.conditionOnly}
+        <label
+          class="flex items-center gap-2"
+          data-variable-field={field.name}
+        >
+          <input
+            name={field.name}
+            type="checkbox"
+            checked={(values[field.name] ?? "") !== ""}
+            onchange={(event) =>
+              update(field.name, event.currentTarget.checked ? "true" : "")}
+          />
+          <span>{field.label}</span>
+        </label>
+      {:else}
+        <label
+          class="flex flex-col gap-1"
+          data-variable-field={field.name}
+        >
+          <span class="font-medium"
+            >{field.label}{#if field.required}<span class="text-rose-500" aria-hidden="true">{" *"}</span>{/if}</span
+          >
+          <input
+            name={field.name}
+            type="text"
+            value={values[field.name] ?? ""}
+            placeholder={field.placeholder}
+            aria-required={field.required || undefined}
+            oninput={(event) => update(field.name, event.currentTarget.value)}
+            class="px-2 py-1 rounded-md border border-violet-400/40 bg-transparent"
+          />
+        </label>
+      {/if}
+    {/each}
+  </form>
+{/if}

package/dist/VariableForm.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type PromptValues, type Template } from "@pixerate/editor";
+interface Props {
+    /** Prompt whose variables become form fields. */
+    content: string;
+    /** Templates searched recursively for further variables. */
+    templates?: Template[];
+    /** Template version bindings. */
+    bindings?: Record<string, string>;
+    /** Entered text per variable. Bindable. */
+    values?: Record<string, string>;
+    /**
+     * Called on every edit with the values to resolve with (blank fields
+     * dropped so defaults apply) and the raw entered text.
+     */
+    onChange?: (values: PromptValues, entered: Record<string, string>) => void;
+    class?: string;
+}
+declare const VariableForm: import("svelte").Component<Props, {}, "values">;
+type VariableForm = ReturnType<typeof VariableForm>;
+export default VariableForm;
+//# sourceMappingURL=VariableForm.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VariableForm.svelte.d.ts","sourceRoot":"","sources":["../src/VariableForm.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAGH,KAAK,YAAY,EACjB,KAAK,QAAQ,EACd,MAAM,kBAAkB,CAAC;AAG1B,UAAU,KAAK;IACb,iDAAiD;IACjD,OAAO,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,2CAA2C;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6CH,QAAA,MAAM,YAAY,iDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/agentTools.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { AgentToolProvider, ToolRegistry } from "@pixerate/editor/agent";
+type MaybeGetter<T> = T | (() => T);
+/**
+ * Registers a tool provider with a `ToolRegistry` for the lifetime of the
+ * calling component (call it during component initialisation) and
+ * unregisters it on destroy. Pass getters to react to changes, e.g.
+ * `useAgentToolProvider(registry, () => editor && createRichTextToolProvider(editor, { id }))`:
+ * when the getter returns a different provider, the old one is unregistered.
+ */
+export declare function useAgentToolProvider(registry: MaybeGetter<ToolRegistry | null | undefined>, provider: MaybeGetter<AgentToolProvider | null | undefined>): void;
+export {};
+//# sourceMappingURL=agentTools.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"agentTools.svelte.d.ts","sourceRoot":"","sources":["../src/agentTools.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE9E,KAAK,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;AAKpC;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,WAAW,CAAC,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,EACtD,QAAQ,EAAE,WAAW,CAAC,iBAAiB,GAAG,IAAI,GAAG,SAAS,CAAC,GAC1D,IAAI,CAON"}

package/dist/agentTools.svelte.js

@@ -0,0 +1,17 @@
+const read = (value) => typeof value === "function" ? value() : value;
+/**
+ * Registers a tool provider with a `ToolRegistry` for the lifetime of the
+ * calling component (call it during component initialisation) and
+ * unregisters it on destroy. Pass getters to react to changes, e.g.
+ * `useAgentToolProvider(registry, () => editor && createRichTextToolProvider(editor, { id }))`:
+ * when the getter returns a different provider, the old one is unregistered.
+ */
+export function useAgentToolProvider(registry, provider) {
+    $effect(() => {
+        const currentRegistry = read(registry);
+        const currentProvider = read(provider);
+        if (!currentRegistry || !currentProvider)
+            return;
+        return currentRegistry.register(currentProvider);
+    });
+}

package/dist/canvas/CanvasGuidesLayer.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { CanvasViewport, GuideLine } from '@pixerate/editor/canvas';
+
+	interface Props {
+		/** Guide segments in flow coordinates (e.g. `arrange.guides`). */
+		guides: GuideLine[];
+		/** Current viewport (`useSvelteFlow().getViewport()` or the `viewport` binding). */
+		viewport?: CanvasViewport;
+		/** Colour of edge and centre guides. */
+		color?: string;
+		/** Colour of equal-spacing guides. */
+		spacingColor?: string;
+		class?: string;
+	}
+
+	let {
+		guides = [],
+		viewport = { x: 0, y: 0, zoom: 1 },
+		color = '#f59e0b',
+		spacingColor = '#ec4899',
+		class: className = ''
+	}: Props = $props();
+
+	const toScreen = (x: number, y: number) => ({
+		x: x * viewport.zoom + viewport.x,
+		y: y * viewport.zoom + viewport.y
+	});
+</script>
+
+{#if guides.length > 0}
+	<svg
+		class="pixerate-canvas-guides {className}"
+		style="position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 10;"
+		aria-hidden="true"
+	>
+		{#each guides as guide, i (i)}
+			{@const a = toScreen(guide.x1, guide.y1)}
+			{@const b = toScreen(guide.x2, guide.y2)}
+			<line
+				data-kind={guide.kind}
+				x1={a.x}
+				y1={a.y}
+				x2={b.x}
+				y2={b.y}
+				stroke={guide.kind === 'spacing' ? spacingColor : color}
+				stroke-width="1"
+				stroke-dasharray={guide.kind === 'centre' ? '4 3' : undefined}
+				shape-rendering="crispEdges"
+			/>
+		{/each}
+	</svg>
+{/if}

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

@@ -0,0 +1,16 @@
+import type { CanvasViewport, GuideLine } from '@pixerate/editor/canvas';
+interface Props {
+    /** Guide segments in flow coordinates (e.g. `arrange.guides`). */
+    guides: GuideLine[];
+    /** Current viewport (`useSvelteFlow().getViewport()` or the `viewport` binding). */
+    viewport?: CanvasViewport;
+    /** Colour of edge and centre guides. */
+    color?: string;
+    /** Colour of equal-spacing guides. */
+    spacingColor?: string;
+    class?: string;
+}
+declare const CanvasGuidesLayer: import("svelte").Component<Props, {}, "">;
+type CanvasGuidesLayer = ReturnType<typeof CanvasGuidesLayer>;
+export default CanvasGuidesLayer;
+//# sourceMappingURL=CanvasGuidesLayer.svelte.d.ts.map

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

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

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

@@ -0,0 +1,63 @@
+import { type ArrangeShortcutBinding, type CanvasArrangeAction, type CanvasArrangeControllerOptions, type GuideLine } from '@pixerate/editor/canvas';
+import type { CanvasNode } from './types.js';
+type CoreOptions = CanvasArrangeControllerOptions<any>;
+export interface CreateCanvasArrangeOptions<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 Freeform-style arrangement: align, distribute, make same size,
+ * lock / unlock, layer order and smart guides with snap-to-shape while dragging.
+ *
+ * Actions act on `getSelectedIds()` (default: selected nodes) when called without ids and
+ * are recorded as single undoable steps when a `HistoryManager` is passed as `history`.
+ *
+ * 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>`.
+ */
+export declare function createCanvasArrange<TNode extends CanvasNode = CanvasNode>(options: CreateCanvasArrangeOptions<TNode>): {
+    guides: GuideLine[];
+    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[];
+    matchSize(dimension: import("@pixerate/editor/canvas").SizeDimension, ids?: Iterable<string>, sizeOptions?: import("@pixerate/editor/canvas").MatchSizeOptions): import("@pixerate/editor/canvas").CanvasNodeUpdate[];
+    reorder(operation: import("@pixerate/editor/canvas").ZOrderOperation, ids?: Iterable<string>): import("@pixerate/editor/canvas").CanvasNodeUpdate[];
+    bringForward: (ids?: Iterable<string>) => import("@pixerate/editor/canvas").CanvasNodeUpdate[];
+    sendBackward: (ids?: Iterable<string>) => import("@pixerate/editor/canvas").CanvasNodeUpdate[];
+    bringToFront: (ids?: Iterable<string>) => import("@pixerate/editor/canvas").CanvasNodeUpdate[];
+    sendToBack: (ids?: Iterable<string>) => import("@pixerate/editor/canvas").CanvasNodeUpdate[];
+    lock: (ids?: Iterable<string>) => string[];
+    unlock: (ids?: Iterable<string>) => string[];
+    toggleLock(ids?: Iterable<string>): string[];
+    isLocked: (id: string) => boolean;
+    runAction(action: CanvasArrangeAction): boolean;
+    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[];
+    endDrag(): void;
+};
+export type CanvasArrange<TNode extends CanvasNode = CanvasNode> = ReturnType<typeof createCanvasArrange<TNode>>;
+export interface CanvasArrangeShortcutsOptions {
+    arrange: {
+        runAction: (action: CanvasArrangeAction) => boolean;
+    };
+    /** Scenes controller for PageDown / PageUp (next / previous scene). */
+    scenes?: {
+        next: () => unknown;
+        previous: () => unknown;
+    };
+    targetElement?: HTMLElement | Window;
+    bindings?: readonly ArrangeShortcutBinding[];
+}
+/**
+ * Attaches the arrange keyboard shortcuts (see `DEFAULT_ARRANGE_SHORTCUTS`). Shortcuts are
+ * ignored while typing in inputs, textareas, contenteditable or ProseMirror editors.
+ *
+ * @returns A cleanup function removing the listener.
+ */
+export declare function createCanvasArrangeShortcuts(options: CanvasArrangeShortcutsOptions): () => void;
+export {};
+//# sourceMappingURL=createCanvasArrange.svelte.d.ts.map