@pixerate/editor-svelte 0.82.0 → 0.84.0

package/dist/image-editor/ColorProfilePanel.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import type { ImageEditorController, Intent } from '@pixerate/editor/image-editor';
+  import { COLOR_MODE_OPTIONS, INTENT_OPTIONS, PROOF_PROFILE_OPTIONS, WORKING_SPACE_OPTIONS, colorPanelView } from '@pixerate/editor/image-editor';
+  import { untrack } from 'svelte';
+
+  interface Props {
+    controller: ImageEditorController;
+    class?: string;
+  }
+
+  let { controller, class: className = '' }: Props = $props();
+
+  let tick = $state(0);
+  $effect(() => {
+    const c = controller;
+    // `subscribe` calls the listener at once: untracked, or the effect would depend on `tick`.
+    return untrack(() => c.subscribe(() => tick++));
+  });
+  const view = $derived.by(() => {
+    void tick;
+    return colorPanelView(controller);
+  });
+  let target = $state('display-p3');
+  let intent = $state<Intent>('relative');
+  let bpc = $state(true);
+  let error = $state<string | null>(null);
+
+  const chip = 'px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-300 hover:text-white';
+  const select = 'rounded bg-slate-800 px-1 py-0.5 text-[11px] text-slate-200';
+
+  function attempt(fn: () => unknown) {
+    try {
+      error = null;
+      fn();
+    } catch (err) {
+      error = err instanceof Error ? err.message : String(err);
+    }
+  }
+
+  function proofWith(patch: Partial<{ id: string; intent: Intent; simulatePaper: boolean; gamutWarning: boolean }>) {
+    const cur = view.proof;
+    const id = patch.id ?? cur?.id ?? 'coated-cmyk';
+    attempt(() =>
+      controller.setProofSetup({
+        profile: id,
+        intent: patch.intent ?? cur?.intent ?? 'relative',
+        simulatePaper: patch.simulatePaper ?? cur?.simulatePaper ?? false,
+        gamutWarning: patch.gamutWarning ?? cur?.gamutWarning ?? false,
+      })
+    );
+  }
+</script>
+
+<div class="flex flex-col gap-2 text-xs text-slate-200 {className}" data-testid="color-profile-panel">
+  <div class="flex items-center gap-2">
+    <span class="text-slate-400">Profile</span>
+    <span data-testid="color-profile-name">{view.profileName}</span>
+  </div>
+  <div class="flex flex-wrap items-center gap-1" role="group" aria-label="Colour mode">
+    <span class="text-slate-400">Mode</span>
+    <select aria-label="Colour mode" class={select} value={view.mode} onchange={(e) => attempt(() => controller.setColorMode((e.target as HTMLSelectElement).value as 'rgb' | 'cmyk' | 'lab'))}>
+      {#each COLOR_MODE_OPTIONS as o (o.id)}
+        <option value={o.id} title={o.title}>{o.label}</option>
+      {/each}
+    </select>
+    {#if view.cmykProfileName}
+      <span class="text-slate-400">{view.cmykProfileName}</span>
+    {/if}
+  </div>
+  <div class="flex flex-wrap items-center gap-1" role="group" aria-label="Assign or convert">
+    <select aria-label="Target profile" class={select} value={target} onchange={(e) => (target = (e.target as HTMLSelectElement).value)}>
+      {#each WORKING_SPACE_OPTIONS as o (o.id)}
+        <option value={o.id}>{o.label}</option>
+      {/each}
+    </select>
+    <select aria-label="Rendering intent" class={select} value={intent} onchange={(e) => (intent = (e.target as HTMLSelectElement).value as Intent)}>
+      {#each INTENT_OPTIONS as o (o.id)}
+        <option value={o.id} title={o.title}>{o.label}</option>
+      {/each}
+    </select>
+    <label class="flex items-center gap-1">
+      <input type="checkbox" aria-label="Black point compensation" checked={bpc} onchange={(e) => (bpc = (e.target as HTMLInputElement).checked)} class="accent-indigo-500" />
+      BPC
+    </label>
+    <button type="button" class={chip} title="Edit › Assign Profile: keep the numbers" onclick={() => attempt(() => controller.assignProfile(target))}>Assign</button>
+    <button type="button" class={chip} title="Edit › Convert to Profile: keep the look" onclick={() => attempt(() => controller.convertToProfile(target, { intent, bpc }))}>Convert</button>
+  </div>
+  <div class="flex flex-wrap items-center gap-1" role="group" aria-label="Proof setup">
+    <span class="text-slate-400">Proof</span>
+    <select
+      aria-label="Proof profile"
+      class={select}
+      value={view.proof?.id ?? ''}
+      onchange={(e) => {
+        const v = (e.target as HTMLSelectElement).value;
+        if (v) proofWith({ id: v });
+        else attempt(() => controller.setProofSetup(null));
+      }}>
+      <option value="">Off</option>
+      {#each PROOF_PROFILE_OPTIONS as o (o.id)}
+        <option value={o.id}>{o.label}</option>
+      {/each}
+    </select>
+    {#if view.proof}
+      <select aria-label="Proof intent" class={select} value={view.proof.intent} onchange={(e) => proofWith({ intent: (e.target as HTMLSelectElement).value as Intent })}>
+        {#each INTENT_OPTIONS as o (o.id)}
+          <option value={o.id}>{o.label}</option>
+        {/each}
+      </select>
+      <label class="flex items-center gap-1">
+        <input type="checkbox" aria-label="Simulate paper colour" checked={view.proof.simulatePaper} onchange={(e) => proofWith({ simulatePaper: (e.target as HTMLInputElement).checked })} class="accent-indigo-500" />
+        Paper
+      </label>
+      <label class="flex items-center gap-1">
+        <input type="checkbox" aria-label="Gamut warning" checked={view.proof.gamutWarning} onchange={(e) => proofWith({ gamutWarning: (e.target as HTMLInputElement).checked })} class="accent-indigo-500" />
+        Gamut warning
+      </label>
+    {/if}
+  </div>
+  {#if error}
+    <p role="alert" class="text-rose-400">{error}</p>
+  {/if}
+</div>

package/dist/image-editor/ColorProfilePanel.svelte.d.ts

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

package/dist/image-editor/ColorProfilePanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorProfilePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/ColorProfilePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAU,MAAM,+BAA+B,CAAC;AAKjF,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuHH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/image-editor/ImageEditor.svelte

@@ -41,6 +41,7 @@
   import Histogram from './Histogram.svelte';
   import AdjustmentLayersPanel from './AdjustmentLayersPanel.svelte';
   import LayersPanel from './LayersPanel.svelte';
+  import ColorProfilePanel from './ColorProfilePanel.svelte';
   import BrushOptionsBar from './BrushOptionsBar.svelte';
   import SelectionOptionsBar from './SelectionOptionsBar.svelte';
   import RefineEdgePanel from './RefineEdgePanel.svelte';
@@ -1279,6 +1280,8 @@
             disabled={transformActive}
             onclick={() => transformTool.begin()}>Free Transform</button>
           <LayersPanel controller={editor.controller} />
+          <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Colour</span>
+          <ColorProfilePanel controller={editor.controller} />
         </div>
       {/if}
 

package/dist/image-editor/ImageEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/ImageEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAIR,aAAa,EAGb,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EAClB,cAAc,EACf,MAAM,+BAA+B,CAAC;AAsCzC,OAAO,EAA6B,KAAK,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGjG,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,kBAAkB,CAAC,EAAE,oBAAoB,CAAC;IAC1C,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,GAAG,CAAC,EAAE,cAAc,CAAC;CACtB;AAm2CH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ImageEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/ImageEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAIR,aAAa,EAGb,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EAClB,cAAc,EACf,MAAM,+BAA+B,CAAC;AAuCzC,OAAO,EAA6B,KAAK,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGjG,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,kBAAkB,CAAC,EAAE,oBAAoB,CAAC;IAC1C,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,GAAG,CAAC,EAAE,cAAc,CAAC;CACtB;AAs2CH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/image-editor/LayersPanel.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { ImageEditorController, ImageLayer, LayerMenuAction, LayerPanelRow, PixelBuffer } from '@pixerate/editor/image-editor';
   import {
+    BIT_DEPTH_OPTIONS,
     BLEND_MODES,
     PSD_FILE_ACCEPT,
     downloadPsd,
@@ -50,6 +51,7 @@
       rows: layerPanelRows(s.layers, s.activeLayerId),
       active: controller.getActiveLayer() ?? null,
       menu: layerMenu(controller),
+      bitDepth: controller.bitDepth,
     };
   });
 
@@ -167,6 +169,16 @@
         const r = (e.currentTarget as HTMLElement).getBoundingClientRect();
         menu = menu ? null : { x: r.left, y: r.bottom };
       }}>⋯</button>
+    <select
+      aria-label="Bits per channel"
+      title="Image › Mode: bits per channel"
+      class="rounded bg-slate-800 px-1 py-0.5 text-[11px] text-slate-200"
+      value={snapshot.bitDepth}
+      onchange={(e) => attempt(() => controller.setBitDepth(Number((e.target as HTMLSelectElement).value) as 8 | 16 | 32))}>
+      {#each BIT_DEPTH_OPTIONS as o (o.depth)}
+        <option value={o.depth} title={o.title}>{o.label}</option>
+      {/each}
+    </select>
     {#if psd}
       <button type="button" class={iconButton} onclick={() => fileInput?.click()}>Open PSD…</button>
       <button type="button" class={iconButton} onclick={() => psdTask(async () => (await downloadPsd(controller, psdFileName)).warnings)}>Export PSD</button>

package/dist/image-editor/LayersPanel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayersPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/LayersPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAA2D,MAAM,+BAA+B,CAAC;AAoBlI,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iDAAiD;IACjD,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgSH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"LayersPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/LayersPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAA2D,MAAM,+BAA+B,CAAC;AAqBlI,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iDAAiD;IACjD,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsSH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/image-editor/index.d.ts

@@ -7,6 +7,7 @@ import type ControlSliderComponent from "./ControlSlider.svelte";
 import type SelectionOptionsBarComponent from "./SelectionOptionsBar.svelte";
 import type RefineEdgePanelComponent from "./RefineEdgePanel.svelte";
 import type LayersPanelComponent from "./LayersPanel.svelte";
+import type ColorProfilePanelComponent from "./ColorProfilePanel.svelte";
 import type LayerEffectsPanelComponent from "./LayerEffectsPanel.svelte";
 import type BrushOptionsBarComponent from "./BrushOptionsBar.svelte";
 import type FreeTransformOptionsBarComponent from "./FreeTransformOptionsBar.svelte";
@@ -20,6 +21,7 @@ export { default as ControlSlider } from './ControlSlider.svelte';
 export { default as SelectionOptionsBar } from './SelectionOptionsBar.svelte';
 export { default as RefineEdgePanel } from './RefineEdgePanel.svelte';
 export { default as LayersPanel } from './LayersPanel.svelte';
+export { default as ColorProfilePanel } from './ColorProfilePanel.svelte';
 export { default as LayerEffectsPanel } from './LayerEffectsPanel.svelte';
 export { default as BrushOptionsBar } from './BrushOptionsBar.svelte';
 export { default as FreeTransformOptionsBar } from './FreeTransformOptionsBar.svelte';
@@ -34,6 +36,7 @@ export type ControlSliderProps = ComponentProps<typeof ControlSliderComponent>;
 export type SelectionOptionsBarProps = ComponentProps<typeof SelectionOptionsBarComponent>;
 export type RefineEdgePanelProps = ComponentProps<typeof RefineEdgePanelComponent>;
 export type LayersPanelProps = ComponentProps<typeof LayersPanelComponent>;
+export type ColorProfilePanelProps = ComponentProps<typeof ColorProfilePanelComponent>;
 export type LayerEffectsPanelProps = ComponentProps<typeof LayerEffectsPanelComponent>;
 export type BrushOptionsBarProps = ComponentProps<typeof BrushOptionsBarComponent>;
 export type FreeTransformOptionsBarProps = ComponentProps<typeof FreeTransformOptionsBarComponent>;

package/dist/image-editor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/image-editor/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/image-editor/index.ts"],"names":[],"mappings":"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"}

package/dist/image-editor/index.js

@@ -6,6 +6,7 @@ export { default as ControlSlider } from './ControlSlider.svelte';
 export { default as SelectionOptionsBar } from './SelectionOptionsBar.svelte';
 export { default as RefineEdgePanel } from './RefineEdgePanel.svelte';
 export { default as LayersPanel } from './LayersPanel.svelte';
+export { default as ColorProfilePanel } from './ColorProfilePanel.svelte';
 export { default as LayerEffectsPanel } from './LayerEffectsPanel.svelte';
 export { default as BrushOptionsBar } from './BrushOptionsBar.svelte';
 export { default as FreeTransformOptionsBar } from './FreeTransformOptionsBar.svelte';

package/dist/vector/VectorCanvas.svelte

@@ -9,6 +9,7 @@
     VECTOR_OVERLAY_THEME as THEME,
     getVectorOverlayRenderData,
     getVectorSceneRenderData,
+    getVectorSymbolEditBackground,
     isVectorTextTarget,
     toVectorKeyInput,
     toVectorPointerInput,
@@ -56,6 +57,8 @@
   const view = $derived(store.current);
   const scene = $derived(getVectorSceneRenderData(view, { idPrefix }));
   const overlay = $derived(getVectorOverlayRenderData(view));
+  // Isolation mode: the rest of the document, dimmed behind the symbol's art.
+  const host = $derived(getVectorSymbolEditBackground(view, { idPrefix: `${idPrefix}host-` }));
   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);
@@ -64,6 +67,54 @@
   const as = THEME.anchorSize;
 
   let svg: SVGSVGElement | undefined = $state();
+  let textInput: HTMLTextAreaElement | undefined = $state();
+  const editingText = $derived(view.textEdit?.nodeId ?? null);
+
+  // Typing goes into a hidden textarea while text is edited (focused after the click that started it).
+  $effect(() => {
+    if (!editingText) return;
+    const t = setTimeout(() => textInput?.focus({ preventScroll: true }), 0);
+    return () => clearTimeout(t);
+  });
+
+  function onTextInput(e: Event) {
+    const el = e.currentTarget as HTMLTextAreaElement;
+    if ((e as InputEvent).isComposing) return;
+    if (el.value) controller.textInput(el.value);
+    el.value = '';
+  }
+
+  function onTextCompositionEnd(e: CompositionEvent) {
+    const el = e.currentTarget as HTMLTextAreaElement;
+    if (el.value) controller.textInput(el.value);
+    el.value = '';
+  }
+
+  function onTextKeyDown(e: KeyboardEvent) {
+    e.stopPropagation();
+    if (e.isComposing) return;
+    // Characters come through `input`; editing keys and shortcuts go to the controller.
+    if (e.key.length === 1 && !e.metaKey && !e.ctrlKey) return;
+    if (controller.keyDown(toVectorKeyInput(e))) e.preventDefault();
+    if (!controller.getState().textEdit) svg?.focus({ preventScroll: true });
+  }
+
+  function onTextClipboard(kind: 'copy' | 'cut' | 'paste') {
+    return (e: ClipboardEvent) => {
+      e.stopPropagation();
+      if (kind === 'paste') {
+        const text = e.clipboardData?.getData('text/plain');
+        if (text) controller.textInput(text);
+        e.preventDefault();
+        return;
+      }
+      const text = kind === 'cut' ? controller.cutText() : controller.getSelectedText();
+      if (text && e.clipboardData) {
+        e.clipboardData.setData('text/plain', text);
+        e.preventDefault();
+      }
+    };
+  }
   let fitted = untrack(() => !fitOnMount);
 
   $effect(() => {
@@ -186,9 +237,38 @@
     fill={scene.background ?? (checkerboard ? `url(#${idPrefix}checker)` : '#ffffff')}
     stroke="rgba(0,0,0,0.12)"
   />
+  {#if host}
+    <g data-vector-symbol-host="" opacity="0.3" pointer-events="none" transform={host.transform}>
+      <VectorGradientDefs defs={host.defs} />
+      <VectorFilterDefs filters={host.filters} />
+      <VectorSceneNodes nodes={host.nodes} />
+    </g>
+  {/if}
   <g data-vector-scene="" transform={scene.transform}>
     <VectorSceneNodes nodes={scene.nodes} />
   </g>
+  {#if overlay.frames.length}
+    <g data-vector-frame-labels="">
+      {#each overlay.frames as f (f.id)}
+        <!-- A frame's name selects it (clicking inside a frame may pick its contents). -->
+        <text
+          role="button"
+          tabindex="-1"
+          data-vector-frame-label={f.id}
+          x={f.x}
+          y={f.y - 6}
+          font-size="11"
+          font-weight={f.selected ? 600 : 400}
+          fill={f.selected ? accentColor : '#737373'}
+          style="font-family:system-ui,sans-serif;cursor:default;user-select:none"
+          onpointerdown={(e) => {
+            e.stopPropagation();
+            controller.select([f.id]);
+          }}>{f.name}</text
+        >
+      {/each}
+    </g>
+  {/if}
   <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} />
@@ -369,6 +449,44 @@
     {#if overlay.cutPoint}
       <circle data-vector-cut-point="" cx={overlay.cutPoint.x} cy={overlay.cutPoint.y} r={THEME.handleRadius + 1} fill={THEME.handleFill} stroke={accentColor} />
     {/if}
+    {#if overlay.text}
+      <g data-vector-text-edit={overlay.text.nodeId} data-editing={overlay.text.editing || undefined}>
+        <path d={overlay.text.frame} stroke={accentColor} stroke-dasharray={overlay.text.editing ? '3 2' : undefined} opacity="0.8" />
+        {#each overlay.text.selection as d, i (i)}
+          <path data-vector-text-selection="" {d} fill={accentColor} fill-opacity="0.25" stroke="none" />
+        {/each}
+        {#if overlay.text.caret}
+          <line data-vector-text-caret="" x1={overlay.text.caret.x1} y1={overlay.text.caret.y1} x2={overlay.text.caret.x2} y2={overlay.text.caret.y2} stroke={accentColor} stroke-width="1.5" />
+        {/if}
+        {#if overlay.text.overflow}
+          <g data-vector-text-overflow="" transform="translate({overlay.text.overflow.x} {overlay.text.overflow.y})">
+            <rect x="-5" y="-5" width="10" height="10" fill={THEME.handleFill} stroke="#dc2626" />
+            <path d="M-3 0H3M0 -3V3" stroke="#dc2626" />
+          </g>
+        {/if}
+      </g>
+    {/if}
+    {#each overlay.trackingPoints as t, i (i)}
+      <path data-vector-tracking-point="" d="M{t.x - 5} {t.y}H{t.x + 5}M{t.x} {t.y - 5}V{t.y + 5}" stroke={guideColor} stroke-width="1.5" />
+    {/each}
+    {#if overlay.typedEntry}
+      <g data-vector-typed-entry="" transform="translate({overlay.typedEntry.x + 14} {overlay.typedEntry.y + 18})">
+        <rect x="-3" y="-12" width={overlay.typedEntry.text.length * 7 + 8} height="17" rx="3" fill={THEME.handleFill} stroke={accentColor} />
+        <text x="1" y="1" font-size="11" fill={accentColor} style="font-family:ui-monospace,monospace">{overlay.typedEntry.text}</text>
+      </g>
+    {/if}
+    {#each overlay.connectorSites as s (`${s.nodeId}:${s.side}`)}
+      <circle data-vector-connection-site={s.side} data-active={s.active || undefined} cx={s.x} cy={s.y} r={s.active ? 5 : 3.5} fill={s.active ? accentColor : THEME.handleFill} stroke={accentColor} />
+    {/each}
+    {#each overlay.constraints as c (c.id)}
+      <g data-vector-constraint-glyph={c.kind} data-satisfied={c.satisfied ? 'true' : 'false'}>
+        {#if c.dimension}<line x1={c.dimension.x1} y1={c.dimension.y1} x2={c.dimension.x2} y2={c.dimension.y2} stroke={c.satisfied ? THEME.guide : '#dc2626'} stroke-dasharray="2 2" />{/if}
+        <text x={c.x} y={c.y} font-size="10" text-anchor="middle" fill={c.satisfied ? accentColor : '#dc2626'} stroke="#ffffff" stroke-width="3" paint-order="stroke" style="font-family:system-ui,sans-serif">{c.label}</text>
+      </g>
+    {/each}
+    {#if overlay.textBox}
+      <rect data-vector-text-box="" x={overlay.textBox.x} y={overlay.textBox.y} width={overlay.textBox.width} height={overlay.textBox.height} stroke={accentColor} stroke-dasharray="3 2" />
+    {/if}
     {#if overlay.marquee}
       <rect
         data-vector-marquee=""
@@ -405,6 +523,43 @@
       <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 view.textEdit && overlay.text}
+    <!-- A hidden textarea at the caret takes typing and composed (IME) text. -->
+    <foreignObject x={overlay.text.caret?.x1 ?? 0} y={overlay.text.caret?.y1 ?? 0} width="1" height="1" style="overflow:visible">
+      <textarea
+        bind:this={textInput}
+        data-testid="vector-type-input"
+        aria-label="Text"
+        autocapitalize="off"
+        autocomplete="off"
+        spellcheck="false"
+        style="position:absolute;width:1px;height:1px;padding:0;border:0;opacity:0;resize:none;overflow:hidden"
+        onpointerdown={(e) => e.stopPropagation()}
+        oninput={onTextInput}
+        oncompositionend={onTextCompositionEnd}
+        onkeydown={onTextKeyDown}
+        onkeyup={(e) => e.stopPropagation()}
+        oncopy={onTextClipboard('copy')}
+        oncut={onTextClipboard('cut')}
+        onpaste={onTextClipboard('paste')}
+      ></textarea>
+    </foreignObject>
+  {/if}
+  {#if view.symbolEdit}
+    <!-- Isolation mode: which symbol, and the way out (Escape with nothing selected works too). -->
+    <foreignObject data-vector-symbol-edit={view.symbolEdit.symbolId} x="8" y="8" width="320" height="32" style="overflow:visible">
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div
+        style="display:inline-flex;align-items:center;gap:8px;padding:4px 8px;border-radius:6px;background:rgba(15,23,42,0.85);color:#fff;font:12px system-ui,sans-serif"
+        onpointerdown={(e) => e.stopPropagation()}
+        ondblclick={(e) => e.stopPropagation()}
+        onkeydown={(e) => e.stopPropagation()}
+      >
+        <span>Symbol: {view.symbolEdit.name}</span>
+        <button type="button" aria-label="Exit symbol" style="border:1px solid rgba(255,255,255,0.4);border-radius:4px;padding:0 6px;background:transparent;color:#fff;cursor:pointer" onclick={() => controller.exitSymbolEdit()}>Done</button>
+      </div>
+    </foreignObject>
+  {/if}
   {#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">

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;AASjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,mFAAmF;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAySH,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,EASH,KAAK,sBAAsB,EAC5B,MAAM,yBAAyB,CAAC;AASjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,mFAAmF;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAmaH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/vector/VectorConnectorPanel.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import {
+    VECTOR_CONNECTOR_ROUTES,
+    VECTOR_CONNECTOR_ROUTE_LABELS,
+    VECTOR_CONNECTOR_SIDES,
+    VECTOR_CONNECTOR_SIDE_LABELS,
+    getVectorConnectorPanel,
+    type VectorConnectorRoute,
+    type VectorConnectorSide,
+    type VectorEditorController
+  } from '@pixerate/editor/vector';
+  import { vectorStateOf } from './subscribe.svelte.js';
+
+  /**
+   * The selected connector: its route (straight, elbow, curved), the elbow corner radius, and for
+   * each glued end the side it meets (Auto: the side facing the other end) and Unglue. 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(getVectorConnectorPanel(view));
+  const ids = $derived(panel ? [panel.id] : []);
+  const ends = $derived(
+    panel
+      ? [
+          { key: 'start' as const, label: 'Start', e: panel.start },
+          { key: 'end' as const, label: 'End', e: panel.end }
+        ]
+      : []
+  );
+
+  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>
+
+{#if panel}
+  <div class="space-y-2 {className}" data-vector-connector-panel={panel.id} aria-label="Connector">
+    <div class="flex items-center gap-1">
+      <span class="w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">Connector</span>
+      <select aria-label="Connector route" class={selectClass} value={panel.route} onchange={(e) => controller.setConnector({ route: e.currentTarget.value as VectorConnectorRoute }, { ids })}>
+        {#each VECTOR_CONNECTOR_ROUTES as r (r)}<option value={r}>{VECTOR_CONNECTOR_ROUTE_LABELS[r]}</option>{/each}
+      </select>
+      {#if panel.route === 'elbow'}
+        <input
+          type="number"
+          min="0"
+          step="1"
+          aria-label="Elbow radius"
+          title="Corner radius of the bends"
+          class={numberClass}
+          value={panel.radius}
+          oninput={(e) => {
+            const n = parseFloat(e.currentTarget.value);
+            if (Number.isFinite(n) && n >= 0) controller.setConnector({ radius: n }, { ids });
+          }}
+        />
+      {/if}
+    </div>
+    {#each ends as { key, label, e } (key)}
+      <div class="flex items-center gap-1" data-vector-connector-end={key}>
+        <span class="w-16 text-xs text-foreground">{label}</span>
+        {#if e}
+          <select
+            aria-label="{label} side"
+            class={selectClass}
+            value={e.side ?? 'auto'}
+            onchange={(ev) => controller.setConnector({ [key]: { nodeId: e.nodeId, side: ev.currentTarget.value as VectorConnectorSide } }, { ids })}
+          >
+            {#each VECTOR_CONNECTOR_SIDES as s (s)}<option value={s}>{VECTOR_CONNECTOR_SIDE_LABELS[s]}</option>{/each}
+          </select>
+          <button type="button" class={buttonClass} title="Unglue: the end stays where it is" aria-label="Unglue {label.toLowerCase()}" onclick={() => controller.setConnector({ [key]: null }, { ids })}>Unglue</button>
+        {:else}
+          <span class="text-[11px] text-muted-foreground">Free</span>
+        {/if}
+      </div>
+    {/each}
+  </div>
+{/if}

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

@@ -0,0 +1,14 @@
+import { type VectorEditorController } from '@pixerate/editor/vector';
+/**
+ * The selected connector: its route (straight, elbow, curved), the elbow corner radius, and for
+ * each glued end the side it meets (Auto: the side facing the other end) and Unglue. Each change
+ * is one undo step.
+ */
+interface Props {
+    controller: VectorEditorController;
+    class?: string;
+}
+declare const VectorConnectorPanel: import("svelte").Component<Props, {}, "">;
+type VectorConnectorPanel = ReturnType<typeof VectorConnectorPanel>;
+export default VectorConnectorPanel;
+//# sourceMappingURL=VectorConnectorPanel.svelte.d.ts.map

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"}