@pixerate/editor-svelte 0.157.0 → 0.159.0

package/dist/image-editor/EdgeColorPanel.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import type { ImageEditorController, ImageLayer } from '@pixerate/editor/image-editor';
+  import { untrack } from 'svelte';
+
+  /**
+   * Edge Colour: decontamination, despill and the live edge cast of a layer's soft edge, applied
+   * when compositing (nothing is baked), as the `set_edge_*` tools set them. A slider drag is one
+   * undo step.
+   */
+  interface Props {
+    controller: ImageEditorController;
+    /** The layer to edit (a pixel, shape, type or smart object layer). */
+    layer: ImageLayer;
+    class?: string;
+  }
+
+  let { controller, layer, class: className = '' }: Props = $props();
+
+  const SLIDERS = [
+    { key: 'decontaminate', label: 'Decontaminate', hint: 'Unmix the old background from a soft-edged mask' },
+    { key: 'despill', label: 'Despill', hint: "Take out the old background's hue at the edge" },
+    { key: 'ambient', label: 'Cast', hint: 'Tint the edge with what is behind the layer, live' },
+  ] as const;
+
+  let tick = $state(0);
+  $effect(() => {
+    const c = controller;
+    return untrack(() => c.subscribe(() => tick++));
+  });
+  let error = $state<string | null>(null);
+  let commitNext = true;
+  const info = $derived.by(() => {
+    void tick;
+    return controller.getEdgeColor(layer.id);
+  });
+  const fixed = $derived(info.ambientSource !== 'auto');
+
+  function set(change: Parameters<ImageEditorController['setEdgeColor']>[1]) {
+    error = null;
+    try {
+      controller.setEdgeColor(layer.id, change, commitNext);
+      commitNext = false;
+    } catch (err) {
+      error = err instanceof Error ? err.message : String(err);
+    }
+  }
+  const startDrag = () => (commitNext = true);
+</script>
+
+<details class="text-xs {className}" data-testid="edge-color-panel" open={Boolean(info.decontaminate || info.despill || info.ambient) || undefined}>
+  <summary class="cursor-pointer text-muted-foreground">Edge Colour</summary>
+  <div class="flex flex-col gap-1.5 pt-1">
+    {#each SLIDERS as s (s.key)}
+      <label class="flex flex-col gap-0.5" title={s.hint}>
+        <span class="flex justify-between text-muted-foreground">
+          <span>{s.label}</span>
+          <span class="font-mono">{info[s.key]}%</span>
+        </span>
+        <input
+          type="range"
+          min="0"
+          max="100"
+          aria-label="Edge {s.label.toLowerCase()}"
+          value={info[s.key]}
+          onpointerdown={startDrag}
+          onpointerup={startDrag}
+          onkeydown={startDrag}
+          oninput={(e) => set({ [s.key]: Number((e.currentTarget as HTMLInputElement).value) })}
+          class="accent-primary"
+        />
+      </label>
+    {/each}
+    <label class="flex items-center gap-1.5 text-foreground">
+      <input
+        type="checkbox"
+        aria-label="Fixed cast colour"
+        checked={fixed}
+        onchange={(e) => {
+          commitNext = true;
+          set({ ambientColor: (e.currentTarget as HTMLInputElement).checked ? '#808080' : 'auto' });
+        }}
+        class="accent-primary"
+      />
+      Fixed cast colour
+      {#if fixed}
+        <input
+          type="color"
+          aria-label="Cast colour"
+          value={info.ambientSource}
+          onchange={(e) => {
+            commitNext = true;
+            set({ ambientColor: (e.currentTarget as HTMLInputElement).value });
+          }}
+          class="h-5 w-8 bg-background border border-border rounded"
+        />
+      {/if}
+    </label>
+    {#if error}
+      <p role="alert" class="text-destructive">{error}</p>
+    {/if}
+  </div>
+</details>

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

@@ -0,0 +1,15 @@
+import type { ImageEditorController, ImageLayer } from '@pixerate/editor/image-editor';
+/**
+ * Edge Colour: decontamination, despill and the live edge cast of a layer's soft edge, applied
+ * when compositing (nothing is baked), as the `set_edge_*` tools set them. A slider drag is one
+ * undo step.
+ */
+interface Props {
+    controller: ImageEditorController;
+    /** The layer to edit (a pixel, shape, type or smart object layer). */
+    layer: ImageLayer;
+    class?: string;
+}
+declare const EdgeColorPanel: import("svelte").Component<Props, {}, "">;
+type EdgeColorPanel = ReturnType<typeof EdgeColorPanel>;
+export default EdgeColorPanel;

package/dist/image-editor/LayersPanel.svelte

@@ -23,6 +23,7 @@
   } from '@pixerate/editor/image-editor';
   import { untrack } from 'svelte';
   import LayerEffectsPanel from './LayerEffectsPanel.svelte';
+  import EdgeColorPanel from './EdgeColorPanel.svelte';
 
   interface Props {
     controller: ImageEditorController;
@@ -283,6 +284,12 @@
     </div>
   {/if}
 
+  {#if snapshot.active && (snapshot.active.type === 'pixel' || snapshot.active.type === 'shape' || snapshot.active.type === 'type' || snapshot.active.type === 'smart')}
+    {#key snapshot.active.id}
+      <EdgeColorPanel {controller} layer={snapshot.active} class="border-t border-border pt-1.5" />
+    {/key}
+  {/if}
+
   {#if effects && snapshot.active && snapshot.active.type !== 'adjustment'}
     <LayerEffectsPanel {controller} class="border-t border-border pt-1.5" />
   {/if}

package/dist/image-editor/MaskEdgeCheck.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import type { ImageEditorController, MaskEdgeReport, MaskEdgeTarget, SelectionMask } from '@pixerate/editor/image-editor';
+  import { MASK_EDGE_THRESHOLDS } from '@pixerate/editor/image-editor';
+
+  /**
+   * Check Edge: measures the selection's (or a mask's) edge, as the `inspect_mask_edge` tool does,
+   * and lists the scores (flagged past the thresholds), holes, islands and findings with fixes.
+   */
+  interface Props {
+    controller: ImageEditorController;
+    /** The current selection (`state.selection`): a report on an older selection is cleared. */
+    selection?: SelectionMask | null;
+    /** What to check (default the selection); masks need `layerId`. */
+    target?: MaskEdgeTarget;
+    layerId?: string;
+    class?: string;
+  }
+
+  let { controller, selection, target = 'selection', layerId, 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 result = $state<{ report: MaskEdgeReport; for: SelectionMask | null } | null>(null);
+  let error = $state<string | null>(null);
+  const report = $derived(result && (target !== 'selection' || result.for === sel) ? result.report : null);
+  const T = MASK_EDGE_THRESHOLDS;
+  const rows = $derived(
+    report
+      ? [
+          { label: 'Halo', value: report.haloScore, bad: report.haloScore >= T.halo },
+          { label: 'Edge alignment', value: report.edgeAlignment, bad: report.edgeAlignment < T.alignment },
+          { label: 'Jaggedness', value: report.jaggedness, bad: report.jaggedness >= T.jaggedness },
+          { label: 'Soft edge', value: report.softFraction, bad: report.softFraction >= T.soft },
+        ]
+      : []
+  );
+
+  function check() {
+    error = null;
+    try {
+      result = { report: controller.inspectMaskEdge(target, { layerId }), for: sel };
+    } catch (err) {
+      result = null;
+      error = err instanceof Error ? err.message : String(err);
+    }
+  }
+</script>
+
+<div data-testid="mask-edge-check" class="flex flex-col gap-1.5 text-xs {className}">
+  <button type="button" class="{button} self-start" disabled={target === 'selection' && !sel} onclick={check}>Check Edge</button>
+  {#if report}
+    <dl class="grid grid-cols-[1fr_auto] gap-x-2 gap-y-0.5">
+      {#each rows as r (r.label)}
+        <dt class="text-muted-foreground">{r.label}</dt>
+        <dd class="font-mono text-right {r.bad ? 'text-destructive' : 'text-foreground'}">{r.value}</dd>
+      {/each}
+      <dt class="text-muted-foreground">Holes / islands</dt>
+      <dd class="font-mono text-right {report.holes.count || report.islands.count ? 'text-destructive' : 'text-foreground'}">
+        {report.holes.count} / {report.islands.count}
+      </dd>
+    </dl>
+    {#if report.issues.length}
+      <ul data-testid="mask-edge-issues" class="list-disc pl-4 flex flex-col gap-1 text-foreground">
+        {#each report.issues as s (s)}
+          <li>{s}</li>
+        {/each}
+      </ul>
+    {:else}
+      <p class="text-muted-foreground">The edge looks clean.</p>
+    {/if}
+  {/if}
+  {#if error}
+    <p role="alert" class="text-destructive">{error}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,17 @@
+import type { ImageEditorController, MaskEdgeTarget, SelectionMask } from '@pixerate/editor/image-editor';
+/**
+ * Check Edge: measures the selection's (or a mask's) edge, as the `inspect_mask_edge` tool does,
+ * and lists the scores (flagged past the thresholds), holes, islands and findings with fixes.
+ */
+interface Props {
+    controller: ImageEditorController;
+    /** The current selection (`state.selection`): a report on an older selection is cleared. */
+    selection?: SelectionMask | null;
+    /** What to check (default the selection); masks need `layerId`. */
+    target?: MaskEdgeTarget;
+    layerId?: string;
+    class?: string;
+}
+declare const MaskEdgeCheck: import("svelte").Component<Props, {}, "">;
+type MaskEdgeCheck = ReturnType<typeof MaskEdgeCheck>;
+export default MaskEdgeCheck;

package/dist/image-editor/RefineEdgePanel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { imageRangeClass, imageSectionTitleClass } from './styles.js';
+  import MaskEdgeCheck from './MaskEdgeCheck.svelte';
   import type {
     AdjustmentKind,
     AdjustmentLayer,
@@ -157,6 +158,7 @@
   {#if error}
     <p role="alert" class="text-destructive">{error}</p>
   {/if}
+  <MaskEdgeCheck {controller} selection={sel} />
 
   <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/index.d.ts

@@ -8,6 +8,7 @@ import type CurvesEditorComponent from "./CurvesEditor.svelte";
 import type ControlSliderComponent from "./ControlSlider.svelte";
 import type SelectionOptionsBarComponent from "./SelectionOptionsBar.svelte";
 import type RefineEdgePanelComponent from "./RefineEdgePanel.svelte";
+import type MaskEdgeCheckComponent from "./MaskEdgeCheck.svelte";
 import type PathsPanelComponent from "./PathsPanel.svelte";
 import type SelectAndMaskWorkspaceComponent from "./SelectAndMaskWorkspace.svelte";
 import type ContentAwareFillWorkspaceComponent from "./ContentAwareFillWorkspace.svelte";
@@ -15,6 +16,7 @@ import type ChannelsPanelComponent from "./ChannelsPanel.svelte";
 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 BrushOptionsBarComponent from "./BrushOptionsBar.svelte";
 import type FreeTransformOptionsBarComponent from "./FreeTransformOptionsBar.svelte";
 import type ShapeOptionsBarComponent from "./ShapeOptionsBar.svelte";
@@ -35,6 +37,7 @@ export { default as CurvesEditor } from './CurvesEditor.svelte';
 export { default as ControlSlider } from './ControlSlider.svelte';
 export { default as SelectionOptionsBar } from './SelectionOptionsBar.svelte';
 export { default as RefineEdgePanel } from './RefineEdgePanel.svelte';
+export { default as MaskEdgeCheck } from './MaskEdgeCheck.svelte';
 export { default as PathsPanel } from './PathsPanel.svelte';
 export { default as SelectAndMaskWorkspace } from './SelectAndMaskWorkspace.svelte';
 export { default as ContentAwareFillWorkspace } from './ContentAwareFillWorkspace.svelte';
@@ -42,6 +45,7 @@ export { default as ChannelsPanel } from './ChannelsPanel.svelte';
 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 BrushOptionsBar } from './BrushOptionsBar.svelte';
 export { default as FreeTransformOptionsBar } from './FreeTransformOptionsBar.svelte';
 export { default as ShapeOptionsBar } from './ShapeOptionsBar.svelte';
@@ -64,6 +68,7 @@ export type CurvesEditorProps = ComponentProps<typeof CurvesEditorComponent>;
 export type ControlSliderProps = ComponentProps<typeof ControlSliderComponent>;
 export type SelectionOptionsBarProps = ComponentProps<typeof SelectionOptionsBarComponent>;
 export type RefineEdgePanelProps = ComponentProps<typeof RefineEdgePanelComponent>;
+export type MaskEdgeCheckProps = ComponentProps<typeof MaskEdgeCheckComponent>;
 export type PathsPanelProps = ComponentProps<typeof PathsPanelComponent>;
 export type SelectAndMaskWorkspaceProps = ComponentProps<typeof SelectAndMaskWorkspaceComponent>;
 export type ContentAwareFillWorkspaceProps = ComponentProps<typeof ContentAwareFillWorkspaceComponent>;
@@ -71,6 +76,7 @@ export type ChannelsPanelProps = ComponentProps<typeof ChannelsPanelComponent>;
 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 BrushOptionsBarProps = ComponentProps<typeof BrushOptionsBarComponent>;
 export type FreeTransformOptionsBarProps = ComponentProps<typeof FreeTransformOptionsBarComponent>;
 export type ShapeOptionsBarProps = ComponentProps<typeof ShapeOptionsBarComponent>;

package/dist/image-editor/index.js

@@ -10,6 +10,7 @@ export { default as CurvesEditor } from './CurvesEditor.svelte';
 export { default as ControlSlider } from './ControlSlider.svelte';
 export { default as SelectionOptionsBar } from './SelectionOptionsBar.svelte';
 export { default as RefineEdgePanel } from './RefineEdgePanel.svelte';
+export { default as MaskEdgeCheck } from './MaskEdgeCheck.svelte';
 export { default as PathsPanel } from './PathsPanel.svelte';
 export { default as SelectAndMaskWorkspace } from './SelectAndMaskWorkspace.svelte';
 export { default as ContentAwareFillWorkspace } from './ContentAwareFillWorkspace.svelte';
@@ -17,6 +18,7 @@ export { default as ChannelsPanel } from './ChannelsPanel.svelte';
 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 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.157.0",
+  "version": "0.159.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.213.0"
+    "@pixerate/editor": "0.215.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",