@pixerate/editor 0.191.0 → 0.193.0

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. */

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

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

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

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

package/dist/image-editor/tools.d.cts

@@ -48,7 +48,7 @@ export interface ImageEditorToolProviderOptions {
  *   `add_shape_component`, `remove_shape_component`, `merge_shape_components` (see
  *   `createImageShapeTools`); `rasterize_layer` turns one into pixels.
  * - Type layers: `list_fonts`, `get_text_layer`, `add_text_layer`, `set_text`, `set_text_style`,
- *   `set_paragraph_style`, `set_text_frame`, `convert_text_to_shape` (see `createImageTypeTools`).
+ *   `set_paragraph_style`, `set_text_frame`, `set_text_orientation`, `convert_text_to_shape` (see `createImageTypeTools`).
  * - Colour management: `get_color_profile`, `assign_profile`, `convert_to_profile`,
  *   `set_proof_setup`, `convert_colors` (see `createImageColorTools`).
  * - Retouching: `clone_stamp`, `heal_brush`, `spot_heal`, `smudge`, `dodge`, `burn`, `sponge`,

package/dist/image-editor/tools.d.ts

@@ -48,7 +48,7 @@ export interface ImageEditorToolProviderOptions {
  *   `add_shape_component`, `remove_shape_component`, `merge_shape_components` (see
  *   `createImageShapeTools`); `rasterize_layer` turns one into pixels.
  * - Type layers: `list_fonts`, `get_text_layer`, `add_text_layer`, `set_text`, `set_text_style`,
- *   `set_paragraph_style`, `set_text_frame`, `convert_text_to_shape` (see `createImageTypeTools`).
+ *   `set_paragraph_style`, `set_text_frame`, `set_text_orientation`, `convert_text_to_shape` (see `createImageTypeTools`).
  * - Colour management: `get_color_profile`, `assign_profile`, `convert_to_profile`,
  *   `set_proof_setup`, `convert_colors` (see `createImageColorTools`).
  * - Retouching: `clone_stamp`, `heal_brush`, `spot_heal`, `smudge`, `dodge`, `burn`, `sponge`,

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

@@ -2,8 +2,8 @@ import type { AgentTool } from '../tools/registry.cjs';
 import type { ImageEditorController } from './controller.cjs';
 /**
  * Agent tools for type layers in the image editor: `list_fonts`, `get_text_layer`,
- * `add_text_layer`, `set_text`, `set_text_style`, `set_paragraph_style`, `set_text_frame` and
- * `convert_text_to_shape`. Every write is one undo step, validates first and returns the layer as
+ * `add_text_layer`, `set_text`, `set_text_style`, `set_paragraph_style`, `set_text_frame`,
+ * `set_text_orientation` and `convert_text_to_shape`. Every write is one undo step, validates first and returns the layer as
  * it is afterwards (with any missing fonts).
  */
 export declare function createImageTypeTools(controller: ImageEditorController): AgentTool[];

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

@@ -2,8 +2,8 @@ import type { AgentTool } from '../tools/registry.js';
 import type { ImageEditorController } from './controller.js';
 /**
  * Agent tools for type layers in the image editor: `list_fonts`, `get_text_layer`,
- * `add_text_layer`, `set_text`, `set_text_style`, `set_paragraph_style`, `set_text_frame` and
- * `convert_text_to_shape`. Every write is one undo step, validates first and returns the layer as
+ * `add_text_layer`, `set_text`, `set_text_style`, `set_paragraph_style`, `set_text_frame`,
+ * `set_text_orientation` and `convert_text_to_shape`. Every write is one undo step, validates first and returns the layer as
  * it is afterwards (with any missing fonts).
  */
 export declare function createImageTypeTools(controller: ImageEditorController): AgentTool[];

package/dist/paint-editor/index.cjs

@@ -7,7 +7,7 @@ var _chunkZ64NRDEHcjs = require('../chunk-Z64NRDEH.cjs');
 
 
 
-var _chunk2UR4OX3Bcjs = require('../chunk-2UR4OX3B.cjs');
+var _chunkUYXL6ZWQcjs = require('../chunk-UYXL6ZWQ.cjs');
 require('../chunk-A2IS7EHE.cjs');
 
 
@@ -54,7 +54,7 @@ var _chunkJLWLX52Lcjs = require('../chunk-JLWLX52L.cjs');
 
 
 var _chunkK7ENM55Pcjs = require('../chunk-K7ENM55P.cjs');
-require('../chunk-EGZM52EO.cjs');
+require('../chunk-BRKVNXDZ.cjs');
 
 
 
@@ -1653,11 +1653,11 @@ function header(state, options) {
   return out;
 }
 function serializePaintDocument(state, options = {}) {
-  const { layers, assets } = _chunk2UR4OX3Bcjs.serializeLayers.call(void 0, state.layers);
+  const { layers, assets } = _chunkUYXL6ZWQcjs.serializeLayers.call(void 0, state.layers);
   return { ...header(state, options), layers, assets };
 }
 async function serializePaintDocumentExternal(state, store, options = {}) {
-  const { layers, assets } = await _chunk2UR4OX3Bcjs.serializeLayersExternal.call(void 0, state.layers, store);
+  const { layers, assets } = await _chunkUYXL6ZWQcjs.serializeLayersExternal.call(void 0, state.layers, store);
   return { ...header(state, options), layers, assets };
 }
 function paintLayersOnly(layers, problems) {
@@ -1694,7 +1694,7 @@ function deserializePaintDocument(raw) {
   const canvas = normalizeCanvas({ width: r.width, height: r.height, dpi: _nullishCoalesce(r.dpi, () => ( void 0)) });
   const paper = _chunkYQ5C5BVKcjs.normalizePaper.call(void 0, _nullishCoalesce(r.paper, () => ( {})));
   const assets = r.assets && typeof r.assets === "object" ? r.assets : {};
-  const layers = paintLayersOnly(_chunk2UR4OX3Bcjs.deserializeLayers.call(void 0, r.layers, { assets, problems }), problems);
+  const layers = paintLayersOnly(_chunkUYXL6ZWQcjs.deserializeLayers.call(void 0, r.layers, { assets, problems }), problems);
   const wanted = typeof r.activeLayerId === "string" ? r.activeLayerId : null;
   const activeLayerId = wanted && _chunkHGTDMKNEcjs.findLayer.call(void 0, layers, wanted) ? wanted : _nullishCoalesce(_optionalChain([_chunkHGTDMKNEcjs.flattenLayers.call(void 0, layers), 'access', _70 => _70.filter, 'call', _71 => _71((l) => l.type === "pixel"), 'access', _72 => _72.pop, 'call', _73 => _73(), 'optionalAccess', _74 => _74.id]), () => ( null));
   const wetEvents = Array.isArray(r.wetEvents) ? r.wetEvents.filter((e) => e && typeof e === "object" && Number.isInteger(e.clock) && typeof e.kind === "string") : [];
@@ -1710,7 +1710,7 @@ async function deserializePaintDocumentAsync(raw, store) {
   if (!raw || typeof raw !== "object") throw new Error("Not a paint document: expected a JSON object.");
   const r = raw;
   const problems = [];
-  const assets = await _chunk2UR4OX3Bcjs.resolveExternalAssets.call(void 0, _nullishCoalesce(r.assets, () => ( {})), store, problems);
+  const assets = await _chunkUYXL6ZWQcjs.resolveExternalAssets.call(void 0, _nullishCoalesce(r.assets, () => ( {})), store, problems);
   const loaded = deserializePaintDocument({ ...r, assets });
   return { ...loaded, problems: [...problems, ...loaded.problems] };
 }
@@ -5409,7 +5409,7 @@ var PaintEditorController = (_class10 = class _PaintEditorController {
       return next.type === "group" ? { ...next, children: toStandard(next.children) } : next;
     });
     const layers = toStandard(dried);
-    const result = _chunk2UR4OX3Bcjs.exportPsd.call(void 0, { width, height, layers: [paperLayer, ...layers], merged, resolution: dpi });
+    const result = _chunkUYXL6ZWQcjs.exportPsd.call(void 0, { width, height, layers: [paperLayer, ...layers], merged, resolution: dpi });
     for (const [mode, names] of changed) {
       const label = _nullishCoalesce(_optionalChain([_chunkCWM3CUUXcjs.BLEND_MODES, 'access', _271 => _271.find, 'call', _272 => _272((m) => m.id === mode), 'optionalAccess', _273 => _273.label]), () => ( mode));
       const std = _nullishCoalesce(_optionalChain([_chunkCWM3CUUXcjs.BLEND_MODES, 'access', _274 => _274.find, 'call', _275 => _275((m) => m.id === _chunkCWM3CUUXcjs.standardBlendMode.call(void 0, mode)), 'optionalAccess', _276 => _276.label]), () => ( _chunkCWM3CUUXcjs.standardBlendMode.call(void 0, mode)));

package/dist/paint-editor/index.js

@@ -7,7 +7,7 @@ import {
   resolveExternalAssets,
   serializeLayers,
   serializeLayersExternal
-} from "../chunk-TXYXF32N.js";
+} from "../chunk-ZIDUPSP4.js";
 import "../chunk-3CI7FRMK.js";
 import {
   EffectRendererPool
@@ -54,7 +54,7 @@ import {
   realPresenceClock,
   tweenPresenceCursor
 } from "../chunk-IVSWRVB4.js";
-import "../chunk-LPIKXPBM.js";
+import "../chunk-GHCXLQ47.js";
 import {
   BRUSH_ID,
   BRUSH_ROTATIONS,

package/dist/text/layout.d.cts

@@ -2,11 +2,11 @@
  * Text layout shared by the image editor's type layers and the vector editor's text nodes: styled
  * runs, paragraphs, line breaking (at spaces and after break characters, and between wide CJK
  * characters), alignment and justification, tracking, leading, indents, spacing, baseline shift,
- * caret positions and hit testing. Everything that needs a font goes through a `TextShaper`, so
+ * horizontal and vertical writing, caret positions and hit testing. Everything that needs a font goes through a `TextShaper`, so
  * the same measurements give the same lines in every host.
  */
 import type { BezierPath } from '../canvas/pathops/bezier.cjs';
-import type { ParagraphRun, TextFont, TextRect, TextShaper, TextStyle } from './types.cjs';
+import type { ParagraphRun, TextFont, TextOrientation, TextRect, TextShaper, TextStyle } from './types.cjs';
 /** What layout needs: the text, its character and paragraph runs and its frame. */
 export interface TextBlock {
     text: string;
@@ -28,6 +28,12 @@ export interface TextBlock {
         width: number;
         height: number;
     };
+    /**
+     * Default `horizontal`. `vertical`: lines are columns running down, stacked right to left. Point
+     * text then starts at (0, 0) at the top of the first column's centre line (`origin: 'top'`: its
+     * right edge); a box's columns start at its right edge and wrap at its height.
+     */
+    orientation?: TextOrientation;
 }
 export declare const DEFAULT_TEXT_STYLE: TextStyle;
 export declare const DEFAULT_AUTO_LEADING = 1.2;
@@ -65,14 +71,39 @@ export declare function paragraphRanges(text: string): Array<{
 }>;
 /** Paragraph runs snapped to whole paragraphs: each paragraph takes the style at its start. */
 export declare function fitParagraphRuns(runs: readonly ParagraphRun[], text: string): ParagraphRun[];
+/** A point in text space (or line space, where said). */
+export interface TextPoint {
+    x: number;
+    y: number;
+}
+/** An affine matrix `[a, b, c, d, e, f]`: `x' = a·x + c·y + e`, `y' = b·x + d·y + f`. */
+export type TextMatrix = readonly [number, number, number, number, number, number];
 /** One laid-out character. */
 export interface LaidChar {
     /** Index in the text (UTF-16 code unit). */
     index: number;
-    /** Text-space x of its start and its advance (tracking and justification included). */
+    /** Line-space x of its start and its advance (tracking and justification included). */
     x: number;
     advance: number;
 }
+/**
+ * A character of vertical text as drawn, text space: its origin on its own baseline, its turn
+ * (`90`: turned sideways, clockwise; `0`: upright), its advance along its baseline and its box
+ * above and below the baseline.
+ */
+export interface LaidGlyph {
+    index: number;
+    /** Code units (2 for a surrogate pair). */
+    length: number;
+    x: number;
+    y: number;
+    angle: 0 | 90;
+    advance: number;
+    ascent: number;
+    descent: number;
+    /** Drawn with the font's vertical alternate (`vert`). */
+    vert: boolean;
+}
 /** A run of characters on one line in one style. */
 export interface LaidFragment {
     start: number;
@@ -81,18 +112,24 @@ export interface LaidFragment {
     font: TextFont;
     /** The family the shaper draws it with. */
     family: string;
+    /** Line space. */
     x: number;
-    /** Baseline in text space (baseline shift applied). */
+    /** Baseline in line space (baseline shift applied); for upright vertical text, the column's centre line. */
     y: number;
     /** Per-character x positions relative to `x` (`end − start + 1` entries). */
     carets: number[];
     /** Whether characters are placed one by one (tracking or justification). */
     spaced: boolean;
+    /** Vertical text only: whether the fragment's characters stand upright (else they are turned sideways). */
+    upright?: boolean;
+    /** Vertical text only: each character as drawn, text space (low surrogates join their pair). */
+    glyphs?: LaidGlyph[];
 }
 export interface LaidLine {
     start: number;
     /** End of the line's characters (line break and trailing spaces excluded from `width`). */
     end: number;
+    /** Line space; for vertical text the column's centre line. */
     baseline: number;
     ascent: number;
     descent: number;
@@ -100,34 +137,78 @@ export interface LaidLine {
     width: number;
     chars: LaidChar[];
     fragments: LaidFragment[];
+    /** Vertical text only: line space → text space (the layout's `matrix`). */
+    matrix?: TextMatrix;
 }
-/** A laid-out type layer in text space. */
+/** A laid-out type layer. */
 export interface TextLayout {
     lines: LaidLine[];
     /** Bounds of the lines (ascent to descent), text space; the box for paragraph text. */
     bounds: TextRect;
     /** Families replaced by a fallback. */
     missingFonts: string[];
+    orientation: TextOrientation;
+    /** Vertical text only: line space → text space. */
+    matrix?: TextMatrix;
 }
 export declare function fontOf(style: TextStyle): TextFont;
 /** Whether a character is a space or tab (spaces hang at line ends and stretch when justifying). */
 export declare const isTextSpace: (c: string) => c is "\t" | " ";
+/**
+ * How a code point is set in vertical text, after Unicode's Vertical_Orientation (UAX #50),
+ * simplified to CJK: `U` upright (ideographs, kana, Hangul, full-width forms, emoji), `R` turned
+ * sideways (Latin and other horizontal scripts, spaces), `Tu` upright in a vertical form when the
+ * font has one (、。 and small kana), `Tr` a vertical form when the font has one, else turned
+ * sideways (brackets, dashes, the long vowel mark, wave dash).
+ */
+export declare function verticalOrientationOf(cp: number): 'U' | 'R' | 'Tu' | 'Tr';
+/** A rectangle mapped through `m` (a quarter turn keeps it a rectangle); `r` itself without `m`. */
+export declare function transformTextRect(m: TextMatrix | undefined, r: TextRect): TextRect;
+/** A line-space point of `layout` in text space (the same point for horizontal text). */
+export declare function lineToTextSpace(layout: Pick<TextLayout, 'matrix'>, p: TextPoint): TextPoint;
+/** A text-space point of `layout` in line space (the same point for horizontal text). */
+export declare function textToLineSpace(layout: Pick<TextLayout, 'matrix'>, p: TextPoint): TextPoint;
+/** A line's box (its advance by ascent to descent) in text space. */
+export declare function textLineRect(l: LaidLine): TextRect;
 /** Lays out a type layer with `shaper` (memoised per layer object and shaper). */
 export declare function layoutText(layer: TextBlock, shaper: TextShaper): TextLayout;
 /** The text index nearest a text-space point (for clicks): the line under it, then the closest caret. */
-export declare function textIndexAt(layout: TextLayout, p: {
-    x: number;
-    y: number;
-}): number;
-/** The caret at text index `index`: its x and the line's top and bottom, text space. */
+export declare function textIndexAt(layout: TextLayout, point: TextPoint): number;
+/**
+ * The caret at text index `index`: in line space its x and the line's top and bottom, and in text
+ * space the segment it draws (`from` the line's top or, vertically, its right edge, `to` the other
+ * side).
+ */
 export declare function caretAt(layout: TextLayout, index: number): {
     x: number;
     top: number;
     bottom: number;
     line: number;
+    from: TextPoint;
+    to: TextPoint;
 };
-/** Underline and strike-through bars of a fragment, text space, as rectangles. */
+/** Quads (text space, four corners each) covering the characters of [start, end), one per line. */
+export declare function textSelectionQuads(layout: TextLayout, start: number, end: number): TextPoint[][];
+/** What an arrow key does to a text caret: along the line (`previous` / `next` character) or across lines. */
+export type TextCaretStep = 'previous' | 'next' | 'line-before' | 'line-after';
+/**
+ * The caret step of an arrow key. Horizontal text: ← → move along the line, ↑ ↓ between lines.
+ * Vertical text: ↑ ↓ move along the column, → to the column before (on the right), ← to the next.
+ */
+export declare function textArrowStep(orientation: TextOrientation | undefined, key: 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown'): TextCaretStep;
+/**
+ * The index on the line before (`dir` −1) or after (+1) the caret at `index`, at the same place
+ * along the line; the start or end of the text (`length`) past the first or last line.
+ */
+export declare function textLineMove(layout: TextLayout, index: number, dir: -1 | 1, length: number): number;
+/** Underline and strike-through bars of a fragment, text space, as rectangles. Vertical text underlines on the right. */
 export declare function textDecorations(f: LaidFragment, l: LaidLine): TextRect[];
 export declare const textRectPath: (r: TextRect) => BezierPath;
-/** The text of a fragment as outlines (one placement per character when spaced), text space. */
+/** The text of a fragment as outlines (one placement per character when spaced or vertical), text space. */
 export declare function textFragmentOutline(shaper: TextShaper, text: string, f: LaidFragment): BezierPath;
+/**
+ * Draws a fragment's text with a drawing shaper in the context's current transform (text space),
+ * fill style and alpha: each glyph of vertical text turned or upright, spaced text a character at
+ * a time. Decorations are not drawn (see `textDecorations`).
+ */
+export declare function drawTextFragment(ctx: CanvasRenderingContext2D, shaper: TextShaper, text: string, f: LaidFragment): void;

package/dist/text/layout.d.ts

@@ -2,11 +2,11 @@
  * Text layout shared by the image editor's type layers and the vector editor's text nodes: styled
  * runs, paragraphs, line breaking (at spaces and after break characters, and between wide CJK
  * characters), alignment and justification, tracking, leading, indents, spacing, baseline shift,
- * caret positions and hit testing. Everything that needs a font goes through a `TextShaper`, so
+ * horizontal and vertical writing, caret positions and hit testing. Everything that needs a font goes through a `TextShaper`, so
  * the same measurements give the same lines in every host.
  */
 import type { BezierPath } from '../canvas/pathops/bezier.js';
-import type { ParagraphRun, TextFont, TextRect, TextShaper, TextStyle } from './types.js';
+import type { ParagraphRun, TextFont, TextOrientation, TextRect, TextShaper, TextStyle } from './types.js';
 /** What layout needs: the text, its character and paragraph runs and its frame. */
 export interface TextBlock {
     text: string;
@@ -28,6 +28,12 @@ export interface TextBlock {
         width: number;
         height: number;
     };
+    /**
+     * Default `horizontal`. `vertical`: lines are columns running down, stacked right to left. Point
+     * text then starts at (0, 0) at the top of the first column's centre line (`origin: 'top'`: its
+     * right edge); a box's columns start at its right edge and wrap at its height.
+     */
+    orientation?: TextOrientation;
 }
 export declare const DEFAULT_TEXT_STYLE: TextStyle;
 export declare const DEFAULT_AUTO_LEADING = 1.2;
@@ -65,14 +71,39 @@ export declare function paragraphRanges(text: string): Array<{
 }>;
 /** Paragraph runs snapped to whole paragraphs: each paragraph takes the style at its start. */
 export declare function fitParagraphRuns(runs: readonly ParagraphRun[], text: string): ParagraphRun[];
+/** A point in text space (or line space, where said). */
+export interface TextPoint {
+    x: number;
+    y: number;
+}
+/** An affine matrix `[a, b, c, d, e, f]`: `x' = a·x + c·y + e`, `y' = b·x + d·y + f`. */
+export type TextMatrix = readonly [number, number, number, number, number, number];
 /** One laid-out character. */
 export interface LaidChar {
     /** Index in the text (UTF-16 code unit). */
     index: number;
-    /** Text-space x of its start and its advance (tracking and justification included). */
+    /** Line-space x of its start and its advance (tracking and justification included). */
     x: number;
     advance: number;
 }
+/**
+ * A character of vertical text as drawn, text space: its origin on its own baseline, its turn
+ * (`90`: turned sideways, clockwise; `0`: upright), its advance along its baseline and its box
+ * above and below the baseline.
+ */
+export interface LaidGlyph {
+    index: number;
+    /** Code units (2 for a surrogate pair). */
+    length: number;
+    x: number;
+    y: number;
+    angle: 0 | 90;
+    advance: number;
+    ascent: number;
+    descent: number;
+    /** Drawn with the font's vertical alternate (`vert`). */
+    vert: boolean;
+}
 /** A run of characters on one line in one style. */
 export interface LaidFragment {
     start: number;
@@ -81,18 +112,24 @@ export interface LaidFragment {
     font: TextFont;
     /** The family the shaper draws it with. */
     family: string;
+    /** Line space. */
     x: number;
-    /** Baseline in text space (baseline shift applied). */
+    /** Baseline in line space (baseline shift applied); for upright vertical text, the column's centre line. */
     y: number;
     /** Per-character x positions relative to `x` (`end − start + 1` entries). */
     carets: number[];
     /** Whether characters are placed one by one (tracking or justification). */
     spaced: boolean;
+    /** Vertical text only: whether the fragment's characters stand upright (else they are turned sideways). */
+    upright?: boolean;
+    /** Vertical text only: each character as drawn, text space (low surrogates join their pair). */
+    glyphs?: LaidGlyph[];
 }
 export interface LaidLine {
     start: number;
     /** End of the line's characters (line break and trailing spaces excluded from `width`). */
     end: number;
+    /** Line space; for vertical text the column's centre line. */
     baseline: number;
     ascent: number;
     descent: number;
@@ -100,34 +137,78 @@ export interface LaidLine {
     width: number;
     chars: LaidChar[];
     fragments: LaidFragment[];
+    /** Vertical text only: line space → text space (the layout's `matrix`). */
+    matrix?: TextMatrix;
 }
-/** A laid-out type layer in text space. */
+/** A laid-out type layer. */
 export interface TextLayout {
     lines: LaidLine[];
     /** Bounds of the lines (ascent to descent), text space; the box for paragraph text. */
     bounds: TextRect;
     /** Families replaced by a fallback. */
     missingFonts: string[];
+    orientation: TextOrientation;
+    /** Vertical text only: line space → text space. */
+    matrix?: TextMatrix;
 }
 export declare function fontOf(style: TextStyle): TextFont;
 /** Whether a character is a space or tab (spaces hang at line ends and stretch when justifying). */
 export declare const isTextSpace: (c: string) => c is "\t" | " ";
+/**
+ * How a code point is set in vertical text, after Unicode's Vertical_Orientation (UAX #50),
+ * simplified to CJK: `U` upright (ideographs, kana, Hangul, full-width forms, emoji), `R` turned
+ * sideways (Latin and other horizontal scripts, spaces), `Tu` upright in a vertical form when the
+ * font has one (、。 and small kana), `Tr` a vertical form when the font has one, else turned
+ * sideways (brackets, dashes, the long vowel mark, wave dash).
+ */
+export declare function verticalOrientationOf(cp: number): 'U' | 'R' | 'Tu' | 'Tr';
+/** A rectangle mapped through `m` (a quarter turn keeps it a rectangle); `r` itself without `m`. */
+export declare function transformTextRect(m: TextMatrix | undefined, r: TextRect): TextRect;
+/** A line-space point of `layout` in text space (the same point for horizontal text). */
+export declare function lineToTextSpace(layout: Pick<TextLayout, 'matrix'>, p: TextPoint): TextPoint;
+/** A text-space point of `layout` in line space (the same point for horizontal text). */
+export declare function textToLineSpace(layout: Pick<TextLayout, 'matrix'>, p: TextPoint): TextPoint;
+/** A line's box (its advance by ascent to descent) in text space. */
+export declare function textLineRect(l: LaidLine): TextRect;
 /** Lays out a type layer with `shaper` (memoised per layer object and shaper). */
 export declare function layoutText(layer: TextBlock, shaper: TextShaper): TextLayout;
 /** The text index nearest a text-space point (for clicks): the line under it, then the closest caret. */
-export declare function textIndexAt(layout: TextLayout, p: {
-    x: number;
-    y: number;
-}): number;
-/** The caret at text index `index`: its x and the line's top and bottom, text space. */
+export declare function textIndexAt(layout: TextLayout, point: TextPoint): number;
+/**
+ * The caret at text index `index`: in line space its x and the line's top and bottom, and in text
+ * space the segment it draws (`from` the line's top or, vertically, its right edge, `to` the other
+ * side).
+ */
 export declare function caretAt(layout: TextLayout, index: number): {
     x: number;
     top: number;
     bottom: number;
     line: number;
+    from: TextPoint;
+    to: TextPoint;
 };
-/** Underline and strike-through bars of a fragment, text space, as rectangles. */
+/** Quads (text space, four corners each) covering the characters of [start, end), one per line. */
+export declare function textSelectionQuads(layout: TextLayout, start: number, end: number): TextPoint[][];
+/** What an arrow key does to a text caret: along the line (`previous` / `next` character) or across lines. */
+export type TextCaretStep = 'previous' | 'next' | 'line-before' | 'line-after';
+/**
+ * The caret step of an arrow key. Horizontal text: ← → move along the line, ↑ ↓ between lines.
+ * Vertical text: ↑ ↓ move along the column, → to the column before (on the right), ← to the next.
+ */
+export declare function textArrowStep(orientation: TextOrientation | undefined, key: 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown'): TextCaretStep;
+/**
+ * The index on the line before (`dir` −1) or after (+1) the caret at `index`, at the same place
+ * along the line; the start or end of the text (`length`) past the first or last line.
+ */
+export declare function textLineMove(layout: TextLayout, index: number, dir: -1 | 1, length: number): number;
+/** Underline and strike-through bars of a fragment, text space, as rectangles. Vertical text underlines on the right. */
 export declare function textDecorations(f: LaidFragment, l: LaidLine): TextRect[];
 export declare const textRectPath: (r: TextRect) => BezierPath;
-/** The text of a fragment as outlines (one placement per character when spaced), text space. */
+/** The text of a fragment as outlines (one placement per character when spaced or vertical), text space. */
 export declare function textFragmentOutline(shaper: TextShaper, text: string, f: LaidFragment): BezierPath;
+/**
+ * Draws a fragment's text with a drawing shaper in the context's current transform (text space),
+ * fill style and alpha: each glyph of vertical text turned or upright, spaced text a character at
+ * a time. Decorations are not drawn (see `textDecorations`).
+ */
+export declare function drawTextFragment(ctx: CanvasRenderingContext2D, shaper: TextShaper, text: string, f: LaidFragment): void;