@pixerate/editor-svelte 0.36.0 → 0.38.0

package/dist/vector/VectorBlendControls.svelte

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

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

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

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

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

package/dist/vector/VectorCanvas.svelte

@@ -17,6 +17,7 @@
   } from '@pixerate/editor/vector';
   import VectorGradientDefs from './VectorGradientDefs.svelte';
   import VectorSceneNodes from './VectorSceneNodes.svelte';
+  import VectorWidthPointEditor from './VectorWidthPointEditor.svelte';
   import { vectorStateOf } from './subscribe.svelte.js';
 
   interface Props {
@@ -54,6 +55,8 @@
   const scene = $derived(getVectorSceneRenderData(view, { idPrefix }));
   const overlay = $derived(getVectorOverlayRenderData(view));
   const box = $derived(overlay.selectionBox);
+  const edit = $derived(view.widthPointEdit);
+  const editAt = $derived(edit ? { x: edit.point.x * view.viewport.zoom + view.viewport.x, y: edit.point.y * view.viewport.zoom + view.viewport.y } : null);
   const closing = $derived(view.tool === 'pen' ? overlay.anchors.find((a) => a.closes && a.hovered) : undefined);
   const hs = THEME.transformHandleSize;
   const as = THEME.anchorSize;
@@ -225,6 +228,25 @@
         <circle cx={w.x} cy={w.y} r={1.5} fill={accentColor} />
       </g>
     {/each}
+    {#each overlay.blend.spines as sp (sp.id)}
+      <g data-vector-blend-spine={sp.id} data-replaced={sp.replaced || undefined}>
+        <path d={sp.d} fill="none" stroke={accentColor} stroke-dasharray="4 3" />
+        {#each sp.keys as k, i (i)}
+          <circle cx={k.x} cy={k.y} r={THEME.handleRadius} fill={THEME.handleFill} stroke={accentColor} />
+        {/each}
+      </g>
+    {/each}
+    {#if overlay.blend.start}
+      <g data-vector-blend-start="">
+        <path d={overlay.blend.start.d} fill="none" stroke={accentColor} stroke-width="2" />
+        {#if overlay.blend.start.anchor}
+          <circle cx={overlay.blend.start.anchor.x} cy={overlay.blend.start.anchor.y} r={THEME.handleRadius + 1} fill={accentColor} />
+        {/if}
+      </g>
+    {/if}
+    {#each overlay.blend.anchors as a, i (i)}
+      <rect data-vector-blend-anchor={i} x={a.x - as / 2} y={a.y - as / 2} width={as} height={as} fill={a.hovered ? accentColor : THEME.handleFill} stroke={accentColor} />
+    {/each}
     {#if overlay.widthSpot}
       <g data-vector-width-spot="">
         <line x1={overlay.widthSpot.left.x} y1={overlay.widthSpot.left.y} x2={overlay.widthSpot.right.x} y2={overlay.widthSpot.right.y} stroke={accentColor} stroke-dasharray="3 2" />
@@ -337,4 +359,12 @@
       <text data-vector-status="" x="8" y="100%" dy="-8" font-size="11" fill={accentColor} style="font-family:system-ui,sans-serif">{overlay.status}</text>
     {/if}
   </g>
+  {#if edit && editAt}
+    <!-- Width Point Edit (double-click with the width tool), beside the point. -->
+    <foreignObject data-vector-width-point-edit="" x={editAt.x + 12} y={editAt.y + 12} width="180" height="140" style="overflow:visible">
+      {#key `${edit.nodeId}:${edit.index}:${edit.t}`}
+        <VectorWidthPointEditor {controller} {edit} {accentColor} />
+      {/key}
+    </foreignObject>
+  {/if}
 </svg>

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

package/dist/vector/VectorToolbar.svelte

@@ -13,6 +13,7 @@
   } from '@pixerate/editor/vector';
   import { vectorStateOf } from './subscribe.svelte.js';
   import { vectorButtonClass } from './styles.js';
+  import VectorBlendControls from './VectorBlendControls.svelte';
 
   interface Props {
     controller: VectorEditorController;
@@ -30,10 +31,15 @@
      * those tools are active (default `true`).
      */
     showPathEdit?: boolean;
+    /**
+     * Blend: Make Blend, spacing (steps, distance or smooth colour), steps / distance, orient to
+     * spine, Replace Spine, Expand and Release (default `true`).
+     */
+    showBlend?: boolean;
     class?: string;
   }
 
-  let { controller, tools = VECTOR_TOOLS, showHistory = true, showArrange = true, showSnap = true, showPathEdit = true, class: className = '' }: Props = $props();
+  let { controller, tools = VECTOR_TOOLS, showHistory = true, showArrange = true, showSnap = true, showPathEdit = true, showBlend = true, class: className = '' }: Props = $props();
 
   const snapTitle = 'Snap to objects';
   const modKey = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform ?? '') ? '⌘' : 'Ctrl';
@@ -182,6 +188,9 @@
       {/if}
     </div>
   {/if}
+  {#if showBlend}
+    <VectorBlendControls {controller} />
+  {/if}
   {#if showArrange}
     <div class="ml-1 flex items-center gap-1" role="group" aria-label="Combine">
       {#each combine as item (item.title)}{@render action(item)}{/each}

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

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

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

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

package/dist/vector/VectorWidthPointEditor.svelte

@@ -0,0 +1,99 @@
+<!--
+  Width Point Edit: the position (percent along the path) and the left / right side widths
+  (document units) of the width point a width-tool double-click opened. Apply (or Enter) sets
+  them with `commitWidthPointEdit`; Cancel or Escape closes it. `<VectorCanvas>` shows it next
+  to the point; use it on its own to place it elsewhere.
+-->
+<script lang="ts">
+  import { VECTOR_OVERLAY_THEME as THEME, type VectorEditorController, type VectorWidthPointEdit } from '@pixerate/editor/vector';
+
+  interface Props {
+    controller: VectorEditorController;
+    /** The point being edited (`state.widthPointEdit`). */
+    edit: VectorWidthPointEdit;
+    /** Accent colour of the Apply button (default sky blue). */
+    accentColor?: string;
+    class?: string;
+    style?: string;
+  }
+
+  let { controller, edit, accentColor = THEME.accent, class: className = '', style = '' }: Props = $props();
+
+  const round = (v: number, digits: number) => String(Math.round(v * 10 ** digits) / 10 ** digits);
+  // The fields start from the point; the canvas re-keys the editor when it opens on another one.
+  // svelte-ignore state_referenced_locally
+  let position = $state<string | number | null>(round(edit.t * 100, 2));
+  // svelte-ignore state_referenced_locally
+  let left = $state<string | number | null>(round(edit.left, 3));
+  // svelte-ignore state_referenced_locally
+  let right = $state<string | number | null>(round(edit.right, 3));
+  let form: HTMLFormElement | undefined = $state();
+
+  const num = (v: unknown) => (String(v ?? '').trim() !== '' && Number.isFinite(Number(v)) ? Number(v) : undefined);
+
+  // Hand the keyboard back to the canvas around it.
+  function refocus() {
+    (form?.closest('svg') as SVGSVGElement | null)?.focus?.({ preventScroll: true });
+  }
+
+  function close() {
+    refocus();
+    controller.closeWidthPointEdit();
+  }
+
+  function apply(e: SubmitEvent) {
+    e.preventDefault();
+    const t = num(position);
+    refocus();
+    controller.commitWidthPointEdit({ t: t === undefined ? undefined : Math.min(Math.max(t, 0), 100) / 100, left: num(left), right: num(right) });
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    e.stopPropagation();
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      close();
+    }
+  }
+
+  const stop = (e: Event) => e.stopPropagation();
+  const fieldStyle = 'display:flex;align-items:center;justify-content:space-between;gap:6px';
+  const inputStyle = 'width:72px;font:inherit;padding:1px 4px';
+</script>
+
+<!-- Keep the canvas from treating clicks, keys and clipboard use in here as editing gestures. -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<form
+  bind:this={form}
+  data-vector-width-point-editor=""
+  aria-label="Width point"
+  class={className}
+  style="display:grid;gap:4px;padding:8px;background:#ffffff;border:1px solid rgba(0,0,0,0.15);border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.15);font:12px system-ui,sans-serif;color:#18181b;{style}"
+  onpointerdown={stop}
+  onpointermove={stop}
+  onpointerup={stop}
+  ondblclick={stop}
+  oncopy={stop}
+  oncut={stop}
+  onpaste={stop}
+  onkeydown={onKeyDown}
+  onsubmit={apply}
+>
+  <label style={fieldStyle}>
+    Position %
+    <!-- svelte-ignore a11y_autofocus -->
+    <input aria-label="Width point position" type="number" min="0" max="100" step="any" bind:value={position} style={inputStyle} autofocus />
+  </label>
+  <label style={fieldStyle}>
+    Left
+    <input aria-label="Width point left side" type="number" min="0" step="any" bind:value={left} style={inputStyle} />
+  </label>
+  <label style={fieldStyle}>
+    Right
+    <input aria-label="Width point right side" type="number" min="0" step="any" bind:value={right} style={inputStyle} />
+  </label>
+  <div style="display:flex;justify-content:flex-end;gap:4px;margin-top:2px">
+    <button type="button" onclick={close}>Cancel</button>
+    <button type="submit" style="background:{accentColor};color:#ffffff;border:none;border-radius:4px;padding:2px 8px">{edit.index === null ? 'Add' : 'Apply'}</button>
+  </div>
+</form>

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

@@ -0,0 +1,14 @@
+import { type VectorEditorController, type VectorWidthPointEdit } from '@pixerate/editor/vector';
+interface Props {
+    controller: VectorEditorController;
+    /** The point being edited (`state.widthPointEdit`). */
+    edit: VectorWidthPointEdit;
+    /** Accent colour of the Apply button (default sky blue). */
+    accentColor?: string;
+    class?: string;
+    style?: string;
+}
+declare const VectorWidthPointEditor: import("svelte").Component<Props, {}, "">;
+type VectorWidthPointEditor = ReturnType<typeof VectorWidthPointEditor>;
+export default VectorWidthPointEditor;
+//# sourceMappingURL=VectorWidthPointEditor.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VectorWidthPointEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorWidthPointEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAiC,KAAK,sBAAsB,EAAE,KAAK,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAG9H,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,uDAAuD;IACvD,IAAI,EAAE,oBAAoB,CAAC;IAC3B,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0EH,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/vector/index.d.ts

@@ -3,6 +3,7 @@ import type VectorCanvasComponent from "./VectorCanvas.svelte";
 import type VectorEditorComponent from "./VectorEditor.svelte";
 export { default as VectorEditor } from "./VectorEditor.svelte";
 export { default as VectorCanvas } from "./VectorCanvas.svelte";
+export { default as VectorWidthPointEditor } from "./VectorWidthPointEditor.svelte";
 export { default as VectorToolbar } from "./VectorToolbar.svelte";
 export { default as VectorStylePanel } from "./VectorStylePanel.svelte";
 export { default as VectorSceneNodes } from "./VectorSceneNodes.svelte";

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

package/dist/vector/index.js

@@ -1,5 +1,6 @@
 export { default as VectorEditor } from "./VectorEditor.svelte";
 export { default as VectorCanvas } from "./VectorCanvas.svelte";
+export { default as VectorWidthPointEditor } from "./VectorWidthPointEditor.svelte";
 export { default as VectorToolbar } from "./VectorToolbar.svelte";
 export { default as VectorStylePanel } from "./VectorStylePanel.svelte";
 export { default as VectorSceneNodes } from "./VectorSceneNodes.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.36.0",
+  "version": "0.38.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.39.0"
+    "@pixerate/editor": "0.41.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",