@pixerate/editor-svelte 0.39.0 → 0.41.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';
@@ -188,7 +189,7 @@
       <path d={overlay.penPreview} stroke={accentColor} stroke-dasharray="4 3" />
     {/if}
     {#if box}
-      <g data-vector-selection="" transform={box.transform || undefined}>
+      <g data-vector-selection="" data-free-distort={box.freeDistort || undefined} transform={box.transform || undefined}>
         <rect x={box.x} y={box.y} width={box.width} height={box.height} stroke={accentColor} />
         <line x1={box.x + box.width / 2} y1={box.y} x2={box.x + box.width / 2} y2={box.y - 24} stroke={accentColor} />
         {#each box.handles as h (h.handle)}
@@ -200,6 +201,29 @@
         {/each}
       </g>
     {/if}
+    {#if overlay.distort}
+      <g data-vector-distort={overlay.distort.mode}>
+        <path d={overlay.distort.d} stroke={accentColor} />
+        {#each overlay.distort.corners as c, i (i)}
+          <rect x={c.x - hs / 2} y={c.y - hs / 2} width={hs} height={hs} fill={THEME.handleFill} stroke={accentColor} />
+        {/each}
+      </g>
+    {/if}
+    {#if overlay.envelope}
+      <g data-vector-envelope-mesh={overlay.envelope.nodeId}>
+        <path data-vector-envelope-grid="" d={overlay.envelope.grid} stroke={accentColor} stroke-opacity="0.8" />
+        {#each overlay.envelope.handles as h (h.index)}
+          <g data-vector-envelope-handle={h.index}>
+            <line x1={h.anchorX} y1={h.anchorY} x2={h.x} y2={h.y} stroke={accentColor} stroke-opacity="0.6" />
+            <circle cx={h.x} cy={h.y} r={THEME.handleRadius + (h.hovered || h.active ? 1 : 0)} fill={h.active ? accentColor : THEME.handleFill} stroke={accentColor} />
+          </g>
+        {/each}
+        {#each overlay.envelope.anchors as a (a.index)}
+          {@const size = as + (a.hovered || a.active ? 2 : 0)}
+          <rect data-vector-envelope-anchor={a.index} x={a.x - size / 2} y={a.y - size / 2} width={size} height={size} fill={a.active ? accentColor : THEME.handleFill} stroke={accentColor} />
+        {/each}
+      </g>
+    {/if}
     {#each overlay.handles as h (handleKey(h))}
       <g data-vector-handle={h.ref.handle}>
         <line x1={h.anchorX} y1={h.anchorY} x2={h.x} y2={h.y} stroke={accentColor} />
@@ -247,6 +271,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;AA8RH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/vector/VectorEnvelopePanel.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+  import { VECTOR_ENVELOPE_STYLE_OPTIONS, getVectorEnvelopePanel, type VectorEditorController, type VectorEnvelopeParams } from '@pixerate/editor/vector';
+  import { vectorStateOf } from './subscribe.svelte.js';
+
+  /**
+   * Envelope distortion of the selection: Make with Warp, Mesh or Top Object, and for one selected
+   * object with an envelope its warp preset, bend, horizontal and vertical distortion, orientation
+   * and mesh rows and columns, plus Release and Expand. Edit the mesh on the canvas with the
+   * Envelope tool. Slider drags are one undo step each.
+   */
+  interface Props {
+    controller: VectorEditorController;
+    class?: string;
+  }
+
+  let { controller, class: className = '' }: Props = $props();
+
+  const store = vectorStateOf(() => controller);
+  const view = $derived(store.current);
+  const panel = $derived(getVectorEnvelopePanel(view));
+  const env = $derived(panel?.envelope ?? null);
+  // The mesh size Make with Mesh uses (an envelope's own size once it has one).
+  let size = $state({ rows: 2, columns: 2 });
+  const rows = $derived(env?.params.rows ?? size.rows);
+  const columns = $derived(env?.params.columns ?? size.columns);
+
+  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-14 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';
+  const labelClass = 'w-full truncate text-[11px] text-muted-foreground';
+
+  const SLIDERS: { key: 'bend' | 'horizontal' | 'vertical'; label: string }[] = [
+    { key: 'bend', label: 'Bend %' },
+    { key: 'horizontal', label: 'Horizontal distortion %' },
+    { key: 'vertical', label: 'Vertical distortion %' }
+  ];
+
+  const end = () => controller.endMergedEdit();
+  function set(patch: Partial<VectorEnvelopeParams>, merge = false) {
+    controller.envelope(patch, { ids: panel?.nodeId ? [panel.nodeId] : undefined, merge });
+  }
+  function setSlider(key: 'bend' | 'horizontal' | 'vertical', raw: string) {
+    const n = parseFloat(raw);
+    if (Number.isFinite(n)) set({ [key]: n }, true);
+  }
+  function setCount(key: 'rows' | 'columns', raw: string) {
+    const n = Math.round(parseFloat(raw));
+    if (!Number.isFinite(n) || n < 1 || n > 16) return;
+    if (env) set({ [key]: n });
+    else size = { ...size, [key]: n };
+  }
+</script>
+
+{#if panel}
+  <div class="space-y-2 {className}" data-vector-envelope="" aria-label="Envelope">
+    <div class="flex flex-wrap items-center gap-1">
+      <span class="w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">Envelope</span>
+      <button
+        type="button"
+        data-vector-envelope-action="warp"
+        class={buttonClass}
+        title="Make with Warp"
+        aria-label="Make with Warp"
+        disabled={!panel.canMake || !!env}
+        onclick={() => set({ style: 'arc', bend: 50 })}
+      >
+        Warp
+      </button>
+      <button
+        type="button"
+        data-vector-envelope-action="mesh"
+        class={buttonClass}
+        title="Make with Mesh"
+        aria-label="Make with Mesh"
+        disabled={!panel.canMake || !!env}
+        onclick={() => set({ style: 'mesh', rows: size.rows, columns: size.columns })}
+      >
+        Mesh
+      </button>
+      <button
+        type="button"
+        data-vector-envelope-action="top"
+        class={buttonClass}
+        title="Make with Top Object"
+        aria-label="Make with Top Object"
+        disabled={!panel.canMakeWithTopObject}
+        onclick={() => controller.makeEnvelopeWithTopObject({ rows: size.rows, columns: size.columns })}
+      >
+        Top
+      </button>
+      <button
+        type="button"
+        data-vector-envelope-action="release"
+        class={buttonClass}
+        title="Release Envelope"
+        aria-label="Release Envelope"
+        disabled={!panel.canRelease}
+        onclick={() => controller.releaseEnvelope()}
+      >
+        Release
+      </button>
+      <button
+        type="button"
+        data-vector-envelope-action="expand"
+        class={buttonClass}
+        title="Expand Envelope"
+        aria-label="Expand Envelope"
+        disabled={!panel.canRelease}
+        onclick={() => controller.expandAppearance()}
+      >
+        Expand
+      </button>
+    </div>
+    {#if env}
+      <label class="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-foreground" data-vector-envelope-param="style">
+        <span class={labelClass}>Warp</span>
+        <select
+          aria-label="Envelope warp"
+          class={selectClass}
+          value={env.params.style}
+          onchange={(e) => set({ style: e.currentTarget.value as VectorEnvelopeParams['style'] })}
+        >
+          {#each VECTOR_ENVELOPE_STYLE_OPTIONS as o (o.value)}<option value={o.value}>{o.label}</option>{/each}
+        </select>
+      </label>
+      {#if env.params.style !== 'mesh'}
+        {#each SLIDERS as s (s.key)}
+          <label class="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-foreground" data-vector-envelope-param={s.key}>
+            <span class={labelClass}>{s.label}</span>
+            <input
+              type="range"
+              min="-100"
+              max="100"
+              step="1"
+              aria-label="Envelope {s.label} slider"
+              class="h-4 min-w-0 flex-1 accent-primary"
+              value={env.params[s.key]}
+              oninput={(e) => setSlider(s.key, e.currentTarget.value)}
+              onpointerup={end}
+              onkeyup={end}
+              onblur={end}
+            />
+            <input
+              type="number"
+              min="-100"
+              max="100"
+              step="1"
+              aria-label="Envelope {s.label}"
+              class={numberClass}
+              value={env.params[s.key]}
+              oninput={(e) => setSlider(s.key, e.currentTarget.value)}
+              onblur={end}
+            />
+          </label>
+        {/each}
+        <label class="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-foreground" data-vector-envelope-param="orientation">
+          <span class={labelClass}>Orientation</span>
+          <select
+            aria-label="Envelope orientation"
+            class={selectClass}
+            value={env.params.orientation}
+            onchange={(e) => set({ orientation: e.currentTarget.value as 'horizontal' | 'vertical' })}
+          >
+            <option value="horizontal">Horizontal</option>
+            <option value="vertical">Vertical</option>
+          </select>
+        </label>
+      {/if}
+    {/if}
+    <div class="flex items-center gap-2 text-xs text-foreground" data-vector-envelope-param="mesh">
+      <span class="min-w-0 flex-1 truncate text-[11px] text-muted-foreground">Mesh rows × columns</span>
+      <input type="number" min="1" max="16" step="1" aria-label="Envelope mesh rows" class={numberClass} value={rows} oninput={(e) => setCount('rows', e.currentTarget.value)} />
+      <input type="number" min="1" max="16" step="1" aria-label="Envelope mesh columns" class={numberClass} value={columns} oninput={(e) => setCount('columns', e.currentTarget.value)} />
+    </div>
+    {#if panel.count > 1 && !panel.canMakeWithTopObject}<p class="text-[11px] text-muted-foreground">Select one object to edit its envelope.</p>{/if}
+    {#if env}<p class="text-[11px] text-muted-foreground">Edit the mesh with the Envelope tool (U).</p>{/if}
+  </div>
+{/if}

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

@@ -0,0 +1,15 @@
+import { type VectorEditorController } from '@pixerate/editor/vector';
+/**
+ * Envelope distortion of the selection: Make with Warp, Mesh or Top Object, and for one selected
+ * object with an envelope its warp preset, bend, horizontal and vertical distortion, orientation
+ * and mesh rows and columns, plus Release and Expand. Edit the mesh on the canvas with the
+ * Envelope tool. Slider drags are one undo step each.
+ */
+interface Props {
+    controller: VectorEditorController;
+    class?: string;
+}
+declare const VectorEnvelopePanel: import("svelte").Component<Props, {}, "">;
+type VectorEnvelopePanel = ReturnType<typeof VectorEnvelopePanel>;
+export default VectorEnvelopePanel;
+//# sourceMappingURL=VectorEnvelopePanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VectorEnvelopePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorEnvelopePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAyD,KAAK,sBAAsB,EAA6B,MAAM,yBAAyB,CAAC;AAItJ;;;;;GAKG;AACH,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqGH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,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

@@ -18,6 +18,8 @@
   import { vectorStateOf } from './subscribe.svelte.js';
   import { vectorButtonClass } from './styles.js';
   import VectorEffectsPanel from './VectorEffectsPanel.svelte';
+  import VectorEnvelopePanel from './VectorEnvelopePanel.svelte';
+  import VectorGradientEditor from './VectorGradientEditor.svelte';
 
   interface Props {
     controller: VectorEditorController;
@@ -103,6 +105,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
@@ -219,5 +222,6 @@
       />
     </label>
     <VectorEffectsPanel {controller} />
+    <VectorEnvelopePanel {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;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"}
+{"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;AAQjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+JH,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

@@ -36,10 +36,22 @@
      * spine, Replace Spine, Expand and Release (default `true`).
      */
     showBlend?: boolean;
+    /** The Free Distort toggle of the selection box (default `true`). */
+    showDistort?: boolean;
     class?: string;
   }
 
-  let { controller, tools = VECTOR_TOOLS, showHistory = true, showArrange = true, showSnap = true, showPathEdit = true, showBlend = true, class: className = '' }: Props = $props();
+  let {
+    controller,
+    tools = VECTOR_TOOLS,
+    showHistory = true,
+    showArrange = true,
+    showSnap = true,
+    showPathEdit = true,
+    showBlend = true,
+    showDistort = true,
+    class: className = ''
+  }: Props = $props();
 
   const snapTitle = 'Snap to objects';
   const modKey = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform ?? '') ? '⌘' : 'Ctrl';
@@ -191,6 +203,21 @@
       {/if}
     </div>
   {/if}
+  {#if showDistort}
+    <div class="ml-1 flex items-center gap-1" role="group" aria-label="Distort">
+      <button
+        type="button"
+        data-vector-free-distort=""
+        class={vectorButtonClass}
+        aria-pressed={view.freeDistort}
+        title="Free Distort: drag a corner of the selection box to distort in perspective (Shift+Alt+{modKey}: symmetric perspective; {modKey}-drag a side to skew)"
+        aria-label="Free Distort"
+        onclick={() => controller.setFreeDistort(!view.freeDistort)}
+      >
+        Distort
+      </button>
+    </div>
+  {/if}
   {#if showBlend}
     <VectorBlendControls {controller} />
   {/if}

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

@@ -20,6 +20,8 @@ interface Props {
      * spine, Replace Spine, Expand and Release (default `true`).
      */
     showBlend?: boolean;
+    /** The Free Distort toggle of the selection box (default `true`). */
+    showDistort?: 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;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"}
+{"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,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiJH,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

@@ -7,8 +7,11 @@ export { default as VectorWidthPointEditor } from "./VectorWidthPointEditor.svel
 export { default as VectorToolbar } from "./VectorToolbar.svelte";
 export { default as VectorStylePanel } from "./VectorStylePanel.svelte";
 export { default as VectorEffectsPanel } from "./VectorEffectsPanel.svelte";
+export { default as VectorEnvelopePanel } from "./VectorEnvelopePanel.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,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"}
+{"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,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,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

@@ -4,8 +4,11 @@ export { default as VectorWidthPointEditor } from "./VectorWidthPointEditor.svel
 export { default as VectorToolbar } from "./VectorToolbar.svelte";
 export { default as VectorStylePanel } from "./VectorStylePanel.svelte";
 export { default as VectorEffectsPanel } from "./VectorEffectsPanel.svelte";
+export { default as VectorEnvelopePanel } from "./VectorEnvelopePanel.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.39.0",
+  "version": "0.41.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.42.0"
+    "@pixerate/editor": "0.44.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",