inkhouse 0.1.0-beta.0

package/src/inline-text.ts

@@ -0,0 +1,271 @@
+import { type RGB, parseColor } from './colors';
+import { resolveTextColorValue, extractTextColorToken } from './color-resolver';
+import { getLineHeightFromClasses, TAG_TYPOGRAPHY, createTextNode } from './text-builder';
+import { tailwindClassesToStyle, type TailwindStyle } from './tailwind';
+import { type NodeIR, type NodeIRElement } from './node-ir';
+import type { RenderContext } from './render-context';
+import { type NodeLayoutComputed } from './width-solver';
+import { INLINE_TEXT_TAGS } from './text-builder';
+import { TOKENS, getThemeFontFamily } from './tokens';
+import { getFontStyleCandidatesForFamily, inferFontWeight } from './font-style-resolver';
+
+export type InlineTextSegment = {
+  text: string;
+  fill?: RGB | null;
+  fontStyle?: string;
+};
+
+const BLOCK_TEXT_TAGS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'li']);
+const FONT_WEIGHT_TO_STYLE: Record<string, string> = {
+  'font-thin': 'Thin',
+  'font-extralight': 'ExtraLight',
+  'font-light': 'Light',
+  'font-normal': 'Regular',
+  'font-medium': 'Medium',
+  'font-semibold': 'SemiBold',
+  'font-bold': 'Bold',
+  'font-extrabold': 'ExtraBold',
+  'font-black': 'Black',
+};
+
+function normalizeStyle(style: string | undefined): string {
+  return String(style || '').trim();
+}
+
+function styleHasItalic(style: string | undefined): boolean {
+  return /\bitalic\b/i.test(normalizeStyle(style));
+}
+
+function removeItalic(style: string | undefined): string {
+  const normalized = normalizeStyle(style);
+  if (!normalized) return '';
+  const stripped = normalized.replace(/\s*italic\b/gi, '').trim();
+  return stripped || 'Regular';
+}
+
+function applyItalicModifier(style: string | undefined, classes: string[]): string | undefined {
+  let next = style;
+  if (classes.includes('italic')) {
+    if (!styleHasItalic(next)) {
+      const base = normalizeStyle(next) || 'Regular';
+      next = base === 'Italic' ? base : base + ' Italic';
+    }
+  }
+  if (classes.includes('not-italic')) {
+    next = removeItalic(next);
+  }
+  return next;
+}
+
+function resolveFontStyleFromClasses(classes: string[], fallback?: string): string | undefined {
+  let found: string | undefined;
+  for (const cls of classes) {
+    const mapped = FONT_WEIGHT_TO_STYLE[cls];
+    if (mapped) found = mapped;
+  }
+  return applyItalicModifier(found || fallback, classes);
+}
+
+function ensureAtLeastBold(style: string | undefined): string {
+  const current = normalizeStyle(style) || 'Regular';
+  if (inferFontWeight(current) >= 700) return current;
+  return styleHasItalic(current) ? 'Bold Italic' : 'Bold';
+}
+
+export function isInlineTextNode(node: NodeIR): boolean {
+  if (node.kind === 'text') return true;
+  if (node.kind === 'fragment') return node.children.every(isInlineTextNode);
+  if (node.kind === 'element' && INLINE_TEXT_TAGS.has(node.tagLower)) {
+    return (node.children || []).every(isInlineTextNode);
+  }
+  return false;
+}
+
+function normalizeInlineSegments(segments: InlineTextSegment[]): InlineTextSegment[] {
+  const out: InlineTextSegment[] = [];
+  for (const seg of segments) {
+    if (!seg.text) continue;
+    if (out.length > 0) {
+      const last = out[out.length - 1];
+      const lastEndsWithSpace = /\\s$/.test(last.text);
+      const nextStartsWithSpace = /^\\s/.test(seg.text);
+      if (!lastEndsWithSpace && !nextStartsWithSpace) {
+        last.text += ' ';
+      }
+    }
+    out.push(seg);
+  }
+  return out;
+}
+
+function collectInlineSegments(
+  node: NodeIR,
+  parentStyle: { fill?: RGB | null; fontStyle?: string },
+  colorGroup: Record<string, string>,
+  theme: string
+): InlineTextSegment[] {
+  if (node.kind === 'text') {
+    return [{ text: node.text, fill: parentStyle.fill, fontStyle: parentStyle.fontStyle }];
+  }
+  if (node.kind === 'fragment') {
+    const parts: InlineTextSegment[] = [];
+    for (const child of node.children) {
+      parts.push.apply(parts, collectInlineSegments(child, parentStyle, colorGroup, theme));
+    }
+    return parts;
+  }
+  if (node.kind === 'element' && INLINE_TEXT_TAGS.has(node.tagLower)) {
+    const style = tailwindClassesToStyle(node.classes, 'default', colorGroup);
+    const token = style.textToken || extractTextColorToken(node.classes) || null;
+    const resolved = resolveTextColorValue(style.text, token, colorGroup, theme);
+    const fill = resolved ? parseColor(resolved) : parentStyle.fill;
+    let fontStyle = resolveFontStyleFromClasses(node.classes, parentStyle.fontStyle);
+    if (node.tagLower === 'strong' || node.tagLower === 'b') {
+      fontStyle = ensureAtLeastBold(fontStyle);
+    }
+    const nextStyle = { fill: fill, fontStyle: fontStyle };
+    const parts: InlineTextSegment[] = [];
+    for (const child of node.children || []) {
+      parts.push.apply(parts, collectInlineSegments(child, nextStyle, colorGroup, theme));
+    }
+    return parts;
+  }
+  if (node.kind === 'element') {
+    const parts: InlineTextSegment[] = [];
+    for (const child of node.children || []) {
+      parts.push.apply(parts, collectInlineSegments(child, parentStyle, colorGroup, theme));
+    }
+    return parts;
+  }
+  return [];
+}
+
+export function createInlineTextNode(
+  node: NodeIRElement,
+  textStyle: TailwindStyle,
+  context: RenderContext,
+  colorGroup: Record<string, string>,
+  theme: string,
+  layoutComputed: NodeLayoutComputed
+): TextNode | null {
+  const baseFillValue = resolveTextColorValue(
+    textStyle.text || context.textColor,
+    textStyle.textToken || context.textColorToken,
+    colorGroup,
+    theme
+  );
+  const baseFill = baseFillValue ? parseColor(baseFillValue) : undefined;
+  const baseFontStyle = resolveFontStyleFromClasses(
+    node.classes,
+    context.textFontStyle || (context.textBold ? 'Bold' : undefined)
+  );
+  const segments = normalizeInlineSegments(
+    collectInlineSegments(node, { fill: baseFill, fontStyle: baseFontStyle }, colorGroup, theme)
+  );
+  if (segments.length === 0) return null;
+  const textValue = segments.map(seg => seg.text).join('');
+
+  const typo = TAG_TYPOGRAPHY[node.tagLower] || { fontSize: 14 };
+  const textOpts: any = {
+    fontSize: typo.fontSize,
+    lineHeight: typo.lineHeight,
+  };
+  if (baseFontStyle) textOpts.fontStyle = baseFontStyle;
+  else if (typo.bold) textOpts.bold = true;
+  if (baseFill) textOpts.fill = baseFill;
+  if (node.classes.includes('text-center')) {
+    textOpts.textAlignHorizontal = 'CENTER';
+  } else if (node.classes.includes('text-right')) {
+    textOpts.textAlignHorizontal = 'RIGHT';
+  }
+
+  const sizeClass = node.classes.find(c => c.match(/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl)/));
+  if (sizeClass) {
+    const sizeMap: Record<string, number> = {
+      'text-xs': 12, 'text-sm': 14, 'text-base': 16,
+      'text-lg': 18, 'text-xl': 20, 'text-2xl': 24,
+      'text-3xl': 30, 'text-4xl': 36, 'text-5xl': 48
+    };
+    if (sizeMap[sizeClass]) textOpts.fontSize = sizeMap[sizeClass];
+  }
+  const lineHeight = getLineHeightFromClasses(node.classes, textOpts.fontSize);
+  if (lineHeight) {
+    textOpts.lineHeight = lineHeight;
+  }
+
+  textOpts.theme = theme;
+  const textNode = createTextNode(textValue, textOpts);
+
+  const baseFontName = textNode.fontName && typeof textNode.fontName === 'object' ? textNode.fontName : null;
+  const fontFamily = (baseFontName && 'family' in baseFontName ? (baseFontName as any).family : null)
+    || getThemeFontFamily(TOKENS, theme)
+    || 'Inter';
+  const baseStyle = baseFontName && 'style' in baseFontName ? (baseFontName as any).style : (baseFontStyle || 'Regular');
+  let cursor = 0;
+  for (const seg of segments) {
+    const start = cursor;
+    const end = cursor + seg.text.length;
+    cursor = end;
+    if (seg.fill) {
+      try {
+        textNode.setRangeFills(start, end, [{
+          type: 'SOLID',
+          color: { r: seg.fill.r, g: seg.fill.g, b: seg.fill.b },
+          opacity: seg.fill.a == null ? 1 : seg.fill.a,
+        }]);
+      } catch (_err) {
+        // ignore
+      }
+    }
+    if (seg.fontStyle && seg.fontStyle !== baseStyle) {
+      const styleCandidates = getFontStyleCandidatesForFamily(fontFamily, seg.fontStyle);
+      for (const candidate of styleCandidates) {
+        try {
+          textNode.setRangeFontName(start, end, { family: fontFamily, style: candidate });
+          break;
+        } catch (_err) {
+          // try next candidate
+        }
+      }
+    }
+  }
+
+  let constrainWidth = context.maxWidth;
+  if (layoutComputed.explicitWidth != null) {
+    constrainWidth = layoutComputed.explicitWidth;
+  } else if (layoutComputed.maxWidth != null) {
+    constrainWidth = context.maxWidth != null
+      ? Math.min(layoutComputed.maxWidth, context.maxWidth)
+      : layoutComputed.maxWidth;
+  }
+
+  const hasInlineDisplayClass =
+    node.classes.includes('inline')
+    || node.classes.includes('inline-block')
+    || node.classes.includes('inline-flex')
+    || node.classes.includes('inline-grid')
+    || node.classes.includes('contents');
+  const shouldInheritContainerWidth =
+    !!constrainWidth
+    && !hasInlineDisplayClass
+    && !INLINE_TEXT_TAGS.has(node.tagLower);
+
+  const shouldConstrain =
+    BLOCK_TEXT_TAGS.has(node.tagLower)
+    || layoutComputed.explicitWidth != null
+    || layoutComputed.maxWidth != null
+    || node.classes.includes('block')
+    || node.classes.includes('w-full')
+    || shouldInheritContainerWidth;
+
+  if (shouldConstrain && constrainWidth) {
+    try {
+      textNode.textAutoResize = 'HEIGHT';
+      textNode.resize(constrainWidth, textNode.height);
+    } catch (_err) {
+      // ignore resize errors
+    }
+  }
+
+  return textNode;
+}