@pixerate/editor-svelte 0.38.0 → 0.40.0

package/dist/vector/VectorCanvas.svelte

@@ -16,6 +16,7 @@
     type VectorEditorController
   } from '@pixerate/editor/vector';
   import VectorGradientDefs from './VectorGradientDefs.svelte';
+  import VectorGradientAnnotator from './VectorGradientAnnotator.svelte';
   import VectorSceneNodes from './VectorSceneNodes.svelte';
   import VectorWidthPointEditor from './VectorWidthPointEditor.svelte';
   import { vectorStateOf } from './subscribe.svelte.js';
@@ -247,6 +248,7 @@
     {#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.gradient}<VectorGradientAnnotator annotator={overlay.gradient} {accentColor} />{/if}
     {#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;AAqQH,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;AAQjC,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;AAuQH,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/VectorGradientAnnotator.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { VECTOR_OVERLAY_THEME as THEME, vectorDiamondPath, type VectorRenderGradientAnnotator } from '@pixerate/editor/vector';
+
+  interface Props {
+    /** The gradient tool's annotator (screen space) from `getVectorOverlayRenderData`. */
+    annotator: VectorRenderGradientAnnotator;
+    accentColor?: string;
+  }
+
+  let { annotator: g, accentColor = THEME.accent }: Props = $props();
+  const r = THEME.handleRadius + 1.5;
+</script>
+
+<g data-vector-gradient-annotator={g.type}>
+  {#if g.extent}<path data-vector-gradient-extent="" d={g.extent} fill="none" stroke={accentColor} stroke-dasharray="4 3" />{/if}
+  <line x1={g.start.x} y1={g.start.y} x2={g.end.x} y2={g.end.y} stroke="#ffffff" stroke-width="3" />
+  <line data-vector-gradient-bar="" x1={g.start.x} y1={g.start.y} x2={g.end.x} y2={g.end.y} stroke={accentColor} />
+  {#if g.aspect}<line x1={g.start.x} y1={g.start.y} x2={g.aspect.x} y2={g.aspect.y} stroke={accentColor} stroke-dasharray="2 2" />{/if}
+  <circle data-vector-gradient-handle="start" cx={g.start.x} cy={g.start.y} r={r + (g.start.hovered ? 1 : 0)} fill={THEME.handleFill} stroke={accentColor} stroke-width={g.start.hovered ? 2 : 1} />
+  <rect data-vector-gradient-handle={g.end.handle} x={g.end.x - r} y={g.end.y - r} width={2 * r} height={2 * r} fill={THEME.handleFill} stroke={accentColor} stroke-width={g.end.hovered ? 2 : 1} />
+  {#if g.aspect}
+    <circle data-vector-gradient-handle="aspect" cx={g.aspect.x} cy={g.aspect.y} r={THEME.handleRadius + (g.aspect.hovered ? 1 : 0)} fill={THEME.handleFill} stroke={accentColor} stroke-width={g.aspect.hovered ? 2 : 1} />
+  {/if}
+  {#if g.focal}
+    <g data-vector-gradient-handle="focal">
+      <circle cx={g.focal.x} cy={g.focal.y} r={THEME.handleRadius - 1 + (g.focal.hovered ? 1 : 0)} fill={accentColor} stroke={THEME.handleFill} />
+    </g>
+  {/if}
+  {#each g.midpoints as m (m.index)}
+    <path data-vector-gradient-midpoint={m.index} d={vectorDiamondPath(m.x, m.y, 4 + (m.hovered ? 1 : 0))} fill={THEME.handleFill} stroke={accentColor} />
+  {/each}
+  {#each g.stops as s (s.index)}
+    <g data-vector-gradient-stop={s.index} data-selected={s.selected || undefined} opacity={g.removing && s.selected ? 0.35 : 1}>
+      <line x1={s.barX} y1={s.barY} x2={s.x} y2={s.y} stroke={accentColor} />
+      <rect x={s.x - 5} y={s.y - 5} width="10" height="10" rx="2" fill={s.color} fill-opacity={s.opacity} stroke={s.selected ? accentColor : '#ffffff'} stroke-width={s.selected || s.hovered ? 2 : 1} />
+      <rect x={s.x - 6.5} y={s.y - 6.5} width="13" height="13" rx="3" fill="none" stroke={s.selected ? '#ffffff' : accentColor} />
+    </g>
+  {/each}
+</g>

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

@@ -0,0 +1,10 @@
+import { type VectorRenderGradientAnnotator } from '@pixerate/editor/vector';
+interface Props {
+    /** The gradient tool's annotator (screen space) from `getVectorOverlayRenderData`. */
+    annotator: VectorRenderGradientAnnotator;
+    accentColor?: string;
+}
+declare const VectorGradientAnnotator: import("svelte").Component<Props, {}, "">;
+type VectorGradientAnnotator = ReturnType<typeof VectorGradientAnnotator>;
+export default VectorGradientAnnotator;
+//# sourceMappingURL=VectorGradientAnnotator.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VectorGradientAnnotator.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorGradientAnnotator.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAoD,KAAK,6BAA6B,EAAE,MAAM,yBAAyB,CAAC;AAG7H,UAAU,KAAK;IACb,sFAAsF;IACtF,SAAS,EAAE,6BAA6B,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAsCH,QAAA,MAAM,uBAAuB,2CAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/dist/vector/VectorGradientDefs.svelte

@@ -1,24 +1,36 @@
 <script lang="ts">
-  import type { SvgGradientDef } from '@pixerate/editor/vector';
+  import type { SvgGradientDef, VectorPaintDef } from '@pixerate/editor/vector';
 
   interface Props {
-    defs: readonly SvgGradientDef[];
+    /** Paint servers: gradient descriptors and patterns of gradient tiles (conic, diamond, stroke modes). */
+    defs: readonly VectorPaintDef[];
   }
 
   let { defs }: Props = $props();
 </script>
 
+{#snippet gradient(def: SvgGradientDef)}
+  {#if def.type === 'radial'}
+    <radialGradient id={def.id} {...def.attrs}>
+      {#each def.stops as s, i (i)}<stop offset={s.offset} stop-color={s.stopColor} stop-opacity={s.stopOpacity} />{/each}
+    </radialGradient>
+  {:else}
+    <linearGradient id={def.id} {...def.attrs}>
+      {#each def.stops as s, i (i)}<stop offset={s.offset} stop-color={s.stopColor} stop-opacity={s.stopOpacity} />{/each}
+    </linearGradient>
+  {/if}
+{/snippet}
+
 {#if defs.length}
   <defs>
     {#each defs as def (def.id)}
-      {#if def.type === 'radial'}
-        <radialGradient id={def.id} {...def.attrs}>
-          {#each def.stops as s, i (i)}<stop offset={s.offset} stop-color={s.stopColor} stop-opacity={s.stopOpacity} />{/each}
-        </radialGradient>
+      {#if def.type === 'pattern'}
+        <pattern id={def.id} {...def.attrs}>
+          {#each def.gradients as g (g.id)}{@render gradient(g)}{/each}
+          {#each def.tiles as t, i (i)}<path d={t.d} fill={t.fill} />{/each}
+        </pattern>
       {:else}
-        <linearGradient id={def.id} {...def.attrs}>
-          {#each def.stops as s, i (i)}<stop offset={s.offset} stop-color={s.stopColor} stop-opacity={s.stopOpacity} />{/each}
-        </linearGradient>
+        {@render gradient(def)}
       {/if}
     {/each}
   </defs>

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

@@ -1,6 +1,7 @@
-import type { SvgGradientDef } from '@pixerate/editor/vector';
+import type { VectorPaintDef } from '@pixerate/editor/vector';
 interface Props {
-    defs: readonly SvgGradientDef[];
+    /** Paint servers: gradient descriptors and patterns of gradient tiles (conic, diamond, stroke modes). */
+    defs: readonly VectorPaintDef[];
 }
 declare const VectorGradientDefs: import("svelte").Component<Props, {}, "">;
 type VectorGradientDefs = ReturnType<typeof VectorGradientDefs>;

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

@@ -1 +1 @@
-{"version":3,"file":"VectorGradientDefs.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorGradientDefs.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG5D,UAAU,KAAK;IACb,IAAI,EAAE,SAAS,cAAc,EAAE,CAAC;CACjC;AA0BH,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"VectorGradientDefs.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorGradientDefs.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAkB,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG5E,UAAU,KAAK;IACb,yGAAyG;IACzG,IAAI,EAAE,SAAS,cAAc,EAAE,CAAC;CACjC;AAqCH,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/vector/VectorGradientEditor.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+  import {
+    VECTOR_GRADIENT_TYPES,
+    VECTOR_GRADIENT_SPREADS,
+    VECTOR_GRADIENT_INTERPOLATIONS,
+    VECTOR_STROKE_GRADIENT_MODES,
+    VECTOR_GRADIENT_TYPE_LABELS,
+    VECTOR_GRADIENT_SPREAD_LABELS,
+    VECTOR_GRADIENT_INTERPOLATION_LABELS,
+    VECTOR_STROKE_GRADIENT_MODE_LABELS,
+    getVectorGradientEditor,
+    vectorPaintToHex,
+    type VectorEditorController,
+    type VectorGradientInterpolation,
+    type VectorGradientSpread,
+    type VectorGradientType,
+    type VectorStrokeGradientMode
+  } from '@pixerate/editor/vector';
+  import { vectorStateOf } from './subscribe.svelte.js';
+
+  interface Props {
+    controller: VectorEditorController;
+    class?: string;
+  }
+
+  /**
+   * Gradient editor for the selection's fill or stroke: style (or solid), the stop ramp (click it
+   * to add a stop, pick a stop to edit its colour, opacity, position and midpoint), interpolation
+   * space, smoothness, spread, how it lies on a stroke, and reverse.
+   */
+  let { controller, class: className = '' }: Props = $props();
+
+  const store = vectorStateOf(() => controller);
+  const ed = $derived(getVectorGradientEditor(store.current));
+  const selectClass = 'h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs';
+  const numberClass = 'h-7 w-14 rounded border border-border bg-background px-1.5 text-xs';
+  const buttonClass =
+    'inline-flex h-7 min-w-7 items-center justify-center rounded border border-border bg-background px-1.5 text-xs text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground';
+  const percent = (v: number) => Math.round(v * 1000) / 10;
+  const end = () => controller.endMergedEdit();
+
+  function setType(value: string) {
+    if (!ed) return;
+    if (value === 'solid') {
+      const first = ed.stops[0];
+      controller.setStyle({ [ed.target]: vectorPaintToHex(first?.color) ?? first?.color ?? '#000000' }, undefined, { label: 'Solid Colour' });
+    } else controller.setGradient({ type: value as VectorGradientType });
+  }
+
+  function numberOf(e: Event & { currentTarget: HTMLInputElement }, fn: (n: number) => void) {
+    const n = parseFloat(e.currentTarget.value);
+    if (Number.isFinite(n)) fn(n);
+  }
+
+  function addAt(e: MouseEvent & { currentTarget: HTMLElement }) {
+    const r = e.currentTarget.getBoundingClientRect();
+    controller.addGradientStop(r.width > 0 ? Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)) : 0.5);
+  }
+</script>
+
+{#if ed}
+  {@const sel = ed.selected}
+  <div class="space-y-1.5 {className}" data-vector-gradient-editor={ed.target} aria-label="Gradient">
+    <div class="flex items-center gap-1.5">
+      <span class="w-16 text-xs text-foreground">Gradient</span>
+      {#each ['fill', 'stroke'] as const as t (t)}
+        <button type="button" class={buttonClass} aria-pressed={ed.target === t} onclick={() => controller.setGradientTarget(t)}>{t === 'fill' ? 'Fill' : 'Stroke'}</button>
+      {/each}
+      {#if ed.mixed}<span class="text-[11px] text-muted-foreground">Mixed</span>{/if}
+    </div>
+    <div class="flex items-center gap-1.5">
+      <span class="w-16 text-xs text-foreground">Type</span>
+      <select aria-label="Gradient type" class={selectClass} value={ed.type ?? 'solid'} onchange={(e) => setType(e.currentTarget.value)}>
+        <option value="solid">Solid</option>
+        {#each VECTOR_GRADIENT_TYPES as t (t)}<option value={t}>{VECTOR_GRADIENT_TYPE_LABELS[t]}</option>{/each}
+      </select>
+      <button type="button" class={buttonClass} aria-label="Reverse gradient" title="Reverse gradient" disabled={!ed.gradient} onclick={() => controller.reverseGradient()}>⇄</button>
+    </div>
+    {#if ed.gradient}
+      <div class="relative h-8" data-vector-gradient-ramp="">
+        <div
+          role="button"
+          tabindex="-1"
+          aria-label="Add gradient stop"
+          class="absolute inset-x-1.5 top-0 h-4 cursor-copy rounded border border-border"
+          style="background-image: {ed.preview}, repeating-conic-gradient(#ddd 0% 25%, #fff 0% 50%); background-size: auto, 8px 8px"
+          onclick={addAt}
+          onkeydown={() => {}}
+        ></div>
+        {#each ed.stops as s (s.index)}
+          <button
+            type="button"
+            data-vector-gradient-stop={s.index}
+            aria-label="Gradient stop {s.index + 1} at {percent(s.offset)}%"
+            aria-pressed={s.selected}
+            class="absolute top-4 h-3.5 w-3 -translate-x-1/2 rounded-sm border border-border aria-pressed:ring-2 aria-pressed:ring-primary"
+            style="left: calc(6px + (100% - 12px) * {s.offset}); background: {s.color}; opacity: {0.4 + 0.6 * (s.opacity ?? 1)}"
+            onclick={() => controller.selectGradientStop(s.selected ? null : s.index)}
+          ></button>
+        {/each}
+      </div>
+      {#if sel}
+        <div class="flex flex-wrap items-center gap-1.5" data-vector-gradient-selected-stop={sel.index}>
+          <input
+            type="color"
+            aria-label="Stop colour"
+            class="h-7 w-9 cursor-pointer rounded border border-border bg-background"
+            value={vectorPaintToHex(sel.color) ?? '#000000'}
+            oninput={(e) => controller.setGradientStop(sel.index, { color: e.currentTarget.value }, { merge: `gradient-stop-color-${sel.index}` })}
+            onblur={end}
+          />
+          <label class="flex items-center gap-1 text-[11px] text-muted-foreground">
+            Opacity
+            <input type="number" min="0" max="100" step="5" aria-label="Stop opacity" class={numberClass} value={percent(sel.opacity ?? 1)} oninput={(e) => numberOf(e, (n) => controller.setGradientStop(sel.index, { opacity: n / 100 }))} />
+          </label>
+          <label class="flex items-center gap-1 text-[11px] text-muted-foreground">
+            At
+            <input type="number" min="0" max="100" step="1" aria-label="Stop position" class={numberClass} value={percent(sel.offset)} oninput={(e) => numberOf(e, (n) => controller.setGradientStop(sel.index, { offset: n / 100 }))} />
+          </label>
+          {#if !sel.last}
+            <label class="flex items-center gap-1 text-[11px] text-muted-foreground">
+              Midpoint
+              <input type="number" min="5" max="95" step="1" aria-label="Stop midpoint" class={numberClass} value={percent(sel.midpoint ?? 0.5)} oninput={(e) => numberOf(e, (n) => controller.setGradientStop(sel.index, { midpoint: n / 100 }))} />
+            </label>
+          {/if}
+          <button type="button" class={buttonClass} aria-label="Delete stop" title="Delete stop" disabled={ed.stops.length <= 2} onclick={() => controller.removeGradientStop(sel.index)}>✕</button>
+        </div>
+      {/if}
+      <label class="flex items-center gap-1.5 text-xs text-foreground">
+        <span class="w-16">Colours</span>
+        <select aria-label="Gradient interpolation" class={selectClass} value={ed.interpolation} onchange={(e) => controller.setGradient({ interpolation: e.currentTarget.value as VectorGradientInterpolation })}>
+          {#each VECTOR_GRADIENT_INTERPOLATIONS as i (i)}<option value={i}>{VECTOR_GRADIENT_INTERPOLATION_LABELS[i]}</option>{/each}
+        </select>
+      </label>
+      <label class="flex items-center gap-1.5 text-xs text-foreground">
+        <span class="w-16">Smooth</span>
+        <input
+          type="range"
+          min="0"
+          max="1"
+          step="0.05"
+          aria-label="Gradient smoothness"
+          class="h-4 flex-1 accent-primary"
+          value={ed.smoothness}
+          oninput={(e) => controller.setGradient({ smoothness: parseFloat(e.currentTarget.value) }, { merge: 'gradient-smoothness' })}
+          onpointerup={end}
+          onblur={end}
+        />
+      </label>
+      <label class="flex items-center gap-1.5 text-xs text-foreground">
+        <span class="w-16">Spread</span>
+        <select aria-label="Gradient spread" class={selectClass} value={ed.spread} onchange={(e) => controller.setGradient({ spread: e.currentTarget.value as VectorGradientSpread })}>
+          {#each VECTOR_GRADIENT_SPREADS as sp (sp)}<option value={sp}>{VECTOR_GRADIENT_SPREAD_LABELS[sp]}</option>{/each}
+        </select>
+      </label>
+      {#if ed.target === 'stroke'}
+        <label class="flex items-center gap-1.5 text-xs text-foreground">
+          <span class="w-16">On stroke</span>
+          <select aria-label="Gradient on stroke" class={selectClass} value={ed.strokeMode} onchange={(e) => controller.setGradient({ strokeMode: e.currentTarget.value as VectorStrokeGradientMode })}>
+            {#each VECTOR_STROKE_GRADIENT_MODES as m (m)}<option value={m}>{VECTOR_STROKE_GRADIENT_MODE_LABELS[m]}</option>{/each}
+          </select>
+        </label>
+      {/if}
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,9 @@
+import { type VectorEditorController } from '@pixerate/editor/vector';
+interface Props {
+    controller: VectorEditorController;
+    class?: string;
+}
+declare const VectorGradientEditor: import("svelte").Component<Props, {}, "">;
+type VectorGradientEditor = ReturnType<typeof VectorGradientEditor>;
+export default VectorGradientEditor;
+//# sourceMappingURL=VectorGradientEditor.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VectorGradientEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorGradientEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAWH,KAAK,sBAAsB,EAK5B,MAAM,yBAAyB,CAAC;AAIjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoHH,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/vector/VectorStylePanel.svelte

@@ -17,6 +17,8 @@
   } from '@pixerate/editor/vector';
   import { vectorStateOf } from './subscribe.svelte.js';
   import { vectorButtonClass } from './styles.js';
+  import VectorEffectsPanel from './VectorEffectsPanel.svelte';
+  import VectorGradientEditor from './VectorGradientEditor.svelte';
 
   interface Props {
     controller: VectorEditorController;
@@ -102,6 +104,7 @@
       {#if style?.mixed[key]}<span class="text-[11px] text-muted-foreground">Mixed</span>{/if}
     </div>
   {/each}
+  {#if style}<VectorGradientEditor {controller} />{/if}
   <label class="flex items-center gap-2 text-xs text-foreground">
     <span class="w-16">Width</span>
     <input
@@ -217,5 +220,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;AAOjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6JH,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

@@ -50,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 }
   ]);
@@ -193,6 +196,17 @@
   {/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.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;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;AA0HH,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,8 +6,11 @@ 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 { default as VectorGradientAnnotator } from "./VectorGradientAnnotator.svelte";
+export { default as VectorGradientEditor } from "./VectorGradientEditor.svelte";
 export * from "./createVectorEditor.svelte.js";
 export { vectorStateOf } from "./subscribe.svelte.js";
 export * from "./styles.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,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAChF,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,8 +3,11 @@ 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 { default as VectorGradientAnnotator } from "./VectorGradientAnnotator.svelte";
+export { default as VectorGradientEditor } from "./VectorGradientEditor.svelte";
 export * from "./createVectorEditor.svelte.js";
 export { vectorStateOf } from "./subscribe.svelte.js";
 export * from "./styles.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.38.0",
+  "version": "0.40.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.41.0"
+    "@pixerate/editor": "0.43.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",