@pixerate/editor-svelte 0.39.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/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,7 @@
   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;
@@ -103,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

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;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/index.d.ts

@@ -9,6 +9,8 @@ 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,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,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

@@ -6,6 +6,8 @@ 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.39.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.42.0"
+    "@pixerate/editor": "0.43.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",