@pixerate/editor-svelte 0.81.0 → 0.83.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"VectorConnectorPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorConnectorPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAQH,KAAK,sBAAsB,EAC5B,MAAM,yBAAyB,CAAC;AAIjC;;;;GAIG;AACH,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2DH,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/vector/VectorConstraintsPanel.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+  import { getVectorConstraintPanel, type VectorConstraintAction, type VectorEditorController } from '@pixerate/editor/vector';
+  import { vectorStateOf } from './subscribe.svelte.js';
+
+  /**
+   * Constraints: the degrees of freedom left, the constraints the selection allows (pick anchors
+   * with the direct tool, or round paths), Auto Constrain, the constraints of the selection with
+   * their values, and the named parameters. Each change is one undo step.
+   */
+  interface Props {
+    controller: VectorEditorController;
+    class?: string;
+  }
+
+  let { controller, class: className = '' }: Props = $props();
+
+  const store = vectorStateOf(() => controller);
+  const view = $derived(store.current);
+  const panel = $derived(getVectorConstraintPanel(view));
+  const shown = $derived(panel.actions.length > 0 || panel.constraints.length > 0 || !!view.document.constraints?.length || view.tool === 'direct');
+  let error: string | null = $state(null);
+  let paramName = $state('');
+  let paramValue = $state('');
+  const report = (r: { ok: boolean; message?: string }) => {
+    error = r.ok ? null : (r.message ?? null);
+  };
+  const add = (a: VectorConstraintAction) => report(controller.addConstraint({ kind: a.kind, refs: a.refs }));
+  function addParameter(e: SubmitEvent) {
+    e.preventDefault();
+    if (!paramName.trim()) return;
+    const r = controller.setConstraintValue(paramName.trim(), paramValue);
+    report(r);
+    if (r.ok) {
+      paramName = '';
+      paramValue = '';
+    }
+  }
+  const blurOnEnter = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') (e.currentTarget as HTMLInputElement).blur();
+  };
+
+  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 inputClass = 'h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs';
+  const labelClass = 'w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground';
+</script>
+
+{#if shown}
+  <div class="space-y-2 {className}" data-vector-constraints-panel="" data-dof-status={panel.dof.status} aria-label="Constraints">
+    <div class="flex items-center gap-1">
+      <span class={labelClass}>Constraints</span>
+      <span class="flex-1 truncate text-[11px] text-muted-foreground" data-vector-dof="">{panel.dof.message}</span>
+      <button type="button" class={buttonClass} title="Auto Constrain: add what the selection (or the drawing) nearly satisfies" onclick={() => report(controller.autoConstrain())}>Auto</button>
+    </div>
+    {#if panel.actions.length}
+      <div class="flex flex-wrap gap-1" role="group" aria-label="Add constraint">
+        {#each panel.actions as a (a.kind)}
+          <button type="button" class={buttonClass} data-vector-constraint-action={a.kind} title="Add {a.label}" onclick={() => add(a)}>{a.label}</button>
+        {/each}
+      </div>
+    {/if}
+    {#if panel.constraints.length}
+      <ul class="space-y-1">
+        {#each panel.constraints as c (c.id)}
+          <li data-vector-constraint={c.id} data-satisfied={c.satisfied && !c.conflict ? 'true' : 'false'} class="flex items-center gap-1 text-xs text-foreground">
+            <span class="min-w-0 flex-1 truncate {c.conflict || !c.satisfied ? 'text-destructive' : ''}">{c.label}{c.name ? ` ${c.name}` : ''}</span>
+            {#if c.value !== undefined}
+              {#key `${c.id}:${c.value}`}
+                <input
+                  aria-label="Value of {c.name ?? c.id}"
+                  class="{inputClass} w-16 flex-none"
+                  value={c.value}
+                  onkeydown={blurOnEnter}
+                  onblur={(e) => {
+                    const v = (e.currentTarget as HTMLInputElement).value;
+                    if (v.trim() !== c.value) report(controller.setConstraintValue(c.id, v));
+                  }}
+                />
+              {/key}
+            {/if}
+            <button type="button" class={buttonClass} aria-label="Remove {c.label} constraint" onclick={() => report(controller.removeConstraints([c.id]))}>×</button>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+    <div class="space-y-1" aria-label="Parameters">
+      {#each panel.parameters as p (p.name)}
+        <div class="flex items-center gap-1 text-xs">
+          <span class="w-12 truncate font-mono">{p.name}</span>
+          {#key `${p.name}:${p.value}`}
+            <input
+              aria-label="Parameter {p.name}"
+              class={inputClass}
+              value={p.value}
+              onkeydown={blurOnEnter}
+              onblur={(e) => {
+                const v = (e.currentTarget as HTMLInputElement).value;
+                if (v.trim() !== p.value) report(controller.setConstraintValue(p.name, v));
+              }}
+            />
+          {/key}
+          <span class="w-10 text-right text-muted-foreground">{p.result === null ? '!' : Math.round(p.result * 100) / 100}</span>
+        </div>
+      {/each}
+      <form class="flex items-center gap-1" onsubmit={addParameter}>
+        <input aria-label="New parameter name" placeholder="name" class="{inputClass} w-12 flex-none" bind:value={paramName} />
+        <input aria-label="New parameter value" placeholder="value" class={inputClass} bind:value={paramValue} />
+        <button type="submit" class={buttonClass} aria-label="Add parameter">+</button>
+      </form>
+    </div>
+    {#if error}<p class="text-[11px] text-destructive">{error}</p>{/if}
+  </div>
+{/if}

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

@@ -0,0 +1,14 @@
+import { type VectorEditorController } from '@pixerate/editor/vector';
+/**
+ * Constraints: the degrees of freedom left, the constraints the selection allows (pick anchors
+ * with the direct tool, or round paths), Auto Constrain, the constraints of the selection with
+ * their values, and the named parameters. Each change is one undo step.
+ */
+interface Props {
+    controller: VectorEditorController;
+    class?: string;
+}
+declare const VectorConstraintsPanel: import("svelte").Component<Props, {}, "">;
+type VectorConstraintsPanel = ReturnType<typeof VectorConstraintsPanel>;
+export default VectorConstraintsPanel;
+//# sourceMappingURL=VectorConstraintsPanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VectorConstraintsPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorConstraintsPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAyD,KAAK,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAI3H;;;;GAIG;AACH,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgGH,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/vector/VectorFramePanel.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+  import {
+    VECTOR_HORIZONTAL_RESIZING,
+    VECTOR_HORIZONTAL_RESIZING_LABELS,
+    VECTOR_VERTICAL_RESIZING,
+    VECTOR_VERTICAL_RESIZING_LABELS,
+    getVectorFramePanel,
+    vectorPaintToHex,
+    type VectorEditorController,
+    type VectorHorizontalResizing,
+    type VectorVerticalResizing
+  } from '@pixerate/editor/vector';
+  import { vectorStateOf } from './subscribe.svelte.js';
+
+  /**
+   * Frames (artboards): Frame Selection; for a selected frame its position, size (its children
+   * follow their constraints), background and clipping; for objects inside a frame their resizing
+   * constraints. Each change is one undo step (sizes apply on Enter or blur).
+   */
+  interface Props {
+    controller: VectorEditorController;
+    class?: string;
+  }
+
+  let { controller, class: className = '' }: Props = $props();
+
+  const store = vectorStateOf(() => controller);
+  const view = $derived(store.current);
+  const panel = $derived(getVectorFramePanel(view));
+  const f = $derived(panel.frame);
+  const ids = $derived(f ? [f.id] : undefined);
+  const fillHex = $derived(f ? vectorPaintToHex(f.frame.fill ?? null) : null);
+  const hasFill = $derived(!!f && f.frame.fill !== undefined && f.frame.fill !== null);
+  const fields = [
+    { key: 'x', label: 'X' },
+    { key: 'y', label: 'Y' },
+    { key: 'width', label: 'W' },
+    { key: 'height', label: 'H' }
+  ] as const;
+
+  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 selectClass = 'h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs';
+  const numberClass = 'h-7 w-16 rounded border border-border bg-background px-1.5 text-xs';
+</script>
+
+<div class="space-y-2 {className}" data-vector-frame-panel="" aria-label="Frame">
+  <div class="flex flex-wrap items-center gap-1">
+    <span class="w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">Frame</span>
+    <button
+      type="button"
+      data-vector-frame-action="frame-selection"
+      class={buttonClass}
+      title="Frame Selection: put the selection in a frame fitted to it"
+      aria-label="Frame Selection"
+      disabled={!view.selection.length}
+      onclick={() => controller.frameSelection()}
+    >
+      Frame selection
+    </button>
+  </div>
+  {#if f}
+    <div class="space-y-2" data-vector-frame={f.id}>
+      <div class="grid grid-cols-2 gap-1">
+        {#each fields as { key, label } (key)}
+          <label class="flex items-center gap-1 text-xs text-foreground">
+            <span class="w-4 text-muted-foreground">{label}</span>
+            <input
+              type="number"
+              step="1"
+              min={key === 'width' || key === 'height' ? 1 : undefined}
+              aria-label="Frame {key}"
+              class={numberClass}
+              value={Math.round(f.frame[key] * 100) / 100}
+              onchange={(e) => {
+                // On commit (Enter or blur): each resize lays the children out again, so the digits typed on the way must not.
+                const n = parseFloat(e.currentTarget.value);
+                if (Number.isFinite(n) && (key === 'x' || key === 'y' || n > 0)) controller.setFrame({ [key]: n }, { ids });
+              }}
+            />
+          </label>
+        {/each}
+      </div>
+      <div class="flex items-center gap-2">
+        <label class="flex w-16 items-center gap-1.5 text-xs text-foreground">
+          <input type="checkbox" aria-label="Frame fill on" checked={hasFill} onchange={(e) => controller.setFrame({ fill: e.currentTarget.checked ? (fillHex ?? '#ffffff') : null }, { ids })} />
+          Fill
+        </label>
+        <input
+          type="color"
+          aria-label="Frame fill colour"
+          class="h-7 w-10 cursor-pointer rounded border border-border bg-background disabled:opacity-40"
+          disabled={!hasFill}
+          value={fillHex ?? '#ffffff'}
+          oninput={(e) => controller.setFrame({ fill: e.currentTarget.value }, { ids, merge: 'frame-fill' })}
+        />
+        <label class="flex items-center gap-1 text-xs text-foreground" title="Hide what lies outside the frame">
+          <input type="checkbox" aria-label="Clip content" checked={f.frame.clip !== false} onchange={(e) => controller.setFrame({ clip: e.currentTarget.checked }, { ids })} />
+          Clip
+        </label>
+      </div>
+    </div>
+  {/if}
+  {#if panel.resizing}
+    {@const resizing = panel.resizing}
+    <div class="space-y-1" data-vector-resizing="">
+      <label class="flex items-center gap-2 text-xs text-foreground">
+        <span class="w-16">Horizontal</span>
+        <select
+          aria-label="Horizontal constraint"
+          class={selectClass}
+          value={resizing.horizontal}
+          onchange={(e) => controller.setResizing({ horizontal: e.currentTarget.value as VectorHorizontalResizing }, { ids: resizing.ids })}
+        >
+          {#if resizing.horizontal === 'mixed'}<option value="mixed" disabled>Mixed</option>{/if}
+          {#each VECTOR_HORIZONTAL_RESIZING as h (h)}<option value={h}>{VECTOR_HORIZONTAL_RESIZING_LABELS[h]}</option>{/each}
+        </select>
+      </label>
+      <label class="flex items-center gap-2 text-xs text-foreground">
+        <span class="w-16">Vertical</span>
+        <select
+          aria-label="Vertical constraint"
+          class={selectClass}
+          value={resizing.vertical}
+          onchange={(e) => controller.setResizing({ vertical: e.currentTarget.value as VectorVerticalResizing }, { ids: resizing.ids })}
+        >
+          {#if resizing.vertical === 'mixed'}<option value="mixed" disabled>Mixed</option>{/if}
+          {#each VECTOR_VERTICAL_RESIZING as v (v)}<option value={v}>{VECTOR_VERTICAL_RESIZING_LABELS[v]}</option>{/each}
+        </select>
+      </label>
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,14 @@
+import { type VectorEditorController } from '@pixerate/editor/vector';
+/**
+ * Frames (artboards): Frame Selection; for a selected frame its position, size (its children
+ * follow their constraints), background and clipping; for objects inside a frame their resizing
+ * constraints. Each change is one undo step (sizes apply on Enter or blur).
+ */
+interface Props {
+    controller: VectorEditorController;
+    class?: string;
+}
+declare const VectorFramePanel: import("svelte").Component<Props, {}, "">;
+type VectorFramePanel = ReturnType<typeof VectorFramePanel>;
+export default VectorFramePanel;
+//# sourceMappingURL=VectorFramePanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VectorFramePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorFramePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAOH,KAAK,sBAAsB,EAG5B,MAAM,yBAAyB,CAAC;AAIjC;;;;GAIG;AACH,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqFH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/vector/VectorSceneNodes.svelte

@@ -3,6 +3,7 @@
   import Self from './VectorSceneNodes.svelte';
   import VectorPaintPath from './VectorPaintPath.svelte';
   import VectorMaskedNodes from './VectorMaskedNodes.svelte';
+  import VectorTextElement from './VectorTextElement.svelte';
 
   interface Props {
     nodes: readonly VectorRenderNode[];
@@ -13,7 +14,9 @@
 </script>
 
 {#each nodes as node (node.id)}
-  {#if node.kind === 'group'}
+  {#if node.kind === 'text'}
+    <VectorTextElement {node} />
+  {:else if node.kind === 'group'}
     <g
       data-vector-id={node.id}
       data-vector-mask={node.mask?.type}

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;AAM9D,UAAU,KAAK;IACb,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;CACpC;AAmCH,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;AAO9D,UAAU,KAAK;IACb,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;CACpC;AAsCH,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

@@ -21,6 +21,11 @@
   import VectorAppearancePanel from './VectorAppearancePanel.svelte';
   import VectorEnvelopePanel from './VectorEnvelopePanel.svelte';
   import VectorMaskPanel from './VectorMaskPanel.svelte';
+  import VectorTextPanel from './VectorTextPanel.svelte';
+  import VectorSymbolsPanel from './VectorSymbolsPanel.svelte';
+  import VectorConstraintsPanel from './VectorConstraintsPanel.svelte';
+  import VectorFramePanel from './VectorFramePanel.svelte';
+  import VectorConnectorPanel from './VectorConnectorPanel.svelte';
   import VectorGradientEditor from './VectorGradientEditor.svelte';
 
   interface Props {
@@ -50,6 +55,7 @@
       widthProfile: widthProfilePresetId(d.strokeWidthProfile),
       cornerRadius: d.cornerRadius,
       cornerKind: d.cornerKind ?? 'round',
+      cornerSmoothing: 0,
       corners: 1,
       hasOpenPath: true
     };
@@ -209,6 +215,23 @@
       {#if style?.mixed.cornerRadius}<span class="text-[11px] text-muted-foreground">Mixed</span>{/if}
     </div>
   {/if}
+  {#if style && source.corners > 0 && source.cornerKind === 'round' && source.cornerRadius > 0}
+    <label class="flex items-center gap-2 text-xs text-foreground" data-vector-style="corner-smoothing" title="Corner smoothing: squircle corners that ease into the curve (0.6 is iOS-like)">
+      <span class="w-16">Smoothing</span>
+      <input
+        type="range"
+        min="0"
+        max="1"
+        step="0.05"
+        aria-label="Corner smoothing"
+        class="h-4 flex-1 accent-primary"
+        value={source.cornerSmoothing}
+        oninput={(e) => controller.setCornerSmoothing(parseFloat(e.currentTarget.value), { merge: 'corner-smoothing' })}
+        onpointerup={() => controller.endMergedEdit()}
+      />
+    </label>
+  {/if}
+  <VectorTextPanel {controller} />
   {#if style}
     <label class="flex items-center gap-2 text-xs text-foreground">
       <span class="w-16">Opacity</span>
@@ -228,4 +251,8 @@
     <VectorEnvelopePanel {controller} />
     <VectorMaskPanel {controller} />
   {/if}
+  <VectorFramePanel {controller} />
+  <VectorConnectorPanel {controller} />
+  <VectorConstraintsPanel {controller} />
+  <VectorSymbolsPanel {controller} />
 </div>

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

@@ -1 +1 @@
-{"version":3,"file":"VectorStylePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorStylePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAYH,KAAK,sBAAsB,EAG5B,MAAM,yBAAyB,CAAC;AAUjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmKH,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;AAejC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoLH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/vector/VectorSymbolsPanel.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import { getVectorSymbolsPanel, vectorPaintToHex, type VectorEditorController } from '@pixerate/editor/vector';
+  import VectorGradientDefs from './VectorGradientDefs.svelte';
+  import VectorFilterDefs from './VectorFilterDefs.svelte';
+  import VectorSceneNodes from './VectorSceneNodes.svelte';
+  import { vectorStateOf } from './subscribe.svelte.js';
+
+  /**
+   * Symbols of the document with previews: New Symbol from the selection, Place, Edit (isolation
+   * mode) and Delete per symbol; for a selected instance, Replace, Scale strokes, a fill tint and
+   * Detach. Each change is one undo step.
+   */
+  interface Props {
+    controller: VectorEditorController;
+    class?: string;
+  }
+
+  let { controller, class: className = '' }: Props = $props();
+
+  const prefix = `vsym${Math.random().toString(36).slice(2, 8)}-`;
+  const store = vectorStateOf(() => controller);
+  const view = $derived(store.current);
+  const panel = $derived(getVectorSymbolsPanel(view, { idPrefix: prefix }));
+  const inst = $derived(panel.instance);
+  let error: string | null = $state(null);
+  const report = (r: { ok: boolean; message?: string }) => {
+    error = r.ok ? null : (r.message ?? null);
+  };
+
+  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 aria-pressed:bg-primary aria-pressed:text-primary-foreground';
+  const selectClass = 'h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs';
+  const labelClass = 'w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground';
+</script>
+
+<div class="space-y-2 {className}" data-vector-symbols-panel="" aria-label="Symbols">
+  <div class="flex items-center gap-1">
+    <span class={labelClass}>Symbols</span>
+    <button type="button" class={buttonClass} data-vector-symbol-action="make" disabled={!panel.canMake} title="New Symbol from the selection (F8)" onclick={() => report(controller.makeSymbol())}>New</button>
+    {#if panel.editing}
+      <button type="button" class={buttonClass} data-vector-symbol-action="exit" title="Leave the symbol (Escape)" onclick={() => controller.exitSymbolEdit()}>Done</button>
+    {/if}
+  </div>
+  {#if panel.symbols.length}
+    <ul class="space-y-1">
+      {#each panel.symbols as s (s.id)}
+        <li data-vector-symbol={s.id} data-editing={s.editing || undefined} class="flex items-center gap-1">
+          <svg viewBox={s.viewBox} width="28" height="28" class="shrink-0 rounded border border-border bg-background" aria-hidden="true">
+            <VectorGradientDefs defs={s.scene.defs} />
+            <VectorFilterDefs filters={s.scene.filters} />
+            <VectorSceneNodes nodes={s.scene.nodes} />
+          </svg>
+          <span class="min-w-0 flex-1 truncate text-xs text-foreground" title="{s.name} · {s.instances} instance{s.instances === 1 ? '' : 's'}">{s.name} <span class="text-muted-foreground">· {s.instances}</span></span>
+          <button type="button" class={buttonClass} aria-label="Place {s.name}" title="Place an instance" onclick={() => report(controller.placeSymbol(s.id))}>+</button>
+          <button type="button" class={buttonClass} aria-label="Edit {s.name}" aria-pressed={s.editing} title="Edit Symbol (isolation mode)" onclick={() => report(controller.editSymbol(s.id))}>✎</button>
+          <button type="button" class={buttonClass} aria-label="Delete {s.name}" title="Delete the symbol (its instances become groups)" onclick={() => report(controller.deleteSymbol(s.id, { detach: true }))}>×</button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+  {#if inst}
+    <div class="space-y-1" data-vector-instance={inst.id}>
+      <div class="flex items-center gap-1">
+        <select aria-label="Instance symbol" class={selectClass} value={inst.symbolId} onchange={(e) => report(controller.replaceSymbol((e.currentTarget as HTMLSelectElement).value, { ids: [inst.id] }))}>
+          {#each panel.symbols as s (s.id)}
+            <option value={s.id}>{s.name}</option>
+          {/each}
+        </select>
+        <button type="button" class={buttonClass} title="Break Link to Symbol: a plain group of its art" onclick={() => report(controller.detachInstances({ ids: [inst.id] }))}>Detach</button>
+      </div>
+      <div class="flex items-center gap-2">
+        <label class="flex items-center gap-1 text-xs text-foreground">
+          <input type="checkbox" aria-label="Scale strokes" checked={inst.scaleStrokes} onchange={(e) => report(controller.setInstanceOptions({ scaleStrokes: (e.currentTarget as HTMLInputElement).checked }, { ids: [inst.id] }))} />
+          Scale strokes
+        </label>
+        <label class="flex items-center gap-1 text-xs text-foreground" title="Paint every fill of the art in this instance">
+          Tint
+          <input
+            type="color"
+            aria-label="Instance fill"
+            class="h-6 w-8 rounded border border-border"
+            value={vectorPaintToHex(inst.fill ?? undefined) ?? '#000000'}
+            onchange={(e) => report(controller.setInstanceOptions({ fill: (e.currentTarget as HTMLInputElement).value }, { ids: [inst.id] }))}
+          />
+        </label>
+        {#if inst.fill !== null}
+          <button type="button" class={buttonClass} aria-label="Clear tint" onclick={() => report(controller.setInstanceOptions({ fill: null }, { ids: [inst.id] }))}>×</button>
+        {/if}
+      </div>
+    </div>
+  {/if}
+  {#if error}<p class="text-[11px] text-destructive">{error}</p>{/if}
+</div>

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

@@ -0,0 +1,14 @@
+import { type VectorEditorController } from '@pixerate/editor/vector';
+/**
+ * Symbols of the document with previews: New Symbol from the selection, Place, Edit (isolation
+ * mode) and Delete per symbol; for a selected instance, Replace, Scale strokes, a fill tint and
+ * Detach. Each change is one undo step.
+ */
+interface Props {
+    controller: VectorEditorController;
+    class?: string;
+}
+declare const VectorSymbolsPanel: import("svelte").Component<Props, {}, "">;
+type VectorSymbolsPanel = ReturnType<typeof VectorSymbolsPanel>;
+export default VectorSymbolsPanel;
+//# sourceMappingURL=VectorSymbolsPanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VectorSymbolsPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorSymbolsPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAA2C,KAAK,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAO7G;;;;GAIG;AACH,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkFH,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/vector/VectorTextElement.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { VectorRenderText } from '@pixerate/editor/vector';
+
+  interface Props {
+    node: VectorRenderText;
+  }
+
+  /**
+   * Text drawn as SVG text: one `<text>` per paint layer, every span a `<tspan>` placed character by
+   * character (the layout is the editor's, not the browser's).
+   */
+  let { node }: Props = $props();
+  const blend = (mode: string | undefined) => (mode ? `mix-blend-mode: ${mode}` : undefined);
+</script>
+
+<g data-vector-id={node.id} data-vector-text="" transform={node.transform} opacity={node.opacity < 1 ? node.opacity : undefined} filter={node.filter} style={blend(node.blendMode)}>
+  {#each node.layers as layer, i (i)}
+    <text
+      data-vector-layer={layer.kind}
+      xml:space="preserve"
+      fill={layer.fill}
+      stroke={layer.stroke}
+      stroke-width={layer.stroke === 'none' ? undefined : layer.strokeWidth}
+      stroke-linejoin={layer.strokeLinejoin as "miter" | "round" | "bevel" | undefined}
+      stroke-dasharray={layer.strokeDasharray}
+      opacity={layer.opacity < 1 ? layer.opacity : undefined}
+      style="white-space:pre;{blend(layer.blendMode) ?? ''}"
+      >{#each node.spans as sp, k (k)}<tspan
+          x={sp.x}
+          y={sp.y}
+          rotate={sp.rotate}
+          font-family={sp.fontFamily}
+          font-size={sp.fontSize}
+          font-weight={sp.fontWeight}
+          font-style={sp.fontStyle}
+          text-decoration={sp.textDecoration}
+          fill={layer.runFills && sp.fill ? sp.fill : undefined}>{sp.text}</tspan
+        >{/each}</text
+    >
+  {/each}
+</g>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"VectorTextElement.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorTextElement.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAG9D,UAAU,KAAK;IACb,IAAI,EAAE,gBAAgB,CAAC;CACxB;AAqBH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}