@pixerate/editor-svelte 0.75.0 → 0.76.0

package/dist/vector/VectorAppearancePanel.svelte

@@ -0,0 +1,250 @@
+<script lang="ts">
+  import {
+    VECTOR_BLEND_MODE_MENU,
+    VECTOR_FILTER_MENU,
+    VECTOR_STROKE_ALIGN_LABELS,
+    getVectorAppearancePanel,
+    type VectorAppearancePanelLayer,
+    type VectorBlendMode,
+    type VectorEditorController,
+    type VectorFilterType,
+    type VectorFiltersPanelItem,
+    type VectorStrokeAlign
+  } from '@pixerate/editor/vector';
+  import { vectorStateOf } from './subscribe.svelte.js';
+
+  /**
+   * The appearance of the selection: its fill and stroke stacks (listed top first; add, remove,
+   * reorder, show / hide, paint, opacity and blend mode per layer, width and alignment per
+   * stroke), the node blend mode, and for one selected node its filters (drop and inner shadows,
+   * glows, blurs, feather). The pencil on a layer points the gradient editor and tool at it.
+   * Slider drags and typing 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(getVectorAppearancePanel(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-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 headingClass = 'text-[11px] font-medium uppercase tracking-wide text-muted-foreground';
+  const labelClass = 'w-full truncate text-[11px] text-muted-foreground';
+  const ALIGNS = Object.keys(VECTOR_STROKE_ALIGN_LABELS) as VectorStrokeAlign[];
+
+  const end = () => controller.endMergedEdit();
+  const nameOf = (l: VectorAppearancePanelLayer) => `${l.kind === 'fill' ? 'Fill' : 'Stroke'} ${l.index + 1}`;
+  function update(l: VectorAppearancePanelLayer, patch: Record<string, unknown>, merge = false) {
+    if (panel) controller.updatePaintLayer(l.kind, l.index, patch, { ids: panel.pathIds, merge });
+  }
+  function setNumber(l: VectorAppearancePanelLayer, key: 'opacity' | 'strokeWidth', raw: string) {
+    const n = parseFloat(raw);
+    if (!Number.isFinite(n)) return;
+    if (key === 'opacity') update(l, { opacity: Math.min(100, Math.max(0, n)) / 100 }, true);
+    else if (n >= 0) update(l, { strokeWidth: n }, true);
+  }
+  function setFilter(f: VectorFiltersPanelItem, key: string, value: unknown, merge: boolean) {
+    if (panel?.filterNodeId) controller.updateFilter(panel.filterNodeId, f.id, { params: { [key]: value } }, { merge });
+  }
+  function setFilterNumber(f: VectorFiltersPanelItem, key: string, raw: string) {
+    const n = parseFloat(raw);
+    if (Number.isFinite(n)) setFilter(f, key, n, true);
+  }
+  const hexOf = (v: unknown) => (/^#[0-9a-f]{6}$/i.test(String(v)) ? String(v) : '#000000');
+  const round = (n: number) => Math.round(n * 1000) / 1000;
+</script>
+
+{#snippet layerRow(l: VectorAppearancePanelLayer, count: number, ids: string[])}
+  {@const name = nameOf(l)}
+  {#if l.unknownKind}
+    <div class="text-[11px] text-muted-foreground" data-vector-layer="{l.kind}-{l.index}">{name}: {l.unknownKind} (not drawn by this version)</div>
+  {:else}
+    <div class="space-y-1 rounded border border-border p-1" data-vector-layer="{l.kind}-{l.index}" data-vector-layer-editing={l.editing ? '' : undefined}>
+      <div class="flex items-center gap-1">
+        <input type="checkbox" aria-label="{name} visible" title="Show" checked={l.visible} onchange={(e) => update(l, { visible: e.currentTarget.checked })} />
+        {#if l.gradient}
+          <button
+            type="button"
+            aria-label="{name} gradient"
+            title="Edit this gradient"
+            class="h-7 w-10 rounded border border-border"
+            style="background: {l.swatch}"
+            onclick={() => controller.setGradientTarget(l.kind, l.index)}
+          ></button>
+        {:else}
+          <input
+            type="color"
+            aria-label="{name} colour"
+            class="h-7 w-10 cursor-pointer rounded border border-border bg-background"
+            value={l.color ?? '#000000'}
+            oninput={(e) => update(l, { paint: e.currentTarget.value }, true)}
+            onblur={end}
+          />
+        {/if}
+        <input
+          type="number"
+          min={0}
+          max={100}
+          step={5}
+          aria-label="{name} opacity"
+          title="Opacity %"
+          class={numberClass}
+          value={Math.round(l.opacity * 100)}
+          oninput={(e) => setNumber(l, 'opacity', e.currentTarget.value)}
+          onblur={end}
+        />
+        <select aria-label="{name} blend mode" class={selectClass} value={l.blendMode} onchange={(e) => update(l, { blendMode: e.currentTarget.value })}>
+          {#each VECTOR_BLEND_MODE_MENU as m (m.mode)}<option value={m.mode}>{m.label}</option>{/each}
+        </select>
+      </div>
+      {#if l.kind === 'stroke'}
+        <div class="flex items-center gap-1">
+          <input
+            type="number"
+            min={0}
+            step={0.5}
+            aria-label="{name} width"
+            title="Width"
+            class={numberClass}
+            value={l.strokeWidth ?? 1}
+            oninput={(e) => setNumber(l, 'strokeWidth', e.currentTarget.value)}
+            onblur={end}
+          />
+          <select aria-label="{name} alignment" class={selectClass} value={l.strokeAlign ?? 'center'} onchange={(e) => update(l, { strokeAlign: e.currentTarget.value })}>
+            {#each ALIGNS as a (a)}<option value={a}>{VECTOR_STROKE_ALIGN_LABELS[a]}</option>{/each}
+          </select>
+        </div>
+      {/if}
+      <div class="flex items-center gap-1">
+        <span class="flex-1"></span>
+        <button type="button" class={buttonClass} title="Edit gradient" aria-label="Edit {name} gradient" aria-pressed={l.editing} onclick={() => controller.setGradientTarget(l.kind, l.index)}>✎</button>
+        <button type="button" class={buttonClass} title="Move up" aria-label="Move {name} up" disabled={l.index === count - 1} onclick={() => controller.movePaintLayer(l.kind, l.index, l.index + 1, { ids })}>↑</button>
+        <button type="button" class={buttonClass} title="Move down" aria-label="Move {name} down" disabled={l.index === 0} onclick={() => controller.movePaintLayer(l.kind, l.index, l.index - 1, { ids })}>↓</button>
+        <button type="button" class={buttonClass} title="Remove" aria-label="Remove {name}" onclick={() => controller.removePaintLayer(l.kind, l.index, { ids })}>×</button>
+      </div>
+    </div>
+  {/if}
+{/snippet}
+
+{#snippet stack(kind: 'fill' | 'stroke', layers: VectorAppearancePanelLayer[], mixed: boolean, ids: string[])}
+  <div class="space-y-1" data-vector-stack={kind}>
+    <div class="flex items-center gap-2">
+      <span class="flex-1 {headingClass}">{kind === 'fill' ? 'Fills' : 'Strokes'}</span>
+      {#if mixed}<span class="text-[11px] text-muted-foreground">Mixed</span>{/if}
+      <button
+        type="button"
+        class={buttonClass}
+        title={kind === 'fill' ? 'Add fill' : 'Add stroke'}
+        aria-label={kind === 'fill' ? 'Add fill' : 'Add stroke'}
+        disabled={!ids.length}
+        onclick={() => controller.addPaintLayer(kind, {}, { ids })}>+</button
+      >
+    </div>
+    <!-- Top layer first, as it draws. -->
+    {#each [...layers].reverse() as l (`${l.kind}-${l.index}`)}{@render layerRow(l, layers.length, ids)}{/each}
+  </div>
+{/snippet}
+
+{#if panel}
+  <div class="space-y-2 {className}" data-vector-appearance="" aria-label="Appearance">
+    {#if panel.pathIds.length}
+      {@render stack('stroke', panel.strokes, panel.mixed.strokes, panel.pathIds)}
+      {@render stack('fill', panel.fills, panel.mixed.fills, panel.pathIds)}
+    {/if}
+    <label class="flex items-center gap-2 text-xs text-foreground" data-vector-style="blendMode">
+      <span class="w-16">Blend</span>
+      <select aria-label="Blend mode" class={selectClass} value={panel.blendMode} onchange={(e) => panel && controller.setBlendMode(e.currentTarget.value as VectorBlendMode, { ids: panel.nodeIds })}>
+        {#each VECTOR_BLEND_MODE_MENU as m (m.mode)}<option value={m.mode}>{m.label}</option>{/each}
+      </select>
+      {#if panel.mixed.blendMode}<span class="text-[11px] text-muted-foreground">Mixed</span>{/if}
+    </label>
+    <div class="space-y-2" data-vector-filters="">
+      <div class="flex items-center gap-2">
+        <span class="w-16 {headingClass}">Filters</span>
+        <select
+          aria-label="Add filter"
+          class={selectClass}
+          value=""
+          onchange={(e) => {
+            const type = e.currentTarget.value;
+            e.currentTarget.value = '';
+            if (type && panel) controller.addFilter(type as VectorFilterType, { ids: panel.nodeIds });
+          }}
+        >
+          <option value="">Add filter…</option>
+          {#each VECTOR_FILTER_MENU as m (m.type)}<option value={m.type}>{m.label}</option>{/each}
+        </select>
+      </div>
+      {#if !panel.filterNodeId}<p class="text-[11px] text-muted-foreground">Select one object to edit its filters.</p>{/if}
+      {#if panel.filterNodeId}
+        {@const nodeId = panel.filterNodeId}
+        {#each panel.filters as f, i (f.id)}
+          <div class="space-y-1 rounded border border-border p-1.5" data-vector-filter={f.id} data-vector-filter-type={f.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="{f.label} on" checked={f.enabled} onchange={(e) => controller.updateFilter(nodeId, f.id, { enabled: e.currentTarget.checked })} />
+                <span class="truncate">{f.label}</span>
+              </label>
+              <button type="button" class={buttonClass} title="Move up" aria-label="Move {f.label} up" disabled={i === 0} onclick={() => controller.moveFilter(nodeId, f.id, i - 1)}>↑</button>
+              <button type="button" class={buttonClass} title="Move down" aria-label="Move {f.label} down" disabled={i === panel.filters.length - 1} onclick={() => controller.moveFilter(nodeId, f.id, i + 1)}>↓</button>
+              <button type="button" class={buttonClass} title="Remove" aria-label="Remove {f.label}" onclick={() => controller.removeFilter(nodeId, f.id)}>×</button>
+            </div>
+            {#each f.specs as spec (spec.key)}
+              {#if spec.kind === 'color'}
+                <label class="flex items-center gap-2 text-xs text-foreground" data-vector-filter-param={spec.key}>
+                  <span class="w-14 truncate text-[11px] text-muted-foreground">{spec.label}</span>
+                  <input
+                    type="color"
+                    aria-label="{f.label} {spec.label}"
+                    class="h-7 w-10 cursor-pointer rounded border border-border bg-background"
+                    value={hexOf(f.params[spec.key])}
+                    oninput={(e) => setFilter(f, spec.key, e.currentTarget.value, true)}
+                    onblur={end}
+                  />
+                </label>
+              {:else if spec.kind === 'number'}
+                {@const value = Number(f.params[spec.key] ?? 0)}
+                <label class="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-foreground" data-vector-filter-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="{f.label} {spec.label} slider"
+                      class="h-4 min-w-0 flex-1 accent-primary"
+                      {value}
+                      oninput={(e) => setFilterNumber(f, spec.key, e.currentTarget.value)}
+                      onpointerup={end}
+                      onkeyup={end}
+                      onblur={end}
+                    />
+                  {/if}
+                  <input
+                    type="number"
+                    min={spec.min}
+                    max={spec.max}
+                    step={spec.step}
+                    aria-label="{f.label} {spec.label}"
+                    class={numberClass}
+                    value={round(value)}
+                    oninput={(e) => setFilterNumber(f, spec.key, e.currentTarget.value)}
+                    onblur={end}
+                  />
+                </label>
+              {/if}
+            {/each}
+          </div>
+        {/each}
+      {/if}
+    </div>
+  </div>
+{/if}

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

@@ -0,0 +1,16 @@
+import { type VectorEditorController } from '@pixerate/editor/vector';
+/**
+ * The appearance of the selection: its fill and stroke stacks (listed top first; add, remove,
+ * reorder, show / hide, paint, opacity and blend mode per layer, width and alignment per
+ * stroke), the node blend mode, and for one selected node its filters (drop and inner shadows,
+ * glows, blurs, feather). The pencil on a layer points the gradient editor and tool at it.
+ * Slider drags and typing are one undo step each.
+ */
+interface Props {
+    controller: VectorEditorController;
+    class?: string;
+}
+declare const VectorAppearancePanel: import("svelte").Component<Props, {}, "">;
+type VectorAppearancePanel = ReturnType<typeof VectorAppearancePanel>;
+export default VectorAppearancePanel;
+//# sourceMappingURL=VectorAppearancePanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VectorAppearancePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorAppearancePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAOH,KAAK,sBAAsB,EAI5B,MAAM,yBAAyB,CAAC;AAIjC;;;;;;GAMG;AACH,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA4JH,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/vector/VectorCanvas.svelte

@@ -16,6 +16,7 @@
     type VectorEditorController
   } from '@pixerate/editor/vector';
   import VectorGradientDefs from './VectorGradientDefs.svelte';
+  import VectorFilterDefs from './VectorFilterDefs.svelte';
   import VectorGradientAnnotator from './VectorGradientAnnotator.svelte';
   import VectorSceneNodes from './VectorSceneNodes.svelte';
   import VectorWidthPointEditor from './VectorWidthPointEditor.svelte';
@@ -175,6 +176,7 @@
     </defs>
   {/if}
   <VectorGradientDefs defs={scene.defs} />
+  <VectorFilterDefs filters={scene.filters} />
   <rect
     data-vector-artboard=""
     x={overlay.artboard.x}

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;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;AAoSH,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;AASjC,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;AAsSH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/vector/VectorFilterDefs.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { VectorFilterPrimitive, VectorRenderFilter } from '@pixerate/editor/vector';
+
+  interface Props {
+    /** Node filters (shadows, glows, blurs, feather) from `getVectorSceneRenderData(...).filters`. */
+    filters: readonly VectorRenderFilter[];
+  }
+
+  let { filters }: Props = $props();
+</script>
+
+{#snippet primitive(p: VectorFilterPrimitive)}
+  <svelte:element this={p.tag} {...p.attrs}>
+    {#each p.children ?? [] as child, i (i)}{@render primitive(child)}{/each}
+  </svelte:element>
+{/snippet}
+
+{#if filters.length}
+  <defs>
+    {#each filters as f (f.id)}
+      <filter id={f.id} filterUnits="userSpaceOnUse" x={f.x} y={f.y} width={f.width} height={f.height} color-interpolation-filters="sRGB">
+        {#each f.primitives as p, i (i)}{@render primitive(p)}{/each}
+      </filter>
+    {/each}
+  </defs>
+{/if}

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

@@ -0,0 +1,9 @@
+import type { VectorRenderFilter } from '@pixerate/editor/vector';
+interface Props {
+    /** Node filters (shadows, glows, blurs, feather) from `getVectorSceneRenderData(...).filters`. */
+    filters: readonly VectorRenderFilter[];
+}
+declare const VectorFilterDefs: import("svelte").Component<Props, {}, "">;
+type VectorFilterDefs = ReturnType<typeof VectorFilterDefs>;
+export default VectorFilterDefs;
+//# sourceMappingURL=VectorFilterDefs.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VectorFilterDefs.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorFilterDefs.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAyB,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAGvF,UAAU,KAAK;IACb,kGAAkG;IAClG,OAAO,EAAE,SAAS,kBAAkB,EAAE,CAAC;CACxC;AA0BH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/vector/VectorPaintPath.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import type { VectorRenderPaintLayer, VectorRenderPath } from '@pixerate/editor/vector';
+
+  /**
+   * One paint of a path: a node's fill and stroke, or one layer of its stacks. A stroke aligned
+   * inside / outside (double width, clipped or masked by the shape) or with arrowheads draws in
+   * parts inside a group.
+   */
+  interface Props {
+    paint: VectorRenderPaintLayer | VectorRenderPath;
+    d: string;
+    fillRule: 'nonzero' | 'evenodd';
+    id?: string;
+    transform?: string;
+    filter?: string;
+    /** A node's blend mode (a layer carries its own). */
+    blendMode?: string;
+    /** `fill-0`, `stroke-1`, … for a layer of a stack. */
+    layer?: string;
+  }
+
+  let { paint, d, fillRule, id, transform, filter, blendMode, layer }: Props = $props();
+  const opacity = $derived(paint.opacity < 1 ? paint.opacity : undefined);
+  const blend = $derived(blendMode ?? (layer ? paint.blendMode : undefined));
+  const style = $derived(blend ? `mix-blend-mode: ${blend}` : undefined);
+  const sp = $derived(paint.strokeParts);
+</script>
+
+{#if sp}
+  <g data-vector-id={id} data-vector-layer={layer} data-vector-stroke-align={sp.align} {transform} {opacity} {filter} {style}>
+    {#if sp.clip}
+      <defs>
+        {#if sp.clip.kind === 'clip'}
+          <clipPath id={sp.clip.id}><path {d} clip-rule={fillRule} /></clipPath>
+        {:else}
+          <mask id={sp.clip.id} maskUnits="userSpaceOnUse" x={sp.clip.bounds.x} y={sp.clip.bounds.y} width={sp.clip.bounds.width} height={sp.clip.bounds.height}>
+            <rect x={sp.clip.bounds.x} y={sp.clip.bounds.y} width={sp.clip.bounds.width} height={sp.clip.bounds.height} fill="#fff" />
+            <path {d} fill="#000" fill-rule={fillRule} />
+          </mask>
+        {/if}
+      </defs>
+    {/if}
+    <path data-vector-part="fill" {d} fill={paint.fill} fill-rule={fillRule} stroke="none" />
+    {#if sp.outline !== undefined}
+      <!-- A variable-width stroke: its outline, filled. -->
+      <path
+        data-vector-part="stroke-outline"
+        d={sp.outline}
+        fill={paint.stroke}
+        clip-path={sp.clip?.kind === 'clip' ? `url(#${sp.clip.id})` : undefined}
+        mask={sp.clip?.kind === 'mask' ? `url(#${sp.clip.id})` : undefined}
+      />
+    {:else}
+      <path
+        data-vector-part="stroke"
+        d={sp.d}
+        fill="none"
+        stroke={paint.stroke}
+        stroke-width={sp.width}
+        stroke-linecap={paint.strokeLinecap as any}
+        stroke-linejoin={paint.strokeLinejoin as any}
+        stroke-dasharray={paint.strokeDasharray}
+        clip-path={sp.clip?.kind === 'clip' ? `url(#${sp.clip.id})` : undefined}
+        mask={sp.clip?.kind === 'mask' ? `url(#${sp.clip.id})` : undefined}
+      />
+    {/if}
+    {#each sp.heads as head, i (i)}
+      <path data-vector-part="head" d={head} fill={paint.stroke} />
+    {/each}
+  </g>
+{:else}
+  <path
+    data-vector-id={id}
+    data-vector-layer={layer}
+    {transform}
+    {d}
+    fill={paint.fill}
+    fill-rule={fillRule}
+    stroke={paint.stroke}
+    stroke-width={paint.stroke === 'none' ? undefined : paint.strokeWidth}
+    stroke-linecap={paint.strokeLinecap as any}
+    stroke-linejoin={paint.strokeLinejoin as any}
+    stroke-dasharray={paint.strokeDasharray}
+    {opacity}
+    {filter}
+    {style}
+  />
+{/if}

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

@@ -0,0 +1,22 @@
+import type { VectorRenderPaintLayer, VectorRenderPath } from '@pixerate/editor/vector';
+/**
+ * One paint of a path: a node's fill and stroke, or one layer of its stacks. A stroke aligned
+ * inside / outside (double width, clipped or masked by the shape) or with arrowheads draws in
+ * parts inside a group.
+ */
+interface Props {
+    paint: VectorRenderPaintLayer | VectorRenderPath;
+    d: string;
+    fillRule: 'nonzero' | 'evenodd';
+    id?: string;
+    transform?: string;
+    filter?: string;
+    /** A node's blend mode (a layer carries its own). */
+    blendMode?: string;
+    /** `fill-0`, `stroke-1`, … for a layer of a stack. */
+    layer?: string;
+}
+declare const VectorPaintPath: import("svelte").Component<Props, {}, "">;
+type VectorPaintPath = ReturnType<typeof VectorPaintPath>;
+export default VectorPaintPath;
+//# sourceMappingURL=VectorPaintPath.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VectorPaintPath.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorPaintPath.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAGtF;;;;GAIG;AACH,UAAU,KAAK;IACb,KAAK,EAAE,sBAAsB,GAAG,gBAAgB,CAAC;IACjD,CAAC,EAAE,MAAM,CAAC;IACV,QAAQ,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2CH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/vector/VectorSceneNodes.svelte

@@ -1,76 +1,29 @@
 <script lang="ts">
   import type { VectorRenderNode } from '@pixerate/editor/vector';
   import Self from './VectorSceneNodes.svelte';
+  import VectorPaintPath from './VectorPaintPath.svelte';
 
   interface Props {
     nodes: readonly VectorRenderNode[];
   }
 
   let { nodes }: Props = $props();
+  const blend = (mode: string | undefined) => (mode ? `mix-blend-mode: ${mode}` : undefined);
 </script>
 
 {#each nodes as node (node.id)}
   {#if node.kind === 'group'}
-    <g data-vector-id={node.id} transform={node.transform} opacity={node.opacity < 1 ? node.opacity : undefined}>
+    <g data-vector-id={node.id} transform={node.transform} opacity={node.opacity < 1 ? node.opacity : undefined} filter={node.filter} style={blend(node.blendMode)}>
       <Self nodes={node.children} />
     </g>
-  {:else if node.strokeParts}
-    {@const sp = node.strokeParts}
-    <!-- An aligned stroke (double width, clipped or masked by the shape) or one with arrowheads. -->
-    <g data-vector-id={node.id} data-vector-stroke-align={sp.align} transform={node.transform} opacity={node.opacity < 1 ? node.opacity : undefined}>
-      {#if sp.clip}
-        <defs>
-          {#if sp.clip.kind === 'clip'}
-            <clipPath id={sp.clip.id}><path d={node.d} clip-rule={node.fillRule} /></clipPath>
-          {:else}
-            <mask id={sp.clip.id} maskUnits="userSpaceOnUse" x={sp.clip.bounds.x} y={sp.clip.bounds.y} width={sp.clip.bounds.width} height={sp.clip.bounds.height}>
-              <rect x={sp.clip.bounds.x} y={sp.clip.bounds.y} width={sp.clip.bounds.width} height={sp.clip.bounds.height} fill="#fff" />
-              <path d={node.d} fill="#000" fill-rule={node.fillRule} />
-            </mask>
-          {/if}
-        </defs>
-      {/if}
-      <path data-vector-part="fill" d={node.d} fill={node.fill} fill-rule={node.fillRule} stroke="none" />
-      {#if sp.outline !== undefined}
-        <!-- A variable-width stroke: its outline, filled. -->
-        <path
-          data-vector-part="stroke-outline"
-          d={sp.outline}
-          fill={node.stroke}
-          clip-path={sp.clip?.kind === 'clip' ? `url(#${sp.clip.id})` : undefined}
-          mask={sp.clip?.kind === 'mask' ? `url(#${sp.clip.id})` : undefined}
-        />
-      {:else}
-      <path
-        data-vector-part="stroke"
-        d={sp.d}
-        fill="none"
-        stroke={node.stroke}
-        stroke-width={sp.width}
-        stroke-linecap={node.strokeLinecap as any}
-        stroke-linejoin={node.strokeLinejoin as any}
-        stroke-dasharray={node.strokeDasharray}
-        clip-path={sp.clip?.kind === 'clip' ? `url(#${sp.clip.id})` : undefined}
-        mask={sp.clip?.kind === 'mask' ? `url(#${sp.clip.id})` : undefined}
-      />
-      {/if}
-      {#each sp.heads as head, i (i)}
-        <path data-vector-part="head" d={head} fill={node.stroke} />
+  {:else if node.layers}
+    <!-- Fill and stroke stacks: each layer in order, bottom to top. -->
+    <g data-vector-id={node.id} transform={node.transform} opacity={node.opacity < 1 ? node.opacity : undefined} filter={node.filter} style={blend(node.blendMode)}>
+      {#each node.layers as layer (`${layer.kind}-${layer.index}`)}
+        <VectorPaintPath paint={layer} d={node.d} fillRule={node.fillRule} layer={`${layer.kind}-${layer.index}`} />
       {/each}
     </g>
   {:else}
-    <path
-      data-vector-id={node.id}
-      transform={node.transform}
-      d={node.d}
-      fill={node.fill}
-      fill-rule={node.fillRule}
-      stroke={node.stroke}
-      stroke-width={node.stroke === 'none' ? undefined : node.strokeWidth}
-      stroke-linecap={node.strokeLinecap as any}
-      stroke-linejoin={node.strokeLinejoin as any}
-      stroke-dasharray={node.strokeDasharray}
-      opacity={node.opacity < 1 ? node.opacity : undefined}
-    />
+    <VectorPaintPath paint={node} d={node.d} fillRule={node.fillRule} id={node.id} transform={node.transform} filter={node.filter} blendMode={node.blendMode} />
   {/if}
 {/each}

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

@@ -1 +1 @@
-{"version":3,"file":"VectorSceneNodes.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorSceneNodes.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAI9D,UAAU,KAAK;IACb,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;CACpC;AAgDH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"VectorSceneNodes.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorSceneNodes.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAK9D,UAAU,KAAK;IACb,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;CACpC;AA8BH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,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 VectorAppearancePanel from './VectorAppearancePanel.svelte';
   import VectorEnvelopePanel from './VectorEnvelopePanel.svelte';
   import VectorGradientEditor from './VectorGradientEditor.svelte';
 
@@ -221,6 +222,7 @@
         oninput={(e) => apply({ opacity: parseFloat(e.currentTarget.value) })}
       />
     </label>
+    <VectorAppearancePanel {controller} />
     <VectorEffectsPanel {controller} />
     <VectorEnvelopePanel {controller} />
   {/if}

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;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"}
+{"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;AASjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiKH,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

@@ -10,6 +10,9 @@ 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 VectorFilterDefs } from "./VectorFilterDefs.svelte";
+export { default as VectorPaintPath } from "./VectorPaintPath.svelte";
+export { default as VectorAppearancePanel } from "./VectorAppearancePanel.svelte";
 export { default as VectorGradientAnnotator } from "./VectorGradientAnnotator.svelte";
 export { default as VectorGradientEditor } from "./VectorGradientEditor.svelte";
 export * from "./createVectorEditor.svelte.js";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vector/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,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"}
+{"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,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,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

@@ -7,6 +7,9 @@ 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 VectorFilterDefs } from "./VectorFilterDefs.svelte";
+export { default as VectorPaintPath } from "./VectorPaintPath.svelte";
+export { default as VectorAppearancePanel } from "./VectorAppearancePanel.svelte";
 export { default as VectorGradientAnnotator } from "./VectorGradientAnnotator.svelte";
 export { default as VectorGradientEditor } from "./VectorGradientEditor.svelte";
 export * from "./createVectorEditor.svelte.js";

package/package.json

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