@zseven-w/pen-core 0.6.0 → 0.7.0

package/src/layout/normalize-tree.ts

@@ -0,0 +1,140 @@
+import type { PenNode, ContainerProps } from '@zseven-w/pen-types';
+import { isBadgeOverlayNode } from '../node-helpers.js';
+import { inferLayout } from './engine.js';
+
+/**
+ * Normalize layout state across a node tree (mutates in place).
+ *
+ * Two fixes applied recursively to every frame:
+ *
+ * 1. When a frame has children but no explicit `layout`, write one:
+ *    - First try `inferLayout()` (horizontal signals: gap, padding,
+ *      fill_container children).
+ *    - If that returns undefined and the frame has 2+ children, fall back
+ *      to `vertical` — BUT only when no non-overlay child carries explicit
+ *      `x`/`y`. Any such coordinate is treated as a deliberate signal that
+ *      the frame is an absolute-positioning container (phone mockups, hero
+ *      images with floating overlays, etc.) and we leave it alone.
+ *
+ * 2. When a frame has an active layout (`vertical` or `horizontal`), strip
+ *    `x`/`y` from every non-overlay child. Overlay children (badges, pills,
+ *    tags, floating indicators) keep their absolute coordinates.
+ *
+ * Used as a post-generation pass after an AI model produces a subtree. It
+ * corrects two common model mistakes:
+ *   - Forgetting to set `layout` on a container (children would otherwise
+ *     stack at (0,0) because `computeLayoutPositions` skips layout-less
+ *     parents).
+ *   - Leaving stale `x`/`y` on children of an auto-layout frame (causes
+ *     visible misalignment when the layout engine also tries to position
+ *     them).
+ *
+ * Ordering requirement: MUST run AFTER any role-based resolution pass that
+ * populates `layout` from semantic roles (e.g. navbar → 'horizontal').
+ * Running this first would write the generic 'vertical' fallback onto a
+ * navbar frame, and the later role resolver — which only fills undefined
+ * fields — would refuse to overwrite it. Treat this function as the last
+ * safety net, not the first opinion.
+ */
+export function normalizeTreeLayout(node: PenNode): void {
+  if (node.type === 'frame' && 'children' in node && Array.isArray(node.children)) {
+    const c = node as PenNode & ContainerProps;
+    const children = node.children;
+
+    // (1) Ensure an explicit layout when children exist.
+    // Only fill in when `layout` is missing — an explicit `'none'` is
+    // intentional (absolute positioning) and must be preserved.
+    if (c.layout == null && children.length > 0) {
+      const inferred = inferLayout(node);
+      if (inferred) {
+        c.layout = inferred;
+      } else if (children.length >= 2 && !hasAbsolutePositionedChild(children)) {
+        // Safe to treat as a "model forgot layout" case: nobody carries x/y,
+        // so there's no absolute-positioning intent to destroy.
+        c.layout = 'vertical';
+      }
+    }
+
+    // (2) Strip x/y from non-overlay children of active-layout frames.
+    if (c.layout === 'vertical' || c.layout === 'horizontal') {
+      for (const child of children) {
+        if (!isBadgeOverlayNode(child)) {
+          if ('x' in child) delete (child as { x?: number }).x;
+          if ('y' in child) delete (child as { y?: number }).y;
+        }
+      }
+    }
+  }
+
+  // Recurse into children regardless of node type (groups/pages may nest frames).
+  if ('children' in node && Array.isArray(node.children)) {
+    for (const child of node.children) {
+      normalizeTreeLayout(child);
+    }
+  }
+}
+
+/**
+ * Decide whether a layout-less parent should be treated as an absolute-
+ * positioning container (skip the `vertical` fallback) instead of being
+ * verticalized.
+ *
+ * Two signals count as "this is an absolute-positioning container":
+ *
+ *   1. A non-overlay child has a numeric `x` or `y` (including 0). Models
+ *      that explicitly position children clearly intend absolute layout.
+ *
+ *   2. EVERY non-overlay child is a "composition primitive" — currently
+ *      `frame`, `ellipse`, or `path`. AI models routinely emit structured
+ *      compositions at (0,0) without writing x/y at all: nested-frame
+ *      badge stacks, hero overlays, rings built from concentric
+ *      ellipses, icon compositions built from paths. The previous check
+ *      only counted frame children, so an ellipse-only or path-only
+ *      composition (e.g. 3 concentric ellipses forming a progress ring)
+ *      fell through to the vertical fallback and rendered as a broken
+ *      list.
+ *
+ *      The rule intentionally does NOT treat `rectangle` as a
+ *      composition primitive: plain rectangles are by far the most
+ *      common children in content stacks (nav buttons, list items,
+ *      card backgrounds) and defaulting those to overlay would silently
+ *      break many more designs than it fixes. When you really want a
+ *      rectangle overlay composition, declare x/y explicitly.
+ *
+ *      Mixed content stacks (frame + text, shape + icon_font, etc.)
+ *      still get the vertical fallback, because those are typically
+ *      content stacks where verticalization is the right call.
+ *
+ * Overlay nodes (badges/pills/tags via `isBadgeOverlayNode`) are excluded
+ * from the count — they legitimately carry x/y inside auto-layout frames
+ * and shouldn't tip the heuristic.
+ *
+ * This is intentionally conservative: it accepts a few false negatives
+ * (some genuinely vertical all-shape stacks will be left un-normalized,
+ * forcing the AI to declare layout explicitly) to eliminate the
+ * catastrophic false-positive of silently verticalizing an overlay
+ * composition.
+ */
+const COMPOSITION_PRIMITIVE_TYPES = new Set(['frame', 'ellipse', 'path']);
+
+function hasAbsolutePositionedChild(children: PenNode[]): boolean {
+  // Signal 1: explicit numeric x/y on any non-overlay child.
+  for (const child of children) {
+    if (isBadgeOverlayNode(child)) continue;
+    const c = child as PenNode & { x?: number; y?: number };
+    if (typeof c.x === 'number' || typeof c.y === 'number') return true;
+  }
+
+  // Signal 2: every non-overlay child is a composition primitive
+  // (>= 2 such children).
+  let nonOverlayCount = 0;
+  let primitiveCount = 0;
+  for (const child of children) {
+    if (isBadgeOverlayNode(child)) continue;
+    nonOverlayCount++;
+    if (COMPOSITION_PRIMITIVE_TYPES.has(child.type)) primitiveCount++;
+  }
+  if (nonOverlayCount >= 2 && primitiveCount === nonOverlayCount) return true;
+
+  return false;
+}

package/src/layout/strip-redundant-section-fills.ts

@@ -0,0 +1,155 @@
+import type { PenNode, PenFill, SolidFill } from '@zseven-w/pen-types';
+
+/**
+ * Strip redundant "section-level" fills from the direct children of a
+ * page root frame.
+ *
+ * Weaker sub-agents (MiniMax M2, GLM, Kimi) often hedge by writing a
+ * hardcoded dark hex (`#0A0A0A`, `#111`, etc.) on every section root they
+ * produce. That hex then completely covers the page root's intended
+ * background color, breaking theme switching and creating visible seams
+ * between sections. Cards, buttons, chips and other legitimately filled
+ * components are NOT affected — only "section container" frames (direct
+ * children of the root that either have no role or have a structural
+ * role).
+ *
+ * ⚠️ SCOPE CONTRACT — callers MUST only pass the true page root frame.
+ * Calling this on an arbitrary nested frame (a card, a component, a
+ * sub-agent's own root that is NOT the page root) will incorrectly treat
+ * that frame's inner children as "sections" and may erase intended
+ * nested fills (e.g. a card's own dark header). The function itself is
+ * strictly non-recursive — it only touches direct children of the passed
+ * node — so mis-targeted calls are bounded, but still wrong.
+ *
+ * Returns `true` when any fill was stripped, so the caller can publish a
+ * store update.
+ */
+export function stripRedundantSectionFills(rootFrame: PenNode): boolean {
+  if (!('children' in rootFrame) || !Array.isArray(rootFrame.children)) return false;
+
+  const rootFill = getFirstSolidColor(rootFrame);
+  let changed = false;
+
+  for (const child of rootFrame.children) {
+    if (child.type !== 'frame') continue;
+    if (!isSectionLevelFrame(child)) continue;
+
+    const childFill = getFirstSolidColor(child);
+    if (!childFill) continue;
+
+    if (shouldStripFill(childFill, rootFill)) {
+      delete (child as PenNode & { fill?: unknown }).fill;
+      changed = true;
+    }
+  }
+
+  return changed;
+}
+
+/**
+ * Roles that identify visually distinct components and must never have
+ * their fill stripped.
+ */
+const PROTECTED_ROLES = new Set([
+  'card',
+  'stat-card',
+  'pricing-card',
+  'feature-card',
+  'image-card',
+  'testimonial',
+  'button',
+  'icon-button',
+  'badge',
+  'chip',
+  'tag',
+  'pill',
+  'input',
+  'form-input',
+  'search-bar',
+  'phone-mockup',
+  'banner',
+  'metric-card',
+  'gallery-item',
+  'status-bar',
+]);
+
+/**
+ * Roles that are considered structural — just a container grouping other
+ * nodes. These are candidates for fill stripping when they echo the root
+ * background or hedge with a safe-dark fill.
+ */
+const STRUCTURAL_ROLES = new Set([
+  'section',
+  'row',
+  'column',
+  'stack',
+  'container',
+  'content-area',
+  'section-header',
+  'wrapper',
+  'group',
+  'hero',
+  'footer',
+  'cta-section',
+  'stats-section',
+]);
+
+function isSectionLevelFrame(node: PenNode): boolean {
+  const role = (node as PenNode & { role?: string }).role;
+  if (!role) return true; // unrolled section root
+  if (PROTECTED_ROLES.has(role)) return false;
+  if (STRUCTURAL_ROLES.has(role)) return true;
+  // Unknown role: be conservative, treat as protected so we don't clobber
+  // future role additions.
+  return false;
+}
+
+/**
+ * Hex tints that sub-agents reach for when they want a "safe dark"
+ * background without knowing the real design background color. Any of
+ * these on a section container is almost certainly a hedge, not an
+ * intentional visual choice.
+ */
+const SAFE_DARK_HEXES = new Set([
+  '#000000',
+  '#000',
+  '#0a0a0a',
+  '#0f0f0f',
+  '#111',
+  '#111111',
+  '#121212',
+  '#141414',
+  '#1a1a1a',
+  '#181818',
+  '#1c1c1c',
+  '#1e1e1e',
+  '#202020',
+]);
+
+function shouldStripFill(childFill: string, rootFill: string | null): boolean {
+  const childKey = normalizeHex(childFill);
+  if (rootFill) {
+    const rootKey = normalizeHex(rootFill);
+    if (childKey === rootKey) return true;
+  }
+  return SAFE_DARK_HEXES.has(childKey);
+}
+
+function normalizeHex(color: string): string {
+  let c = color.trim().toLowerCase();
+  // Strip alpha if present (#rrggbbaa → #rrggbb)
+  if (c.length === 9 && c.startsWith('#')) c = c.slice(0, 7);
+  return c;
+}
+
+function getFirstSolidColor(node: PenNode): string | null {
+  const fill = (node as PenNode & { fill?: PenFill[] | string }).fill;
+  if (!fill) return null;
+  if (typeof fill === 'string') return fill;
+  if (!Array.isArray(fill) || fill.length === 0) return null;
+  const first = fill[0];
+  if (first && first.type === 'solid') {
+    return (first as SolidFill).color;
+  }
+  return null;
+}

package/src/layout/text-measure.ts

@@ -1,4 +1,4 @@
-import type { PenNode } from '@zseven-w/pen-types'
+import type { PenNode } from '@zseven-w/pen-types';
 
 // ---------------------------------------------------------------------------
 // Sizing parser (shared by layout engine and text height estimation)
@@ -6,12 +6,16 @@ import type { PenNode } from '@zseven-w/pen-types'
 
 /** Parse a sizing value. Handles number, "fit_content", "fill_container" and parenthesized forms. */
 export function parseSizing(value: unknown): number | 'fit' | 'fill' {
-  if (typeof value === 'number') return value
-  if (typeof value !== 'string') return 0
-  if (value.startsWith('fill_container')) return 'fill'
-  if (value.startsWith('fit_content')) return 'fit'
-  const n = parseFloat(value)
-  return isNaN(n) ? 0 : n
+  if (typeof value === 'number') return value;
+  if (typeof value !== 'string') return 0;
+  if (value.startsWith('fill_container')) return 'fill';
+  if (value.startsWith('fit_content')) {
+    const match = value.match(/\((\d+(?:\.\d+)?)\)/);
+    if (match) return parseFloat(match[1]);
+    return 'fit';
+  }
+  const n = parseFloat(value);
+  return isNaN(n) ? 0 : n;
 }
 
 // ---------------------------------------------------------------------------
@@ -25,10 +29,10 @@ export function parseSizing(value: unknown): number | 'fit' | 'fill' {
  * MUST use this function instead of hardcoded fallbacks.
  */
 export function defaultLineHeight(fontSize: number): number {
-  if (fontSize >= 40) return 1.0   // Display text: tight leading (matches Pencil 0.9-1.0)
-  if (fontSize >= 28) return 1.15  // Heading text: moderate (matches Pencil 1.0-1.2)
-  if (fontSize >= 20) return 1.2   // Subheading
-  return 1.5                       // Body text: comfortable reading
+  if (fontSize >= 40) return 1.0; // Display text: tight leading (matches Pencil 0.9-1.0)
+  if (fontSize >= 28) return 1.15; // Heading text: moderate (matches Pencil 1.0-1.2)
+  if (fontSize >= 20) return 1.2; // Subheading
+  return 1.5; // Body text: comfortable reading
 }
 
 // ---------------------------------------------------------------------------
@@ -36,20 +40,22 @@ export function defaultLineHeight(fontSize: number): number {
 // ---------------------------------------------------------------------------
 
 export function isCjkCodePoint(code: number): boolean {
-  return (code >= 0x4E00 && code <= 0x9FFF) // CJK Unified Ideographs
-    || (code >= 0x3400 && code <= 0x4DBF) // CJK Extension A
-    || (code >= 0x3040 && code <= 0x30FF) // Hiragana + Katakana
-    || (code >= 0xAC00 && code <= 0xD7AF) // Hangul
-    || (code >= 0x3000 && code <= 0x303F) // CJK symbols/punctuation
-    || (code >= 0xFF00 && code <= 0xFFEF) // Full-width forms
+  return (
+    (code >= 0x4e00 && code <= 0x9fff) || // CJK Unified Ideographs
+    (code >= 0x3400 && code <= 0x4dbf) || // CJK Extension A
+    (code >= 0x3040 && code <= 0x30ff) || // Hiragana + Katakana
+    (code >= 0xac00 && code <= 0xd7af) || // Hangul
+    (code >= 0x3000 && code <= 0x303f) || // CJK symbols/punctuation
+    (code >= 0xff00 && code <= 0xffef)
+  ); // Full-width forms
 }
 
 export function hasCjkText(text: string): boolean {
   for (const ch of text) {
-    const code = ch.codePointAt(0) ?? 0
-    if (isCjkCodePoint(code)) return true
+    const code = ch.codePointAt(0) ?? 0;
+    if (isCjkCodePoint(code)) return true;
   }
-  return false
+  return false;
 }
 
 // ---------------------------------------------------------------------------
@@ -61,26 +67,30 @@ export function hasCjkText(text: string): boolean {
  * Values based on typical proportional font width scaling.
  */
 function fontWeightFactor(fontWeight?: string | number): number {
-  const w = typeof fontWeight === 'string' ? parseInt(fontWeight, 10) : (fontWeight ?? 400)
-  if (isNaN(w) || w <= 400) return 1.0
-  if (w <= 500) return 1.03
-  if (w <= 600) return 1.06
-  if (w <= 700) return 1.09
-  return 1.12
+  const w = typeof fontWeight === 'string' ? parseInt(fontWeight, 10) : (fontWeight ?? 400);
+  if (isNaN(w) || w <= 400) return 1.0;
+  if (w <= 500) return 1.03;
+  if (w <= 600) return 1.06;
+  if (w <= 700) return 1.09;
+  return 1.12;
 }
 
-export function estimateGlyphWidth(ch: string, fontSize: number, fontWeight?: string | number): number {
-  if (ch === '\n' || ch === '\r') return 0
-  if (ch === '\t') return fontSize * 1.2
-  if (ch === ' ') return fontSize * 0.33
-
-  const wf = fontWeightFactor(fontWeight)
-  const code = ch.codePointAt(0) ?? 0
-  if (isCjkCodePoint(code)) return fontSize * 1.12 * wf
-  if (/[A-Z]/.test(ch)) return fontSize * 0.62 * wf
-  if (/[a-z]/.test(ch)) return fontSize * 0.56 * wf
-  if (/[0-9]/.test(ch)) return fontSize * 0.56 * wf
-  return fontSize * 0.58 * wf
+export function estimateGlyphWidth(
+  ch: string,
+  fontSize: number,
+  fontWeight?: string | number,
+): number {
+  if (ch === '\n' || ch === '\r') return 0;
+  if (ch === '\t') return fontSize * 1.2;
+  if (ch === ' ') return fontSize * 0.33;
+
+  const wf = fontWeightFactor(fontWeight);
+  const code = ch.codePointAt(0) ?? 0;
+  if (isCjkCodePoint(code)) return fontSize * 1.12 * wf;
+  if (/[A-Z]/.test(ch)) return fontSize * 0.62 * wf;
+  if (/[a-z]/.test(ch)) return fontSize * 0.56 * wf;
+  if (/[0-9]/.test(ch)) return fontSize * 0.56 * wf;
+  return fontSize * 0.58 * wf;
 }
 
 export function estimateLineWidth(
@@ -89,32 +99,37 @@ export function estimateLineWidth(
   letterSpacing = 0,
   fontWeight?: string | number,
 ): number {
-  let width = 0
-  let visibleChars = 0
+  let width = 0;
+  let visibleChars = 0;
   for (const ch of text) {
-    width += estimateGlyphWidth(ch, fontSize, fontWeight)
-    if (ch !== '\n' && ch !== '\r') visibleChars += 1
+    width += estimateGlyphWidth(ch, fontSize, fontWeight);
+    if (ch !== '\n' && ch !== '\r') visibleChars += 1;
   }
   if (visibleChars > 1 && letterSpacing !== 0) {
-    width += (visibleChars - 1) * letterSpacing
+    width += (visibleChars - 1) * letterSpacing;
   }
-  return Math.max(0, width)
+  return Math.max(0, width);
 }
 
 export function widthSafetyFactor(text: string): number {
   // Latin fonts vary a lot by weight/family; use a larger safety margin to
   // avoid underestimating width and causing accidental wraps.
-  return hasCjkText(text) ? 1.06 : 1.14
+  return hasCjkText(text) ? 1.06 : 1.14;
 }
 
-export function estimateTextWidth(text: string, fontSize: number, letterSpacing = 0, fontWeight?: string | number): number {
-  const lines = text.split(/\r?\n/)
+export function estimateTextWidth(
+  text: string,
+  fontSize: number,
+  letterSpacing = 0,
+  fontWeight?: string | number,
+): number {
+  const lines = text.split(/\r?\n/);
   const maxLine = lines.reduce((max, line) => {
-    const lineWidth = estimateLineWidth(line, fontSize, letterSpacing, fontWeight)
-    const safeLineWidth = lineWidth * widthSafetyFactor(line)
-    return Math.max(max, safeLineWidth)
-  }, 0)
-  return maxLine
+    const lineWidth = estimateLineWidth(line, fontSize, letterSpacing, fontWeight);
+    const safeLineWidth = lineWidth * widthSafetyFactor(line);
+    return Math.max(max, safeLineWidth);
+  }, 0);
+  return maxLine;
 }
 
 /**
@@ -123,11 +138,16 @@ export function estimateTextWidth(text: string, fontSize: number, letterSpacing
  * off-center (the overestimated width shifts the text box left when centered).
  * For wrapping/sizing decisions, use estimateTextWidth() which includes the safety factor.
  */
-export function estimateTextWidthPrecise(text: string, fontSize: number, letterSpacing = 0, fontWeight?: string | number): number {
-  const lines = text.split(/\r?\n/)
+export function estimateTextWidthPrecise(
+  text: string,
+  fontSize: number,
+  letterSpacing = 0,
+  fontWeight?: string | number,
+): number {
+  const lines = text.split(/\r?\n/);
   return lines.reduce((max, line) => {
-    return Math.max(max, estimateLineWidth(line, fontSize, letterSpacing, fontWeight))
-  }, 0)
+    return Math.max(max, estimateLineWidth(line, fontSize, letterSpacing, fontWeight));
+  }, 0);
 }
 
 // ---------------------------------------------------------------------------
@@ -135,19 +155,19 @@ export function estimateTextWidthPrecise(text: string, fontSize: number, letterS
 // ---------------------------------------------------------------------------
 
 export function resolveTextContent(node: PenNode): string {
-  if (node.type !== 'text') return ''
-  if (typeof node.content === 'string') return node.content
-  if (Array.isArray(node.content)) return node.content.map((s) => s.text).join('')
+  if (node.type !== 'text') return '';
+  if (typeof node.content === 'string') return node.content;
+  if (Array.isArray(node.content)) return node.content.map((s) => s.text).join('');
   // Fallback: MCP/CLI nodes may use `text` instead of `content`
   if (typeof (node as unknown as Record<string, unknown>).text === 'string') {
-    return (node as unknown as Record<string, unknown>).text as string
+    return (node as unknown as Record<string, unknown>).text as string;
   }
-  return ''
+  return '';
 }
 
 export function countExplicitTextLines(text: string): number {
-  if (!text) return 1
-  return Math.max(1, text.split(/\r?\n/).length)
+  if (!text) return 1;
+  return Math.max(1, text.split(/\r?\n/).length);
 }
 
 // ---------------------------------------------------------------------------
@@ -161,18 +181,18 @@ export function countExplicitTextLines(text: string): number {
  * We nudge down proportionally to compensate.
  */
 export function getTextOpticalCenterYOffset(node: PenNode): number {
-  if (node.type !== 'text') return 0
-  const text = resolveTextContent(node).trim()
-  if (!text) return 0
-  if (countExplicitTextLines(text) > 1) return 0
+  if (node.type !== 'text') return 0;
+  const text = resolveTextContent(node).trim();
+  if (!text) return 0;
+  if (countExplicitTextLines(text) > 1) return 0;
 
-  const fontSize = node.fontSize ?? 16
-  const hasCjk = hasCjkText(text)
+  const fontSize = node.fontSize ?? 16;
+  const hasCjk = hasCjkText(text);
 
   // CJK glyphs sit higher in the em box than Latin glyphs
-  const ratio = hasCjk ? 0.06 : 0.03
-  const offset = fontSize * ratio
-  return Math.max(0, Math.min(Math.round(fontSize * 0.05), Math.round(offset)))
+  const ratio = hasCjk ? 0.06 : 0.03;
+  const offset = fontSize * ratio;
+  return Math.max(0, Math.min(Math.round(fontSize * 0.05), Math.round(offset)));
 }
 
 // ---------------------------------------------------------------------------
@@ -191,9 +211,10 @@ export function countWrappedLinesFallback(
   fontWeight: string | number | undefined,
 ): number {
   return rawLines.reduce((sum, line) => {
-    const lineWidth = estimateLineWidth(line, fontSize, letterSpacing, fontWeight) * widthSafetyFactor(line)
-    return sum + Math.max(1, Math.ceil(lineWidth / wrapWidth))
-  }, 0)
+    const lineWidth =
+      estimateLineWidth(line, fontSize, letterSpacing, fontWeight) * widthSafetyFactor(line);
+    return sum + Math.max(1, Math.ceil(lineWidth / wrapWidth));
+  }, 0);
 }
 
 /**
@@ -207,13 +228,13 @@ export type WrappedLineCounter = (
   fontWeight: string | number | undefined,
   fontFamily: string,
   letterSpacing: number,
-) => number
+) => number;
 
-let _wrappedLineCounter: WrappedLineCounter | null = null
+let _wrappedLineCounter: WrappedLineCounter | null = null;
 
 /** Set a custom wrapped line counter (e.g. Canvas 2D-based). */
 export function setWrappedLineCounter(counter: WrappedLineCounter): void {
-  _wrappedLineCounter = counter
+  _wrappedLineCounter = counter;
 }
 
 // ---------------------------------------------------------------------------
@@ -223,51 +244,54 @@ export function setWrappedLineCounter(counter: WrappedLineCounter): void {
 /** Estimate text height including multi-line wrapping when available width is known. */
 export function estimateTextHeight(node: PenNode, availableWidth?: number): number {
   // Access text-specific properties via Record to avoid union type issues
-  const n = node as unknown as Record<string, unknown>
-  const fontSize = (typeof n.fontSize === 'number' ? n.fontSize : 16)
-  const lineHeight = (typeof n.lineHeight === 'number' ? n.lineHeight : defaultLineHeight(fontSize))
+  const n = node as unknown as Record<string, unknown>;
+  const fontSize = typeof n.fontSize === 'number' ? n.fontSize : 16;
+  const lineHeight = typeof n.lineHeight === 'number' ? n.lineHeight : defaultLineHeight(fontSize);
   // Fabric.js uses _fontSizeMult = 1.13 for the glyph height of a single line.
   // lineHeight spacing applies *between* lines, not below the last line.
-  const FABRIC_FONT_MULT = 1.13
-  const glyphH = fontSize * FABRIC_FONT_MULT
-  const lineStep = fontSize * lineHeight
+  const FABRIC_FONT_MULT = 1.13;
+  const glyphH = fontSize * FABRIC_FONT_MULT;
+  const lineStep = fontSize * lineHeight;
 
   // Get text content
-  const rawContent = n.content
-  const content = typeof rawContent === 'string'
-    ? rawContent
-    : Array.isArray(rawContent)
-      ? rawContent.map((s: { text: string }) => s.text).join('')
-      : ''
-  if (!content) return glyphH
+  const rawContent = n.content;
+  const content =
+    typeof rawContent === 'string'
+      ? rawContent
+      : Array.isArray(rawContent)
+        ? rawContent.map((s: { text: string }) => s.text).join('')
+        : '';
+  if (!content) return glyphH;
 
   // Determine the effective text width for wrapping estimation
-  let textWidth = 0
+  let textWidth = 0;
   if ('width' in node) {
-    const w = parseSizing(node.width)
-    if (typeof w === 'number' && w > 0) textWidth = w
-    else if (w === 'fill' && availableWidth && availableWidth > 0) textWidth = availableWidth
+    const w = parseSizing(node.width);
+    if (typeof w === 'number' && w > 0) textWidth = w;
+    else if (w === 'fill' && availableWidth && availableWidth > 0) textWidth = availableWidth;
   }
 
   // If no width constraint is known, still count explicit newlines
   if (textWidth <= 0) {
-    const explicitLines = content.split(/\r?\n/).length
-    const n2 = Math.max(1, explicitLines)
-    return Math.round(n2 <= 1 ? glyphH : (n2 - 1) * lineStep + glyphH)
+    const explicitLines = content.split(/\r?\n/).length;
+    const n2 = Math.max(1, explicitLines);
+    return Math.round(n2 <= 1 ? glyphH : (n2 - 1) * lineStep + glyphH);
   }
 
   // Use custom wrapped line counter if set (e.g. Canvas 2D), else fallback
-  const fontWeight = n.fontWeight as string | number | undefined
-  const fontFamily = (typeof n.fontFamily === 'string' ? n.fontFamily : '') || 'Inter, -apple-system, "Noto Sans SC", "PingFang SC", system-ui, sans-serif'
-  const letterSpacing = (typeof n.letterSpacing === 'number' ? n.letterSpacing : 0)
-  const rawLines = content.split(/\r?\n/)
+  const fontWeight = n.fontWeight as string | number | undefined;
+  const fontFamily =
+    (typeof n.fontFamily === 'string' ? n.fontFamily : '') ||
+    'Inter, -apple-system, "Noto Sans SC", "PingFang SC", system-ui, sans-serif';
+  const letterSpacing = typeof n.letterSpacing === 'number' ? n.letterSpacing : 0;
+  const rawLines = content.split(/\r?\n/);
   // Add tolerance matching the renderer's wrapLine (w + fontSize * 0.2)
-  const wrapWidth = textWidth + fontSize * 0.2
+  const wrapWidth = textWidth + fontSize * 0.2;
 
   const wrappedLineCount = _wrappedLineCounter
     ? _wrappedLineCounter(rawLines, wrapWidth, fontSize, fontWeight, fontFamily, letterSpacing)
-    : countWrappedLinesFallback(rawLines, wrapWidth, fontSize, letterSpacing, fontWeight)
+    : countWrappedLinesFallback(rawLines, wrapWidth, fontSize, letterSpacing, fontWeight);
 
-  const totalLines = Math.max(1, wrappedLineCount)
-  return Math.round(totalLines <= 1 ? glyphH : (totalLines - 1) * lineStep + glyphH)
+  const totalLines = Math.max(1, wrappedLineCount);
+  return Math.round(totalLines <= 1 ? glyphH : (totalLines - 1) * lineStep + glyphH);
 }