inkhouse 0.1.0-beta.0

package/src/text-builder.ts

@@ -0,0 +1,116 @@
+import { parseColor } from './colors';
+import { TOKENS, getCoreFontFamily, getThemeFontFamily } from './tokens';
+import { tailwindClassesToStyle, type TailwindStyle } from './tailwind';
+import { type NodeIR, isElementLikeNode } from './node-ir';
+import { getFontStyleCandidatesForFamily } from './font-style-resolver';
+
+declare const figma: any;
+
+const FONT_LOAD_STATE: Record<string, 'loading' | 'loaded'> = {};
+const FONT_LOAD_PROMISES: Promise<void>[] = [];
+
+export function waitForAllFonts(): Promise<void> {
+  return Promise.all(FONT_LOAD_PROMISES).then(() => undefined);
+}
+
+export const INLINE_TEXT_TAGS = new Set(['span', 'a', 'label', 'small', 'strong', 'em', 'b', 'i']);
+
+export const TAG_TYPOGRAPHY: Record<string, { fontSize: number; bold?: boolean; lineHeight?: number }> = {
+  h1: { fontSize: 32, bold: true, lineHeight: 40 },
+  h2: { fontSize: 24, bold: true, lineHeight: 32 },
+  h3: { fontSize: 20, bold: true, lineHeight: 28 },
+  h4: { fontSize: 18, bold: true, lineHeight: 24 },
+  h5: { fontSize: 16, bold: true, lineHeight: 22 },
+  h6: { fontSize: 14, bold: true, lineHeight: 20 },
+  p: { fontSize: 14, lineHeight: 20 },
+  span: { fontSize: 14 },
+  label: { fontSize: 14 },
+  a: { fontSize: 14 },
+  li: { fontSize: 14 },
+  small: { fontSize: 12 },
+};
+
+function queueFontLoad(family: string, style: string): void {
+  const key = family + ':' + style;
+  if (FONT_LOAD_STATE[key]) return;
+  FONT_LOAD_STATE[key] = 'loading';
+  try {
+    const p: Promise<void> = figma.loadFontAsync({ family: family, style: style })
+      .then(function() {
+        FONT_LOAD_STATE[key] = 'loaded';
+      })
+      .catch(function() {
+        delete FONT_LOAD_STATE[key];
+      });
+    FONT_LOAD_PROMISES.push(p);
+  } catch (_err) {
+    delete FONT_LOAD_STATE[key];
+  }
+}
+
+export function createTextNode(text: string, options?: any): any {
+  const node = figma.createText();
+  node.characters = text;
+  const opts = options || {};
+  const style = opts.fontStyle || (opts.bold ? 'Bold' : 'Regular');
+  const fontRole = opts.fontRole || 'sans';
+  const fontFamily = opts.fontFamily || (opts.theme ? getThemeFontFamily(TOKENS, opts.theme, fontRole) : null) || getCoreFontFamily(TOKENS) || 'Inter';
+  const styleCandidates = getFontStyleCandidatesForFamily(fontFamily, style);
+  let didSet = false;
+  for (const candidate of styleCandidates) {
+    const fontKey = fontFamily + ':' + candidate;
+    try {
+      node.fontName = { family: fontFamily, style: candidate };
+      FONT_LOAD_STATE[fontKey] = 'loaded';
+      didSet = true;
+      break;
+    } catch (_err) {
+      // try next candidate
+    }
+  }
+  if (!didSet) {
+    for (const candidate of styleCandidates) {
+      queueFontLoad(fontFamily, candidate);
+    }
+  }
+  if (opts.fontSize) node.fontSize = opts.fontSize;
+  if (opts.lineHeight) {
+    node.lineHeight = { unit: 'PIXELS', value: opts.lineHeight };
+  }
+  if (opts.textAlignHorizontal) {
+    node.textAlignHorizontal = opts.textAlignHorizontal;
+  }
+  if (opts.fill) {
+    const fill = typeof opts.fill === 'string' ? parseColor(opts.fill) : opts.fill;
+    node.fills = [{
+      type: 'SOLID',
+      color: { r: fill.r, g: fill.g, b: fill.b },
+      opacity: opts.opacity != null ? opts.opacity : (fill.a == null ? 1 : fill.a)
+    }];
+  } else if (opts.opacity != null) {
+    node.opacity = opts.opacity;
+  }
+  return node;
+}
+
+export function getNodeTextStyle(node: NodeIR, colorGroup: Record<string, string>): TailwindStyle {
+  const classes = isElementLikeNode(node) ? node.classes : [];
+  const style = tailwindClassesToStyle(classes, 'default', colorGroup);
+  return style;
+}
+
+export function getTextAlignFromClasses(classes: string[]): 'LEFT' | 'CENTER' | 'RIGHT' | undefined {
+  if (classes.includes('text-center')) return 'CENTER';
+  if (classes.includes('text-right')) return 'RIGHT';
+  if (classes.includes('text-left')) return 'LEFT';
+  return undefined;
+}
+
+export function getLineHeightFromClasses(classes: string[], fontSize: number): number | undefined {
+  if (classes.includes('leading-none')) return fontSize;
+  if (classes.includes('leading-tight')) return Math.round(fontSize * 1.25);
+  if (classes.includes('leading-snug')) return Math.round(fontSize * 1.375);
+  if (classes.includes('leading-normal')) return Math.round(fontSize * 1.5);
+  if (classes.includes('leading-relaxed')) return Math.round(fontSize * 1.625);
+  return undefined;
+}

package/src/text-line.ts

@@ -0,0 +1,42 @@
+import { type NodeIR, type NodeIRComponent, splitClassName } from './node-ir';
+import { parseTextLineCount, parseWidthTokenList, TEXT_LINE_WIDTH_CLASSES } from './render-context';
+
+export function buildTextLinePlaceholderNode(node: NodeIRComponent): NodeIR {
+  const props = node.props || {};
+  const lineCount = parseTextLineCount(props.lines);
+  const widths = parseWidthTokenList(props.widths);
+  const containerClasses = ['space-y-2'].concat(splitClassName(props.className));
+  const lineExtraClasses = splitClassName(props.lineClassName);
+
+  const children: NodeIR[] = [];
+  for (let i = 0; i < lineCount; i++) {
+    const widthKey = widths[i % widths.length] || 'full';
+    const widthClass = TEXT_LINE_WIDTH_CLASSES[widthKey] || 'w-full';
+    const lineClasses = ['bg-gray-200', 'animate-pulse', 'rounded', 'h-4', widthClass].concat(lineExtraClasses);
+    children.push({
+      kind: 'element',
+      tagName: 'div',
+      tagLower: 'div',
+      props: { className: lineClasses.join(' ') },
+      classes: lineClasses,
+      children: [],
+    });
+  }
+
+  return {
+    kind: 'element',
+    tagName: 'div',
+    tagLower: 'div',
+    props: { className: containerClasses.join(' ') },
+    classes: containerClasses,
+    children: children,
+  };
+}
+
+export function maybeExpandTextLineComponent(node: NodeIRComponent): NodeIR | null {
+  if (!node || (node.children && node.children.length > 0)) return null;
+  const props = node.props || {};
+  const hasLineProps = props.lines != null || props.widths != null || props.lineClassName != null;
+  if (!hasLineProps) return null;
+  return buildTextLinePlaceholderNode(node);
+}

package/src/token-source.ts

@@ -0,0 +1,43 @@
+export type TokenSourceMode = 'auto' | 'css' | 'dtcg';
+export type ResolvedTokenSourceMode = 'css' | 'dtcg' | 'embedded';
+
+export interface ScannedThemeTokens {
+  colors: Record<string, string>;
+  radius?: Record<string, number>;
+  fonts?: Record<string, string>;
+  spacing?: Record<string, number>;
+  fontSize?: Record<string, number>;
+  shadows?: Record<string, string>;
+}
+
+export interface ScannedTokenMap {
+  source: string;
+  mode: ResolvedTokenSourceMode;
+  requestedMode?: TokenSourceMode;
+  colors: Record<string, string>;
+  radius: Record<string, number>;
+  fonts: Record<string, string>;
+  spacing: Record<string, number>;
+  fontSize: Record<string, number>;
+  shadows: Record<string, string>;
+  themes: Record<string, ScannedThemeTokens>;
+}
+
+export function createEmptyScannedTokenMap(
+  mode: ResolvedTokenSourceMode,
+  source: string,
+  requestedMode?: TokenSourceMode
+): ScannedTokenMap {
+  return {
+    source,
+    mode,
+    requestedMode,
+    colors: {},
+    radius: {},
+    fonts: {},
+    spacing: {},
+    fontSize: {},
+    shadows: {},
+    themes: {},
+  };
+}