inkhouse 0.1.0-beta.0

package/src/node-ir.ts

@@ -0,0 +1,595 @@
+import { parseColor, type RGB } from './colors';
+
+// ---------------------------------------------------------------------------
+// JSX tree types
+// ---------------------------------------------------------------------------
+
+export interface JsxNode {
+  type: 'element' | 'text';
+}
+
+export interface JsxElement extends JsxNode {
+  type: 'element';
+  tagName: string;
+  isComponent: boolean;
+  props: Record<string, string>;
+  children: JsxNode[];
+}
+
+export interface JsxText extends JsxNode {
+  type: 'text';
+  content: string;
+}
+
+// ---------------------------------------------------------------------------
+// NodeIR types
+// ---------------------------------------------------------------------------
+
+export interface NodeIRText {
+  kind: 'text';
+  text: string;
+}
+
+export interface NodeIRFragment {
+  kind: 'fragment';
+  children: NodeIR[];
+}
+
+export interface NodeIRDivider {
+  kind: 'divider';
+  direction: 'HORIZONTAL' | 'VERTICAL';
+  color: RGB;
+}
+
+export interface NodeIRRing {
+  kind: 'ring';
+  ringWidth: number;
+  ringColor: RGB;
+  ringOpacity: number;
+  offsetWidth: number;
+  offsetColor: RGB | null;
+  classes: string[];
+  child: NodeIR;
+}
+
+export interface NodeIRElementBase {
+  kind: 'element' | 'component';
+  tagName: string;
+  tagLower: string;
+  props: Record<string, string>;
+  classes: string[];
+  children: NodeIR[];
+}
+
+export type NodeIRElement = NodeIRElementBase & { kind: 'element' };
+export type NodeIRComponent = NodeIRElementBase & { kind: 'component' };
+
+export type NodeIR =
+  | NodeIRText
+  | NodeIRFragment
+  | NodeIRElement
+  | NodeIRComponent
+  | NodeIRDivider
+  | NodeIRRing;
+
+export type NodeIRHelpers = {
+  getComponentDefByName: (name: string) => any | null;
+  normalizeComponentDef: (raw: any) => any;
+  getCompoundClasses: (def: any, tagName: string) => string[];
+  mergeClasses: (base: string[], extra: string[]) => string[];
+};
+
+// ---------------------------------------------------------------------------
+// NodeIR helpers
+// ---------------------------------------------------------------------------
+
+export function splitClassName(value?: string): string[] {
+  if (!value) return [];
+  return String(value)
+    .split(/\s+/)
+    .map(c => c.replace(/^!/, '').replace(/!$/, ''))
+    .filter(Boolean);
+}
+
+export function resolveNodeIR(node: JsxNode): NodeIR | null {
+  if (node.type === 'text') {
+    const textNode = node as JsxText;
+    const trimmed = textNode.content.trim();
+    if (!trimmed) return null;
+    return { kind: 'text', text: trimmed };
+  }
+
+  const el = node as JsxElement;
+  const children: NodeIR[] = [];
+  for (const child of el.children || []) {
+    const resolved = resolveNodeIR(child);
+    if (resolved) children.push(resolved);
+  }
+
+  if (!el.tagName) {
+    if (children.length === 1) return children[0];
+    return { kind: 'fragment', children: children };
+  }
+
+  const classes = splitClassName(el.props.className);
+  const tagLower = el.tagName.toLowerCase();
+
+  if (el.isComponent) {
+    return {
+      kind: 'component',
+      tagName: el.tagName,
+      tagLower: tagLower,
+      props: el.props,
+      classes: classes,
+      children: children,
+    };
+  }
+
+  return {
+    kind: 'element',
+    tagName: el.tagName,
+    tagLower: tagLower,
+    props: el.props,
+    classes: classes,
+    children: children,
+  };
+}
+
+export function applyNodeTransforms(
+  node: NodeIR,
+  colorGroup: Record<string, string>,
+  helpers: NodeIRHelpers
+): NodeIR {
+  let next = flattenComponentNodes(node, null, helpers);
+  next = transformSpaceNodes(next);
+  next = transformDivideNodes(next, colorGroup);
+  next = transformRingNodes(next, colorGroup);
+  return next;
+}
+
+export function isElementLikeNode(node: NodeIR): node is NodeIRElement | NodeIRComponent | NodeIRRing {
+  return node.kind === 'element' || node.kind === 'component' || node.kind === 'ring';
+}
+
+// ---------------------------------------------------------------------------
+// NodeIR transforms
+// ---------------------------------------------------------------------------
+
+function flattenComponentNodes(
+  node: NodeIR,
+  parentCompoundDef: any | null,
+  helpers: NodeIRHelpers
+): NodeIR {
+  if (node.kind === 'text' || node.kind === 'divider') {
+    return node;
+  }
+
+  if (node.kind === 'fragment') {
+    const nextChildren: NodeIR[] = [];
+    for (const child of node.children) {
+      nextChildren.push(flattenComponentNodes(child, parentCompoundDef, helpers));
+    }
+    return Object.assign({}, node, { children: nextChildren });
+  }
+
+  if (node.kind === 'ring') {
+    return Object.assign({}, node, { child: flattenComponentNodes(node.child, parentCompoundDef, helpers) });
+  }
+
+  if (node.kind === 'element') {
+    const nextChildren: NodeIR[] = [];
+    for (const child of node.children) {
+      nextChildren.push(flattenComponentNodes(child, parentCompoundDef, helpers));
+    }
+    return Object.assign({}, node, { children: nextChildren });
+  }
+
+  const compDef = helpers.getComponentDefByName(node.tagName);
+  const normalizedDef = compDef ? helpers.normalizeComponentDef(compDef) : null;
+  let mergedClasses = node.classes;
+  let nextParentCompoundDef = parentCompoundDef;
+  let shouldFlatten = false;
+
+  if (normalizedDef) {
+    if (normalizedDef.type === 'compound') {
+      const compoundClasses = helpers.getCompoundClasses(normalizedDef, node.tagName);
+      if (compoundClasses.length > 0) {
+        mergedClasses = helpers.mergeClasses(compoundClasses, mergedClasses);
+      }
+      nextParentCompoundDef = normalizedDef;
+      shouldFlatten = true;
+    }
+  } else if (parentCompoundDef) {
+    const inherited = helpers.getCompoundClasses(parentCompoundDef, node.tagName);
+    if (inherited.length > 0) {
+      mergedClasses = helpers.mergeClasses(inherited, mergedClasses);
+      shouldFlatten = true;
+    }
+  }
+
+  const nextChildren: NodeIR[] = [];
+  for (const child of node.children) {
+    nextChildren.push(flattenComponentNodes(child, nextParentCompoundDef, helpers));
+  }
+
+  if (shouldFlatten) {
+    return {
+      kind: 'element',
+      tagName: node.tagName,
+      tagLower: 'div',
+      props: node.props,
+      classes: mergedClasses,
+      children: nextChildren,
+    };
+  }
+
+  return Object.assign({}, node, {
+    classes: mergedClasses,
+    children: nextChildren,
+  });
+}
+
+function transformSpaceNodes(node: NodeIR): NodeIR {
+  if (node.kind === 'text' || node.kind === 'divider') {
+    return node;
+  }
+
+  if (node.kind === 'fragment') {
+    const nextChildren: NodeIR[] = [];
+    for (const child of node.children) {
+      nextChildren.push(transformSpaceNodes(child));
+    }
+    return Object.assign({}, node, { children: nextChildren });
+  }
+
+  if (node.kind === 'ring') {
+    return Object.assign({}, node, { child: transformSpaceNodes(node.child) });
+  }
+
+  const hasGap = node.classes.some(c => c.startsWith('gap-') && !c.startsWith('gap-x-') && !c.startsWith('gap-y-'));
+  const hasGapX = node.classes.some(c => c.startsWith('gap-x-'));
+  const hasGapY = node.classes.some(c => c.startsWith('gap-y-'));
+  const nextClasses: string[] = [];
+  const extraGapClasses: string[] = [];
+
+  for (const cls of node.classes) {
+    if (cls.includes(':')) {
+      nextClasses.push(cls);
+      continue;
+    }
+    if (cls.startsWith('space-x-')) {
+      if (!hasGap && !hasGapX) {
+        extraGapClasses.push(cls.replace('space-x-', 'gap-x-'));
+      }
+      continue;
+    }
+    if (cls.startsWith('space-y-')) {
+      if (!hasGap && !hasGapY) {
+        extraGapClasses.push(cls.replace('space-y-', 'gap-y-'));
+      }
+      continue;
+    }
+    if (cls === 'space-x-reverse' || cls === 'space-y-reverse') {
+      continue;
+    }
+    nextClasses.push(cls);
+  }
+
+  const nextChildren: NodeIR[] = [];
+  for (const child of node.children) {
+    nextChildren.push(transformSpaceNodes(child));
+  }
+
+  return Object.assign({}, node, {
+    classes: nextClasses.concat(extraGapClasses),
+    children: nextChildren,
+  });
+}
+
+function transformDivideNodes(node: NodeIR, colorGroup: Record<string, string>): NodeIR {
+  if (node.kind === 'text' || node.kind === 'divider') {
+    return node;
+  }
+
+  if (node.kind === 'fragment') {
+    const nextChildren: NodeIR[] = [];
+    for (const child of node.children) {
+      nextChildren.push(transformDivideNodes(child, colorGroup));
+    }
+    return Object.assign({}, node, { children: nextChildren });
+  }
+
+  if (node.kind === 'ring') {
+    return Object.assign({}, node, { child: transformDivideNodes(node.child, colorGroup) });
+  }
+
+  const nextChildren: NodeIR[] = [];
+  for (const child of node.children) {
+    nextChildren.push(transformDivideNodes(child, colorGroup));
+  }
+
+  const divideConfig = parseDivideClasses(node.classes, colorGroup);
+  if (!divideConfig || nextChildren.length <= 1) {
+    return Object.assign({}, node, { children: nextChildren });
+  }
+
+  const filteredClasses: string[] = [];
+  for (const cls of node.classes) {
+    if (cls === 'divide-y' || cls === 'divide-x' || cls.startsWith('divide-')) {
+      continue;
+    }
+    filteredClasses.push(cls);
+  }
+
+  const spacedChildren: NodeIR[] = [];
+  for (let i = 0; i < nextChildren.length; i++) {
+    spacedChildren.push(nextChildren[i]);
+    if (i < nextChildren.length - 1) {
+      spacedChildren.push({
+        kind: 'divider',
+        direction: divideConfig.direction,
+        color: divideConfig.color,
+      });
+    }
+  }
+
+  return Object.assign({}, node, {
+    classes: filteredClasses,
+    children: spacedChildren,
+  });
+}
+
+function transformRingNodes(node: NodeIR, colorGroup: Record<string, string>): NodeIR {
+  if (node.kind === 'text' || node.kind === 'divider') {
+    return node;
+  }
+
+  if (node.kind === 'fragment') {
+    const nextChildren: NodeIR[] = [];
+    for (const child of node.children) {
+      nextChildren.push(transformRingNodes(child, colorGroup));
+    }
+    return Object.assign({}, node, { children: nextChildren });
+  }
+
+  if (node.kind === 'ring') {
+    return Object.assign({}, node, { child: transformRingNodes(node.child, colorGroup) });
+  }
+
+  const nextChildren: NodeIR[] = [];
+  for (const child of node.children) {
+    nextChildren.push(transformRingNodes(child, colorGroup));
+  }
+
+  const ringConfig = parseRingClasses(node.classes, colorGroup);
+  if (!ringConfig) {
+    return Object.assign({}, node, { children: nextChildren });
+  }
+
+  const filteredClasses: string[] = [];
+  for (const cls of node.classes) {
+    if (cls.includes(':')) {
+      const tail = cls.split(':').pop() || '';
+      if (ringConfig.usedVariant && isRingUtility(tail)) {
+        continue;
+      }
+      filteredClasses.push(cls);
+      continue;
+    }
+    if (isRingUtility(cls)) {
+      continue;
+    }
+    filteredClasses.push(cls);
+  }
+
+  const cleanedNode = Object.assign({}, node, {
+    classes: filteredClasses,
+    children: nextChildren,
+  });
+
+  if (ringConfig.width <= 0) {
+    return cleanedNode;
+  }
+
+  return {
+    kind: 'ring',
+    ringWidth: ringConfig.width,
+    ringColor: ringConfig.color,
+    ringOpacity: ringConfig.opacity,
+    offsetWidth: ringConfig.offsetWidth,
+    offsetColor: ringConfig.offsetColor,
+    classes: filteredClasses,
+    child: cleanedNode,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Divide / Ring parsing helpers
+// ---------------------------------------------------------------------------
+
+function parseDivideClasses(
+  classes: string[],
+  colorGroup: Record<string, string>
+): { direction: 'HORIZONTAL' | 'VERTICAL'; color: RGB } | null {
+  const hasDivideY = classes.includes('divide-y');
+  const hasDivideX = classes.includes('divide-x');
+  if (!hasDivideY && !hasDivideX) return null;
+
+  let divideColor: RGB = { r: 0.9, g: 0.9, b: 0.9 };
+
+  for (const cls of classes) {
+    if (cls.startsWith('divide-') && cls !== 'divide-y' && cls !== 'divide-x') {
+      const colorName = cls.replace('divide-', '');
+      if (colorGroup[colorName]) {
+        divideColor = parseColor(colorGroup[colorName]);
+      } else if (colorName === 'border' && colorGroup['border']) {
+        divideColor = parseColor(colorGroup['border']);
+      }
+    }
+  }
+
+  return {
+    direction: hasDivideY ? 'HORIZONTAL' : 'VERTICAL',
+    color: divideColor,
+  };
+}
+
+function parseRingClasses(
+  classes: string[],
+  colorGroup: Record<string, string>
+): {
+  width: number;
+  color: RGB;
+  opacity: number;
+  offsetWidth: number;
+  offsetColor: RGB | null;
+  usedVariant: boolean;
+} | null {
+  const baseClasses: string[] = [];
+
+  for (const raw of classes) {
+    if (raw.indexOf(':') !== -1) {
+      continue;
+    }
+    if (isRingUtility(raw)) baseClasses.push(raw);
+  }
+
+  const baseConfig = parseRingTokens(baseClasses, colorGroup);
+  if (baseConfig) {
+    baseConfig.usedVariant = false;
+    return baseConfig;
+  }
+
+  return null;
+}
+
+function parseRingTokens(
+  classes: string[],
+  colorGroup: Record<string, string>
+): {
+  width: number;
+  color: RGB;
+  opacity: number;
+  offsetWidth: number;
+  offsetColor: RGB | null;
+  usedVariant: boolean;
+} | null {
+  let width: number | null = null;
+  let color: RGB | null = null;
+  let opacity: number | null = null;
+  let offsetWidth: number | null = null;
+  let offsetColor: RGB | null = null;
+  let sawRing = false;
+
+  for (const raw of classes) {
+    if (raw === 'ring') {
+      sawRing = true;
+      width = width == null ? 3 : width;
+      continue;
+    }
+    const widthMatch = raw.match(/^ring-(\d+)$/);
+    if (widthMatch) {
+      sawRing = true;
+      width = parseInt(widthMatch[1], 10);
+      continue;
+    }
+    const bracketMatch = raw.match(/^ring-\[(\d+(?:\.\d+)?)px\]$/);
+    if (bracketMatch) {
+      sawRing = true;
+      width = parseFloat(bracketMatch[1]);
+      continue;
+    }
+    const opacityMatch = raw.match(/^ring-opacity-(\d+)$/);
+    if (opacityMatch) {
+      sawRing = true;
+      opacity = Math.max(0, Math.min(1, parseInt(opacityMatch[1], 10) / 100));
+      continue;
+    }
+    if (raw === 'ring-inset') {
+      sawRing = true;
+      continue;
+    }
+    if (raw.startsWith('ring-offset-')) {
+      sawRing = true;
+      const offsetRaw = raw.slice('ring-offset-'.length);
+      const offsetBracket = offsetRaw.match(/^\[(.+)\]$/);
+      if (offsetBracket) {
+        const inner = offsetBracket[1];
+        if (isLikelyColorValue(inner)) {
+          offsetColor = parseColor(inner);
+        }
+        continue;
+      }
+      if (/^\d+(?:\.\d+)?$/.test(offsetRaw)) {
+        offsetWidth = parseFloat(offsetRaw);
+        continue;
+      }
+      if (colorGroup[offsetRaw]) {
+        offsetColor = parseColor(colorGroup[offsetRaw]);
+      }
+      continue;
+    }
+    if (raw.startsWith('ring-')) {
+      sawRing = true;
+      const tokenRaw = raw.slice('ring-'.length);
+      const parts = tokenRaw.split('/');
+      const token = parts[0];
+      if (parts.length > 1) {
+        const op = parseInt(parts[1], 10);
+        if (Number.isFinite(op)) {
+          opacity = Math.max(0, Math.min(1, op / 100));
+        }
+      }
+      if (colorGroup[token]) {
+        color = parseColor(colorGroup[token]);
+      } else if (isLikelyColorValue(token)) {
+        color = parseColor(token);
+      }
+    }
+  }
+
+  if (!sawRing) return null;
+
+  if (width == null) width = 3;
+  if (!color) {
+    if (colorGroup.ring) {
+      color = parseColor(colorGroup.ring);
+    } else if (colorGroup.primary) {
+      color = parseColor(colorGroup.primary);
+    } else {
+      color = parseColor('#16A34A');
+    }
+  }
+  if (opacity == null) opacity = 1;
+  if (offsetWidth == null) offsetWidth = 0;
+  if (offsetWidth > 0 && !offsetColor) {
+    if (colorGroup.background) {
+      offsetColor = parseColor(colorGroup.background);
+    } else if (colorGroup.card) {
+      offsetColor = parseColor(colorGroup.card);
+    } else {
+      offsetColor = parseColor('#ffffff');
+    }
+  }
+
+  return {
+    width: width,
+    color: color,
+    opacity: opacity,
+    offsetWidth: offsetWidth,
+    offsetColor: offsetColor,
+    usedVariant: false,
+  };
+}
+
+function isRingUtility(value: string): boolean {
+  return value === 'ring'
+    || value === 'ring-inset'
+    || value.startsWith('ring-')
+    || value.startsWith('ring-offset-');
+}
+
+function isLikelyColorValue(value: string): boolean {
+  if (value.toLowerCase().startsWith('oklch(')) return true;
+  return /^#([0-9a-f]{3}|([0-9a-f]{2}){3})$/i.test(value);
+}