@pixerate/editor 0.111.0 → 0.112.0

package/dist/image-editor/index.js

@@ -369,7 +369,7 @@ import {
   writePsd,
   xyToTempTint,
   xyToUv
-} from "../chunk-HHZ6ZJTW.js";
+} from "../chunk-CZOXTEMN.js";
 import {
   DEFAULT_GLOBAL_LIGHT,
   DIRECT_GAUSSIAN_MAX_SIGMA,
@@ -1065,6 +1065,45 @@ var ImageEditorRenderer = class {
       }
       ctx.restore();
     }
+    if (options.textEdit) {
+      const t = options.textEdit;
+      ctx.save();
+      try {
+        const scr = (p) => projectImagePoint(p, projection);
+        const poly = (pts) => {
+          ctx.beginPath();
+          pts.map(scr).forEach((p, i) => i ? ctx.lineTo(p.x, p.y) : ctx.moveTo(p.x, p.y));
+          ctx.closePath();
+        };
+        if (t.frame) {
+          poly(t.frame);
+          ctx.setLineDash([4, 3]);
+          ctx.lineWidth = 1;
+          ctx.strokeStyle = "rgba(99,102,241,0.9)";
+          ctx.stroke();
+          ctx.setLineDash([]);
+        }
+        ctx.fillStyle = "rgba(99,102,241,0.35)";
+        for (const q of t.selection) {
+          poly(q);
+          ctx.fill();
+        }
+        if (t.caret) {
+          const [a, b] = t.caret.map(scr);
+          ctx.beginPath();
+          ctx.moveTo(a.x, a.y);
+          ctx.lineTo(b.x, b.y);
+          ctx.lineWidth = 3;
+          ctx.strokeStyle = "#ffffff";
+          ctx.stroke();
+          ctx.lineWidth = 1.5;
+          ctx.strokeStyle = "#111827";
+          ctx.stroke();
+        }
+      } catch {
+      }
+      ctx.restore();
+    }
     if (options.freeTransform) {
       const t = options.freeTransform;
       ctx.save();
@@ -6475,7 +6514,7 @@ var ImageEditorController = class {
     s.sourceUrl = null;
     s.imageDimensions = { width: result.width, height: result.height };
     if (!this.samplePixelsOverride) this.samplePixels = null;
-    s.layers = result.layers;
+    s.layers = this.checkPsdFonts(result);
     s.crop = null;
     s.transform = { ...DEFAULT_TRANSFORM_VALUES };
     s.outputOpacity = 1;
@@ -6500,6 +6539,30 @@ var ImageEditorController = class {
       summary: result.summary
     };
   }
+  /**
+   * Type layers whose fonts the shaper lacks: they keep Photoshop's pixels, are marked with their
+   * `missingFonts`, and a warning names them (an edit draws them with a fallback).
+   */
+  checkPsdFonts(result) {
+    const shaper = this.getTextShaper();
+    const types = flattenLayers(result.layers).filter((l) => l.type === "type");
+    if (!types.length) return result.layers;
+    let layers = result.layers;
+    const missing = /* @__PURE__ */ new Map();
+    for (const l of types) {
+      const fonts = shaper ? layoutText(l, shaper).missingFonts : [...new Set(l.runs.map((r) => r.style.fontFamily))];
+      if (!fonts.length) continue;
+      layers = mapLayer(layers, l.id, () => ({ ...l, missingFonts: fonts }));
+      for (const f of fonts) missing.set(f, [...missing.get(f) ?? [], l.name]);
+    }
+    for (const [font, names] of missing) {
+      result.warnings.push(
+        shaper ? `The font "${font}" is missing here: the type shows Photoshop's pixels until it is edited, then a fallback font (${names.length === 1 ? "layer" : "layers"} ${names.map((n) => `"${n}"`).join(", ")}).` : `Type layers show Photoshop's pixels; nothing here can draw text, so they cannot be edited (${names.length === 1 ? "layer" : "layers"} ${names.map((n) => `"${n}"`).join(", ")}).`
+      );
+      if (!shaper) break;
+    }
+    return layers;
+  }
   /**
    * The document as an 8-bit RGB PSD (PSB above 30 000 px) with real layers, groups, adjustment
    * layers and masks, in the source frame. Layer filters and parametric (depth) masks are baked
@@ -6578,8 +6641,8 @@ var ImageEditorController = class {
         return out2;
       }
       if (layer.type === "shape" || layer.type === "type") {
-        add2(layer.type === "shape" ? "Shape layers were written as pixel layers" : "Type layers were written as pixel layers", layer.name);
-        const out2 = layer.type === "shape" ? shapeAsPixelLayer(layer) : typeAsPixelLayer(layer);
+        if (layer.type === "type" && layer.missingFonts?.length) add2(`Type layers drawn with a fallback for missing fonts (${layer.missingFonts.join(", ")}) keep the font names, so Photoshop may draw them differently`, layer.name);
+        const out2 = { ...layer };
         const mask2 = bakeMask(layer);
         if (mask2) out2.mask = mask2;
         else delete out2.mask;
@@ -8992,7 +9055,7 @@ function createImageEffectTools(controller) {
   const add2 = {
     name: "add_layer_effect",
     title: "Add a layer effect",
-    description: "Adds a live effect to a pixel, annotation or group layer with Photoshop's defaults, changed by settings: drop-shadow, inner-shadow, outer-glow, inner-glow, bevel-emboss, satin, color-overlay, gradient-overlay, pattern-overlay or stroke. Several of one kind are allowed (the first listed is on top). One undo step. Returns the new effect's id and the layer's effects.",
+    description: "Adds a live effect to a pixel, shape, type, smart object, annotation or group layer with Photoshop's defaults, changed by settings: drop-shadow, inner-shadow, outer-glow, inner-glow, bevel-emboss, satin, color-overlay, gradient-overlay, pattern-overlay or stroke. Several of one kind are allowed (the first listed is on top). One undo step. Returns the new effect's id and the layer's effects.",
     inputSchema: {
       type: "object",
       $defs: DEFS,
@@ -9466,7 +9529,7 @@ function createImagePsdTools(controller) {
   const open = {
     name: "import_psd",
     title: "Open a PSD as the document",
-    description: "Opens a PSD / PSB as the document, replacing the current layers, crop and rotation (one undo step; undo brings the previous document back). Pixel, group and adjustment layers, masks, blend modes, opacity, fill, clipping, visibility, locks, layer effects (with the patterns and global light of the file) map directly; smart objects come in as smart objects (embedded contents, placement and warp, smart filters: Box Blur is drawn, other Photoshop filters are kept but not drawn, filter mask; linked contents as their stored pixels); type, fill and shape layers come in as their pixels; unsupported adjustments are left out. Returns the new layer tree with ids, the size and the warnings (each names the affected layers).",
+    description: "Opens a PSD / PSB as the document, replacing the current layers, crop and rotation (one undo step; undo brings the previous document back). Pixel, group and adjustment layers, masks, blend modes, opacity, fill, clipping, visibility, locks, layer effects (with the patterns and global light of the file) map directly; smart objects come in as smart objects (embedded contents, placement and warp, smart filters: Box Blur is drawn, other Photoshop filters are kept but not drawn, filter mask; linked contents as their stored pixels); shape layers come in as live shapes (paths, path operations, fill, stroke, live rectangles, ellipses and lines); type layers come in as live text (runs, paragraphs, frame, transform) showing Photoshop\u2019s pixels until edited, with a warning for fonts missing here; fill layers come in as their pixels; unsupported adjustments are left out. Returns the new layer tree with ids, the size and the warnings (each names the affected layers).",
     inputSchema: { type: "object", properties: { data: DATA }, required: ["data"], additionalProperties: false },
     annotations: { title: "Open a PSD as the document", ...DESTRUCTIVE4 },
     handler: ({ data }) => {
@@ -9485,7 +9548,7 @@ function createImagePsdTools(controller) {
   const save = {
     name: "export_psd",
     title: "Export the document as a PSD",
-    description: "Writes the document as an 8-bit RGB PSD (a PSB above 30000 px) with real layers, groups, adjustment layers, masks and layer effects (an effects block opened from a PSD is written back unchanged while its effects are; the patterns effects use are embedded), in the source frame (crop and rotation are not applied). Smart objects are written as Photoshop smart objects (contents embedded once per linked set, placement, warp, smart filters and filter mask; a Develop smart filter has no Photoshop filter and is left out of the list). Layer filters and depth masks are baked, annotation layers are rasterized (in a browser; elsewhere left out), and the merged image is the editor's composite. Changes nothing. Returns the file as base64, its size in bytes, whether it is a PSB, and warnings for everything that was changed or left out.",
+    description: "Writes the document as an 8-bit RGB PSD (a PSB above 30000 px) with real layers, groups, adjustment layers, masks and layer effects (an effects block opened from a PSD is written back unchanged while its effects are; the patterns effects use are embedded), in the source frame (crop and rotation are not applied). Smart objects are written as Photoshop smart objects (contents embedded once per linked set, placement, warp, smart filters and filter mask; a Develop smart filter has no Photoshop filter and is left out of the list). Shape layers are written as Photoshop shape layers (path, fill, stroke, live shapes) and type layers as Photoshop type layers (text, runs, paragraphs, frame; blocks opened from a PSD are written back unchanged while the layer is). Layer filters and depth masks are baked, annotation layers are rasterized (in a browser; elsewhere left out), and the merged image is the editor's composite. Changes nothing. Returns the file as base64, its size in bytes, whether it is a PSB, and warnings for everything that was changed or left out.",
     inputSchema: { type: "object", properties: {}, additionalProperties: false },
     annotations: { title: "Export the document as a PSD", ...READ5 },
     handler: async () => {
@@ -11223,6 +11286,470 @@ function applyRegionBlur(imageData, regions, radius = 10) {
   return imageData;
 }
 
+// src/image-editor/layers/shape-type-ui.ts
+var DEFAULT_SHAPE_TOOL_OPTIONS = {
+  kind: "rect",
+  fill: "#4f46e5",
+  stroke: null,
+  strokeWidth: 2,
+  radius: 0,
+  sides: 6,
+  points: 5,
+  innerRatio: 0.5,
+  weight: 4,
+  arrow: false
+};
+var SHAPE_KIND_LABELS = { rect: "Rectangle", ellipse: "Ellipse", polygon: "Polygon", star: "Star", line: "Line" };
+var DEFAULT_TYPE_TOOL_OPTIONS = { fontFamily: "sans-serif", fontSize: 32, fontWeight: 400, italic: false, color: "#111827", align: "left" };
+function liveShapeForDrag(o, a, b, mods = {}) {
+  if (o.kind === "line") {
+    let x2 = b.x;
+    let y2 = b.y;
+    if (mods.shift) {
+      const ang = Math.round(Math.atan2(b.y - a.y, b.x - a.x) / (Math.PI / 4)) * (Math.PI / 4);
+      const len = Math.hypot(b.x - a.x, b.y - a.y);
+      x2 = a.x + Math.cos(ang) * len;
+      y2 = a.y + Math.sin(ang) * len;
+    }
+    if (Math.hypot(x2 - a.x, y2 - a.y) < 1) return null;
+    const head = o.arrow ? { endArrow: { width: o.weight * 4, length: o.weight * 4 } } : {};
+    return { kind: "line", x1: a.x, y1: a.y, x2, y2, weight: o.weight, ...head };
+  }
+  let w = b.x - a.x;
+  let h = b.y - a.y;
+  if (mods.shift) {
+    const s = Math.max(Math.abs(w), Math.abs(h));
+    w = Math.sign(w || 1) * s;
+    h = Math.sign(h || 1) * s;
+  }
+  let x = a.x;
+  let y = a.y;
+  if (mods.alt) {
+    x = a.x - w;
+    y = a.y - h;
+    w *= 2;
+    h *= 2;
+  }
+  const box = { x: Math.min(x, x + w), y: Math.min(y, y + h), width: Math.abs(w), height: Math.abs(h) };
+  if (box.width < 1 || box.height < 1) return null;
+  switch (o.kind) {
+    case "rect":
+      return { kind: "rect", ...box, ...o.radius > 0 ? { radius: o.radius } : {} };
+    case "ellipse":
+      return { kind: "ellipse", ...box };
+    case "polygon":
+      return { kind: "polygon", ...box, sides: o.sides };
+    case "star":
+      return { kind: "star", ...box, points: o.points, innerRatio: o.innerRatio };
+  }
+  return null;
+}
+var ShapeDrawGesture = class {
+  constructor(controller, options) {
+    this.controller = controller;
+    this.options = options;
+  }
+  controller;
+  options;
+  start = null;
+  layerId = null;
+  error = null;
+  get active() {
+    return this.start !== null;
+  }
+  /** The shape layer drawn by the last drag (until the next one starts). */
+  get drawnLayerId() {
+    return this.layerId;
+  }
+  down(p) {
+    this.error = null;
+    this.start = { x: p.x, y: p.y };
+    this.layerId = null;
+  }
+  move(p, mods = {}) {
+    if (!this.start) return;
+    const o = this.options();
+    const shape = liveShapeForDrag(o, this.start, p, mods);
+    if (!shape) return;
+    try {
+      if (!this.layerId) {
+        const isLine = o.kind === "line";
+        this.layerId = this.controller.addShapeLayer({
+          shape,
+          fill: isLine ? o.stroke ?? o.fill ?? "#000000" : o.fill,
+          stroke: !isLine && o.stroke ? { width: o.strokeWidth, paint: o.stroke } : null
+        });
+      } else this.controller.setShapeComponent(this.layerId, 0, { shape }, false);
+    } catch (e) {
+      this.error = e instanceof Error ? e.message : String(e);
+      this.start = null;
+    }
+  }
+  up() {
+    this.start = null;
+    return this.layerId;
+  }
+  cancel() {
+    this.start = null;
+  }
+};
+function applyShapeOptions(controller, layerId, change) {
+  const info = controller.getShapeLayer(layerId);
+  const style = {};
+  if ("fill" in change) style.fill = change.fill ?? null;
+  if ("stroke" in change || "strokeWidth" in change) {
+    const color = "stroke" in change ? change.stroke : info.stroke?.paint.type === "color" ? info.stroke.paint.color : null;
+    style.stroke = color ? { width: change.strokeWidth ?? info.stroke?.width ?? 2, paint: color } : null;
+  }
+  if (Object.keys(style).length) controller.setShapeStyle(layerId, style);
+  const live = info.components[0]?.live;
+  if (!live) return;
+  const shape = {};
+  if (live.kind === "rect" && change.radius !== void 0) shape.radius = change.radius;
+  if (live.kind === "polygon" && change.sides !== void 0) shape.sides = change.sides;
+  if (live.kind === "star" && change.points !== void 0) shape.points = change.points;
+  if (live.kind === "star" && change.innerRatio !== void 0) shape.innerRatio = change.innerRatio;
+  if (live.kind === "line" && change.weight !== void 0) shape.weight = change.weight;
+  if (live.kind === "line" && change.arrow !== void 0) shape.endArrow = change.arrow ? { width: (live.weight || 1) * 4, length: (live.weight || 1) * 4 } : null;
+  if (Object.keys(shape).length) controller.setShapeComponent(layerId, 0, { shape });
+}
+var TextEditSession = class {
+  constructor(controller, layerId, index) {
+    this.controller = controller;
+    this.layerId = layerId;
+    const n = this.text.length;
+    this.anchor = this.focus = Math.max(0, Math.min(n, index ?? n));
+  }
+  controller;
+  layerId;
+  anchor;
+  focus;
+  changed = false;
+  listeners = /* @__PURE__ */ new Set();
+  error = null;
+  get layer() {
+    const l = findLayer(this.controller.getLayers(), this.layerId)?.layer;
+    if (!l || l.type !== "type") throw new Error("The type layer being edited is gone.");
+    return l;
+  }
+  get text() {
+    return this.layer.text;
+  }
+  get start() {
+    return Math.min(this.anchor, this.focus);
+  }
+  get end() {
+    return Math.max(this.anchor, this.focus);
+  }
+  /** Whether the layer still exists (it can be deleted or undone away while editing). */
+  get alive() {
+    return findLayer(this.controller.getLayers(), this.layerId)?.layer.type === "type";
+  }
+  subscribe(fn) {
+    this.listeners.add(fn);
+    return () => this.listeners.delete(fn);
+  }
+  emit() {
+    for (const l of this.listeners) l();
+  }
+  layout() {
+    return this.controller.getTextLayout(this.layerId);
+  }
+  run(fn) {
+    this.error = null;
+    try {
+      const out = fn(!this.changed);
+      this.changed = true;
+      return out;
+    } catch (e) {
+      this.error = e instanceof Error ? e.message : String(e);
+      return void 0;
+    } finally {
+      this.emit();
+    }
+  }
+  /** Replaces the selection with `text` (typing and pasting). */
+  insert(text) {
+    if (!text) return;
+    const s = this.start;
+    const e = this.end;
+    const done = this.run((commit) => this.controller.setText(this.layerId, text, { start: s, end: e }, commit));
+    if (done) this.anchor = this.focus = s + text.replace(/\r\n?/g, "\n").length;
+  }
+  /** Backspace: the selection, else the character before the caret. */
+  deleteBackward() {
+    if (this.start === this.end && this.start === 0) return;
+    const s = this.start === this.end ? Math.max(0, this.start - this.surrogate(this.start - 1, -1)) : this.start;
+    const e = this.end;
+    if (this.run((commit) => this.controller.setText(this.layerId, "", { start: s, end: e }, commit))) this.anchor = this.focus = s;
+  }
+  /** Delete: the selection, else the character after the caret. */
+  deleteForward() {
+    const n = this.text.length;
+    if (this.start === this.end && this.end >= n) return;
+    const s = this.start;
+    const e = this.start === this.end ? Math.min(n, this.end + this.surrogate(this.end, 1)) : this.end;
+    if (this.run((commit) => this.controller.setText(this.layerId, "", { start: s, end: e }, commit))) this.anchor = this.focus = s;
+  }
+  /** 2 when the code unit at `i` is half of a surrogate pair (moving `dir`), else 1. */
+  surrogate(i, dir) {
+    const t = this.text;
+    const c = t.charCodeAt(i);
+    if (dir < 0 && c >= 56320 && c <= 57343 && i > 0) return 2;
+    if (dir > 0 && c >= 55296 && c <= 56319 && i + 1 < t.length) return 2;
+    return 1;
+  }
+  /** Moves the caret (Shift extends the selection). */
+  move(to, extend = false) {
+    const n = this.text.length;
+    let f = this.focus;
+    const collapsedJump = !extend && this.start !== this.end;
+    if (to === "left") f = collapsedJump ? this.start : Math.max(0, f - this.surrogate(f - 1, -1));
+    else if (to === "right") f = collapsedJump ? this.end : Math.min(n, f + this.surrogate(f, 1));
+    else if (to === "start") f = 0;
+    else if (to === "finish") f = n;
+    else {
+      const layout = this.layout();
+      if (layout && layout.lines.length) {
+        const c = caretAt(layout, f);
+        const line = layout.lines[c.line];
+        if (to === "home") f = line.start;
+        else if (to === "end") {
+          const last = line.chars[line.chars.length - 1];
+          f = last ? Math.min(n, last.index + 1) : line.start;
+          if (last && this.text[last.index] === " " && c.line < layout.lines.length - 1) f = last.index;
+        } else {
+          const target = layout.lines[c.line + (to === "up" ? -1 : 1)];
+          if (!target) f = to === "up" ? 0 : n;
+          else {
+            const hit = target.chars.find((ch) => c.x < ch.x + ch.advance / 2);
+            const last = target.chars[target.chars.length - 1];
+            f = hit ? hit.index : last ? last.index + 1 : target.start;
+          }
+        }
+      }
+    }
+    this.focus = f;
+    if (!extend) this.anchor = f;
+    this.emit();
+  }
+  selectAll() {
+    this.anchor = 0;
+    this.focus = this.text.length;
+    this.emit();
+  }
+  /** Places the caret at a document point (Shift-click extends). */
+  pointAt(p, extend = false) {
+    this.focus = this.controller.textIndexAt(this.layerId, p);
+    if (!extend) this.anchor = this.focus;
+    this.emit();
+  }
+  /** Handles a key; returns `true` when it was the session's (the caller then prevents the default). */
+  handleKey(e) {
+    const mod2 = e.metaKey || e.ctrlKey;
+    if (mod2 && e.key.toLowerCase() === "a") {
+      this.selectAll();
+      return true;
+    }
+    switch (e.key) {
+      case "Backspace":
+        this.deleteBackward();
+        return true;
+      case "Delete":
+        this.deleteForward();
+        return true;
+      case "Enter":
+        this.insert("\n");
+        return true;
+      case "ArrowLeft":
+        this.move(mod2 ? "home" : "left", e.shiftKey);
+        return true;
+      case "ArrowRight":
+        this.move(mod2 ? "end" : "right", e.shiftKey);
+        return true;
+      case "ArrowUp":
+        this.move(mod2 ? "start" : "up", e.shiftKey);
+        return true;
+      case "ArrowDown":
+        this.move(mod2 ? "finish" : "down", e.shiftKey);
+        return true;
+      case "Home":
+        this.move("home", e.shiftKey);
+        return true;
+      case "End":
+        this.move("end", e.shiftKey);
+        return true;
+      case "Tab":
+        this.insert("	");
+        return true;
+    }
+    if (!mod2 && !e.altKey && e.key.length >= 1 && [...e.key].length === 1) {
+      this.insert(e.key);
+      return true;
+    }
+    return false;
+  }
+  /** Sets character style fields on the selection, or on the whole text when nothing is selected. */
+  setStyle(style) {
+    const s = this.start;
+    const e = this.end;
+    const range = s === e ? {} : { start: s, end: e };
+    this.run((commit) => this.controller.setTextStyle(this.layerId, style, range, commit));
+  }
+  /** Sets paragraph fields on the paragraphs the selection touches. */
+  setParagraph(style) {
+    const s = this.start;
+    const e = this.end;
+    this.run((commit) => this.controller.setParagraphStyle(this.layerId, style, { start: s, end: e }, commit));
+  }
+  /** The style at the caret (or the selection's start), for the options bar. */
+  styleHere() {
+    const layer = this.layer;
+    const at = this.start > 0 && this.start === this.end ? this.start - 1 : this.start;
+    return styleAt(layer.runs, at, DEFAULT_TEXT_STYLE);
+  }
+  info() {
+    return this.controller.getTextLayer(this.layerId);
+  }
+  /** The caret, the selection and the frame in natural pixels, for `RenderOptions.textEdit`. */
+  overlay() {
+    const layer = this.layer;
+    const layout = this.layout();
+    const m = textMatrix(layer);
+    const at = (x, y) => applyMatrix(m, { x, y });
+    let frame = null;
+    if (layer.frame.kind === "box") frame = [at(0, 0), at(layer.frame.width, 0), at(layer.frame.width, layer.frame.height), at(0, layer.frame.height)];
+    else if (layout) {
+      const b = layout.bounds;
+      frame = [at(b.x, b.y), at(b.x + b.width, b.y), at(b.x + b.width, b.y + b.height), at(b.x, b.y + b.height)];
+    }
+    if (!layout) return { caret: null, selection: [], frame };
+    const selection = [];
+    if (this.start !== this.end) {
+      for (const l of layout.lines) {
+        const chars = l.chars.filter((c2) => c2.index >= this.start && c2.index < this.end);
+        if (!chars.length) continue;
+        const x0 = chars[0].x;
+        const x1 = chars[chars.length - 1].x + chars[chars.length - 1].advance;
+        const top = l.baseline - l.ascent;
+        const bottom = l.baseline + l.descent;
+        selection.push([at(x0, top), at(x1, top), at(x1, bottom), at(x0, bottom)]);
+      }
+    }
+    const c = caretAt(layout, this.focus);
+    return { caret: [at(c.x, c.top), at(c.x, c.bottom)], selection, frame };
+  }
+  /** Ends editing: an empty layer made for this session is deleted (as Photoshop does). Returns whether the layer remains. */
+  close() {
+    if (!this.alive) return false;
+    if (!this.text.trim().length) {
+      try {
+        this.controller.removeLayer(this.layerId);
+      } catch {
+      }
+      return false;
+    }
+    if (this.layer.name === "Text" && this.changed) {
+      try {
+        this.controller.setLayerProperties(this.layerId, { name: typeLayerName(this.text) }, false);
+      } catch {
+      }
+    }
+    return true;
+  }
+};
+function typeLayerAt(controller, p, slop = 4) {
+  const layers = [...flattenTypeLayers(controller.getLayers())].reverse();
+  for (const l of layers) {
+    if (!l.visible) continue;
+    const inv = invert(textMatrix(l));
+    const q = applyMatrix(inv, p);
+    let b = null;
+    if (l.frame.kind === "box") b = { x: 0, y: 0, width: l.frame.width, height: l.frame.height };
+    else {
+      const layout = controller.getTextLayout(l.id);
+      if (layout) b = layout.bounds;
+    }
+    if (b && q.x >= b.x - slop && q.x <= b.x + b.width + slop && q.y >= b.y - slop && q.y <= b.y + b.height + slop) return l.id;
+  }
+  return null;
+}
+function flattenTypeLayers(layers) {
+  const out = [];
+  const walk = (list) => {
+    for (const l of list) {
+      if (l.type === "type") out.push(l);
+      else if (l.type === "group") walk(l.children);
+    }
+  };
+  walk(layers);
+  return out;
+}
+function invert(m) {
+  const [a, b, c, d, e, f] = m;
+  const det = a * d - b * c || 1;
+  return [d / det, -b / det, -c / det, a / det, (c * f - d * e) / det, (b * e - a * f) / det];
+}
+var TypeToolGesture = class {
+  constructor(controller, options) {
+    this.controller = controller;
+    this.options = options;
+  }
+  controller;
+  options;
+  session = null;
+  dragStart = null;
+  error = null;
+  down(p, mods = {}) {
+    this.error = null;
+    const hit = typeLayerAt(this.controller, p);
+    if (this.session && this.session.alive && hit === this.session.layerId) {
+      this.session.pointAt(p, mods.shift);
+      this.dragStart = null;
+      return;
+    }
+    this.finish();
+    if (hit) {
+      this.controller.setActiveLayer(hit);
+      this.session = new TextEditSession(this.controller, hit, this.controller.textIndexAt(hit, p));
+      this.dragStart = null;
+      return;
+    }
+    this.dragStart = { x: p.x, y: p.y };
+  }
+  /** Releases a click or drag that did not land on type: adds a new text layer (point text, or a box for a drag). */
+  up(p) {
+    const start = this.dragStart;
+    this.dragStart = null;
+    if (!start) return this.session;
+    const o = this.options();
+    const w = Math.abs(p.x - start.x);
+    const h = Math.abs(p.y - start.y);
+    try {
+      const box = w >= 8 && h >= 8 ? { width: w, height: h } : void 0;
+      const id = this.controller.addTextLayer({
+        text: "",
+        x: box ? Math.min(start.x, p.x) : start.x,
+        y: box ? Math.min(start.y, p.y) : start.y,
+        ...box ? { box } : {},
+        style: { fontFamily: o.fontFamily, fontSize: o.fontSize, fontWeight: o.fontWeight, italic: o.italic, color: o.color },
+        paragraph: o.align !== "left" ? { align: o.align } : {},
+        name: "Text"
+      });
+      this.session = new TextEditSession(this.controller, id, 0);
+    } catch (e) {
+      this.error = e instanceof Error ? e.message : String(e);
+    }
+    return this.session;
+  }
+  /** Ends the open session (an empty new layer is removed). */
+  finish() {
+    const s = this.session;
+    this.session = null;
+    s?.close();
+  }
+};
+
 // src/image-editor/layers/panel.ts
 function layerPanelRows(layers, activeId) {
   const rows = [];
@@ -11267,6 +11794,15 @@ function layerBadge(layer) {
       return "T";
   }
 }
+function layerHasThumbnail(layer) {
+  return layer.type === "pixel" || layer.type === "shape" || layer.type === "type";
+}
+function layerWarning(layer) {
+  if (layer.type === "type" && layer.missingFonts?.length) {
+    return `Missing ${layer.missingFonts.length === 1 ? "font" : "fonts"}: ${layer.missingFonts.join(", ")}. ${layer.rendering === "stored" ? "Showing the saved pixels until the text is edited." : "Drawn with a fallback font."}`;
+  }
+  return null;
+}
 function dropZone(fraction, isGroup) {
   if (isGroup && fraction > 0.3 && fraction < 0.7) return "inside";
   return fraction < 0.5 ? "above" : "below";
@@ -12246,9 +12782,11 @@ export {
   DEFAULT_MIXER,
   DEFAULT_REFINE_EDGE_PARAMS,
   DEFAULT_SELECTION_TOOL_OPTIONS,
+  DEFAULT_SHAPE_TOOL_OPTIONS,
   DEFAULT_SMUDGE,
   DEFAULT_TEXT_STYLE,
   DEFAULT_TRANSFORM,
+  DEFAULT_TYPE_TOOL_OPTIONS,
   DEPTH_MASK_CONTROLS,
   DEVELOP_FILTER_ID,
   DIRECT_GAUSSIAN_MAX_SIGMA,
@@ -12317,11 +12855,13 @@ export {
   SELECTION_MODIFY_OPS,
   SELECTION_TOOLS,
   SHADOW_AMBIENT,
+  SHAPE_KIND_LABELS,
   SHAPE_OPERATIONS,
   SHAPE_RENDER_MARGIN,
   SMART_RENDER_MARGIN,
   SUPPORTED_ADJUSTMENT_KEYS,
   SelectionGesture,
+  ShapeDrawGesture,
   SmudgeTip,
   StrokeCoverage,
   SurfaceDraft,
@@ -12334,9 +12874,11 @@ export {
   TONE_LUT_SIZE,
   TONE_RANGE_PRESETS,
   TRANSFORM_ANCHORS,
+  TextEditSession,
   TileMedium,
   TiledSurface,
   TransformTooLargeError,
+  TypeToolGesture,
   VIBRANCE_GREY,
   WARP_GRID_OPTIONS,
   WARP_STYLES,
@@ -12375,6 +12917,7 @@ export {
   applyProcess2Adjustments,
   applyRegionBlur,
   applyRegionMosaic,
+  applyShapeOptions,
   applySmartFilters,
   applyStrokeToTile,
   backgroundLayer,
@@ -12607,6 +13150,7 @@ export {
   layerEffectsBadge,
   layerEffectsOf,
   layerEffectsPanel,
+  layerHasThumbnail,
   layerLabel,
   layerMaskCoverage,
   layerMaskFromSelection,
@@ -12616,6 +13160,7 @@ export {
   layerPanelRows,
   layerTree,
   layerTypeLabel,
+  layerWarning,
   layersFromLegacy,
   layoutText,
   legacyAdjustmentLayer,
@@ -12627,6 +13172,7 @@ export {
   linearSrgbToXy,
   linearToSrgb,
   liveComponent,
+  liveShapeForDrag,
   liveShapeSubpaths,
   loadImageEditorDocument,
   loadMixer,
@@ -12856,6 +13402,7 @@ export {
   typeAsPixelLayer,
   typeFrame,
   typeFromAnnotation,
+  typeLayerAt,
   typeLayerName,
   ungroupLayer,
   uniformTile,