@pixerate/editor 0.228.2 → 0.229.0

package/dist/image-editor/index.js

@@ -72,6 +72,7 @@ import {
   LUMA_709,
   LayerCompositor,
   LayerOperationError,
+  MARGIN_FIT_MIN_GUTTER,
   MAX_EFFECT_ANIMATION_MS,
   MAX_KELVIN,
   MIN_KELVIN,
@@ -405,7 +406,7 @@ import {
   writePsd,
   xyToTempTint,
   xyToUv
-} from "../chunk-SWKXPAJC.js";
+} from "../chunk-JVNGCS26.js";
 import {
   parseCssColor
 } from "../chunk-3CI7FRMK.js";
@@ -7156,6 +7157,35 @@ var ImageEditorController = class {
     const data = this.compositor.composite(layers, r, this.compositorSources());
     return { width: r.width, height: r.height, data };
   }
+  /**
+   * The Eyedropper: the colour (#rrggbb) of the composite at a document point, or the average of
+   * the `size` × `size` square round it (1, 3 or 5…), or null outside the canvas or where every
+   * layer is transparent. With `setForeground` it also becomes the paint foreground.
+   */
+  sampleColor(point2, options = {}) {
+    const { width, height } = this.naturalSize;
+    const size = Math.max(1, Math.floor(options.size ?? 1));
+    const cx = Math.floor(point2.x);
+    const cy = Math.floor(point2.y);
+    if (cx < 0 || cy < 0 || cx >= width || cy >= height) return null;
+    const half = Math.floor(size / 2);
+    const x = Math.max(0, cx - half);
+    const y = Math.max(0, cy - half);
+    const rect3 = { x, y, width: Math.min(width, cx + half + 1) - x, height: Math.min(height, cy + half + 1) - y };
+    const { data } = this.compositePixels(rect3);
+    let r = 0, g = 0, b = 0, a = 0;
+    for (let i = 0; i < data.length; i += 4) {
+      const w = data[i + 3];
+      r += data[i] * w;
+      g += data[i + 1] * w;
+      b += data[i + 2] * w;
+      a += w;
+    }
+    if (a === 0) return null;
+    const hex = toHex([r / a, g / a, b / a]);
+    if (options.setForeground) this.setPaintOptions({ foreground: hex });
+    return hex;
+  }
   compositorSources() {
     const { width, height } = this.naturalSize;
     return {
@@ -13523,7 +13553,7 @@ var DEPTH_MASK_CONTROLS = [
 
 // src/image-editor/playback.ts
 var IMAGE_PLAYBACK_KIND = "layer";
-var PAINT = /^(paint_stroke|clone_stamp|heal_brush|spot_heal|dodge|burn|sponge|smudge|blur_stroke|sharpen_stroke|history_brush|set_clone_source|set_clone_transform|fill_pixels|clear_pixels|set_paint|set_retouch_options|load_mixer_brush|clean_mixer_brush)$/;
+var PAINT = /^(paint_stroke|clone_stamp|heal_brush|spot_heal|dodge|burn|sponge|smudge|blur_stroke|sharpen_stroke|history_brush|set_clone_source|set_clone_transform|fill_pixels|clear_pixels|set_paint|sample_color|set_retouch_options|load_mixer_brush|clean_mixer_brush)$/;
 var SELECT = /^(make_work_path|add_path|set_path_geometry|rename_path|duplicate_path|delete_path|fill_path|stroke_path|select_region|select_subject|select_by_color|select_all|deselect|invert_selection|select_rect|select_ellipse|select_polygon|quick_select|select_object|select_focus_area|select_sky|select_line|magic_wand|grow_selection|select_similar|reselect|select_layer_transparency|select_color_range|load_selection_from_image|load_selection_from_mask|set_selection_display|modify_selection|refine_selection|transform_selection|apply_selection_as_mask|layer_via_copy|stroke_selection|content_aware_fill|copy_pixels|cut_pixels|paste_pixels|save_selection|load_selection_from_channel|set_channel_properties|duplicate_channel|delete_channel|load_channel_from_image|set_quick_mask|path_to_selection|select_text_shape|compare_selections|edit_selection_step|insert_selection_step|remove_selection_step|freeze_selection|separate_subject)$/;
 var ANNOTATE = /^(add_shape_layer|update_shape|add_shape_component|set_shape_component|remove_shape_component|merge_shape_components|add_text_layer|set_text|set_text_style|set_paragraph_style|set_text_frame|set_text_orientation|convert_text_to_shape)$/;
 var CROP = /^(set_crop|crop_to_selection|reset_crop|set_rotation|flip_image|transform_layer|warp_layer|flip_layer|offset_layer)$/;
@@ -17441,7 +17471,29 @@ function createImagePaintTools(controller) {
     annotations: { title: "Get the paint", ...READ4 },
     handler: () => paintView()
   };
-  return [paintStroke, fill, clear, getMixer, loadMixerTool, cleanMixerTool, setPaint, getPaint];
+  const sampleColor2 = {
+    name: "sample_color",
+    title: "Sample a colour (Eyedropper)",
+    description: "The Eyedropper: reads the composite colour at a point in document pixels, averaged over a size \xD7 size square (default 1), and by default makes it the paint foreground. Fails outside the canvas or where every layer is transparent. View state, not an undo step. Returns the colour (#rrggbb) and the foreground.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        x: { type: "number", description: "Document x in pixels." },
+        y: { type: "number", description: "Document y in pixels." },
+        size: { type: "integer", minimum: 1, maximum: 101, description: "Sample square in pixels (odd values centre on the point). Default 1." },
+        setForeground: { type: "boolean", description: "Make the colour the paint foreground (default true)." }
+      },
+      required: ["x", "y"],
+      additionalProperties: false
+    },
+    annotations: { title: "Sample a colour (Eyedropper)", ...SET },
+    handler: (args) => {
+      const color = controller.sampleColor({ x: args.x, y: args.y }, { size: args.size, setForeground: args.setForeground !== false });
+      if (!color) throw new LayerOperationError(`Nothing to sample at (${args.x}, ${args.y}): the point is outside the canvas or transparent. Read the canvas size with get_image_info, then sample inside it.`);
+      return { color, foreground: controller.getState().paint.foreground };
+    }
+  };
+  return [paintStroke, fill, clear, getMixer, loadMixerTool, cleanMixerTool, setPaint, getPaint, sampleColor2];
 }
 
 // src/image-editor/color-tools.ts
@@ -20902,6 +20954,7 @@ function layerPanels(layer, options = {}) {
   };
   if (layer.type === "pixel") {
     effects();
+    panels.push({ id: "color", title: "Color Adjustments" });
     panels.push({ id: "paint", title: "Brush Options" });
   } else if (layer.type === "adjustment") {
     panels.push({ id: "adjustment", title: adjustmentKindLabel(layer.kind) });
@@ -20911,7 +20964,10 @@ function layerPanels(layer, options = {}) {
   } else if (layer.type === "shape") {
     panels.push({ id: "shape", title: "Shape Options" });
     effects();
-  } else if (layer.type === "smart" || layer.type === "group") {
+  } else if (layer.type === "smart") {
+    effects();
+    panels.push({ id: "color", title: "Color Adjustments" });
+  } else if (layer.type === "group") {
     effects();
   }
   if (layer.mask || layer.vectorMask) {
@@ -21935,18 +21991,28 @@ var IMAGE_TOOL_GROUPS = [
   { id: "move", label: "Move", tools: ["move"] },
   { id: "select", label: "Select", tools: ["select"] },
   { id: "crop", label: "Crop", tools: ["crop"] },
-  { id: "brush", label: "Brush", tools: ["brush", "mixer"] },
-  { id: "eraser", label: "Eraser", tools: ["eraser"] },
-  { id: "repair", label: "Repair", tools: ["spot-heal", "heal", "clone"] },
-  { id: "history", label: "History Brush", tools: ["history"] },
-  { id: "focus", label: "Blur & Sharpen", tools: ["blur", "sharpen", "smudge"] },
-  { id: "tone", label: "Dodge & Burn", tools: ["dodge", "burn", "sponge"] },
+  { id: "draw", label: "Draw", tools: ["brush", "pen", "mixer"] },
+  { id: "erase", label: "Erase", tools: ["eraser", "history"] },
+  {
+    id: "retouch",
+    label: "Retouch",
+    tools: ["spot-heal", "heal", "clone", "dodge", "burn", "sponge", "blur", "sharpen", "smudge"],
+    sections: [
+      { label: "Fix", tools: ["spot-heal", "heal", "clone"] },
+      { label: "Tone", tools: ["dodge", "burn", "sponge"] },
+      { label: "Detail", tools: ["blur", "sharpen", "smudge"] }
+    ]
+  },
   { id: "shape", label: "Shape", tools: ["shape"] },
-  { id: "pen", label: "Pen", tools: ["path-pen"] },
+  { id: "paths", label: "Paths", tools: ["path-pen", "path-select", "direct-select"] },
   { id: "type", label: "Type", tools: ["type"] },
-  { id: "path-select", label: "Path Selection", tools: ["path-select", "direct-select"] },
-  { id: "annotate", label: "Annotate", tools: ["pen", "line", "arrow", "rect", "circle"] }
+  { id: "eyedropper", label: "Eyedropper", tools: ["eyedropper"] }
 ];
+function imageToolVariants(tool) {
+  if (tool === "select") return SELECTION_TOOLS.map((t) => ({ tool: "select", id: t.id, label: t.label }));
+  if (tool === "shape") return LIVE_SHAPE_KINDS.map((kind) => ({ tool: "shape", id: kind, label: SHAPE_KIND_LABELS[kind] }));
+  return [];
+}
 function imageToolGroup(tool) {
   return IMAGE_TOOL_GROUPS.find((group) => group.tools.includes(tool)) ?? IMAGE_TOOL_GROUPS[0];
 }
@@ -21958,13 +22024,14 @@ var OTHER_TOOL_LABELS = {
   "path-pen": "Pen",
   "path-select": "Path Selection",
   "direct-select": "Direct Selection",
-  pen: "Freehand",
+  pen: "Pencil",
   line: "Line",
   arrow: "Arrow",
   rect: "Rectangle",
   circle: "Ellipse",
   text: "Text",
-  watermark: "Watermark"
+  watermark: "Watermark",
+  eyedropper: "Eyedropper"
 };
 function imageToolLabel(tool) {
   return PAINT_TOOLS.find((t) => t.id === tool)?.label ?? OTHER_TOOL_LABELS[tool] ?? tool;
@@ -21977,7 +22044,8 @@ var IMAGE_TOOL_SHORTCUTS = {
   type: "T",
   "path-pen": "P",
   "path-select": "A",
-  "direct-select": "Shift+A"
+  "direct-select": "Shift+A",
+  eyedropper: "I"
 };
 function imageToolForShortcut(key2, shift = false) {
   const shortcut = `${shift ? "Shift+" : ""}${key2.toUpperCase()}`;
@@ -21991,6 +22059,7 @@ function imageToolCanvasMode(tool) {
   if (isPaintTool(tool)) return "paint";
   if (tool === "select") return "select";
   if (tool === "crop") return "crop";
+  if (tool === "eyedropper") return "sample";
   return "annotate";
 }
 function imageToolPanel(tool) {
@@ -22002,12 +22071,37 @@ function imageToolPanel(tool) {
   if (tool === "shape" || tool === "type") return tool;
   return null;
 }
+function imageToolPanelIds(tool) {
+  const own = imageToolPanel(tool);
+  if (!own) return [];
+  return own === "selection" ? [own, "channels"] : [own];
+}
 function imagePanelTool(panel) {
   for (const group of IMAGE_TOOL_GROUPS) {
-    for (const tool of group.tools) if (imageToolPanel(tool) === panel) return tool;
+    for (const tool of group.tools) if (imageToolPanelIds(tool).includes(panel)) return tool;
   }
   return null;
 }
+var TOOL_ONLY_PANELS = /* @__PURE__ */ new Set(["paint", "selection", "canvas-size", "channels", "paths"]);
+var TOOL_PANEL_TITLES = {
+  paint: "Brush Options",
+  selection: "Selection",
+  "canvas-size": "Composition Size",
+  channels: "Channels",
+  paths: "Paths",
+  shape: "Shape Options",
+  type: "Typography"
+};
+function imageToolPanels(tool, layer, options = {}) {
+  const own = imageToolPanelIds(tool);
+  const listed = layerPanels(layer, options);
+  const first = own.map((id) => listed.find((p) => p.id === id) ?? { id, title: TOOL_PANEL_TITLES[id] ?? id });
+  const rest = listed.filter((p) => !own.includes(p.id) && !TOOL_ONLY_PANELS.has(p.id));
+  return [...first, ...rest];
+}
+function imageToolUsesColor(tool) {
+  return tool === "brush" || tool === "mixer" || tool === "pen" || tool === "line" || tool === "arrow" || tool === "rect" || tool === "circle" || tool === "shape" || tool === "type" || tool === "eyedropper";
+}
 
 // src/image-editor/editorDocument.ts
 function createImageEditorDocument(controller, options = {}) {
@@ -22905,6 +22999,7 @@ export {
   LayerEffectError,
   LayerOperationError,
   MARCHING_ANTS_STEP_MS,
+  MARGIN_FIT_MIN_GUTTER,
   MASK_EDGE_THRESHOLDS,
   MASK_FILE_ACCEPT,
   MAX_BATCH,
@@ -23406,6 +23501,10 @@ export {
   imageToolGroup,
   imageToolLabel,
   imageToolPanel,
+  imageToolPanelIds,
+  imageToolPanels,
+  imageToolUsesColor,
+  imageToolVariants,
   importPsd,
   inflate,
   inflateRaw,

package/dist/image-editor/tool-groups.d.cts

@@ -1,20 +1,49 @@
 /**
- * The image editor's tools as a toolbar shows them: grouped like Photoshop's (a slot per group, the
- * rest of the group in a flyout), with labels and shortcuts, the canvas mode each tool draws in and
- * the layer panel (`layerPanels`) holding its options. Hosts build their toolbar from these instead
- * of listing tools themselves, so new tools show up without host changes.
+ * The image editor's tools as a toolbar shows them: grouped by what each tool is for (a slot per
+ * group, the rest of the group in a flyout or the host's tool options), with labels and shortcuts,
+ * the canvas mode each tool draws in and the layer panel (`layerPanels`) holding its options. Hosts
+ * build their toolbar from these instead of listing tools themselves, so new tools show up without
+ * host changes.
  */
 import type { ImageEditorTool } from './types.cjs';
+import { type SelectionToolKind } from './selection/tool-options.cjs';
+import { type ImageLayer, type LiveShapeKind } from './layers/model.cjs';
+import { type LayerPanelDescriptor, type LayerPanelsOptions } from './layers/panel.cjs';
+/** Tools of a group shown together under a heading (Retouch's Fix, Tone and Detail). */
+export interface ImageToolSection {
+    label: string;
+    tools: readonly ImageEditorTool[];
+}
 export interface ImageToolGroup {
     id: string;
     label: string;
     tools: readonly ImageEditorTool[];
+    /** The group's tools split by purpose, in `tools` order; absent when the group is one set. */
+    sections?: readonly ImageToolSection[];
 }
 /**
- * Every tool a toolbar offers, in toolbar order. The `text` and `watermark` annotations are left
- * out: they are added through the API (`addAnnotation`), not drawn.
+ * Every tool a toolbar offers, in toolbar order, grouped by intent: choose (Move, Select, Crop),
+ * put paint down (Draw), take it away (Erase), retouch (Fix, Tone, Detail), build shapes, paths and
+ * type, and pick colours (Eyedropper). The `text` and `watermark` annotations are left out: they
+ * are added through the API (`addAnnotation`), not drawn. So are the `line`, `arrow`, `rect` and
+ * `circle` annotations, which the Shape tool's live shapes cover (they still draw for API callers).
  */
 export declare const IMAGE_TOOL_GROUPS: readonly ImageToolGroup[];
+/**
+ * One way of using a tool that a toolbar offers as a tool of its own: a selection tool (`select`
+ * with `SelectionToolOptions.tool`) or a shape kind (`shape` with `ShapeToolOptions.kind`).
+ */
+export type ImageToolVariant = {
+    tool: 'select';
+    id: SelectionToolKind;
+    label: string;
+} | {
+    tool: 'shape';
+    id: LiveShapeKind;
+    label: string;
+};
+/** The variants a tool offers (the selection tools, the shape kinds), or none. */
+export declare function imageToolVariants(tool: ImageEditorTool): readonly ImageToolVariant[];
 /** The group a tool is in (the first group for a tool no group holds). */
 export declare function imageToolGroup(tool: ImageEditorTool): ImageToolGroup;
 export declare function imageToolLabel(tool: ImageEditorTool): string;
@@ -23,13 +52,32 @@ export declare const IMAGE_TOOL_SHORTCUTS: Partial<Record<ImageEditorTool, strin
 /** The tool a shortcut picks (the first tool listed for a shared key), or null. */
 export declare function imageToolForShortcut(key: string, shift?: boolean): ImageEditorTool | null;
 /** How a canvas handles pointer gestures for a tool (the Svelte and React canvases' `mode`). */
-export type ImageToolCanvasMode = 'transform' | 'crop' | 'select' | 'paint' | 'annotate';
+export type ImageToolCanvasMode = 'transform' | 'crop' | 'select' | 'paint' | 'annotate' | 'sample';
 /**
  * The canvas mode a tool works in. Move picks and transforms layers; shapes, type, the path tools
- * and the annotations draw in `annotate`.
+ * and the annotations draw in `annotate`; the Eyedropper picks colours in `sample`.
  */
 export declare function imageToolCanvasMode(tool: ImageEditorTool): ImageToolCanvasMode;
 /** The `layerPanels` panel holding a tool's options, or null when it has none. */
 export declare function imageToolPanel(tool: ImageEditorTool): string | null;
-/** The first tool whose options are in a panel (in toolbar order), or null. */
+/**
+ * The panels that work with a tool: the one holding its options (`imageToolPanel`) and, for the
+ * selection tools, Channels (where a selection is saved and loaded).
+ */
+export declare function imageToolPanelIds(tool: ImageEditorTool): string[];
+/** The first tool whose panels include `panel` (in toolbar order), or null. */
 export declare function imagePanelTool(panel: string): ImageEditorTool | null;
+/**
+ * The panels a sidebar shows for the active tool and layer: the tool's own panels first
+ * (`imageToolPanelIds`: Brush Options only with a paint tool, Selection and Channels with Select,
+ * Composition Size with Crop, Paths with the path tools, Shape Options or Typography with Shape or
+ * Type), then the active layer's (`layerPanels`: its properties, effects, colour adjustments, mask,
+ * and its shape or type options when it is a shape or type layer). Move shows the layer's panels only.
+ */
+export declare function imageToolPanels(tool: ImageEditorTool, layer: ImageLayer | null, options?: LayerPanelsOptions): LayerPanelDescriptor[];
+/**
+ * Tools that put down a colour the host chooses: the brush and mixer (the paint foreground), the
+ * pencil and annotations, shapes and type (their fill or colour), and the Eyedropper that picks it.
+ * Hosts show their colour picker or palette for these.
+ */
+export declare function imageToolUsesColor(tool: ImageEditorTool): boolean;

package/dist/image-editor/tool-groups.d.ts

@@ -1,20 +1,49 @@
 /**
- * The image editor's tools as a toolbar shows them: grouped like Photoshop's (a slot per group, the
- * rest of the group in a flyout), with labels and shortcuts, the canvas mode each tool draws in and
- * the layer panel (`layerPanels`) holding its options. Hosts build their toolbar from these instead
- * of listing tools themselves, so new tools show up without host changes.
+ * The image editor's tools as a toolbar shows them: grouped by what each tool is for (a slot per
+ * group, the rest of the group in a flyout or the host's tool options), with labels and shortcuts,
+ * the canvas mode each tool draws in and the layer panel (`layerPanels`) holding its options. Hosts
+ * build their toolbar from these instead of listing tools themselves, so new tools show up without
+ * host changes.
  */
 import type { ImageEditorTool } from './types.js';
+import { type SelectionToolKind } from './selection/tool-options.js';
+import { type ImageLayer, type LiveShapeKind } from './layers/model.js';
+import { type LayerPanelDescriptor, type LayerPanelsOptions } from './layers/panel.js';
+/** Tools of a group shown together under a heading (Retouch's Fix, Tone and Detail). */
+export interface ImageToolSection {
+    label: string;
+    tools: readonly ImageEditorTool[];
+}
 export interface ImageToolGroup {
     id: string;
     label: string;
     tools: readonly ImageEditorTool[];
+    /** The group's tools split by purpose, in `tools` order; absent when the group is one set. */
+    sections?: readonly ImageToolSection[];
 }
 /**
- * Every tool a toolbar offers, in toolbar order. The `text` and `watermark` annotations are left
- * out: they are added through the API (`addAnnotation`), not drawn.
+ * Every tool a toolbar offers, in toolbar order, grouped by intent: choose (Move, Select, Crop),
+ * put paint down (Draw), take it away (Erase), retouch (Fix, Tone, Detail), build shapes, paths and
+ * type, and pick colours (Eyedropper). The `text` and `watermark` annotations are left out: they
+ * are added through the API (`addAnnotation`), not drawn. So are the `line`, `arrow`, `rect` and
+ * `circle` annotations, which the Shape tool's live shapes cover (they still draw for API callers).
  */
 export declare const IMAGE_TOOL_GROUPS: readonly ImageToolGroup[];
+/**
+ * One way of using a tool that a toolbar offers as a tool of its own: a selection tool (`select`
+ * with `SelectionToolOptions.tool`) or a shape kind (`shape` with `ShapeToolOptions.kind`).
+ */
+export type ImageToolVariant = {
+    tool: 'select';
+    id: SelectionToolKind;
+    label: string;
+} | {
+    tool: 'shape';
+    id: LiveShapeKind;
+    label: string;
+};
+/** The variants a tool offers (the selection tools, the shape kinds), or none. */
+export declare function imageToolVariants(tool: ImageEditorTool): readonly ImageToolVariant[];
 /** The group a tool is in (the first group for a tool no group holds). */
 export declare function imageToolGroup(tool: ImageEditorTool): ImageToolGroup;
 export declare function imageToolLabel(tool: ImageEditorTool): string;
@@ -23,13 +52,32 @@ export declare const IMAGE_TOOL_SHORTCUTS: Partial<Record<ImageEditorTool, strin
 /** The tool a shortcut picks (the first tool listed for a shared key), or null. */
 export declare function imageToolForShortcut(key: string, shift?: boolean): ImageEditorTool | null;
 /** How a canvas handles pointer gestures for a tool (the Svelte and React canvases' `mode`). */
-export type ImageToolCanvasMode = 'transform' | 'crop' | 'select' | 'paint' | 'annotate';
+export type ImageToolCanvasMode = 'transform' | 'crop' | 'select' | 'paint' | 'annotate' | 'sample';
 /**
  * The canvas mode a tool works in. Move picks and transforms layers; shapes, type, the path tools
- * and the annotations draw in `annotate`.
+ * and the annotations draw in `annotate`; the Eyedropper picks colours in `sample`.
  */
 export declare function imageToolCanvasMode(tool: ImageEditorTool): ImageToolCanvasMode;
 /** The `layerPanels` panel holding a tool's options, or null when it has none. */
 export declare function imageToolPanel(tool: ImageEditorTool): string | null;
-/** The first tool whose options are in a panel (in toolbar order), or null. */
+/**
+ * The panels that work with a tool: the one holding its options (`imageToolPanel`) and, for the
+ * selection tools, Channels (where a selection is saved and loaded).
+ */
+export declare function imageToolPanelIds(tool: ImageEditorTool): string[];
+/** The first tool whose panels include `panel` (in toolbar order), or null. */
 export declare function imagePanelTool(panel: string): ImageEditorTool | null;
+/**
+ * The panels a sidebar shows for the active tool and layer: the tool's own panels first
+ * (`imageToolPanelIds`: Brush Options only with a paint tool, Selection and Channels with Select,
+ * Composition Size with Crop, Paths with the path tools, Shape Options or Typography with Shape or
+ * Type), then the active layer's (`layerPanels`: its properties, effects, colour adjustments, mask,
+ * and its shape or type options when it is a shape or type layer). Move shows the layer's panels only.
+ */
+export declare function imageToolPanels(tool: ImageEditorTool, layer: ImageLayer | null, options?: LayerPanelsOptions): LayerPanelDescriptor[];
+/**
+ * Tools that put down a colour the host chooses: the brush and mixer (the paint foreground), the
+ * pencil and annotations, shapes and type (their fill or colour), and the Eyedropper that picks it.
+ * Hosts show their colour picker or palette for these.
+ */
+export declare function imageToolUsesColor(tool: ImageEditorTool): boolean;

package/dist/image-editor/types.d.cts

@@ -282,7 +282,9 @@ export type ImageEditorTool = 'select' | 'crop' | 'pen' | 'rect' | 'circle' | 'a
 /** Live type layers, edited on the canvas (see `TypeToolGesture`). */
  | 'type'
 /** The path tools (see `PathEditGesture`): Path Selection, Direct Selection and the Pen for paths. */
- | 'path-select' | 'direct-select' | 'path-pen';
+ | 'path-select' | 'direct-select' | 'path-pen'
+/** The Eyedropper: clicking the canvas picks the composite's colour as the paint foreground. */
+ | 'eyedropper';
 export type ImageEditorFit = 'contain' | 'margin';
 import type { DocumentColorMode, DocumentColorProfile, ProofSetup } from './color-management.cjs';
 import type { SelectionRecipeStep } from './selection/recipe.cjs';

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

@@ -282,7 +282,9 @@ export type ImageEditorTool = 'select' | 'crop' | 'pen' | 'rect' | 'circle' | 'a
 /** Live type layers, edited on the canvas (see `TypeToolGesture`). */
  | 'type'
 /** The path tools (see `PathEditGesture`): Path Selection, Direct Selection and the Pen for paths. */
- | 'path-select' | 'direct-select' | 'path-pen';
+ | 'path-select' | 'direct-select' | 'path-pen'
+/** The Eyedropper: clicking the canvas picks the composite's colour as the paint foreground. */
+ | 'eyedropper';
 export type ImageEditorFit = 'contain' | 'margin';
 import type { DocumentColorMode, DocumentColorProfile, ProofSetup } from './color-management.js';
 import type { SelectionRecipeStep } from './selection/recipe.js';

package/dist/paint-editor/index.cjs

@@ -7,7 +7,7 @@ var _chunkIGPEBXUDcjs = require('../chunk-IGPEBXUD.cjs');
 
 
 
-var _chunk2XGW6DKLcjs = require('../chunk-2XGW6DKL.cjs');
+var _chunk5VQXSS2Scjs = require('../chunk-5VQXSS2S.cjs');
 require('../chunk-A2IS7EHE.cjs');
 require('../chunk-SS53NNZO.cjs');
 
@@ -1673,11 +1673,11 @@ function header(state, options) {
   return out;
 }
 function serializePaintDocument(state, options = {}) {
-  const { layers, assets } = _chunk2XGW6DKLcjs.serializeLayers.call(void 0, state.layers);
+  const { layers, assets } = _chunk5VQXSS2Scjs.serializeLayers.call(void 0, state.layers);
   return { ...header(state, options), layers, assets };
 }
 async function serializePaintDocumentExternal(state, store, options = {}) {
-  const { layers, assets } = await _chunk2XGW6DKLcjs.serializeLayersExternal.call(void 0, state.layers, store);
+  const { layers, assets } = await _chunk5VQXSS2Scjs.serializeLayersExternal.call(void 0, state.layers, store);
   return { ...header(state, options), layers, assets };
 }
 function paintLayersOnly(layers, problems) {
@@ -1714,7 +1714,7 @@ function deserializePaintDocument(raw) {
   const canvas = normalizeCanvas({ width: r.width, height: r.height, dpi: _nullishCoalesce(r.dpi, () => ( void 0)) });
   const paper = _chunkGNZI3KYKcjs.normalizePaper.call(void 0, _nullishCoalesce(r.paper, () => ( {})));
   const assets = r.assets && typeof r.assets === "object" ? r.assets : {};
-  const layers = paintLayersOnly(_chunk2XGW6DKLcjs.deserializeLayers.call(void 0, r.layers, { assets, problems }), problems);
+  const layers = paintLayersOnly(_chunk5VQXSS2Scjs.deserializeLayers.call(void 0, r.layers, { assets, problems }), problems);
   const wanted = typeof r.activeLayerId === "string" ? r.activeLayerId : null;
   const activeLayerId = wanted && _chunkHB4ICNNAcjs.findLayer.call(void 0, layers, wanted) ? wanted : _nullishCoalesce(_optionalChain([_chunkHB4ICNNAcjs.flattenLayers.call(void 0, layers), 'access', _74 => _74.filter, 'call', _75 => _75((l) => l.type === "pixel"), 'access', _76 => _76.pop, 'call', _77 => _77(), 'optionalAccess', _78 => _78.id]), () => ( null));
   const wetEvents = Array.isArray(r.wetEvents) ? r.wetEvents.filter((e) => e && typeof e === "object" && Number.isInteger(e.clock) && typeof e.kind === "string") : [];
@@ -1730,7 +1730,7 @@ async function deserializePaintDocumentAsync(raw, store) {
   if (!raw || typeof raw !== "object") throw new Error("Not a paint document: expected a JSON object.");
   const r = raw;
   const problems = [];
-  const assets = await _chunk2XGW6DKLcjs.resolveExternalAssets.call(void 0, _nullishCoalesce(r.assets, () => ( {})), store, problems);
+  const assets = await _chunk5VQXSS2Scjs.resolveExternalAssets.call(void 0, _nullishCoalesce(r.assets, () => ( {})), store, problems);
   const loaded = deserializePaintDocument({ ...r, assets });
   return { ...loaded, problems: [...problems, ...loaded.problems] };
 }
@@ -5649,7 +5649,7 @@ var PaintEditorController = (_class10 = class _PaintEditorController {
       return next.type === "group" ? { ...next, children: toStandard(next.children) } : next;
     });
     const layers = toStandard(dried);
-    const result = _chunk2XGW6DKLcjs.exportPsd.call(void 0, { width, height, layers: [paperLayer, ...layers], merged, resolution: dpi });
+    const result = _chunk5VQXSS2Scjs.exportPsd.call(void 0, { width, height, layers: [paperLayer, ...layers], merged, resolution: dpi });
     for (const [mode, names] of changed) {
       const label = _nullishCoalesce(_optionalChain([_chunkOLNIPTB3cjs.BLEND_MODES, 'access', _289 => _289.find, 'call', _290 => _290((m) => m.id === mode), 'optionalAccess', _291 => _291.label]), () => ( mode));
       const std = _nullishCoalesce(_optionalChain([_chunkOLNIPTB3cjs.BLEND_MODES, 'access', _292 => _292.find, 'call', _293 => _293((m) => m.id === _chunkOLNIPTB3cjs.standardBlendMode.call(void 0, mode)), 'optionalAccess', _294 => _294.label]), () => ( _chunkOLNIPTB3cjs.standardBlendMode.call(void 0, mode)));

package/dist/paint-editor/index.js

@@ -7,7 +7,7 @@ import {
   resolveExternalAssets,
   serializeLayers,
   serializeLayersExternal
-} from "../chunk-SWKXPAJC.js";
+} from "../chunk-JVNGCS26.js";
 import "../chunk-3CI7FRMK.js";
 import "../chunk-ZNA3IQZF.js";
 import {

package/package.json

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

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

@@ -311,6 +311,7 @@ in the source frame at the document's bit depth, colour mode and profile. Read
 | `set_global_light` | Set the document light (`angle`, `altitude` in degrees) that every shadow and bevel with `useGlobalLight` follows. Returns the light. |
 | `paint_stroke` | Paint (`tool` brush), blend with the Mixer Brush (`tool` mixer) or erase (`tool` eraser) along `points` in document px (optional `pressure` 0..1) on a pixel layer or its mask (`channel`; the mixer paints pixels only); `color` #rrggbb (on a mask: black hides, white reveals; for the mixer, the reservoir colour) or `paint` (brush only: a gradient for this stroke); `brush` `{size, hardness, spacing, angle, roundness, opacity, flow, smoothing, pressureSize, pressureOpacity, blend}`; `mixer` `{wet, load, mix, loadEachStroke, cleanEachStroke, mixing: rgb \| pigment}` (tool mixer only). The selection limits the paint. One undo step per call. Returns the layer, channel, changed `bounds`, dab count and, for the mixer, `mixerLoad` `{reservoir, amount, pickup}`. |
 | `set_paint` | Set what the brush paints: one colour (it becomes the foreground) or gradient paint (`stops` sorted by offset, `space` pigment / oklab / srgb, `map`, `softness`). Errors say what is wrong. Returns `paint`, `foreground`, `background`, `brush`. |
+| `sample_color` | The Eyedropper: read the composite colour at a document point (`size` averages a square; default 1 px) and, unless `setForeground` is false, make it the paint foreground. Use it to match a colour already in the image before painting or retouching. Fails outside the canvas or on transparent pixels. Returns `color` and `foreground`. |
 | `get_paint` | Read-only. What the brush paints (`paint`), the foreground and background colours and the brush settings. |
 | `get_mixer_brush` | Read-only. The Mixer Brush settings and what it carries (`reservoir` #rrggbb or null, `amount` left 0..1, `pickup` #rrggbb or null). Call it before a mixer stroke with `loadEachStroke: false`. |
 | `load_mixer_brush` | Fill the Mixer Brush reservoir with `color` (default the foreground), amount 1; keeps the pickup. View state, not an undo step. Use before strokes with `loadEachStroke: false`. Returns the load. |