@pixerate/editor 0.191.0 → 0.193.0

package/dist/vector/index.js

@@ -16,7 +16,7 @@ import {
   traceField,
   traceVectorImage,
   vectorTraceContours
-} from "../chunk-RQ2EM5TY.js";
+} from "../chunk-5OC22IEO.js";
 import {
   applyHomography,
   homographyFromPoints,
@@ -43,7 +43,7 @@ import {
   reverseMorphContour,
   subpathToMorphContour,
   turnMorphContour
-} from "../chunk-VRXXAXUT.js";
+} from "../chunk-MLC7HUHO.js";
 import {
   DEFAULT_VECTOR_FONT,
   IDENTITY_MATRIX,
@@ -218,6 +218,7 @@ import {
   knifePath,
   layoutVectorText,
   lineSubpath,
+  lineToTextSpace,
   locateVectorNode,
   mapBezierPath,
   mapVectorGradient,
@@ -337,6 +338,8 @@ import {
   subpathsToBezier,
   sweepPath,
   taperWaveFactor,
+  textArrowStep,
+  textLineMove,
   tintVectorNode,
   transformVectorEffects,
   transformVectorGradient,
@@ -482,6 +485,7 @@ import {
   vectorTextHasOutlines,
   vectorTextIndexAt,
   vectorTextName,
+  vectorTextOrientation,
   vectorTextPaintSource,
   vectorTextPaths,
   vectorTextRange,
@@ -512,7 +516,7 @@ import {
   withVectorStrokes,
   withVectorTargetPaint,
   zigzagPaths
-} from "../chunk-LPIKXPBM.js";
+} from "../chunk-GHCXLQ47.js";
 import "../chunk-YXKLVD56.js";
 import {
   createProvenance
@@ -13503,6 +13507,8 @@ var VectorEditorController = class _VectorEditorController {
     const own = {};
     for (const key of VECTOR_STYLE_KEYS) if (input[key] !== void 0) own[key] = input[key];
     const text = input.text.replace(/\r\n?/g, "\n");
+    const orientation = vectorTextOrientation(input.orientation);
+    if (orientation && frame.kind === "path") throw new VectorTextError("Text on a path cannot be vertical; leave orientation out, or set point or area text.");
     const node = {
       id: this.newId(),
       type: "text",
@@ -13511,7 +13517,8 @@ var VectorEditorController = class _VectorEditorController {
       text,
       font,
       ...Object.keys(paragraph).length ? { paragraph } : {},
-      frame
+      frame,
+      ...orientation ? { orientation } : {}
     };
     return withStyle(node, own);
   }
@@ -13602,12 +13609,19 @@ var VectorEditorController = class _VectorEditorController {
           n2 = { ...n2, paragraph };
           if (!Object.keys(paragraph).length) delete n2.paragraph;
         }
+        if (patch.orientation !== void 0) {
+          const orientation = vectorTextOrientation(patch.orientation);
+          if (orientation && n2.frame.kind === "path") throw new VectorTextError("Text on a path cannot be vertical; set it as point or area text first.");
+          n2 = { ...n2 };
+          if (orientation) n2.orientation = orientation;
+          else delete n2.orientation;
+        }
         next.set(t.id, n2);
       }
     } catch (e) {
       return { ok: false, message: e instanceof Error ? e.message : String(e) };
     }
-    this.change(patch.paragraph && !patch.style ? "Paragraph Style" : "Character Style", () => this.setDoc(mapTree(this.doc.nodes, (n2) => next.get(n2.id) ?? n2)), options.merge);
+    this.change(patch.orientation !== void 0 && !patch.style && !patch.paragraph ? "Type Orientation" : patch.paragraph && !patch.style ? "Paragraph Style" : "Character Style", () => this.setDoc(mapTree(this.doc.nodes, (n2) => next.get(n2.id) ?? n2)), options.merge);
     return { ok: true };
   }
   /** Changes paragraph fields (`align`, `autoLeading`, indents, spacing; `null` clears) of text node `id`. One undo step. */
@@ -13637,7 +13651,12 @@ var VectorEditorController = class _VectorEditorController {
       const cur = n2.frame;
       const box = layout.bounds ?? { x: 0, y: 0, width: 0, height: 0 };
       let frame;
-      if (kind === "point") {
+      if (n2.orientation === "vertical" && kind === "path") throw new VectorTextError("Text on a path cannot be vertical; call vector.setTextOrientation with horizontal first.");
+      if (kind === "point" && n2.orientation === "vertical" && cur.kind !== "point") {
+        const l = layout.text.lines[0];
+        const at = l ? lineToTextSpace(layout.text, { x: 0, y: l.baseline }) : { x: 0, y: 0 };
+        frame = sanitizeVectorTextFrame({ kind: "point", x: patch.x ?? layout.origin.x + at.x, y: patch.y ?? layout.origin.y + at.y });
+      } else if (kind === "point") {
         const first = layout.lines[0];
         const x = patch.x ?? (cur.kind === "point" ? cur.x : first?.x ?? box.x);
         const y = patch.y ?? (cur.kind === "point" ? cur.y : first?.baseline ?? box.y);
@@ -13657,6 +13676,21 @@ var VectorEditorController = class _VectorEditorController {
       return { ...n2, frame };
     });
   }
+  /**
+   * Horizontal ↔ vertical text (Type › Type Orientation) for point and area text: the text, styles
+   * and frame stay; lines become columns running down, right to left, or back. One undo step.
+   */
+  setTextOrientation(id, orientation) {
+    return this.editTextNode(id, "Type Orientation", (n2) => {
+      const next = vectorTextOrientation(orientation);
+      if (next && n2.frame.kind === "path") throw new VectorTextError("Text on a path cannot be vertical; set it as point or area text first (vector.setTextFrame).");
+      if (next === n2.orientation) return n2;
+      const out = { ...n2 };
+      if (next) out.orientation = next;
+      else delete out.orientation;
+      return out;
+    });
+  }
   /**
    * Turns path `pathId` into text set along it (Type on a Path): a text node in its place, its
    * anchors the text's path, its paint dropped for the text defaults (or `input`'s). Returns the
@@ -13829,7 +13863,11 @@ var VectorEditorController = class _VectorEditorController {
       return false;
     }
     const text = node.text;
-    const key = input.key;
+    let key = input.key;
+    if (node.orientation === "vertical" && node.frame.kind !== "path" && (key === "ArrowLeft" || key === "ArrowRight" || key === "ArrowUp" || key === "ArrowDown")) {
+      const step = textArrowStep("vertical", key);
+      key = step === "previous" ? "ArrowLeft" : step === "next" ? "ArrowRight" : step === "line-before" ? "ArrowUp" : "ArrowDown";
+    }
     const move = (to) => {
       const focus = Math.max(0, Math.min(text.length, to));
       this.textEdit = { ...t, focus, anchor: input.shift ? t.anchor : focus };
@@ -13918,11 +13956,7 @@ var VectorEditorController = class _VectorEditorController {
   lineMove(node, index, dir) {
     const layout = layoutVectorText(node);
     if (node.frame.kind === "path") return dir < 0 ? 0 : node.text.length;
-    const c = vectorTextCaret(node, index);
-    const lines = layout.text.lines;
-    const target = lines[c.line + dir];
-    if (!target) return dir < 0 ? 0 : node.text.length;
-    return vectorTextIndexAt(node, { x: c.top.x, y: layout.origin.y + target.baseline });
+    return textLineMove(layout.text, index, dir, node.text.length);
   }
   /** The topmost node of `type` under `p` (inside groups too, hit where it draws), or null. */
   hitOfType(p, type) {
@@ -15427,6 +15461,7 @@ function createVectorCommands(controller, options = {}) {
       runs,
       paragraph: t.paragraph ?? {},
       frame: t.frame,
+      orientation: t.orientation ?? "horizontal",
       fill: t.fill ?? null,
       stroke: t.stroke ?? null,
       lines: layout.lines.map((l) => ({ start: l.start, end: l.end, text: t.text.slice(l.start, l.end) })),
@@ -15446,7 +15481,13 @@ function createVectorCommands(controller, options = {}) {
     leading: { type: ["number", "null"], minimum: 0, maximum: 1e4, description: "Baseline-to-baseline distance in document units; null for auto (autoLeading \xD7 size)." },
     baselineShift: { type: ["number", "null"], minimum: -5e3, maximum: 5e3, description: "Raises (positive) or lowers the text, document units (0 default)." },
     underline: { type: "boolean", description: "Underline." },
-    strikethrough: { type: "boolean", description: "Strike through." }
+    strikethrough: { type: "boolean", description: "Strike through." },
+    upright: { type: "boolean", description: "Vertical text only: Latin and other horizontal-script characters stand upright, one under the other, instead of turned sideways (default false)." }
+  };
+  const 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. Point and area text only."
   };
   const PARAGRAPH_PROPS = {
     align: { type: "string", enum: ["left", "center", "right", "justify"], description: "Alignment (default left). justify stretches area text lines but the last of a paragraph, and spreads path text over the path." },
@@ -15489,7 +15530,7 @@ function createVectorCommands(controller, options = {}) {
       id: `${prefix}addText`,
       label: "Add Text\u2026",
       keywords: ["text", "type", "label", "title", "headline", "caption", "paragraph", "words"],
-      description: 'Adds text: point text whose first baseline starts at (x, y), area text wrapped in a box (x, y, width, height), or text along `path` (SVG path data, document units). Paragraphs are separated by "\\n". Paint defaults to black with no stroke; style it with fill / stroke here or vector.setStyle. One undo step. Returns vector.getText\'s summary of the new text (id, lines, bounds, overflow).',
+      description: "Adds text: point text whose first baseline starts at (x, y), area text wrapped in a box (x, y, width, height), or text along `path` (SVG path data, document units). textOrientation vertical sets point or area text in columns running down, right to left: (x, y) is then the top of the first column's centre line, and area text fills its box from the right edge. Paragraphs are separated by \"\\n\". Paint defaults to black with no stroke; style it with fill / stroke here or vector.setStyle. One undo step. Returns vector.getText's summary of the new text (id, lines, bounds, overflow).",
       params: {
         type: "object",
         properties: {
@@ -15502,6 +15543,7 @@ function createVectorCommands(controller, options = {}) {
           ...PATH_TEXT_PROPS,
           font: { type: "object", properties: FONT_PROPS, additionalProperties: false, description: "Character style (default the editor's text defaults: 24 sans-serif)." },
           paragraph: { type: "object", properties: PARAGRAPH_PROPS, additionalProperties: false, description: "Paragraph style." },
+          textOrientation: { ...ORIENTATION, description: `${ORIENTATION.description} Named textOrientation because orientation is the path text option.` },
           name: { type: "string", description: "Layer name (default the text's start)." },
           fill: PAINT,
           stroke: PAINT,
@@ -15524,6 +15566,7 @@ function createVectorCommands(controller, options = {}) {
             ...params.path !== void 0 ? { path: params.path, pathOptions } : {},
             ...params.font ? { font: params.font } : {},
             ...params.paragraph ? { paragraph: params.paragraph } : {},
+            ...params.textOrientation !== void 0 ? { orientation: params.textOrientation } : {},
             ...params.fill !== void 0 ? { fill: checkPaint(params.fill, "fill") } : {},
             ...params.stroke !== void 0 ? { stroke: checkPaint(params.stroke, "stroke") } : {}
           }, parentOf(params.parentId));
@@ -15539,7 +15582,7 @@ function createVectorCommands(controller, options = {}) {
       label: "Get Text",
       readOnly: true,
       keywords: ["text", "type", "read", "font", "runs"],
-      description: "Reads a text node: its text, base font, runs (styled ranges as { start, end, style } in UTF-16 code units; style fields override the font, fill a range's colour), paragraph style, frame (point / area / path), fill and stroke, the laid-out lines (start, end, text), document bounds, overflow (text that does not fit its box or path), whether it draws as outlines, the shaper and missing fonts. Use the ranges with vector.setText and vector.setTextStyle.",
+      description: "Reads a text node: its text, base font, runs (styled ranges as { start, end, style } in UTF-16 code units; style fields override the font, fill a range's colour), paragraph style, frame (point / area / path), orientation (horizontal / vertical), fill and stroke, the laid-out lines (start, end, text), document bounds, overflow (text that does not fit its box or path), whether it draws as outlines, the shaper and missing fonts. Use the ranges with vector.setText and vector.setTextStyle.",
       params: { type: "object", properties: { id: { type: "string", description: "Text node id (from vector.list)." } }, required: ["id"], additionalProperties: false },
       run: (_ctx, params) => textSummary(params.id)
     },
@@ -15626,6 +15669,24 @@ function createVectorCommands(controller, options = {}) {
         return textSummary(id);
       }
     },
+    {
+      ...base,
+      id: `${prefix}setTextOrientation`,
+      label: "Type Orientation",
+      keywords: ["vertical text", "vertical type", "horizontal text", "tategaki", "columns", "cjk", "japanese", "chinese", "orientation"],
+      description: "Sets point or area text horizontal (lines left to right) or vertical (columns top to bottom, stacked right to left; CJK upright, Latin turned sideways unless styled upright). The text, styles and frame stay. Text on a path cannot be vertical. One undo step. Returns the text summary with its orientation and lines (columns).",
+      params: {
+        type: "object",
+        properties: { id: { type: "string", description: "Text node id." }, orientation: { ...ORIENTATION, description: "horizontal or vertical." } },
+        required: ["id", "orientation"],
+        additionalProperties: false
+      },
+      undoable: true,
+      run: (_ctx, params) => {
+        check2(controller.setTextOrientation(params.id, params.orientation));
+        return textSummary(params.id);
+      }
+    },
     {
       ...base,
       id: `${prefix}typeOnPath`,
@@ -18274,7 +18335,7 @@ var VECTOR_FONT_WEIGHTS = [
   { value: 700, label: "Bold" },
   { value: 900, label: "Black" }
 ];
-var FIELDS = ["fontFamily", "fontWeight", "italic", "fontSize", "tracking", "leading", "baselineShift", "underline", "strikethrough"];
+var FIELDS = ["fontFamily", "fontWeight", "italic", "fontSize", "tracking", "leading", "baselineShift", "underline", "strikethrough", "upright"];
 function getVectorTextPanel(state) {
   const nodes = [];
   for (const id of state.selection) {
@@ -18305,7 +18366,7 @@ function getVectorTextPanel(state) {
     styles.push(font2);
   }
   const same = (k) => {
-    const values = styles.map((s) => s[k] ?? (k === "italic" || k === "underline" || k === "strikethrough" ? false : k === "leading" ? null : k === "tracking" || k === "baselineShift" ? 0 : null));
+    const values = styles.map((s) => s[k] ?? (k === "italic" || k === "underline" || k === "strikethrough" || k === "upright" ? false : k === "leading" ? null : k === "tracking" || k === "baselineShift" ? 0 : null));
     return values.every((v) => v === values[0]) ? values[0] ?? null : null;
   };
   const font = Object.fromEntries(FIELDS.map((k) => [k, same(k)]));
@@ -18313,7 +18374,11 @@ function getVectorTextPanel(state) {
   const align = alignSource.every((a) => a === alignSource[0]) ? alignSource[0] : null;
   const ids = target === "range" ? [edited.id] : nodes.map((n2) => n2.id);
   const frameNode = target === "range" ? edited : nodes.length === 1 ? nodes[0] : void 0;
-  return { target, ids, font, align, frame: frameNode?.frame.kind ?? null, families: vectorTextFamilies(), outlines: vectorTextHasOutlines(), pathId };
+  const edits = target === "range" ? [edited] : nodes;
+  const orientations = edits.map((n2) => n2.orientation ?? "horizontal");
+  const orientation = orientations.length && orientations.every((o) => o === orientations[0]) ? orientations[0] : null;
+  const canOrient = edits.length > 0 && edits.every((n2) => n2.frame.kind !== "path");
+  return { target, ids, font, align, frame: frameNode?.frame.kind ?? null, orientation, canOrient, families: vectorTextFamilies(), outlines: vectorTextHasOutlines(), pathId };
 }
 function applyVectorTextStyle(controller, patch, options = {}) {
   const state = controller.getState();
@@ -18339,6 +18404,11 @@ function applyVectorParagraphStyle(controller, patch, options = {}) {
   }
   controller.styleTexts({ paragraph: patch }, { ids: panel.ids, ...options });
 }
+function applyVectorTextOrientation(controller, orientation) {
+  const panel = getVectorTextPanel(controller.getState());
+  if (!panel || !panel.canOrient) return;
+  controller.styleTexts({ orientation }, { ids: panel.ids });
+}
 
 // src/vector/symbolsPanel.ts
 var fmt3 = (n2) => Math.round(n2 * 100) / 100;
@@ -18627,6 +18697,7 @@ export {
   applyVectorGradientSpread,
   applyHomography as applyVectorHomography,
   applyVectorParagraphStyle,
+  applyVectorTextOrientation,
   applyVectorTextStyle,
   arrowheadInset,
   arrowheadPath,
@@ -19156,6 +19227,7 @@ export {
   vectorTextHasOutlines,
   vectorTextIndexAt,
   vectorTextName,
+  vectorTextOrientation,
   vectorTextPaintSource,
   vectorTextPaths,
   vectorTextRange,

package/dist/vector/text.d.cts

@@ -29,7 +29,7 @@ export declare function vectorTextHasOutlines(): boolean;
 export declare function vectorTextFamilies(): string[];
 export declare const DEFAULT_VECTOR_FONT: Readonly<VectorCharacterStyle>;
 /** Character style fields, in the order agents see them. */
-export declare const VECTOR_CHARACTER_STYLE_KEYS: readonly ["fontFamily", "fontWeight", "italic", "fontSize", "tracking", "leading", "baselineShift", "underline", "strikethrough"];
+export declare const VECTOR_CHARACTER_STYLE_KEYS: readonly ["fontFamily", "fontWeight", "italic", "fontSize", "tracking", "leading", "baselineShift", "underline", "strikethrough", "upright"];
 /** Paragraph style fields. */
 export declare const VECTOR_PARAGRAPH_STYLE_KEYS: readonly ["align", "autoLeading", "firstLineIndent", "startIndent", "endIndent", "spaceBefore", "spaceAfter"];
 export declare class VectorTextError extends Error {
@@ -115,7 +115,7 @@ export interface VectorTextLayout {
     shaper: string;
     glyphs: VectorTextGlyph[];
     fragments: VectorTextFragment[];
-    /** Lines: their text range and baseline (node space for point and area text). */
+    /** Lines: their text range and baseline (node space for point and area text; for vertical text `baseline` is a column's centre x and `x` its top y). */
     lines: {
         start: number;
         end: number;
@@ -183,8 +183,10 @@ export declare function patchVectorParagraphStyle(base: VectorParagraphStyle, pa
 export declare function sanitizeVectorTextFrame(value: unknown, path?: string): VectorTextFrame;
 /** Normalised runs: fitted to the text, empty overrides dropped, `null` when there is one plain style. */
 export declare function normalizeVectorTextRuns(text: string, runs: readonly VectorTextRun[] | null | undefined): VectorTextRun[] | null;
+/** An orientation from loose input: `horizontal` (returned as undefined, the default) or `vertical`. */
+export declare function vectorTextOrientation(value: unknown, path?: string): 'vertical' | undefined;
 /** A text node read from untrusted data (JSON, SVG data attributes, agents): fields validated and normalised. */
-export declare function sanitizeVectorTextFields(value: Record<string, unknown>): Pick<VectorTextNode, 'text' | 'font' | 'runs' | 'paragraph' | 'frame'>;
+export declare function sanitizeVectorTextFields(value: Record<string, unknown>): Pick<VectorTextNode, 'text' | 'font' | 'runs' | 'paragraph' | 'frame' | 'orientation'>;
 /** A range of the text from loose input: [start, end) in UTF-16 code units (default the whole text). */
 export declare function vectorTextRange(text: string, start: unknown, end: unknown): [number, number];
 /** The node with [start, end) of its text replaced by `insert` (styled like the character before it). */

package/dist/vector/text.d.ts

@@ -29,7 +29,7 @@ export declare function vectorTextHasOutlines(): boolean;
 export declare function vectorTextFamilies(): string[];
 export declare const DEFAULT_VECTOR_FONT: Readonly<VectorCharacterStyle>;
 /** Character style fields, in the order agents see them. */
-export declare const VECTOR_CHARACTER_STYLE_KEYS: readonly ["fontFamily", "fontWeight", "italic", "fontSize", "tracking", "leading", "baselineShift", "underline", "strikethrough"];
+export declare const VECTOR_CHARACTER_STYLE_KEYS: readonly ["fontFamily", "fontWeight", "italic", "fontSize", "tracking", "leading", "baselineShift", "underline", "strikethrough", "upright"];
 /** Paragraph style fields. */
 export declare const VECTOR_PARAGRAPH_STYLE_KEYS: readonly ["align", "autoLeading", "firstLineIndent", "startIndent", "endIndent", "spaceBefore", "spaceAfter"];
 export declare class VectorTextError extends Error {
@@ -115,7 +115,7 @@ export interface VectorTextLayout {
     shaper: string;
     glyphs: VectorTextGlyph[];
     fragments: VectorTextFragment[];
-    /** Lines: their text range and baseline (node space for point and area text). */
+    /** Lines: their text range and baseline (node space for point and area text; for vertical text `baseline` is a column's centre x and `x` its top y). */
     lines: {
         start: number;
         end: number;
@@ -183,8 +183,10 @@ export declare function patchVectorParagraphStyle(base: VectorParagraphStyle, pa
 export declare function sanitizeVectorTextFrame(value: unknown, path?: string): VectorTextFrame;
 /** Normalised runs: fitted to the text, empty overrides dropped, `null` when there is one plain style. */
 export declare function normalizeVectorTextRuns(text: string, runs: readonly VectorTextRun[] | null | undefined): VectorTextRun[] | null;
+/** An orientation from loose input: `horizontal` (returned as undefined, the default) or `vertical`. */
+export declare function vectorTextOrientation(value: unknown, path?: string): 'vertical' | undefined;
 /** A text node read from untrusted data (JSON, SVG data attributes, agents): fields validated and normalised. */
-export declare function sanitizeVectorTextFields(value: Record<string, unknown>): Pick<VectorTextNode, 'text' | 'font' | 'runs' | 'paragraph' | 'frame'>;
+export declare function sanitizeVectorTextFields(value: Record<string, unknown>): Pick<VectorTextNode, 'text' | 'font' | 'runs' | 'paragraph' | 'frame' | 'orientation'>;
 /** A range of the text from loose input: [start, end) in UTF-16 code units (default the whole text). */
 export declare function vectorTextRange(text: string, start: unknown, end: unknown): [number, number];
 /** The node with [start, end) of its text replaced by `insert` (styled like the character before it). */

package/dist/vector/textPanel.d.cts

@@ -17,6 +17,10 @@ export interface VectorTextPanelData {
     align: VectorTextAlign | null;
     /** The frame kind of a single text node. */
     frame: 'point' | 'area' | 'path' | null;
+    /** The orientation of the text edited (`null` when it mixes, or for new text). */
+    orientation: 'horizontal' | 'vertical' | null;
+    /** Whether the text edited can turn vertical (none of it is on a path). */
+    canOrient: boolean;
     /** Families the shaper can draw (always the generic ones too). */
     families: string[];
     /** Whether the shaper gives outlines (Create Outlines works). */
@@ -52,3 +56,5 @@ export declare function applyVectorParagraphStyle(controller: VectorEditorContro
 } & Record<string, unknown>, options?: {
     merge?: string;
 }): void;
+/** Sets the text being edited or selected horizontal or vertical (one undo step); nothing for new-text defaults or path text. */
+export declare function applyVectorTextOrientation(controller: VectorEditorController, orientation: 'horizontal' | 'vertical'): void;

package/dist/vector/textPanel.d.ts

@@ -17,6 +17,10 @@ export interface VectorTextPanelData {
     align: VectorTextAlign | null;
     /** The frame kind of a single text node. */
     frame: 'point' | 'area' | 'path' | null;
+    /** The orientation of the text edited (`null` when it mixes, or for new text). */
+    orientation: 'horizontal' | 'vertical' | null;
+    /** Whether the text edited can turn vertical (none of it is on a path). */
+    canOrient: boolean;
     /** Families the shaper can draw (always the generic ones too). */
     families: string[];
     /** Whether the shaper gives outlines (Create Outlines works). */
@@ -52,3 +56,5 @@ export declare function applyVectorParagraphStyle(controller: VectorEditorContro
 } & Record<string, unknown>, options?: {
     merge?: string;
 }): void;
+/** Sets the text being edited or selected horizontal or vertical (one undo step); nothing for new-text defaults or path text. */
+export declare function applyVectorTextOrientation(controller: VectorEditorController, orientation: 'horizontal' | 'vertical'): void;

package/dist/vector/types.d.cts

@@ -620,6 +620,8 @@ export interface VectorCharacterStyle {
     baselineShift?: number;
     underline?: boolean;
     strikethrough?: boolean;
+    /** Vertical text only: Latin and other horizontal scripts stand upright instead of turned sideways (default false). */
+    upright?: boolean;
 }
 /** Character style fields a run can set over the node's own style, plus its own fill. */
 export type VectorTextRunStyle = Partial<VectorCharacterStyle> & {
@@ -695,6 +697,13 @@ export interface VectorTextNode extends VectorNodeBase, VectorStyle {
     runs?: VectorTextRun[] | null;
     paragraph?: VectorParagraphStyle | null;
     frame: VectorTextFrame;
+    /**
+     * Missing = horizontal. `vertical` (point and area text): columns running down, stacked right to
+     * left; point text starts at the top of the first column's centre line, area text fills its box
+     * from the right edge. CJK characters stand upright, others turn sideways (unless `upright`).
+     * Text on a path ignores it.
+     */
+    orientation?: 'vertical';
 }
 /**
  * Per-instance changes to a symbol's art: every fill and / or stroke of the art painted with one

package/dist/vector/types.d.ts

@@ -620,6 +620,8 @@ export interface VectorCharacterStyle {
     baselineShift?: number;
     underline?: boolean;
     strikethrough?: boolean;
+    /** Vertical text only: Latin and other horizontal scripts stand upright instead of turned sideways (default false). */
+    upright?: boolean;
 }
 /** Character style fields a run can set over the node's own style, plus its own fill. */
 export type VectorTextRunStyle = Partial<VectorCharacterStyle> & {
@@ -695,6 +697,13 @@ export interface VectorTextNode extends VectorNodeBase, VectorStyle {
     runs?: VectorTextRun[] | null;
     paragraph?: VectorParagraphStyle | null;
     frame: VectorTextFrame;
+    /**
+     * Missing = horizontal. `vertical` (point and area text): columns running down, stacked right to
+     * left; point text starts at the top of the first column's centre line, area text fills its box
+     * from the right edge. CJK characters stand upright, others turn sideways (unless `upright`).
+     * Text on a path ignores it.
+     */
+    orientation?: 'vertical';
 }
 /**
  * Per-instance changes to a symbol's art: every fill and / or stroke of the art painted with one

package/package.json

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

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

@@ -301,12 +301,14 @@ in the source frame at the document's bit depth, colour mode and profile. Read
 | `remove_layer_mask` | Delete a mask without applying it; disable it instead to keep it. |
 | `layer_via_copy` | Copy the selected pixels of a pixel layer (default the active one) to a new layer above it; `cut: true` removes them from the source. Needs a selection. Returns the new layer. |
 | `rasterize_layer` | Turn a shape layer into a pixel layer showing the same pixels (same id, mask, effects, opacity, blend; the paths are gone), an annotation layer into pixels (browser only), a smart object into a pixel layer (as `rasterize_smart_object`), or bake a pixel layer's develop / blur filters into its pixels. Do it before painting over a shape or annotation, or when the user wants the filters fixed. Destructive. |
-| `add_text_layer` | Add live type above the active layer and make it active: `text`, `x`, `y`, optional `box` (paragraph text), `style`, `paragraph`, `rotation`, `name`, `opacity`, `blend`, placement. Returns the `layer` and `text` (with `lines` and `missingFonts`). One undo step. |
+| `add_text_layer` | Add live type above the active layer and make it active: `text`, `x`, `y`, optional `box` (paragraph text), `orientation` (`vertical`: columns down from `x`, `y`, right to left, for Japanese / Chinese / Korean), `style`, `paragraph`, `rotation`, `name`, `opacity`, `blend`, placement. Returns the `layer` and `text` (with `orientation`, `lines` and `missingFonts`). One undo step. |
 | `set_text` | Replace text `start`..`end` (default all) with `text`; start = end inserts. New text takes the style at `start`. Returns the text layer. |
-| `set_text_style` | Set character style fields over `start`..`end` (default all): `fontFamily`, `fontWeight`, `italic`, `fontSize`, `color`, `opacity`, `tracking`, `leading`, `baselineShift`, `underline`, `strikethrough` (`null` resets optional ones). Returns the runs. |
+| `set_text_style` | Set character style fields over `start`..`end` (default all): `fontFamily`, `fontWeight`, `italic`, `fontSize`, `color`, `opacity`, `tracking`, `leading`, `baselineShift`, `underline`, `strikethrough`, `upright` (vertical text: Latin upright instead of turned) (`null` resets optional ones). Returns the runs. |
 | `set_paragraph_style` | Set `align`, `autoLeading`, indents, `spaceBefore` / `spaceAfter` on every paragraph `start`..`end` touches (default all). Returns the text layer. |
 | `set_text_frame` | `kind: point` (one line per paragraph) or `kind: box` with `width` and `height` (wrapping paragraph text), or resize a box; the first line stays put. Returns the text layer and its lines. |
+| `set_text_orientation` | Type › Orientation: `horizontal` or `vertical` (columns top to bottom, right to left; CJK upright, Latin turned sideways unless `upright`). Text, styles, frame and origin stay. Returns the text layer with its new lines (columns). One undo step. |
 | `convert_text_to_shape` | Type › Convert to Shape: glyph outlines become a shape layer with the same id (text no longer editable; fill from the first run's colour; `warnings` lists losses). Needs an outline font shaper. Destructive. |
+| `select_text_shape` | Horizontal / Vertical Type Mask: select the shape of `text` at `x`, `y` (style, box, rotation as `add_text_layer`; `orientation` `vertical` lays it out as vertical type: columns down from `x`, `y`, right to left, CJK upright, Latin turned), by `mode`, with `feather`. No layer is added. Returns the selection. |
 | `add_shape_layer` | Add a vector shape layer above the active layer (or placed with `aboveId` / `belowId` / `parentId` / `index`) and make it active: `shape` (live rect, ellipse, polygon, star or line, document px), `subpaths` (SVG path data or anchors) or several `components` with path ops; `fill` (colour, gradient or pattern, default the foreground colour; `null` none), `stroke` (`width`, `paint`, `align`, `cap`, `join`, `miterLimit`, `dashes` in widths), `fillRule`, `name`, `opacity`, `blend`. Returns the `layer` and the `shape`. One undo step. |
 | `update_shape` | Restyle a shape: `fill` (replace, `null` removes), `stroke` (only the settings given change; `null` removes; a new stroke needs `width` and `paint`), `fillRule`. Geometry is unchanged. Returns the shape. |
 | `set_shape_component` | Change component `componentIndex` (from `get_shape_layer`): `shape` fields (without `kind`, or with the same kind, unset fields keep their values), new `subpaths` (ends the live shape), or `op`. Returns the shape. |

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

@@ -20,7 +20,7 @@ Detail for the `pixerate-image-editor` skill: how to draw and edit vector shapes
    `x2` / `y2`, …; the rest stay), replaces a component's `subpaths` (ending its live shape) or
    changes its `op`. `update_shape` restyles the fill, the stroke (only the settings given) or the
    fill rule. Read `get_shape_layer` first for the component indices.
-4. **Place it**: `offset_layer`, `transform_layer`, `flip_layer`, `rotate_layer_90` and `warp_layer`
+5. **Place it**: `offset_layer`, `transform_layer`, `flip_layer`, `rotate_layer_90` and `warp_layer`
    map the paths, never resample pixels; live shapes stay live under moves, scales, rotations and
    skews (perspective and warps turn them into plain paths). Stroke widths do not scale.
 5. **Style it like any layer**: masks, clipping, blend modes, opacity, fill opacity and layer
@@ -36,25 +36,39 @@ Detail for the `pixerate-image-editor` skill: how to draw and edit vector shapes
    `italic`, `fontSize` in px, `color`, `tracking` in 1/1000 em, `leading` in px, `baselineShift`,
    `underline`, `strikethrough`) and a `paragraph` style (`align`, `autoLeading`, indents,
    `spaceBefore` / `spaceAfter`). Call `list_fonts` first when the font matters: a missing family
-   draws with a fallback and comes back in `missingFonts`.
+   draws with a fallback and comes back in `missingFonts`. For Japanese, Chinese or Korean set in
+   columns pass `orientation: "vertical"` (or switch later with `set_text_orientation`): columns
+   run down from (`x`, `y`), the top of the first column's centre line, and stack right to left;
+   a vertical `box` fills from its right edge and wraps at its height.
 2. **Edit by range**: ranges are `start` / `end` in UTF-16 code units, `end` exclusive, as
    `get_text_layer` reports runs and lines. `set_text` replaces a range (start = end inserts; new
    text takes the style at `start`), `set_text_style` styles a range (only the fields given),
    `set_paragraph_style` styles the paragraphs a range touches. Re-read the runs after an edit
    that changes the length before using old ranges.
 3. **Shape the block**: `set_text_frame` switches between point text and a wrapping box (or
-   resizes the box) with the first line kept in place.
+   resizes the box) with the first line kept in place (vertically, the first column's top-right).
+4. **Vertical text**: ideographs, kana and Hangul stand upright; Latin, digits and spaces turn
+   90° clockwise, which suits words inside Japanese text. For short Latin or acronyms that should
+   read down letter by letter, set `upright: true` on that range with `set_text_style`. Brackets,
+   dashes and 、。 use the font's vertical forms when the shaper reads them (an outline shaper over
+   an OpenType font with `vert`); the browser canvas turns brackets and moves 、。 to the upper
+   right instead. In `get_text_layer`, `lines` are columns: `baseline` is a column's centre in
+   line space, not a y. Use a font with CJK glyphs (`list_fonts`): a Latin-only family draws CJK
+   with a fallback.
 4. **Place it**: `offset_layer`, `transform_layer`, `flip_layer` and `rotate_layer_90` change the
    text's matrix and draw it again (scale, rotate, skew, flips). Distort, perspective and warp are
    refused: rasterize first. Masks, clipping, blend modes and effects work as on any layer.
-5. **Outlines and pixels**: `convert_text_to_shape` makes glyph outlines a shape layer (needs an
+6. **Outlines and pixels**: `convert_text_to_shape` makes glyph outlines a shape layer (needs an
    outline font shaper; the browser canvas cannot); `rasterize_layer` makes it pixels.
+   For a selection in the shape of text (photo-filled letters, text cut out of the image) use
+   `select_text_shape`, the Type Mask: it lays the text out the same way but adds no layer.
 
 ## Photoshop files
 
 `import_psd` brings Photoshop shape layers in as live shapes (paths with their path operations, fill,
 stroke, and live rectangles, rounded rectangles, ellipses and lines) and type layers as live text
-that shows Photoshop's pixels until it is edited. `get_text_layer` reports `rendering: "stored"`
+that shows Photoshop's pixels until it is edited; vertical type comes in vertical (with its
+upright-Latin runs) and goes back out as vertical type. `get_text_layer` reports `rendering: "stored"`
 and `missingFonts` for those: if a font is missing, edits draw with a fallback, so tell the user
 before editing such text, or pick an available font with `set_text_style`. `export_psd` writes both
 kinds back as Photoshop layers; unchanged ones are written byte for byte as they were read.

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

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

package/skills/pixerate-vector/SKILL.md

@@ -106,6 +106,11 @@ Parameter details (gradient fields, effect parameters, width profiles, envelopes
   than splitting text into separate nodes, so it still edits as one paragraph. Create Outlines
   only for final artwork or logos that must not depend on fonts; keep a copy as text if it may
   change.
+  For Japanese, Chinese or Korean set in columns (signage, book spines, posters), use vertical
+  text (`textOrientation: "vertical"` or `vector.setTextOrientation`): CJK stands upright, Latin
+  turns sideways; set a short Latin range `upright: true` to stack it letter by letter. In an
+  area, columns that do not fit past the left edge are `overflow`. Vertical text cannot follow a
+  path.
 
 - **Clean paths.** Use the fewest anchors that describe the shape: anchors at extrema (top,
   bottom, left, right of a curve) and at true corners, handles horizontal or vertical at extrema,
@@ -260,12 +265,13 @@ arrays, to build or replace a stack in one call.
 | Command | Use it to |
 | --- | --- |
 | `vector.listFonts` | See which families the text shaper can draw and whether it gives glyph outlines (`outlines`); read it before choosing fonts or calling `vector.createOutlines`. Returns `{ shaper, outlines, families }`. |
-| `vector.addText` | Add point text (`x`, `y`: the first baseline's start), area text (`x`, `y`, `width`, `height`: wrapped in the box) or text along `path` (SVG path data, with `start`, `end`, `flip`, `orientation`, `baseline`). `font`, `paragraph`, `name`, `fill`, `stroke`, `strokeWidth` optional; black, no stroke by default. Returns the text summary (`id`, lines, bounds, overflow). |
-| `vector.getText` | Read a text node: text, base font, runs as `{ start, end, style }`, paragraph, frame, fill, stroke, laid-out lines, document bounds, `overflow`, `outlines`, shaper and missing fonts. Call before editing ranges. |
+| `vector.addText` | Add point text (`x`, `y`: the first baseline's start), area text (`x`, `y`, `width`, `height`: wrapped in the box) or text along `path` (SVG path data, with `start`, `end`, `flip`, `orientation`, `baseline`). `textOrientation: "vertical"` sets point or area text in columns down and right to left (`x`, `y` the top of the first column's centre; an area fills from its right edge). `font`, `paragraph`, `name`, `fill`, `stroke`, `strokeWidth` optional; black, no stroke by default. Returns the text summary (`id`, `orientation`, lines, bounds, overflow). |
+| `vector.getText` | Read a text node: text, base font, runs as `{ start, end, style }`, paragraph, frame, `orientation`, fill, stroke, laid-out lines, document bounds, `overflow`, `outlines`, shaper and missing fonts. Call before editing ranges. |
 | `vector.setText` | Replace `[start, end)` of the text with `text` (default the whole text; `start` = `end` inserts, `""` deletes). Inserted characters take the style before them. Returns the summary. |
-| `vector.setTextStyle` | Set character fields (`fontFamily`, `fontWeight`, `italic`, `fontSize`, `tracking`, `leading`, `baselineShift`, `underline`, `strikethrough`; null clears) and `fill` over `[start, end)`; the whole text (default) changes the base font and the node's fill. Returns the summary with runs. |
+| `vector.setTextStyle` | Set character fields (`fontFamily`, `fontWeight`, `italic`, `fontSize`, `tracking`, `leading`, `baselineShift`, `underline`, `strikethrough`, `upright` for Latin standing upright in vertical text; null clears) and `fill` over `[start, end)`; the whole text (default) changes the base font and the node's fill. Returns the summary with runs. |
 | `vector.setParagraphStyle` | Set `align` (left, center, right, justify), `autoLeading`, indents and spacing for the node's paragraphs. Returns the summary. |
 | `vector.setTextFrame` | Switch between point, area and path text (`kind`), resize an area (`width`, `height`), move the origin (`x`, `y`) or change path options. Returns the summary. |
+| `vector.setTextOrientation` | Set point or area text `horizontal` or `vertical` (columns top to bottom, right to left; CJK upright, Latin turned sideways unless `upright`). Text on a path cannot be vertical. Returns the summary. |
 | `vector.typeOnPath` | Turn path node `pathId` into text along it (it takes the path's place and drops its paint) with `text`, `font`, `paragraph` (`align` places it along the path) and path options. Returns the summary with the new id. |
 | `vector.createOutlines` | Turn text (`ids`, or text inside groups; default the selection) into paths of its glyph outlines, keeping paint, effects, filters, placement and id. Needs `outlines: true` from `vector.listFonts`. Returns `{ ids }`. |