@pixerate/editor-svelte 0.162.2 → 0.164.0

package/dist/image-editor/LayersPanel.svelte

@@ -24,6 +24,7 @@
   import { untrack } from 'svelte';
   import LayerEffectsPanel from './LayerEffectsPanel.svelte';
   import EdgeColorPanel from './EdgeColorPanel.svelte';
+  import VectorMaskEdgesPanel from './VectorMaskEdgesPanel.svelte';
 
   interface Props {
     controller: ImageEditorController;
@@ -289,6 +290,9 @@
       <EdgeColorPanel {controller} layer={snapshot.active} class="border-t border-border pt-1.5" />
     {/key}
   {/if}
+  {#if snapshot.active?.vectorMask}
+    <VectorMaskEdgesPanel {controller} layer={snapshot.active} class="border-t border-border pt-1.5" />
+  {/if}
 
   {#if effects && snapshot.active && snapshot.active.type !== 'adjustment'}
     <LayerEffectsPanel {controller} class="border-t border-border pt-1.5" />

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/VectorMaskEdgesPanel.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import type { ImageEditorController, ImageLayer, VectorMaskEdge } from '@pixerate/editor/image-editor';
+  import { untrack } from 'svelte';
+
+  /**
+   * Hybrid mask edges: the soft segments of a layer's vector mask (feather or matte), with their
+   * settings, as `set_vector_mask_edge` sets them. Alt+Shift-click a segment with Direct Selection
+   * to cycle its mode on the canvas. Every change is one undo step.
+   */
+  interface Props {
+    controller: ImageEditorController;
+    /** The layer whose vector mask to edit. */
+    layer: ImageLayer;
+    class?: string;
+  }
+
+  let { controller, layer, class: className = '' }: Props = $props();
+
+  const MODES = ['hard', 'feather', 'matte'] as const;
+  const input = 'w-12 bg-background border border-border rounded px-1 py-0.5 text-foreground';
+  let tick = $state(0);
+  $effect(() => {
+    const c = controller;
+    return untrack(() => c.subscribe(() => tick++));
+  });
+  let error = $state<string | null>(null);
+  const info = $derived.by(() => {
+    void tick;
+    return controller.getVectorMask(layer.id);
+  });
+
+  function set(e: VectorMaskEdge, mode: VectorMaskEdge['mode'], options: { radius?: number; inner?: number; outer?: number } = {}) {
+    error = null;
+    try {
+      controller.setVectorMaskEdge(layer.id, { component: e.component, subpath: e.subpath, segment: e.segment }, mode, options);
+    } catch (err) {
+      error = err instanceof Error ? err.message : String(err);
+    }
+  }
+  const num = (v: string, fallback: number) => (Number.isFinite(Number(v)) && Number(v) > 0 ? Number(v) : fallback);
+  const value = (ev: Event) => (ev.currentTarget as HTMLInputElement | HTMLSelectElement).value;
+</script>
+
+{#if info}
+  <div class="flex flex-col gap-1.5 text-xs {className}" data-testid="vector-mask-edges">
+    <span class="text-muted-foreground">Vector mask edges</span>
+    <p class="text-muted-foreground">Alt+Shift-click a segment with Direct Selection to make it feathered or a hair matte.</p>
+    {#if info.edges.length === 0}
+      <p class="text-muted-foreground">Every segment is hard.</p>
+    {/if}
+    <ul class="flex flex-col gap-1">
+      {#each info.edges as e (`${e.component}:${e.subpath}:${e.segment}`)}
+        <li data-testid="vector-mask-edge" class="flex flex-wrap items-center gap-1.5">
+          <span class="font-mono text-muted-foreground">{e.component}/{e.subpath}/{e.segment}</span>
+          <select aria-label="Edge mode" value={e.mode} onchange={(ev) => set(e, value(ev) as VectorMaskEdge['mode'])} 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 e.mode === 'feather'}
+            <label class="flex items-center gap-1 text-muted-foreground">
+              radius
+              <input type="number" min="0.5" max="250" step="0.5" aria-label="Edge feather radius" value={e.radius} oninput={(ev) => set(e, 'feather', { radius: num(value(ev), 4) })} class={input} />
+            </label>
+          {/if}
+          {#if e.mode === 'matte'}
+            <label class="flex items-center gap-1 text-muted-foreground">
+              in
+              <input type="number" min="0.5" max="200" step="0.5" aria-label="Edge matte inner" value={e.inner} oninput={(ev) => set(e, 'matte', { inner: num(value(ev), 4), outer: e.outer })} class={input} />
+            </label>
+            <label class="flex items-center gap-1 text-muted-foreground">
+              out
+              <input type="number" min="0.5" max="200" step="0.5" aria-label="Edge matte outer" value={e.outer} oninput={(ev) => set(e, 'matte', { inner: e.inner, outer: num(value(ev), 8) })} class={input} />
+            </label>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+    {#if error}
+      <p role="alert" class="text-destructive">{error}</p>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,15 @@
+import type { ImageEditorController, ImageLayer } from '@pixerate/editor/image-editor';
+/**
+ * Hybrid mask edges: the soft segments of a layer's vector mask (feather or matte), with their
+ * settings, as `set_vector_mask_edge` sets them. Alt+Shift-click a segment with Direct Selection
+ * to cycle its mode on the canvas. Every change is one undo step.
+ */
+interface Props {
+    controller: ImageEditorController;
+    /** The layer whose vector mask to edit. */
+    layer: ImageLayer;
+    class?: string;
+}
+declare const VectorMaskEdgesPanel: import("svelte").Component<Props, {}, "">;
+type VectorMaskEdgesPanel = ReturnType<typeof VectorMaskEdgesPanel>;
+export default VectorMaskEdgesPanel;

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";
@@ -19,6 +20,7 @@ import type LayersPanelComponent from "./LayersPanel.svelte";
 import type ColorProfilePanelComponent from "./ColorProfilePanel.svelte";
 import type LayerEffectsPanelComponent from "./LayerEffectsPanel.svelte";
 import type EdgeColorPanelComponent from "./EdgeColorPanel.svelte";
+import type VectorMaskEdgesPanelComponent from "./VectorMaskEdgesPanel.svelte";
 import type BrushOptionsBarComponent from "./BrushOptionsBar.svelte";
 import type FreeTransformOptionsBarComponent from "./FreeTransformOptionsBar.svelte";
 import type ShapeOptionsBarComponent from "./ShapeOptionsBar.svelte";
@@ -42,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';
@@ -50,6 +53,7 @@ export { default as LayersPanel } from './LayersPanel.svelte';
 export { default as ColorProfilePanel } from './ColorProfilePanel.svelte';
 export { default as LayerEffectsPanel } from './LayerEffectsPanel.svelte';
 export { default as EdgeColorPanel } from './EdgeColorPanel.svelte';
+export { default as VectorMaskEdgesPanel } from './VectorMaskEdgesPanel.svelte';
 export { default as BrushOptionsBar } from './BrushOptionsBar.svelte';
 export { default as FreeTransformOptionsBar } from './FreeTransformOptionsBar.svelte';
 export { default as ShapeOptionsBar } from './ShapeOptionsBar.svelte';
@@ -75,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>;
@@ -83,6 +88,7 @@ export type LayersPanelProps = ComponentProps<typeof LayersPanelComponent>;
 export type ColorProfilePanelProps = ComponentProps<typeof ColorProfilePanelComponent>;
 export type LayerEffectsPanelProps = ComponentProps<typeof LayerEffectsPanelComponent>;
 export type EdgeColorPanelProps = ComponentProps<typeof EdgeColorPanelComponent>;
+export type VectorMaskEdgesPanelProps = ComponentProps<typeof VectorMaskEdgesPanelComponent>;
 export type BrushOptionsBarProps = ComponentProps<typeof BrushOptionsBarComponent>;
 export type FreeTransformOptionsBarProps = ComponentProps<typeof FreeTransformOptionsBarComponent>;
 export type ShapeOptionsBarProps = ComponentProps<typeof ShapeOptionsBarComponent>;

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';
@@ -21,6 +22,7 @@ export { default as LayersPanel } from './LayersPanel.svelte';
 export { default as ColorProfilePanel } from './ColorProfilePanel.svelte';
 export { default as LayerEffectsPanel } from './LayerEffectsPanel.svelte';
 export { default as EdgeColorPanel } from './EdgeColorPanel.svelte';
+export { default as VectorMaskEdgesPanel } from './VectorMaskEdgesPanel.svelte';
 export { default as BrushOptionsBar } from './BrushOptionsBar.svelte';
 export { default as FreeTransformOptionsBar } from './FreeTransformOptionsBar.svelte';
 export { default as ShapeOptionsBar } from './ShapeOptionsBar.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.162.2",
+  "version": "0.164.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.219.2"
+    "@pixerate/editor": "0.221.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",