@pixerate/editor 0.191.0 → 0.192.0

package/dist/image-editor/index.js

@@ -9346,6 +9346,62 @@ var ImageEditorController = class {
    * text wrapped in `box`. Refused without a text shaper. Returns its id.
    */
   addTextLayer(init) {
+    const layer = this.layoutTypeLayer(init);
+    if (init.opacity !== void 0 && !(Number.isFinite(init.opacity) && init.opacity >= 0 && init.opacity <= 1)) throw new LayerOperationError("opacity must be between 0 and 1.");
+    if (init.blend !== void 0 && !isBlendMode(init.blend)) throw new LayerOperationError(`Unknown blend mode "${String(init.blend)}".`);
+    if (init.opacity !== void 0) layer.opacity = init.opacity;
+    if (init.blend !== void 0) layer.blend = init.blend;
+    const next = placeLayer(this.state.layers, layer, this.newLayerPlacement(init));
+    this.commitLayers(next, () => {
+      this.state.activeLayerId = layer.id;
+      this.state.activeTarget = "pixels";
+    });
+    return layer.id;
+  }
+  /**
+   * Type Mask (horizontal or vertical): a selection in the shape of `text`, laid out and drawn as
+   * `addTextLayer` would place it (font, size, tracking, box, rotation), combined with the current
+   * selection by `mode`. Vertical type stacks the characters top to bottom, centred on `x`. No
+   * layer is added. One undo step. Returns whether anything is selected.
+   */
+  selectTextShape(init) {
+    const vertical = init.orientation === "vertical";
+    if (init.orientation !== void 0 && init.orientation !== "horizontal" && !vertical) throw new LayerOperationError("orientation must be horizontal or vertical.");
+    if (init.feather !== void 0 && !(init.feather >= 0 && init.feather <= 1e3)) throw new LayerOperationError("feather must be from 0 to 1000 px.");
+    let text = normalizeText(init.text);
+    if (!text.trim()) throw new LayerOperationError("The text is empty, so there is nothing to select; give some characters.");
+    let paragraph = init.paragraph;
+    if (vertical) {
+      if (/\n/.test(text)) throw new LayerOperationError("Vertical type masks take one column; select each column separately (mode add) instead of line breaks.");
+      if (init.box) throw new LayerOperationError("Vertical type masks are point text; leave out box.");
+      text = Array.from(text).join("\n");
+      paragraph = { align: "center", ...paragraph ?? {} };
+    }
+    const layer = this.layoutTypeLayer({ ...init, text, paragraph });
+    const { width, height } = this.naturalSize;
+    const b = contentBounds(layer.surface);
+    const x0 = Math.max(0, b?.x ?? 0);
+    const y0 = Math.max(0, b?.y ?? 0);
+    const x1 = Math.min(width, b ? b.x + b.width : 0);
+    const y1 = Math.min(height, b ? b.y + b.height : 0);
+    let mask;
+    if (!b || x1 <= x0 || y1 <= y0) mask = createSelectionMask(width, height);
+    else {
+      const rect = { x: x0, y: y0, width: x1 - x0, height: y1 - y0 };
+      const rgba = readRegion(layer.surface, rect);
+      const bytes = new Uint8Array(rect.width * rect.height);
+      const hard = init.antiAlias === false;
+      for (let i = 0; i < bytes.length; i++) {
+        const a = rgba[i * 4 + 3];
+        bytes[i] = hard ? a >= 128 ? 255 : 0 : a;
+      }
+      mask = selectionFromRegion(width, height, rect, bytes);
+    }
+    if ((init.feather ?? 0) > 0 && mask.bounds) mask = modifySelection(mask, "feather", init.feather);
+    return this.setSelection(mask.bounds ? mask : null, init.mode ?? "replace");
+  }
+  /** A type layer laid out and drawn from `init` (not added): the shared part of `addTextLayer` and the type masks. */
+  layoutTypeLayer(init) {
     const text = normalizeText(init.text);
     if (!Number.isFinite(init.x) || !Number.isFinite(init.y)) throw new LayerOperationError("x and y must be numbers (document pixels).");
     const style = patchTextStyle({ ...DEFAULT_TEXT_STYLE, color: this.state.paint.foreground }, init.style ?? {});
@@ -9357,19 +9413,9 @@ var ImageEditorController = class {
       frame = { kind: "box", width, height };
     }
     if (init.rotation !== void 0 && !Number.isFinite(init.rotation)) throw new LayerOperationError("rotation must be a number of degrees.");
-    if (init.opacity !== void 0 && !(Number.isFinite(init.opacity) && init.opacity >= 0 && init.opacity <= 1)) throw new LayerOperationError("opacity must be between 0 and 1.");
-    if (init.blend !== void 0 && !isBlendMode(init.blend)) throw new LayerOperationError(`Unknown blend mode "${String(init.blend)}".`);
     const t = [1, 0, 0, 1, init.x, init.y];
     const transform = init.rotation ? multiplyMatrices(t, rotateMatrix(init.rotation, { x: init.x, y: init.y })) : t;
-    const layer = createTypeLayer({ text, runs: [{ length: text.length, style }], paragraphs: [{ length: text.length, style: paragraph }], frame, transform, name: init.name ?? typeLayerName(text) }, this.textEnv());
-    if (init.opacity !== void 0) layer.opacity = init.opacity;
-    if (init.blend !== void 0) layer.blend = init.blend;
-    const next = placeLayer(this.state.layers, layer, this.newLayerPlacement(init));
-    this.commitLayers(next, () => {
-      this.state.activeLayerId = layer.id;
-      this.state.activeTarget = "pixels";
-    });
-    return layer.id;
+    return createTypeLayer({ text, runs: [{ length: text.length, style }], paragraphs: [{ length: text.length, style: paragraph }], frame, transform, name: init.name ?? typeLayerName(text) }, this.textEnv());
   }
   /**
    * Replaces text [start, end) (default all of it) with `text`; inserted text takes the style at
@@ -11255,7 +11301,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 SELECT = /^(select_region|select_subject|select_by_color|select_all|deselect|invert_selection|select_rect|select_ellipse|select_polygon|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)$/;
+var SELECT = /^(select_region|select_subject|select_by_color|select_all|deselect|invert_selection|select_rect|select_ellipse|select_polygon|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)$/;
 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|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)$/;
 var ADJUST = /^(set_adjustments|add_adjustment_layer|update_adjustment_layer|remove_adjustment_layer|move_adjustment_layer)$/;
@@ -11376,7 +11422,9 @@ var SELECTION_TOOLS = [
   { id: "column", label: "Single Column" },
   { id: "lasso", label: "Lasso" },
   { id: "polygon", label: "Polygonal Lasso" },
-  { id: "range", label: "Color Range" }
+  { id: "range", label: "Color Range" },
+  { id: "type", label: "Type Mask" },
+  { id: "type-vertical", label: "Vertical Type Mask" }
 ];
 var COLOR_RANGE_PRESET_LABELS = {
   reds: "Reds",
@@ -11407,7 +11455,10 @@ var DEFAULT_SELECTION_TOOL_OPTIONS = {
   feather: 0,
   fuzziness: 40,
   localized: 0,
-  rangeInvert: false
+  rangeInvert: false,
+  typeText: "Type",
+  typeSize: 72,
+  typeFamily: "sans-serif"
 };
 function selectionModeFromModifiers(modifiers, fallback) {
   if (modifiers.shiftKey && modifiers.altKey) return "intersect";
@@ -13789,6 +13840,24 @@ var SelectionGesture = class {
       }
       return;
     }
+    if (options.tool === "type" || options.tool === "type-vertical") {
+      this.start = null;
+      try {
+        this.controller.selectTextShape({
+          text: options.typeText || "Type",
+          x: point.x,
+          y: point.y,
+          orientation: options.tool === "type-vertical" ? "vertical" : "horizontal",
+          style: { fontSize: options.typeSize ?? 72, fontFamily: options.typeFamily || "sans-serif" },
+          mode: selectionModeFromModifiers(modifiers, options.mode),
+          feather: options.feather ?? 0,
+          antiAlias: options.antiAlias
+        });
+      } catch (err) {
+        this.error = err instanceof Error ? err.message : String(err);
+      }
+      return;
+    }
     if (options.tool === "wand" || options.tool === "range") {
       this.start = null;
       const common = {
@@ -16333,7 +16402,43 @@ function createImageTypeTools(controller) {
       return { layer: layerSummary(id), shape: controller.getShapeLayer(id), warnings };
     }
   };
-  return [listFonts, get, add2, setText, setStyle, setParagraph, setFrame, toShape];
+  const typeMask = {
+    name: "select_text_shape",
+    title: "Select the shape of text",
+    description: "Horizontal / Vertical Type Mask: selects the shape of text laid out as add_text_layer would place it (font family, size, weight, tracking, box, rotation; colour is ignored), combined with the current selection by mode. No layer is added. Vertical stacks the characters top to bottom, centred on x (one column; add more with mode add). Use it to cut text out of an image (layer_via_copy), fill letters with a photo (add_layer_mask), or mask an adjustment. Check fonts with list_fonts first. One undo step. Returns the selection.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        text: { type: "string", minLength: 1, description: "The text; \\n starts a new line (horizontal only)." },
+        x: { type: "number", description: "Document x of the origin, pixels (vertical: the column centre)." },
+        y: { type: "number", description: "Document y of the origin (the first baseline), pixels." },
+        orientation: { type: "string", enum: ["horizontal", "vertical"], description: "horizontal (default) or vertical (characters stacked top to bottom)." },
+        box: {
+          type: "object",
+          description: "Horizontal only: wrap in this box, pixels.",
+          properties: { width: { type: "number", minimum: 1, description: "Box width, pixels." }, height: { type: "number", minimum: 1, description: "Box height, pixels." } },
+          required: ["width", "height"],
+          additionalProperties: false
+        },
+        style: { type: "object", description: "Character style (size in px, family, weight, tracking\u2026; colour is ignored).", properties: STYLE, additionalProperties: false },
+        paragraph: { type: "object", description: "Paragraph style (alignment, leading\u2026).", properties: PARAGRAPH, additionalProperties: false },
+        rotation: { type: "number", description: "Degrees clockwise about the origin (default 0)." },
+        mode: { type: "string", enum: ["replace", "add", "subtract", "intersect"], description: "How it combines with the current selection (default replace)." },
+        feather: { type: "number", minimum: 0, maximum: 1e3, description: "Feather radius in px (default 0)." },
+        antiAlias: { type: "boolean", description: "Soft glyph edges (default true)." }
+      },
+      required: ["text", "x", "y"],
+      additionalProperties: false
+    },
+    annotations: { title: "Select the shape of text", ...WRITE9 },
+    handler: (args) => {
+      const init = pick2(args, ["text", "x", "y", "orientation", "box", "style", "paragraph", "rotation", "mode", "feather", "antiAlias"]);
+      controller.selectTextShape(init);
+      const sel = controller.getSelection();
+      return { empty: !sel, bounds: sel?.bounds ?? null, area: Math.round(sel ? selectionArea(sel) : 0) };
+    }
+  };
+  return [listFonts, get, add2, setText, setStyle, setParagraph, setFrame, toShape, typeMask];
 }
 
 // src/image-editor/tools.ts

package/dist/image-editor/selection/tool-options.d.cts

@@ -2,7 +2,7 @@ import { type SelectionMask, type SelectionMode } from './mask.cjs';
 import type { ColorDistance, ColorRangePreset } from './wand.cjs';
 import type { RefineEdgeParams } from './refine.cjs';
 /** Selection tools of the image editor UI. */
-export type SelectionToolKind = 'wand' | 'rect' | 'ellipse' | 'row' | 'column' | 'lasso' | 'polygon' | 'range';
+export type SelectionToolKind = 'wand' | 'rect' | 'ellipse' | 'row' | 'column' | 'lasso' | 'polygon' | 'range' | 'type' | 'type-vertical';
 export declare const SELECTION_TOOLS: readonly {
     id: SelectionToolKind;
     label: string;
@@ -31,6 +31,12 @@ export interface SelectionToolOptions {
     localized?: number;
     /** Color Range: select everything except the sampled colours. */
     rangeInvert?: boolean;
+    /** Type Mask: the text to select (default "Type"). A click places its first baseline. */
+    typeText?: string;
+    /** Type Mask: font size in px (default 72). */
+    typeSize?: number;
+    /** Type Mask: font family (default sans-serif). */
+    typeFamily?: string;
 }
 export declare const DEFAULT_SELECTION_TOOL_OPTIONS: SelectionToolOptions;
 /**

package/dist/image-editor/selection/tool-options.d.ts

@@ -2,7 +2,7 @@ import { type SelectionMask, type SelectionMode } from './mask.js';
 import type { ColorDistance, ColorRangePreset } from './wand.js';
 import type { RefineEdgeParams } from './refine.js';
 /** Selection tools of the image editor UI. */
-export type SelectionToolKind = 'wand' | 'rect' | 'ellipse' | 'row' | 'column' | 'lasso' | 'polygon' | 'range';
+export type SelectionToolKind = 'wand' | 'rect' | 'ellipse' | 'row' | 'column' | 'lasso' | 'polygon' | 'range' | 'type' | 'type-vertical';
 export declare const SELECTION_TOOLS: readonly {
     id: SelectionToolKind;
     label: string;
@@ -31,6 +31,12 @@ export interface SelectionToolOptions {
     localized?: number;
     /** Color Range: select everything except the sampled colours. */
     rangeInvert?: boolean;
+    /** Type Mask: the text to select (default "Type"). A click places its first baseline. */
+    typeText?: string;
+    /** Type Mask: font size in px (default 72). */
+    typeSize?: number;
+    /** Type Mask: font family (default sans-serif). */
+    typeFamily?: string;
 }
 export declare const DEFAULT_SELECTION_TOOL_OPTIONS: SelectionToolOptions;
 /**

package/package.json

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

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

@@ -307,6 +307,7 @@ in the source frame at the document's bit depth, colour mode and profile. Read
 | `set_paragraph_style` | Set `align`, `autoLeading`, indents, `spaceBefore` / `spaceAfter` on every paragraph `start`..`end` touches (default all). Returns the text layer. |
 | `set_text_frame` | `kind: point` (one line per paragraph) or `kind: box` with `width` and `height` (wrapping paragraph text), or resize a box; the first line stays put. Returns the text layer and its lines. |
 | `convert_text_to_shape` | Type › Convert to Shape: glyph outlines become a shape layer with the same id (text no longer editable; fill from the first run's colour; `warnings` lists losses). Needs an outline font shaper. Destructive. |
+| `select_text_shape` | Horizontal / Vertical Type Mask: select the shape of `text` at `x`, `y` (style, box, rotation as `add_text_layer`; `orientation` `vertical` stacks the letters), by `mode`, with `feather`. No layer is added. Returns the selection. |
 | `add_shape_layer` | Add a vector shape layer above the active layer (or placed with `aboveId` / `belowId` / `parentId` / `index`) and make it active: `shape` (live rect, ellipse, polygon, star or line, document px), `subpaths` (SVG path data or anchors) or several `components` with path ops; `fill` (colour, gradient or pattern, default the foreground colour; `null` none), `stroke` (`width`, `paint`, `align`, `cap`, `join`, `miterLimit`, `dashes` in widths), `fillRule`, `name`, `opacity`, `blend`. Returns the `layer` and the `shape`. One undo step. |
 | `update_shape` | Restyle a shape: `fill` (replace, `null` removes), `stroke` (only the settings given change; `null` removes; a new stroke needs `width` and `paint`), `fillRule`. Geometry is unchanged. Returns the shape. |
 | `set_shape_component` | Change component `componentIndex` (from `get_shape_layer`): `shape` fields (without `kind`, or with the same kind, unset fields keep their values), new `subpaths` (ends the live shape), or `op`. Returns the shape. |

package/skills/pixerate-image-editor/references/shapes-and-type.md

@@ -49,6 +49,8 @@ Detail for the `pixerate-image-editor` skill: how to draw and edit vector shapes
    refused: rasterize first. Masks, clipping, blend modes and effects work as on any layer.
 5. **Outlines and pixels**: `convert_text_to_shape` makes glyph outlines a shape layer (needs an
    outline font shaper; the browser canvas cannot); `rasterize_layer` makes it pixels.
+   For a selection in the shape of text (photo-filled letters, text cut out of the image) use
+   `select_text_shape`, the Type Mask: it lays the text out the same way but adds no layer.
 
 ## Photoshop files
 

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

@@ -106,6 +106,7 @@ This skill is the method. `pixerate-image-editor` has the full tool reference.
 | A cutout, shape or text already on its own layer | `select_layer_transparency` (exact, soft where the layer is) |
 | A dead pixel row or column | `select_line`, then fill or heal it |
 | Smooth curves you can describe (a logo, a road, a lens) | `path_to_selection` with Bézier `subpaths` or SVG path data |
+| Letters (photo-filled text, text cut out of the image) | `select_text_shape` (check fonts with `list_fonts`), then `add_layer_mask` or `layer_via_copy` |
 
 ## Recipes
 
@@ -203,6 +204,7 @@ This skill is the method. `pixerate-image-editor` has the full tool reference.
 - `add_vector_mask`, `set_vector_mask_path`, `set_vector_mask_properties`, `get_vector_mask`: sharp, editable path masks
 - `rasterize_vector_mask`, `remove_vector_mask`: turn a vector mask into pixels, or drop it
 - `selection_to_path`, `path_to_selection`: a selection's outline as Bézier paths, and a path back into a selection
+- `select_text_shape`: the Type Mask, a selection in the shape of text
 - `modify_selection`: expand, contract, feather, border, smooth
 - `refine_selection`: snap the edge to the image
 - `transform_selection`: move or scale the outline only