@pixerate/editor-svelte 0.80.0 → 0.81.0

package/dist/image-editor/ImageEditor.svelte

@@ -28,7 +28,14 @@
     pointerPressure,
     FreeTransformTool,
     getViewportProjection,
+    ShapeDrawGesture,
+    TypeToolGesture,
+    DEFAULT_SHAPE_TOOL_OPTIONS,
+    DEFAULT_TYPE_TOOL_OPTIONS,
     type SelectionToolOptions,
+    type ShapeToolOptions,
+    type TextEditSession,
+    type TypeToolOptions,
   } from '@pixerate/editor/image-editor';
   import ControlSlider from './ControlSlider.svelte';
   import Histogram from './Histogram.svelte';
@@ -38,6 +45,8 @@
   import SelectionOptionsBar from './SelectionOptionsBar.svelte';
   import RefineEdgePanel from './RefineEdgePanel.svelte';
   import FreeTransformOptionsBar from './FreeTransformOptionsBar.svelte';
+  import ShapeOptionsBar from './ShapeOptionsBar.svelte';
+  import TypeOptionsBar from './TypeOptionsBar.svelte';
   import { onDestroy, untrack } from 'svelte';
   import { createReactiveImageEditor, type ReactiveImageEditor } from './imageEditorState.svelte.js';
 
@@ -85,6 +94,60 @@
   const paintGesture = $derived(new PaintGesture(editor.controller));
   let brushCursor: ImagePoint | null = null;
 
+  // Shape and type tools: their options and gestures; type is edited on the canvas through a hidden textarea.
+  let shapeOptions = $state<ShapeToolOptions>({ ...DEFAULT_SHAPE_TOOL_OPTIONS });
+  let typeOptions = $state<TypeToolOptions>({ ...DEFAULT_TYPE_TOOL_OPTIONS });
+  const shapeGesture = $derived(new ShapeDrawGesture(editor.controller, () => shapeOptions));
+  const typeTool = $derived(new TypeToolGesture(editor.controller, () => typeOptions));
+  let typeSession = $state<TextEditSession | null>(null);
+  let typeInputEl = $state<HTMLTextAreaElement | null>(null);
+  let shapeTypeError = $state<string | null>(null);
+  $effect(() => {
+    const s = typeSession;
+    if (!s) return;
+    return untrack(() => s.subscribe(() => void renderCanvas()));
+  });
+  $effect(() => {
+    // End the edit when the tool or tab changes.
+    const keep = activeTab === 'annotate' && editor.state.activeTool === 'type';
+    untrack(() => {
+      if (!keep && typeTool.session) finishTyping();
+    });
+  });
+  function finishTyping() {
+    typeTool.finish();
+    typeSession = null;
+    void renderCanvas();
+  }
+  function handleTypeKeyDown(e: KeyboardEvent) {
+    const session = typeTool.session;
+    if (!session || e.isComposing) return;
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      finishTyping();
+      return;
+    }
+    if ((e.metaKey || e.ctrlKey) && ['z', 'y', 'c', 'x', 'v'].includes(e.key.toLowerCase())) return;
+    if (session.handleKey(e)) {
+      e.preventDefault();
+      shapeTypeError = session.error;
+    }
+  }
+  function handleTypeInput(e: Event) {
+    // Composed (IME) and pasted text arrives here; plain keys were handled on keydown.
+    const el = e.currentTarget as HTMLTextAreaElement;
+    const session = typeTool.session;
+    if (session && el.value && !(e as InputEvent).isComposing) {
+      session.insert(el.value);
+      el.value = '';
+    }
+  }
+  function handleTypeComposition(e: CompositionEvent) {
+    const session = typeTool.session;
+    if (session && e.data) session.insert(e.data);
+    (e.currentTarget as HTMLTextAreaElement).value = '';
+  }
+
   // Free Transform (Ctrl/Cmd+T): the shared tool drives a session; its overlay is drawn by the renderer.
   const transformTool = $derived(
     new FreeTransformTool(editor.controller, {
@@ -292,6 +355,7 @@
           ? { ...brushCursor, diameter: editor.controller.getState().paint.brush.size }
           : null,
       freeTransform: transformTool.overlay(),
+      textEdit: typeTool.session?.alive ? typeTool.session.overlay() : null,
     });
   }
 
@@ -434,6 +498,18 @@
       return;
     }
 
+    if (activeTab === 'annotate' && (editor.state.activeTool === 'shape' || editor.state.activeTool === 'type')) {
+      const imgPt = canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, false);
+      shapeTypeError = null;
+      if (editor.state.activeTool === 'shape') shapeGesture.down(imgPt);
+      else {
+        typeTool.down(imgPt, { shift: e.shiftKey });
+        typeSession = typeTool.session;
+        void renderCanvas();
+      }
+      return;
+    }
+
     if (activeTab === 'annotate') {
       const imgPt = canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, false);
       dragStartPoint = imgPt;
@@ -530,6 +606,14 @@
       return;
     }
 
+    if (activeTab === 'annotate' && editor.state.activeTool === 'shape') {
+      if (shapeGesture.active) {
+        shapeGesture.move(canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, false), { shift: e.shiftKey, alt: e.altKey });
+        if (shapeGesture.error) shapeTypeError = shapeGesture.error;
+      }
+      return;
+    }
+
     if (activeTab === 'annotate') {
       if (annotationDragInfo) {
         const currentImgPt = canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, false);
@@ -660,6 +744,20 @@
       return;
     }
 
+    if (activeTab === 'annotate' && editor.state.activeTool === 'shape') {
+      shapeGesture.up();
+      return;
+    }
+    if (activeTab === 'annotate' && editor.state.activeTool === 'type') {
+      typeTool.up(canvasToImagePoint(canvasPt, editor.state, canvasEl.width, canvasEl.height, false));
+      typeSession = typeTool.session;
+      if (typeTool.error) shapeTypeError = typeTool.error;
+      void renderCanvas();
+      // Keystrokes go to the hidden textarea while text is being edited.
+      if (typeTool.session) setTimeout(() => typeInputEl?.focus(), 0);
+      return;
+    }
+
     if (activeTab === 'annotate') {
       if (annotationDragInfo) {
         annotationDragInfo = null;
@@ -977,8 +1075,21 @@
         onpointercancel={() => paintGesture.cancel()}
         data-testid="image-editor-canvas"
         style={transformActive ? `cursor: ${transformCursor}` : undefined}
-        class="absolute inset-0 w-full h-full block {transformActive ? 'touch-none' : activeTab === 'paint' ? 'touch-none cursor-crosshair' : ''}"
+        class="absolute inset-0 w-full h-full block {transformActive ? 'touch-none' : activeTab === 'paint' ? 'touch-none cursor-crosshair' : activeTab === 'annotate' && editor.state.activeTool === 'type' ? 'cursor-text' : activeTab === 'annotate' && editor.state.activeTool === 'shape' ? 'cursor-crosshair' : ''}"
       ></canvas>
+      {#if typeSession}
+        <textarea
+          bind:this={typeInputEl}
+          aria-label="Edit text"
+          data-testid="type-input"
+          autocapitalize="off"
+          spellcheck={false}
+          onkeydown={handleTypeKeyDown}
+          oninput={handleTypeInput}
+          oncompositionend={handleTypeComposition}
+          class="absolute left-0 top-0 h-px w-px opacity-0"
+        ></textarea>
+      {/if}
 
     </div>
 
@@ -1192,6 +1303,32 @@
 
       {#if activeTab === 'annotate'}
         <div class="flex flex-col gap-3 text-xs">
+          <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Shape & Type Layers</span>
+          <div class="grid grid-cols-2 gap-1.5">
+            {#each ['shape', 'type'] as const as t (t)}
+              <button
+                type="button"
+                aria-pressed={editor.state.activeTool === t}
+                onclick={() => editor.setTool(t)}
+                class="py-1.5 px-2 rounded-lg font-medium border transition-colors {editor.state.activeTool === t
+                  ? 'bg-indigo-600 border-indigo-500 text-white'
+                  : 'bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700'}">{t === 'shape' ? 'Shape' : 'Type'}</button>
+            {/each}
+          </div>
+          {#if editor.state.activeTool === 'shape'}
+            <ShapeOptionsBar controller={editor.controller} options={shapeOptions} onchange={(o) => (shapeOptions = o)} />
+          {/if}
+          {#if editor.state.activeTool === 'type'}
+            <TypeOptionsBar controller={editor.controller} options={typeOptions} onchange={(o) => (typeOptions = o)} session={typeSession} />
+            {#if typeSession}
+              <button type="button" onclick={finishTyping} class="self-start rounded bg-slate-800 px-2 py-1 text-[11px] text-slate-200 hover:bg-slate-700">Done editing text</button>
+            {/if}
+          {/if}
+          {#if shapeTypeError}
+            <p role="alert" class="text-rose-400" data-testid="shape-type-error">{shapeTypeError}</p>
+          {/if}
+          <div class="h-px bg-slate-800 my-1"></div>
+
           <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">
             Draw & Annotate
           </span>

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;AA6BzC,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;AA+uCH,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;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"}

package/dist/image-editor/LayersPanel.svelte

@@ -8,6 +8,8 @@
     dropZone,
     layerBadge,
     layerEffectsBadge,
+    layerHasThumbnail,
+    layerWarning,
     layerMenu,
     layerPanelRows,
     openPsdFile,
@@ -136,7 +138,7 @@
 
   function thumb(layer: ImageLayer): PixelBuffer | null {
     void tick;
-    return layer.type === 'pixel' ? controller.getLayerThumbnail(layer.id, { maxSide: 64 }) : null;
+    return layerHasThumbnail(layer) ? controller.getLayerThumbnail(layer.id, { maxSide: 64 }) : null;
   }
   function maskThumb(layer: ImageLayer): PixelBuffer | null {
     void tick;
@@ -314,13 +316,20 @@
             }}>{layer.collapsed ? '▸' : '▾'}</button>
         {/if}
         {#if row.clipped}<span class="text-slate-500" aria-label="Clipped">↳</span>{/if}
-        {#if layer.type === 'pixel'}
-          <canvas
-            use:paint={thumb(layer)}
-            aria-label={`${row.label} pixels`}
-            style="width: {thumbnailSize}px; height: {thumbnailSize}px"
-            class={thumbClass(row.active && snapshot.activeTarget === 'pixels' && Boolean(layer.mask))}
-          ></canvas>
+        {#if layerHasThumbnail(layer)}
+          <span class="relative shrink-0">
+            <canvas
+              use:paint={thumb(layer)}
+              aria-label={`${row.label} pixels`}
+              style="width: {thumbnailSize}px; height: {thumbnailSize}px"
+              class={thumbClass(row.active && snapshot.activeTarget === 'pixels' && Boolean(layer.mask))}
+            ></canvas>
+            {#if layer.type !== 'pixel'}
+              <span
+                data-testid="layer-kind-badge"
+                class="absolute -bottom-1 -right-1 rounded bg-slate-700 px-0.5 text-[8px] font-bold leading-tight text-slate-100 ring-1 ring-slate-900">{layerBadge(layer)}</span>
+            {/if}
+          </span>
         {:else}
           <span
             class="shrink-0 grid place-items-center rounded bg-slate-800 text-[9px] text-slate-400 ring-1 ring-slate-700"
@@ -382,6 +391,9 @@
               renaming = layer.id;
             }}>{row.label}</span>
         {/if}
+        {#if layerWarning(layer)}
+          <span role="img" data-testid="layer-warning" aria-label={layerWarning(layer)} title={layerWarning(layer)} class="text-[10px] text-amber-400">⚠</span>
+        {/if}
         {#if layerEffectsBadge(layer)}
           {@const fxOn = layerEffectsBadge(layer) === 'on'}
           <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;AAkBlI,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;AAwRH,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;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"}

package/dist/image-editor/ShapeOptionsBar.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import type { ImageEditorController, ShapeToolOptions } from '@pixerate/editor/image-editor';
+  import { LIVE_SHAPE_KINDS, SHAPE_KIND_LABELS, applyShapeOptions } from '@pixerate/editor/image-editor';
+  import { untrack } from 'svelte';
+
+  /**
+   * The shape tool's options: the kind to draw, fill and stroke (colour or none), stroke width and
+   * the kind's own settings (corner radius, sides, points, line weight and arrowhead). Changes also
+   * apply to the active shape layer, as one undo step each.
+   */
+  interface Props {
+    controller: ImageEditorController;
+    options: ShapeToolOptions;
+    onchange: (options: ShapeToolOptions) => void;
+    class?: string;
+  }
+
+  let { controller, options, onchange, class: className = '' }: Props = $props();
+
+  let tick = $state(0);
+  $effect(() => {
+    const c = controller;
+    return untrack(() => c.subscribe(() => tick++));
+  });
+  const shapeId = $derived.by(() => {
+    void tick;
+    const a = controller.getActiveLayer();
+    return a?.type === 'shape' ? a.id : null;
+  });
+  let error = $state<string | null>(null);
+
+  const chip = (on: boolean) => `px-2 py-1 rounded text-[11px] ${on ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-300 hover:text-white'}`;
+  const num = (v: string, min: number, max: number) => Math.max(min, Math.min(max, Number(v) || min));
+
+  function set(change: Partial<ShapeToolOptions>) {
+    onchange({ ...options, ...change });
+    if (!shapeId) return;
+    try {
+      error = null;
+      applyShapeOptions(controller, shapeId, change);
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e);
+    }
+  }
+  const value = (e: Event) => (e.target as HTMLInputElement).value;
+  const checked = (e: Event) => (e.target as HTMLInputElement).checked;
+</script>
+
+<div class="flex flex-col gap-2 text-xs text-slate-200 {className}" data-testid="shape-options">
+  <div class="flex flex-wrap gap-1" role="toolbar" aria-label="Shape kind">
+    {#each LIVE_SHAPE_KINDS as k (k)}
+      <button type="button" aria-pressed={options.kind === k} class={chip(options.kind === k)} onclick={() => onchange({ ...options, kind: k })}>{SHAPE_KIND_LABELS[k]}</button>
+    {/each}
+  </div>
+  <div class="flex flex-wrap items-center gap-3">
+    <label class="flex items-center gap-1">
+      <input type="checkbox" aria-label="Fill" checked={options.fill !== null} onchange={(e) => set({ fill: checked(e) ? '#4f46e5' : null })} />
+      Fill
+      <input
+        type="color"
+        aria-label="Fill colour"
+        disabled={options.fill === null}
+        value={options.fill ?? '#4f46e5'}
+        oninput={(e) => set({ fill: value(e) })}
+        class="h-6 w-8 rounded border border-slate-700 bg-transparent"
+      />
+    </label>
+    <label class="flex items-center gap-1">
+      <input type="checkbox" aria-label="Stroke" checked={options.stroke !== null} onchange={(e) => set({ stroke: checked(e) ? '#000000' : null })} />
+      Stroke
+      <input
+        type="color"
+        aria-label="Stroke colour"
+        disabled={options.stroke === null}
+        value={options.stroke ?? '#000000'}
+        oninput={(e) => set({ stroke: value(e) })}
+        class="h-6 w-8 rounded border border-slate-700 bg-transparent"
+      />
+    </label>
+    <label class="flex items-center gap-1">
+      Width
+      <input type="number" aria-label="Stroke width" min="0" max="200" value={options.strokeWidth} oninput={(e) => set({ strokeWidth: num(value(e), 0, 200) })} class="w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" />
+    </label>
+  </div>
+  <div class="flex flex-wrap items-center gap-3">
+    {#if options.kind === 'rect'}
+      <label class="flex items-center gap-1">
+        Radius
+        <input type="number" aria-label="Corner radius" min="0" max="1000" value={options.radius} oninput={(e) => set({ radius: num(value(e), 0, 1000) })} class="w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" />
+      </label>
+    {:else if options.kind === 'polygon'}
+      <label class="flex items-center gap-1">
+        Sides
+        <input type="number" aria-label="Sides" min="3" max="100" value={options.sides} oninput={(e) => set({ sides: num(value(e), 3, 100) })} class="w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" />
+      </label>
+    {:else if options.kind === 'star'}
+      <label class="flex items-center gap-1">
+        Points
+        <input type="number" aria-label="Points" min="3" max="100" value={options.points} oninput={(e) => set({ points: num(value(e), 3, 100) })} class="w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" />
+      </label>
+      <label class="flex items-center gap-1">
+        Inner
+        <input type="range" aria-label="Inner radius" min="0.05" max="1" step="0.05" value={options.innerRatio} oninput={(e) => set({ innerRatio: Number(value(e)) })} class="accent-indigo-500" />
+      </label>
+    {:else if options.kind === 'line'}
+      <label class="flex items-center gap-1">
+        Weight
+        <input type="number" aria-label="Line weight" min="1" max="200" value={options.weight} oninput={(e) => set({ weight: num(value(e), 1, 200) })} class="w-14 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" />
+      </label>
+      <label class="flex items-center gap-1">
+        <input type="checkbox" aria-label="Arrowhead" checked={options.arrow} onchange={(e) => set({ arrow: checked(e) })} />
+        Arrowhead
+      </label>
+    {/if}
+  </div>
+  <p class="text-[10px] text-slate-500">Drag on the image to draw. Shift: square, circle or 45° line. Alt: from the centre.</p>
+  {#if error}
+    <p role="alert" class="text-rose-400">{error}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,16 @@
+import type { ImageEditorController, ShapeToolOptions } from '@pixerate/editor/image-editor';
+/**
+ * The shape tool's options: the kind to draw, fill and stroke (colour or none), stroke width and
+ * the kind's own settings (corner radius, sides, points, line weight and arrowhead). Changes also
+ * apply to the active shape layer, as one undo step each.
+ */
+interface Props {
+    controller: ImageEditorController;
+    options: ShapeToolOptions;
+    onchange: (options: ShapeToolOptions) => void;
+    class?: string;
+}
+declare const ShapeOptionsBar: import("svelte").Component<Props, {}, "">;
+type ShapeOptionsBar = ReturnType<typeof ShapeOptionsBar>;
+export default ShapeOptionsBar;
+//# sourceMappingURL=ShapeOptionsBar.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShapeOptionsBar.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/ShapeOptionsBar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAK3F;;;;GAIG;AACH,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,OAAO,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmGH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/image-editor/TypeOptionsBar.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import type { ImageEditorController, TextAlign, TextEditSession, TextStyle, TypeToolOptions } from '@pixerate/editor/image-editor';
+  import { TEXT_ALIGNS } from '@pixerate/editor/image-editor';
+  import { untrack } from 'svelte';
+
+  /**
+   * The type tool's options: font family (from the editor's fonts), size, bold, italic, colour and
+   * alignment. While text is being edited they style the selection (or the whole text); with a
+   * type layer active they style all of it; otherwise they set what the next text uses.
+   */
+  interface Props {
+    controller: ImageEditorController;
+    options: TypeToolOptions;
+    onchange: (options: TypeToolOptions) => void;
+    /** The text being edited on the canvas: changes style its selection (or all of it). */
+    session?: TextEditSession | null;
+    class?: string;
+  }
+
+  let { controller, options, onchange, session = null, class: className = '' }: Props = $props();
+
+  let tick = $state(0);
+  $effect(() => {
+    const c = controller;
+    return untrack(() => c.subscribe(() => tick++));
+  });
+  $effect(() => {
+    const s = session;
+    if (!s) return;
+    return untrack(() => s.subscribe(() => tick++));
+  });
+  const ALIGN_LABELS: Record<TextAlign, string> = { left: 'Left', center: 'Centre', right: 'Right', justify: 'Justify' };
+  const chip = (on: boolean) => `px-2 py-1 rounded text-[11px] ${on ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-300 hover:text-white'}`;
+
+  const view = $derived.by(() => {
+    void tick;
+    const active = controller.getActiveLayer();
+    const here: Partial<TextStyle> = session?.alive ? session.styleHere() : {};
+    const shown: TypeToolOptions = {
+      ...options,
+      ...(here.fontFamily ? { fontFamily: here.fontFamily } : {}),
+      ...(here.fontSize ? { fontSize: here.fontSize } : {}),
+      ...(here.fontWeight ? { fontWeight: here.fontWeight } : {}),
+      ...(session?.alive ? { italic: Boolean(here.italic), color: here.color ?? options.color } : {}),
+    };
+    return {
+      shown,
+      typeId: !session && active?.type === 'type' ? active.id : null,
+      missing: active?.type === 'type' ? (active.missingFonts ?? []) : [],
+      fonts: controller.listFonts(),
+    };
+  });
+  let error = $state<string | null>(null);
+
+  function style(change: Partial<TypeToolOptions>) {
+    onchange({ ...options, ...change });
+    const s: Record<string, unknown> = {};
+    for (const k of ['fontFamily', 'fontSize', 'fontWeight', 'italic', 'color'] as const) if (k in change) s[k] = change[k];
+    const p = change.align ? { align: change.align } : null;
+    try {
+      error = null;
+      if (session?.alive) {
+        if (Object.keys(s).length) session.setStyle(s as Partial<TextStyle>);
+        if (p) session.setParagraph(p);
+        if (session.error) error = session.error;
+      } else if (view.typeId) {
+        if (Object.keys(s).length) controller.setTextStyle(view.typeId, s);
+        if (p) controller.setParagraphStyle(view.typeId, p);
+      }
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e);
+    }
+  }
+  const value = (e: Event) => (e.target as HTMLInputElement).value;
+</script>
+
+<div class="flex flex-col gap-2 text-xs text-slate-200 {className}" data-testid="type-options">
+  <div class="flex flex-wrap items-center gap-2">
+    <label class="flex items-center gap-1">
+      Font
+      <input list="pixerate-type-fonts" aria-label="Font family" value={view.shown.fontFamily} oninput={(e) => value(e).trim() && style({ fontFamily: value(e) })} class="w-32 rounded border border-slate-700 bg-slate-950 px-1 py-0.5" />
+      <datalist id="pixerate-type-fonts">
+        {#each view.fonts as f (f)}
+          <option value={f}></option>
+        {/each}
+      </datalist>
+    </label>
+    <label class="flex items-center gap-1">
+      Size
+      <input
+        type="number"
+        aria-label="Font size"
+        min="1"
+        max="2000"
+        value={Math.round(view.shown.fontSize * 10) / 10}
+        oninput={(e) => Number(value(e)) > 0 && style({ fontSize: Number(value(e)) })}
+        class="w-16 rounded border border-slate-700 bg-slate-950 px-1 py-0.5"
+      />
+    </label>
+    <button type="button" aria-pressed={view.shown.fontWeight >= 600} class="{chip(view.shown.fontWeight >= 600)} font-bold" onclick={() => style({ fontWeight: view.shown.fontWeight >= 600 ? 400 : 700 })}>B</button>
+    <button type="button" aria-pressed={view.shown.italic} class="{chip(view.shown.italic)} italic" onclick={() => style({ italic: !view.shown.italic })}>I</button>
+    <input type="color" aria-label="Text colour" value={view.shown.color} oninput={(e) => style({ color: value(e) })} class="h-6 w-8 rounded border border-slate-700 bg-transparent" />
+  </div>
+  <div class="flex gap-1" role="toolbar" aria-label="Alignment">
+    {#each TEXT_ALIGNS as a (a)}
+      <button type="button" aria-pressed={options.align === a} class={chip(options.align === a)} onclick={() => style({ align: a })}>{ALIGN_LABELS[a]}</button>
+    {/each}
+  </div>
+  <p class="text-[10px] text-slate-500">Click to type point text, drag for a paragraph box, click text to edit it. Esc finishes.</p>
+  {#if view.missing.length > 0}
+    <p role="status" class="text-amber-400" data-testid="type-missing-fonts">Missing {view.missing.length === 1 ? 'font' : 'fonts'}: {view.missing.join(', ')}</p>
+  {/if}
+  {#if error}
+    <p role="alert" class="text-rose-400">{error}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,18 @@
+import type { ImageEditorController, TextEditSession, TypeToolOptions } from '@pixerate/editor/image-editor';
+/**
+ * The type tool's options: font family (from the editor's fonts), size, bold, italic, colour and
+ * alignment. While text is being edited they style the selection (or the whole text); with a
+ * type layer active they style all of it; otherwise they set what the next text uses.
+ */
+interface Props {
+    controller: ImageEditorController;
+    options: TypeToolOptions;
+    onchange: (options: TypeToolOptions) => void;
+    /** The text being edited on the canvas: changes style its selection (or all of it). */
+    session?: TextEditSession | null;
+    class?: string;
+}
+declare const TypeOptionsBar: import("svelte").Component<Props, {}, "">;
+type TypeOptionsBar = ReturnType<typeof TypeOptionsBar>;
+export default TypeOptionsBar;
+//# sourceMappingURL=TypeOptionsBar.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TypeOptionsBar.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/TypeOptionsBar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAa,eAAe,EAAa,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAKjI;;;;GAIG;AACH,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,OAAO,EAAE,eAAe,CAAC;IACzB,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAC7C,uFAAuF;IACvF,OAAO,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmGH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

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

@@ -10,6 +10,8 @@ import type LayersPanelComponent from "./LayersPanel.svelte";
 import type LayerEffectsPanelComponent from "./LayerEffectsPanel.svelte";
 import type BrushOptionsBarComponent from "./BrushOptionsBar.svelte";
 import type FreeTransformOptionsBarComponent from "./FreeTransformOptionsBar.svelte";
+import type ShapeOptionsBarComponent from "./ShapeOptionsBar.svelte";
+import type TypeOptionsBarComponent from "./TypeOptionsBar.svelte";
 export { default as ImageEditor } from './ImageEditor.svelte';
 export { default as Histogram } from './Histogram.svelte';
 export { default as AdjustmentLayersPanel } from './AdjustmentLayersPanel.svelte';
@@ -21,6 +23,8 @@ export { default as LayersPanel } from './LayersPanel.svelte';
 export { default as LayerEffectsPanel } from './LayerEffectsPanel.svelte';
 export { default as BrushOptionsBar } from './BrushOptionsBar.svelte';
 export { default as FreeTransformOptionsBar } from './FreeTransformOptionsBar.svelte';
+export { default as ShapeOptionsBar } from './ShapeOptionsBar.svelte';
+export { default as TypeOptionsBar } from './TypeOptionsBar.svelte';
 export * from './imageEditorState.svelte.js';
 export type ImageEditorProps = ComponentProps<typeof ImageEditorComponent>;
 export type HistogramProps = ComponentProps<typeof HistogramComponent>;
@@ -33,5 +37,7 @@ export type LayersPanelProps = ComponentProps<typeof LayersPanelComponent>;
 export type LayerEffectsPanelProps = ComponentProps<typeof LayerEffectsPanelComponent>;
 export type BrushOptionsBarProps = ComponentProps<typeof BrushOptionsBarComponent>;
 export type FreeTransformOptionsBarProps = ComponentProps<typeof FreeTransformOptionsBarComponent>;
+export type ShapeOptionsBarProps = ComponentProps<typeof ShapeOptionsBarComponent>;
+export type TypeOptionsBarProps = ComponentProps<typeof TypeOptionsBarComponent>;
 export { applyRegionMosaic, applyRegionBlur, resolveMosaicRegionBounds, type MosaicRegion, type MosaicImageDataLike } from '@pixerate/editor/image-editor';
 //# sourceMappingURL=index.d.ts.map

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":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,kBAAkB,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,8BAA8B,MAAM,gCAAgC,CAAC;AACjF,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,4BAA4B,MAAM,8BAA8B,CAAC;AAC7E,OAAO,KAAK,wBAAwB,MAAM,0BAA0B,CAAC;AACrE,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,0BAA0B,MAAM,4BAA4B,CAAC;AACzE,OAAO,KAAK,wBAAwB,MAAM,0BAA0B,CAAC;AACrE,OAAO,KAAK,gCAAgC,MAAM,kCAAkC,CAAC;AAErF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AACtF,cAAc,8BAA8B,CAAC;AAE7C,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,kBAAkB,CAAC,CAAC;AACvE,MAAM,MAAM,0BAA0B,GAAG,cAAc,CAAC,OAAO,8BAA8B,CAAC,CAAC;AAC/F,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,OAAO,4BAA4B,CAAC,CAAC;AAC3F,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC;AACnF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,0BAA0B,CAAC,CAAC;AACvF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC;AACnF,MAAM,MAAM,4BAA4B,GAAG,cAAc,CAAC,OAAO,gCAAgC,CAAC,CAAC;AAEnG,OAAO,EACN,iBAAiB,EACjB,eAAe,EACf,yBAAyB,EACzB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,MAAM,+BAA+B,CAAC"}
+{"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

@@ -9,5 +9,7 @@ export { default as LayersPanel } from './LayersPanel.svelte';
 export { default as LayerEffectsPanel } from './LayerEffectsPanel.svelte';
 export { default as BrushOptionsBar } from './BrushOptionsBar.svelte';
 export { default as FreeTransformOptionsBar } from './FreeTransformOptionsBar.svelte';
+export { default as ShapeOptionsBar } from './ShapeOptionsBar.svelte';
+export { default as TypeOptionsBar } from './TypeOptionsBar.svelte';
 export * from './imageEditorState.svelte.js';
 export { applyRegionMosaic, applyRegionBlur, resolveMosaicRegionBounds } from '@pixerate/editor/image-editor';

package/package.json

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