@pixerate/editor 0.192.0 → 0.193.0

package/dist/{chunk-LPIKXPBM.js → chunk-GHCXLQ47.js}

@@ -4435,6 +4435,40 @@ var isBreakAfter = (c) => c === " " || c === "	" || c === "-" || c === "\u2010"
 var isTextSpace = (c) => c === " " || c === "	";
 var isSpace = isTextSpace;
 var isWide = (code) => code >= 11904 && code <= 40959 || code >= 44032 && code <= 55215 || code >= 63744 && code <= 64255 || code >= 65280 && code <= 65519;
+var isHigh = (code) => code >= 55296 && code <= 56319;
+var isLow = (code) => code >= 56320 && code <= 57343;
+var TR = /* @__PURE__ */ new Set([8229, 8230, 12296, 12297, 12298, 12299, 12300, 12301, 12302, 12303, 12304, 12305, 12308, 12309, 12310, 12311, 12312, 12313, 12314, 12315, 12316, 12336, 12448, 12540, 65288, 65289, 65293, 65306, 65307, 65309, 65339, 65341, 65343, 65371, 65372, 65373, 65374]);
+var TU = /* @__PURE__ */ new Set([12289, 12290, 65292, 65294, 12353, 12355, 12357, 12359, 12361, 12387, 12419, 12421, 12423, 12430, 12437, 12438, 12449, 12451, 12453, 12455, 12457, 12483, 12515, 12517, 12519, 12526, 12533, 12534]);
+var CORNER = /* @__PURE__ */ new Set([12289, 12290, 65292, 65294]);
+function verticalOrientationOf(cp) {
+  if (TR.has(cp)) return "Tr";
+  if (TU.has(cp) || cp >= 12784 && cp <= 12799) return "Tu";
+  if (cp >= 4352 && cp <= 4607 || cp >= 11904 && cp <= 19903 || cp >= 19968 && cp <= 40959 || cp >= 40960 && cp <= 42191 || cp >= 43360 && cp <= 43391 || cp >= 44032 && cp <= 55295 || cp >= 63744 && cp <= 64255 || cp >= 65040 && cp <= 65055 || cp >= 65072 && cp <= 65103 || cp >= 65280 && cp <= 65376 || cp >= 65504 && cp <= 65511 || cp >= 126976 && cp <= 129791 || cp >= 131072 && cp <= 262143)
+    return "U";
+  return "R";
+}
+var applyMatrix2 = (m, x, y) => m ? { x: m[0] * x + m[2] * y + m[4], y: m[1] * x + m[3] * y + m[5] } : { x, y };
+function invertMatrix2(m) {
+  const [a, b, c, d, e, f] = m;
+  const det = a * d - b * c || 1;
+  return [d / det, -b / det, -c / det, a / det, (c * f - d * e) / det, (b * e - a * f) / det];
+}
+function transformTextRect(m, r) {
+  if (!m) return r;
+  const pts = [applyMatrix2(m, r.x, r.y), applyMatrix2(m, r.x + r.width, r.y), applyMatrix2(m, r.x + r.width, r.y + r.height), applyMatrix2(m, r.x, r.y + r.height)];
+  const x0 = Math.min(...pts.map((p) => p.x));
+  const y0 = Math.min(...pts.map((p) => p.y));
+  return { x: x0, y: y0, width: Math.max(...pts.map((p) => p.x)) - x0, height: Math.max(...pts.map((p) => p.y)) - y0 };
+}
+function lineToTextSpace(layout, p) {
+  return applyMatrix2(layout.matrix, p.x, p.y);
+}
+function textToLineSpace(layout, p) {
+  return layout.matrix ? applyMatrix2(invertMatrix2(layout.matrix), p.x, p.y) : { x: p.x, y: p.y };
+}
+function textLineRect(l) {
+  return transformTextRect(l.matrix, { x: l.x, y: l.baseline - l.ascent, width: l.width, height: l.ascent + l.descent });
+}
 var layoutCache = /* @__PURE__ */ new WeakMap();
 function layoutText(layer, shaper) {
   let byShaper = layoutCache.get(layer);
@@ -4450,6 +4484,7 @@ function layoutText(layer, shaper) {
 }
 function computeLayout(layer, shaper) {
   const { text, frame } = layer;
+  const vertical = layer.orientation === "vertical";
   const runs = fitRuns(layer.runs, text.length, DEFAULT_TEXT_STYLE);
   const missing = /* @__PURE__ */ new Set();
   const resolved = /* @__PURE__ */ new Map();
@@ -4465,7 +4500,15 @@ function computeLayout(layer, shaper) {
     return fam;
   };
   const resolvedFont = (style) => ({ ...fontOf(style), family: familyOf(fontOf(style)) });
+  const verticalOf = (ch, style) => {
+    const font = resolvedFont(style);
+    if (shaper.vertical) return shaper.vertical(ch, font);
+    const m = shaper.metrics(font);
+    return { advance: m.ascent + m.descent, originY: m.ascent, alternate: false };
+  };
   const box = frame.kind === "box" ? frame : null;
+  const inlineSize = box ? vertical ? box.height : box.width : 0;
+  const matrix = vertical ? [0, 1, -1, 0, box ? box.width : 0, 0] : void 0;
   const lines = [];
   let y = 0;
   let first = true;
@@ -4483,7 +4526,38 @@ function computeLayout(layer, shaper) {
       const seg = text.slice(i, j);
       const carets = shaper.measure(seg, resolvedFont(style));
       const track = (style.tracking ?? 0) / 1e3 * style.fontSize;
-      for (let k = 0; k < seg.length; k++) chars.push({ index: i + k, ch: seg[k], advance: (carets[k + 1] ?? 0) - (carets[k] ?? 0) + track, style });
+      for (let k = 0; k < seg.length; k++) {
+        const index = i + k;
+        const advance = (carets[k + 1] ?? 0) - (carets[k] ?? 0);
+        if (!vertical) {
+          chars.push({ index, ch: seg[k], advance: advance + track, style });
+          continue;
+        }
+        const code = seg.charCodeAt(k);
+        if (isLow(code) && index > 0 && isHigh(text.charCodeAt(index - 1))) {
+          const prev = chars[chars.length - 1];
+          if (prev?.up) {
+            chars.push({ index, ch: seg[k], advance: 0, style, up: prev.up, low: true });
+          } else chars.push({ index, ch: seg[k], advance, style, low: true });
+          continue;
+        }
+        const cp = text.codePointAt(index) ?? code;
+        const kind = verticalOrientationOf(cp);
+        let upright = kind === "U" || kind === "Tu" || kind === "R" && Boolean(style.upright) && !isSpace(seg[k]) && seg[k] !== "\n";
+        let vm = null;
+        const char = cp > 65535 ? text.slice(index, index + 2) : seg[k];
+        if (upright || kind === "Tr") {
+          vm = verticalOf(char, style);
+          if (kind === "Tr") upright = vm.alternate;
+        }
+        if (!upright || !vm) {
+          chars.push({ index, ch: seg[k], advance: advance + track, style });
+          continue;
+        }
+        const corner = kind === "Tu" && !vm.alternate && CORNER.has(cp) ? style.fontSize * 0.55 : 0;
+        const alone = shaper.measure(char, resolvedFont(style));
+        chars.push({ index, ch: seg[k], advance: vm.advance + track, style, up: { width: alone[alone.length - 1] ?? advance, originY: vm.originY, vert: vm.alternate, dx: corner, dy: -corner } });
+      }
       i = j;
     }
     const startIndent = pstyle.startIndent ?? 0;
@@ -4494,13 +4568,13 @@ function computeLayout(layer, shaper) {
     else {
       let s = 0;
       while (s < chars.length) {
-        const avail = box.width - startIndent - endIndent - (breaks.length === 0 ? firstIndent : 0);
+        const avail = inlineSize - startIndent - endIndent - (breaks.length === 0 ? firstIndent : 0);
         let w = 0;
         let e = s;
         let lastBreak = -1;
         while (e < chars.length) {
           const c = chars[e];
-          if (!isSpace(c.ch) && w + c.advance > avail && e > s) break;
+          if (!isSpace(c.ch) && w + c.advance > avail && e > s && !c.low) break;
           w += c.advance;
           if (isBreakAfter(c.ch) || isWide(c.ch.charCodeAt(0)) || e + 1 < chars.length && isWide(chars[e + 1].ch.charCodeAt(0))) lastBreak = e + 1;
           e++;
@@ -4521,9 +4595,14 @@ function computeLayout(layer, shaper) {
       let descent = 0;
       let leading = 0;
       for (const st of styles) {
-        const m = shaper.metrics(resolvedFont(st));
-        ascent = Math.max(ascent, m.ascent);
-        descent = Math.max(descent, m.descent);
+        if (vertical) {
+          ascent = Math.max(ascent, st.fontSize / 2);
+          descent = ascent;
+        } else {
+          const m = shaper.metrics(resolvedFont(st));
+          ascent = Math.max(ascent, m.ascent);
+          descent = Math.max(descent, m.descent);
+        }
         leading = Math.max(leading, st.leading ?? autoLeading * st.fontSize);
       }
       if (first) {
@@ -4537,13 +4616,13 @@ function computeLayout(layer, shaper) {
       let extraPerSpace = 0;
       if (box && align === "justify" && !lastLine) {
         const spaces = lineChars.slice(0, visibleEnd).filter((c) => isSpace(c.ch)).length;
-        const avail = box.width - startIndent - endIndent - (li === 0 ? firstIndent : 0);
+        const avail = inlineSize - startIndent - endIndent - (li === 0 ? firstIndent : 0);
         if (spaces > 0 && avail > width) extraPerSpace = (avail - width) / spaces;
       }
       let x0;
       const fullWidth = width + extraPerSpace * lineChars.slice(0, visibleEnd).filter((c) => isSpace(c.ch)).length;
       if (box) {
-        const avail = box.width - startIndent - endIndent - (li === 0 ? firstIndent : 0);
+        const avail = inlineSize - startIndent - endIndent - (li === 0 ? firstIndent : 0);
         x0 = indent + (align === "center" ? (avail - fullWidth) / 2 : align === "right" ? avail - fullWidth : 0);
       } else x0 = indent + (align === "center" ? -fullWidth / 2 : align === "right" ? -fullWidth : 0);
       const laid = [];
@@ -4557,27 +4636,57 @@ function computeLayout(layer, shaper) {
       let k = 0;
       while (k < lineChars.length) {
         const st = lineChars[k].style;
+        const up = Boolean(lineChars[k].up);
         let m = k + 1;
-        while (m < lineChars.length && lineChars[m].style === st) m++;
+        while (m < lineChars.length && lineChars[m].style === st && Boolean(lineChars[m].up) === up) m++;
         const font = resolvedFont(st);
         const fx = laid[k].x;
         const carets = [0];
         for (let q = k; q < m; q++) carets.push(laid[q].x + laid[q].advance - fx);
-        fragments.push({
+        const shift = st.baselineShift ?? 0;
+        let fy = y - shift;
+        if (vertical && !up) {
+          const hm = shaper.metrics(font);
+          fy = y + (hm.ascent - hm.descent) / 2 - shift;
+        }
+        const fragment = {
           start: lineChars[k].index,
           end: lineChars[m - 1].index + 1,
           style: st,
           font,
           family: font.family,
           x: fx,
-          y: y - (st.baselineShift ?? 0),
+          y: fy,
           carets,
-          spaced: Boolean(st.tracking) || extraPerSpace > 0
-        });
+          spaced: Boolean(st.tracking) || extraPerSpace > 0 || up
+        };
+        if (vertical) {
+          const glyphs = [];
+          for (let q = k; q < m; q++) {
+            const c = lineChars[q];
+            const lc = laid[q];
+            if (c.low && q > k) {
+              const g = glyphs[glyphs.length - 1];
+              g.length = 2;
+              if (!up) g.advance += lc.advance;
+              continue;
+            }
+            const p = applyMatrix2(matrix, lc.x, fy);
+            if (c.up) {
+              const u = c.up;
+              glyphs.push({ index: c.index, length: 1, x: p.x - u.width / 2 + u.dx, y: p.y + u.originY + u.dy, angle: 0, advance: u.width, ascent: u.originY + u.dy, descent: lc.advance - u.originY - u.dy, vert: u.vert });
+            } else glyphs.push({ index: c.index, length: 1, x: p.x, y: p.y, angle: 90, advance: lc.advance, ascent: fy - (y - ascent), descent: y + descent - fy, vert: false });
+          }
+          fragment.upright = up;
+          fragment.glyphs = glyphs;
+        }
+        fragments.push(fragment);
         k = m;
       }
       const lineStart = lineChars.length ? lineChars[0].index : para.start;
-      lines.push({ start: lineStart, end: lineChars.length ? lineChars[lineChars.length - 1].index + 1 : para.start, baseline: y, ascent, descent, x: x0, width, chars: laid, fragments });
+      const line = { start: lineStart, end: lineChars.length ? lineChars[lineChars.length - 1].index + 1 : para.start, baseline: y, ascent, descent, x: x0, width, chars: laid, fragments };
+      if (matrix) line.matrix = matrix;
+      lines.push(line);
     });
     y += pstyle.spaceAfter ?? 0;
   });
@@ -4594,12 +4703,15 @@ function computeLayout(layer, shaper) {
     const top = lines.length ? lines[0].baseline - lines[0].ascent : 0;
     const last = lines[lines.length - 1];
     const bottom = last ? last.baseline + last.descent : 0;
-    bounds = { x: x0, y: top, width: Math.max(0, x1 - x0), height: Math.max(0, bottom - top) };
+    bounds = transformTextRect(matrix, { x: x0, y: top, width: Math.max(0, x1 - x0), height: Math.max(0, bottom - top) });
   }
-  return { lines, bounds, missingFonts: [...missing] };
+  const out = { lines, bounds, missingFonts: [...missing], orientation: vertical ? "vertical" : "horizontal" };
+  if (matrix) out.matrix = matrix;
+  return out;
 }
-function textIndexAt(layout, p) {
+function textIndexAt(layout, point) {
   if (!layout.lines.length) return 0;
+  const p = textToLineSpace(layout, point);
   let line = layout.lines[layout.lines.length - 1];
   for (const l of layout.lines) {
     if (p.y <= l.baseline + l.descent) {
@@ -4614,23 +4726,60 @@ function textIndexAt(layout, p) {
 }
 function caretAt(layout, index) {
   const lines = layout.lines;
-  if (!lines.length) return { x: 0, top: 0, bottom: 0, line: 0 };
+  const caret = (x, l2, line) => {
+    const top = l2.baseline - l2.ascent;
+    const bottom = l2.baseline + l2.descent;
+    return { x, top, bottom, line, from: applyMatrix2(l2.matrix, x, top), to: applyMatrix2(l2.matrix, x, bottom) };
+  };
+  if (!lines.length) return { x: 0, top: 0, bottom: 0, line: 0, from: { x: 0, y: 0 }, to: { x: 0, y: 0 } };
   for (let li = 0; li < lines.length; li++) {
     const l2 = lines[li];
     const next = lines[li + 1];
     if (next && index >= next.start && (next.chars.length || index > l2.end || next.start > l2.end)) continue;
     const c = l2.chars.find((ch) => ch.index === index);
     const prev = l2.chars.find((ch) => ch.index === index - 1);
-    const x = c ? c.x : prev ? prev.x + prev.advance : l2.x;
-    return { x, top: l2.baseline - l2.ascent, bottom: l2.baseline + l2.descent, line: li };
+    return caret(c ? c.x : prev ? prev.x + prev.advance : l2.x, l2, li);
   }
   const l = lines[lines.length - 1];
-  return { x: l.x + l.width, top: l.baseline - l.ascent, bottom: l.baseline + l.descent, line: lines.length - 1 };
+  return caret(l.x + l.width, l, lines.length - 1);
+}
+function textSelectionQuads(layout, start, end) {
+  const out = [];
+  if (end <= start) return out;
+  for (const l of layout.lines) {
+    const chars = l.chars.filter((c) => c.index >= start && c.index < 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;
+    out.push([applyMatrix2(l.matrix, x0, top), applyMatrix2(l.matrix, x1, top), applyMatrix2(l.matrix, x1, bottom), applyMatrix2(l.matrix, x0, bottom)]);
+  }
+  return out;
+}
+function textArrowStep(orientation, key) {
+  if (orientation === "vertical") return key === "ArrowUp" ? "previous" : key === "ArrowDown" ? "next" : key === "ArrowRight" ? "line-before" : "line-after";
+  return key === "ArrowLeft" ? "previous" : key === "ArrowRight" ? "next" : key === "ArrowUp" ? "line-before" : "line-after";
+}
+function textLineMove(layout, index, dir, length2) {
+  if (!layout.lines.length) return dir < 0 ? 0 : length2;
+  const c = caretAt(layout, index);
+  const target = layout.lines[c.line + dir];
+  if (!target) return dir < 0 ? 0 : length2;
+  const hit = target.chars.find((ch) => c.x < ch.x + ch.advance / 2);
+  const last = target.chars[target.chars.length - 1];
+  return hit ? hit.index : last ? last.index + 1 : target.start;
 }
 function textDecorations(f, l) {
   const out = [];
   const t = Math.max(1, f.style.fontSize / 15);
   const w = f.carets[f.carets.length - 1];
+  if (l.matrix) {
+    const centre = l.baseline - (f.style.baselineShift ?? 0);
+    if (f.style.underline) out.push(transformTextRect(l.matrix, { x: f.x, y: centre - l.ascent, width: w, height: t }));
+    if (f.style.strikethrough) out.push(transformTextRect(l.matrix, { x: f.x, y: centre - t / 2, width: w, height: t }));
+    return out;
+  }
   if (f.style.underline) out.push({ x: f.x, y: f.y + Math.max(t, l.descent * 0.35), width: w, height: t });
   if (f.style.strikethrough) out.push({ x: f.x, y: f.y - l.ascent * 0.3 - t / 2, width: w, height: t });
   return out;
@@ -4642,7 +4791,25 @@ var textRectPath = (r) => [
   { type: "L", x: r.x, y: r.y + r.height },
   { type: "Z" }
 ];
+function turnPath(path, x, y) {
+  return path.map((c) => {
+    if (c.type === "Z") return c;
+    if (c.type === "M" || c.type === "L") return { type: c.type, x: x - c.y, y: y + c.x };
+    if (c.type === "Q") return { type: "Q", x1: x - c.y1, y1: y + c.x1, x: x - c.y, y: y + c.x };
+    return { type: "C", x1: x - c.y1, y1: y + c.x1, x2: x - c.y2, y2: y + c.x2, x: x - c.y, y: y + c.x };
+  });
+}
 function textFragmentOutline(shaper, text, f) {
+  if (f.glyphs) {
+    const out2 = [];
+    for (const g of f.glyphs) {
+      const ch = text.slice(g.index, g.index + g.length);
+      if (isSpace(ch)) continue;
+      const opts = g.vert ? { vertical: true } : void 0;
+      out2.push(...g.angle ? turnPath(shaper.outline(ch, f.font, 0, 0, opts), g.x, g.y) : shaper.outline(ch, f.font, g.x, g.y, opts));
+    }
+    return out2;
+  }
   const s = text.slice(f.start, f.end);
   if (!f.spaced) return shaper.outline(s, f.font, f.x, f.y);
   const out = [];
@@ -4652,6 +4819,28 @@ function textFragmentOutline(shaper, text, f) {
   }
   return out;
 }
+function drawTextFragment(ctx, shaper, text, f) {
+  if (f.glyphs) {
+    for (const g of f.glyphs) {
+      const ch = text.slice(g.index, g.index + g.length);
+      if (isSpace(ch)) continue;
+      const opts = g.vert ? { vertical: true } : void 0;
+      if (!g.angle) {
+        shaper.draw(ctx, ch, f.font, g.x, g.y, opts);
+        continue;
+      }
+      ctx.save();
+      ctx.translate(g.x, g.y);
+      ctx.rotate(Math.PI / 2);
+      shaper.draw(ctx, ch, f.font, 0, 0, opts);
+      ctx.restore();
+    }
+    return;
+  }
+  const s = text.slice(f.start, f.end);
+  if (!f.spaced) shaper.draw(ctx, s, f.font, f.x, f.y);
+  else for (let k = 0; k < s.length; k++) if (!isSpace(s[k])) shaper.draw(ctx, s[k], f.font, f.x + f.carets[k], f.y);
+}
 
 // src/text/shapers.ts
 var GENERIC = /* @__PURE__ */ new Set(["serif", "sans-serif", "monospace", "cursive", "fantasy", "system-ui", "ui-serif", "ui-sans-serif", "ui-monospace", "ui-rounded", "math", "emoji", "fangsong"]);
@@ -4797,8 +4986,15 @@ function createOutlineTextShaper(fonts, options = {}) {
       for (let i = 1; i <= text.length; i++) out.push(face.getAdvanceWidth(text.slice(0, i), font.size, { kerning: true }));
       return out;
     },
-    outline(text, font, x, y) {
-      return toPath(pick(font).entry.face.getPath(text, x, y, font.size, { kerning: true }).commands);
+    outline(text, font, x, y, opts) {
+      return toPath(pick(font).entry.face.getPath(text, x, y, font.size, opts?.vertical ? { kerning: true, vertical: true } : { kerning: true }).commands);
+    },
+    vertical(char, font) {
+      const { face } = pick(font).entry;
+      const k = font.size / face.unitsPerEm;
+      const v2 = face.getVerticalMetrics?.(char);
+      if (v2) return { advance: v2.advance * k, originY: v2.originY * k, alternate: v2.alternate };
+      return { advance: (face.ascender - face.descender) * k, originY: face.ascender * k, alternate: false };
     },
     families() {
       return [...new Set(entries.map((e) => e.family))];
@@ -4860,7 +5056,7 @@ function vectorTextFamilies() {
   return getVectorTextShaper().families?.() ?? ["sans-serif", "serif", "monospace"];
 }
 var DEFAULT_VECTOR_FONT = { fontFamily: "sans-serif", fontWeight: 400, fontSize: 24 };
-var VECTOR_CHARACTER_STYLE_KEYS = ["fontFamily", "fontWeight", "italic", "fontSize", "tracking", "leading", "baselineShift", "underline", "strikethrough"];
+var VECTOR_CHARACTER_STYLE_KEYS = ["fontFamily", "fontWeight", "italic", "fontSize", "tracking", "leading", "baselineShift", "underline", "strikethrough", "upright"];
 var VECTOR_PARAGRAPH_STYLE_KEYS = ["align", "autoLeading", "firstLineIndent", "startIndent", "endIndent", "spaceBefore", "spaceAfter"];
 var VectorTextError = class extends Error {
 };
@@ -5005,7 +5201,8 @@ function textBlock(node) {
       return { length: r.end - r.start, style: { ...r.style, color: `#${i}` } };
     }),
     paragraphs: [{ length: text.length, style: { ...node.paragraph ?? {}, ...node.frame.kind === "path" ? { align: "left" } : {} } }],
-    frame: node.frame.kind === "area" ? { kind: "box", width: Math.max(0, node.frame.width), height: Math.max(0, node.frame.height) } : { kind: "point" }
+    frame: node.frame.kind === "area" ? { kind: "box", width: Math.max(0, node.frame.width), height: Math.max(0, node.frame.height) } : { kind: "point" },
+    ...node.orientation === "vertical" && node.frame.kind !== "path" ? { orientation: "vertical" } : {}
   };
 }
 var charAt = (text, i) => {
@@ -5039,13 +5236,21 @@ function computeLayout2(node, shaper) {
   };
   if (frame.kind !== "path") {
     text.lines.forEach((l, li) => {
-      if (frame.kind === "area" && li > 0 && l.baseline + l.descent > frame.height + 1e-6) {
+      if (frame.kind === "area" && li > 0 && l.baseline + l.descent > (l.matrix ? frame.width : frame.height) + 1e-6) {
         overflow = true;
         return;
       }
-      lines.push({ start: l.start, end: l.end, baseline: origin.y + l.baseline, x: origin.x + l.x, width: l.width });
+      if (l.matrix) {
+        const top = lineToTextSpace(text, { x: l.x, y: l.baseline });
+        lines.push({ start: l.start, end: l.end, baseline: origin.x + top.x, x: origin.y + top.y, width: l.width });
+      } else lines.push({ start: l.start, end: l.end, baseline: origin.y + l.baseline, x: origin.x + l.x, width: l.width });
       for (const f of l.fragments) {
         const from = glyphs.length;
+        if (f.glyphs) {
+          for (const g of f.glyphs) glyphs.push({ index: g.index, char: block.text.slice(g.index, g.index + g.length), x: origin.x + g.x, y: origin.y + g.y, angle: g.angle, advance: g.advance, ascent: g.ascent, descent: g.descent, fragment: fragments.length });
+          fragments.push({ style: styleOf(f), font: f.font, ...fillOf(f) !== void 0 ? { fill: fillOf(f) } : {}, from, to: glyphs.length, line: lines.length - 1, laid: { fragment: f, line: l } });
+          continue;
+        }
         for (let k = 0; k < f.end - f.start; k++) {
           const index = f.start + k;
           const ch = block.text[index];
@@ -5192,7 +5397,7 @@ function vectorTextPaths(node) {
     const glyphs = layout.glyphs.slice(f.from, f.to);
     if (!glyphs.length) return;
     if (!outlines) {
-      if (node.frame.kind === "path") {
+      if (node.frame.kind === "path" || layout.text.orientation === "vertical") {
         for (const g of glyphs) if (!isTextSpace(g.char)) out.push(...polygon2(glyphBox(g)));
       } else {
         const first = glyphs[0];
@@ -5234,7 +5439,7 @@ function polygon2(pts) {
   return [{ type: "M", x: pts[0].x, y: pts[0].y }, ...pts.slice(1).map((p) => ({ type: "L", x: p.x, y: p.y })), { type: "Z" }];
 }
 function vectorTextPaintSource(node, fill, subpaths = []) {
-  const { type: _t, text: _x, font: _f, runs: _r, paragraph: _p, frame: _fr, ...rest } = node;
+  const { type: _t, text: _x, font: _f, runs: _r, paragraph: _p, frame: _fr, orientation: _o, ...rest } = node;
   const out = { ...rest, type: "path", subpaths, fillRule: "nonzero" };
   if (fill === void 0) return out;
   if (Array.isArray(out.fills) && out.fills.length) {
@@ -5257,7 +5462,7 @@ function vectorTextCaret(node, index) {
   if (node.frame.kind !== "path") {
     const c = caretAt(layout.text, index);
     const o = layout.origin;
-    return { top: { x: o.x + c.x, y: o.y + c.top }, bottom: { x: o.x + c.x, y: o.y + c.bottom }, line: c.line };
+    return { top: { x: o.x + c.from.x, y: o.y + c.from.y }, bottom: { x: o.x + c.to.x, y: o.y + c.to.y }, line: c.line };
   }
   const g = glyphs.find((x) => x.index >= index);
   if (g && g.index === index) return at2(g, 0);
@@ -5298,6 +5503,10 @@ function vectorTextSelectionQuads(node, start, end) {
   const layout = layoutVectorText(node);
   const picked = layout.glyphs.filter((g) => g.index >= start && g.index < end);
   if (node.frame.kind === "path") return picked.map(glyphBox);
+  if (layout.text.orientation === "vertical") {
+    const o = layout.origin;
+    return textSelectionQuads(layout.text, start, end).map((q) => q.map((p) => ({ x: o.x + p.x, y: o.y + p.y })));
+  }
   const byLine = /* @__PURE__ */ new Map();
   for (const g of picked) {
     const line = layout.fragments[g.fragment].line;
@@ -5336,6 +5545,7 @@ function patchVectorCharacterStyle(base, patch, path = "style") {
       case "italic":
       case "underline":
       case "strikethrough":
+      case "upright":
         if (typeof v2 !== "boolean" && v2 !== null) fail(`${path}.${k} must be true or false.`);
         if (v2) out[k] = true;
         else delete out[k];
@@ -5413,6 +5623,11 @@ function normalizeVectorTextRuns(text, runs) {
   if (cleaned.every((r) => !Object.keys(r.style).length)) return null;
   return cleaned;
 }
+function vectorTextOrientation(value, path = "orientation") {
+  if (value === void 0 || value === null || value === "horizontal") return void 0;
+  if (value !== "vertical") fail(`${path} must be horizontal or vertical, got ${JSON.stringify(value)}.`);
+  return "vertical";
+}
 function sanitizeVectorTextFields(value) {
   const text = typeof value.text === "string" ? value.text.replace(/\r\n?/g, "\n") : "";
   const font = patchVectorCharacterStyle({ ...DEFAULT_VECTOR_FONT }, value.font ?? {}, "font");
@@ -5425,7 +5640,8 @@ function sanitizeVectorTextFields(value) {
   ) : null;
   const paragraph = value.paragraph ? patchVectorParagraphStyle({}, value.paragraph) : null;
   const frame = sanitizeVectorTextFrame(value.frame ?? { kind: "point", x: 0, y: 0 });
-  return { text, font, ...runs ? { runs } : {}, ...paragraph && Object.keys(paragraph).length ? { paragraph } : {}, frame };
+  const orientation = vectorTextOrientation(value.orientation);
+  return { text, font, ...runs ? { runs } : {}, ...paragraph && Object.keys(paragraph).length ? { paragraph } : {}, frame, ...orientation ? { orientation } : {} };
 }
 function vectorTextRange(text, start, end) {
   const s = start === void 0 ? 0 : start;
@@ -5567,6 +5783,13 @@ function vectorTextBoxOutline(node) {
   layout.text.lines.forEach((l, i) => {
     const line = layout.lines[i];
     if (!line) return;
+    if (l.matrix) {
+      const r = textLineRect(l);
+      const o = layout.origin;
+      const h = Math.max(r.height, 1);
+      out.push(...polygon2([{ x: o.x + r.x, y: o.y + r.y }, { x: o.x + r.x + r.width, y: o.y + r.y }, { x: o.x + r.x + r.width, y: o.y + r.y + h }, { x: o.x + r.x, y: o.y + r.y + h }]));
+      return;
+    }
     const top = line.baseline - l.ascent;
     const bottom = line.baseline + l.descent;
     const w = Math.max(l.width, 1);
@@ -8514,7 +8737,7 @@ function vectorDocumentToSvg(doc, options = {}) {
   };
   const emitTextElement = (node, depth, attrs) => {
     const geometry = vectorTextGeometryNode(node);
-    const fields = { text: node.text, font: node.font, ...node.runs?.length ? { runs: node.runs } : {}, ...node.paragraph ? { paragraph: node.paragraph } : {}, frame: node.frame, ...node.effects?.length ? { effects: node.effects } : {} };
+    const fields = { text: node.text, font: node.font, ...node.runs?.length ? { runs: node.runs } : {}, ...node.paragraph ? { paragraph: node.paragraph } : {}, frame: node.frame, ...node.orientation ? { orientation: node.orientation } : {}, ...node.effects?.length ? { effects: node.effects } : {} };
     let data = ` data-vector-text="${escapeAttr2(JSON.stringify(fields))}"`;
     if (hasVectorPaintStacks(node)) data += ` data-vector-fills="${escapeAttr2(JSON.stringify(vectorFills(node)))}" data-vector-strokes="${escapeAttr2(JSON.stringify(vectorStrokes(node)))}"`;
     else {
@@ -10685,13 +10908,18 @@ export {
   paragraphRanges,
   fitParagraphRuns,
   fontOf,
-  isTextSpace,
+  transformTextRect,
+  lineToTextSpace,
   layoutText,
   textIndexAt,
   caretAt,
+  textSelectionQuads,
+  textArrowStep,
+  textLineMove,
   textDecorations,
   textRectPath,
   textFragmentOutline,
+  drawTextFragment,
   cssFontFamily,
   cssFont,
   createCanvasTextShaper,
@@ -10723,6 +10951,7 @@ export {
   patchVectorParagraphStyle,
   sanitizeVectorTextFrame,
   normalizeVectorTextRuns,
+  vectorTextOrientation,
   sanitizeVectorTextFields,
   vectorTextRange,
   replaceVectorText,

package/dist/{chunk-VRXXAXUT.js → chunk-MLC7HUHO.js}

@@ -18,7 +18,7 @@ import {
   unionBounds,
   vectorGradientPoints,
   widthProfileAt
-} from "./chunk-LPIKXPBM.js";
+} from "./chunk-GHCXLQ47.js";
 import {
   segmentLength,
   segmentParamAtLength,