@pixerate/editor-svelte 0.163.0 → 0.164.1

package/dist/image-editor/SelectionOptionsBar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import SelectionRecipePanel from './SelectionRecipePanel.svelte';
   import ImageCheckbox from './controls/ImageCheckbox.svelte';
   import ImageRange from './controls/ImageRange.svelte';
   import ImageSelect from './controls/ImageSelect.svelte';
@@ -590,4 +591,5 @@
     <p role="status" class="text-muted-foreground">{colorStatus}</p>
   {/if}
   <p data-testid="selection-status" class="text-muted-foreground">{describeSelection(sel)}</p>
+  <SelectionRecipePanel {controller} selection={sel} />
 </div>

package/dist/image-editor/SelectionRecipePanel.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import type { ImageEditorController, SelectionMask, SelectionRecipeStep } from '@pixerate/editor/image-editor';
+  import { describeRecipeStep, recipeStepSetting } from '@pixerate/editor/image-editor';
+  import { untrack } from 'svelte';
+
+  /**
+   * Live selection: the steps that made the selection, editable afterwards (each change replays
+   * them as one undo step), as the `*_selection_step` tools do. Freeze keeps the selection and drops
+   * the steps. Hidden while the selection is frozen or empty.
+   */
+  interface Props {
+    controller: ImageEditorController;
+    /** The current selection (`state.selection`), so the panel re-renders with it. */
+    selection?: SelectionMask | null;
+    class?: string;
+  }
+
+  let { controller, selection, class: className = '' }: Props = $props();
+
+  const MODES = ['replace', 'add', 'subtract', 'intersect'] as const;
+  const button =
+    'px-1.5 py-0.5 rounded border border-border bg-background text-[11px] text-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-40';
+  let tick = $state(0);
+  $effect(() => {
+    const c = controller;
+    return untrack(() => c.subscribe(() => tick++));
+  });
+  let error = $state<string | null>(null);
+  const recipe = $derived.by(() => {
+    void tick;
+    void selection;
+    return controller.getSelectionRecipe();
+  });
+  const isShape = (step: { op: string }) => ['rect', 'ellipse', 'polygon', 'magic-wand', 'color-range', 'color-range-preset'].includes(step.op);
+
+  function run(p: Promise<unknown> | unknown) {
+    error = null;
+    Promise.resolve(p).catch((err) => (error = err instanceof Error ? err.message : String(err)));
+  }
+</script>
+
+{#if recipe.live}
+  <div data-testid="selection-recipe" class="flex flex-col gap-1 text-xs {className}">
+    <div class="flex items-center justify-between">
+      <span class="text-muted-foreground">Selection steps</span>
+      <button type="button" class={button} title="Keep the selection, drop its steps" onclick={() => run(controller.freezeSelection())}>Freeze</button>
+    </div>
+    <ol class="flex flex-col gap-1">
+      {#each recipe.steps as step (`${step.index}:${JSON.stringify(step)}`)}
+        {@const setting = recipeStepSetting(step)}
+        <li data-testid="selection-step" class="flex flex-wrap items-center gap-1">
+          <span class="flex-1 min-w-0 truncate text-foreground">{describeRecipeStep(step as SelectionRecipeStep)}</span>
+          {#if isShape(step) && step.index > 0}
+            <select
+              aria-label="Step {step.index + 1} mode"
+              value={(step as { mode?: string }).mode ?? 'replace'}
+              onchange={(e) => run(controller.editSelectionStep(step.index, { mode: (e.currentTarget as HTMLSelectElement).value }))}
+              class="bg-background border border-border rounded px-1 py-0.5 text-foreground"
+            >
+              {#each MODES as m (m)}
+                <option value={m}>{m}</option>
+              {/each}
+            </select>
+          {/if}
+          {#if setting}
+            <label class="flex items-center gap-1 text-muted-foreground">
+              {setting.label}
+              <input
+                type="number"
+                min={setting.min}
+                max={setting.max}
+                aria-label="Step {step.index + 1} {setting.label}"
+                value={setting.value}
+                onblur={(e) => {
+                  const v = Number((e.currentTarget as HTMLInputElement).value);
+                  if (v !== setting.value) run(controller.editSelectionStep(step.index, setting.change(v)));
+                }}
+                onkeydown={(e) => e.key === 'Enter' && (e.currentTarget as HTMLInputElement).blur()}
+                class="w-12 bg-background border border-border rounded px-1 py-0.5 text-foreground"
+              />
+            </label>
+          {/if}
+          <button type="button" class={button} aria-label="Remove step {step.index + 1}" disabled={recipe.steps.length === 1} onclick={() => run(controller.removeSelectionStep(step.index))}>×</button>
+        </li>
+      {/each}
+    </ol>
+    {#if error}
+      <p role="alert" class="text-destructive">{error}</p>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,15 @@
+import type { ImageEditorController, SelectionMask } from '@pixerate/editor/image-editor';
+/**
+ * Live selection: the steps that made the selection, editable afterwards (each change replays
+ * them as one undo step), as the `*_selection_step` tools do. Freeze keeps the selection and drops
+ * the steps. Hidden while the selection is frozen or empty.
+ */
+interface Props {
+    controller: ImageEditorController;
+    /** The current selection (`state.selection`), so the panel re-renders with it. */
+    selection?: SelectionMask | null;
+    class?: string;
+}
+declare const SelectionRecipePanel: import("svelte").Component<Props, {}, "">;
+type SelectionRecipePanel = ReturnType<typeof SelectionRecipePanel>;
+export default SelectionRecipePanel;

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

@@ -11,6 +11,7 @@ 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 SelectionRecipePanelComponent from "./SelectionRecipePanel.svelte";
 import type PathsPanelComponent from "./PathsPanel.svelte";
 import type SelectAndMaskWorkspaceComponent from "./SelectAndMaskWorkspace.svelte";
 import type ContentAwareFillWorkspaceComponent from "./ContentAwareFillWorkspace.svelte";
@@ -43,6 +44,7 @@ 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 SelectionRecipePanel } from './SelectionRecipePanel.svelte';
 export { default as PathsPanel } from './PathsPanel.svelte';
 export { default as SelectAndMaskWorkspace } from './SelectAndMaskWorkspace.svelte';
 export { default as ContentAwareFillWorkspace } from './ContentAwareFillWorkspace.svelte';
@@ -77,6 +79,7 @@ export type RefineEdgePanelProps = ComponentProps<typeof RefineEdgePanelComponen
 export type MaskEdgeCheckProps = ComponentProps<typeof MaskEdgeCheckComponent>;
 export type SelectionChangeCheckProps = ComponentProps<typeof SelectionChangeCheckComponent>;
 export type SeparateSubjectPanelProps = ComponentProps<typeof SeparateSubjectPanelComponent>;
+export type SelectionRecipePanelProps = ComponentProps<typeof SelectionRecipePanelComponent>;
 export type PathsPanelProps = ComponentProps<typeof PathsPanelComponent>;
 export type SelectAndMaskWorkspaceProps = ComponentProps<typeof SelectAndMaskWorkspaceComponent>;
 export type ContentAwareFillWorkspaceProps = ComponentProps<typeof ContentAwareFillWorkspaceComponent>;

package/dist/image-editor/index.js

@@ -13,6 +13,7 @@ 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 SelectionRecipePanel } from './SelectionRecipePanel.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.163.0",
+  "version": "0.164.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.220.0"
+    "@pixerate/editor": "0.221.1"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",