@pixerate/editor-svelte 0.161.1 → 0.162.0

package/dist/image-editor/RefineEdgePanel.svelte

@@ -2,6 +2,7 @@
   import { imageRangeClass, imageSectionTitleClass } from './styles.js';
   import MaskEdgeCheck from './MaskEdgeCheck.svelte';
   import SelectionChangeCheck from './SelectionChangeCheck.svelte';
+  import SeparateSubjectPanel from './SeparateSubjectPanel.svelte';
   import type {
     AdjustmentKind,
     AdjustmentLayer,
@@ -170,6 +171,7 @@
   {/if}
   <MaskEdgeCheck {controller} selection={sel} />
   <SelectionChangeCheck {controller} selection={sel} />
+  <SeparateSubjectPanel {controller} selection={sel} class="mt-2" />
 
   <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/SeparateSubjectPanel.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import type { ImageEditorController, SelectionMask } from '@pixerate/editor/image-editor';
+
+  /**
+   * Separate Subject: the selected subject onto its own masked layer over a background plate with
+   * the subject's area filled, in one undo step, as the `separate_subject` tool does. Shows progress
+   * while the fill runs and can be cancelled.
+   */
+  interface Props {
+    controller: ImageEditorController;
+    /** The current selection (`state.selection`): the subject to separate. */
+    selection?: SelectionMask | null;
+    class?: string;
+  }
+
+  let { controller, selection, 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 dilate = $state(8);
+  let fill = $state(true);
+  let progress = $state<string | null>(null);
+  let error = $state<string | null>(null);
+  let abort: AbortController | null = null;
+
+  async function run() {
+    error = null;
+    const ctl = new AbortController();
+    abort = ctl;
+    progress = 'Starting';
+    try {
+      await controller.separateSubject({
+        dilate,
+        fill: fill ? 'content-aware' : 'none',
+        signal: ctl.signal,
+        onProgress: (fraction, stage) => (progress = `${stage ?? 'Filling'} ${Math.round(fraction * 100)}%`),
+      });
+    } catch (err) {
+      if (!ctl.signal.aborted) error = err instanceof Error ? err.message : String(err);
+    } finally {
+      abort = null;
+      progress = null;
+    }
+  }
+</script>
+
+<div data-testid="separate-subject" class="flex flex-col gap-1.5 text-xs {className}">
+  <span class="font-semibold text-foreground uppercase tracking-wider text-[11px]">Separate Subject</span>
+  <p class="text-muted-foreground">The selection onto its own masked layer, over the background with the subject filled out.</p>
+  <div class="flex flex-wrap items-center gap-2">
+    <label class="flex items-center gap-1 text-muted-foreground">
+      Grow
+      <input
+        type="number"
+        min="0"
+        max="200"
+        aria-label="Separate grow"
+        value={dilate}
+        oninput={(e) => (dilate = Math.min(200, Math.max(0, Number((e.currentTarget as HTMLInputElement).value) || 0)))}
+        class="w-12 bg-background border border-border rounded px-1 py-0.5 text-foreground"
+      />
+      px
+    </label>
+    <label class="flex items-center gap-1 text-foreground">
+      <input type="checkbox" aria-label="Fill the background" checked={fill} onchange={(e) => (fill = (e.currentTarget as HTMLInputElement).checked)} />
+      Fill the background
+    </label>
+  </div>
+  <div class="flex gap-1">
+    <button type="button" class={button} disabled={!sel || progress !== null} onclick={run}>Separate Subject</button>
+    {#if progress !== null}
+      <button type="button" class={button} onclick={() => abort?.abort()}>Cancel</button>
+    {/if}
+  </div>
+  {#if progress !== null}
+    <p role="status" class="text-muted-foreground">{progress}</p>
+  {/if}
+  {#if error}
+    <p role="alert" class="text-destructive">{error}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,15 @@
+import type { ImageEditorController, SelectionMask } from '@pixerate/editor/image-editor';
+/**
+ * Separate Subject: the selected subject onto its own masked layer over a background plate with
+ * the subject's area filled, in one undo step, as the `separate_subject` tool does. Shows progress
+ * while the fill runs and can be cancelled.
+ */
+interface Props {
+    controller: ImageEditorController;
+    /** The current selection (`state.selection`): the subject to separate. */
+    selection?: SelectionMask | null;
+    class?: string;
+}
+declare const SeparateSubjectPanel: import("svelte").Component<Props, {}, "">;
+type SeparateSubjectPanel = ReturnType<typeof SeparateSubjectPanel>;
+export default SeparateSubjectPanel;

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

@@ -10,6 +10,7 @@ import type SelectionOptionsBarComponent from "./SelectionOptionsBar.svelte";
 import type RefineEdgePanelComponent from "./RefineEdgePanel.svelte";
 import type MaskEdgeCheckComponent from "./MaskEdgeCheck.svelte";
 import type SelectionChangeCheckComponent from "./SelectionChangeCheck.svelte";
+import type SeparateSubjectPanelComponent from "./SeparateSubjectPanel.svelte";
 import type PathsPanelComponent from "./PathsPanel.svelte";
 import type SelectAndMaskWorkspaceComponent from "./SelectAndMaskWorkspace.svelte";
 import type ContentAwareFillWorkspaceComponent from "./ContentAwareFillWorkspace.svelte";
@@ -40,6 +41,7 @@ export { default as SelectionOptionsBar } from './SelectionOptionsBar.svelte';
 export { default as RefineEdgePanel } from './RefineEdgePanel.svelte';
 export { default as MaskEdgeCheck } from './MaskEdgeCheck.svelte';
 export { default as SelectionChangeCheck } from './SelectionChangeCheck.svelte';
+export { default as SeparateSubjectPanel } from './SeparateSubjectPanel.svelte';
 export { default as PathsPanel } from './PathsPanel.svelte';
 export { default as SelectAndMaskWorkspace } from './SelectAndMaskWorkspace.svelte';
 export { default as ContentAwareFillWorkspace } from './ContentAwareFillWorkspace.svelte';
@@ -72,6 +74,7 @@ export type SelectionOptionsBarProps = ComponentProps<typeof SelectionOptionsBar
 export type RefineEdgePanelProps = ComponentProps<typeof RefineEdgePanelComponent>;
 export type MaskEdgeCheckProps = ComponentProps<typeof MaskEdgeCheckComponent>;
 export type SelectionChangeCheckProps = ComponentProps<typeof SelectionChangeCheckComponent>;
+export type SeparateSubjectPanelProps = ComponentProps<typeof SeparateSubjectPanelComponent>;
 export type PathsPanelProps = ComponentProps<typeof PathsPanelComponent>;
 export type SelectAndMaskWorkspaceProps = ComponentProps<typeof SelectAndMaskWorkspaceComponent>;
 export type ContentAwareFillWorkspaceProps = ComponentProps<typeof ContentAwareFillWorkspaceComponent>;

package/dist/image-editor/index.js

@@ -12,6 +12,7 @@ export { default as SelectionOptionsBar } from './SelectionOptionsBar.svelte';
 export { default as RefineEdgePanel } from './RefineEdgePanel.svelte';
 export { default as MaskEdgeCheck } from './MaskEdgeCheck.svelte';
 export { default as SelectionChangeCheck } from './SelectionChangeCheck.svelte';
+export { default as SeparateSubjectPanel } from './SeparateSubjectPanel.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.161.1",
+  "version": "0.162.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.218.0"
+    "@pixerate/editor": "0.219.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",