@pixerate/editor 0.194.0 → 0.196.0

package/dist/vector/index.js

@@ -9464,6 +9464,32 @@ var VectorEditorController = class _VectorEditorController {
     this.change(labels[op], () => this.setDoc(reorder(this.doc.nodes)));
     return { ok: true };
   }
+  /**
+   * Moves a node to `index` among its siblings (bottom to top, 0 the bottom), as dragging it in
+   * a layers panel does. Clipping groups and blends keep their order: their mask and keys are
+   * placed by position.
+   */
+  reorderNode(id, index) {
+    const node = this.getNode(id);
+    if (!node) return { ok: false, message: `No node "${id}".` };
+    let parent = null;
+    walkVectorNodes(this.doc.nodes, (n2, p) => {
+      if (n2.id === id) parent = p;
+    });
+    const group = parent;
+    if (group && (isVectorMaskGroup(group) || isVectorBlendGroup(group))) {
+      return { ok: false, message: "The order inside a clipping group or blend is fixed." };
+    }
+    const siblings = group ? group.children : this.doc.nodes;
+    const from = siblings.findIndex((n2) => n2.id === id);
+    const to = Math.max(0, Math.min(siblings.length - 1, Math.round(index)));
+    if (from === to) return { ok: true };
+    const next = [...siblings];
+    next.splice(from, 1);
+    next.splice(to, 0, node);
+    this.change("Move Layer", () => group ? this.replaceNode(group.id, { ...group, children: next }) : this.setDoc(next));
+    return { ok: true };
+  }
   /**
    * Combines the selected paths (two or more) into one with a boolean operation. `subtract`
    * removes the upper shapes from the lowest one. The result takes the lowest shape's style
@@ -18559,6 +18585,68 @@ function createVectorEditorDocument(controller) {
     }
   });
 }
+
+// src/vector/layers.ts
+var VECTOR_LAYER_KIND_LABELS = {
+  path: "Path",
+  connector: "Connector",
+  lens: "Lens",
+  text: "Text",
+  instance: "Symbol",
+  group: "Group",
+  frame: "Frame",
+  mask: "Clipping Group",
+  blend: "Blend",
+  boolean: "Live Boolean",
+  symmetry: "Symmetry"
+};
+function vectorLayerKind(node) {
+  if (node.type === "text") return "text";
+  if (node.type === "instance") return "instance";
+  if (node.type === "path") return isVectorConnector(node) ? "connector" : isVectorLens(node) ? "lens" : "path";
+  if (isVectorFrame(node)) return "frame";
+  if (isVectorMaskGroup(node)) return "mask";
+  if (isVectorBlendGroup(node)) return "blend";
+  if (node.liveBoolean) return "boolean";
+  if (isVectorSymmetryGroup(node)) return "symmetry";
+  return "group";
+}
+function vectorLayerName(node) {
+  const name = node.name?.trim();
+  if (name) return name;
+  if (node.type === "text") {
+    const text = node.text.replace(/\s+/g, " ").trim();
+    if (text) return text.length > 40 ? `${text.slice(0, 39)}\u2026` : text;
+  }
+  return VECTOR_LAYER_KIND_LABELS[vectorLayerKind(node)];
+}
+function vectorLayerChildren(node) {
+  return node.type === "group" ? node.children.filter((child) => !child.blendStep) : [];
+}
+function vectorLayerRows(nodes, expanded = () => false) {
+  const rows = [];
+  const visit = (list, depth, parentId) => {
+    for (let i = list.length - 1; i >= 0; i--) {
+      const node = list[i];
+      const children = vectorLayerChildren(node);
+      const open = children.length > 0 && expanded(node.id);
+      rows.push({
+        id: node.id,
+        name: vectorLayerName(node),
+        kind: vectorLayerKind(node),
+        depth,
+        parentId,
+        visible: node.visible !== false,
+        locked: !!node.locked,
+        childCount: children.length,
+        expanded: open
+      });
+      if (open) visit(children, depth + 1, node.id);
+    }
+  };
+  visit(nodes, 0, null);
+  return rows;
+}
 export {
   DEFAULT_VECTOR_BLEND_DISTANCE,
   DEFAULT_VECTOR_BLEND_STEPS,
@@ -18625,6 +18713,7 @@ export {
   VECTOR_HORIZONTAL_RESIZING,
   VECTOR_HORIZONTAL_RESIZING_LABELS,
   VECTOR_INK_MAX_CORNERS,
+  VECTOR_LAYER_KIND_LABELS,
   VECTOR_LENS_LABELS,
   VECTOR_LENS_SPECS,
   VECTOR_LENS_TYPES,
@@ -19127,6 +19216,10 @@ export {
   vectorInkShapeName,
   vectorInstanceDrawn,
   vectorInstanceGroup,
+  vectorLayerChildren,
+  vectorLayerKind,
+  vectorLayerName,
+  vectorLayerRows,
   vectorLensColorMap,
   vectorLensDrawn,
   vectorLiveBooleanSteps,

package/dist/vector/layers.d.cts

@@ -0,0 +1,32 @@
+/**
+ * The vector document as a layers panel shows it: one row per node, top first, groups indented
+ * with their children when expanded. Hosts draw the rows themselves and act on them with the
+ * controller (`select`, `setVisible`, `setLocked`, `rename`, `reorderNode`).
+ */
+import type { VectorNode } from './types.cjs';
+/** What a layer is, for its icon and its default name. */
+export type VectorLayerKind = 'path' | 'connector' | 'lens' | 'text' | 'instance' | 'group' | 'frame' | 'mask' | 'blend' | 'boolean' | 'symmetry';
+export declare const VECTOR_LAYER_KIND_LABELS: Record<VectorLayerKind, string>;
+export interface VectorLayerRow {
+    id: string;
+    name: string;
+    kind: VectorLayerKind;
+    /** 0 for the document's own nodes. */
+    depth: number;
+    parentId: string | null;
+    visible: boolean;
+    locked: boolean;
+    /** Children the row can show (a blend's generated steps are not counted). */
+    childCount: number;
+    expanded: boolean;
+}
+export declare function vectorLayerKind(node: VectorNode): VectorLayerKind;
+/** The node's name, else its text (for text), else its kind. */
+export declare function vectorLayerName(node: VectorNode): string;
+/** A group's children as the layers panel lists them: a blend's generated steps are left out. */
+export declare function vectorLayerChildren(node: VectorNode): VectorNode[];
+/**
+ * The rows for `nodes` (bottom to top, as documents keep them), top first. A group's children
+ * follow it, indented, when `expanded` says so.
+ */
+export declare function vectorLayerRows(nodes: readonly VectorNode[], expanded?: (id: string) => boolean): VectorLayerRow[];

package/dist/vector/layers.d.ts

@@ -0,0 +1,32 @@
+/**
+ * The vector document as a layers panel shows it: one row per node, top first, groups indented
+ * with their children when expanded. Hosts draw the rows themselves and act on them with the
+ * controller (`select`, `setVisible`, `setLocked`, `rename`, `reorderNode`).
+ */
+import type { VectorNode } from './types.js';
+/** What a layer is, for its icon and its default name. */
+export type VectorLayerKind = 'path' | 'connector' | 'lens' | 'text' | 'instance' | 'group' | 'frame' | 'mask' | 'blend' | 'boolean' | 'symmetry';
+export declare const VECTOR_LAYER_KIND_LABELS: Record<VectorLayerKind, string>;
+export interface VectorLayerRow {
+    id: string;
+    name: string;
+    kind: VectorLayerKind;
+    /** 0 for the document's own nodes. */
+    depth: number;
+    parentId: string | null;
+    visible: boolean;
+    locked: boolean;
+    /** Children the row can show (a blend's generated steps are not counted). */
+    childCount: number;
+    expanded: boolean;
+}
+export declare function vectorLayerKind(node: VectorNode): VectorLayerKind;
+/** The node's name, else its text (for text), else its kind. */
+export declare function vectorLayerName(node: VectorNode): string;
+/** A group's children as the layers panel lists them: a blend's generated steps are left out. */
+export declare function vectorLayerChildren(node: VectorNode): VectorNode[];
+/**
+ * The rows for `nodes` (bottom to top, as documents keep them), top first. A group's children
+ * follow it, indented, when `expanded` says so.
+ */
+export declare function vectorLayerRows(nodes: readonly VectorNode[], expanded?: (id: string) => boolean): VectorLayerRow[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor",
-  "version": "0.194.0",
+  "version": "0.196.0",
   "description": "UI-agnostic rich text and media editing core library",
   "author": "Pixerate",
   "license": "MIT",

package/skills/pixerate-image-editor/SKILL.md

@@ -252,7 +252,8 @@ in the source frame at the document's bit depth, colour mode and profile. Read
 | `select_rect` | Rectangular marquee: `x`, `y`, `width`, `height` (natural px), `mode` (replace, add, subtract, intersect), `feather` px, `antiAlias`. Returns the summary. |
 | `select_ellipse` | Elliptical marquee inscribed in `x`, `y`, `width`, `height`; same options. A feathered ellipse makes a vignette. Returns the summary. |
 | `select_line` | Single row or column marquee: `orientation` `row` (at y) or `column` (at x), `position` in natural px, `mode`. A 1 px line across the image. Returns the summary. |
-| `select_polygon` | The lasso: `points` (at least 3 `{x, y}` along the outline, closed automatically), `mode`, `feather`, `antiAlias`. Trace a subject's contour, not its box. Returns the summary. |
+| `quick_select` | Quick Selection: `strokes` (brush paths of `{x, y}`), `size` (diameter, default 30), `mode`, `sampleAllLayers`, `enhanceEdge`. Each stroke grows out to its region's edges; with `replace` the first replaces and the rest add. Paint inside the area, then check and fix with `add` / `subtract` strokes. Returns the summary. |
+| `select_polygon` | The lasso: `points` (at least 3 `{x, y}` along the outline, closed automatically), `mode`, `feather`, `antiAlias`; `snapToEdges: {width, contrast}` makes it the Magnetic Lasso (points snap to edges, the outline follows them). Trace a subject's contour, not its box. Returns the summary (plus `outlinePoints` when snapped). |
 | `magic_wand` | Select similar colour from `x`, `y`: `tolerance` 0..255 (default 32), `contiguous` (default true), `distance` `rgb` or `perceptual`, `sampleMerged`, `sample` (`composite` or `active-layer`), `mode`, `feather`. For flat backdrops and solid colours. Returns the summary. |
 | `select_color_range` | Color Range, soft: `samples` (`[{color, x?, y?}]`) or a `preset` (reds … magentas, highlights, midtones, shadows, skinTones); `fuzziness` (samples 0..200, default 40; tone presets' falloff, default 20), `localized` px radius around positioned samples, `invert`, `sample`, `mode`, `feather`. Returns the summary. |
 | `load_selection_from_image` | Load a mask image (`image` data URL or URL; white = selected) by `channel` (luminance, alpha, red, green, blue), with `threshold`, `invert`, `mode`. For AI or saved mattes; then `refine_selection`. Returns the summary. |

package/skills/pixerate-image-selection-masking/SKILL.md

@@ -96,7 +96,9 @@ This skill is the method. `pixerate-image-editor` has the full tool reference.
 | Subject | Method |
 | --- | --- |
 | Geometric areas: a frame, a screen, a band | `select_rect` / `select_ellipse`, with `feather` for soft transitions |
-| A subject with a clear outline (product, person, animal) | `select_subject` if the host has a model; else `select_polygon` along the contour (20–60 points), then `refine_selection` |
+| A subject with a clear outline (product, person, animal) | `select_subject` if the host has a model; else `select_polygon` with `snapToEdges` (12–30 points within `width` of the edge), then `refine_selection` |
+| An area or subject that differs from its surroundings (a shirt, a sky, a car) | `quick_select` with strokes painted inside it, away from the edge (`size` a fraction of its width); `add` / `subtract` strokes where it fell short or leaked |
+| A low-contrast or busy outline the edges don't follow | `select_polygon` without `snapToEdges`, along the contour (20–60 points) |
 | Flat backdrop or solid colour (studio white, green screen, sky without clouds) | `magic_wand` on the backdrop (`tolerance` 20–40; `distance: "perceptual"` for gradients), then `invert_selection` |
 | A colour spread across the image (all the reds, a dress) | `select_color_range` with `samples` (several picks) or a hue `preset`; `localized` to keep one area |
 | Tones (shadows, highlights, a luminosity mask) | `select_color_range` with `preset` `shadows` / `midtones` / `highlights` |
@@ -155,6 +157,13 @@ This skill is the method. `pixerate-image-editor` has the full tool reference.
   30–60), check `percent`, and grow with `mode: "add"`.
 - **Box instead of outline:** `select_rect` around a subject masks its background too. Trace
   the contour.
+- **Quick Selection spills over a weak edge:** a stroke grows into neighbouring areas of a
+  similar colour. Paint smaller strokes further from the edge, then a `subtract` stroke on the
+  spill. Strokes near an edge also pull in the other side.
+- **Magnetic outline jumps to the wrong edge:** `snapToEdges` follows the strongest edge near
+  each point, which can be a shadow or a texture. Put points within `width` of the edge you
+  want, add points where it turns or runs past another edge, raise `contrast` on a busy
+  background, and drop `snapToEdges` where the edge is too faint.
 - **Over-feathering hard objects:** a 10 px feather on a product looks like a glow. Keep hard
   edges at 0–2 px and refine soft ones instead.
 - **Halo:** the old background shows as a light or dark fringe. `contract` 1–2 px or
@@ -183,7 +192,8 @@ This skill is the method. `pixerate-image-editor` has the full tool reference.
 - `get_selection`: empty, bounds, area and percent after every step
 - `select_all`, `deselect`, `invert_selection`: whole-image selections
 - `select_rect`, `select_ellipse`: marquees
-- `select_polygon`: the lasso, along a contour
+- `select_polygon`: the lasso, along a contour; with `snapToEdges`, the Magnetic Lasso
+- `quick_select`: brush strokes that grow out to the region's edges
 - `select_line`: a single row or column
 - `select_layer_transparency`: a layer's own pixels
 - `grow_selection`, `select_similar`: add similar colour, connected or anywhere