@pixerate/editor-svelte 0.156.0 → 0.158.0

package/dist/image-editor/ImageEditor.svelte

@@ -19,6 +19,7 @@
     FreeTransformTool,
     DEFAULT_SHAPE_TOOL_OPTIONS,
     DEFAULT_TYPE_TOOL_OPTIONS,
+    imageToolLabel,
     type SelectionToolOptions,
     type ShapeToolOptions,
     type TextEditSession,
@@ -702,16 +703,16 @@
 
       {#if activeTab === 'annotate'}
         <div class="flex flex-col gap-3 text-xs">
-          <span class={imageSectionTitleClass}>Shape & Type Layers</span>
+          <span class={imageSectionTitleClass}>Shape & Type Layers, Paths</span>
           <div class="grid grid-cols-2 gap-1.5">
-            {#each ['shape', 'type'] as const as t (t)}
+            {#each ['shape', 'type', 'path-pen', 'path-select', 'direct-select'] 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-primary border-primary text-primary-foreground'
-                  : 'bg-muted border-border text-foreground hover:bg-accent'}">{t === 'shape' ? 'Shape' : 'Type'}</button>
+                  : 'bg-muted border-border text-foreground hover:bg-accent'}">{imageToolLabel(t)}</button>
             {/each}
           </div>
           {#if editor.state.activeTool === 'shape'}
@@ -742,7 +743,7 @@
                   ? 'bg-primary border-primary text-primary-foreground'
                   : 'bg-muted border-border text-foreground hover:bg-accent'}"
               >
-                {t}
+                {t === 'pen' ? 'freehand' : t}
               </button>
             {/each}
           </div>

package/dist/image-editor/ImageEditorCanvas.svelte

@@ -27,6 +27,8 @@
     handleQuickMaskKey,
     handleMaskViewKey,
     ShapeDrawGesture,
+    PathEditGesture,
+    isPathEditTool,
     TypeToolGesture,
     DEFAULT_SHAPE_TOOL_OPTIONS,
     DEFAULT_TYPE_TOOL_OPTIONS,
@@ -279,6 +281,8 @@
 
   // Shape and type tools; type is edited on the canvas through a hidden textarea.
   const shapeGesture = $derived(new ShapeDrawGesture(editor.controller, () => shapeOptions));
+  // Path tools (Path Selection, Direct Selection, Pen): edit the active path, shape or vector mask.
+  const pathGesture = $derived(new PathEditGesture(editor.controller));
   const typeTool = $derived(new TypeToolGesture(editor.controller, () => typeOptions));
   let typeInputEl = $state<HTMLTextAreaElement | null>(null);
   $effect(() => {
@@ -521,7 +525,10 @@
     const viewport = measureCanvasViewport(containerEl);
     view = { width: viewport.width, height: viewport.height };
     // The transform overlay's rotate handle sits a fixed distance out on screen.
-    transformTool.setView(getViewportProjection(editor.controller.getState(), view.width, view.height, mode === 'crop').scale);
+    const viewScale = getViewportProjection(editor.controller.getState(), view.width, view.height, mode === 'crop').scale;
+    transformTool.setView(viewScale);
+    pathGesture.setView(viewScale);
+    const activeTool = editor.controller.getState().activeTool;
 
     await editor.controller.render(canvasEl, {
       viewportWidth: viewport.width,
@@ -542,6 +549,7 @@
           : null,
       freeTransform: transformTool.overlay() ?? layerFrame(),
       textEdit: typeTool.session?.alive ? typeTool.session.overlay() : null,
+      pathEdit: mode === 'annotate' && isPathEditTool(activeTool) ? pathGesture.overlay(activeTool) : null,
     });
   }
 
@@ -623,6 +631,24 @@
     return () => window.removeEventListener('keydown', onKey);
   });
 
+  $effect(() => {
+    if (mode !== 'annotate' || typeof window === 'undefined') return;
+    const gesture = pathGesture;
+    // The path tools: Delete removes the selected anchors, Enter / Escape end the Pen's subpath.
+    const onKey = (e: KeyboardEvent) => {
+      const target = e.target as HTMLElement | null;
+      if (target?.closest?.('input, textarea, select, [contenteditable="true"]')) return;
+      if (!isPathEditTool(editor.controller.getState().activeTool)) return;
+      if (gesture.key(e.key)) {
+        e.preventDefault();
+        report('path', gesture.error);
+        void renderCanvas();
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  });
+
   $effect(() => {
     if (mode !== 'paint' || typeof window === 'undefined') return;
     const c = editor.controller;
@@ -728,6 +754,13 @@
       return;
     }
 
+    if (mode === 'annotate' && isPathEditTool(editor.state.activeTool)) {
+      pathGesture.down(canvasToImagePoint(canvasPt, editor.state, view.width, view.height, false), editor.state.activeTool, { shift: e.shiftKey, alt: e.altKey });
+      report('path', pathGesture.error);
+      void renderCanvas();
+      return;
+    }
+
     if (mode === 'annotate' && (editor.state.activeTool === 'shape' || editor.state.activeTool === 'type')) {
       const imgPt = canvasToImagePoint(canvasPt, editor.state, view.width, view.height, false);
       report(editor.state.activeTool, null);
@@ -854,6 +887,16 @@
       return;
     }
 
+    if (mode === 'annotate' && isPathEditTool(editor.state.activeTool)) {
+      const imgPt = canvasToImagePoint(canvasPt, editor.state, view.width, view.height, false);
+      if (pathGesture.active) {
+        pathGesture.move(imgPt, { shift: e.shiftKey, alt: e.altKey });
+        if (pathGesture.error) report('path', pathGesture.error);
+      } else pathGesture.hover(imgPt);
+      void renderCanvas();
+      return;
+    }
+
     if (mode === 'annotate' && editor.state.activeTool === 'shape') {
       if (shapeGesture.active) {
         shapeGesture.move(canvasToImagePoint(canvasPt, editor.state, view.width, view.height, false), { shift: e.shiftKey, alt: e.altKey });
@@ -975,6 +1018,11 @@
       return;
     }
 
+    if (mode === 'annotate' && isPathEditTool(editor.state.activeTool)) {
+      pathGesture.up();
+      void renderCanvas();
+      return;
+    }
     if (mode === 'annotate' && editor.state.activeTool === 'shape') {
       shapeGesture.up();
       return;
@@ -1080,7 +1128,7 @@
       }}
       data-testid="image-editor-canvas"
       style="width: 100%; height: 100%;{panning ? ` cursor: ${isPanning ? 'grabbing' : 'grab'};` : transformActive || mode === 'transform' ? ` cursor: ${transformCursor};` : ''}"
-      class="absolute inset-0 w-full h-full block {transformActive || mode === 'transform' ? 'touch-none' : mode === 'paint' ? 'touch-none cursor-crosshair' : mode === 'annotate' && editor.state.activeTool === 'type' ? 'cursor-text' : mode === 'annotate' && editor.state.activeTool === 'shape' ? 'cursor-crosshair' : ''}"
+      class="absolute inset-0 w-full h-full block {transformActive || mode === 'transform' ? 'touch-none' : mode === 'paint' ? 'touch-none cursor-crosshair' : mode === 'annotate' && editor.state.activeTool === 'type' ? 'cursor-text' : mode === 'annotate' && (editor.state.activeTool === 'shape' || editor.state.activeTool === 'path-pen') ? 'cursor-crosshair' : mode === 'annotate' && isPathEditTool(editor.state.activeTool) ? 'cursor-default' : ''}"
     ></canvas>
     {#if typeSession}
       <textarea

package/dist/image-editor/MaskEdgeCheck.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import type { ImageEditorController, MaskEdgeReport, MaskEdgeTarget, SelectionMask } from '@pixerate/editor/image-editor';
+  import { MASK_EDGE_THRESHOLDS } from '@pixerate/editor/image-editor';
+
+  /**
+   * Check Edge: measures the selection's (or a mask's) edge, as the `inspect_mask_edge` tool does,
+   * and lists the scores (flagged past the thresholds), holes, islands and findings with fixes.
+   */
+  interface Props {
+    controller: ImageEditorController;
+    /** The current selection (`state.selection`): a report on an older selection is cleared. */
+    selection?: SelectionMask | null;
+    /** What to check (default the selection); masks need `layerId`. */
+    target?: MaskEdgeTarget;
+    layerId?: string;
+    class?: string;
+  }
+
+  let { controller, selection, target = 'selection', layerId, class: className = '' }: Props = $props();
+
+  const button =
+    'px-2 py-1 rounded-md border border-border bg-background text-[11px] text-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-40';
+  const sel = $derived(selection === undefined ? controller.getSelection() : selection);
+  let result = $state<{ report: MaskEdgeReport; for: SelectionMask | null } | null>(null);
+  let error = $state<string | null>(null);
+  const report = $derived(result && (target !== 'selection' || result.for === sel) ? result.report : null);
+  const T = MASK_EDGE_THRESHOLDS;
+  const rows = $derived(
+    report
+      ? [
+          { label: 'Halo', value: report.haloScore, bad: report.haloScore >= T.halo },
+          { label: 'Edge alignment', value: report.edgeAlignment, bad: report.edgeAlignment < T.alignment },
+          { label: 'Jaggedness', value: report.jaggedness, bad: report.jaggedness >= T.jaggedness },
+          { label: 'Soft edge', value: report.softFraction, bad: report.softFraction >= T.soft },
+        ]
+      : []
+  );
+
+  function check() {
+    error = null;
+    try {
+      result = { report: controller.inspectMaskEdge(target, { layerId }), for: sel };
+    } catch (err) {
+      result = null;
+      error = err instanceof Error ? err.message : String(err);
+    }
+  }
+</script>
+
+<div data-testid="mask-edge-check" class="flex flex-col gap-1.5 text-xs {className}">
+  <button type="button" class="{button} self-start" disabled={target === 'selection' && !sel} onclick={check}>Check Edge</button>
+  {#if report}
+    <dl class="grid grid-cols-[1fr_auto] gap-x-2 gap-y-0.5">
+      {#each rows as r (r.label)}
+        <dt class="text-muted-foreground">{r.label}</dt>
+        <dd class="font-mono text-right {r.bad ? 'text-destructive' : 'text-foreground'}">{r.value}</dd>
+      {/each}
+      <dt class="text-muted-foreground">Holes / islands</dt>
+      <dd class="font-mono text-right {report.holes.count || report.islands.count ? 'text-destructive' : 'text-foreground'}">
+        {report.holes.count} / {report.islands.count}
+      </dd>
+    </dl>
+    {#if report.issues.length}
+      <ul data-testid="mask-edge-issues" class="list-disc pl-4 flex flex-col gap-1 text-foreground">
+        {#each report.issues as s (s)}
+          <li>{s}</li>
+        {/each}
+      </ul>
+    {:else}
+      <p class="text-muted-foreground">The edge looks clean.</p>
+    {/if}
+  {/if}
+  {#if error}
+    <p role="alert" class="text-destructive">{error}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,17 @@
+import type { ImageEditorController, MaskEdgeTarget, SelectionMask } from '@pixerate/editor/image-editor';
+/**
+ * Check Edge: measures the selection's (or a mask's) edge, as the `inspect_mask_edge` tool does,
+ * and lists the scores (flagged past the thresholds), holes, islands and findings with fixes.
+ */
+interface Props {
+    controller: ImageEditorController;
+    /** The current selection (`state.selection`): a report on an older selection is cleared. */
+    selection?: SelectionMask | null;
+    /** What to check (default the selection); masks need `layerId`. */
+    target?: MaskEdgeTarget;
+    layerId?: string;
+    class?: string;
+}
+declare const MaskEdgeCheck: import("svelte").Component<Props, {}, "">;
+type MaskEdgeCheck = ReturnType<typeof MaskEdgeCheck>;
+export default MaskEdgeCheck;

package/dist/image-editor/PathsPanel.svelte

@@ -9,7 +9,8 @@
    * thumbnails. Click selects a path, double-click renames it (renaming the Work Path saves it).
    * Load as Selection (Shift adds, Alt subtracts), Make Work Path from the selection, Fill and
    * Stroke on the active layer with a colour and width, Add Vector Mask to the active layer,
-   * Duplicate and Delete. Every change is one undo step on the controller.
+   * Duplicate and Delete. Clicking empty space deselects the path. Every change is one undo step on
+   * the controller.
    */
   interface Props {
     controller: ImageEditorController;
@@ -62,12 +63,15 @@
     }`;
 </script>
 
-<div data-testid="paths-panel" class="flex flex-col gap-2 text-xs {className}">
+<!-- Clicking the panel's empty space deselects the path (the path tools then edit the active layer). -->
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+<div data-testid="paths-panel" class="flex flex-col gap-2 text-xs {className}" onclick={(e) => e.target === e.currentTarget && attempt(() => controller.setActivePath(null))}>
   <span class={imageSectionTitleClass}>Paths</span>
   {#if paths.length === 0}
     <p class="text-muted-foreground">No paths. Make a work path from a selection.</p>
   {/if}
-  <ul role="list" class="flex flex-col gap-0.5">
+  <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
+  <ul role="list" class="flex flex-col gap-0.5 min-h-4" onclick={(e) => e.target === e.currentTarget && attempt(() => controller.setActivePath(null))}>
     {#each paths as p (p.id)}
       <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
       <li

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

@@ -4,7 +4,8 @@ import type { ImageEditorController } from '@pixerate/editor/image-editor';
  * thumbnails. Click selects a path, double-click renames it (renaming the Work Path saves it).
  * Load as Selection (Shift adds, Alt subtracts), Make Work Path from the selection, Fill and
  * Stroke on the active layer with a colour and width, Add Vector Mask to the active layer,
- * Duplicate and Delete. Every change is one undo step on the controller.
+ * Duplicate and Delete. Clicking empty space deselects the path. Every change is one undo step on
+ * the controller.
  */
 interface Props {
     controller: ImageEditorController;

package/dist/image-editor/RefineEdgePanel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { imageRangeClass, imageSectionTitleClass } from './styles.js';
+  import MaskEdgeCheck from './MaskEdgeCheck.svelte';
   import type {
     AdjustmentKind,
     AdjustmentLayer,
@@ -157,6 +158,7 @@
   {#if error}
     <p role="alert" class="text-destructive">{error}</p>
   {/if}
+  <MaskEdgeCheck {controller} selection={sel} />
 
   <span class="font-semibold text-foreground uppercase tracking-wider text-[11px] mt-2">Layer Mask</span>
   <div class="flex gap-1 items-center">

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

@@ -1,4 +1,4 @@
 /** What pointer gestures on `ImageEditorCanvas` do (and whether the crop overlay shows). */
 export type ImageEditorCanvasMode = 'crop' | 'select' | 'paint' | 'annotate' | 'transform' | 'none';
 /** Which gesture an `ImageEditorCanvas` `onerror` report comes from. */
-export type ImageEditorCanvasErrorSource = 'paint' | 'select' | 'shape' | 'type' | 'transform';
+export type ImageEditorCanvasErrorSource = 'paint' | 'select' | 'shape' | 'type' | 'transform' | 'path';

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

@@ -8,6 +8,7 @@ import type CurvesEditorComponent from "./CurvesEditor.svelte";
 import type ControlSliderComponent from "./ControlSlider.svelte";
 import type SelectionOptionsBarComponent from "./SelectionOptionsBar.svelte";
 import type RefineEdgePanelComponent from "./RefineEdgePanel.svelte";
+import type MaskEdgeCheckComponent from "./MaskEdgeCheck.svelte";
 import type PathsPanelComponent from "./PathsPanel.svelte";
 import type SelectAndMaskWorkspaceComponent from "./SelectAndMaskWorkspace.svelte";
 import type ContentAwareFillWorkspaceComponent from "./ContentAwareFillWorkspace.svelte";
@@ -35,6 +36,7 @@ export { default as CurvesEditor } from './CurvesEditor.svelte';
 export { default as ControlSlider } from './ControlSlider.svelte';
 export { default as SelectionOptionsBar } from './SelectionOptionsBar.svelte';
 export { default as RefineEdgePanel } from './RefineEdgePanel.svelte';
+export { default as MaskEdgeCheck } from './MaskEdgeCheck.svelte';
 export { default as PathsPanel } from './PathsPanel.svelte';
 export { default as SelectAndMaskWorkspace } from './SelectAndMaskWorkspace.svelte';
 export { default as ContentAwareFillWorkspace } from './ContentAwareFillWorkspace.svelte';
@@ -64,6 +66,7 @@ export type CurvesEditorProps = ComponentProps<typeof CurvesEditorComponent>;
 export type ControlSliderProps = ComponentProps<typeof ControlSliderComponent>;
 export type SelectionOptionsBarProps = ComponentProps<typeof SelectionOptionsBarComponent>;
 export type RefineEdgePanelProps = ComponentProps<typeof RefineEdgePanelComponent>;
+export type MaskEdgeCheckProps = ComponentProps<typeof MaskEdgeCheckComponent>;
 export type PathsPanelProps = ComponentProps<typeof PathsPanelComponent>;
 export type SelectAndMaskWorkspaceProps = ComponentProps<typeof SelectAndMaskWorkspaceComponent>;
 export type ContentAwareFillWorkspaceProps = ComponentProps<typeof ContentAwareFillWorkspaceComponent>;

package/dist/image-editor/index.js

@@ -10,6 +10,7 @@ export { default as CurvesEditor } from './CurvesEditor.svelte';
 export { default as ControlSlider } from './ControlSlider.svelte';
 export { default as SelectionOptionsBar } from './SelectionOptionsBar.svelte';
 export { default as RefineEdgePanel } from './RefineEdgePanel.svelte';
+export { default as MaskEdgeCheck } from './MaskEdgeCheck.svelte';
 export { default as PathsPanel } from './PathsPanel.svelte';
 export { default as SelectAndMaskWorkspace } from './SelectAndMaskWorkspace.svelte';
 export { default as ContentAwareFillWorkspace } from './ContentAwareFillWorkspace.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.156.0",
+  "version": "0.158.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -165,7 +165,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@pixerate/editor": "0.212.0"
+    "@pixerate/editor": "0.214.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",