@pixerate/editor-svelte 0.145.0 → 0.147.0

package/dist/image-editor/SelectionOptionsBar.svelte

@@ -109,14 +109,35 @@
   let subject = $state('');
   let segmenting = $state(false);
   let subjectStatus = $state<string | null>(null);
+  let focusing = $state(false);
+  let focusStatus = $state<string | null>(null);
+  async function selectFocusArea() {
+    if (focusing) return;
+    focusing = true;
+    focusStatus = null;
+    try {
+      const { selection } = await controller.selectFocusArea({
+        range: options.focusRange ?? 50,
+        noise: options.focusNoise ?? 0,
+        softness: options.focusSoftness ?? 4,
+        mode: options.mode,
+      });
+      focusStatus = selection ? null : 'No part of the image stands out as in focus.';
+    } catch (err) {
+      focusStatus = err instanceof Error ? err.message : String(err);
+    } finally {
+      focusing = false;
+    }
+  }
   async function selectSubject() {
     const target = subject.trim();
-    if (!target || segmenting) return;
+    if ((canSegment && !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.`;
+      const { segments, method, note } = await controller.selectSubject(canSegment ? target : '', { mode: options.mode });
+      // Without a model, say only when nothing stood out.
+      subjectStatus = segments.length ? null : method === 'saliency' ? (note ?? 'Nothing stands out from the background.') : `Nothing matching “${target}” was found.`;
     } catch (err) {
       subjectStatus = err instanceof Error ? err.message : String(err);
     } finally {
@@ -357,16 +378,16 @@
     />
     px
   </label>
-  {#if canSegment}
-    <form
-      data-testid="select-subject"
-      class="flex flex-col gap-1"
-      onsubmit={(e) => {
-        e.preventDefault();
-        void selectSubject();
-      }}
-    >
-      <div class="flex gap-1">
+  <form
+    data-testid="select-subject"
+    class="flex flex-col gap-1"
+    onsubmit={(e) => {
+      e.preventDefault();
+      void selectSubject();
+    }}
+  >
+    <div class="flex gap-1">
+      {#if canSegment}
         <input
           type="text"
           aria-label="Subject to select"
@@ -375,15 +396,53 @@
           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}
+      <button
+        type="submit"
+        class={btn(false)}
+        disabled={segmenting || (canSegment && !subject.trim())}
+        aria-busy={segmenting}
+        title={canSegment ? undefined : 'Selects the subject that stands out most (no segmentation model is set)'}
+      >
+        {segmenting ? 'Selecting…' : 'Select Subject'}
+      </button>
+    </div>
+    {#if subjectStatus}
+      <p role="status" class="text-muted-foreground">{subjectStatus}</p>
+    {/if}
+  </form>
+  <details data-testid="focus-area" class="flex flex-col gap-2">
+    <summary class="cursor-pointer text-foreground">Focus Area</summary>
+    <div class="flex flex-col gap-2 pt-2">
+      <label class="flex flex-col gap-1">
+        <span class="flex justify-between text-muted-foreground">
+          <span>In-focus range</span>
+          <span class="font-mono">{options.focusRange ?? 50}</span>
+        </span>
+        <ImageRange label="In-focus range" min={0} max={100} step={1} value={options.focusRange ?? 50} oninput={(v) => set({ focusRange: v })} />
+      </label>
+      <label class="flex flex-col gap-1">
+        <span class="flex justify-between text-muted-foreground">
+          <span>Image noise level</span>
+          <span class="font-mono">{options.focusNoise ?? 0}</span>
+        </span>
+        <ImageRange label="Image noise level" min={0} max={100} step={1} value={options.focusNoise ?? 0} oninput={(v) => set({ focusNoise: v })} />
+      </label>
+      <label class="flex flex-col gap-1">
+        <span class="flex justify-between text-muted-foreground">
+          <span>Soften edge</span>
+          <span class="font-mono">{options.focusSoftness ?? 4} px</span>
+        </span>
+        <ImageRange label="Focus soften edge" min={0} max={50} step={1} value={options.focusSoftness ?? 4} oninput={(v) => set({ focusSoftness: v })} />
+      </label>
+      <button type="button" class={btn(false)} disabled={focusing} aria-busy={focusing} onclick={() => void selectFocusArea()}>
+        {focusing ? 'Selecting…' : 'Select Focus Area'}
+      </button>
+      {#if focusStatus}
+        <p role="status" class="text-muted-foreground">{focusStatus}</p>
+      {/if}
+    </div>
+  </details>
   <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.145.0",
+  "version": "0.147.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.198.0"
+    "@pixerate/editor": "0.200.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",