inkbridge 0.1.0-beta.10 → 0.1.0-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inkbridge",
-  "version": "0.1.0-beta.10",
+  "version": "0.1.0-beta.11",
   "description": "Figma plugin that generates a pixel-accurate design system from your Tailwind React components.",
   "type": "module",
   "bin": {
@@ -9,7 +9,7 @@
   "files": [
     "bin/",
     "scanner/",
-    "src/token-source.ts",
+    "src/",
     "templates/",
     "code.js",
     "ui.html",

package/src/blob-placement.ts

@@ -0,0 +1,111 @@
+export type BlobDimensions = {
+  vectorWidth: number;
+  vectorHeight: number;
+};
+
+export type BlobPlacement = {
+  layoutLeft: number;
+  desiredCenterX: number;
+  desiredCenterY: number;
+  cssRotateDeg: number;
+  topOffset: number;
+  hasTranslateXHalf: boolean;
+};
+
+const LEFT_CALC_REGEX = /^left-\[calc\(50%([+-]\d+(?:\.\d+)?rem)?\)\]$/;
+const WIDTH_REGEX = /^w-(\d+(?:\.\d+)?)$/;
+const ASPECT_REGEX = /^aspect-(\d+)\/(\d+)$/;
+const TOP_REGEX = /^(-?)top-(\d+(?:\.\d+)?)$/;
+const ROTATE_SIMPLE_REGEX = /^(-?)rotate-(\d+(?:\.\d+)?)$/;
+const ROTATE_ARBITRARY_REGEX = /^(-?)rotate-\[(-?\d+(?:\.\d+)?)deg\]$/;
+
+function findLastClass(classes: string[], predicate: (cls: string) => boolean): string | null {
+  for (let i = classes.length - 1; i >= 0; i--) {
+    if (predicate(classes[i])) return classes[i];
+  }
+  return null;
+}
+
+export function parseRotateDegreesFromClasses(classes: string[]): number {
+  for (let i = classes.length - 1; i >= 0; i--) {
+    const cls = classes[i];
+    const simple = cls.match(ROTATE_SIMPLE_REGEX);
+    if (simple) {
+      const sign = simple[1] === '-' ? -1 : 1;
+      return sign * parseFloat(simple[2]);
+    }
+    const arbitrary = cls.match(ROTATE_ARBITRARY_REGEX);
+    if (arbitrary) {
+      const sign = arbitrary[1] === '-' ? -1 : 1;
+      return sign * parseFloat(arbitrary[2]);
+    }
+  }
+  return 0;
+}
+
+export function resolveBlobDimensions(
+  activeClasses: string[],
+  defaults: BlobDimensions = { vectorWidth: 578, vectorHeight: 340 },
+): BlobDimensions {
+  let vectorWidth = defaults.vectorWidth;
+  let vectorHeight = defaults.vectorHeight;
+
+  const widthClass = findLastClass(activeClasses, cls => WIDTH_REGEX.test(cls));
+  if (widthClass) {
+    const widthMatch = widthClass.match(WIDTH_REGEX);
+    if (widthMatch) {
+      vectorWidth = parseFloat(widthMatch[1]) * 4;
+    }
+  }
+
+  const aspectClass = findLastClass(activeClasses, cls => ASPECT_REGEX.test(cls));
+  if (aspectClass) {
+    const aspectMatch = aspectClass.match(ASPECT_REGEX);
+    if (aspectMatch) {
+      const ratio = parseFloat(aspectMatch[1]) / parseFloat(aspectMatch[2]);
+      vectorHeight = vectorWidth / ratio;
+    }
+  }
+
+  return { vectorWidth, vectorHeight };
+}
+
+export function resolveBlobPlacement(
+  activeClasses: string[],
+  containerWidth: number,
+  vectorWidth: number,
+  vectorHeight: number,
+): BlobPlacement {
+  const hasTranslateXHalf = activeClasses.includes('-translate-x-1/2');
+
+  let layoutLeft = 0;
+  const leftClass = findLastClass(activeClasses, cls => LEFT_CALC_REGEX.test(cls));
+  if (leftClass) {
+    const leftMatch = leftClass.match(LEFT_CALC_REGEX);
+    const remOffset = leftMatch && leftMatch[1] ? parseFloat(leftMatch[1]) * 16 : 0;
+    layoutLeft = containerWidth * 0.5 + remOffset;
+  }
+
+  let topOffset = 0;
+  const topClass = findLastClass(activeClasses, cls => TOP_REGEX.test(cls));
+  if (topClass) {
+    const topMatch = topClass.match(TOP_REGEX);
+    if (topMatch) {
+      const sign = topMatch[1] === '-' ? -1 : 1;
+      topOffset = parseFloat(topMatch[2]) * 4 * sign;
+    }
+  }
+
+  const desiredCenterX = hasTranslateXHalf ? layoutLeft : (layoutLeft + vectorWidth / 2);
+  const desiredCenterY = vectorHeight / 2;
+  const cssRotateDeg = parseRotateDegreesFromClasses(activeClasses);
+
+  return {
+    layoutLeft,
+    desiredCenterX,
+    desiredCenterY,
+    cssRotateDeg,
+    topOffset,
+    hasTranslateXHalf,
+  };
+}

package/src/change-detection.ts

@@ -0,0 +1,204 @@
+import { COMPONENT_DEFS } from './tokens';
+import { extractFrameProperties, propsToTailwindClasses } from './tailwind';
+
+interface ComponentFrame {
+  frame: any;
+  componentName: string;
+  variant: string;
+  state: string;
+  props: any;
+}
+
+interface ChangeDetail {
+  property: string;
+  figma: string;
+  code: string;
+  newClasses: string[];
+}
+
+interface ComponentChange {
+  name: string;
+  type: string;
+  file: string;
+  changes: ChangeDetail[];
+  figmaProps: any;
+  suggestedClasses: string[];
+}
+
+interface ClassUpdate {
+  property: string;
+  remove: string[];
+  add: string[];
+}
+
+interface ComponentPatch {
+  component: string;
+  file: string;
+  classUpdates: ClassUpdate[];
+}
+
+export function findComponentFrames(): ComponentFrame[] {
+  let dsPage: any = null;
+  for (let i = 0; i < (figma as any).root.children.length; i++) {
+    if ((figma as any).root.children[i].name === 'Design System') {
+      dsPage = (figma as any).root.children[i];
+      break;
+    }
+  }
+
+  if (!dsPage) {
+    return [];
+  }
+
+  const components: ComponentFrame[] = [];
+
+  // Find component frames by name pattern: "ComponentName/variant/state" or "ComponentName States"
+  function searchFrames(node: any, depth: number): void {
+    if (depth > 5) return; // Limit depth
+
+    if (node.type === 'FRAME' || node.type === 'COMPONENT') {
+      // Check if this looks like a component instance
+      const nameParts = node.name.split('/');
+      if (nameParts.length >= 2) {
+        // This is a variant frame like "Button/default/hover"
+        components.push({
+          frame: node,
+          componentName: nameParts[0],
+          variant: nameParts[1],
+          state: nameParts[2] || 'default',
+          props: extractFrameProperties(node)
+        });
+      }
+    }
+
+    if ('children' in node) {
+      for (let i = 0; i < node.children.length; i++) {
+        searchFrames(node.children[i], depth + 1);
+      }
+    }
+  }
+
+  searchFrames(dsPage, 0);
+  return components;
+}
+
+/**
+ * Compare Figma component properties with code definitions
+ * Returns list of changed components with their differences
+ */
+export function detectComponentChanges(): { changes?: ComponentChange[]; error?: string } {
+  const figmaComponents = findComponentFrames();
+  const changes: ComponentChange[] = [];
+
+  // Group Figma frames by component name
+  const figmaByComponent: Record<string, ComponentFrame[]> = {};
+  for (let i = 0; i < figmaComponents.length; i++) {
+    const comp = figmaComponents[i];
+    if (!figmaByComponent[comp.componentName]) {
+      figmaByComponent[comp.componentName] = [];
+    }
+    figmaByComponent[comp.componentName].push(comp);
+  }
+
+  // Compare with code definitions
+  if (!COMPONENT_DEFS || !(COMPONENT_DEFS as any).components) {
+    return { error: 'No component definitions loaded. Start dev server and refresh.' };
+  }
+
+  for (let j = 0; j < (COMPONENT_DEFS as any).components.length; j++) {
+    const codeDef = (COMPONENT_DEFS as any).components[j];
+    const figmaFrames = figmaByComponent[codeDef.name] || [];
+
+    if (figmaFrames.length === 0) {
+      continue; // Component not found in Figma
+    }
+
+    // Get the first frame as representative (usually default state)
+    const figmaFrame = figmaFrames[0];
+    const figmaProps = figmaFrame.props;
+    const figmaClasses = propsToTailwindClasses(figmaProps);
+
+    // Get code classes
+    let codeClasses: string[] = [];
+    if (codeDef.type === 'cva' && codeDef.baseClasses) {
+      codeClasses = codeDef.baseClasses;
+    } else if (codeDef.type === 'state' && codeDef.baseClasses) {
+      codeClasses = codeDef.baseClasses;
+    } else if (codeDef.type === 'simple' && codeDef.classes) {
+      codeClasses = codeDef.classes;
+    }
+
+    // Find spacing/radius classes in code
+    const codeSpacingClasses = codeClasses.filter(function(cls: string) {
+      return /^(p|px|py|pt|pb|pl|pr|m|mx|my|mt|mb|ml|mr|rounded)/.test(cls);
+    });
+
+    // Compare
+    let hasChanges = false;
+    const changeDetails: ChangeDetail[] = [];
+
+    // Check padding changes
+    const figmaPadding = figmaClasses.filter(function(c: string) { return c.startsWith('p'); });
+    const codePadding = codeSpacingClasses.filter(function(c: string) { return c.startsWith('p'); });
+
+    if (figmaPadding.join(' ') !== codePadding.join(' ')) {
+      hasChanges = true;
+      changeDetails.push({
+        property: 'padding',
+        figma: figmaPadding.join(' ') || 'none',
+        code: codePadding.join(' ') || 'none',
+        newClasses: figmaPadding
+      });
+    }
+
+    // Check radius changes
+    const figmaRadius = figmaClasses.filter(function(c: string) { return c.startsWith('rounded'); });
+    const codeRadius = codeSpacingClasses.filter(function(c: string) { return c.startsWith('rounded'); });
+
+    if (figmaRadius.join(' ') !== codeRadius.join(' ')) {
+      hasChanges = true;
+      changeDetails.push({
+        property: 'borderRadius',
+        figma: figmaRadius.join(' ') || 'none',
+        code: codeRadius.join(' ') || 'none',
+        newClasses: figmaRadius
+      });
+    }
+
+    if (hasChanges) {
+      changes.push({
+        name: codeDef.name,
+        type: codeDef.type,
+        file: codeDef.file,
+        changes: changeDetails,
+        figmaProps: figmaProps,
+        suggestedClasses: figmaClasses
+      });
+    }
+  }
+
+  return { changes: changes };
+}
+
+/**
+ * Generate code patch for a component
+ * Returns the class changes that need to be made
+ */
+export function generateComponentPatch(componentChange: ComponentChange): ComponentPatch {
+  const patch: ComponentPatch = {
+    component: componentChange.name,
+    file: componentChange.file,
+    classUpdates: []
+  };
+
+  for (let i = 0; i < componentChange.changes.length; i++) {
+    const change = componentChange.changes[i];
+    patch.classUpdates.push({
+      property: change.property,
+      remove: change.code.split(' ').filter(Boolean),
+      add: change.newClasses
+    });
+  }
+
+  return patch;
+}

package/src/class-utils.ts

@@ -0,0 +1,105 @@
+import { type JsxNode, type JsxElement, splitClassName } from './node-ir';
+
+export type ComponentDefResolver = (name: string) => any | null;
+
+export function mergeClasses(base: string[], extra: string[]): string[] {
+  const seen: Record<string, boolean> = {};
+  const out: string[] = [];
+  for (const cls of base || []) {
+    if (!cls || seen[cls]) continue;
+    seen[cls] = true;
+    out.push(cls);
+  }
+  for (const cls of extra || []) {
+    if (!cls || seen[cls]) continue;
+    if (cls === 'rounded' || cls.indexOf('rounded-') === 0) {
+      const nextOut: string[] = [];
+      for (const existing of out) {
+        if (existing === 'rounded' || existing.indexOf('rounded-') === 0) {
+          delete seen[existing];
+          continue;
+        }
+        nextOut.push(existing);
+      }
+      out.length = 0;
+      for (const existing of nextOut) out.push(existing);
+    }
+    seen[cls] = true;
+    out.push(cls);
+  }
+  return out;
+}
+
+export function getCompoundClasses(def: any, tagName: string): string[] {
+  if (!def || def.type !== 'compound' || !def.subComponents) return [];
+  const target = tagName.toLowerCase();
+  let fallback: any = null;
+  for (const sub of def.subComponents) {
+    if (!sub || !sub.name) continue;
+    const subName = String(sub.name).toLowerCase();
+    if (subName === target) return sub.classes || [];
+    if (!fallback && (sub.slot === 'container' || subName === String(def.name || '').toLowerCase())) {
+      fallback = sub;
+    }
+  }
+  if (fallback && String(def.name || '').toLowerCase() === target) {
+    return fallback.classes || [];
+  }
+  return [];
+}
+
+export function treeHasFullWidth(
+  node: JsxNode | undefined,
+  parentCompoundDef: any | null,
+  options: {
+    getComponentDefByName: ComponentDefResolver;
+    normalizeComponentDef: (def: any) => any;
+    hasWidthHintInClasses: (classes: string[]) => boolean;
+    propsContainWidthHint: (props: Record<string, any> | undefined) => boolean;
+  }
+): boolean {
+  if (!node || node.type !== 'element') return false;
+  const el = node as JsxElement;
+  let classes = splitClassName(el.props && el.props.className);
+  let nextParentCompoundDef = parentCompoundDef || null;
+
+  if (el.isComponent) {
+    const compDef = options.getComponentDefByName(el.tagName);
+    if (compDef) {
+      const normalizedDef = options.normalizeComponentDef(compDef);
+      if (normalizedDef.type === 'compound') {
+        nextParentCompoundDef = normalizedDef;
+        const compoundClasses = getCompoundClasses(normalizedDef, el.tagName);
+        if (compoundClasses.length > 0) {
+          classes = mergeClasses(compoundClasses, classes);
+        }
+      }
+
+      const baseClasses = normalizedDef.baseClasses || normalizedDef.classes || [];
+      if (baseClasses.length > 0) {
+        classes = mergeClasses(baseClasses, classes);
+      }
+
+      const variants = normalizedDef.variantClasses || {};
+      const defaults = normalizedDef.defaultVariants || {};
+      for (const key in variants) {
+        const value = (el.props && el.props[key]) || defaults[key];
+        if (value && variants[key] && variants[key][value]) {
+          classes = mergeClasses(variants[key][value], classes);
+        }
+      }
+    } else if (parentCompoundDef) {
+      const inherited = getCompoundClasses(parentCompoundDef, el.tagName);
+      if (inherited.length > 0) {
+        classes = mergeClasses(inherited, classes);
+      }
+    }
+  }
+
+  if (options.hasWidthHintInClasses(classes)) return true;
+  if (options.propsContainWidthHint(el.props)) return true;
+  for (const child of el.children || []) {
+    if (treeHasFullWidth(child, nextParentCompoundDef, options)) return true;
+  }
+  return false;
+}

package/src/clip-path-decorative.ts

@@ -0,0 +1,194 @@
+import { getClassesForBreakpoint } from './responsive-analyzer';
+import { applyTailwindStylesToFrame, markAbsoluteNode, markPositionInfo } from './tailwind';
+import { parseUtilityClass } from './utility-resolver';
+import { resolveBlobDimensions, resolveBlobPlacement } from './blob-placement';
+import { centerPlacedRotationTransform } from './transform-math';
+
+declare const figma: any;
+
+const DEBUG_BLOB_PLACEMENT = false;
+
+export type DecorativeClipPathParams = {
+  clipPathPolygon: string;
+  classes: string[];
+  contextMaxWidth?: number;
+  colorGroup: Record<string, string>;
+  radiusGroup: Record<string, string> | null;
+  theme: string;
+};
+
+export function parseClipPathFromStyle(style: string | Record<string, string> | undefined): string | null {
+  if (!style) return null;
+  if (typeof style === 'object') {
+    const clipPath = (style as any).clipPath || (style as any)['clip-path'];
+    if (!clipPath || typeof clipPath !== 'string') return null;
+    const match = clipPath.match(/polygon\s*\(\s*([^)]+)\s*\)/);
+    if (!match) return null;
+    return match[1].trim();
+  }
+  const match = (style as string).match(/polygon\s*\(\s*([^)]+)\s*\)/);
+  if (!match) return null;
+  return match[1].trim();
+}
+
+export function buildDecorativeClipPathNode(params: DecorativeClipPathParams): SceneNode | null {
+  const { clipPathPolygon, classes, contextMaxWidth, colorGroup, radiusGroup, theme } = params;
+  const activeClasses = (contextMaxWidth != null && contextMaxWidth >= 640)
+    ? getClassesForBreakpoint(classes, 'sm')
+    : classes;
+  const { vectorWidth, vectorHeight } = resolveBlobDimensions(activeClasses);
+  const vector = createVectorFromPolygon(clipPathPolygon, vectorWidth, vectorHeight);
+  if (!vector) return null;
+
+  const blobNode: SceneNode = vector;
+  vector.name = 'gradient-blob';
+  const clippedClasses = stripBlurUtilities(activeClasses);
+  applyTailwindStylesToFrame(vector as any, clippedClasses, colorGroup, radiusGroup, theme);
+
+  const containerWidth = contextMaxWidth;
+  if (containerWidth) {
+    const placement = resolveBlobPlacement(activeClasses, containerWidth, vectorWidth, vectorHeight);
+    const cssRotateDeg = placement.cssRotateDeg;
+    const topOffset = placement.topOffset;
+
+    const mask = figma.createFrame();
+    mask.name = 'gradient-blob-mask';
+    mask.layoutMode = 'NONE';
+    mask.primaryAxisSizingMode = 'FIXED';
+    mask.counterAxisSizingMode = 'FIXED';
+    mask.fills = [];
+    mask.strokes = [];
+    mask.clipsContent = false;
+    mask.resize(containerWidth, vectorHeight);
+
+    const blobBox = figma.createFrame();
+    blobBox.name = 'gradient-blob-box';
+    blobBox.layoutMode = 'NONE';
+    blobBox.primaryAxisSizingMode = 'FIXED';
+    blobBox.counterAxisSizingMode = 'FIXED';
+    blobBox.fills = [];
+    blobBox.strokes = [];
+    blobBox.resize(vectorWidth, vectorHeight);
+    blobBox.appendChild(blobNode);
+    vector.x = 0;
+    vector.y = 0;
+    mask.appendChild(blobBox);
+
+    const usedMatrix = Math.abs(cssRotateDeg) > 0.001
+      ? setTransformFromCenter(blobBox as SceneNode, vectorWidth, vectorHeight, placement.desiredCenterX, placement.desiredCenterY, cssRotateDeg)
+      : false;
+    if (!usedMatrix) {
+      blobBox.x = placement.desiredCenterX - vectorWidth / 2;
+      blobBox.y = 0;
+      if (Math.abs(cssRotateDeg) > 0.001) {
+        try {
+          blobBox.rotation = -cssRotateDeg;
+        } catch (_err) {
+          // ignore rotation errors
+        }
+      }
+    }
+    if (DEBUG_BLOB_PLACEMENT) {
+      console.log('[blob-place]', {
+        containerWidth,
+        vectorWidth,
+        vectorHeight,
+        desiredCenterX: placement.desiredCenterX,
+        desiredCenterY: placement.desiredCenterY,
+        topOffset,
+        cssRotateDeg,
+        usedMatrix,
+      });
+    }
+    return mask;
+  }
+
+  if (contextMaxWidth == null) {
+    const placement = resolveBlobPlacement(activeClasses, 0, vectorWidth, vectorHeight);
+    const cssRotateDeg = placement.cssRotateDeg;
+    if (Math.abs(cssRotateDeg) > 0.001) {
+      try {
+        (blobNode as any).rotation = -cssRotateDeg;
+      } catch (_err) {
+        // ignore rotation errors
+      }
+    }
+    markAbsoluteNode(blobNode);
+    markPositionInfo(blobNode, { left: placement.desiredCenterX - vectorWidth / 2, top: placement.topOffset });
+  }
+  return blobNode;
+}
+
+function createVectorFromPolygon(
+  polygonStr: string,
+  width: number,
+  height: number
+): VectorNode | null {
+  try {
+    const points = parsePolygonPoints(polygonStr, width, height);
+    if (!points || points.length < 3) return null;
+
+    let pathData = `M ${points[0].x} ${points[0].y}`;
+    for (let i = 1; i < points.length; i++) {
+      pathData += ` L ${points[i].x} ${points[i].y}`;
+    }
+    pathData += ' Z';
+
+    const vector = figma.createVector();
+    vector.vectorPaths = [{ windingRule: 'EVENODD', data: pathData }];
+    vector.resize(width, height);
+    vector.strokes = [];
+    vector.fills = [];
+    return vector;
+  } catch (_err) {
+    return null;
+  }
+}
+
+function parsePolygonPoints(
+  polygonStr: string,
+  width: number,
+  height: number
+): { x: number; y: number }[] | null {
+  const points = polygonStr.split(',').map(p => {
+    const parts = p.trim().split(/\s+/);
+    if (parts.length < 2) return null;
+    const x = parseFloat(parts[0].replace('%', '')) / 100;
+    const y = parseFloat(parts[1].replace('%', '')) / 100;
+    if (isNaN(x) || isNaN(y)) return null;
+    return { x: x * width, y: y * height };
+  }).filter(Boolean) as { x: number; y: number }[];
+  return points.length >= 3 ? points : null;
+}
+
+function stripBlurUtilities(classes: string[]): string[] {
+  const next: string[] = [];
+  for (let i = 0; i < classes.length; i++) {
+    const cls = classes[i];
+    const atom = parseUtilityClass(cls);
+    if (!atom.utility) {
+      next.push(cls);
+      continue;
+    }
+    if (/^blur(?:-.+)?$/.test(atom.utility)) continue;
+    next.push(cls);
+  }
+  return next;
+}
+
+function setTransformFromCenter(
+  node: SceneNode,
+  width: number,
+  height: number,
+  centerX: number,
+  centerY: number,
+  rotationDeg: number
+): boolean {
+  const transform = centerPlacedRotationTransform(width, height, centerX, centerY, rotationDeg);
+  try {
+    (node as any).relativeTransform = transform;
+    return true;
+  } catch (_err) {
+    return false;
+  }
+}