@pixerate/editor-svelte 0.37.0 → 0.39.0

package/dist/vector/VectorBlendControls.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import {
+    VECTOR_BLEND_SPACINGS,
+    VECTOR_BLEND_SPACING_LABELS,
+    applyVectorBlendOptions,
+    getVectorBlendControls,
+    type VectorBlendSpacing,
+    type VectorEditorController
+  } from '@pixerate/editor/vector';
+  import { vectorStateOf } from './subscribe.svelte.js';
+  import { vectorButtonClass } from './styles.js';
+
+  /** Blend buttons and options: they edit the selected blends and the options new blends get. */
+  let { controller }: { controller: VectorEditorController } = $props();
+
+  const store = vectorStateOf(() => controller);
+  const blend = $derived(getVectorBlendControls(store.current));
+  const o = $derived(blend.options);
+  const selected = $derived(blend.ids.length > 0);
+</script>
+
+<div class="ml-1 flex items-center gap-1" role="group" aria-label="Blend" data-vector-blend-controls="">
+  <button type="button" data-vector-blend-action="make" class={vectorButtonClass} title="Make Blend" aria-label="Make Blend" disabled={!blend.canBlend} onclick={() => controller.blend()}>⧓</button>
+  <select
+    aria-label="Blend spacing"
+    class="h-7 rounded border border-border bg-background px-1 text-xs"
+    value={o.spacing}
+    onchange={(e) => applyVectorBlendOptions(controller, { spacing: e.currentTarget.value as VectorBlendSpacing })}
+  >
+    {#each VECTOR_BLEND_SPACINGS as sp (sp)}
+      <option value={sp}>{VECTOR_BLEND_SPACING_LABELS[sp]}</option>
+    {/each}
+  </select>
+  {#if o.spacing !== 'smoothColor'}
+    <input
+      type="number"
+      min={o.spacing === 'steps' ? 1 : 0.5}
+      step="1"
+      aria-label={o.spacing === 'steps' ? 'Blend steps' : 'Blend distance'}
+      class="h-7 w-16 rounded border border-border bg-background px-1.5 text-xs"
+      value={o.spacing === 'steps' ? o.steps : o.distance}
+      oninput={(e) => {
+        const n = parseFloat(e.currentTarget.value);
+        if (!Number.isFinite(n) || n <= 0) return;
+        applyVectorBlendOptions(controller, o.spacing === 'steps' ? { steps: n } : { distance: n });
+      }}
+    />
+  {/if}
+  <button
+    type="button"
+    data-vector-blend-action="orient"
+    class={vectorButtonClass}
+    aria-pressed={o.orientToSpine}
+    title="Orient steps to the spine"
+    aria-label="Orient to spine"
+    onclick={() => applyVectorBlendOptions(controller, { orientToSpine: !o.orientToSpine })}>⤿</button
+  >
+  <button
+    type="button"
+    data-vector-blend-action="spine"
+    class={vectorButtonClass}
+    title="Replace Spine (select a blend and a path)"
+    aria-label="Replace Spine"
+    disabled={!blend.canReplaceSpine}
+    onclick={() => controller.replaceBlendSpine()}>⌇</button
+  >
+  <button type="button" data-vector-blend-action="expand" class={vectorButtonClass} title="Expand Blend" aria-label="Expand Blend" disabled={!selected} onclick={() => controller.expandBlend()}>⧉</button>
+  <button type="button" data-vector-blend-action="release" class={vectorButtonClass} title="Release Blend" aria-label="Release Blend" disabled={!selected} onclick={() => controller.releaseBlend()}>⧄</button>
+</div>

package/dist/vector/VectorBlendControls.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type VectorEditorController } from '@pixerate/editor/vector';
+type $$ComponentProps = {
+    controller: VectorEditorController;
+};
+declare const VectorBlendControls: import("svelte").Component<$$ComponentProps, {}, "">;
+type VectorBlendControls = ReturnType<typeof VectorBlendControls>;
+export default VectorBlendControls;
+//# sourceMappingURL=VectorBlendControls.svelte.d.ts.map

package/dist/vector/VectorBlendControls.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VectorBlendControls.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorBlendControls.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAMH,KAAK,sBAAsB,EAC5B,MAAM,yBAAyB,CAAC;AAIlC,KAAK,gBAAgB,GAAI;IAAE,UAAU,EAAE,sBAAsB,CAAA;CAAE,CAAC;AAqCjE,QAAA,MAAM,mBAAmB,sDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/vector/VectorCanvas.svelte

@@ -228,6 +228,25 @@
         <circle cx={w.x} cy={w.y} r={1.5} fill={accentColor} />
       </g>
     {/each}
+    {#each overlay.blend.spines as sp (sp.id)}
+      <g data-vector-blend-spine={sp.id} data-replaced={sp.replaced || undefined}>
+        <path d={sp.d} fill="none" stroke={accentColor} stroke-dasharray="4 3" />
+        {#each sp.keys as k, i (i)}
+          <circle cx={k.x} cy={k.y} r={THEME.handleRadius} fill={THEME.handleFill} stroke={accentColor} />
+        {/each}
+      </g>
+    {/each}
+    {#if overlay.blend.start}
+      <g data-vector-blend-start="">
+        <path d={overlay.blend.start.d} fill="none" stroke={accentColor} stroke-width="2" />
+        {#if overlay.blend.start.anchor}
+          <circle cx={overlay.blend.start.anchor.x} cy={overlay.blend.start.anchor.y} r={THEME.handleRadius + 1} fill={accentColor} />
+        {/if}
+      </g>
+    {/if}
+    {#each overlay.blend.anchors as a, i (i)}
+      <rect data-vector-blend-anchor={i} x={a.x - as / 2} y={a.y - as / 2} width={as} height={as} fill={a.hovered ? accentColor : THEME.handleFill} stroke={accentColor} />
+    {/each}
     {#if overlay.widthSpot}
       <g data-vector-width-spot="">
         <line x1={overlay.widthSpot.left.x} y1={overlay.widthSpot.left.y} x2={overlay.widthSpot.right.x} y2={overlay.widthSpot.right.y} stroke={accentColor} stroke-dasharray="3 2" />

package/dist/vector/VectorCanvas.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VectorCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorCanvas.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,EAQH,KAAK,sBAAsB,EAC5B,MAAM,yBAAyB,CAAC;AAOjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,mFAAmF;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAkPH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"VectorCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorCanvas.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,EAQH,KAAK,sBAAsB,EAC5B,MAAM,yBAAyB,CAAC;AAOjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,mFAAmF;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAqQH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/vector/VectorEffectsPanel.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+  import {
+    VECTOR_EFFECT_MENU,
+    getVectorEffectsPanel,
+    type VectorEditorController,
+    type VectorEffectsPanelItem,
+    type VectorEffectType
+  } from '@pixerate/editor/vector';
+  import { vectorStateOf } from './subscribe.svelte.js';
+
+  /**
+   * The live path effects of the selection: add effects (to every selected node), and for one
+   * selected node list its stack (applied top to bottom) to turn on and off, reorder, remove and
+   * edit. Slider drags and typing are one undo step each. Expand Appearance bakes the effects and
+   * live booleans into plain paths.
+   */
+  interface Props {
+    controller: VectorEditorController;
+    class?: string;
+  }
+
+  let { controller, class: className = '' }: Props = $props();
+
+  const store = vectorStateOf(() => controller);
+  const view = $derived(store.current);
+  const panel = $derived(getVectorEffectsPanel(view));
+
+  const buttonClass =
+    'inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40';
+  const numberClass = 'h-7 w-16 rounded border border-border bg-background px-1.5 text-xs';
+  const selectClass = 'h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs';
+  /** Parameter names sit on their own line in a narrow panel, the controls below. */
+  const labelClass = 'w-full truncate text-[11px] text-muted-foreground';
+
+  const end = () => controller.endMergedEdit();
+  function set(e: VectorEffectsPanelItem, key: string, value: unknown, merge: boolean) {
+    if (panel?.nodeId) controller.updateEffect(panel.nodeId, e.id, { params: { [key]: value } }, { merge });
+  }
+  function setNumber(e: VectorEffectsPanelItem, key: string, raw: string) {
+    const n = parseFloat(raw);
+    if (Number.isFinite(n)) set(e, key, n, true);
+  }
+  function setAxis(e: VectorEffectsPanelItem, key: string, axis: 'x' | 'y', raw: string) {
+    const n = parseFloat(raw);
+    const v = vecOf(e, key);
+    if (Number.isFinite(n)) set(e, key, { ...v, [axis]: n }, true);
+  }
+  const vecOf = (e: VectorEffectsPanelItem, key: string) => (e.params[key] as { x: number; y: number } | undefined) ?? { x: 0, y: 0 };
+  const round = (n: number) => Math.round(n * 1000) / 1000;
+</script>
+
+{#if panel}
+  <div class="space-y-2 {className}" data-vector-effects="" aria-label="Effects">
+    <div class="flex items-center gap-2">
+      <span class="w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">Effects</span>
+      <select
+        aria-label="Add effect"
+        class={selectClass}
+        value=""
+        onchange={(ev) => {
+          const type = ev.currentTarget.value;
+          ev.currentTarget.value = '';
+          if (type) controller.addEffect(type as VectorEffectType);
+        }}
+      >
+        <option value="">Add effect…</option>
+        {#each VECTOR_EFFECT_MENU as m (m.type)}<option value={m.type}>{m.label}</option>{/each}
+      </select>
+      <button type="button" class={buttonClass} title="Expand Appearance" aria-label="Expand Appearance" disabled={!panel.expandable} onclick={() => controller.expandAppearance()}>
+        Expand
+      </button>
+    </div>
+    {#if panel.count > 1}<p class="text-[11px] text-muted-foreground">Select one object to edit its effects.</p>{/if}
+    {#if panel.nodeId}
+      {@const nodeId = panel.nodeId}
+      {#each panel.effects as e, i (e.id)}
+        <div class="space-y-1 rounded border border-border p-1.5" data-vector-effect={e.id} data-vector-effect-type={e.type}>
+          <div class="flex items-center gap-1">
+            <label class="flex min-w-0 flex-1 items-center gap-1.5 text-xs font-medium text-foreground">
+              <input type="checkbox" aria-label="{e.label} on" checked={e.enabled} onchange={(ev) => controller.updateEffect(nodeId, e.id, { enabled: ev.currentTarget.checked })} />
+              <span class="truncate">{e.label}</span>
+            </label>
+            <button type="button" class={buttonClass} title="Move up" aria-label="Move {e.label} up" disabled={i === 0} onclick={() => controller.moveEffect(nodeId, e.id, i - 1)}>↑</button>
+            <button
+              type="button"
+              class={buttonClass}
+              title="Move down"
+              aria-label="Move {e.label} down"
+              disabled={i === panel.effects.length - 1}
+              onclick={() => controller.moveEffect(nodeId, e.id, i + 1)}>↓</button
+            >
+            <button type="button" class={buttonClass} title="Remove" aria-label="Remove {e.label}" onclick={() => controller.removeEffect(nodeId, e.id)}>×</button>
+          </div>
+          {#each e.specs as spec (spec.key)}
+            {#if spec.kind === 'number'}
+              {@const value = Number(e.params[spec.key] ?? 0)}
+              <label class="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-foreground" data-vector-effect-param={spec.key}>
+                <span class={labelClass}>{spec.label}</span>
+                {#if spec.slider}
+                  <input
+                    type="range"
+                    min={spec.min}
+                    max={spec.max}
+                    step={spec.step}
+                    aria-label="{e.label} {spec.label} slider"
+                    class="h-4 min-w-0 flex-1 accent-primary"
+                    {value}
+                    oninput={(ev) => setNumber(e, spec.key, ev.currentTarget.value)}
+                    onpointerup={end}
+                    onkeyup={end}
+                    onblur={end}
+                  />
+                {/if}
+                <input
+                  type="number"
+                  min={spec.min}
+                  max={spec.max}
+                  step={spec.step}
+                  aria-label="{e.label} {spec.label}"
+                  class={numberClass}
+                  value={round(value)}
+                  oninput={(ev) => setNumber(e, spec.key, ev.currentTarget.value)}
+                  onblur={end}
+                />
+              </label>
+            {:else if spec.kind === 'vec2'}
+              {@const v = vecOf(e, spec.key)}
+              <div class="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-foreground" data-vector-effect-param={spec.key}>
+                <span class={labelClass}>{spec.label}</span>
+                {#each ['x', 'y'] as const as axis (axis)}
+                  <input
+                    type="number"
+                    step={spec.step}
+                    aria-label="{e.label} {spec.label} {axis}"
+                    class={numberClass}
+                    value={round(v[axis])}
+                    oninput={(ev) => setAxis(e, spec.key, axis, ev.currentTarget.value)}
+                    onblur={end}
+                  />
+                {/each}
+              </div>
+            {:else if spec.kind === 'boolean'}
+              <label class="flex items-center gap-2 text-xs text-foreground" data-vector-effect-param={spec.key}>
+                <span class="min-w-0 flex-1 truncate">{spec.label}</span>
+                <input type="checkbox" aria-label="{e.label} {spec.label}" checked={!!e.params[spec.key]} onchange={(ev) => set(e, spec.key, ev.currentTarget.checked, false)} />
+              </label>
+            {:else}
+              <label class="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-foreground" data-vector-effect-param={spec.key}>
+                <span class={labelClass}>{spec.label}</span>
+                <select aria-label="{e.label} {spec.label}" class={selectClass} value={String(e.params[spec.key] ?? '')} onchange={(ev) => set(e, spec.key, ev.currentTarget.value, false)}>
+                  {#each spec.options as o (o.value)}<option value={o.value}>{o.label}</option>{/each}
+                </select>
+              </label>
+            {/if}
+          {/each}
+        </div>
+      {/each}
+    {/if}
+  </div>
+{/if}

package/dist/vector/VectorEffectsPanel.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type VectorEditorController } from '@pixerate/editor/vector';
+/**
+ * The live path effects of the selection: add effects (to every selected node), and for one
+ * selected node list its stack (applied top to bottom) to turn on and off, reorder, remove and
+ * edit. Slider drags and typing are one undo step each. Expand Appearance bakes the effects and
+ * live booleans into plain paths.
+ */
+interface Props {
+    controller: VectorEditorController;
+    class?: string;
+}
+declare const VectorEffectsPanel: import("svelte").Component<Props, {}, "">;
+type VectorEffectsPanel = ReturnType<typeof VectorEffectsPanel>;
+export default VectorEffectsPanel;
+//# sourceMappingURL=VectorEffectsPanel.svelte.d.ts.map

package/dist/vector/VectorEffectsPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VectorEffectsPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorEffectsPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAGH,KAAK,sBAAsB,EAG5B,MAAM,yBAAyB,CAAC;AAIjC;;;;;GAKG;AACH,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0GH,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/vector/VectorStylePanel.svelte

@@ -17,6 +17,7 @@
   } from '@pixerate/editor/vector';
   import { vectorStateOf } from './subscribe.svelte.js';
   import { vectorButtonClass } from './styles.js';
+  import VectorEffectsPanel from './VectorEffectsPanel.svelte';
 
   interface Props {
     controller: VectorEditorController;
@@ -217,5 +218,6 @@
         oninput={(e) => apply({ opacity: parseFloat(e.currentTarget.value) })}
       />
     </label>
+    <VectorEffectsPanel {controller} />
   {/if}
 </div>

package/dist/vector/VectorStylePanel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VectorStylePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorStylePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAYH,KAAK,sBAAsB,EAG5B,MAAM,yBAAyB,CAAC;AAKjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyJH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"VectorStylePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorStylePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAYH,KAAK,sBAAsB,EAG5B,MAAM,yBAAyB,CAAC;AAMjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2JH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/vector/VectorToolbar.svelte

@@ -13,6 +13,7 @@
   } from '@pixerate/editor/vector';
   import { vectorStateOf } from './subscribe.svelte.js';
   import { vectorButtonClass } from './styles.js';
+  import VectorBlendControls from './VectorBlendControls.svelte';
 
   interface Props {
     controller: VectorEditorController;
@@ -30,10 +31,15 @@
      * those tools are active (default `true`).
      */
     showPathEdit?: boolean;
+    /**
+     * Blend: Make Blend, spacing (steps, distance or smooth colour), steps / distance, orient to
+     * spine, Replace Spine, Expand and Release (default `true`).
+     */
+    showBlend?: boolean;
     class?: string;
   }
 
-  let { controller, tools = VECTOR_TOOLS, showHistory = true, showArrange = true, showSnap = true, showPathEdit = true, class: className = '' }: Props = $props();
+  let { controller, tools = VECTOR_TOOLS, showHistory = true, showArrange = true, showSnap = true, showPathEdit = true, showBlend = true, class: className = '' }: Props = $props();
 
   const snapTitle = 'Snap to objects';
   const modKey = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform ?? '') ? '⌘' : 'Ctrl';
@@ -44,11 +50,14 @@
   const points = $derived(view.tool === 'direct' ? view.selectedAnchors.length : 0);
   const groupSelected = $derived(view.selection.some((id) => controller.getNode(id)?.type === 'group'));
 
+  // Live booleans keep the operands editable; a lone live group or its operands take the operation too.
+  let live = $state(false);
+  const booleanDisabled = $derived(live ? count < 1 : count < 2);
   const combine = $derived([
-    { label: '∪', title: 'Union', run: () => controller.booleanOp('union'), disabled: count < 2 },
-    { label: '−', title: 'Subtract', run: () => controller.booleanOp('subtract'), disabled: count < 2 },
-    { label: '∩', title: 'Intersect', run: () => controller.booleanOp('intersect'), disabled: count < 2 },
-    { label: '⊻', title: 'Exclude', run: () => controller.booleanOp('exclude'), disabled: count < 2 },
+    { label: '∪', title: 'Union', run: () => controller.booleanOp('union', { live }), disabled: booleanDisabled },
+    { label: '−', title: 'Subtract', run: () => controller.booleanOp('subtract', { live }), disabled: booleanDisabled },
+    { label: '∩', title: 'Intersect', run: () => controller.booleanOp('intersect', { live }), disabled: booleanDisabled },
+    { label: '⊻', title: 'Exclude', run: () => controller.booleanOp('exclude', { live }), disabled: booleanDisabled },
     { label: 'G', title: 'Group', run: () => controller.group(), disabled: count < 1 },
     { label: 'U', title: 'Ungroup', run: () => controller.ungroup(), disabled: !groupSelected }
   ]);
@@ -182,8 +191,22 @@
       {/if}
     </div>
   {/if}
+  {#if showBlend}
+    <VectorBlendControls {controller} />
+  {/if}
   {#if showArrange}
     <div class="ml-1 flex items-center gap-1" role="group" aria-label="Combine">
+      <button
+        type="button"
+        data-vector-live-boolean=""
+        class={vectorButtonClass}
+        aria-pressed={live}
+        title="Live booleans: keep the shapes editable"
+        aria-label="Live booleans"
+        onclick={() => (live = !live)}
+      >
+        Live
+      </button>
       {#each combine as item (item.title)}{@render action(item)}{/each}
     </div>
     <div class="ml-1 flex items-center gap-1" role="group" aria-label="Pathfinder">

package/dist/vector/VectorToolbar.svelte.d.ts

@@ -15,6 +15,11 @@ interface Props {
      * those tools are active (default `true`).
      */
     showPathEdit?: boolean;
+    /**
+     * Blend: Make Blend, spacing (steps, distance or smooth colour), steps / distance, orient to
+     * spine, Replace Spine, Expand and Release (default `true`).
+     */
+    showBlend?: boolean;
     class?: string;
 }
 declare const VectorToolbar: import("svelte").Component<Props, {}, "">;

package/dist/vector/VectorToolbar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VectorToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EASH,KAAK,sBAAsB,EAC3B,KAAK,UAAU,EAChB,MAAM,yBAAyB,CAAC;AAKjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsHH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"VectorToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EASH,KAAK,sBAAsB,EAC3B,KAAK,UAAU,EAChB,MAAM,yBAAyB,CAAC;AAMjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgIH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/vector/index.d.ts

@@ -6,6 +6,7 @@ export { default as VectorCanvas } from "./VectorCanvas.svelte";
 export { default as VectorWidthPointEditor } from "./VectorWidthPointEditor.svelte";
 export { default as VectorToolbar } from "./VectorToolbar.svelte";
 export { default as VectorStylePanel } from "./VectorStylePanel.svelte";
+export { default as VectorEffectsPanel } from "./VectorEffectsPanel.svelte";
 export { default as VectorSceneNodes } from "./VectorSceneNodes.svelte";
 export { default as VectorGradientDefs } from "./VectorGradientDefs.svelte";
 export * from "./createVectorEditor.svelte.js";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vector/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,cAAc,gCAAgC,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,cAAc,aAAa,CAAC;AAE5B,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vector/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,cAAc,gCAAgC,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,cAAc,aAAa,CAAC;AAE5B,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/dist/vector/index.js

@@ -3,6 +3,7 @@ export { default as VectorCanvas } from "./VectorCanvas.svelte";
 export { default as VectorWidthPointEditor } from "./VectorWidthPointEditor.svelte";
 export { default as VectorToolbar } from "./VectorToolbar.svelte";
 export { default as VectorStylePanel } from "./VectorStylePanel.svelte";
+export { default as VectorEffectsPanel } from "./VectorEffectsPanel.svelte";
 export { default as VectorSceneNodes } from "./VectorSceneNodes.svelte";
 export { default as VectorGradientDefs } from "./VectorGradientDefs.svelte";
 export * from "./createVectorEditor.svelte.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.37.0",
+  "version": "0.39.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -107,7 +107,7 @@
     "@tiptap/extension-bubble-menu": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@pixerate/editor": "0.40.0"
+    "@pixerate/editor": "0.42.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",