@pixerate/editor-svelte 0.22.0 → 0.24.0

package/README.md

@@ -69,14 +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`, `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/spreadsheet` | `SpreadsheetEditor`, `FormulaBar`, `FormulaHints`, `SpreadsheetContextMenu`, `SpreadsheetGroupRow`, `SheetTabs`, `NameManager`, `createReactiveSpreadsheet` (also re-exported from the root entry) |
+| `@pixerate/editor-svelte/image-editor` | `ImageEditor`, `createReactiveImageEditor`: crop, rotate/flip, adjustments, annotations, depth masks, Select & Mask (`SelectionOptionsBar`, `RefineEdgePanel`: magic wand, marquees, lasso, Refine Edge, layer 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/StylesGallery.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+  import type { Editor } from "@tiptap/core";
+  import { createParagraphStyles, type SvelteParagraphStyles } from "./paragraphStyles.svelte.js";
+
+  interface Props {
+    editor?: Editor | null;
+    /**
+     * `dropdown` (default): a button showing the current style that opens the
+     * list. `gallery`: the styles are always shown, in a row.
+     */
+    variant?: "dropdown" | "gallery";
+    /** List every available paragraph style instead of the gallery (quick) styles. */
+    showAllStyles?: boolean;
+    /** Show the "Update to match selection" and "New style from selection" actions. Defaults to `true`. */
+    showActions?: boolean;
+    /** Preview each style's font, weight, style and color in its entry. Defaults to `true`. */
+    preview?: boolean;
+    class?: string;
+    itemClass?: string;
+    activeItemClass?: string;
+    /** Called after a style is applied, updated or created. */
+    onchange?: (event: { type: "apply" | "update" | "create"; id: string }) => void;
+  }
+
+  let {
+    editor = null,
+    variant = "dropdown",
+    showAllStyles = false,
+    showActions = true,
+    preview = true,
+    class: className = "relative inline-flex flex-wrap items-center gap-1 text-sm",
+    itemClass = "rounded px-2 py-1 text-left text-xs text-foreground hover:bg-muted",
+    activeItemClass = "bg-primary/10 text-primary",
+    onchange,
+  }: Props = $props();
+
+  let styles = $state.raw<SvelteParagraphStyles>(createParagraphStyles(null));
+  $effect(() => {
+    const s = createParagraphStyles(editor);
+    styles = s;
+    return () => s.destroy();
+  });
+
+  let open = $state(false);
+  let creating = $state(false);
+  let name = $state("");
+
+  let list = $derived(showAllStyles ? styles.current.styles : styles.current.gallery);
+  let current = $derived(styles.currentStyle);
+  let expanded = $derived(variant === "gallery" || open);
+
+  function close() {
+    if (variant === "dropdown") open = false;
+    creating = false;
+    name = "";
+  }
+
+  function previewStyle(id: string): string | undefined {
+    if (!preview || !styles.registry) return undefined;
+    return Object.entries(styles.registry.previewDeclarations(id))
+      .map(([property, value]) => `${property}: ${value}`)
+      .join("; ");
+  }
+
+  function apply(id: string) {
+    if (styles.apply(id)) onchange?.({ type: "apply", id });
+    close();
+  }
+
+  function update() {
+    if (current && styles.updateFromSelection(current.id)) {
+      onchange?.({ type: "update", id: current.id });
+    }
+    close();
+  }
+
+  function create(event: SubmitEvent) {
+    event.preventDefault();
+    const id = name.trim() ? styles.createFromSelection(name) : null;
+    if (id) onchange?.({ type: "create", id });
+    close();
+  }
+
+  const keepSelection = (event: MouseEvent) => event.preventDefault();
+</script>
+
+<div class={className} role="group" aria-label="Paragraph styles" data-styles-gallery={variant}>
+  {#if variant === "dropdown"}
+    <button
+      type="button"
+      class={itemClass}
+      aria-haspopup="listbox"
+      aria-expanded={open}
+      disabled={!editor || !styles.registry}
+      onmousedown={keepSelection}
+      onclick={() => (open = !open)}
+    >
+      {current?.name ?? "Styles"} ▾
+    </button>
+  {/if}
+  {#if expanded}
+    <div
+      class={variant === "dropdown"
+        ? "absolute left-0 top-full z-20 mt-1 flex min-w-[12rem] flex-col gap-0.5 rounded-md border border-border bg-background p-1 shadow-md"
+        : "flex flex-wrap items-center gap-1"}
+    >
+      <div
+        role="listbox"
+        aria-label="Styles"
+        class={variant === "dropdown" ? "flex flex-col gap-0.5" : "flex flex-wrap gap-1"}
+      >
+        {#each list as style (style.id)}
+          {@const active = style.id === styles.current.currentStyleId}
+          <button
+            type="button"
+            role="option"
+            aria-selected={active}
+            data-style-id={style.id}
+            class={active ? `${itemClass} ${activeItemClass}` : itemClass}
+            style={previewStyle(style.id)}
+            onmousedown={keepSelection}
+            onclick={() => apply(style.id)}
+          >
+            {style.name}
+          </button>
+        {/each}
+      </div>
+      {#if showActions}
+        <div
+          class={variant === "dropdown"
+            ? "mt-1 flex flex-col gap-0.5 border-t border-border pt-1"
+            : "flex items-center gap-1"}
+        >
+          <button
+            type="button"
+            class={itemClass}
+            disabled={!current}
+            onmousedown={keepSelection}
+            onclick={update}
+          >
+            {current ? `Update ${current.name} to match selection` : "Update to match selection"}
+          </button>
+          {#if creating}
+            <form class="flex items-center gap-1" onsubmit={create}>
+              <!-- svelte-ignore a11y_autofocus -->
+              <input
+                aria-label="New style name"
+                class="w-32 rounded border border-border bg-background px-1 py-0.5 text-xs"
+                bind:value={name}
+                autofocus
+              />
+              <button type="submit" class={itemClass} disabled={!name.trim()}>Create</button>
+            </form>
+          {:else}
+            <button
+              type="button"
+              class={itemClass}
+              disabled={!editor || !styles.registry}
+              onmousedown={keepSelection}
+              onclick={() => (creating = true)}
+            >
+              New style from selection
+            </button>
+          {/if}
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>

package/dist/StylesGallery.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Editor } from "@tiptap/core";
+interface Props {
+    editor?: Editor | null;
+    /**
+     * `dropdown` (default): a button showing the current style that opens the
+     * list. `gallery`: the styles are always shown, in a row.
+     */
+    variant?: "dropdown" | "gallery";
+    /** List every available paragraph style instead of the gallery (quick) styles. */
+    showAllStyles?: boolean;
+    /** Show the "Update to match selection" and "New style from selection" actions. Defaults to `true`. */
+    showActions?: boolean;
+    /** Preview each style's font, weight, style and color in its entry. Defaults to `true`. */
+    preview?: boolean;
+    class?: string;
+    itemClass?: string;
+    activeItemClass?: string;
+    /** Called after a style is applied, updated or created. */
+    onchange?: (event: {
+        type: "apply" | "update" | "create";
+        id: string;
+    }) => void;
+}
+declare const StylesGallery: import("svelte").Component<Props, {}, "">;
+type StylesGallery = ReturnType<typeof StylesGallery>;
+export default StylesGallery;
+//# sourceMappingURL=StylesGallery.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StylesGallery.svelte.d.ts","sourceRoot":"","sources":["../src/StylesGallery.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAIzC,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACjC,kFAAkF;IAClF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uGAAuG;IACvG,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACjF;AAgHH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,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/TokenBindingPicker.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import {
+		bindCanvasToken,
+		getBindableTokenProperties,
+		getEffectiveTokenModes,
+		getNodeTokenBindings,
+		getTokensForProperty,
+		type CanvasTokenOptions
+	} from '@pixerate/editor/canvas';
+	import { resolveToken, type TokenState } from '@pixerate/editor/tokens';
+	import type { CanvasNode } from './types.js';
+
+	interface Props {
+		state: TokenState;
+		nodes: CanvasNode[];
+		/** Nodes to bind (the first one decides which properties are listed). */
+		selectedIds: readonly string[];
+		/** Receives the nodes with the binding applied and resolved. */
+		onchange: (nodes: CanvasNode[]) => void;
+		options?: CanvasTokenOptions;
+		/** Limit to these property keys (in this order). */
+		properties?: readonly string[];
+		onerror?: (error: Error) => void;
+		class?: string;
+	}
+
+	let { state, nodes, selectedIds, onchange, options = {}, properties, onerror, class: className = '' }: Props = $props();
+
+	const selected = $derived(nodes.filter((n) => selectedIds.includes(n.id)));
+	const first = $derived(selected[0]);
+	const rows = $derived.by(() => {
+		if (!first) return [];
+		const all = getBindableTokenProperties(first as any, options);
+		return properties ? properties.map((key) => all.find((p) => p.key === key)).filter((p) => !!p) : all;
+	});
+	const modes = $derived(first ? getEffectiveTokenModes(first as any, nodes as any, state, options) : {});
+
+	function valueOf(key: string) {
+		const ids = new Set(selected.map((n) => getNodeTokenBindings(n as any)[key] ?? ''));
+		return ids.size === 1 ? [...ids][0] : '__mixed';
+	}
+
+	function change(key: string, id: string) {
+		try {
+			onchange(bindCanvasToken(nodes as any[], selectedIds, key, id || null, state, options));
+		} catch (error) {
+			onerror?.(error as Error);
+		}
+	}
+</script>
+
+{#if first}
+	<div data-token-binding-picker="" class="flex flex-col gap-1 text-xs text-foreground {className}">
+		{#each rows as property (property!.key)}
+			{@const value = valueOf(property!.key)}
+			{@const resolved = value && value !== '__mixed' ? resolveToken(state, value, modes) : null}
+			<label class="flex items-center gap-2" data-token-property={property!.key}>
+				<span class="w-28 shrink-0 text-muted-foreground">{property!.label}</span>
+				<select
+					aria-label="{property!.label} variable"
+					class="min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs"
+					{value}
+					onchange={(e) => change(property!.key, e.currentTarget.value)}
+				>
+					{#if value === '__mixed'}<option value="__mixed">Mixed</option>{/if}
+					<option value="">None</option>
+					{#each getTokensForProperty(state, property!, first as any) as v (v.id)}
+						{@const collection = state.collections.find((c) => c.id === v.collectionId)}
+						<option value={v.id}>{v.name}{collection && state.collections.length > 1 ? ` (${collection.name})` : ''}</option>
+					{/each}
+				</select>
+				<span class="w-16 shrink-0 truncate text-right text-muted-foreground" data-token-resolved="">
+					{#if resolved?.ok}
+						{#if property!.type === 'color'}
+							<span
+								class="inline-block h-3 w-3 rounded border border-border align-middle"
+								style:background={String(resolved.value)}
+								title={String(resolved.value)}
+							></span>
+						{:else}
+							{String(resolved.value)}
+						{/if}
+					{:else if resolved}
+						<span title={resolved.message}>⚠</span>
+					{/if}
+				</span>
+			</label>
+		{/each}
+		{#if state.collections.length === 0}
+			<p class="text-muted-foreground">No variables yet.</p>
+		{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,20 @@
+import { type CanvasTokenOptions } from '@pixerate/editor/canvas';
+import { type TokenState } from '@pixerate/editor/tokens';
+import type { CanvasNode } from './types.js';
+interface Props {
+    state: TokenState;
+    nodes: CanvasNode[];
+    /** Nodes to bind (the first one decides which properties are listed). */
+    selectedIds: readonly string[];
+    /** Receives the nodes with the binding applied and resolved. */
+    onchange: (nodes: CanvasNode[]) => void;
+    options?: CanvasTokenOptions;
+    /** Limit to these property keys (in this order). */
+    properties?: readonly string[];
+    onerror?: (error: Error) => void;
+    class?: string;
+}
+declare const TokenBindingPicker: import("svelte").Component<Props, {}, "">;
+type TokenBindingPicker = ReturnType<typeof TokenBindingPicker>;
+export default TokenBindingPicker;
+//# sourceMappingURL=TokenBindingPicker.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TokenBindingPicker.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/TokenBindingPicker.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAML,KAAK,kBAAkB,EACvB,MAAM,yBAAyB,CAAC;AAClC,OAAO,EAAgB,KAAK,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG5C,UAAU,KAAK;IACd,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,yEAAyE;IACzE,WAAW,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,gEAAgE;IAChE,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,oDAAoD;IACpD,UAAU,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAoEF,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}