@pixerate/editor-svelte 0.148.3 → 0.149.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,11 +5,13 @@
5
5
  AdjustmentLayer,
6
6
  ImageEditorController,
7
7
  RefineEdgeParams,
8
+ RefineOutput,
8
9
  SelectionMask,
9
10
  } from '@pixerate/editor/image-editor';
10
11
  import {
11
12
  ADJUSTMENT_KINDS,
12
13
  REFINE_EDGE_CONTROLS,
14
+ REFINE_OUTPUTS,
13
15
  adjustmentKindLabel,
14
16
  layerMaskFromSelection,
15
17
  } from '@pixerate/editor/image-editor';
@@ -46,13 +48,16 @@
46
48
  let error = $state<string | null>(null);
47
49
  let layerId = $state('');
48
50
  let newKind = $state<AdjustmentKind>('hueSaturation');
51
+ let output = $state<RefineOutput>('selection');
52
+ let decontaminate = $state(0);
53
+ const toLayer = $derived(output === 'new-layer' || output === 'new-layer-with-mask');
49
54
  const target = $derived(list.find((l) => l.id === layerId) ?? list[list.length - 1]);
50
55
 
51
56
  async function refine() {
52
57
  busy = true;
53
58
  error = null;
54
59
  try {
55
- await controller.refineSelection({ ...params });
60
+ await controller.refineSelectionTo({ ...params }, output, { decontaminate: toLayer ? decontaminate : 0 });
56
61
  } catch (err) {
57
62
  error = err instanceof Error ? err.message : String(err);
58
63
  } finally {
@@ -97,6 +102,36 @@
97
102
  />
98
103
  Smart Radius
99
104
  </label>
105
+ <label class="flex items-center gap-2 text-muted-foreground">
106
+ Output to
107
+ <select
108
+ aria-label="Refine output"
109
+ value={output}
110
+ onchange={(e) => (output = (e.currentTarget as HTMLSelectElement).value as RefineOutput)}
111
+ class="flex-1 bg-background border border-border rounded px-1 py-1 text-foreground"
112
+ >
113
+ {#each REFINE_OUTPUTS as o (o.id)}
114
+ <option value={o.id}>{o.label}</option>
115
+ {/each}
116
+ </select>
117
+ </label>
118
+ <label class="flex flex-col gap-1">
119
+ <span class="flex justify-between text-muted-foreground">
120
+ <span>Decontaminate colors{toLayer ? '' : ' (new layer outputs)'}</span>
121
+ <span class="font-mono">{decontaminate}%</span>
122
+ </span>
123
+ <input
124
+ type="range"
125
+ min="0"
126
+ max="100"
127
+ step="1"
128
+ aria-label="Decontaminate amount"
129
+ disabled={!toLayer}
130
+ value={decontaminate}
131
+ oninput={(e) => (decontaminate = Number((e.currentTarget as HTMLInputElement).value))}
132
+ class={imageRangeClass}
133
+ />
134
+ </label>
100
135
  <div class="flex gap-1">
101
136
  <button type="button" class={button} disabled={!sel || busy} onclick={refine}>Refine Edge</button>
102
137
  <button type="button" class={button} onclick={() => (params = { ...DEFAULT_PARAMS })}>Reset</button>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pixerate/editor-svelte",
3
- "version": "0.148.3",
3
+ "version": "0.149.0",
4
4
  "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
5
5
  "author": "Pixerate",
6
6
  "license": "MIT",
@@ -165,7 +165,7 @@
165
165
  "**/*.css"
166
166
  ],
167
167
  "dependencies": {
168
- "@pixerate/editor": "0.204.0"
168
+ "@pixerate/editor": "0.205.0"
169
169
  },
170
170
  "peerDependencies": {
171
171
  "@dagrejs/dagre": "^1.1.4",