@pixerate/editor-svelte 0.132.0 → 0.133.1

package/dist/image-editor/ImageEditorCanvas.svelte

@@ -22,6 +22,7 @@
     getViewportProjection,
     measureCanvasViewport,
     watchCanvasViewport,
+    startMarchingAnts,
     ShapeDrawGesture,
     TypeToolGesture,
     DEFAULT_SHAPE_TOOL_OPTIONS,
@@ -501,6 +502,17 @@
     );
   });
 
+  // Marching ants: while a selection shows as ants, step the dash offset and redraw.
+  let antsOffset = 0;
+  const marching = $derived(!!editor.state.selection?.bounds && !editor.state.quickMask);
+  $effect(() => {
+    if (!marching) return;
+    return startMarchingAnts((offset) => {
+      antsOffset = offset;
+      void renderCanvas();
+    });
+  });
+
   async function renderCanvas(overrideAnnotation?: Annotation | null, overrideCrop?: CropBox | null) {
     if (!canvasEl || !containerEl) return;
     const viewport = measureCanvasViewport(containerEl);
@@ -516,6 +528,7 @@
       fit,
       showCropOverlay: mode === 'crop',
       showSelectionOverlay: true,
+      antsOffset,
       interactive: true,
       draftAnnotation: overrideAnnotation !== undefined ? overrideAnnotation : draftAnnotation,
       draftCrop: overrideCrop !== undefined ? overrideCrop : draftCrop,

package/dist/image-editor/SelectionOptionsBar.svelte

@@ -45,6 +45,29 @@
 
   let radius = $state(2);
 
+  // Select › Subject (only with a segmentation provider).
+  const canSegment = $derived.by(() => {
+    void tick;
+    return Boolean(controller.segmentationProvider);
+  });
+  let subject = $state('');
+  let segmenting = $state(false);
+  let subjectStatus = $state<string | null>(null);
+  async function selectSubject() {
+    const target = subject.trim();
+    if (!target || segmenting) return;
+    segmenting = true;
+    subjectStatus = null;
+    try {
+      const { segments } = await controller.selectSubject(target, { mode: options.mode });
+      subjectStatus = segments.length ? null : `Nothing matching “${target}” was found.`;
+    } catch (err) {
+      subjectStatus = err instanceof Error ? err.message : String(err);
+    } finally {
+      segmenting = false;
+    }
+  }
+
   const MODIFY_OPS: { op: SelectionModifyOp; label: string }[] = [
     { op: 'grow', label: 'Grow' },
     { op: 'shrink', label: 'Shrink' },
@@ -109,6 +132,33 @@
       </label>
     </div>
   {/if}
+  {#if canSegment}
+    <form
+      data-testid="select-subject"
+      class="flex flex-col gap-1"
+      onsubmit={(e) => {
+        e.preventDefault();
+        void selectSubject();
+      }}
+    >
+      <div class="flex gap-1">
+        <input
+          type="text"
+          aria-label="Subject to select"
+          placeholder="Subject, e.g. the dog"
+          bind:value={subject}
+          disabled={segmenting}
+          class="min-w-0 flex-1 bg-background border border-border rounded px-2 py-1 text-foreground"
+        />
+        <button type="submit" class={btn(false)} disabled={segmenting || !subject.trim()} aria-busy={segmenting}>
+          {segmenting ? 'Selecting…' : 'Select Subject'}
+        </button>
+      </div>
+      {#if subjectStatus}
+        <p role="status" class="text-muted-foreground">{subjectStatus}</p>
+      {/if}
+    </form>
+  {/if}
   <label class="flex items-center gap-2 text-foreground">
     <ImageCheckbox label="Anti-alias" checked={options.antiAlias} onchange={(on) => set({ antiAlias: on })} />
     Anti-alias

package/package.json

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