@pixerate/editor-svelte 0.151.0 → 0.153.0

package/dist/image-editor/RefineEdgePanel.svelte

@@ -55,7 +55,11 @@
     void tick;
     return Boolean(controller.segmentationProvider);
   });
-  const toLayer = $derived(output === 'new-layer' || output === 'new-layer-with-mask');
+  const toLayer = $derived(output !== 'selection' && output !== 'layer-mask');
+  const outputs = $derived.by(() => {
+    void tick;
+    return REFINE_OUTPUTS.filter((o) => !o.needsDocuments || controller.canOpenDocuments);
+  });
   const target = $derived(list.find((l) => l.id === layerId) ?? list[list.length - 1]);
 
   async function refine() {
@@ -124,14 +128,14 @@
       onchange={(e) => (output = (e.currentTarget as HTMLSelectElement).value as RefineOutput)}
       class="flex-1 bg-background border border-border rounded px-1 py-1 text-foreground"
     >
-      {#each REFINE_OUTPUTS as o (o.id)}
+      {#each outputs as o (o.id)}
         <option value={o.id}>{o.label}</option>
       {/each}
     </select>
   </label>
   <label class="flex flex-col gap-1">
     <span class="flex justify-between text-muted-foreground">
-      <span>Decontaminate colors{toLayer ? '' : ' (new layer outputs)'}</span>
+      <span>Decontaminate colors{toLayer ? '' : ' (new layer or document outputs)'}</span>
       <span class="font-mono">{decontaminate}%</span>
     </span>
     <input

package/dist/image-editor/SelectAndMaskWorkspace.svelte

@@ -57,6 +57,10 @@
     void tick;
     return session.note;
   });
+  const computing = $derived.by(() => {
+    void tick;
+    return session.computing;
+  });
 
   // Draw the preview whenever it changes.
   $effect(() => {
@@ -123,7 +127,7 @@
     session.end();
   }
 
-  const toLayer = $derived(settings.output === 'new-layer' || settings.output === 'new-layer-with-mask');
+  const toLayer = $derived(settings.output !== 'selection' && settings.output !== 'layer-mask');
   const brushTool = $derived(settings.tool === 'quick-select' || settings.tool === 'brush' || settings.tool === 'refine-brush');
 
   const button =
@@ -168,6 +172,9 @@
       <span class="text-muted-foreground">{edits} strokes</span>
       <button type="button" class={button} disabled={!edits} onclick={() => session.undoEdit()}>Undo Stroke</button>
       <span class="font-mono text-muted-foreground">{Math.round(zoom * 100)}%</span>
+      {#if computing}
+        <span role="status" class="text-muted-foreground">Updating preview…</span>
+      {/if}
     </div>
     <div class="flex-1 overflow-hidden flex items-center justify-center bg-muted/30">
       <canvas
@@ -251,14 +258,19 @@
     <span class={imageSectionTitleClass}>Output Settings</span>
     <label class="flex flex-col gap-1">
       <span class="flex justify-between text-muted-foreground">
-        <span>Decontaminate Colors{toLayer ? '' : ' (new layer outputs)'}</span>
+        <span>Decontaminate Colors{toLayer ? '' : ' (new layer or document outputs)'}</span>
         <span class="font-mono">{settings.decontaminate}%</span>
       </span>
       <ImageRange label="Workspace decontaminate amount" min={0} max={100} step={1} value={settings.decontaminate} disabled={!toLayer} oninput={(v) => set({ decontaminate: v })} />
     </label>
     <label class="flex items-center gap-2">
       Output To
-      <ImageSelect label="Output to" value={settings.output} options={REFINE_OUTPUTS.map((o) => ({ value: o.id, label: o.label }))} onchange={(v) => set({ output: v as RefineOutput })} />
+      <ImageSelect
+        label="Output to"
+        value={settings.output}
+        options={REFINE_OUTPUTS.filter((o) => !o.needsDocuments || controller.canOpenDocuments).map((o) => ({ value: o.id, label: o.label }))}
+        onchange={(v) => set({ output: v as RefineOutput })}
+      />
     </label>
     <label class="flex items-center gap-2">
       <ImageCheckbox label="Remember Settings" checked={settings.remember} onchange={(on) => set({ remember: on })} />

package/dist/image-editor/SelectionOptionsBar.svelte

@@ -107,6 +107,20 @@
     void tick;
     return Boolean(controller.segmentationProvider);
   });
+  // The long selection running now (Select Subject, Sky, Focus Area): its progress and Cancel.
+  let task = $state<{ stage: string; fraction: number } | null>(null);
+  let taskAbort: AbortController | null = null;
+  function tracked() {
+    const abort = new AbortController();
+    taskAbort = abort;
+    task = { stage: 'Starting', fraction: 0 };
+    return { signal: abort.signal, onProgress: (fraction: number, stage: string) => (task = { stage, fraction }) };
+  }
+  function untracked() {
+    taskAbort = null;
+    task = null;
+  }
+  const failure = (err: unknown) => ((err as { name?: string })?.name === 'AbortError' ? 'Cancelled.' : err instanceof Error ? err.message : String(err));
   let subject = $state('');
   let segmenting = $state(false);
   let subjectStatus = $state<string | null>(null);
@@ -118,11 +132,12 @@
     skying = true;
     skyStatus = null;
     try {
-      const { note } = await controller.selectSky({ mode: options.mode });
+      const { note } = await controller.selectSky({ mode: options.mode, ...tracked() });
       skyStatus = note ?? null;
     } catch (err) {
-      skyStatus = err instanceof Error ? err.message : String(err);
+      skyStatus = failure(err);
     } finally {
+      untracked();
       skying = false;
     }
   }
@@ -138,11 +153,13 @@
         noise: options.focusNoise ?? 0,
         softness: options.focusSoftness ?? 4,
         mode: options.mode,
+        ...tracked(),
       });
       focusStatus = selection ? null : 'No part of the image stands out as in focus.';
     } catch (err) {
-      focusStatus = err instanceof Error ? err.message : String(err);
+      focusStatus = failure(err);
     } finally {
+      untracked();
       focusing = false;
     }
   }
@@ -152,12 +169,13 @@
     segmenting = true;
     subjectStatus = null;
     try {
-      const { segments, method, note } = await controller.selectSubject(canSegment ? target : '', { mode: options.mode });
+      const { segments, method, note } = await controller.selectSubject(canSegment ? target : '', { mode: options.mode, ...tracked() });
       // 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);
+      subjectStatus = failure(err);
     } finally {
+      untracked();
       segmenting = false;
     }
   }
@@ -428,6 +446,22 @@
       <p role="status" class="text-muted-foreground">{subjectStatus}</p>
     {/if}
   </form>
+  {#if task}
+    <div data-testid="selection-progress" class="flex items-center gap-2">
+      <div
+        role="progressbar"
+        aria-label={task.stage}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={Math.round(task.fraction * 100)}
+        class="flex-1 h-1.5 rounded bg-muted overflow-hidden"
+      >
+        <div class="h-full bg-primary" style:width="{Math.round(task.fraction * 100)}%"></div>
+      </div>
+      <span class="text-muted-foreground">{task.stage}</span>
+      <button type="button" class={btn(false)} onclick={() => taskAbort?.abort()}>Cancel</button>
+    </div>
+  {/if}
   <button type="button" class={btn(false)} onclick={() => (workspace = true)}>Select and Mask…</button>
   {#if workspace}
     <SelectAndMaskWorkspace {controller} onclose={() => (workspace = false)} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.151.0",
+  "version": "0.153.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.207.0"
+    "@pixerate/editor": "0.209.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",