@pixerate/editor 0.228.2 → 0.230.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";
@@ -743,7 +744,7 @@ import {
   createEffectToolProvider,
   linearToSrgb,
   resolveEffectValues
-} from "../chunk-UGYUGZE2.js";
+} from "../chunk-TCZ2J7PR.js";
 import "../chunk-V2ZCJRDM.js";
 import {
   BrushstrokeCache,
@@ -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

@@ -1,13 +1,13 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class; var _class2; var _class3; var _class4; var _class5; var _class6; var _class7; var _class8; var _class9; var _class10; var _class11; var _class12;
 
-var _chunkIGPEBXUDcjs = require('../chunk-IGPEBXUD.cjs');
+var _chunkA57ZQDNNcjs = require('../chunk-A57ZQDNN.cjs');
 
 
 
 
 
 
-var _chunk2XGW6DKLcjs = require('../chunk-2XGW6DKL.cjs');
+var _chunk5VQXSS2Scjs = require('../chunk-5VQXSS2S.cjs');
 require('../chunk-A2IS7EHE.cjs');
 require('../chunk-SS53NNZO.cjs');
 
@@ -137,7 +137,7 @@ require('../chunk-NM3G4VQT.cjs');
 
 
 
-var _chunk5MQOBTNPcjs = require('../chunk-5MQOBTNP.cjs');
+var _chunkOPSK22DLcjs = require('../chunk-OPSK22DL.cjs');
 require('../chunk-WOFXZ3XU.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] };
 }
@@ -3213,7 +3213,7 @@ function timeLapseVideo(frameCount, width, height, fps, holdMs, name = "Time-lap
   }
   const video = { version: 1, name, width: w, height: h, fps, background: "#000000", assets, tracks: [{ id: "v1", kind: "video", clips }] };
   const durationMs = frameCount ? clips[clips.length - 1].start + clips[clips.length - 1].duration : 0;
-  return { video, ffmpeg: _chunkIGPEBXUDcjs.toVideoFfmpeg.call(void 0, video, { output: "timelapse.mp4" }), durationMs };
+  return { video, ffmpeg: _chunkA57ZQDNNcjs.toVideoFfmpeg.call(void 0, video, { output: "timelapse.mp4" }), durationMs };
 }
 async function buildTimeLapse(source, target, options = {}) {
   const maxSide = Math.max(32, Math.min(4096, Math.round(_nullishCoalesce(options.maxSide, () => ( 720)))));
@@ -3296,7 +3296,7 @@ function checkPaintEffectPlace(d, place) {
   else if (d.uses.includes("filter") && place !== "light") instead = "; run it on a layer's dried paint with apply_effect instead";
   else if (place === "light" && d.uses.some((u) => PAINT_EFFECT_PLACES.layer.includes(u))) instead = "; add it as an effect layer (add_effect_layer) or fill a layer with it (fill_layer_with_effect) instead";
   else if (place === "paper" && d.uses.some((u) => u === "overlay" || u === "title")) instead = "; add it as an effect layer with add_effect_layer instead";
-  throw new (0, _chunk5MQOBTNPcjs.EffectUnsupportedError)(`"${d.id}" (${d.name}) is a ${d.uses.join(" / ") || d.kind} effect, and ${PLACE_WORDS[place]}${instead}.`, d.id);
+  throw new (0, _chunkOPSK22DLcjs.EffectUnsupportedError)(`"${d.id}" (${d.name}) is a ${d.uses.join(" / ") || d.kind} effect, and ${PLACE_WORDS[place]}${instead}.`, d.id);
 }
 var PAPER_EFFECT_BLENDS = ["multiply", "normal", "overlay", "soft-light", "screen", "color"];
 var paperVersion = 1;
@@ -3479,7 +3479,7 @@ var PaintEditorController = (_class10 = class _PaintEditorController {
   /** Set while an operation that changes wet paint runs: the simulation before it (for undo). */
   __init106() {this.wetOp = null}
   /** The effects provider slot (see `setEffectsProvider`). */
-  __init107() {this.effects = new (0, _chunk5MQOBTNPcjs.EffectsSlot)()}
+  __init107() {this.effects = new (0, _chunkOPSK22DLcjs.EffectsSlot)()}
   __init108() {this.effectsRenderer = new PaintEffectsRenderer()}
   __init109() {this.paperEffectNodeCache = null}
   constructor(options = {}) {;_class10.prototype.__init72.call(this);_class10.prototype.__init73.call(this);_class10.prototype.__init74.call(this);_class10.prototype.__init75.call(this);_class10.prototype.__init76.call(this);_class10.prototype.__init77.call(this);_class10.prototype.__init78.call(this);_class10.prototype.__init79.call(this);_class10.prototype.__init80.call(this);_class10.prototype.__init81.call(this);_class10.prototype.__init82.call(this);_class10.prototype.__init83.call(this);_class10.prototype.__init84.call(this);_class10.prototype.__init85.call(this);_class10.prototype.__init86.call(this);_class10.prototype.__init87.call(this);_class10.prototype.__init88.call(this);_class10.prototype.__init89.call(this);_class10.prototype.__init90.call(this);_class10.prototype.__init91.call(this);_class10.prototype.__init92.call(this);_class10.prototype.__init93.call(this);_class10.prototype.__init94.call(this);_class10.prototype.__init95.call(this);_class10.prototype.__init96.call(this);_class10.prototype.__init97.call(this);_class10.prototype.__init98.call(this);_class10.prototype.__init99.call(this);_class10.prototype.__init100.call(this);_class10.prototype.__init101.call(this);_class10.prototype.__init102.call(this);_class10.prototype.__init103.call(this);_class10.prototype.__init104.call(this);_class10.prototype.__init105.call(this);_class10.prototype.__init106.call(this);_class10.prototype.__init107.call(this);_class10.prototype.__init108.call(this);_class10.prototype.__init109.call(this);_class10.prototype.__init110.call(this);_class10.prototype.__init111.call(this);_class10.prototype.__init112.call(this);_class10.prototype.__init113.call(this);
@@ -4154,7 +4154,7 @@ var PaintEditorController = (_class10 = class _PaintEditorController {
       if (v === null) merged[k] = d.defaults[k];
       else given[k] = v;
     }
-    return { ...merged, ..._chunk5MQOBTNPcjs.resolveEffectValues.call(void 0, { ...d, defaults: merged }, given) };
+    return { ...merged, ..._chunkOPSK22DLcjs.resolveEffectValues.call(void 0, { ...d, defaults: merged }, given) };
   }
   /** Renders a generator, overlay or title effect at the canvas size. */
   renderEffectCanvas(d, values, time = 0) {
@@ -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)));
@@ -8917,7 +8917,7 @@ function createPaintEffectsToolProvider(controller, options = {}) {
     if (changes.enabled !== void 0) throw new Error("enabled does not apply here: hide an effect layer with update_layer visible false, or remove the effect paper.");
   };
   const values = (v) => v;
-  return withPaintPlayback(_chunk5MQOBTNPcjs.createEffectToolProvider.call(void 0, {
+  return withPaintPlayback(_chunkOPSK22DLcjs.createEffectToolProvider.call(void 0, {
     id: _nullishCoalesce(options.id, () => ( "paint-effects")),
     namespace: options.namespace,
     title: "Paint effects",

package/dist/paint-editor/index.js

@@ -1,13 +1,13 @@
 import {
   toVideoFfmpeg
-} from "../chunk-LPTFDCJO.js";
+} from "../chunk-ONNNNGNS.js";
 import {
   deserializeLayers,
   exportPsd,
   resolveExternalAssets,
   serializeLayers,
   serializeLayersExternal
-} from "../chunk-SWKXPAJC.js";
+} from "../chunk-JVNGCS26.js";
 import "../chunk-3CI7FRMK.js";
 import "../chunk-ZNA3IQZF.js";
 import {
@@ -137,7 +137,7 @@ import {
   EffectsSlot,
   createEffectToolProvider,
   resolveEffectValues
-} from "../chunk-UGYUGZE2.js";
+} from "../chunk-TCZ2J7PR.js";
 import "../chunk-V2ZCJRDM.js";
 import {
   CoverageMap,

package/dist/vector/index.cjs

@@ -558,7 +558,7 @@ var _chunkNM3G4VQTcjs = require('../chunk-NM3G4VQT.cjs');
 
 
 
-var _chunk5MQOBTNPcjs = require('../chunk-5MQOBTNP.cjs');
+var _chunkOPSK22DLcjs = require('../chunk-OPSK22DL.cjs');
 require('../chunk-WOFXZ3XU.cjs');
 
 
@@ -7328,7 +7328,7 @@ var VectorEditorController = (_class7 = class _VectorEditorController {
   }
   // --- Provider effects ---
   /** The effects provider slot (see `setEffectsProvider`). */
-  __init59() {this.effects = new (0, _chunk5MQOBTNPcjs.EffectsSlot)()}
+  __init59() {this.effects = new (0, _chunkOPSK22DLcjs.EffectsSlot)()}
   /** The registered effects provider, or `null`. */
   get effectsProvider() {
     return this.effects.provider;
@@ -7352,10 +7352,10 @@ var VectorEditorController = (_class7 = class _VectorEditorController {
   /** The effect's picture as group children, scaled into `box` (an affine fit). */
   async vectorEffectPicture(effect, values) {
     const provider = this.effects.require();
-    if (!provider.applyVectorEffect) throw new (0, _chunk5MQOBTNPcjs.EffectUnsupportedError)(`${provider.name} has no vector effects.`);
+    if (!provider.applyVectorEffect) throw new (0, _chunkOPSK22DLcjs.EffectUnsupportedError)(`${provider.name} has no vector effects.`);
     const d = await provider.describe(effect);
-    if (d.kind !== "vector") throw new (0, _chunk5MQOBTNPcjs.EffectUnsupportedError)(`"${d.id}" (${d.name}) is a ${d.kind} effect; the vector editor adds vector effects, which bring their own picture${d.kind === "motion" ? " (apply motion in the animation editor)" : ""}.`, d.id);
-    const resolved = _chunk5MQOBTNPcjs.resolveEffectValues.call(void 0, d, values);
+    if (d.kind !== "vector") throw new (0, _chunkOPSK22DLcjs.EffectUnsupportedError)(`"${d.id}" (${d.name}) is a ${d.kind} effect; the vector editor adds vector effects, which bring their own picture${d.kind === "motion" ? " (apply motion in the animation editor)" : ""}.`, d.id);
+    const resolved = _chunkOPSK22DLcjs.resolveEffectValues.call(void 0, d, values);
     const motion = await provider.applyVectorEffect(d.id, this.toSvg(), resolved);
     const parsed = _chunkBQE3Y6ZOcjs.parseVectorSvg.call(void 0, motion.svg);
     if (!parsed.nodes.length) throw new Error(`"${d.name}" drew no shapes the editor can read.`);
@@ -18172,7 +18172,7 @@ function createVectorEffectsToolProvider(controller, options = {}) {
     const effects = _optionalChain([g, 'optionalAccess', _765 => _765.providerEffect]) ? [info(g)] : [];
     return { target: id, effect: _nullishCoalesce(removed, () => ( effects[0])), effects };
   };
-  return _chunk5MQOBTNPcjs.createEffectToolProvider.call(void 0, {
+  return _chunkOPSK22DLcjs.createEffectToolProvider.call(void 0, {
     id: _nullishCoalesce(options.id, () => ( "vector-effects")),
     namespace: options.namespace,
     title: "Vector effects",