@pixerate/editor 0.192.0 → 0.193.0

package/dist/image-editor/index.js

@@ -2,7 +2,7 @@ import {
   loadOpenTypeFont,
   parseOpenTypeFont,
   traceField
-} from "../chunk-RQ2EM5TY.js";
+} from "../chunk-5OC22IEO.js";
 import {
   ADJUSTMENT_KEYS,
   ADJUSTMENT_KINDS,
@@ -46,6 +46,7 @@ import {
   SMART_RENDER_MARGIN,
   SUPPORTED_ADJUSTMENT_KEYS,
   TEXT_ALIGNS,
+  TEXT_ORIENTATIONS,
   TEXT_RENDER_MARGIN,
   TEXT_STYLE_FIELDS,
   TINT_SCALE,
@@ -339,6 +340,7 @@ import {
   tempTintToXy,
   temperatureToKelvin,
   textMatrix,
+  textOrientation,
   textOutlines,
   textRange,
   toTextSpace,
@@ -384,7 +386,7 @@ import {
   writePsd,
   xyToTempTint,
   xyToUv
-} from "../chunk-TXYXF32N.js";
+} from "../chunk-ZIDUPSP4.js";
 import {
   parseCssColor
 } from "../chunk-3CI7FRMK.js";
@@ -622,6 +624,7 @@ import {
   identityWarpMesh,
   invertMatrix,
   layoutText,
+  lineToTextSpace,
   multiplyMatrices,
   paragraphRanges,
   pullWarpMesh,
@@ -632,7 +635,10 @@ import {
   spliceRuns,
   styleAt,
   subpathsToBezier,
+  textArrowStep,
   textIndexAt,
+  textLineMove,
+  textSelectionQuads,
   translateMatrix,
   warpMeshColumns,
   warpMeshEditPoints,
@@ -640,7 +646,7 @@ import {
   warpMeshParamAt,
   warpMeshRows,
   warpPresetMesh
-} from "../chunk-LPIKXPBM.js";
+} from "../chunk-GHCXLQ47.js";
 import "../chunk-YXKLVD56.js";
 import "../chunk-M6DNZNVY.js";
 import {
@@ -2704,7 +2710,11 @@ var TextEditSession = class {
     if (dir > 0 && c >= 55296 && c <= 56319 && i + 1 < t.length) return 2;
     return 1;
   }
-  /** Moves the caret (Shift extends the selection). */
+  /**
+   * Moves the caret (Shift extends the selection): `left` / `right` along the line, `up` / `down`
+   * between lines, `home` / `end` of the line, `start` / `finish` of the text. Arrow keys of vertical
+   * text map onto these through `textArrowStep` in `handleKey`.
+   */
   move(to, extend = false) {
     const n = this.text.length;
     let f = this.focus;
@@ -2723,15 +2733,7 @@ var TextEditSession = class {
           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;
-          }
-        }
+        } else f = textLineMove(layout, f, to === "up" ? -1 : 1, n);
       }
     }
     this.focus = f;
@@ -2767,17 +2769,16 @@ var TextEditSession = class {
         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);
+      case "ArrowDown": {
+        const step = textArrowStep(this.layer.orientation, e.key);
+        if (step === "previous") this.move(mod2 ? "home" : "left", e.shiftKey);
+        else if (step === "next") this.move(mod2 ? "end" : "right", e.shiftKey);
+        else if (step === "line-before") this.move(mod2 ? "start" : "up", e.shiftKey);
+        else this.move(mod2 ? "finish" : "down", e.shiftKey);
         return true;
+      }
       case "Home":
         this.move("home", e.shiftKey);
         return true;
@@ -2829,20 +2830,9 @@ var TextEditSession = class {
       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 selection = textSelectionQuads(layout, this.start, this.end).map((q) => q.map((p) => at(p.x, p.y)));
     const c = caretAt(layout, this.focus);
-    return { caret: [at(c.x, c.top), at(c.x, c.bottom)], selection, frame };
+    return { caret: [at(c.from.x, c.from.y), at(c.to.x, c.to.y)], selection, frame };
   }
   /** Ends editing: an empty layer made for this session is deleted (as Photoshop does). Returns whether the layer remains. */
   close() {
@@ -2939,6 +2929,7 @@ var TypeToolGesture = class {
         ...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 } : {},
+        ...o.orientation === "vertical" ? { orientation: "vertical" } : {},
         name: "Text"
       });
       this.session = new TextEditSession(this.controller, id, 0);
@@ -9328,6 +9319,7 @@ var ImageEditorController = class {
       runs: ranges(layer.runs),
       paragraphs: ranges(layer.paragraphs),
       frame: { ...layer.frame },
+      orientation: layer.orientation ?? "horizontal",
       transform: [...layer.transform ?? [1, 0, 0, 1, 0, 0]],
       lines,
       bounds: this.getLayerBounds(id),
@@ -9361,23 +9353,16 @@ var ImageEditorController = class {
   /**
    * Type Mask (horizontal or vertical): a selection in the shape of `text`, laid out and drawn as
    * `addTextLayer` would place it (font, size, tracking, box, rotation), combined with the current
-   * selection by `mode`. Vertical type stacks the characters top to bottom, centred on `x`. No
-   * layer is added. One undo step. Returns whether anything is selected.
+   * selection by `mode`. Vertical type is laid out as vertical type layers are: columns down from
+   * (`x`, `y`), right to left, CJK upright and Latin turned. No layer is added. One undo step. Returns whether anything is selected.
    */
   selectTextShape(init) {
     const vertical = init.orientation === "vertical";
     if (init.orientation !== void 0 && init.orientation !== "horizontal" && !vertical) throw new LayerOperationError("orientation must be horizontal or vertical.");
     if (init.feather !== void 0 && !(init.feather >= 0 && init.feather <= 1e3)) throw new LayerOperationError("feather must be from 0 to 1000 px.");
-    let text = normalizeText(init.text);
+    const text = normalizeText(init.text);
     if (!text.trim()) throw new LayerOperationError("The text is empty, so there is nothing to select; give some characters.");
-    let paragraph = init.paragraph;
-    if (vertical) {
-      if (/\n/.test(text)) throw new LayerOperationError("Vertical type masks take one column; select each column separately (mode add) instead of line breaks.");
-      if (init.box) throw new LayerOperationError("Vertical type masks are point text; leave out box.");
-      text = Array.from(text).join("\n");
-      paragraph = { align: "center", ...paragraph ?? {} };
-    }
-    const layer = this.layoutTypeLayer({ ...init, text, paragraph });
+    const layer = this.layoutTypeLayer({ ...init, text, orientation: vertical ? "vertical" : "horizontal" });
     const { width, height } = this.naturalSize;
     const b = contentBounds(layer.surface);
     const x0 = Math.max(0, b?.x ?? 0);
@@ -9412,10 +9397,11 @@ var ImageEditorController = class {
       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 };
     }
+    const orientation = init.orientation === void 0 ? "horizontal" : textOrientation(init.orientation);
     if (init.rotation !== void 0 && !Number.isFinite(init.rotation)) throw new LayerOperationError("rotation must be a number of degrees.");
     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;
-    return createTypeLayer({ text, runs: [{ length: text.length, style }], paragraphs: [{ length: text.length, style: paragraph }], frame, transform, name: init.name ?? typeLayerName(text) }, this.textEnv());
+    return createTypeLayer({ text, runs: [{ length: text.length, style }], paragraphs: [{ length: text.length, style: paragraph }], frame, orientation, transform, name: init.name ?? typeLayerName(text) }, this.textEnv());
   }
   /**
    * Replaces text [start, end) (default all of it) with `text`; inserted text takes the style at
@@ -9490,14 +9476,27 @@ var ImageEditorController = class {
       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 shift = (dx2, dy2) => [m[0], m[1], m[2], m[3], m[0] * dx2 + m[2] * dy2 + m[4], m[1] * dx2 + m[3] * dy2 + m[5]];
+        if (frame.kind === "box" && l.frame.kind === "box") {
+          const resized = { frame: { kind: "box", width: frame.width, height: frame.height } };
+          if (l.orientation === "vertical" && frame.width !== l.frame.width) resized.transform = shift(l.frame.width - frame.width, 0);
+          return resized;
+        }
+        if (!shaper) throw new LayerOperationError("Changing between point and paragraph text needs a text shaper to measure the text.");
+        const layout = layoutText(l, shaper);
+        const first = layout.lines[0];
+        let dx;
+        let dy;
+        if (l.orientation === "vertical") {
+          const at = !first ? { x: 0, y: 0 } : frame.kind === "box" ? lineToTextSpace(layout, { x: first.x, y: first.baseline - first.ascent }) : lineToTextSpace(layout, { x: 0, y: first.baseline });
+          dx = frame.kind === "box" ? at.x - frame.width : at.x;
+          dy = at.y;
+        } else {
+          dx = frame.kind === "box" ? first ? first.x : 0 : 0;
+          dy = frame.kind === "box" ? first ? first.baseline - first.ascent : 0 : first ? first.baseline : 0;
+        }
+        const shifted = shift(dx, dy);
         const nextFrame = frame.kind === "box" ? { kind: "box", width: frame.width, height: frame.height } : { kind: "point" };
         return { frame: nextFrame, transform: shifted };
       },
@@ -9507,6 +9506,25 @@ var ImageEditorController = class {
     this.commitLayers(layers, void 0, commitToHistory);
     return this.typeInfo(id);
   }
+  /**
+   * Horizontal ↔ vertical type (Type › Orientation): the text, styles, frame and origin stay; the
+   * lines become columns running down, stacked right to left, or back. One undo step. Returns the
+   * layer.
+   */
+  setTextOrientation(id, orientation, commitToHistory = true) {
+    const next = textOrientation(orientation);
+    const layer = requireTypeLayer(this.state.layers, id);
+    if ((layer.orientation ?? "horizontal") === next) return this.typeInfo(id);
+    const { layers } = updateTypeLayer(
+      this.state.layers,
+      id,
+      () => ({ orientation: next === "vertical" ? "vertical" : void 0 }),
+      this.textEnv(),
+      "change its orientation"
+    );
+    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;
@@ -9552,8 +9570,8 @@ var ImageEditorController = class {
     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 };
+    const at = (p) => ({ x: m[0] * p.x + m[2] * p.y + m[4], y: m[1] * p.x + m[3] * p.y + m[5] });
+    return { top: at(c.from), bottom: at(c.to), line: c.line };
   }
   // --- Shape layers ---
   /** What shape rendering needs: the canvas size and the document's patterns. */
@@ -11302,7 +11320,7 @@ var DEPTH_MASK_CONTROLS = [
 var IMAGE_PLAYBACK_KIND = "layer";
 var PAINT = /^(paint_stroke|clone_stamp|heal_brush|spot_heal|dodge|burn|sponge|smudge|blur_stroke|sharpen_stroke|history_brush|set_clone_source|set_clone_transform|fill_pixels|clear_pixels|set_paint|set_retouch_options|load_mixer_brush|clean_mixer_brush)$/;
 var SELECT = /^(select_region|select_subject|select_by_color|select_all|deselect|invert_selection|select_rect|select_ellipse|select_polygon|select_line|magic_wand|grow_selection|select_similar|reselect|select_layer_transparency|select_color_range|load_selection_from_image|load_selection_from_mask|set_selection_display|modify_selection|refine_selection|transform_selection|apply_selection_as_mask|layer_via_copy|stroke_selection|content_aware_fill|copy_pixels|cut_pixels|paste_pixels|save_selection|load_selection_from_channel|set_channel_properties|duplicate_channel|delete_channel|load_channel_from_image|set_quick_mask|path_to_selection|select_text_shape)$/;
-var ANNOTATE = /^(add_shape_layer|update_shape|add_shape_component|set_shape_component|remove_shape_component|merge_shape_components|add_text_layer|set_text|set_text_style|set_paragraph_style|set_text_frame|convert_text_to_shape)$/;
+var ANNOTATE = /^(add_shape_layer|update_shape|add_shape_component|set_shape_component|remove_shape_component|merge_shape_components|add_text_layer|set_text|set_text_style|set_paragraph_style|set_text_frame|set_text_orientation|convert_text_to_shape)$/;
 var CROP = /^(set_crop|crop_to_selection|reset_crop|set_rotation|flip_image|transform_layer|warp_layer|flip_layer|offset_layer)$/;
 var ADJUST = /^(set_adjustments|add_adjustment_layer|update_adjustment_layer|remove_adjustment_layer|move_adjustment_layer)$/;
 function imagePlaybackPanel(tool) {
@@ -12903,6 +12921,7 @@ function describeLayer(layer, activeId, boundsOf) {
       out.text = {
         text: layer.text.length > 80 ? `${layer.text.slice(0, 80)}\u2026` : layer.text,
         frame: layer.frame.kind,
+        ...layer.orientation === "vertical" ? { orientation: "vertical" } : {},
         runs: layer.runs.length,
         rendering: layer.rendering === "stored" ? "stored" : "live",
         missingFonts: layer.missingFonts ?? []
@@ -16254,7 +16273,13 @@ var STYLE = {
   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." }
+  strikethrough: { type: "boolean", description: "Strike through." },
+  upright: { type: "boolean", description: "Vertical text only: set Latin and other horizontal-script characters upright, one under the other, instead of turned sideways (default false)." }
+};
+var ORIENTATION = {
+  type: "string",
+  enum: ["horizontal", "vertical"],
+  description: "horizontal (default): lines left to right, stacked down. vertical: columns top to bottom, stacked right to left; CJK stands upright, Latin turns sideways unless styled upright."
 };
 var PARAGRAPH = {
   align: { type: "string", enum: ["left", "center", "right", "justify"], description: "Alignment (justify stretches paragraph-box lines but the last)." },
@@ -16293,7 +16318,7 @@ function createImageTypeTools(controller) {
   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.",
+    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 orientation (horizontal or vertical), 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", ...READ11 },
     handler: ({ layerId }) => controller.getTextLayer(typeId(layerId))
@@ -16301,7 +16326,7 @@ function createImageTypeTools(controller) {
   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.",
+    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). orientation vertical sets columns running down from (x, y) (the top of the first column\u2019s centre line; a box fills from its right edge), stacked right to left. 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: {
@@ -16317,6 +16342,7 @@ function createImageTypeTools(controller) {
         },
         style: { type: "object", description: "Character style.", properties: STYLE, additionalProperties: false },
         paragraph: { type: "object", description: "Paragraph style.", properties: PARAGRAPH, additionalProperties: false },
+        orientation: ORIENTATION,
         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)." },
@@ -16331,7 +16357,7 @@ function createImageTypeTools(controller) {
     },
     annotations: { title: "Add a type layer", ...WRITE9 },
     handler: (args) => {
-      const init = pick2(args, ["text", "x", "y", "box", "style", "paragraph", "rotation", "name", "opacity", "blend", "aboveId", "belowId", "parentId", "index"]);
+      const init = pick2(args, ["text", "x", "y", "box", "style", "paragraph", "orientation", "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) };
@@ -16391,6 +16417,14 @@ function createImageTypeTools(controller) {
       return controller.setTextFrame(id, kind === "box" ? { kind: "box", width, height } : { kind: "point" });
     }
   };
+  const setOrientation = {
+    name: "set_text_orientation",
+    title: "Horizontal or vertical type",
+    description: "Type \u203A Orientation: sets a type layer horizontal (lines left to right) or vertical (columns top to bottom, right to left). The text, styles, frame and origin stay. One undo step. Returns the text layer with its orientation and new lines (columns).",
+    inputSchema: { type: "object", properties: { layerId: LAYER_ID6, orientation: { ...ORIENTATION, description: "horizontal or vertical." } }, required: ["layerId", "orientation"], additionalProperties: false },
+    annotations: { title: "Horizontal or vertical type", ...WRITE_IDEMPOTENT6 },
+    handler: ({ layerId, orientation }) => controller.setTextOrientation(typeId(layerId), orientation)
+  };
   const toShape = {
     name: "convert_text_to_shape",
     title: "Convert text to a shape",
@@ -16405,17 +16439,17 @@ function createImageTypeTools(controller) {
   const typeMask = {
     name: "select_text_shape",
     title: "Select the shape of text",
-    description: "Horizontal / Vertical Type Mask: selects the shape of text laid out as add_text_layer would place it (font family, size, weight, tracking, box, rotation; colour is ignored), combined with the current selection by mode. No layer is added. Vertical stacks the characters top to bottom, centred on x (one column; add more with mode add). Use it to cut text out of an image (layer_via_copy), fill letters with a photo (add_layer_mask), or mask an adjustment. Check fonts with list_fonts first. One undo step. Returns the selection.",
+    description: "Horizontal / Vertical Type Mask: selects the shape of text laid out as add_text_layer would place it (font family, size, weight, tracking, box, rotation; colour is ignored), combined with the current selection by mode. No layer is added. Vertical lays the text out as vertical type: columns down from (x, y), stacked right to left, CJK upright and Latin turned sideways. Use it to cut text out of an image (layer_via_copy), fill letters with a photo (add_layer_mask), or mask an adjustment. Check fonts with list_fonts first. One undo step. Returns the selection.",
     inputSchema: {
       type: "object",
       properties: {
-        text: { type: "string", minLength: 1, description: "The text; \\n starts a new line (horizontal only)." },
-        x: { type: "number", description: "Document x of the origin, pixels (vertical: the column centre)." },
-        y: { type: "number", description: "Document y of the origin (the first baseline), pixels." },
-        orientation: { type: "string", enum: ["horizontal", "vertical"], description: "horizontal (default) or vertical (characters stacked top to bottom)." },
+        text: { type: "string", minLength: 1, description: "The text; \\n starts a new line (vertical: a new column)." },
+        x: { type: "number", description: "Document x of the origin, pixels (vertical: the first column\u2019s centre)." },
+        y: { type: "number", description: "Document y of the origin, pixels (horizontal: the first baseline; vertical: the top of the first column)." },
+        orientation: { ...ORIENTATION, description: "horizontal (default) or vertical: columns top to bottom, right to left, as vertical type layers (CJK upright, Latin turned sideways unless styled upright)." },
         box: {
           type: "object",
-          description: "Horizontal only: wrap in this box, pixels.",
+          description: "Wrap in this box, pixels (vertical: columns fill it from its right edge).",
           properties: { width: { type: "number", minimum: 1, description: "Box width, pixels." }, height: { type: "number", minimum: 1, description: "Box height, pixels." } },
           required: ["width", "height"],
           additionalProperties: false
@@ -16438,7 +16472,7 @@ function createImageTypeTools(controller) {
       return { empty: !sel, bounds: sel?.bounds ?? null, area: Math.round(sel ? selectionArea(sel) : 0) };
     }
   };
-  return [listFonts, get, add2, setText, setStyle, setParagraph, setFrame, toShape, typeMask];
+  return [listFonts, get, add2, setText, setStyle, setParagraph, setFrame, setOrientation, toShape, typeMask];
 }
 
 // src/image-editor/tools.ts
@@ -18577,6 +18611,7 @@ export {
   StrokeCoverage,
   SurfaceDraft,
   TEXT_ALIGNS,
+  TEXT_ORIENTATIONS,
   TEXT_RENDER_MARGIN,
   TEXT_STYLE_FIELDS,
   TILE,
@@ -19310,6 +19345,7 @@ export {
   temperatureToKelvin,
   textIndexAt,
   textMatrix,
+  textOrientation,
   textOutlines,
   textRange,
   tileCoord,

package/dist/image-editor/layers/model.d.cts

@@ -298,8 +298,8 @@ export interface ShapeLayer extends LayerBase {
     annotation?: Annotation;
     psd?: ShapePsdData;
 }
-export type { TextStyle, TextRun, TextAlign, ParagraphStyle, ParagraphRun } from '../../text/types.cjs';
-export { TEXT_ALIGNS } from '../../text/types.cjs';
+export type { TextStyle, TextRun, TextAlign, TextOrientation, ParagraphStyle, ParagraphRun } from '../../text/types.cjs';
+export { TEXT_ALIGNS, TEXT_ORIENTATIONS } from '../../text/types.cjs';
 /** PSD data of a type layer kept for round trips (see the PSD module). */
 export interface TypePsdData {
     /** The `TySh` block as read: written back while the layer is unchanged, else patched. */
@@ -338,6 +338,11 @@ export interface TypeLayer extends LayerBase {
         width: number;
         height: number;
     };
+    /**
+     * Missing = horizontal. `vertical`: columns running down, stacked right to left (point text:
+     * (0, 0) is the top of the first column's centre line; a box fills from its right edge).
+     */
+    orientation?: 'vertical';
     /** Text space → document (missing = identity). */
     transform?: AffineMatrix;
     /** Default true. */

package/dist/image-editor/layers/model.d.ts

@@ -298,8 +298,8 @@ export interface ShapeLayer extends LayerBase {
     annotation?: Annotation;
     psd?: ShapePsdData;
 }
-export type { TextStyle, TextRun, TextAlign, ParagraphStyle, ParagraphRun } from '../../text/types.js';
-export { TEXT_ALIGNS } from '../../text/types.js';
+export type { TextStyle, TextRun, TextAlign, TextOrientation, ParagraphStyle, ParagraphRun } from '../../text/types.js';
+export { TEXT_ALIGNS, TEXT_ORIENTATIONS } from '../../text/types.js';
 /** PSD data of a type layer kept for round trips (see the PSD module). */
 export interface TypePsdData {
     /** The `TySh` block as read: written back while the layer is unchanged, else patched. */
@@ -338,6 +338,11 @@ export interface TypeLayer extends LayerBase {
         width: number;
         height: number;
     };
+    /**
+     * Missing = horizontal. `vertical`: columns running down, stacked right to left (point text:
+     * (0, 0) is the top of the first column's centre line; a box fills from its right edge).
+     */
+    orientation?: 'vertical';
     /** Text space → document (missing = identity). */
     transform?: AffineMatrix;
     /** Default true. */

package/dist/image-editor/layers/serialize.d.cts

@@ -195,6 +195,8 @@ export interface SerializedTypeLayer extends SerializedLayerBase {
     runs: TextRun[];
     paragraphs: ParagraphRun[];
     frame: TypeLayer['frame'];
+    /** Missing: horizontal. */
+    orientation?: 'vertical';
     transform?: number[];
     antiAlias?: false;
     fillOpacity?: number;

package/dist/image-editor/layers/serialize.d.ts

@@ -195,6 +195,8 @@ export interface SerializedTypeLayer extends SerializedLayerBase {
     runs: TextRun[];
     paragraphs: ParagraphRun[];
     frame: TypeLayer['frame'];
+    /** Missing: horizontal. */
+    orientation?: 'vertical';
     transform?: number[];
     antiAlias?: false;
     fillOpacity?: number;

package/dist/image-editor/layers/shape-type-ui.d.cts

@@ -6,7 +6,7 @@
  */
 import type { ImageEditorController, TypeLayerInfo } from '../controller.cjs';
 import type { ImagePoint } from '../types.cjs';
-import { type LiveShapeKind, type ParagraphStyle, type TextAlign, type TextStyle } from './model.cjs';
+import { type LiveShapeKind, type ParagraphStyle, type TextAlign, type TextOrientation, type TextStyle } from './model.cjs';
 /** What the shape tool draws next (and what its options bar edits on a selected shape). */
 export interface ShapeToolOptions {
     kind: LiveShapeKind;
@@ -36,6 +36,8 @@ export interface TypeToolOptions {
     italic: boolean;
     color: string;
     align: TextAlign;
+    /** Horizontal Type or Vertical Type tool (missing = horizontal): what new text is set as. */
+    orientation?: TextOrientation;
 }
 export declare const DEFAULT_TYPE_TOOL_OPTIONS: TypeToolOptions;
 /** A live shape for a drag from `a` to `b` (Shift: square / circle / 45° line; Alt: from the centre). */
@@ -107,7 +109,11 @@ export declare class TextEditSession {
     deleteForward(): void;
     /** 2 when the code unit at `i` is half of a surrogate pair (moving `dir`), else 1. */
     private surrogate;
-    /** Moves the caret (Shift extends the selection). */
+    /**
+     * Moves the caret (Shift extends the selection): `left` / `right` along the line, `up` / `down`
+     * between lines, `home` / `end` of the line, `start` / `finish` of the text. Arrow keys of vertical
+     * text map onto these through `textArrowStep` in `handleKey`.
+     */
     move(to: 'left' | 'right' | 'up' | 'down' | 'home' | 'end' | 'start' | 'finish', extend?: boolean): void;
     selectAll(): void;
     /** Places the caret at a document point (Shift-click extends). */

package/dist/image-editor/layers/shape-type-ui.d.ts

@@ -6,7 +6,7 @@
  */
 import type { ImageEditorController, TypeLayerInfo } from '../controller.js';
 import type { ImagePoint } from '../types.js';
-import { type LiveShapeKind, type ParagraphStyle, type TextAlign, type TextStyle } from './model.js';
+import { type LiveShapeKind, type ParagraphStyle, type TextAlign, type TextOrientation, type TextStyle } from './model.js';
 /** What the shape tool draws next (and what its options bar edits on a selected shape). */
 export interface ShapeToolOptions {
     kind: LiveShapeKind;
@@ -36,6 +36,8 @@ export interface TypeToolOptions {
     italic: boolean;
     color: string;
     align: TextAlign;
+    /** Horizontal Type or Vertical Type tool (missing = horizontal): what new text is set as. */
+    orientation?: TextOrientation;
 }
 export declare const DEFAULT_TYPE_TOOL_OPTIONS: TypeToolOptions;
 /** A live shape for a drag from `a` to `b` (Shift: square / circle / 45° line; Alt: from the centre). */
@@ -107,7 +109,11 @@ export declare class TextEditSession {
     deleteForward(): void;
     /** 2 when the code unit at `i` is half of a surrogate pair (moving `dir`), else 1. */
     private surrogate;
-    /** Moves the caret (Shift extends the selection). */
+    /**
+     * Moves the caret (Shift extends the selection): `left` / `right` along the line, `up` / `down`
+     * between lines, `home` / `end` of the line, `start` / `finish` of the text. Arrow keys of vertical
+     * text map onto these through `textArrowStep` in `handleKey`.
+     */
     move(to: 'left' | 'right' | 'up' | 'down' | 'home' | 'end' | 'start' | 'finish', extend?: boolean): void;
     selectAll(): void;
     /** Places the caret at a document point (Shift-click extends). */

package/dist/image-editor/layers/text.d.cts

@@ -16,7 +16,7 @@ import type { AffineMatrix } from '../../geom/types.cjs';
 import { type BezierPath } from '../../canvas/pathops/bezier.cjs';
 import { type ImageLayer, type ParagraphRun, type ParagraphStyle, type PixelLayer, type TextRun, type TextStyle, type TypeLayer } from './model.cjs';
 import { caretAt, DEFAULT_AUTO_LEADING, DEFAULT_TEXT_STYLE, fitParagraphRuns, fitRuns, fontOf, layoutText, paragraphRanges, restyleRange, spliceRuns, styleAt, textIndexAt, type LaidChar, type LaidFragment, type LaidLine, type TextLayout } from '../../text/layout.cjs';
-import type { TextFont, TextShaper } from '../../text/types.cjs';
+import { type TextFont, type TextOrientation, type TextShaper } from '../../text/types.cjs';
 export { caretAt, DEFAULT_AUTO_LEADING, DEFAULT_TEXT_STYLE, fitParagraphRuns, fitRuns, fontOf, layoutText, paragraphRanges, restyleRange, spliceRuns, styleAt, textIndexAt };
 export type { LaidChar, LaidFragment, LaidLine, TextFont, TextLayout, TextShaper };
 /** What rendering a type layer needs besides the layer. */
@@ -48,7 +48,7 @@ export declare function renderText(layer: TypeLayer, env: TextEnv): {
 /** The layer drawn again (`rendering` and `missingFonts` updated); refuses when nothing can draw it. */
 export declare function rerenderText(layer: TypeLayer, env: TextEnv): TypeLayer;
 /** Fields of `TextStyle` an edit can set (`null` clears an optional one). */
-export declare const TEXT_STYLE_FIELDS: readonly ["fontFamily", "fontWeight", "italic", "fontSize", "color", "opacity", "tracking", "leading", "baselineShift", "underline", "strikethrough", "postScriptName"];
+export declare const TEXT_STYLE_FIELDS: readonly ["fontFamily", "fontWeight", "italic", "fontSize", "color", "opacity", "tracking", "leading", "baselineShift", "underline", "strikethrough", "upright", "postScriptName"];
 /** `base` with the given style fields changed, validated (`null` clears leading, tracking, …). */
 export declare function patchTextStyle(base: TextStyle, patch: Record<string, unknown>, path?: string): TextStyle;
 export declare const PARAGRAPH_STYLE_FIELDS: readonly ["align", "autoLeading", "firstLineIndent", "startIndent", "endIndent", "spaceBefore", "spaceAfter"];
@@ -67,9 +67,13 @@ export interface TypeLayerData {
     runs: TextRun[];
     paragraphs?: ParagraphRun[];
     frame: TypeLayer['frame'];
+    /** Default horizontal. */
+    orientation?: TextOrientation;
     transform?: AffineMatrix;
     name?: string;
 }
+/** An orientation from loose input (`horizontal` or `vertical`). */
+export declare function textOrientation(v: unknown, path?: string): TextOrientation;
 /**
  * A new type layer, laid out and drawn. Without anything to draw it, refused, or with `lenient`
  * kept undrawn (`rendering: 'stored'`, no pixels) until a shaper draws it.

package/dist/image-editor/layers/text.d.ts

@@ -16,7 +16,7 @@ import type { AffineMatrix } from '../../geom/types.js';
 import { type BezierPath } from '../../canvas/pathops/bezier.js';
 import { type ImageLayer, type ParagraphRun, type ParagraphStyle, type PixelLayer, type TextRun, type TextStyle, type TypeLayer } from './model.js';
 import { caretAt, DEFAULT_AUTO_LEADING, DEFAULT_TEXT_STYLE, fitParagraphRuns, fitRuns, fontOf, layoutText, paragraphRanges, restyleRange, spliceRuns, styleAt, textIndexAt, type LaidChar, type LaidFragment, type LaidLine, type TextLayout } from '../../text/layout.js';
-import type { TextFont, TextShaper } from '../../text/types.js';
+import { type TextFont, type TextOrientation, type TextShaper } from '../../text/types.js';
 export { caretAt, DEFAULT_AUTO_LEADING, DEFAULT_TEXT_STYLE, fitParagraphRuns, fitRuns, fontOf, layoutText, paragraphRanges, restyleRange, spliceRuns, styleAt, textIndexAt };
 export type { LaidChar, LaidFragment, LaidLine, TextFont, TextLayout, TextShaper };
 /** What rendering a type layer needs besides the layer. */
@@ -48,7 +48,7 @@ export declare function renderText(layer: TypeLayer, env: TextEnv): {
 /** The layer drawn again (`rendering` and `missingFonts` updated); refuses when nothing can draw it. */
 export declare function rerenderText(layer: TypeLayer, env: TextEnv): TypeLayer;
 /** Fields of `TextStyle` an edit can set (`null` clears an optional one). */
-export declare const TEXT_STYLE_FIELDS: readonly ["fontFamily", "fontWeight", "italic", "fontSize", "color", "opacity", "tracking", "leading", "baselineShift", "underline", "strikethrough", "postScriptName"];
+export declare const TEXT_STYLE_FIELDS: readonly ["fontFamily", "fontWeight", "italic", "fontSize", "color", "opacity", "tracking", "leading", "baselineShift", "underline", "strikethrough", "upright", "postScriptName"];
 /** `base` with the given style fields changed, validated (`null` clears leading, tracking, …). */
 export declare function patchTextStyle(base: TextStyle, patch: Record<string, unknown>, path?: string): TextStyle;
 export declare const PARAGRAPH_STYLE_FIELDS: readonly ["align", "autoLeading", "firstLineIndent", "startIndent", "endIndent", "spaceBefore", "spaceAfter"];
@@ -67,9 +67,13 @@ export interface TypeLayerData {
     runs: TextRun[];
     paragraphs?: ParagraphRun[];
     frame: TypeLayer['frame'];
+    /** Default horizontal. */
+    orientation?: TextOrientation;
     transform?: AffineMatrix;
     name?: string;
 }
+/** An orientation from loose input (`horizontal` or `vertical`). */
+export declare function textOrientation(v: unknown, path?: string): TextOrientation;
 /**
  * A new type layer, laid out and drawn. Without anything to draw it, refused, or with `lenient`
  * kept undrawn (`rendering: 'stored'`, no pixels) until a shaper draws it.

package/dist/image-editor/psd/type.d.cts

@@ -25,6 +25,7 @@ export interface PsdTypeData {
     runs: TextRun[];
     paragraphs: ParagraphRun[];
     frame: TypeLayer['frame'];
+    orientation: 'horizontal' | 'vertical';
     transform: AffineMatrix;
     antiAlias: boolean;
     /** PostScript names the text uses. */
@@ -33,7 +34,7 @@ export interface PsdTypeData {
 /** A type layer's data from a `TySh` block, or `null` when the block can't be read. `notes` collects approximations. */
 export declare function typeFromTySh(data: Uint8Array, notes: Set<string>): PsdTypeData | null;
 /** What a type layer says, for deciding whether a `TySh` read from a file still describes it. */
-export declare function typeSignature(layer: Pick<TypeLayer, 'text' | 'runs' | 'paragraphs' | 'frame' | 'transform' | 'antiAlias'>): string;
+export declare function typeSignature(layer: Pick<TypeLayer, 'text' | 'runs' | 'paragraphs' | 'frame' | 'orientation' | 'transform' | 'antiAlias'>): string;
 /** EngineData for a layer, patched into `template` (from the file) when there is one. */
 export declare function buildEngineData(layer: TypeLayer, template: EngineValue | null): EngineValue;
 /** The `TySh` block for a type layer: the one read while unchanged, else patched or built. */

package/dist/image-editor/psd/type.d.ts

@@ -25,6 +25,7 @@ export interface PsdTypeData {
     runs: TextRun[];
     paragraphs: ParagraphRun[];
     frame: TypeLayer['frame'];
+    orientation: 'horizontal' | 'vertical';
     transform: AffineMatrix;
     antiAlias: boolean;
     /** PostScript names the text uses. */
@@ -33,7 +34,7 @@ export interface PsdTypeData {
 /** A type layer's data from a `TySh` block, or `null` when the block can't be read. `notes` collects approximations. */
 export declare function typeFromTySh(data: Uint8Array, notes: Set<string>): PsdTypeData | null;
 /** What a type layer says, for deciding whether a `TySh` read from a file still describes it. */
-export declare function typeSignature(layer: Pick<TypeLayer, 'text' | 'runs' | 'paragraphs' | 'frame' | 'transform' | 'antiAlias'>): string;
+export declare function typeSignature(layer: Pick<TypeLayer, 'text' | 'runs' | 'paragraphs' | 'frame' | 'orientation' | 'transform' | 'antiAlias'>): string;
 /** EngineData for a layer, patched into `template` (from the file) when there is one. */
 export declare function buildEngineData(layer: TypeLayer, template: EngineValue | null): EngineValue;
 /** The `TySh` block for a type layer: the one read while unchanged, else patched or built. */