@pixerate/editor 0.110.0 → 0.111.0

package/dist/image-editor/index.js

@@ -17,8 +17,10 @@ import {
   D50,
   D65,
   DEFAULT_ADJUSTMENTS_VALUES,
+  DEFAULT_AUTO_LEADING,
   DEFAULT_DEPTH_MASK_VALUES,
   DEFAULT_MITER_LIMIT,
+  DEFAULT_TEXT_STYLE,
   DEFAULT_TRANSFORM_VALUES,
   DEVELOP_FILTER_ID,
   EMPTY_DISTANCE,
@@ -35,6 +37,7 @@ import {
   MAX_KELVIN,
   MIN_KELVIN,
   MIRED_PER_TEMPERATURE_UNIT,
+  PARAGRAPH_STYLE_FIELDS,
   PATTERN_BLOCK_KEYS,
   PSD_BLEND_KEYS,
   PsdError,
@@ -44,6 +47,9 @@ import {
   SHAPE_RENDER_MARGIN,
   SMART_RENDER_MARGIN,
   SUPPORTED_ADJUSTMENT_KEYS,
+  TEXT_ALIGNS,
+  TEXT_RENDER_MARGIN,
+  TEXT_STYLE_FIELDS,
   TINT_SCALE,
   TONE_LUT_SIZE,
   TRANSFORM_ANCHORS,
@@ -64,6 +70,7 @@ import {
   annotationLayerName,
   annotationOfLayer,
   annotationOfShape,
+  annotationOfType,
   applyAdjustmentLayers,
   applyAdjustments,
   applyBoxBlur,
@@ -84,6 +91,7 @@ import {
   buildToneLut,
   calculateCropDrag,
   canvasToImagePoint,
+  caretAt,
   clampCropToImage,
   colorBalanceChannel,
   combineSelections,
@@ -100,6 +108,7 @@ import {
   createAdjustmentLayer,
   createSelectionMask,
   createShapeLayer,
+  createTypeLayer,
   curveLutFromLevels,
   decodeLayerChannel,
   decodeLayerMask,
@@ -131,8 +140,11 @@ import {
   exportPsd,
   featherCoverage,
   filterMaskCoverage,
+  fitParagraphRuns,
+  fitRuns,
   flattenPath,
   flipCorners,
+  fontOf,
   fullSelection,
   geometryHomography,
   getAnnotationBounds,
@@ -183,6 +195,7 @@ import {
   layerTree,
   layerTypeLabel,
   layersFromLegacy,
+  layoutText,
   legacyAdjustmentLayer,
   legacyMaskOf,
   legacyView,
@@ -215,9 +228,11 @@ import {
   normalizeShapeStroke,
   normalizeSmartFilter,
   normalizeSubpaths,
+  normalizeText,
   offsetLayer,
   offsetShape,
   offsetSmartObject,
+  paragraphRanges,
   parseAdjustmentBlock,
   parseBlend,
   parseCssColor,
@@ -226,6 +241,8 @@ import {
   parsePatternBlock,
   parseSelectionMode,
   parseVersionedDescriptor,
+  patchParagraphStyle,
+  patchTextStyle,
   photoFilterMatrix,
   pixelLayerBounds,
   pixelLayers,
@@ -256,16 +273,21 @@ import {
   renderShape,
   renderShapeRect,
   renderSmartObject,
+  renderText,
   replaceContents,
+  replaceTextRange,
   requireLayer,
   requireOperation,
   requireShapeLayer,
   requireSmartObject,
+  requireTypeLayer,
   requireUnlocked,
   rerender,
   rerenderShape,
+  rerenderText,
   resizeSelection,
   resolveExternalAssets,
+  restyleRange,
   rgbToGray,
   rgbToHsl,
   runLayerFilters,
@@ -301,16 +323,28 @@ import {
   smartContentsFile,
   smartObjectLayers,
   smoothCoverage,
+  spliceRuns,
   srgbToLinear,
+  styleAt,
   tempTintToXy,
   temperatureToKelvin,
+  textIndexAt,
+  textMatrix,
+  textOutlines,
+  textRange,
+  toTextSpace,
   toneCurve,
   toneLuts,
   transformHomography,
   transformMap,
   transformShapeComponents,
+  transformTypeLayer,
   transformedBox,
   transformedPoint,
+  typeAsPixelLayer,
+  typeFrame,
+  typeFromAnnotation,
+  typeLayerName,
   ungroupLayer,
   unionRect,
   unprojectCanvasPoint,
@@ -319,6 +353,7 @@ import {
   updateLayerMaskProps,
   updateShapeLayer,
   updateSmartFilter,
+  updateTypeLayer,
   uvToXy,
   versionedDescriptorBytes,
   vibranceLinear,
@@ -334,7 +369,7 @@ import {
   writePsd,
   xyToTempTint,
   xyToUv
-} from "../chunk-DMRSJBJF.js";
+} from "../chunk-HHZ6ZJTW.js";
 import {
   DEFAULT_GLOBAL_LIGHT,
   DIRECT_GAUSSIAN_MAX_SIGMA,
@@ -506,12 +541,15 @@ import {
   WARP_STYLES,
   WARP_STYLE_LABELS,
   applyMatrix,
+  bezierToSubpaths,
   dragWarpMeshPoint,
   evalWarpMesh,
   identityWarpMesh,
+  invertMatrix,
   multiplyMatrices,
   pullWarpMesh,
   resizeWarpMesh,
+  rotateMatrix,
   roundSubpaths,
   translateMatrix,
   warpMeshColumns,
@@ -700,7 +738,7 @@ function needsLegacyBase(input) {
   if (hasResampledLegacyMask(stack.layers, canvas.width, canvas.height)) return true;
   return false;
 }
-var isPlainAnnotation = (l) => l.type === "annotation" ? l.opacity === 1 && l.blend === "normal" && !l.clipped && !l.mask : l.type === "shape" && Boolean(l.annotation) && l.opacity === 1 && l.blend === (l.annotation.blend ?? "normal") && !l.clipped && !l.mask && !l.effects && (l.fillOpacity ?? 1) === 1;
+var isPlainAnnotation = (l) => l.type === "annotation" ? l.opacity === 1 && l.blend === "normal" && !l.clipped && !l.mask : (l.type === "shape" || l.type === "type") && Boolean(l.annotation) && l.opacity === 1 && l.blend === (l.annotation.blend ?? "normal") && !l.clipped && !l.mask && !l.effects && (l.fillOpacity ?? 1) === 1;
 var overlayViews = /* @__PURE__ */ new WeakMap();
 function overlayView(l) {
   if (l.type === "annotation") return l;
@@ -716,7 +754,7 @@ function splitOverlayAnnotations(layers) {
   let i = layers.length;
   while (i > 0) {
     const l = layers[i - 1];
-    if ((l.type === "annotation" || l.type === "shape" && l.annotation) && (!l.visible || isPlainAnnotation(l))) i--;
+    if ((l.type === "annotation" || (l.type === "shape" || l.type === "type") && l.annotation) && (!l.visible || isPlainAnnotation(l))) i--;
     else break;
   }
   return {
@@ -2441,6 +2479,159 @@ function refineSelection(pixels, mask, params = {}) {
   return createSelectionMask(mask.width, mask.height, out);
 }
 
+// src/image-editor/layers/text-shapers.ts
+var GENERIC = /* @__PURE__ */ new Set(["serif", "sans-serif", "monospace", "cursive", "fantasy", "system-ui", "ui-serif", "ui-sans-serif", "ui-monospace", "ui-rounded", "math", "emoji", "fangsong"]);
+function cssFontFamily(family) {
+  const f = family.trim();
+  if (GENERIC.has(f.toLowerCase()) || f.includes(",") || /^["']/.test(f)) return f;
+  return /^[A-Za-z_-][\w -]*$/.test(f) && !/\s{2}/.test(f) ? f : `"${f.replace(/"/g, '\\"')}"`;
+}
+function cssFont(font, family = font.family) {
+  return `${font.italic ? "italic " : ""}${font.weight} ${font.size}px ${cssFontFamily(family)}`;
+}
+function createCanvasTextShaper(options = {}) {
+  const make = options.createCanvas ?? ((w, h) => {
+    if (typeof OffscreenCanvas !== "undefined") return new OffscreenCanvas(w, h);
+    if (typeof document !== "undefined") {
+      const c = document.createElement("canvas");
+      c.width = w;
+      c.height = h;
+      return c;
+    }
+    return null;
+  });
+  const canvas = make(1, 1);
+  const ctx = canvas?.getContext("2d");
+  if (!ctx || typeof ctx.measureText !== "function") return null;
+  const fallback = options.fallbackFamily ?? "sans-serif";
+  const available = /* @__PURE__ */ new Map();
+  const widths = /* @__PURE__ */ new Map();
+  const metrics = /* @__PURE__ */ new Map();
+  const probe = "mmmmmmmmmmlli1WQ@#";
+  const width = (font, text) => {
+    ctx.font = font;
+    return ctx.measureText(text).width;
+  };
+  const isAvailable = (family) => {
+    const f = family.trim();
+    if (GENERIC.has(f.toLowerCase()) || f.includes(",")) return true;
+    let hit = available.get(f);
+    if (hit === void 0) {
+      const q = cssFontFamily(f);
+      hit = width(`72px ${q}, monospace`, probe) !== width("72px monospace", probe) || width(`72px ${q}, serif`, probe) !== width("72px serif", probe);
+      available.set(f, hit);
+    }
+    return hit;
+  };
+  return {
+    id: "canvas",
+    resolve(font) {
+      const ok = isAvailable(font.family);
+      return { family: ok ? font.family : fallback, available: ok };
+    },
+    metrics(font) {
+      const key = cssFont(font);
+      let m = metrics.get(key);
+      if (!m) {
+        ctx.font = key;
+        ctx.textBaseline = "alphabetic";
+        const t = ctx.measureText("Hg");
+        const ascent = t.emHeightAscent ?? t.fontBoundingBoxAscent ?? font.size * 0.8;
+        const descent = t.emHeightDescent ?? t.fontBoundingBoxDescent ?? font.size * 0.2;
+        m = { ascent: Number.isFinite(ascent) ? ascent : font.size * 0.8, descent: Number.isFinite(descent) ? descent : font.size * 0.2 };
+        metrics.set(key, m);
+      }
+      return m;
+    },
+    measure(text, font) {
+      const key = `${cssFont(font)}|${text}`;
+      let w = widths.get(key);
+      if (!w) {
+        ctx.font = cssFont(font);
+        w = [0];
+        for (let i = 1; i <= text.length; i++) w.push(ctx.measureText(text.slice(0, i)).width);
+        if (widths.size > 2e3) widths.clear();
+        widths.set(key, w);
+      }
+      return w;
+    },
+    draw(target, text, font, x, y) {
+      target.font = cssFont(font);
+      target.textBaseline = "alphabetic";
+      target.textAlign = "left";
+      target.fillText(text, x, y);
+    },
+    families() {
+      const out = /* @__PURE__ */ new Set(["sans-serif", "serif", "monospace"]);
+      const fonts = typeof document !== "undefined" ? document.fonts : void 0;
+      if (fonts && typeof fonts.forEach === "function") fonts.forEach((f) => out.add(f.family.replace(/^["']|["']$/g, "")));
+      return [...out];
+    }
+  };
+}
+function createOutlineTextShaper(fonts, options = {}) {
+  if (!fonts.length) throw new Error("createOutlineTextShaper needs at least one font.");
+  const entries = fonts.map((f) => {
+    const e = "face" in f ? f : { face: f };
+    const names = e.face.names;
+    const family = e.family ?? names?.fontFamily?.en ?? Object.values(names?.fontFamily ?? {})[0] ?? "Font";
+    const weight = e.weight ?? e.face.tables?.os2?.usWeightClass ?? 400;
+    const italic = e.italic ?? Boolean((e.face.tables?.os2?.fsSelection ?? 0) & 1);
+    const postScript = names?.postScriptName?.en ?? Object.values(names?.postScriptName ?? {})[0];
+    return { face: e.face, family, key: family.toLowerCase(), weight, italic, postScript };
+  });
+  const fallbackKey = (options.fallback ?? entries[0].family).toLowerCase();
+  const pick2 = (font) => {
+    if (font.postScriptName) {
+      const exact = entries.find((e) => e.postScript === font.postScriptName);
+      if (exact) return { entry: exact, available: true };
+    }
+    const key = font.family.trim().toLowerCase();
+    let pool = entries.filter((e) => e.key === key);
+    const available = pool.length > 0;
+    if (!available) pool = entries.filter((e) => e.key === fallbackKey);
+    if (!pool.length) pool = entries;
+    const styled = pool.filter((e) => e.italic === font.italic);
+    const list = styled.length ? styled : pool;
+    const entry = list.reduce((best, e) => Math.abs(e.weight - font.weight) < Math.abs(best.weight - font.weight) ? e : best);
+    return { entry, available };
+  };
+  const toPath = (cmds) => {
+    const out = [];
+    for (const c of cmds) {
+      if (c.type === "M" || c.type === "L") out.push({ type: c.type, x: c.x, y: c.y });
+      else if (c.type === "C") out.push({ type: "C", x1: c.x1, y1: c.y1, x2: c.x2, y2: c.y2, x: c.x, y: c.y });
+      else if (c.type === "Q") out.push({ type: "Q", x1: c.x1, y1: c.y1, x: c.x, y: c.y });
+      else out.push({ type: "Z" });
+    }
+    return out;
+  };
+  return {
+    id: options.id ?? `outline:${entries.map((e) => `${e.family}/${e.weight}${e.italic ? "i" : ""}`).join(",")}`,
+    resolve(font) {
+      const { entry, available } = pick2(font);
+      return { family: entry.family, available };
+    },
+    metrics(font) {
+      const { face } = pick2(font).entry;
+      const k = font.size / face.unitsPerEm;
+      return { ascent: face.ascender * k, descent: -face.descender * k };
+    },
+    measure(text, font) {
+      const { face } = pick2(font).entry;
+      const out = [0];
+      for (let i = 1; i <= text.length; i++) out.push(face.getAdvanceWidth(text.slice(0, i), font.size, { kerning: true }));
+      return out;
+    },
+    outline(text, font, x, y) {
+      return toPath(pick2(font).entry.face.getPath(text, x, y, font.size, { kerning: true }).commands);
+    },
+    families() {
+      return [...new Set(entries.map((e) => e.family))];
+    }
+  };
+}
+
 // src/image-editor/free-transform.ts
 var FREE_TRANSFORM_CONTENTS = ["auto", "layer", "selection", "selection-copy", "selection-outline"];
 var fail = (message) => {
@@ -2512,7 +2703,7 @@ var FreeTransformSession = class {
     }
     const targetId = init.layerId ?? host.activeLayerId();
     const target = targetId && content !== "selection-outline" ? findLayer(host.layers(), targetId)?.layer : void 0;
-    const smartTarget = (target?.type === "smart" || target?.type === "shape") && (init.channel ?? (target.id === host.activeLayerId() ? host.activeTarget() : "pixels")) !== "mask";
+    const smartTarget = (target?.type === "smart" || target?.type === "shape" || target?.type === "type") && (init.channel ?? (target.id === host.activeLayerId() ? host.activeTarget() : "pixels")) !== "mask";
     if (content === "auto") content = selected && !smartTarget ? "selection" : "layer";
     this.content = content;
     if (content !== "layer" && !selected) fail(`Nothing is selected; ${content} needs a selection. Select first, or use content layer.`);
@@ -2539,7 +2730,7 @@ var FreeTransformSession = class {
       const linked = mask?.linked !== false;
       const maskAlone = channel === "mask" && (!linked || layer.type !== "pixel");
       if (channel === "mask" && !mask) fail(layer.mask?.source ? `Layer "${layer.name || id}" has a depth mask, which is generated, not transformed.` : `Layer "${layer.name || id}" has no mask to transform; add one with add_layer_mask, or transform its pixels.`);
-      if (!maskAlone && layer.type !== "pixel" && layer.type !== "smart" && layer.type !== "shape") fail(`Layer "${layer.name || id}" is a ${layer.type} layer; Free Transform works on pixel, shape and smart object layers, layer masks (channel mask) and selections.`);
+      if (!maskAlone && layer.type !== "pixel" && layer.type !== "smart" && layer.type !== "shape" && layer.type !== "type") fail(`Layer "${layer.name || id}" is a ${layer.type} layer; Free Transform works on pixel, shape, type and smart object layers, layer masks (channel mask) and selections.`);
       if (!layer.visible && content !== "selection-copy") fail(`Layer "${layer.name || id}" is hidden; show it before you transform it.`);
       if (content !== "selection-copy") {
         requireUnlocked(layer, "position", "transform it");
@@ -2561,6 +2752,26 @@ var FreeTransformSession = class {
         this.shown = this.startLayers;
         return;
       }
+      if (layer.type === "type" && !maskAlone) {
+        if (content !== "layer") fail(`Layer "${layer.name || id}" is a type layer, which transforms as a whole; use content layer (or rasterize it to transform part of it).`);
+        const frame = typeFrame(layer, host.textEnv().shaper);
+        const m = textMatrix(layer);
+        const at = (x, y) => ({ x: m[0] * x + m[2] * y + m[4], y: m[1] * x + m[3] * y + m[5] });
+        this.typeTarget = layer;
+        this.typeLayer = true;
+        this.box = frame;
+        this.startGeometry = {
+          box: frame,
+          corners: [at(frame.x, frame.y), at(frame.x + frame.width, frame.y), at(frame.x + frame.width, frame.y + frame.height), at(frame.x, frame.y + frame.height)],
+          warp: null
+        };
+        this.geometryValue = this.startGeometry;
+        this.startInterp = this.interp;
+        this.moves = mask && linked ? ["pixels", "mask"] : ["pixels"];
+        if (mask && linked) this.parts.push({ what: "mask", offset: o, moving: mask.surface, base: null, reduced: /* @__PURE__ */ new Map() });
+        this.shown = this.startLayers;
+        return;
+      }
       if (layer.type === "shape" && !maskAlone) {
         if (content !== "layer") fail(`Layer "${layer.name || id}" is a shape layer, which transforms as a whole; use content layer (or rasterize it to transform part of it).`);
         const g = shapeGeometryBounds(layer);
@@ -2663,6 +2874,9 @@ var FreeTransformSession = class {
   /** True when the layer is a shape layer (the transform maps its paths and renders them again). */
   shapeLayer = false;
   shape = null;
+  /** True when the layer is a type layer (the transform sets its text matrix; affine only). */
+  typeLayer = false;
+  typeTarget = null;
   geometryValue;
   smart = null;
   smartReduced = /* @__PURE__ */ new Map();
@@ -2711,6 +2925,9 @@ var FreeTransformSession = class {
     };
     if (next.corners.length !== 4 || !next.corners.every((p) => Number.isFinite(p.x) && Number.isFinite(p.y))) fail("corners must be four finite points: top-left, top-right, bottom-right, bottom-left.");
     if (!transformMap(next)) fail("These corners fold the frame over itself or through the horizon; keep the quad convex.");
+    if (this.typeTarget && (hasWarp(next) || !matrixFromCorners(next.box, next.corners))) {
+      fail("Type layers take scale, rotate, skew and flips only (the corners must stay a parallelogram, no warp); rasterize the layer (rasterize_layer) for distort, perspective or warp.");
+    }
     this.geometryValue = next;
     if (preview !== false) this.render(preview);
     return next;
@@ -2718,6 +2935,7 @@ var FreeTransformSession = class {
   /** Resamples every part for the current geometry and shows it (or returns it, for commit). */
   resample(final, preview = {}) {
     if (this.smart) return { layers: this.resampleSmart(final, preview), selection: this.startSelection };
+    if (this.typeTarget) return { layers: this.resampleType(), selection: this.startSelection };
     const g = this.geometryValue;
     const identity = isIdentityTransform(g);
     const warp = hasWarp(g);
@@ -2798,6 +3016,27 @@ var FreeTransformSession = class {
     const surface = renderShape(moved, this.host.shapeEnv(), final ? {} : { clip: preview.clip });
     return mapLayer(this.startLayers, layer.id, () => ({ ...moved, surface }));
   }
+  /**
+   * A type layer with its text matrix set from the corners (affine only: scale, rotate, skew and
+   * flips), drawn again; a linked mask follows by the change's homography.
+   */
+  resampleType() {
+    const layer = this.typeTarget;
+    const g = this.geometryValue;
+    if (hasWarp(g)) fail("Type layers cannot be warped here; rasterize the layer first (rasterize_layer), or transform it with scale, rotate and skew.");
+    const m = matrixFromCorners(g.box, g.corners);
+    if (!m) fail("Type layers take scale, rotate, skew and flips only (the corners must stay a parallelogram); rasterize the layer for distort or perspective.");
+    const next = { ...layer, transform: m };
+    delete next.annotation;
+    let layers = mapLayer(this.startLayers, layer.id, () => rerenderText(next, this.host.textEnv()));
+    const change = multiplyHomographies(homographyFromAffine(invertMatrix(textMatrix(layer))), homographyFromAffine(m));
+    for (const part of this.parts) {
+      if (part.what !== "mask") continue;
+      const surface = transformSurface(part.moving, change, { interpolation: this.interp === "nearest" ? "nearest" : "bilinear" });
+      layers = mapLayer(layers, layer.id, (l) => ({ ...l, mask: { ...l.mask, surface } }));
+    }
+    return layers;
+  }
   /** A smart object re-rendered from its contents for the current geometry (previews leave the smart filters out). */
   resampleSmart(final, preview) {
     const layer = this.smart;
@@ -2821,7 +3060,7 @@ var FreeTransformSession = class {
   /** Whether the geometry (or the interpolation of a smart object) differs from where it started. */
   isChanged() {
     const g = this.geometryValue;
-    if (!this.smart) return !isIdentityTransform(g);
+    if (!this.smart && !this.typeTarget) return !isIdentityTransform(g);
     const a = this.startGeometry;
     const same = g.corners.every((c, i) => Math.abs(c.x - a.corners[i].x) < 1e-9 && Math.abs(c.y - a.corners[i].y) < 1e-9);
     const warp = (w, box) => w && hasWarp({ box, corners: a.corners, warp: w }) ? JSON.stringify(w) : "";
@@ -2858,7 +3097,7 @@ var FreeTransformSession = class {
     const id = this.copyId ?? this.layerId;
     const layer = id ? findLayer(layers, id)?.layer : void 0;
     if (this.moves.includes("pixels") && layer?.type === "pixel") bounds = toDoc(contentBounds(this.host.pixelsOf(layer)), layer.offset);
-    else if (this.moves.includes("pixels") && (layer?.type === "smart" || layer?.type === "shape")) bounds = contentBounds(layer.surface);
+    else if (this.moves.includes("pixels") && (layer?.type === "smart" || layer?.type === "shape" || layer?.type === "type")) bounds = contentBounds(layer.surface);
     else if (this.moves.includes("mask") && layer?.mask) bounds = toDoc(contentBounds(layer.mask.surface), layer.type === "pixel" ? layer.offset : { x: 0, y: 0 });
     else if (this.moves.includes("selection")) bounds = selection?.bounds ? { ...selection.bounds } : null;
     return {
@@ -3112,6 +3351,7 @@ var ImageEditorController = class {
   compositor = new LayerCompositor();
   constructor(options = {}) {
     this.maxHistoryDepth = options.maxHistoryDepth ?? 50;
+    if (options.textShaper !== void 0) this.textShaperValue = options.textShaper;
     this.maxHistoryBytes = options.maxHistoryBytes ?? 512 * 1024 * 1024;
     this.onStateChange = options.onStateChange;
     this.renderer = new ImageEditorRenderer();
@@ -3818,6 +4058,21 @@ var ImageEditorController = class {
       const b = shapeGeometryBounds(moved) ?? { x: 0, y: 0 };
       return { offset: { x: Math.round(b.x), y: Math.round(b.y) }, bounds: this.getLayerBounds(id) };
     }
+    if (layer.type === "type") {
+      const m = layer.transform ?? [1, 0, 0, 1, 0, 0];
+      const dx = move.x !== void 0 ? move.x - m[4] : move.dx ?? 0;
+      const dy = move.y !== void 0 ? move.y - m[5] : move.dy ?? 0;
+      if (!Number.isFinite(dx) || !Number.isFinite(dy)) throw new LayerOperationError("x and y must be numbers.");
+      requireUnlocked(layer, "position", "move it");
+      const mx = Math.round(dx);
+      const my = Math.round(dy);
+      let moved = { ...transformTypeLayer(layer, [1, 0, 0, 1, mx, my]), surface: translateSurface(layer.surface, mx, my) };
+      const mask = layer.mask;
+      if (mask && mask.linked !== false && !mask.source && (mx || my)) moved = { ...moved, mask: { ...mask, surface: translateSurface(mask.surface, mx, my) } };
+      this.commitLayers(mapLayer(this.state.layers, id, () => moved), void 0, commitToHistory);
+      const t = moved.transform ?? [1, 0, 0, 1, 0, 0];
+      return { offset: { x: Math.round(t[4]), y: Math.round(t[5]) }, bounds: this.getLayerBounds(id) };
+    }
     const current = layer.type === "pixel" ? layer.offset : { x: 0, y: 0 };
     const x = move.x ?? current.x + (move.dx ?? 0);
     const y = move.y ?? current.y + (move.dy ?? 0);
@@ -3966,6 +4221,7 @@ var ImageEditorController = class {
       canvas: () => this.naturalSize,
       pixelsOf: (layer) => this.surfaceOf(layer),
       shapeEnv: () => this.shapeEnv(),
+      textEnv: () => this.textEnv(),
       capture: () => this.captureHistoryEntry(),
       show: (layers, selection, active) => {
         this.state.layers = layers;
@@ -4066,7 +4322,7 @@ var ImageEditorController = class {
     if (turn !== 90 && turn !== -90 && turn !== 180) throw new LayerOperationError(`turn must be 90, -90 or 180, got ${String(turn)}.`);
     const session = this.beginFreeTransform({ interpolation: "nearest", ...init });
     try {
-      const b = session.smartObject ? transformedBox(session.startGeometry) ?? session.box : session.box;
+      const b = session.smartObject || session.typeLayer ? transformedBox(session.startGeometry) ?? session.box : session.box;
       const cx = b.x + b.width / 2;
       const cy = b.y + b.height / 2;
       const ox = turn === 180 ? 0 : Math.round(cx - b.height / 2) - (cx - b.height / 2);
@@ -4786,6 +5042,7 @@ var ImageEditorController = class {
     } else {
       if (layer.type === "smart") throw new LayerOperationError(`Layer "${layer.name || id}" is a smart object; its pixels come from its contents. Rasterize it (rasterize_smart_object), edit its contents (edit_smart_object_contents), or ${action} on its mask or filter mask.`);
       if (layer.type === "shape") throw new LayerOperationError(`Layer "${layer.name || id}" is a shape layer; its pixels are drawn from its paths. Rasterize it first (rasterize_layer), or ${action} on its mask (channel mask).`);
+      if (layer.type === "type") throw new LayerOperationError(`Layer "${layer.name || id}" is a type layer; its pixels are drawn from its text. Rasterize it first (rasterize_layer), or ${action} on its mask (channel mask).`);
       if (layer.type !== "pixel") throw new LayerOperationError(`Layer "${layer.name || id}" is a ${layer.type} layer; ${action} on a pixel layer, or on this layer's mask (channel mask).`);
       requireUnlocked(layer, "pixels", action);
     }
@@ -5491,7 +5748,11 @@ var ImageEditorController = class {
   // --- Annotations & Layers ---
   /** The layer showing annotation `id`: an annotation layer, or a shape layer migrated from it. */
   annotationLayer(id) {
-    return flattenLayers(this.state.layers).find((l) => (l.type === "annotation" || l.type === "shape") && annotationOfLayer(l)?.id === id);
+    return flattenLayers(this.state.layers).find((l) => (l.type === "annotation" || l.type === "shape" || l.type === "type") && annotationOfLayer(l)?.id === id);
+  }
+  /** What migrating an annotation needs: the canvas size, patterns and the text shaper. */
+  annotationEnv() {
+    return { ...this.shapeEnv(), ...this.textEnv() };
   }
   /**
    * Adds an annotation as its own layer (top of the stack unless `aboveId` is given). Pen,
@@ -5503,7 +5764,7 @@ var ImageEditorController = class {
     this.recordHistory();
     const id = `ann_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`;
     const fullAnnotation = { ...annotation, id };
-    const layer = annotationLayerFor(fullAnnotation, this.shapeEnv());
+    const layer = annotationLayerFor(fullAnnotation, this.annotationEnv());
     const loc = placement.aboveId ? findLayer(this.state.layers, placement.aboveId) : null;
     this.state.layers = loc ? insertLayer(this.state.layers, layer, loc.parent?.id ?? null, loc.index + 1) : insertLayer(this.state.layers, layer, null);
     this.state.selectedAnnotationId = id;
@@ -5523,24 +5784,14 @@ var ImageEditorController = class {
     }
     this.notify();
   }
-  /** `layer` (an annotation or migrated shape layer) showing `annotation` instead, keeping its other properties. */
+  /** `layer` (an annotation, or a shape or type layer migrated from one) showing `annotation` instead, keeping its other properties. */
   layerForAnnotation(layer, annotation, name) {
-    const shape = shapeFromAnnotation(annotation);
-    const { annotation: _old, ...props } = layer;
-    const blend = annotation.blend && annotation.blend !== "normal" ? annotation.blend : "normal";
-    if (shape) {
-      const base = { ...props, name, blend: layer.type === "annotation" && layer.blend !== "normal" ? layer.blend : blend };
-      if (layer.type === "shape") {
-        const fresh = rerenderShape({ ...base, components: shape.components, fill: shape.fill, stroke: shape.stroke }, this.shapeEnv());
-        delete fresh.fillRule;
-        return { ...fresh, annotation };
-      }
-      const created = createShapeLayer({ ...shape, name, blend: base.blend }, this.shapeEnv(), layer.id);
-      const { type: _t2, ...rest2 } = base;
-      return { ...rest2, ...created, annotation };
-    }
-    const { type: _t, components: _c, fill: _f, stroke: _s, surface: _sf, offset: _o, fillRule: _r, fillOpacity: _fo, psd: _p, ...rest } = props;
-    return { ...rest, type: "annotation", name, blend: layer.type === "shape" ? "normal" : layer.blend, annotation };
+    const fresh = annotationLayerFor(annotation, this.annotationEnv());
+    const keep = { id: layer.id, visible: layer.visible, opacity: layer.opacity };
+    for (const k of ["clipped", "mask", "locks", "effects"]) if (layer[k] !== void 0) keep[k] = layer[k];
+    if (fresh.type !== "annotation" && layer.type !== "annotation" && layer.fillOpacity !== void 0) keep.fillOpacity = layer.fillOpacity;
+    const blend = fresh.type === "annotation" ? layer.type === "annotation" ? layer.blend : "normal" : layer.type === "annotation" && layer.blend !== "normal" ? layer.blend : fresh.blend;
+    return { ...fresh, ...keep, name, blend };
   }
   removeAnnotation(id) {
     this.recordHistory();
@@ -5555,7 +5806,7 @@ var ImageEditorController = class {
   clearAnnotations() {
     this.recordHistory();
     let layers = this.state.layers;
-    for (const l of flattenLayers(layers)) if (l.type === "annotation" || l.type === "shape" && l.annotation) layers = mapLayer(layers, l.id, () => null);
+    for (const l of flattenLayers(layers)) if (l.type === "annotation" || (l.type === "shape" || l.type === "type") && l.annotation) layers = mapLayer(layers, l.id, () => null);
     this.state.layers = layers;
     this.state.selectedAnnotationId = null;
     this.notify();
@@ -5794,6 +6045,233 @@ var ImageEditorController = class {
     this.commitLayers(setLayerMask(this.state.layers, target.id, { surface, defaultValue: 0 }));
     return target.id;
   }
+  // --- Type layers ---
+  textShaperValue;
+  /** The shaper that lays out and draws type layers (`null` when there is none here). */
+  getTextShaper() {
+    if (this.textShaperValue === void 0) this.textShaperValue = createCanvasTextShaper({ createCanvas: (w, h) => this.renderer.createCanvas(w, h) });
+    return this.textShaperValue;
+  }
+  /** Sets the text shaper (fonts) type layers lay out and draw with; existing layers redraw on their next edit. */
+  setTextShaper(shaper) {
+    this.textShaperValue = shaper;
+    this.notify();
+  }
+  /** What type layers lay out and draw with. */
+  textEnv() {
+    return { ...this.naturalSize, shaper: this.getTextShaper(), createCanvas: (w, h) => this.renderer.createCanvas(w, h) };
+  }
+  /** Font families the shaper offers (generic families at least). */
+  listFonts() {
+    return this.getTextShaper()?.families?.() ?? ["sans-serif", "serif", "monospace"];
+  }
+  typeInfo(id) {
+    const layer = requireTypeLayer(this.state.layers, id);
+    const ranges = (runs) => {
+      let at = 0;
+      return runs.map((r) => {
+        const out = { start: at, end: at + r.length, style: JSON.parse(JSON.stringify(r.style)) };
+        at += r.length;
+        return out;
+      });
+    };
+    const shaper = this.getTextShaper();
+    let lines = [];
+    let missing = layer.missingFonts ?? [];
+    if (shaper) {
+      const layout = layoutText(layer, shaper);
+      const r = (n) => Math.round(n * 1e3) / 1e3;
+      lines = layout.lines.map((l) => ({ start: l.start, end: l.end, baseline: r(l.baseline), width: r(l.width) }));
+      if (layer.rendering === "stored") missing = layout.missingFonts;
+    }
+    const info = {
+      id: layer.id,
+      name: layer.name,
+      text: layer.text,
+      runs: ranges(layer.runs),
+      paragraphs: ranges(layer.paragraphs),
+      frame: { ...layer.frame },
+      transform: [...layer.transform ?? [1, 0, 0, 1, 0, 0]],
+      lines,
+      bounds: this.getLayerBounds(id),
+      missingFonts: [...missing],
+      rendering: layer.rendering === "stored" ? "stored" : "live"
+    };
+    if (layer.annotation) info.annotationId = layer.annotation.id;
+    return info;
+  }
+  /** A type layer's text, runs, paragraphs, frame, lines and bounds. */
+  getTextLayer(id) {
+    return this.typeInfo(id);
+  }
+  /**
+   * Adds a type layer (one undo step) and makes it active: point text at `x`, `y`, or paragraph
+   * text wrapped in `box`. Refused without a text shaper. Returns its id.
+   */
+  addTextLayer(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 ?? {});
+    const paragraph = patchParagraphStyle({}, init.paragraph ?? {});
+    let frame = { kind: "point" };
+    if (init.box) {
+      const { width, height } = init.box;
+      if (!(Number.isFinite(width) && width >= 1 && Number.isFinite(height) && height >= 1)) throw new LayerOperationError("box.width and box.height must be at least 1 pixel.");
+      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;
+  }
+  /**
+   * Replaces text [start, end) (default all of it) with `text`; inserted text takes the style at
+   * `start`. One undo step unless `commitToHistory` is false (typing). Returns the layer.
+   */
+  setText(id, text, range = {}, commitToHistory = true) {
+    const layer = requireTypeLayer(this.state.layers, id);
+    const insert = normalizeText(text);
+    const [start, end] = textRange(layer.text, range.start, range.end);
+    const { layers } = updateTypeLayer(this.state.layers, id, (l) => replaceTextRange(l, start, end, insert), this.textEnv(), "edit its text");
+    this.commitLayers(layers, void 0, commitToHistory);
+    return this.typeInfo(id);
+  }
+  /** Sets character style fields over [start, end) (default all), one undo step. Returns the layer. */
+  setTextStyle(id, style, range = {}, commitToHistory = true) {
+    const layer = requireTypeLayer(this.state.layers, id);
+    const [start, end] = textRange(layer.text, range.start, range.end);
+    if (!Object.keys(style).length) throw new LayerOperationError("Give at least one style field to set.");
+    patchTextStyle(DEFAULT_TEXT_STYLE, style);
+    const { layers } = updateTypeLayer(
+      this.state.layers,
+      id,
+      (l) => {
+        if (start === end) {
+          if (l.text.length) throw new LayerOperationError("The range is empty; give start < end (or leave both out for the whole text).");
+          return { runs: [{ length: 0, style: patchTextStyle(styleAt(l.runs, 0, DEFAULT_TEXT_STYLE), style) }] };
+        }
+        return { runs: restyleRange(l.runs, start, end, (s) => patchTextStyle(s, style)) };
+      },
+      this.textEnv(),
+      "restyle its text"
+    );
+    this.commitLayers(layers, void 0, commitToHistory);
+    return this.typeInfo(id);
+  }
+  /** Sets paragraph style fields on every paragraph that [start, end) touches (default all), one undo step. */
+  setParagraphStyle(id, style, range = {}, commitToHistory = true) {
+    const layer = requireTypeLayer(this.state.layers, id);
+    const [start, end] = textRange(layer.text, range.start, range.end);
+    if (!Object.keys(style).length) throw new LayerOperationError("Give at least one paragraph field to set.");
+    patchParagraphStyle({}, style);
+    const { layers } = updateTypeLayer(
+      this.state.layers,
+      id,
+      (l) => {
+        let at = 0;
+        const paragraphs = l.paragraphs.map((p) => {
+          const a = at;
+          at += p.length;
+          const touches = a < end && at > start || start === end && start >= a && (start < at || at === l.text.length);
+          return touches || !l.text.length ? { length: p.length, style: patchParagraphStyle(p.style, style) } : p;
+        });
+        return { paragraphs };
+      },
+      this.textEnv(),
+      "restyle its paragraphs"
+    );
+    this.commitLayers(layers, void 0, commitToHistory);
+    return this.typeInfo(id);
+  }
+  /**
+   * Point text ↔ paragraph text: `{ kind: 'box', width, height }` wraps the text in a box (its
+   * top-left where the first line's top-left is now), `{ kind: 'point' }` sets it on one line per
+   * paragraph. Also resizes a box. One undo step.
+   */
+  setTextFrame(id, frame, commitToHistory = true) {
+    const layer = requireTypeLayer(this.state.layers, id);
+    if (frame.kind === "box" && !(Number.isFinite(frame.width) && frame.width >= 1 && Number.isFinite(frame.height) && frame.height >= 1)) throw new LayerOperationError("width and height must be at least 1 pixel.");
+    if (frame.kind !== "box" && frame.kind !== "point") throw new LayerOperationError("kind must be point or box.");
+    const shaper = this.getTextShaper();
+    const { layers } = updateTypeLayer(
+      this.state.layers,
+      id,
+      (l) => {
+        if (frame.kind === "box" && l.frame.kind === "box") return { frame: { kind: "box", width: frame.width, height: frame.height } };
+        if (!shaper) throw new LayerOperationError("Changing between point and paragraph text needs a text shaper to measure the text.");
+        const lines = layoutText(l, shaper).lines;
+        const first = lines[0];
+        const dx = frame.kind === "box" ? first ? first.x : 0 : 0;
+        const dy = frame.kind === "box" ? first ? first.baseline - first.ascent : 0 : first ? first.baseline : 0;
+        const m = textMatrix(l);
+        const shifted = [m[0], m[1], m[2], m[3], m[0] * dx + m[2] * dy + m[4], m[1] * dx + m[3] * dy + m[5]];
+        const nextFrame = frame.kind === "box" ? { kind: "box", width: frame.width, height: frame.height } : { kind: "point" };
+        return { frame: nextFrame, transform: shifted };
+      },
+      this.textEnv(),
+      "change its frame"
+    );
+    this.commitLayers(layers, void 0, commitToHistory);
+    return this.typeInfo(id);
+  }
+  /**
+   * Convert to Shape: the text's glyph outlines become a shape layer with the same id, name and
+   * layer properties (needs a shaper that gives outlines). The fill is the first run's colour;
+   * `warnings` says when other colours were dropped. One undo step.
+   */
+  convertTextToShape(id) {
+    const layer = requireTypeLayer(this.state.layers, id);
+    requireUnlocked(layer, "all", "convert it");
+    const shaper = this.getTextShaper();
+    if (!shaper) throw new LayerOperationError("Convert to Shape needs a text shaper that gives glyph outlines; none is set here.");
+    const parts = textOutlines(layer, shaper);
+    const subpaths = parts.flatMap((p) => bezierToSubpaths(p.path));
+    if (!subpaths.length) throw new LayerOperationError("The text draws nothing (it is empty or only spaces), so there is no shape to make.");
+    const warnings = [];
+    const colors = new Set(layer.runs.filter((r) => r.length > 0).map((r) => `${r.style.color}/${r.style.opacity ?? 1}`));
+    if (colors.size > 1) warnings.push("The text had several colours; the shape takes the first one.");
+    const missing = layoutText(layer, shaper).missingFonts;
+    if (missing.length) warnings.push(`Missing fonts were drawn with a fallback: ${missing.join(", ")}.`);
+    const first = layer.runs.find((r) => r.length > 0)?.style ?? DEFAULT_TEXT_STYLE;
+    const fill = first.opacity !== void 0 && first.opacity !== 1 ? { type: "color", color: first.color, opacity: first.opacity } : { type: "color", color: first.color };
+    const shape = createShapeLayer({ components: [{ op: "combine", subpaths }], fill, stroke: null, name: layer.name }, this.shapeEnv(), layer.id);
+    const keep = { visible: layer.visible, opacity: layer.opacity, blend: layer.blend };
+    for (const k of ["clipped", "mask", "locks", "effects", "fillOpacity"]) if (layer[k] !== void 0) keep[k] = layer[k];
+    this.commitLayers(mapLayer(this.state.layers, id, () => ({ ...shape, ...keep })));
+    return { layerId: id, warnings };
+  }
+  /** The layout of a type layer (lines, characters, bounds in text space), or `null` without a shaper. */
+  getTextLayout(id) {
+    const layer = requireTypeLayer(this.state.layers, id);
+    const shaper = this.getTextShaper();
+    return shaper ? layoutText(layer, shaper) : null;
+  }
+  /** The text index nearest a document point (for clicks on a type layer). */
+  textIndexAt(id, point) {
+    const layer = requireTypeLayer(this.state.layers, id);
+    const layout = this.getTextLayout(id);
+    return layout ? textIndexAt(layout, toTextSpace(layer, point)) : layer.text.length;
+  }
+  /** The caret at text index `index` as a document-space segment (top to bottom), for drawing it. */
+  textCaret(id, index) {
+    const layer = requireTypeLayer(this.state.layers, id);
+    const layout = this.getTextLayout(id);
+    if (!layout) return null;
+    const c = caretAt(layout, Math.max(0, Math.min(layer.text.length, index)));
+    const m = textMatrix(layer);
+    const at = (x, y) => ({ x: m[0] * x + m[2] * y + m[4], y: m[1] * x + m[3] * y + m[5] });
+    return { top: at(c.x, c.top), bottom: at(c.x, c.bottom), line: c.line };
+  }
   // --- Shape layers ---
   /** What shape rendering needs: the canvas size and the document's patterns. */
   shapeEnv() {
@@ -5970,11 +6448,11 @@ var ImageEditorController = class {
       }
     } else if (layer.type === "smart") {
       return this.rasterizeSmartObject(id);
-    } else if (layer.type === "shape") {
-      next = shapeAsPixelLayer(layer);
+    } else if (layer.type === "shape" || layer.type === "type") {
+      next = layer.type === "shape" ? shapeAsPixelLayer(layer) : typeAsPixelLayer(layer);
       if (this.state.selectedAnnotationId && this.state.selectedAnnotationId === layer.annotation?.id) this.state.selectedAnnotationId = null;
     } else {
-      throw new LayerOperationError(`Only shape and annotation layers, smart objects and pixel layers with filters rasterize; "${layer.name || id}" is a ${layer.type} layer. Merge it down or flatten instead.`);
+      throw new LayerOperationError(`Only shape, type and annotation layers, smart objects and pixel layers with filters rasterize; "${layer.name || id}" is a ${layer.type} layer. Merge it down or flatten instead.`);
     }
     this.commitLayers(mapLayer(this.state.layers, id, () => next));
     return id;
@@ -6099,9 +6577,9 @@ var ImageEditorController = class {
         if (mask2) out2.mask = mask2;
         return out2;
       }
-      if (layer.type === "shape") {
-        add2("Shape layers were written as pixel layers", layer.name);
-        const out2 = shapeAsPixelLayer(layer);
+      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);
         const mask2 = bakeMask(layer);
         if (mask2) out2.mask = mask2;
         else delete out2.mask;
@@ -6203,7 +6681,7 @@ var ImageEditorController = class {
     const bg = developTarget(layers, null);
     if (bg && bg.source !== "document") layers = mapLayer(layers, bg.id, () => ({ ...bg, source: "document" }));
     if (clearAnnotations) {
-      for (const l of flattenLayers(layers)) if (l.type === "annotation" || l.type === "shape" && l.annotation) layers = mapLayer(layers, l.id, () => null);
+      for (const l of flattenLayers(layers)) if (l.type === "annotation" || (l.type === "shape" || l.type === "type") && l.annotation) layers = mapLayer(layers, l.id, () => null);
       this.state.selectedAnnotationId = null;
     }
     this.state.layers = layers;
@@ -6279,7 +6757,8 @@ var ImageEditorController = class {
         problems,
         smartContents: Array.isArray(data.smartContents) ? data.smartContents : [],
         canvas,
-        pattern: (pid) => storedPatterns.find((p) => p.id === pid) ?? null
+        pattern: (pid) => storedPatterns.find((p) => p.id === pid) ?? null,
+        text: this.textEnv()
       });
       this.lastLoadProblems = problems;
       s.crop = data.crop ? { ...data.crop } : null;
@@ -6482,7 +6961,7 @@ function collectStateTiles(layers, into) {
   for (const l of flattenLayers(layers)) {
     if (l.type === "pixel" && l.source !== "document") collectTiles(l.surface, into);
     if (l.mask && !l.mask.source) collectTiles(l.mask.surface, into);
-    if (l.type === "shape") collectTiles(l.surface, into);
+    if (l.type === "shape" || l.type === "type") collectTiles(l.surface, into);
     if (l.type === "smart") {
       collectTiles(l.surface, into);
       if (l.smartFilters?.mask) collectTiles(l.smartFilters.mask.surface, into);
@@ -6531,7 +7010,7 @@ function resizePixels(px2, width, height) {
 function withoutAnnotations(layers) {
   const out = [];
   for (const l of layers) {
-    if (l.type === "annotation" || l.type === "shape" && l.annotation) continue;
+    if (l.type === "annotation" || (l.type === "shape" || l.type === "type") && l.annotation) continue;
     out.push(l.type === "group" ? { ...l, children: withoutAnnotations(l.children) } : l);
   }
   return out;
@@ -6721,7 +7200,7 @@ function loadImageEditorDocument(input) {
   if (state.selection === void 0) delete state.selection;
   return { state, report: result.report, unknown: result.unknown };
 }
-var LAYER_TYPES = /* @__PURE__ */ new Set(["pixel", "adjustment", "group", "annotation", "smart", "shape"]);
+var LAYER_TYPES = /* @__PURE__ */ new Set(["pixel", "adjustment", "group", "annotation", "smart", "shape", "type"]);
 function cleanLayers(value, dropped) {
   const out = [];
   for (const raw of value) {
@@ -7781,6 +8260,18 @@ function describeLayer(layer, activeId, boundsOf) {
       };
       if (layer.annotation) out.annotation = { id: layer.annotation.id, type: layer.annotation.type };
       break;
+    case "type":
+      out.bounds = boundsOf(layer);
+      out.fillOpacity = round3(layer.fillOpacity ?? 1);
+      out.text = {
+        text: layer.text.length > 80 ? `${layer.text.slice(0, 80)}\u2026` : layer.text,
+        frame: layer.frame.kind,
+        runs: layer.runs.length,
+        rendering: layer.rendering === "stored" ? "stored" : "live",
+        missingFonts: layer.missingFonts ?? []
+      };
+      if (layer.annotation) out.annotation = { id: layer.annotation.id, type: layer.annotation.type };
+      break;
     case "smart":
       out.bounds = boundsOf(layer);
       out.fillOpacity = round3(layer.fillOpacity ?? 1);
@@ -7826,7 +8317,7 @@ function createImageLayerTools(controller) {
   const listLayers = {
     name: "list_layers",
     title: "List image layers",
-    description: "Returns the layer stack bottom to top as a tree: id, type (pixel, adjustment, group, shape, smart, annotation), name, document bounds (pixel, shape and smart layers), visible, opacity, fillOpacity, blend, clipped, locks, a mask summary, an effects summary (master switch, scale, effect ids and kinds; details from list_layer_effects), filters (pixel layers), kind and params (adjustment layers), a shape summary (component operations and kinds, fill and stroke paint types; details from get_shape_layer), children (groups) and which layer is active. Also returns the active layer id and target (pixels or mask) and the canvas size.",
+    description: "Returns the layer stack bottom to top as a tree: id, type (pixel, adjustment, group, shape, type, smart, annotation), name, document bounds (pixel, shape, type and smart layers), visible, opacity, fillOpacity, blend, clipped, locks, a mask summary, an effects summary (master switch, scale, effect ids and kinds; details from list_layer_effects), filters (pixel layers), kind and params (adjustment layers), a shape summary (component operations and kinds, fill and stroke paint types; details from get_shape_layer), a text summary (the text, point or box frame, run count, live or stored pixels, missing fonts; details from get_text_layer), children (groups) and which layer is active. Also returns the active layer id and target (pixels or mask) and the canvas size.",
     inputSchema: { type: "object", properties: {}, additionalProperties: false },
     annotations: { title: "List image layers", ...READ2 },
     handler: () => {
@@ -8170,7 +8661,7 @@ function createImageLayerTools(controller) {
   const rasterize = {
     name: "rasterize_layer",
     title: "Rasterize a layer",
-    description: "Rasterize Layer: turns a shape layer into a pixel layer holding what it shows now (same id, name, opacity, blend, fill, mask and effects; its paths are gone, so later transforms resample pixels), turns an annotation layer into a pixel layer (needs a browser), rasterizes a smart object, or bakes a pixel layer's filters (develop, blur) into its pixels. One undo step. Returns the layer.",
+    description: "Rasterize Layer: turns a shape or type layer into a pixel layer holding what it shows now (same id, name, opacity, blend, fill, mask and effects; its paths are gone, so later transforms resample pixels), turns an annotation layer into a pixel layer (needs a browser), rasterizes a smart object, or bakes a pixel layer's filters (develop, blur) into its pixels. One undo step. Returns the layer.",
     inputSchema: { type: "object", properties: { layerId: LAYER_ID2 }, required: ["layerId"], additionalProperties: false },
     annotations: { title: "Rasterize a layer", ...DESTRUCTIVE },
     handler: async ({ layerId }) => ({ layer: describe(await controller.rasterizeLayer(exists(layerId))) })
@@ -10019,6 +10510,176 @@ function createImageShapeTools(controller) {
   return [get, add2, update, setComponent, addComponent, removeComponent, merge];
 }
 
+// src/image-editor/type-tools.ts
+var READ9 = { readOnlyHint: true, destructiveHint: false, idempotentHint: true, openWorldHint: false };
+var WRITE8 = { readOnlyHint: false, destructiveHint: false, idempotentHint: false, openWorldHint: false };
+var WRITE_IDEMPOTENT6 = { readOnlyHint: false, destructiveHint: false, idempotentHint: true, openWorldHint: false };
+var DESTRUCTIVE7 = { readOnlyHint: false, destructiveHint: true, idempotentHint: false, openWorldHint: false };
+var LAYER_ID6 = { type: "string", description: "Type layer id from list_layers (type type) or add_text_layer." };
+var START = { type: "integer", minimum: 0, description: "Start of the range in UTF-16 code units, as get_text_layer counts them (default 0)." };
+var END = { type: "integer", minimum: 0, description: "End of the range, exclusive (default the end of the text)." };
+var STYLE = {
+  fontFamily: { type: "string", description: "Font family name (list_fonts shows what is available; a missing family falls back, with a warning)." },
+  fontWeight: { type: "integer", minimum: 1, maximum: 1e3, description: "Weight 100..900 (400 regular, 700 bold)." },
+  italic: { type: "boolean", description: "Italic." },
+  fontSize: { type: "number", minimum: 0.5, maximum: 5e3, description: "Size in document pixels." },
+  color: { type: "string", description: "Colour (#rrggbb, or a CSS colour; its alpha becomes opacity)." },
+  opacity: { type: ["number", "null"], minimum: 0, maximum: 1, description: "Text opacity 0..1 (null resets to 1)." },
+  tracking: { type: ["number", "null"], minimum: -1e3, maximum: 1e4, description: "Letter spacing in 1/1000 em (null resets to 0)." },
+  leading: { type: ["number", "null"], minimum: 0, maximum: 1e4, description: "Baseline-to-baseline distance in pixels (null = auto, the paragraph autoLeading \xD7 size)." },
+  baselineShift: { type: ["number", "null"], minimum: -5e3, maximum: 5e3, description: "Pixels; positive raises the text (null resets to 0)." },
+  underline: { type: "boolean", description: "Underline." },
+  strikethrough: { type: "boolean", description: "Strike through." }
+};
+var PARAGRAPH = {
+  align: { type: "string", enum: ["left", "center", "right", "justify"], description: "Alignment (justify stretches paragraph-box lines but the last)." },
+  autoLeading: { type: ["number", "null"], minimum: 0.1, maximum: 10, description: "Auto leading as a multiple of the font size (default 1.2)." },
+  firstLineIndent: { type: ["number", "null"], description: "First-line indent in pixels." },
+  startIndent: { type: ["number", "null"], description: "Left indent in pixels." },
+  endIndent: { type: ["number", "null"], description: "Right indent in pixels." },
+  spaceBefore: { type: ["number", "null"], description: "Space above the paragraph in pixels (not before the first)." },
+  spaceAfter: { type: ["number", "null"], description: "Space below the paragraph in pixels." }
+};
+function pick(args, keys) {
+  const out = {};
+  for (const k of keys) if (args[k] !== void 0) out[k] = args[k];
+  return out;
+}
+function createImageTypeTools(controller) {
+  const typeId = (id) => {
+    if (typeof id !== "string" || !id) throw new LayerOperationError("layerId is required (a type layer id from list_layers).");
+    requireTypeLayer(controller.getLayers(), id);
+    return id;
+  };
+  const layerSummary = (id) => {
+    const s = controller.getState();
+    const loc = findLayer(s.layers, id);
+    return loc ? { ...describeLayer(loc.layer, s.activeLayerId, (x) => controller.getLayerBounds(x.id)), parentId: loc.parent?.id ?? null, index: loc.index } : null;
+  };
+  const range = (args) => ({ start: args.start, end: args.end });
+  const listFonts = {
+    name: "list_fonts",
+    title: "List fonts",
+    description: "Returns the font families type layers can use here (generic families such as sans-serif always work). Changes nothing.",
+    inputSchema: { type: "object", properties: {}, additionalProperties: false },
+    annotations: { title: "List fonts", ...READ9 },
+    handler: () => ({ families: controller.listFonts(), shaper: controller.getTextShaper()?.id ?? null })
+  };
+  const get = {
+    name: "get_text_layer",
+    title: "Read a type layer",
+    description: "Returns a type layer\u2019s text, its character runs and paragraphs as [start, end) ranges in UTF-16 code units with their styles, the frame (point text, or a paragraph box with its size), the text-to-document transform, the laid-out lines (range, baseline, width), the rendered bounds, missing fonts and whether the pixels are live or stored from a file. Call before editing text you did not write, to get the ranges. Changes nothing.",
+    inputSchema: { type: "object", properties: { layerId: LAYER_ID6 }, required: ["layerId"], additionalProperties: false },
+    annotations: { title: "Read a type layer", ...READ9 },
+    handler: ({ layerId }) => controller.getTextLayer(typeId(layerId))
+  };
+  const add2 = {
+    name: "add_text_layer",
+    title: "Add a type layer",
+    description: "Adds a live type layer and makes it active: point text whose origin (x, y) is the first line\u2019s baseline at its alignment edge, or paragraph text wrapped in box {width, height} with its top-left at (x, y). Line breaks in text start paragraphs. Style and paragraph settings apply to the whole text (change ranges later with set_text_style). Default style: 24 px sans-serif in the foreground colour. One undo step. Returns the layer and the text layer, including missingFonts.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        text: { type: "string", description: "The text; \\n starts a new paragraph." },
+        x: { type: "number", description: "Document x of the origin, pixels." },
+        y: { type: "number", description: "Document y of the origin (point text: the first baseline), pixels." },
+        box: {
+          type: "object",
+          description: "Make it paragraph (area) text wrapped 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.", properties: STYLE, additionalProperties: false },
+        paragraph: { type: "object", description: "Paragraph style.", properties: PARAGRAPH, additionalProperties: false },
+        rotation: { type: "number", description: "Degrees clockwise about the origin (default 0)." },
+        name: { type: "string", description: "Layer name (default the start of the text)." },
+        opacity: { type: "number", minimum: 0, maximum: 1, description: "Layer opacity 0..1 (default 1)." },
+        blend: { type: "string", enum: BLEND_MODES.map((m) => m.id), description: "Blend mode (default normal)." },
+        aboveId: { type: "string", description: "Put the layer directly above this layer (default above the active layer)." },
+        belowId: { type: "string", description: "Put the layer directly below this layer." },
+        parentId: { type: "string", description: "Put the layer inside this group." },
+        index: { type: "integer", minimum: 0, description: "Position among the siblings, 0 = bottom." }
+      },
+      required: ["text", "x", "y"],
+      additionalProperties: false
+    },
+    annotations: { title: "Add a type layer", ...WRITE8 },
+    handler: (args) => {
+      const init = pick(args, ["text", "x", "y", "box", "style", "paragraph", "rotation", "name", "opacity", "blend", "aboveId", "belowId", "parentId", "index"]);
+      if (init.blend !== void 0) init.blend = init.blend;
+      const id = controller.addTextLayer(init);
+      return { layer: layerSummary(id), text: controller.getTextLayer(id) };
+    }
+  };
+  const setText = {
+    name: "set_text",
+    title: "Edit text",
+    description: "Replaces the text in [start, end) (default all of it) with text; inserted text takes the style of the character at start. Use start = end to insert. Returns the text layer with its new runs.",
+    inputSchema: { type: "object", properties: { layerId: LAYER_ID6, text: { type: "string", description: "Replacement text (\\n starts a paragraph; empty deletes the range)." }, start: START, end: END }, required: ["layerId", "text"], additionalProperties: false },
+    annotations: { title: "Edit text", ...WRITE8 },
+    handler: (args) => controller.setText(typeId(args.layerId), args.text, range(args))
+  };
+  const setStyle = {
+    name: "set_text_style",
+    title: "Style a range of text",
+    description: "Sets character style fields (font, weight, italic, size, colour, tracking, leading, baseline shift, underline, strike-through) over [start, end) of a type layer (default all of it); fields not given keep their values per run. Returns the text layer with its runs and missingFonts.",
+    inputSchema: { type: "object", properties: { layerId: LAYER_ID6, start: START, end: END, ...STYLE }, required: ["layerId"], additionalProperties: false },
+    annotations: { title: "Style a range of text", ...WRITE_IDEMPOTENT6 },
+    handler: (args) => {
+      const style = pick(args, Object.keys(STYLE));
+      if (!Object.keys(style).length) throw new LayerOperationError(`Give at least one style field: ${Object.keys(STYLE).join(", ")}.`);
+      return controller.setTextStyle(typeId(args.layerId), style, range(args));
+    }
+  };
+  const setParagraph = {
+    name: "set_paragraph_style",
+    title: "Style paragraphs",
+    description: "Sets paragraph fields (alignment, auto leading, indents, spacing) on every paragraph that [start, end) touches (default all). Returns the text layer.",
+    inputSchema: { type: "object", properties: { layerId: LAYER_ID6, start: START, end: END, ...PARAGRAPH }, required: ["layerId"], additionalProperties: false },
+    annotations: { title: "Style paragraphs", ...WRITE_IDEMPOTENT6 },
+    handler: (args) => {
+      const style = pick(args, Object.keys(PARAGRAPH));
+      if (!Object.keys(style).length) throw new LayerOperationError(`Give at least one paragraph field: ${Object.keys(PARAGRAPH).join(", ")}.`);
+      return controller.setParagraphStyle(typeId(args.layerId), style, range(args));
+    }
+  };
+  const setFrame = {
+    name: "set_text_frame",
+    title: "Point or paragraph text",
+    description: "Converts between point text (kind point: one line per paragraph) and paragraph text (kind box: wrapped in width \xD7 height pixels, its top-left where the first line starts), or resizes a paragraph box. The first line stays in place. Returns the text layer with its new lines.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        layerId: LAYER_ID6,
+        kind: { type: "string", enum: ["point", "box"], description: "point or box." },
+        width: { type: "number", minimum: 1, description: "Box width in pixels (kind box)." },
+        height: { type: "number", minimum: 1, description: "Box height in pixels (kind box)." }
+      },
+      required: ["layerId", "kind"],
+      additionalProperties: false
+    },
+    annotations: { title: "Point or paragraph text", ...WRITE_IDEMPOTENT6 },
+    handler: ({ layerId, kind, width, height }) => {
+      const id = typeId(layerId);
+      if (kind === "box" && (width === void 0 || height === void 0)) throw new LayerOperationError("kind box needs width and height in pixels.");
+      return controller.setTextFrame(id, kind === "box" ? { kind: "box", width, height } : { kind: "point" });
+    }
+  };
+  const toShape = {
+    name: "convert_text_to_shape",
+    title: "Convert text to a shape",
+    description: "Type \u203A Convert to Shape: the text\u2019s glyph outlines become a shape layer (same id, name, mask, effects, opacity, blend) that can be edited with the shape tools; the text is no longer editable. Needs a font shaper that gives outlines (the browser\u2019s canvas cannot). The fill is the first run\u2019s colour. One undo step. Returns the layer and warnings.",
+    inputSchema: { type: "object", properties: { layerId: LAYER_ID6 }, required: ["layerId"], additionalProperties: false },
+    annotations: { title: "Convert text to a shape", ...DESTRUCTIVE7 },
+    handler: ({ layerId }) => {
+      const { layerId: id, warnings } = controller.convertTextToShape(typeId(layerId));
+      return { layer: layerSummary(id), shape: controller.getShapeLayer(id), warnings };
+    }
+  };
+  return [listFonts, get, add2, setText, setStyle, setParagraph, setFrame, toShape];
+}
+
 // src/image-editor/tools.ts
 var LAYER_PATH = /^layers\.([^.]+)\.(.+)$/;
 function adjustmentsSummary(adjustments) {
@@ -10259,6 +10920,7 @@ function createImageEditorToolProvider(controller, options = {}) {
       ...createImageTransformTools(controller),
       ...createImageSmartObjectTools(controller),
       ...createImageShapeTools(controller),
+      ...createImageTypeTools(controller),
       ...createImageEffectTools(controller),
       ...createImagePaintTools(controller),
       ...createPigmentTools(),
@@ -10601,6 +11263,8 @@ function layerBadge(layer) {
       return "so";
     case "shape":
       return "shp";
+    case "type":
+      return "T";
   }
 }
 function dropZone(fraction, isGroup) {
@@ -10640,7 +11304,7 @@ function layerMenu(controller) {
     { action: "delete-mask", label: "Delete Layer Mask", enabled: Boolean(active?.mask) },
     { action: "toggle-mask", label: active?.mask?.enabled === false ? "Enable Layer Mask" : "Disable Layer Mask", enabled: Boolean(active?.mask) },
     { action: "toggle-mask-link", label: active?.mask?.linked === false ? "Link Layer Mask" : "Unlink Layer Mask", enabled: Boolean(active?.mask && !active.mask.source) },
-    { action: "rasterize", label: "Rasterize Layer", enabled: active?.type === "annotation" || active?.type === "smart" || active?.type === "shape" || isPixel && Boolean(active?.type === "pixel" && active.filters?.length) },
+    { action: "rasterize", label: "Rasterize Layer", enabled: active?.type === "annotation" || active?.type === "smart" || active?.type === "shape" || active?.type === "type" || isPixel && Boolean(active?.type === "pixel" && active.filters?.length) },
     { action: "convert-smart", label: "Convert to Smart Object", enabled: Boolean(active && active.type !== "annotation") },
     { action: "edit-contents", label: "Edit Contents", enabled: active?.type === "smart" },
     { action: "smart-via-copy", label: "New Smart Object via Copy", enabled: active?.type === "smart" },
@@ -11573,6 +12237,7 @@ export {
   D50,
   D65,
   DEFAULT_ADJUSTMENTS,
+  DEFAULT_AUTO_LEADING,
   DEFAULT_BLENDER,
   DEFAULT_BRUSH,
   DEFAULT_DEPTH_MASK,
@@ -11582,6 +12247,7 @@ export {
   DEFAULT_REFINE_EDGE_PARAMS,
   DEFAULT_SELECTION_TOOL_OPTIONS,
   DEFAULT_SMUDGE,
+  DEFAULT_TEXT_STYLE,
   DEFAULT_TRANSFORM,
   DEPTH_MASK_CONTROLS,
   DEVELOP_FILTER_ID,
@@ -11631,6 +12297,7 @@ export {
   MixerStroke,
   PAINTERLY_BLEND_MODES,
   PAINT_TOOLS,
+  PARAGRAPH_STYLE_FIELDS,
   PATTERN_BLOCK_KEYS,
   PIGMENT_BANDS,
   PIGMENT_LAMBDA_MIN,
@@ -11658,6 +12325,9 @@ export {
   SmudgeTip,
   StrokeCoverage,
   SurfaceDraft,
+  TEXT_ALIGNS,
+  TEXT_RENDER_MARGIN,
+  TEXT_STYLE_FIELDS,
   TILE,
   TILE_SHIFT,
   TINT_SCALE,
@@ -11691,6 +12361,7 @@ export {
   annotationLayerName,
   annotationOfLayer,
   annotationOfShape,
+  annotationOfType,
   applyAdjustmentLayers,
   applyAdjustments,
   applyBoxBlur,
@@ -11733,6 +12404,7 @@ export {
   calculateCropDrag,
   canvasCompositeOperation,
   canvasToImagePoint,
+  caretAt,
   changedTiles,
   clampControlValue,
   clampCropToImage,
@@ -11760,6 +12432,7 @@ export {
   coveringRect,
   createAdjustmentLayer,
   createBlenderScratch,
+  createCanvasTextShaper,
   createImageCaptureSurface,
   createImageEditTools,
   createImageEditorToolProvider,
@@ -11771,10 +12444,15 @@ export {
   createImageShapeTools,
   createImageSmartObjectTools,
   createImageTransformTools,
+  createImageTypeTools,
+  createOutlineTextShaper,
   createPigment,
   createPigmentTools,
   createSelectionMask,
   createShapeLayer,
+  createTypeLayer,
+  cssFont,
+  cssFontFamily,
   curveLut,
   curveLutFromLevels,
   curvePointToBox,
@@ -11843,9 +12521,12 @@ export {
   findLayer,
   findLayerControl,
   finishTile,
+  fitParagraphRuns,
+  fitRuns,
   flattenLayers,
   flattenPath,
   flipCorners,
+  fontOf,
   formatControlValue,
   fullSelection,
   gaussianBlur,
@@ -11936,6 +12617,7 @@ export {
   layerTree,
   layerTypeLabel,
   layersFromLegacy,
+  layoutText,
   legacyAdjustmentLayer,
   legacyMaskOf,
   legacyView,
@@ -11995,11 +12677,13 @@ export {
   normalizeSmudge,
   normalizeStoredAdjustments,
   normalizeSubpaths,
+  normalizeText,
   offsetLayer,
   offsetShape,
   offsetSmartObject,
   openPsdFile,
   packRgba,
+  paragraphRanges,
   parseAdjustmentBlock,
   parseBlend,
   parseColor,
@@ -12011,6 +12695,8 @@ export {
   parsePatternBlock,
   parseSelectionMode,
   parseVersionedDescriptor,
+  patchParagraphStyle,
+  patchTextStyle,
   photoFilterMatrix,
   pigment8,
   pixelLayerBounds,
@@ -12066,19 +12752,24 @@ export {
   renderShape,
   renderShapeRect,
   renderSmartObject,
+  renderText,
   replaceContents,
+  replaceTextRange,
   requireLayer,
   requireOperation,
   requireShapeLayer,
   requireSmartObject,
+  requireTypeLayer,
   requireUnlocked,
   rerender,
   rerenderShape,
+  rerenderText,
   resizePixels,
   resizeSelection,
   resizeWarpMesh,
   resolveExternalAssets,
   resolveMosaicRegionBounds,
+  restyleRange,
   rgbToGray,
   rgbToHsl,
   rgbToReflectance,
@@ -12125,16 +12816,22 @@ export {
   smoothCoverage,
   smoothPoints,
   solidSurface,
+  spliceRuns,
   splitOverlayAnnotations,
   srgb8ToLab,
   srgbToLinear,
   standardBlendMode,
+  styleAt,
   sumHistograms,
   surfaceBytes,
   surfaceFromPixels,
   surfacesEqual,
   tempTintToXy,
   temperatureToKelvin,
+  textIndexAt,
+  textMatrix,
+  textOutlines,
+  textRange,
   tileCoord,
   tileKey,
   tileRect,
@@ -12143,6 +12840,7 @@ export {
   tipReach,
   tipShape,
   toHex,
+  toTextSpace,
   toneCurve,
   toneLuts,
   toneRange,
@@ -12150,10 +12848,15 @@ export {
   transformMap,
   transformShapeComponents,
   transformSurface,
+  transformTypeLayer,
   transformedBounds,
   transformedBox,
   transformedPoint,
   translateSurface,
+  typeAsPixelLayer,
+  typeFrame,
+  typeFromAnnotation,
+  typeLayerName,
   ungroupLayer,
   uniformTile,
   unionRect,
@@ -12163,6 +12866,7 @@ export {
   updateLayerMaskProps,
   updateShapeLayer,
   updateSmartFilter,
+  updateTypeLayer,
   uvToXy,
   validateEffectGradient,
   validateLayerEffect,