@pixerate/editor-svelte 0.29.0 → 0.30.0

package/README.md

@@ -83,6 +83,7 @@ Tables are on by default in `createRichTextPreset` (`table: false` turns them of
 | `@pixerate/editor-svelte/commands` | `CommandPalette`, `createCommandPalette` (`hotkey: "Mod+K"`; call `destroy()` when done), `createCommandShortcuts`, `useRegisterCommands` over a `CommandRegistry` from `@pixerate/editor/commands` (also re-exported from the root entry) |
 | `@pixerate/editor-svelte/persistence` | `createAutosave` (crash-recovery snapshots bound to a history / dirty flag, flushed on `pagehide`; call `destroy()` when done) and `<RecoveryPrompt>` (also re-exported from the root entry) |
 | `@pixerate/editor-svelte/generation` | `GenerationSettings` (controls generated from a model's capabilities, reference slots by role, plan adjustments; `onchange` / `onaddreference`), `createGenerationPlan(() => request, () => caps)`, `JobProgress`, `createJobProgress` (call `destroy()` when done) over `@pixerate/editor/generation` (also re-exported from the root entry) |
+| `@pixerate/editor-svelte/vector` | `VectorEditor` (toolbar, canvas and style panel), `VectorCanvas` (SVG canvas forwarding pointer, wheel, keyboard and clipboard events), `VectorToolbar`, `VectorStylePanel`, `VectorSceneNodes`, `VectorGradientDefs`, `createVectorEditor` (call `destroy()` when done) and `useVectorCommands` over `@pixerate/editor/vector` (see [the vector editor guide](../../docs/vector-editor.md)) |
 | `@pixerate/editor-svelte/parameters` | `ParametersPanel` (a whole schema with groups, presets, undo / reset / randomize and keyframe diamonds), `createParameters` (call `destroy()` when done), `useParameterCommands`, and the field controls `ParameterFieldControl`, `ParameterSlider`, `ParameterToggle`, `ParameterSelect`, `ParameterColor`, `ParameterVector`, `ParameterImage`, `ParameterText`, `KeyframeDiamond` over `@pixerate/editor/parameters` (see [the parameters guide](../../docs/parameters.md)) |
 | `@pixerate/editor-svelte/canvas` | Runes for `@xyflow/svelte`: `createCanvasGraph`, `createCanvasClipboard`, `createCanvasDocking`, `createCanvasShortcuts`, `createCanvasInteractions`, `createCanvasExplosion`, `createCanvasNodeSync`, `createCanvasMultiDrag`, `createStreamingCanvas`, `AgentPresenceLayer`, `FloatingHorizontalScrollbar`, plus layout helpers |
 

package/dist/canvas/createCanvasAnimation.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createCanvasAnimation.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasAnimation.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,kBAAkB,EACvB,KAAK,sBAAsB,EAC3B,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EACzB,KAAK,KAAK,EACV,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,WAAW,4BAA4B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU;IAClF,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,mDAAmD;IACnD,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,gFAAgF;IAChF,cAAc,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;IAChC,+FAA+F;IAC/F,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,uFAAuF;IACvF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAC;IAC3C,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EAAE,OAAO,EAAE,4BAA4B,CAAC,KAAK,CAAC;;;;;;;;;;kBA2DnG,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAag+oI,CAAC;;;;;;;;;;;YAAg/C,CAAC;mBAA8B,CAAC;;;;;;;YAAmjB,CAAC;gBAA0B,CAAC;;;EAH5ltI;AAED,MAAM,MAAM,qBAAqB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,IAAI,UAAU,CAAC,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAC,CAAC"}
+{"version":3,"file":"createCanvasAnimation.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasAnimation.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,kBAAkB,EACvB,KAAK,sBAAsB,EAC3B,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EACzB,KAAK,KAAK,EACV,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,WAAW,4BAA4B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU;IAClF,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,mDAAmD;IACnD,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,gFAAgF;IAChF,cAAc,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;IAChC,+FAA+F;IAC/F,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,uFAAuF;IACvF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAC;IAC3C,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EAAE,OAAO,EAAE,4BAA4B,CAAC,KAAK,CAAC;;;;;;;;;;kBA2DnG,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAa0rgH,CAAC;;;;;;;;;;;YAAg/C,CAAC;mBAA8B,CAAC;;;;;;;YAAmjB,CAAC;gBAA0B,CAAC;;;EAHtzkH;AAED,MAAM,MAAM,qBAAqB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,IAAI,UAAU,CAAC,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAC,CAAC"}

package/dist/canvas/createCanvasArrange.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createCanvasArrange.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasArrange.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAGN,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,EACxB,KAAK,8BAA8B,EACnC,KAAK,SAAS,EACd,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAI7C,KAAK,WAAW,GAAG,8BAA8B,CAAC,GAAG,CAAC,CAAC;AAEvD,MAAM,WAAW,0BAA0B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,CAChF,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,GAAG,gBAAgB,CAAC;IACrE,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EACxE,OAAO,EAAE,0BAA0B,CAAC,KAAK,CAAC;;IAkBzC;;;;;OAKG;wBACiB,MAAM;;;;;;;;;;sBAoDu5lF,CAAC;sBAAiE,CAAC;sBAAiE,CAAC;oBAA+D,CAAC;cAAyD,CAAC;gBAAiD,CAAC;;;;;;;;;0BAA8tC,CAAC;;yBAA6kB,CAAC;;0BAAgf,CAAC;;;;;;;;;;EAxCjgrF;AAED,MAAM,MAAM,aAAa,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,IAAI,UAAU,CAAC,OAAO,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC;AAEjH,MAAM,WAAW,6BAA6B;IAC7C,OAAO,EAAE;QAAE,SAAS,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,OAAO,CAAA;KAAE,CAAC;IACjE,uEAAuE;IACvE,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,OAAO,CAAA;KAAE,CAAC;IAC1D,aAAa,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,sBAAsB,EAAE,CAAC;CAC7C;AAED;;;;;GAKG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,6BAA6B,GAAG,MAAM,IAAI,CAqB/F"}
+{"version":3,"file":"createCanvasArrange.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasArrange.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAGN,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,EACxB,KAAK,8BAA8B,EACnC,KAAK,SAAS,EACd,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAI7C,KAAK,WAAW,GAAG,8BAA8B,CAAC,GAAG,CAAC,CAAC;AAEvD,MAAM,WAAW,0BAA0B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,CAChF,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,GAAG,gBAAgB,CAAC;IACrE,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EACxE,OAAO,EAAE,0BAA0B,CAAC,KAAK,CAAC;;IAkBzC;;;;;OAKG;wBACiB,MAAM;;;;;;;;;;sBAoDin9D,CAAC;sBAAiE,CAAC;sBAAiE,CAAC;oBAA+D,CAAC;cAAyD,CAAC;gBAAiD,CAAC;;;;;;;;;0BAA8tC,CAAC;;yBAA6kB,CAAC;;0BAAgf,CAAC;;;;;;;;;;EAxC3tiE;AAED,MAAM,MAAM,aAAa,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,IAAI,UAAU,CAAC,OAAO,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC;AAEjH,MAAM,WAAW,6BAA6B;IAC7C,OAAO,EAAE;QAAE,SAAS,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,OAAO,CAAA;KAAE,CAAC;IACjE,uEAAuE;IACvE,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,OAAO,CAAA;KAAE,CAAC;IAC1D,aAAa,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,sBAAsB,EAAE,CAAC;CAC7C;AAED;;;;;GAKG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,6BAA6B,GAAG,MAAM,IAAI,CAqB/F"}

package/dist/canvas/createCanvasAutoLayout.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createCanvasAutoLayout.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasAutoLayout.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,iCAAiC,EACtC,KAAK,SAAS,EACd,KAAK,kBAAkB,EACvB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAI7C,KAAK,WAAW,GAAG,iCAAiC,CAAC,GAAG,CAAC,CAAC;AAE1D,MAAM,WAAW,6BAA6B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,CACnF,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,GAAG,gBAAgB,CAAC;IACrE,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EAAE,OAAO,EAAE,6BAA6B,CAAC,KAAK,CAAC;;;IA+BzH,2FAA2F;kBAC7E,OAAO,SAAS,kBAAkB,WAAW,OAAO,EAAE,GAAG,OAAO,EAAE;IAKhF,gFAAgF;0BAC1D,QAAQ,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAIjE,4EAA4E;iBAC/D,MAAM;IAInB;;;OAGG;wBACiB,MAAM;;;;;;;;aAiBsjjG,CAAC;;;;aAAiX,CAAC;cAAwB,CAAC;;;;;;;;;;gBAAqrD,CAAC;;;;EAHnpnG;AAED,MAAM,MAAM,gBAAgB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,IAAI,UAAU,CAAC,OAAO,sBAAsB,CAAC,KAAK,CAAC,CAAC,CAAC"}
+{"version":3,"file":"createCanvasAutoLayout.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasAutoLayout.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,iCAAiC,EACtC,KAAK,SAAS,EACd,KAAK,kBAAkB,EACvB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAI7C,KAAK,WAAW,GAAG,iCAAiC,CAAC,GAAG,CAAC,CAAC;AAE1D,MAAM,WAAW,6BAA6B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,CACnF,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,GAAG,gBAAgB,CAAC;IACrE,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EAAE,OAAO,EAAE,6BAA6B,CAAC,KAAK,CAAC;;;IA+BzH,2FAA2F;kBAC7E,OAAO,SAAS,kBAAkB,WAAW,OAAO,EAAE,GAAG,OAAO,EAAE;IAKhF,gFAAgF;0BAC1D,QAAQ,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAIjE,4EAA4E;iBAC/D,MAAM;IAInB;;;OAGG;wBACiB,MAAM;;;;;;;;aAiBgx6E,CAAC;;;;aAAiX,CAAC;cAAwB,CAAC;;;;;;;;;;gBAAqrD,CAAC;;;;EAH72+E;AAED,MAAM,MAAM,gBAAgB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,IAAI,UAAU,CAAC,OAAO,sBAAsB,CAAC,KAAK,CAAC,CAAC,CAAC"}

package/dist/canvas/createCanvasComponents.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createCanvasComponents.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasComponents.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EAEN,KAAK,iCAAiC,EACtC,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAI7C,KAAK,WAAW,GAAG,iCAAiC,CAAC,GAAG,CAAC,CAAC;AAE1D,MAAM,WAAW,6BAA6B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,CACnF,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,GAAG,UAAU,CAAC;IAC/D,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,oFAAoF;IACpF,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EAAE,OAAO,EAAE,6BAA6B,CAAC,KAAK,CAAC;IAazH,gCAAgC;;;;;4BASsl/J,CAAC;;UAAmM,CAAC;YAAsB,CAAC;eAAyB,CAAC;;8BAA8E,CAAC;;;;;;;;;;6BAA4nC,CAAC;;;;;;;;eAA6yB,CAAC;;;;;;;oBAAi7B,CAAC;;;;;;;;;;;;;;gBAA07C,CAAC;;EAHptoK;AAED,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC"}
+{"version":3,"file":"createCanvasComponents.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasComponents.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EAEN,KAAK,iCAAiC,EACtC,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAI7C,KAAK,WAAW,GAAG,iCAAiC,CAAC,GAAG,CAAC,CAAC;AAE1D,MAAM,WAAW,6BAA6B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,CACnF,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,GAAG,UAAU,CAAC;IAC/D,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACnC,oFAAoF;IACpF,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EAAE,OAAO,EAAE,6BAA6B,CAAC,KAAK,CAAC;IAazH,gCAAgC;;;;;4BASgz2I,CAAC;;UAAmM,CAAC;YAAsB,CAAC;eAAyB,CAAC;;8BAA8E,CAAC;;;;;;;;;;6BAA4nC,CAAC;;;;;;;;eAA6yB,CAAC;;;;;;;oBAAi7B,CAAC;;;;;;;;;;;;;;gBAA07C,CAAC;;EAH96/I;AAED,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC"}

package/dist/vector/VectorCanvas.svelte

@@ -0,0 +1,237 @@
+<script lang="ts" module>
+  // A counter keeps gradient ids unique per canvas (`$props.id()` needs Svelte 5.20).
+  let nextId = 0;
+</script>
+
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import {
+    VECTOR_OVERLAY_THEME as THEME,
+    getVectorOverlayRenderData,
+    getVectorSceneRenderData,
+    isVectorTextTarget,
+    toVectorKeyInput,
+    toVectorPointerInput,
+    type VectorEditorController
+  } from '@pixerate/editor/vector';
+  import VectorGradientDefs from './VectorGradientDefs.svelte';
+  import VectorSceneNodes from './VectorSceneNodes.svelte';
+  import { vectorStateOf } from './subscribe.svelte.js';
+
+  interface Props {
+    controller: VectorEditorController;
+    /** Fit the artboard into the canvas when it first gets a size (default `true`). */
+    fitOnMount?: boolean;
+    /** Draw a checkerboard behind a transparent artboard (default `true`). */
+    checkerboard?: boolean;
+    /** Overlay accent colour (default sky blue). */
+    accentColor?: string;
+    /** Prefix for gradient ids (keep it unique per page). */
+    idPrefix?: string;
+    class?: string;
+    style?: string;
+    /** Accessible label (default "Vector canvas"). */
+    'aria-label'?: string;
+  }
+
+  let {
+    controller,
+    fitOnMount = true,
+    checkerboard = true,
+    accentColor = THEME.accent,
+    idPrefix = `ve${++nextId}-`,
+    class: className = '',
+    style = '',
+    'aria-label': ariaLabel = 'Vector canvas'
+  }: Props = $props();
+
+  const store = vectorStateOf(() => controller);
+  const view = $derived(store.current);
+  const scene = $derived(getVectorSceneRenderData(view, { idPrefix }));
+  const overlay = $derived(getVectorOverlayRenderData(view));
+  const box = $derived(overlay.selectionBox);
+  const closing = $derived(view.tool === 'pen' ? overlay.anchors.find((a) => a.closes && a.hovered) : undefined);
+  const hs = THEME.transformHandleSize;
+  const as = THEME.anchorSize;
+
+  let svg: SVGSVGElement | undefined = $state();
+  let fitted = untrack(() => !fitOnMount);
+
+  $effect(() => {
+    const el = svg;
+    const current = controller;
+    if (!el || fitted) return;
+    const fit = () => {
+      const rect = el.getBoundingClientRect();
+      if (fitted || rect.width <= 0 || rect.height <= 0) return;
+      fitted = true;
+      current.zoomToFit({ width: rect.width, height: rect.height });
+    };
+    fit();
+    if (fitted || typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(fit);
+    observer.observe(el);
+    return () => observer.disconnect();
+  });
+
+  // Wheel needs a non-passive listener to stop page scroll / browser zoom.
+  $effect(() => {
+    const el = svg;
+    const current = controller;
+    if (!el) return;
+    const onWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      current.wheel(local(e), { x: e.deltaX, y: e.deltaY }, toVectorPointerInput(e));
+    };
+    el.addEventListener('wheel', onWheel, { passive: false });
+    return () => el.removeEventListener('wheel', onWheel);
+  });
+
+  function local(e: { clientX: number; clientY: number }) {
+    const rect = svg?.getBoundingClientRect();
+    return { x: e.clientX - (rect?.left ?? 0), y: e.clientY - (rect?.top ?? 0) };
+  }
+
+  function onPointerDown(e: PointerEvent) {
+    svg?.focus({ preventScroll: true });
+    (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
+    controller.pointerDown(local(e), toVectorPointerInput(e));
+  }
+
+  function onPointerUp(e: PointerEvent) {
+    (e.currentTarget as Element).releasePointerCapture?.(e.pointerId);
+    controller.pointerUp(local(e), toVectorPointerInput(e));
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (isVectorTextTarget(e.target)) return;
+    if (controller.keyDown(toVectorKeyInput(e))) e.preventDefault();
+  }
+
+  function clipboard(kind: 'copy' | 'cut' | 'paste') {
+    return (e: ClipboardEvent) => {
+      const data = e.clipboardData;
+      if (kind === 'paste') {
+        const text = data?.getData('text/plain') ?? '';
+        const pasted = text ? controller.paste(text) : controller.paste();
+        if (pasted.length) e.preventDefault();
+        return;
+      }
+      const text = kind === 'cut' ? controller.cut() : controller.copy();
+      if (text && data) {
+        data.setData('text/plain', text);
+        e.preventDefault();
+      }
+    };
+  }
+
+  const handleKey = (h: { ref: { nodeId: string; subpath: number; index: number; handle: string } }) =>
+    `${h.ref.nodeId}:${h.ref.subpath}:${h.ref.index}:${h.ref.handle}`;
+  const anchorKey = (a: { ref: { nodeId: string; subpath: number; index: number } }) => `${a.ref.nodeId}:${a.ref.subpath}:${a.ref.index}`;
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+<svg
+  bind:this={svg}
+  role="application"
+  aria-label={ariaLabel}
+  tabindex="0"
+  data-tool={view.tool}
+  class={className}
+  style="display:block;width:100%;height:100%;outline:none;touch-action:none;user-select:none;cursor:{view.cursor};{style}"
+  onpointerdown={onPointerDown}
+  onpointermove={(e) => controller.pointerMove(local(e), toVectorPointerInput(e))}
+  onpointerup={onPointerUp}
+  onpointercancel={() => controller.cancelDrag()}
+  onpointerleave={() => controller.pointerLeave()}
+  ondblclick={(e) => controller.doubleClick(local(e))}
+  onkeydown={onKeyDown}
+  onkeyup={(e) => controller.keyUp(toVectorKeyInput(e))}
+  oncopy={clipboard('copy')}
+  oncut={clipboard('cut')}
+  onpaste={clipboard('paste')}
+>
+  {#if checkerboard}
+    <defs>
+      <pattern id="{idPrefix}checker" width="16" height="16" patternUnits="userSpaceOnUse">
+        <rect width="16" height="16" fill="#ffffff" />
+        <rect width="8" height="8" fill="#e5e7eb" />
+        <rect x="8" y="8" width="8" height="8" fill="#e5e7eb" />
+      </pattern>
+    </defs>
+  {/if}
+  <VectorGradientDefs defs={scene.defs} />
+  <rect
+    data-vector-artboard=""
+    x={overlay.artboard.x}
+    y={overlay.artboard.y}
+    width={overlay.artboard.width}
+    height={overlay.artboard.height}
+    fill={scene.background ?? (checkerboard ? `url(#${idPrefix}checker)` : '#ffffff')}
+    stroke="rgba(0,0,0,0.12)"
+  />
+  <g data-vector-scene="" transform={scene.transform}>
+    <VectorSceneNodes nodes={scene.nodes} />
+  </g>
+  <g data-vector-overlay="" pointer-events="none" fill="none">
+    {#each overlay.outlines as o (o.id)}
+      <path d={o.d} stroke={accentColor} stroke-width={o.selected ? 1 : 1.5} opacity={o.selected ? 1 : 0.7} />
+    {/each}
+    {#if overlay.penPreview}
+      <path d={overlay.penPreview} stroke={accentColor} stroke-dasharray="4 3" />
+    {/if}
+    {#if box}
+      <g data-vector-selection="">
+        <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)}
+          {#if h.handle === 'rotate'}
+            <circle data-handle={h.handle} cx={h.x} cy={h.y} r={hs / 2 + 1} fill={THEME.handleFill} stroke={accentColor} />
+          {:else}
+            <rect data-handle={h.handle} x={h.x - hs / 2} y={h.y - hs / 2} width={hs} height={hs} fill={THEME.handleFill} stroke={accentColor} />
+          {/if}
+        {/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} />
+        <circle cx={h.x} cy={h.y} r={THEME.handleRadius + (h.hovered ? 1 : 0)} fill={THEME.handleFill} stroke={accentColor} />
+      </g>
+    {/each}
+    {#each overlay.anchors as a (anchorKey(a))}
+      {@const size = as + (a.hovered ? 2 : 0)}
+      {#if a.type === 'corner'}
+        <rect
+          data-vector-anchor={a.ref.index}
+          x={a.x - size / 2}
+          y={a.y - size / 2}
+          width={size}
+          height={size}
+          fill={a.selected ? accentColor : THEME.handleFill}
+          stroke={accentColor}
+        />
+      {:else}
+        <circle data-vector-anchor={a.ref.index} cx={a.x} cy={a.y} r={size / 2} fill={a.selected ? accentColor : THEME.handleFill} stroke={accentColor} />
+      {/if}
+    {/each}
+    {#if closing}
+      <circle cx={closing.x} cy={closing.y} r={as} stroke={accentColor} />
+    {/if}
+    {#if overlay.marquee}
+      <rect
+        data-vector-marquee=""
+        x={overlay.marquee.x}
+        y={overlay.marquee.y}
+        width={overlay.marquee.width}
+        height={overlay.marquee.height}
+        fill={THEME.marqueeFill}
+        stroke={accentColor}
+        stroke-dasharray="3 2"
+      />
+    {/if}
+    {#if overlay.status}
+      <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>
+</svg>

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

@@ -0,0 +1,20 @@
+import { type VectorEditorController } from '@pixerate/editor/vector';
+interface Props {
+    controller: VectorEditorController;
+    /** Fit the artboard into the canvas when it first gets a size (default `true`). */
+    fitOnMount?: boolean;
+    /** Draw a checkerboard behind a transparent artboard (default `true`). */
+    checkerboard?: boolean;
+    /** Overlay accent colour (default sky blue). */
+    accentColor?: string;
+    /** Prefix for gradient ids (keep it unique per page). */
+    idPrefix?: string;
+    class?: string;
+    style?: string;
+    /** Accessible label (default "Vector canvas"). */
+    'aria-label'?: string;
+}
+declare const VectorCanvas: import("svelte").Component<Props, {}, "">;
+type VectorCanvas = ReturnType<typeof VectorCanvas>;
+export default VectorCanvas;
+//# sourceMappingURL=VectorCanvas.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VectorCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorCanvas.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,EAOH,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,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;AA2KH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/vector/VectorEditor.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import type { VectorEditorController, VectorTool } from '@pixerate/editor/vector';
+  import VectorCanvas from './VectorCanvas.svelte';
+  import VectorStylePanel from './VectorStylePanel.svelte';
+  import VectorToolbar from './VectorToolbar.svelte';
+
+  interface Props {
+    controller: VectorEditorController;
+    /** Tools in the toolbar (default: all). */
+    tools?: readonly VectorTool[];
+    /** The style sidebar (default `true`). */
+    showStylePanel?: boolean;
+    /** Canvas height (default 520px). */
+    height?: number | string;
+    canvasProps?: Omit<ComponentProps<typeof VectorCanvas>, 'controller'>;
+    class?: string;
+  }
+
+  let { controller, tools, showStylePanel = true, height = 520, canvasProps = {}, class: className = '' }: Props = $props();
+</script>
+
+<div class="flex flex-col gap-2 {className}" data-vector-editor="">
+  <VectorToolbar {controller} {tools} />
+  <div class="flex min-h-0 flex-col gap-2 md:flex-row">
+    <div
+      class="relative min-h-[320px] flex-1 overflow-hidden rounded-md border border-border bg-muted/40"
+      style="height:{typeof height === 'number' ? `${height}px` : height}"
+    >
+      <VectorCanvas {controller} {...canvasProps} />
+    </div>
+    {#if showStylePanel}
+      <VectorStylePanel {controller} class="w-full shrink-0 rounded-md border border-border p-3 md:w-56" />
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'svelte';
+import type { VectorEditorController, VectorTool } from '@pixerate/editor/vector';
+import VectorCanvas from './VectorCanvas.svelte';
+interface Props {
+    controller: VectorEditorController;
+    /** Tools in the toolbar (default: all). */
+    tools?: readonly VectorTool[];
+    /** The style sidebar (default `true`). */
+    showStylePanel?: boolean;
+    /** Canvas height (default 520px). */
+    height?: number | string;
+    canvasProps?: Omit<ComponentProps<typeof VectorCanvas>, 'controller'>;
+    class?: string;
+}
+declare const VectorEditor: import("svelte").Component<Props, {}, "">;
+type VectorEditor = ReturnType<typeof VectorEditor>;
+export default VectorEditor;
+//# sourceMappingURL=VectorEditor.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VectorEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,EAAE,sBAAsB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,YAAY,MAAM,uBAAuB,CAAC;AAK/C,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,0CAA0C;IAC1C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,EAAE,YAAY,CAAC,CAAC;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0BH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/vector/VectorGradientDefs.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { SvgGradientDef } from '@pixerate/editor/vector';
+
+  interface Props {
+    defs: readonly SvgGradientDef[];
+  }
+
+  let { defs }: Props = $props();
+</script>
+
+{#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>
+      {: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}
+    {/each}
+  </defs>
+{/if}

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

@@ -0,0 +1,8 @@
+import type { SvgGradientDef } from '@pixerate/editor/vector';
+interface Props {
+    defs: readonly SvgGradientDef[];
+}
+declare const VectorGradientDefs: import("svelte").Component<Props, {}, "">;
+type VectorGradientDefs = ReturnType<typeof VectorGradientDefs>;
+export default VectorGradientDefs;
+//# sourceMappingURL=VectorGradientDefs.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/vector/VectorSceneNodes.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { VectorRenderNode } from '@pixerate/editor/vector';
+  import Self from './VectorSceneNodes.svelte';
+
+  interface Props {
+    nodes: readonly VectorRenderNode[];
+  }
+
+  let { nodes }: Props = $props();
+</script>
+
+{#each nodes as node (node.id)}
+  {#if node.kind === 'group'}
+    <g data-vector-id={node.id} opacity={node.opacity < 1 ? node.opacity : undefined}>
+      <Self nodes={node.children} />
+    </g>
+  {:else}
+    <path
+      data-vector-id={node.id}
+      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}
+    />
+  {/if}
+{/each}

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

@@ -0,0 +1,8 @@
+import type { VectorRenderNode } from '@pixerate/editor/vector';
+interface Props {
+    nodes: readonly VectorRenderNode[];
+}
+declare const VectorSceneNodes: import("svelte").Component<Props, {}, "">;
+type VectorSceneNodes = ReturnType<typeof VectorSceneNodes>;
+export default VectorSceneNodes;
+//# sourceMappingURL=VectorSceneNodes.svelte.d.ts.map

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

@@ -0,0 +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;AAqBH,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

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { getVectorSelectionStyle, vectorPaintToHex, type VectorEditorController } from '@pixerate/editor/vector';
+  import { vectorStateOf } from './subscribe.svelte.js';
+
+  interface Props {
+    controller: VectorEditorController;
+    class?: string;
+  }
+
+  let { controller, class: className = '' }: Props = $props();
+
+  const store = vectorStateOf(() => controller);
+  const view = $derived(store.current);
+  const style = $derived(getVectorSelectionStyle(view));
+  const source = $derived(
+    style ?? { fill: view.defaults.fill ?? null, stroke: view.defaults.stroke ?? null, strokeWidth: view.defaults.strokeWidth ?? 1, opacity: 1 }
+  );
+
+  function apply(patch: Record<string, unknown>) {
+    if (style) controller.setStyle(patch);
+    else controller.setDefaults(patch);
+  }
+
+  const paints = [
+    { key: 'fill' as const, label: 'Fill' },
+    { key: 'stroke' as const, label: 'Stroke' }
+  ];
+</script>
+
+<div class="space-y-2 {className}" aria-label={style ? 'Selection style' : 'New shape style'}>
+  <p class="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">{style ? 'Selection' : 'New shapes'}</p>
+  {#each paints as { key, label } (key)}
+    {@const paint = source[key]}
+    {@const hex = vectorPaintToHex(paint)}
+    {@const on = paint !== null && paint !== 'none'}
+    <div class="flex items-center gap-2" data-vector-style={key}>
+      <label class="flex w-16 items-center gap-1.5 text-xs text-foreground">
+        <input type="checkbox" checked={on} aria-label="{label} on" onchange={(e) => apply({ [key]: e.currentTarget.checked ? (hex ?? '#000000') : null })} />
+        {label}
+      </label>
+      <input
+        type="color"
+        aria-label="{label} colour"
+        class="h-7 w-10 cursor-pointer rounded border border-border bg-background disabled:opacity-40"
+        disabled={!on}
+        value={hex ?? '#000000'}
+        oninput={(e) => apply({ [key]: e.currentTarget.value })}
+      />
+      {#if on && !hex}<span class="truncate text-[11px] text-muted-foreground">{typeof paint === 'string' ? paint : 'Gradient'}</span>{/if}
+      {#if style?.mixed[key]}<span class="text-[11px] text-muted-foreground">Mixed</span>{/if}
+    </div>
+  {/each}
+  <label class="flex items-center gap-2 text-xs text-foreground">
+    <span class="w-16">Width</span>
+    <input
+      type="number"
+      min="0"
+      step="0.5"
+      aria-label="Stroke width"
+      class="h-7 w-20 rounded border border-border bg-background px-1.5 text-xs"
+      value={source.strokeWidth}
+      oninput={(e) => {
+        const n = parseFloat(e.currentTarget.value);
+        if (Number.isFinite(n) && n >= 0) apply({ strokeWidth: n });
+      }}
+    />
+  </label>
+  {#if style}
+    <label class="flex items-center gap-2 text-xs text-foreground">
+      <span class="w-16">Opacity</span>
+      <input
+        type="range"
+        min="0"
+        max="1"
+        step="0.05"
+        aria-label="Opacity"
+        class="h-4 flex-1 accent-primary"
+        value={source.opacity}
+        oninput={(e) => apply({ opacity: parseFloat(e.currentTarget.value) })}
+      />
+    </label>
+  {/if}
+</div>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"VectorStylePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorStylePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAA6C,KAAK,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAI/G,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2DH,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

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import {
+    VECTOR_TOOLS,
+    VECTOR_TOOL_GLYPHS,
+    VECTOR_TOOL_SHORTCUTS,
+    vectorToolLabel,
+    type VectorEditorController,
+    type VectorTool
+  } from '@pixerate/editor/vector';
+  import { vectorStateOf } from './subscribe.svelte.js';
+  import { vectorButtonClass } from './styles.js';
+
+  interface Props {
+    controller: VectorEditorController;
+    /** Tools to show (default: all). */
+    tools?: readonly VectorTool[];
+    /** Undo / redo buttons (default `true`). */
+    showHistory?: boolean;
+    /** Boolean, group, arrange and align buttons (default `true`). */
+    showArrange?: boolean;
+    class?: string;
+  }
+
+  let { controller, tools = VECTOR_TOOLS, showHistory = true, showArrange = true, class: className = '' }: Props = $props();
+
+  const store = vectorStateOf(() => controller);
+  const view = $derived(store.current);
+  const count = $derived(view.selection.length);
+  const groupSelected = $derived(view.selection.some((id) => controller.getNode(id)?.type === 'group'));
+
+  const combine = $derived([
+    { label: '∪', title: 'Union', run: () => controller.booleanOp('union'), disabled: count < 2 },
+    { label: '−', title: 'Subtract', run: () => controller.booleanOp('subtract'), disabled: count < 2 },
+    { label: '∩', title: 'Intersect', run: () => controller.booleanOp('intersect'), disabled: count < 2 },
+    { label: '⊻', title: 'Exclude', run: () => controller.booleanOp('exclude'), disabled: count < 2 },
+    { label: 'G', title: 'Group', run: () => controller.group(), disabled: count < 1 },
+    { label: 'U', title: 'Ungroup', run: () => controller.ungroup(), disabled: !groupSelected }
+  ]);
+  const arrange = $derived([
+    { label: '⇈', title: 'Bring to Front', run: () => controller.arrange('front'), disabled: count < 1 },
+    { label: '⇊', title: 'Send to Back', run: () => controller.arrange('back'), disabled: count < 1 },
+    { label: '⇤', title: 'Align Left', run: () => controller.align('left'), disabled: count < 1 },
+    { label: '↔', title: 'Align Center', run: () => controller.align('center'), disabled: count < 1 },
+    { label: '⇥', title: 'Align Right', run: () => controller.align('right'), disabled: count < 1 },
+    { label: '⤒', title: 'Align Top', run: () => controller.align('top'), disabled: count < 1 },
+    { label: '↕', title: 'Align Middle', run: () => controller.align('middle'), disabled: count < 1 },
+    { label: '⤓', title: 'Align Bottom', run: () => controller.align('bottom'), disabled: count < 1 }
+  ]);
+</script>
+
+{#snippet action(item: { label: string; title: string; run: () => unknown; disabled: boolean })}
+  <button type="button" class={vectorButtonClass} title={item.title} aria-label={item.title} disabled={item.disabled} onclick={() => void item.run()}>
+    {item.label}
+  </button>
+{/snippet}
+
+<div role="toolbar" aria-label="Vector tools" class="flex flex-wrap items-center gap-1 {className}">
+  <div class="flex items-center gap-1" role="group" aria-label="Tools">
+    {#each tools as tool (tool)}
+      <button
+        type="button"
+        data-vector-tool={tool}
+        class={vectorButtonClass}
+        aria-pressed={view.tool === tool}
+        title="{vectorToolLabel(tool)} ({VECTOR_TOOL_SHORTCUTS[tool]})"
+        aria-label={vectorToolLabel(tool)}
+        onclick={() => controller.setTool(tool)}
+      >
+        {VECTOR_TOOL_GLYPHS[tool]}
+      </button>
+    {/each}
+  </div>
+  {#if showHistory}
+    <div class="ml-1 flex items-center gap-1" role="group" aria-label="History">
+      {@render action({ label: '↶', title: view.canUndo ? `Undo ${view.undoLabel}` : 'Undo', run: () => controller.undo(), disabled: !view.canUndo })}
+      {@render action({ label: '↷', title: view.canRedo ? `Redo ${view.redoLabel}` : 'Redo', run: () => controller.redo(), disabled: !view.canRedo })}
+    </div>
+  {/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}
+    </div>
+    <div class="ml-1 flex items-center gap-1" role="group" aria-label="Arrange">
+      {#each arrange as item (item.title)}{@render action(item)}{/each}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,15 @@
+import { type VectorEditorController, type VectorTool } from '@pixerate/editor/vector';
+interface Props {
+    controller: VectorEditorController;
+    /** Tools to show (default: all). */
+    tools?: readonly VectorTool[];
+    /** Undo / redo buttons (default `true`). */
+    showHistory?: boolean;
+    /** Boolean, group, arrange and align buttons (default `true`). */
+    showArrange?: boolean;
+    class?: string;
+}
+declare const VectorToolbar: import("svelte").Component<Props, {}, "">;
+type VectorToolbar = ReturnType<typeof VectorToolbar>;
+export default VectorToolbar;
+//# sourceMappingURL=VectorToolbar.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VectorToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAKH,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,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkEH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,30 @@
+import { VectorEditorController, type VectorCommandOptions, type VectorEditorOptions, type VectorEditorState, type VectorTool } from "@pixerate/editor/vector";
+export interface SvelteVectorEditor {
+    readonly controller: VectorEditorController;
+    /** The controller's state (reactive). */
+    readonly state: VectorEditorState;
+    setTool(tool: VectorTool): void;
+    undo(): void;
+    redo(): void;
+    deleteSelection(): void;
+    toSvg(): string;
+    /** Stops listening to the controller (and destroys it when this rune created it). */
+    destroy(): void;
+}
+/**
+ * Svelte 5 rune: subscribes to a `VectorEditorController` (or creates one from options) and
+ * exposes its state reactively with bound actions.
+ */
+export declare function createVectorEditor(controllerOrOptions?: VectorEditorController | VectorEditorOptions): SvelteVectorEditor;
+/** Anything with `register(specs) → unregister` (a `CommandRegistry`). */
+export interface VectorCommandTarget {
+    register(specs: any): () => void;
+}
+/**
+ * Registers the controller's palette / agent commands (`vector.addShape`, `vector.boolean`, …)
+ * for the lifetime of the calling component (call it during initialisation), so
+ * `createCommandToolProvider` exposes them to agents. Pass a getter to follow a changing
+ * registry.
+ */
+export declare function useVectorCommands(registry: VectorCommandTarget | null | undefined | (() => VectorCommandTarget | null | undefined), controller: VectorEditorController, options?: VectorCommandOptions): void;
+//# sourceMappingURL=createVectorEditor.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createVectorEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/createVectorEditor.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EAEtB,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,KAAK,UAAU,EAChB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,UAAU,EAAE,sBAAsB,CAAC;IAC5C,yCAAyC;IACzC,QAAQ,CAAC,KAAK,EAAE,iBAAiB,CAAC;IAClC,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IAChC,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,IAAI,IAAI,CAAC;IACb,eAAe,IAAI,IAAI,CAAC;IACxB,KAAK,IAAI,MAAM,CAAC;IAChB,qFAAqF;IACrF,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,mBAAmB,GAAE,sBAAsB,GAAG,mBAAwB,GAAG,kBAAkB,CAuB7H;AAED,0EAA0E;AAC1E,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM,IAAI,CAAC;CAClC;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,mBAAmB,GAAG,IAAI,GAAG,SAAS,CAAC,EACjG,UAAU,EAAE,sBAAsB,EAClC,OAAO,GAAE,oBAAyB,GACjC,IAAI,CAMN"}

package/dist/vector/createVectorEditor.svelte.js

@@ -0,0 +1,43 @@
+import { VectorEditorController, createVectorCommands, } from "@pixerate/editor/vector";
+/**
+ * Svelte 5 rune: subscribes to a `VectorEditorController` (or creates one from options) and
+ * exposes its state reactively with bound actions.
+ */
+export function createVectorEditor(controllerOrOptions = {}) {
+    const owned = !(controllerOrOptions instanceof VectorEditorController);
+    const controller = controllerOrOptions instanceof VectorEditorController ? controllerOrOptions : new VectorEditorController(controllerOrOptions);
+    let state = $state.raw(controller.getState());
+    const unsubscribe = controller.subscribe((next) => {
+        state = next;
+    });
+    return {
+        controller,
+        get state() {
+            return state;
+        },
+        setTool: (tool) => controller.setTool(tool),
+        undo: () => void controller.undo(),
+        redo: () => void controller.redo(),
+        deleteSelection: () => void controller.deleteSelection(),
+        toSvg: () => controller.toSvg(),
+        destroy: () => {
+            unsubscribe();
+            if (owned)
+                controller.destroy();
+        },
+    };
+}
+/**
+ * Registers the controller's palette / agent commands (`vector.addShape`, `vector.boolean`, …)
+ * for the lifetime of the calling component (call it during initialisation), so
+ * `createCommandToolProvider` exposes them to agents. Pass a getter to follow a changing
+ * registry.
+ */
+export function useVectorCommands(registry, controller, options = {}) {
+    $effect(() => {
+        const target = typeof registry === "function" ? registry() : registry;
+        if (!target)
+            return;
+        return target.register(createVectorCommands(controller, options));
+    });
+}

package/dist/vector/index.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "svelte";
+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 VectorToolbar } from "./VectorToolbar.svelte";
+export { default as VectorStylePanel } from "./VectorStylePanel.svelte";
+export { default as VectorSceneNodes } from "./VectorSceneNodes.svelte";
+export { default as VectorGradientDefs } from "./VectorGradientDefs.svelte";
+export * from "./createVectorEditor.svelte.js";
+export { vectorStateOf } from "./subscribe.svelte.js";
+export * from "./styles.js";
+export type VectorCanvasProps = ComponentProps<typeof VectorCanvasComponent>;
+export type VectorEditorProps = ComponentProps<typeof VectorEditorComponent>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/vector/index.js

@@ -0,0 +1,9 @@
+export { default as VectorEditor } from "./VectorEditor.svelte";
+export { default as VectorCanvas } from "./VectorCanvas.svelte";
+export { default as VectorToolbar } from "./VectorToolbar.svelte";
+export { default as VectorStylePanel } from "./VectorStylePanel.svelte";
+export { default as VectorSceneNodes } from "./VectorSceneNodes.svelte";
+export { default as VectorGradientDefs } from "./VectorGradientDefs.svelte";
+export * from "./createVectorEditor.svelte.js";
+export { vectorStateOf } from "./subscribe.svelte.js";
+export * from "./styles.js";

package/dist/vector/styles.d.ts

@@ -0,0 +1,3 @@
+/** Tailwind classes shared by the vector toolbar and style panel (same as the React package). */
+export declare const vectorButtonClass = "inline-flex h-8 min-w-8 items-center justify-center rounded-md border border-border bg-background px-2 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground";
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/vector/styles.ts"],"names":[],"mappings":"AAAA,iGAAiG;AACjG,eAAO,MAAM,iBAAiB,2QAC4O,CAAC"}

package/dist/vector/styles.js

@@ -0,0 +1,2 @@
+/** Tailwind classes shared by the vector toolbar and style panel (same as the React package). */
+export const vectorButtonClass = "inline-flex h-8 min-w-8 items-center justify-center rounded-md border border-border bg-background px-2 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground";

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

@@ -0,0 +1,6 @@
+import type { VectorEditorController, VectorEditorState } from "@pixerate/editor/vector";
+/** Reactive state of a (possibly replaced) controller prop, for use inside components. */
+export declare function vectorStateOf(getController: () => VectorEditorController): {
+    readonly current: VectorEditorState;
+};
+//# sourceMappingURL=subscribe.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"subscribe.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/subscribe.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAEzF,0FAA0F;AAC1F,wBAAgB,aAAa,CAAC,aAAa,EAAE,MAAM,sBAAsB,GAAG;IAAE,QAAQ,CAAC,OAAO,EAAE,iBAAiB,CAAA;CAAE,CAgBlH"}

package/dist/vector/subscribe.svelte.js

@@ -0,0 +1,17 @@
+import { untrack } from "svelte";
+/** Reactive state of a (possibly replaced) controller prop, for use inside components. */
+export function vectorStateOf(getController) {
+    let view = $state.raw(untrack(() => getController().getState()));
+    $effect(() => {
+        const controller = getController();
+        view = controller.getState();
+        return untrack(() => controller.subscribe((next) => {
+            view = next;
+        }));
+    });
+    return {
+        get current() {
+            return view;
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -58,6 +58,11 @@
       "svelte": "./dist/parameters/index.js",
       "default": "./dist/parameters/index.js"
     },
+    "./vector": {
+      "types": "./dist/vector/index.d.ts",
+      "svelte": "./dist/vector/index.js",
+      "default": "./dist/vector/index.js"
+    },
     "./package.json": "./package.json"
   },
   "typesVersions": {
@@ -85,6 +90,9 @@
       ],
       "parameters": [
         "./dist/parameters/index.d.ts"
+      ],
+      "vector": [
+        "./dist/vector/index.d.ts"
       ]
     }
   },
@@ -99,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.31.0"
+    "@pixerate/editor": "0.32.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",