inkbridge 0.1.0-beta.2 → 0.1.0-beta.21

package/src/{tailwind.ts → tailwind/tailwind.ts}

@@ -1,21 +1,45 @@
 // --- Tailwind utilities: class parsing, style conversion, and codegen ---
 
-import { COMPONENT_DEFS } from './tokens';
-import { parseColor, nearestColorToken } from './colors';
-import type { RGB } from './colors';
-import { getComponentDef } from './component-defs';
-import { bindColorVariable } from './variables';
+import { COMPONENT_DEFS } from '../tokens';
+import { parseColor, nearestColorToken } from '../tokens';
+import type { RGB } from '../tokens';
+import { getComponentDef } from '../components';
+import { bindColorVariable } from '../tokens';
 import {
   parseUtilityClass,
-  hasResponsiveVariant as hasResponsiveVariantSemantic,
-  variantState as variantStateSemantic,
   spacingValue,
   resolveMaxWidth,
   resolveRadius,
   parseLength as parseLengthSemantic,
 } from './utility-resolver';
-import { parseRadialAnchorFromUtility, radialGradientTransformFromAnchor, type RadialAnchor } from './radial-gradient';
+import { parseRadialAnchorFromUtility, radialGradientTransformFromAnchor, type RadialAnchor } from '../effects';
 import { rotationTransformAroundPointRadians } from './transform-math';
+// Internal mark functions used during CSS processing — resolved post-append by deferred-layout.ts
+import {
+  markAbsoluteNode,
+  markAspectRatio,
+  markPositionInfo,
+  markFullWidthNode,
+  markFullHeightNode,
+  markFixedHeightNode,
+  markFixedWidthNode,
+  markSelfAlignmentNode,
+  markFlexBasisNode,
+  markMinWidthNode,
+  markMaxWidthNode,
+  markGridColumnsNode,
+  markColSpanNode,
+  markFractionWidthNode,
+  markCssGridVerticalFrame,
+  parseFractionToken,
+  setFrameCrossAlign,
+  setFrameInlineAlign,
+  shouldApplyAtom,
+  BORDER_WIDTH_CLASSES,
+  DEFERRED_TOP_RELATIVE_NODES,
+  getRingInfoFromClasses,
+  markRingNode,
+} from '../layout';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -72,583 +96,15 @@ const FALLBACK_COLOR_TOKENS: Record<string, string> = {
 type StyleMapEntry = { declarations: Record<string, string>; media?: string };
 type StyleMap = Record<string, StyleMapEntry[]>;
 
-const ABSOLUTE_NODES = new WeakSet<SceneNode>();
-const CSS_GRID_VERTICAL_FRAMES = new WeakSet<SceneNode>(); // grid without grid-cols-N → single-column, children stretch
-const FULL_WIDTH_NODES = new WeakSet<SceneNode>();
-const FULL_HEIGHT_NODES = new WeakSet<SceneNode>();
-const FRACTION_WIDTH_NODES = new WeakMap<SceneNode, number>();
-const FIXED_WIDTH_NODES = new WeakSet<SceneNode>();
-const SELF_ALIGNMENT_NODES = new WeakMap<SceneNode, 'MIN' | 'CENTER' | 'MAX' | 'STRETCH'>();
-const FLEX_BASIS_NODES = new WeakMap<SceneNode, number>();
-const MIN_WIDTH_NODES = new WeakMap<SceneNode, number>();
-const GRID_COLUMNS_NODES = new WeakMap<SceneNode, number>();
-const COL_SPAN_NODES = new WeakMap<SceneNode, number>(); // child → number of columns spanned
-const POSITION_INFO_NODES = new WeakMap<SceneNode, { top?: number; bottom?: number; left?: number; right?: number; hintParentHeight?: number; inset?: number }>();
-const DEFERRED_BOTTOM_NODES = new WeakMap<SceneNode, number>(); // child → bottom pixel offset
-const DEFERRED_TOP_RELATIVE_NODES = new WeakMap<SceneNode, number>(); // child → (parentHeight - N) top offset
-const DEFERRED_CENTER_Y_NODES = new WeakSet<SceneNode>(); // absolute children needing cross-axis centering
-const BORDER_WIDTH_CLASSES = new WeakMap<SceneNode, string[]>();
 
 function getStyleMap(): StyleMap | null {
-  const defs: any = COMPONENT_DEFS as any;
+  const defs = COMPONENT_DEFS;
   return defs && defs.styleMap ? (defs.styleMap as StyleMap) : null;
 }
 
 function getPaletteTokens(): Record<string, string> {
-  const defs: any = COMPONENT_DEFS as any;
-  return defs && defs.paletteTokens ? (defs.paletteTokens as Record<string, string>) : {};
-}
-
-export function markAbsoluteNode(node: SceneNode): void {
-  ABSOLUTE_NODES.add(node);
-}
-
-export function markPositionInfo(node: SceneNode, info: { top?: number; bottom?: number; left?: number; right?: number; hintParentHeight?: number; inset?: number }): void {
-  const existing = POSITION_INFO_NODES.get(node) || {};
-  POSITION_INFO_NODES.set(node, { ...existing, ...info });
-}
-
-export function applyAbsoluteIfPossible(child: SceneNode, parent: FrameNode): void {
-  if (!ABSOLUTE_NODES.has(child)) return;
-  if ('layoutMode' in parent && parent.layoutMode && parent.layoutMode !== 'NONE') {
-    try {
-      (child as any).layoutPositioning = 'ABSOLUTE';
-
-      // Apply positioning from stored position info
-      const posInfo = POSITION_INFO_NODES.get(child);
-      if (posInfo) {
-        // If the child hints a minimum parent height (e.g. gradient-blob inside collapsed container)
-        if (posInfo.hintParentHeight != null && 'resize' in parent) {
-          try {
-            const ph = posInfo.hintParentHeight;
-            const pw = Math.max(1, parent.width);
-            // Respect explicit fixed-height parents. Only auto-expand when the
-            // parent is effectively unconstrained/collapsed.
-            let heightIsFixed = false;
-            if ('layoutMode' in parent && 'primaryAxisSizingMode' in parent && 'counterAxisSizingMode' in parent) {
-              if ((parent as any).layoutMode === 'VERTICAL') {
-                heightIsFixed = (parent as any).primaryAxisSizingMode === 'FIXED';
-              } else if ((parent as any).layoutMode === 'HORIZONTAL') {
-                heightIsFixed = (parent as any).counterAxisSizingMode === 'FIXED';
-              }
-            }
-            const parentCollapsed = parent.height <= 1;
-            if (!heightIsFixed && parentCollapsed && parent.height < ph) {
-              parent.resize(pw, ph);
-              if ('primaryAxisSizingMode' in parent) (parent as any).primaryAxisSizingMode = 'FIXED';
-            }
-          } catch (_e) { /* ignore */ }
-        }
-        if ('x' in child && 'y' in child) {
-          const childFrame = child as FrameNode;
-          // inset-{n}: position at (n, n) and resize to fill parent minus inset on all sides
-          if (posInfo.inset != null) {
-            const inset = posInfo.inset;
-            childFrame.x = inset;
-            childFrame.y = inset;
-            const targetW = Math.max(1, parent.width - inset * 2);
-            const targetH = Math.max(1, parent.height - inset * 2);
-            try {
-              (childFrame as any).resize(targetW, targetH);
-              if ('primaryAxisSizingMode' in childFrame) (childFrame as any).primaryAxisSizingMode = 'FIXED';
-              if ('counterAxisSizingMode' in childFrame) (childFrame as any).counterAxisSizingMode = 'FIXED';
-            } catch (_e) { /* ignore */ }
-          } else {
-            if (posInfo.left != null) {
-              childFrame.x = posInfo.left;
-            } else if (posInfo.right != null) {
-              childFrame.x = parent.width - childFrame.width - posInfo.right;
-            }
-            if (posInfo.top != null) {
-              childFrame.y = posInfo.top;
-            } else if (posInfo.bottom != null) {
-              // Defer: parent height may not be final yet (flow children added after this call)
-              DEFERRED_BOTTOM_NODES.set(child, posInfo.bottom);
-            } else {
-              // No explicit top/bottom: CSS places absolute children at the cross-axis
-              // static position. For items-center parents this means vertically centered.
-              if ((parent as any).counterAxisAlignItems === 'CENTER') {
-                DEFERRED_CENTER_Y_NODES.add(child);
-              }
-            }
-          }
-        }
-      }
-    } catch (_err) {
-      // ignore
-    }
-  }
-  ABSOLUTE_NODES.delete(child);
-  POSITION_INFO_NODES.delete(child);
-}
-
-/** Call after all children have been appended to a frame to apply bottom-anchored positions. */
-export function applyDeferredBottomPositioning(parent: FrameNode): void {
-  for (const child of (parent.children as SceneNode[])) {
-    const bottom = DEFERRED_BOTTOM_NODES.get(child);
-    if (bottom != null) {
-      try {
-        (child as any).y = parent.height - (child as any).height - bottom;
-      } catch (_e) { /* ignore */ }
-      DEFERRED_BOTTOM_NODES.delete(child);
-    }
-    // Handle top-[calc(100%-Nrem)]: top = parentHeight - N
-    const topRelative = DEFERRED_TOP_RELATIVE_NODES.get(child);
-    if (topRelative != null) {
-      try {
-        (child as any).y = parent.height - topRelative;
-      } catch (_e) { /* ignore */ }
-      DEFERRED_TOP_RELATIVE_NODES.delete(child);
-    }
-  }
-}
-
-/** Call after all children have been appended to center absolute children with no explicit top/bottom. */
-export function applyDeferredCenterYPositioning(parent: FrameNode): void {
-  const parentHeight = parent.height;
-  if (parentHeight <= 0) return;
-  for (const child of (parent.children as SceneNode[])) {
-    if (DEFERRED_CENTER_Y_NODES.has(child)) {
-      try {
-        const childHeight = (child as any).height || 0;
-        (child as any).y = Math.round((parentHeight - childHeight) / 2);
-      } catch (_e) { /* ignore */ }
-      DEFERRED_CENTER_Y_NODES.delete(child);
-    }
-  }
-}
-
-export function markFullWidthNode(node: SceneNode): void {
-  FULL_WIDTH_NODES.add(node);
-}
-
-function markFullHeightNode(node: SceneNode): void {
-  FULL_HEIGHT_NODES.add(node);
-}
-
-function markFixedWidthNode(node: SceneNode): void {
-  FIXED_WIDTH_NODES.add(node);
-}
-
-function markSelfAlignmentNode(node: SceneNode, align: 'MIN' | 'CENTER' | 'MAX' | 'STRETCH'): void {
-  SELF_ALIGNMENT_NODES.set(node, align);
-}
-
-function markFlexBasisNode(node: SceneNode, basis: number): void {
-  if (!Number.isFinite(basis)) return;
-  FLEX_BASIS_NODES.set(node, basis);
-}
-
-function markMinWidthNode(node: SceneNode, minWidth: number): void {
-  if (!Number.isFinite(minWidth)) return;
-  MIN_WIDTH_NODES.set(node, minWidth);
-}
-
-function markGridColumnsNode(node: SceneNode, cols: number): void {
-  if (!Number.isFinite(cols) || cols <= 0) return;
-  GRID_COLUMNS_NODES.set(node, cols);
-}
-
-function markColSpanNode(node: SceneNode, span: number): void {
-  if (!Number.isFinite(span) || span <= 0) return;
-  COL_SPAN_NODES.set(node, span);
-}
-
-export function getColSpanNode(node: SceneNode): number {
-  return COL_SPAN_NODES.get(node) ?? 1;
-}
-
-function markFractionWidthNode(node: SceneNode, fraction: number): void {
-  if (!Number.isFinite(fraction) || fraction <= 0) return;
-  FRACTION_WIDTH_NODES.set(node, fraction);
-}
-
-function parseFractionToken(token: string): number | null {
-  if (!token.includes('/')) return null;
-  const [rawNum, rawDen] = token.split('/');
-  const num = Number(rawNum);
-  const den = Number(rawDen);
-  if (!Number.isFinite(num) || !Number.isFinite(den) || den === 0) return null;
-  return num / den;
-}
-
-function reapplyDirectionalBordersIfNeeded(node: SceneNode): void {
-  const classes = BORDER_WIDTH_CLASSES.get(node);
-  if (!classes || classes.length === 0) return;
-  if (!('strokes' in node)) return;
-  applyBorderWidthUtilities(node as FrameNode, classes);
-}
-
-export function applyFullWidthIfPossible(
-  child: SceneNode,
-  parent: FrameNode,
-  options?: { skipFullWidth?: boolean; widthOverride?: number }
-): void {
-  const align = SELF_ALIGNMENT_NODES.get(child);
-  const hasSelfAlign = align != null;
-  if (align) {
-    if (align === 'STRETCH') {
-      if ('layoutAlign' in child) {
-        try { (child as any).layoutAlign = align; } catch (_err) { /* ignore */ }
-      }
-    } else {
-      // MIN / CENTER / MAX: layoutAlign is deprecated for these; use layoutSizingHorizontal = 'HUG' as the best proxy
-      try { (child as any).layoutSizingHorizontal = 'HUG'; } catch (_err) { /* ignore if no auto-layout */ }
-    }
-    SELF_ALIGNMENT_NODES.delete(child);
-  }
-
-  const basis = FLEX_BASIS_NODES.get(child);
-  if (basis != null && basis > 0 && 'resize' in child) {
-    try {
-      if (parent.layoutMode === 'HORIZONTAL') {
-        (child as any).resize(basis, (child as any).height);
-        if ('primaryAxisSizingMode' in child) (child as any).primaryAxisSizingMode = 'FIXED';
-      } else if (parent.layoutMode === 'VERTICAL') {
-        (child as any).resize((child as any).width, basis);
-        if ('primaryAxisSizingMode' in child) (child as any).primaryAxisSizingMode = 'FIXED';
-      }
-    } catch (_err) {
-      // ignore
-    }
-  }
-  if (basis != null) {
-    FLEX_BASIS_NODES.delete(child);
-  }
-
-  const minWidth = MIN_WIDTH_NODES.get(child);
-  if (minWidth != null && 'resize' in child) {
-    const currentWidth = (child as any).width as number;
-    if (!Number.isFinite(currentWidth) || currentWidth < minWidth) {
-      try {
-        (child as any).resize(minWidth, (child as any).height);
-        if (parent.layoutMode === 'HORIZONTAL' && 'primaryAxisSizingMode' in child) {
-          (child as any).primaryAxisSizingMode = 'FIXED';
-        } else if (parent.layoutMode === 'VERTICAL' && 'counterAxisSizingMode' in child) {
-          (child as any).counterAxisSizingMode = 'FIXED';
-        }
-      } catch (_err) {
-        // ignore
-      }
-    }
-    MIN_WIDTH_NODES.delete(child);
-  }
-
-  const skipFullWidth = !!(options && options.skipFullWidth);
-  const widthOverride = options && typeof options.widthOverride === 'number' && Number.isFinite(options.widthOverride)
-    ? options.widthOverride
-    : null;
-  const widthBase = widthOverride != null ? widthOverride : parent.width;
-  // CSS grid (single-column) children stretch to fill the column by default (align-items: stretch).
-  // Don't stretch absolute-positioned children — they're handled separately.
-  const isGridStretchChild = !skipFullWidth && CSS_GRID_VERTICAL_FRAMES.has(parent) && !ABSOLUTE_NODES.has(child);
-  const hasFullWidth = skipFullWidth ? false : (FULL_WIDTH_NODES.has(child) || isGridStretchChild);
-  const fractionWidth = skipFullWidth ? null : FRACTION_WIDTH_NODES.get(child);
-  const hasFixedWidth = FIXED_WIDTH_NODES.has(child);
-  const hasFullHeight = FULL_HEIGHT_NODES.has(child);
-  if (!hasFullWidth && fractionWidth == null && !hasFullHeight && !hasFixedWidth) return;
-  if (hasFixedWidth && parent.layoutMode === 'VERTICAL' && !hasSelfAlign && 'layoutAlign' in child) {
-    try {
-      (child as any).layoutAlign = 'INHERIT';
-    } catch (_err) {
-      // ignore
-    }
-  }
-  try {
-    if (!hasFullWidth && fractionWidth != null && 'resize' in child && widthBase > 0) {
-      // widthOverride is already content-width; only subtract padding when using parent.width
-      const padding = widthOverride != null ? 0 : (parent.paddingLeft || 0) + (parent.paddingRight || 0);
-      const targetWidth = Math.max(0, widthBase - padding) * fractionWidth;
-      try {
-        (child as any).resize(targetWidth, (child as any).height);
-        // Prevent fractional width children from expanding
-        if ('layoutGrow' in child) {
-          (child as any).layoutGrow = 0;
-        }
-        if (parent.layoutMode === 'VERTICAL' && !hasSelfAlign && 'layoutAlign' in child) {
-          (child as any).layoutAlign = 'INHERIT';
-        }
-        // Set sizing mode to FIXED so the width is respected
-        if ('layoutMode' in child) {
-          const childLayout = (child as any).layoutMode;
-          if (childLayout === 'HORIZONTAL' && 'primaryAxisSizingMode' in child) {
-            (child as any).primaryAxisSizingMode = 'FIXED';
-          } else if (childLayout === 'VERTICAL' && 'counterAxisSizingMode' in child) {
-            (child as any).counterAxisSizingMode = 'FIXED';
-          }
-        } else if (parent.layoutMode === 'VERTICAL' && 'counterAxisSizingMode' in child) {
-          // For non-layout children in vertical parent, fix the width
-          (child as any).counterAxisSizingMode = 'FIXED';
-        }
-      } catch (_err) {
-        // ignore resize errors
-      }
-    }
-
-    if (hasFullWidth) {
-      if (parent.layoutMode === 'HORIZONTAL') {
-        // When parent uses SPACE_BETWEEN, don't apply layoutGrow=1 because that would
-        // make this child consume all space, leaving nothing for siblings.
-        // In CSS flexbox, width:100% with justify-content:space-between still spaces items at edges.
-        // In Figma, we need to explicitly set layoutGrow=0 and let SPACE_BETWEEN distribute items.
-        const isSpaceBetween = (parent as any).primaryAxisAlignItems === 'SPACE_BETWEEN';
-        if (isSpaceBetween) {
-          // Explicitly set to 0 to prevent any expansion
-          (child as any).layoutGrow = 0;
-          // Also ensure the child sizes to its content, not to fill
-          if ('primaryAxisSizingMode' in child) {
-            (child as any).primaryAxisSizingMode = 'AUTO';
-          }
-        } else {
-          (child as any).layoutGrow = 1;
-        }
-        if (
-          (('primaryAxisSizingMode' in parent && (parent as any).primaryAxisSizingMode === 'FIXED') || widthOverride != null)
-          && 'resize' in child
-          && !isSpaceBetween
-          && widthBase > 0
-        ) {
-          try {
-            (child as any).resize(widthBase, (child as any).height);
-            if ('primaryAxisSizingMode' in child) {
-              (child as any).primaryAxisSizingMode = 'FIXED';
-            }
-          } catch (_err) {
-            // ignore resize errors
-          }
-        }
-      } else if (parent.layoutMode === 'VERTICAL') {
-        // If the child is HORIZONTAL with SPACE_BETWEEN and already has FIXED sizing,
-        // don't use STRETCH as it conflicts. Instead, keep the explicit FIXED width.
-        const childIsHorizontal = 'layoutMode' in child && (child as any).layoutMode === 'HORIZONTAL';
-        const childHasSpaceBetween = childIsHorizontal && (child as any).primaryAxisAlignItems === 'SPACE_BETWEEN';
-        const childHasFixedWidth = 'primaryAxisSizingMode' in child && (child as any).primaryAxisSizingMode === 'FIXED';
-        if (childHasSpaceBetween && childHasFixedWidth) {
-          // Keep the FIXED sizing, but set layoutAlign to FILL to take parent width
-          // Actually, for SPACE_BETWEEN to work, we need the child to have a specific width
-          // So we resize it to parent width and keep FIXED
-          if ('resize' in child && widthBase > 0) {
-            try {
-              const padding = (parent.paddingLeft || 0) + (parent.paddingRight || 0);
-              (child as any).resize(widthBase - padding, (child as any).height);
-            } catch (_err) {
-              // ignore
-            }
-          }
-        } else {
-          (child as any).layoutAlign = 'STRETCH';
-          if (
-            (('counterAxisSizingMode' in parent && (parent as any).counterAxisSizingMode === 'FIXED') || widthOverride != null)
-            && 'resize' in child
-          ) {
-            try {
-              // widthOverride is already content-width (padding already subtracted by caller).
-              // When falling back to parent.width we must subtract padding ourselves.
-              const padding = widthOverride != null ? 0 : (parent.paddingLeft || 0) + (parent.paddingRight || 0);
-              const targetWidth = Math.max(0, widthBase - padding);
-              if (targetWidth > 0) {
-                (child as any).resize(targetWidth, (child as any).height);
-                if ('layoutMode' in child) {
-                  const childLayout = (child as any).layoutMode;
-                  if (childLayout === 'HORIZONTAL' && 'primaryAxisSizingMode' in child) {
-                    (child as any).primaryAxisSizingMode = 'FIXED';
-                  } else if (childLayout === 'VERTICAL' && 'counterAxisSizingMode' in child) {
-                    (child as any).counterAxisSizingMode = 'FIXED';
-                  }
-                } else if ('counterAxisSizingMode' in child) {
-                  (child as any).counterAxisSizingMode = 'FIXED';
-                }
-              }
-            } catch (_err) {
-              // ignore
-            }
-          }
-        }
-      }
-    }
-    if (hasFullHeight) {
-      if (parent.layoutMode === 'VERTICAL') {
-        if ('layoutGrow' in child && (parent as any).primaryAxisSizingMode === 'FIXED') {
-          (child as any).layoutGrow = 1;
-        }
-      } else if (parent.layoutMode === 'HORIZONTAL') {
-        if ('layoutAlign' in child) {
-          (child as any).layoutAlign = 'STRETCH';
-        }
-        if (
-          'counterAxisSizingMode' in parent
-          && (parent as any).counterAxisSizingMode === 'FIXED'
-          && 'resize' in child
-        ) {
-          try {
-            const padding = (parent.paddingTop || 0) + (parent.paddingBottom || 0);
-            const targetHeight = Math.max(0, parent.height - padding);
-            if (targetHeight > 0) {
-              (child as any).resize((child as any).width, targetHeight);
-              if ('counterAxisSizingMode' in child) {
-                (child as any).counterAxisSizingMode = 'FIXED';
-              }
-            }
-          } catch (_err) {
-            // ignore
-          }
-        }
-      }
-    }
-  } catch (_err) {
-    // ignore
-  }
-  reapplyDirectionalBordersIfNeeded(child);
-  // Keep mark so we can re-apply after parent resize.
-}
-
-export function applyGridColumnsIfPossible(
-  frame: FrameNode,
-  widthOverride?: number,
-  colsOverride?: number
-): void {
-  const cols = colsOverride != null ? colsOverride : GRID_COLUMNS_NODES.get(frame);
-  if (!cols || cols <= 0) return;
-  if (colsOverride != null) {
-    GRID_COLUMNS_NODES.set(frame, cols);
-  }
-
-  try {
-    if (frame.layoutMode !== 'HORIZONTAL') {
-      frame.layoutMode = 'HORIZONTAL';
-    }
-    if ((frame as any).layoutWrap !== undefined) {
-      (frame as any).layoutWrap = 'WRAP';
-    }
-  } catch (_err) {
-    // ignore
-  }
-
-  const totalWidth = widthOverride && Number.isFinite(widthOverride) ? widthOverride : frame.width;
-  if (!totalWidth || totalWidth <= 0) return;
-
-  const gap = frame.itemSpacing || 0;
-  const padding = (frame.paddingLeft || 0) + (frame.paddingRight || 0);
-  const available = totalWidth - padding - gap * (cols - 1);
-  if (available <= 0) return;
-
-  const childWidth = Math.max(0, available / cols);
-  if ((frame as any).counterAxisSpacing !== undefined) {
-    (frame as any).counterAxisSpacing = gap;
-  }
-
-  for (const child of frame.children) {
-    if (!('resize' in child)) continue;
-    try {
-      if ((child as any).layoutPositioning === 'ABSOLUTE') continue;
-      const span = Math.min(COL_SPAN_NODES.get(child) ?? 1, cols);
-      const spanWidth = childWidth * span + gap * (span - 1);
-      // For text nodes, fix the width so textAlignHorizontal (e.g. text-right) takes effect.
-      // Without this, WIDTH_AND_HEIGHT auto-resize snaps the node back to text-fit width.
-      if ((child as any).textAutoResize !== undefined) {
-        (child as any).textAutoResize = 'HEIGHT';
-      }
-      (child as any).resize(spanWidth, (child as any).height);
-      // Prevent grid children from expanding beyond calculated width
-      if ('layoutGrow' in child) {
-        (child as any).layoutGrow = 0;
-      }
-      if ('layoutMode' in child) {
-        const childLayout = (child as any).layoutMode;
-        if (childLayout === 'VERTICAL' && 'counterAxisSizingMode' in child) {
-          (child as any).counterAxisSizingMode = 'FIXED';
-        } else if (childLayout === 'HORIZONTAL' && 'primaryAxisSizingMode' in child) {
-          (child as any).primaryAxisSizingMode = 'FIXED';
-        }
-      } else if ('primaryAxisSizingMode' in child) {
-        (child as any).primaryAxisSizingMode = 'FIXED';
-      }
-      reapplyDirectionalBordersIfNeeded(child);
-    } catch (_err) {
-      // ignore
-    }
-  }
-}
-
-export function hasGridColumnsNode(node: SceneNode): boolean {
-  return GRID_COLUMNS_NODES.has(node);
-}
-
-export function getGridColumnsNode(node: SceneNode): number | null {
-  const cols = GRID_COLUMNS_NODES.get(node);
-  return cols != null ? cols : null;
-}
-
-export function applyFlexGrowIfPossible(frame: FrameNode, widthOverride?: number): void {
-  if (frame.layoutMode !== 'HORIZONTAL') return;
-
-  const padding = (frame.paddingLeft || 0) + (frame.paddingRight || 0);
-  const gap = frame.itemSpacing || 0;
-  const children = frame.children.filter(child => {
-    const positioning = (child as any).layoutPositioning;
-    return positioning !== 'ABSOLUTE';
-  });
-  if (children.length === 0) return;
-
-  let fixedWidth = 0;
-  let growTotal = 0;
-  const growChildren: SceneNode[] = [];
-
-  for (const child of children) {
-    const grow = (child as any).layoutGrow;
-    if (Number.isFinite(grow) && grow > 0) {
-      growTotal += grow;
-      growChildren.push(child);
-    } else {
-      fixedWidth += (child as any).width || 0;
-    }
-  }
-
-  if (growChildren.length === 0 || growTotal <= 0) return;
-
-  // Determine target width: use override, frame width, or compute based on children
-  let targetWidth = widthOverride && Number.isFinite(widthOverride) ? widthOverride : frame.width;
-
-  // If no width available, compute a minimum width based on fixed children + space for grow children
-  const totalGap = gap * Math.max(0, children.length - 1);
-  if (!targetWidth || targetWidth <= 0) {
-    // Use 150px per grow unit as a reasonable default for flex-grow children
-    const growWidth = 150 * growTotal;
-    targetWidth = padding + totalGap + fixedWidth + growWidth;
-  }
-
-  // Resize frame to target width and set to FIXED
-  try {
-    frame.resize(targetWidth, frame.height);
-    frame.primaryAxisSizingMode = 'FIXED';
-  } catch (_err) {
-    // ignore
-  }
-
-  const remaining = targetWidth - padding - totalGap - fixedWidth;
-  if (!Number.isFinite(remaining) || remaining <= 0) return;
-
-  for (const child of growChildren) {
-    const grow = (child as any).layoutGrow;
-    const width = remaining * (grow / growTotal);
-    if (!Number.isFinite(width) || width <= 0) continue;
-    if (!('resize' in child)) continue;
-    try {
-      (child as any).resize(width, (child as any).height);
-      if ('layoutMode' in child) {
-        const childLayout = (child as any).layoutMode;
-        if (childLayout === 'VERTICAL' && 'counterAxisSizingMode' in child) {
-          (child as any).counterAxisSizingMode = 'FIXED';
-        } else if (childLayout === 'HORIZONTAL' && 'primaryAxisSizingMode' in child) {
-          (child as any).primaryAxisSizingMode = 'FIXED';
-        }
-      } else if ('primaryAxisSizingMode' in child) {
-        (child as any).primaryAxisSizingMode = 'FIXED';
-      }
-    } catch (_err) {
-      // ignore
-    }
-  }
+  const defs = COMPONENT_DEFS;
+  return defs && defs.paletteTokens ? defs.paletteTokens : {};
 }
 
 function cssVarToToken(value: string): string | null {
@@ -667,27 +123,6 @@ function resolveSpacingToken(token: string, spacingScale: Record<string, number>
   return spacingValue(token, spacingScale);
 }
 
-const STATE_VARIANTS = new Set([
-  'hover',
-  'focus',
-  'focus-visible',
-  'disabled',
-  'active',
-  'aria-invalid',
-]);
-
-function isStateVariant(variant: string): boolean {
-  if (STATE_VARIANTS.has(variant)) return true;
-  return variant.startsWith('data-[state=');
-}
-
-function shouldApplyAtom(atom: ReturnType<typeof parseUtilityClass>, state: string): boolean {
-  if (hasResponsiveVariantSemantic(atom.variants)) return false;
-  if (state === 'default') return atom.variants.length === 0;
-  if (!atom.variants.length) return false;
-  if (!atom.variants.every(isStateVariant)) return false;
-  return variantStateSemantic(atom.variants) === state;
-}
 
 function parseOpacityToken(token: string): number | null {
   if (!token) return null;
@@ -770,35 +205,26 @@ function parseFlexShorthand(value: string): { grow: number | null; basis: number
 }
 
 function getBorderSideWeights(frame: FrameNode): { top: number; right: number; bottom: number; left: number } {
-  const target = frame as any;
   const hasStroke = Array.isArray(frame.strokes) && frame.strokes.length > 0;
-  const baseWeight = hasStroke && Number.isFinite(frame.strokeWeight) ? frame.strokeWeight : 0;
+  const baseStrokeWeight = typeof frame.strokeWeight === 'number' ? frame.strokeWeight : 0;
+  const baseWeight = hasStroke && Number.isFinite(baseStrokeWeight) ? baseStrokeWeight : 0;
+  const sideWeight = (value: number | symbol): number =>
+    typeof value === 'number' && Number.isFinite(value) ? value : baseWeight;
   return {
-    top: Number.isFinite(target.strokeTopWeight) ? target.strokeTopWeight : baseWeight,
-    right: Number.isFinite(target.strokeRightWeight) ? target.strokeRightWeight : baseWeight,
-    bottom: Number.isFinite(target.strokeBottomWeight) ? target.strokeBottomWeight : baseWeight,
-    left: Number.isFinite(target.strokeLeftWeight) ? target.strokeLeftWeight : baseWeight,
+    top: sideWeight(frame.strokeTopWeight),
+    right: sideWeight(frame.strokeRightWeight),
+    bottom: sideWeight(frame.strokeBottomWeight),
+    left: sideWeight(frame.strokeLeftWeight),
   };
 }
 
 function setBorderSideWeights(frame: FrameNode, sides: { top: number; right: number; bottom: number; left: number }): void {
-  const target = frame as any;
-  const hasIndividualStrokes = (
-    'strokeTopWeight' in target
-    || 'strokeRightWeight' in target
-    || 'strokeBottomWeight' in target
-    || 'strokeLeftWeight' in target
-  );
-  if (hasIndividualStrokes) {
-    target.strokeTopWeight = sides.top;
-    target.strokeRightWeight = sides.right;
-    target.strokeBottomWeight = sides.bottom;
-    target.strokeLeftWeight = sides.left;
-    // Do not write strokeWeight here: in Figma this can normalize all sides
-    // and undo directional borders (e.g. border-t becoming full box).
-    return;
-  }
-  frame.strokeWeight = Math.max(sides.top, sides.right, sides.bottom, sides.left, 0);
+  frame.strokeTopWeight = sides.top;
+  frame.strokeRightWeight = sides.right;
+  frame.strokeBottomWeight = sides.bottom;
+  frame.strokeLeftWeight = sides.left;
+  // Do not write strokeWeight here: in Figma this can normalize all sides
+  // and undo directional borders (e.g. border-t becoming full box).
 }
 
 function setDirectionalBorder(frame: FrameNode, utility: string, weight: number): boolean {
@@ -880,26 +306,50 @@ function applyCssDeclarationsToFrame(frame: FrameNode, declarations: Record<stri
   let autoMarginLeft = false;
   let autoMarginRight = false;
   let autoMarginInline = false;
+  let declaredGridColumns: number | null = null;
+
+  const gridTemplateValue = declarations['grid-template-columns'];
+  if (typeof gridTemplateValue === 'string') {
+    const match = gridTemplateValue.trim().match(/repeat\((\d+),/);
+    if (match) {
+      const parsed = parseInt(match[1], 10);
+      if (Number.isFinite(parsed) && parsed > 0) {
+        declaredGridColumns = parsed;
+      }
+    }
+  }
 
   for (const [prop, rawValue] of Object.entries(declarations)) {
     const value = rawValue.trim();
     if (prop === 'display' && (value === 'flex' || value === 'inline-flex')) {
       frame.layoutMode = 'HORIZONTAL';
+      // CSS default for flex containers is `align-items: stretch`.
+      setFrameCrossAlign(frame, 'STRETCH');
       continue;
     }
-    if (prop === 'display' && value === 'grid') {
-      frame.layoutMode = 'HORIZONTAL';
-      if ((frame as any).layoutWrap !== undefined) {
-        (frame as any).layoutWrap = 'WRAP';
+    if (prop === 'display' && (value === 'grid' || value === 'inline-grid')) {
+      if (declaredGridColumns != null) {
+        frame.layoutMode = 'HORIZONTAL';
+        markGridColumnsNode(frame, declaredGridColumns);
+        if (frame.layoutWrap !== undefined) {
+          frame.layoutWrap = 'WRAP';
+        }
+      } else {
+        // CSS grid without explicit template columns behaves like a single-column
+        // vertical flow in our Figma mapping.
+        frame.layoutMode = 'VERTICAL';
+        markCssGridVerticalFrame(frame);
       }
+      // CSS default for grid containers is `align-items: stretch` per track.
+      setFrameCrossAlign(frame, 'STRETCH');
       continue;
     }
     if (prop === 'flex-direction') {
       frame.layoutMode = value === 'column' || value === 'column-reverse' ? 'VERTICAL' : 'HORIZONTAL';
       continue;
     }
-    if (prop === 'flex-wrap' && (frame as any).layoutWrap !== undefined) {
-      (frame as any).layoutWrap = value === 'wrap' || value === 'wrap-reverse' ? 'WRAP' : 'NO_WRAP';
+    if (prop === 'flex-wrap' && frame.layoutWrap !== undefined) {
+      frame.layoutWrap = value === 'wrap' || value === 'wrap-reverse' ? 'WRAP' : 'NO_WRAP';
       continue;
     }
     if (prop === 'grid-template-columns') {
@@ -923,10 +373,11 @@ function applyCssDeclarationsToFrame(frame: FrameNode, declarations: Record<stri
       continue;
     }
     if (prop === 'align-items') {
-      if (value === 'center') frame.counterAxisAlignItems = 'CENTER';
-      if (value === 'flex-start') frame.counterAxisAlignItems = 'MIN';
-      if (value === 'flex-end') frame.counterAxisAlignItems = 'MAX';
-      if (value === 'stretch') frame.counterAxisAlignItems = 'MIN';
+      if (value === 'center') { frame.counterAxisAlignItems = 'CENTER'; setFrameCrossAlign(frame, 'CENTER'); }
+      if (value === 'flex-start') { frame.counterAxisAlignItems = 'MIN'; setFrameCrossAlign(frame, 'MIN'); }
+      if (value === 'flex-end') { frame.counterAxisAlignItems = 'MAX'; setFrameCrossAlign(frame, 'MAX'); }
+      // Figma has no parent-level STRETCH — emulated per-child via layoutAlign in applyChildProperties.
+      if (value === 'stretch') { frame.counterAxisAlignItems = 'MIN'; setFrameCrossAlign(frame, 'STRETCH'); }
       continue;
     }
     if (prop === 'align-self') {
@@ -1014,6 +465,7 @@ function applyCssDeclarationsToFrame(frame: FrameNode, declarations: Record<stri
       const len = parseCssLength(value);
       if (len != null) {
         frame.resize(frame.width, len);
+        markFixedHeightNode(frame);
         if (frame.layoutMode === 'VERTICAL') {
           frame.primaryAxisSizingMode = 'FIXED';
         } else if (frame.layoutMode === 'HORIZONTAL') {
@@ -1077,6 +529,7 @@ function applyCssDeclarationsToFrame(frame: FrameNode, declarations: Record<stri
 
   if (autoMarginInline || (autoMarginLeft && autoMarginRight)) {
     markSelfAlignmentNode(frame, 'CENTER');
+    markFullWidthNode(frame);
   } else if (autoMarginLeft) {
     markSelfAlignmentNode(frame, 'MAX');
   } else if (autoMarginRight) {
@@ -1374,6 +827,12 @@ function applySemanticUtilitiesToFrame(
   radiusGroup: Record<string, string> | null,
 ): Set<string> {
   const handled = new Set<string>();
+  // Track whether flex-direction was explicitly set on this frame. `flex`
+  // means "enable flex layout, default direction row" — but in CSS it does
+  // NOT reset an already-set flex-direction. A duplicated class list like
+  // `flex flex-col … flex flex-col` (base + user override on SheetContent)
+  // must keep the VERTICAL direction even if the trailing `flex` is processed.
+  let flexDirectionSet = false;
   const spacingScale = (COMPONENT_DEFS && COMPONENT_DEFS.spacingScale) ? COMPONENT_DEFS.spacingScale : {};
   let gap: number | null = null;
   let gapX: number | null = null;
@@ -1403,8 +862,46 @@ function applySemanticUtilitiesToFrame(
 
     if (!shouldApplyAtom(atom, 'default')) continue;
 
-    if (utility === 'flex' || utility === 'inline-flex' || utility === 'flex-row') {
+    if (utility === 'flex' || utility === 'inline-flex') {
+      // Bare `flex` enables flex layout but does not set direction. Only write
+      // HORIZONTAL when the direction hasn't been declared yet by a prior
+      // flex-row / flex-col / grid / flex-col-reverse etc.
+      if (!flexDirectionSet) frame.layoutMode = 'HORIZONTAL';
+      // CSS default for flex containers is `align-items: stretch`.
+      setFrameCrossAlign(frame, 'STRETCH');
+      // CSS distinguishes `display: flex` (block-level — takes full width in
+      // its parent block context) from `display: inline-flex` (inline-level
+      // — hugs content). The plugin treats both as HORIZONTAL auto-layout,
+      // but the SIZING of the container in its parent differs. Mark
+      // inline-flex frames so they hug content on their main axis and don't
+      // get stretched by a parent's STRETCH cross-axis alignment.
+      if (utility === 'inline-flex') {
+        try {
+          if ('primaryAxisSizingMode' in frame) frame.primaryAxisSizingMode = 'AUTO';
+          if ('counterAxisSizingMode' in frame) frame.counterAxisSizingMode = 'AUTO';
+          if ('layoutAlign' in frame) frame.layoutAlign = 'INHERIT';
+          if ('layoutSizingHorizontal' in frame) frame.layoutSizingHorizontal = 'HUG';
+          if ('layoutSizingVertical' in frame) frame.layoutSizingVertical = 'HUG';
+        } catch (_err) {
+          // ignore — these properties may not be writable in all node types
+        }
+      }
+      handled.add(cls);
+      continue;
+    }
+    if (utility === 'flex-row' || utility === 'flex-row-reverse') {
       frame.layoutMode = 'HORIZONTAL';
+      flexDirectionSet = true;
+      setFrameCrossAlign(frame, 'STRETCH');
+      handled.add(cls);
+      continue;
+    }
+    if (utility === 'flex-col' || utility === 'flex-col-reverse') {
+      // `flex-col` sets column direction. Any following bare `flex` must not
+      // revert layoutMode to HORIZONTAL (see duplicated SheetContent classes).
+      frame.layoutMode = 'VERTICAL';
+      flexDirectionSet = true;
+      setFrameCrossAlign(frame, 'STRETCH');
       handled.add(cls);
       continue;
     }
@@ -1412,14 +909,16 @@ function applySemanticUtilitiesToFrame(
       const hasColumns = classes.some((c: string) => /^grid-cols-\d+$/.test(c));
       if (hasColumns) {
         frame.layoutMode = 'HORIZONTAL';
-        if ((frame as any).layoutWrap !== undefined) {
-          (frame as any).layoutWrap = 'WRAP';
+        if (frame.layoutWrap !== undefined) {
+          frame.layoutWrap = 'WRAP';
         }
       } else {
         // Single-column implicit grid → VERTICAL; children stretch to fill (CSS default align-items: stretch)
         frame.layoutMode = 'VERTICAL';
-        CSS_GRID_VERTICAL_FRAMES.add(frame);
+        markCssGridVerticalFrame(frame);
       }
+      flexDirectionSet = true;
+      setFrameCrossAlign(frame, 'STRETCH');
       handled.add(cls);
       continue;
     }
@@ -1499,6 +998,109 @@ function applySemanticUtilitiesToFrame(
       continue;
     }
 
+    // Handle percent-based positions: `top-[X%]`, `bottom-[X%]`, `left-[X%]`,
+    // `right-[X%]` (e.g. `top-[30%]`, `left-[18.33%]`). Stored on
+    // POSITION_INFO_NODES as a fraction in [0, 1]; resolved by
+    // `applyDeferredPercentPositioning` once the parent's dimensions are final.
+    const topPctMatch = utility.match(/^top-\[(\d+(?:\.\d+)?)%\]$/);
+    if (topPctMatch) {
+      markPositionInfo(frame, { topPercent: parseFloat(topPctMatch[1]) / 100 });
+      handled.add(cls);
+      continue;
+    }
+    const bottomPctMatch = utility.match(/^bottom-\[(\d+(?:\.\d+)?)%\]$/);
+    if (bottomPctMatch) {
+      markPositionInfo(frame, { bottomPercent: parseFloat(bottomPctMatch[1]) / 100 });
+      handled.add(cls);
+      continue;
+    }
+    const leftPctMatch = utility.match(/^left-\[(\d+(?:\.\d+)?)%\]$/);
+    if (leftPctMatch) {
+      markPositionInfo(frame, { leftPercent: parseFloat(leftPctMatch[1]) / 100 });
+      handled.add(cls);
+      continue;
+    }
+    const rightPctMatch = utility.match(/^right-\[(\d+(?:\.\d+)?)%\]$/);
+    if (rightPctMatch) {
+      markPositionInfo(frame, { rightPercent: parseFloat(rightPctMatch[1]) / 100 });
+      handled.add(cls);
+      continue;
+    }
+
+    // Handle self-translate fractions: `-translate-x-1/2`, `translate-x-1/2`,
+    // `-translate-x-full`, `translate-y-1/3`, etc. Mirrors CSS
+    // `transform: translate(N%, N%)` applied as a fraction of the element's
+    // OWN width/height. Most common with absolute + percent positions
+    // (`absolute left-[50%] top-[50%] -translate-x-1/2 -translate-y-1/2`
+    // centers the element on the parent's (50%, 50%) point). Resolved in
+    // `applyDeferredPercentPositioning` because it depends on the child's
+    // final width / height, which may not be known when classes are parsed.
+    const translateMatch = utility.match(/^(-?)translate-(x|y)-(.+)$/);
+    if (translateMatch) {
+      const sign = translateMatch[1] === '-' ? -1 : 1;
+      const axis = translateMatch[2];
+      const token = translateMatch[3];
+      let fraction: number | null = null;
+      if (token === 'full') fraction = 1;
+      else if (token === 'px') fraction = 0; // px-based translate is 0% of self
+      else {
+        const frac = token.match(/^(\d+)\/(\d+)$/);
+        if (frac) {
+          const num = parseFloat(frac[1]);
+          const den = parseFloat(frac[2]);
+          if (den !== 0) fraction = num / den;
+        }
+      }
+      if (fraction != null) {
+        const signed = sign * fraction;
+        if (axis === 'x') {
+          markPositionInfo(frame, { translateXFraction: signed });
+        } else {
+          markPositionInfo(frame, { translateYFraction: signed });
+        }
+        handled.add(cls);
+        continue;
+      }
+    }
+
+    // Handle aspect-ratio: aspect-{n}/{m}, aspect-square, aspect-video,
+    // aspect-[N/M] and aspect-[N] arbitrary values. Records the ratio
+    // (width/height) on the frame; deferred-layout resolves it once the
+    // frame's width is settled.
+    if (utility === 'aspect-square') {
+      markAspectRatio(frame, 1);
+      handled.add(cls);
+      continue;
+    }
+    if (utility === 'aspect-video') {
+      markAspectRatio(frame, 16 / 9);
+      handled.add(cls);
+      continue;
+    }
+    const aspectFractionMatch = utility.match(/^aspect-(\d+(?:\.\d+)?)\/(\d+(?:\.\d+)?)$/);
+    if (aspectFractionMatch) {
+      const aw = parseFloat(aspectFractionMatch[1]);
+      const ah = parseFloat(aspectFractionMatch[2]);
+      if (aw > 0 && ah > 0) markAspectRatio(frame, aw / ah);
+      handled.add(cls);
+      continue;
+    }
+    const aspectArbMatch = utility.match(/^aspect-\[(.+)\]$/);
+    if (aspectArbMatch) {
+      const expr = aspectArbMatch[1];
+      const slash = expr.match(/^(\d+(?:\.\d+)?)\s*\/\s*(\d+(?:\.\d+)?)$/);
+      if (slash) {
+        const aw = parseFloat(slash[1]);
+        const ah = parseFloat(slash[2]);
+        if (aw > 0 && ah > 0) markAspectRatio(frame, aw / ah);
+      } else {
+        const num = parseFloat(expr);
+        if (Number.isFinite(num) && num > 0) markAspectRatio(frame, num);
+      }
+      handled.add(cls);
+      continue;
+    }
+
     // Handle blur effects (blur-sm, blur, blur-md, blur-lg, blur-xl, blur-2xl, blur-3xl)
     const blurMatch = utility.match(/^blur(?:-(.+))?$/);
     if (blurMatch) {
@@ -1517,10 +1119,9 @@ function applySemanticUtilitiesToFrame(
       const blurKey = blurMatch[1] || '';
       const blurRadius = blurScale[blurKey];
       if (blurRadius != null && blurRadius > 0) {
-        frame.effects = [
-          ...(frame.effects || []),
+        frame.effects = (frame.effects || []).concat([
           { type: 'LAYER_BLUR', blurType: 'NORMAL', radius: blurRadius, visible: true } as Effect,
-        ];
+        ]);
       }
       handled.add(cls);
       continue;
@@ -1554,12 +1155,21 @@ function applySemanticUtilitiesToFrame(
       };
       const defs = SHADOW_MAP[shadowKey];
       if (defs !== undefined) {
+        // Figma renders multi-layer DROP_SHADOW effects as independently
+        // stacked filters — they composite "harder" than CSS box-shadow,
+        // where the browser's filter pipeline smooths overlapping
+        // shadow layers. The numeric values in SHADOW_MAP match
+        // Tailwind v3's docs exactly, but the visual result reads as
+        // ~30 % stronger in Figma at parity. Damp the alpha channel so
+        // the rendered page matches Storybook / browser intensity. Tune
+        // this single constant to dial all tiers up or down together.
+        const SHADOW_ALPHA_DAMPER = 0.7;
         const shadowEffects: Effect[] = [];
         for (let si = 0; si < defs.length; si++) {
           const d = defs[si];
           shadowEffects.push({
             type: d.type,
-            color: { r: d.r, g: d.g, b: d.b, a: d.a },
+            color: { r: d.r, g: d.g, b: d.b, a: d.a * SHADOW_ALPHA_DAMPER },
             offset: { x: d.x, y: d.y },
             radius: d.radius,
             spread: d.spread,
@@ -1568,23 +1178,18 @@ function applySemanticUtilitiesToFrame(
           } as Effect);
         }
         // Replace any existing shadow effects (drop + inner) and keep other effects (blur etc.)
-        const allEffects: Effect[] = Array.from((frame as any).effects || []);
-        const nonShadow = allEffects.filter(
-          (e: Effect) => (e as any).type !== 'DROP_SHADOW' && (e as any).type !== 'INNER_SHADOW'
+        const allEffects: Effect[] = Array.from(frame.effects || []);
+        const nonShadow: Effect[] = allEffects.filter(
+          (e: Effect) => e.type !== 'DROP_SHADOW' && e.type !== 'INNER_SHADOW'
         );
-        (frame as any).effects = nonShadow.concat(shadowEffects);
+        frame.effects = nonShadow.concat(shadowEffects);
       }
       handled.add(cls);
       continue;
     }
 
-    if (utility === 'flex-col') {
-      frame.layoutMode = 'VERTICAL';
-      handled.add(cls);
-      continue;
-    }
-    if (utility === 'flex-wrap' && (frame as any).layoutWrap !== undefined) {
-      (frame as any).layoutWrap = 'WRAP';
+    if (utility === 'flex-wrap' && frame.layoutWrap !== undefined) {
+      frame.layoutWrap = 'WRAP';
       handled.add(cls);
       continue;
     }
@@ -1596,15 +1201,49 @@ function applySemanticUtilitiesToFrame(
       handled.add(cls);
       continue;
     }
-    if (utility === 'items-center') { frame.counterAxisAlignItems = 'CENTER'; handled.add(cls); continue; }
-    if (utility === 'items-start') { frame.counterAxisAlignItems = 'MIN'; handled.add(cls); continue; }
-    if (utility === 'items-end') { frame.counterAxisAlignItems = 'MAX'; handled.add(cls); continue; }
+    // `text-center` / `text-left` / `text-right` on a block-flow parent
+    // also affects horizontal alignment of inline-display children inside
+    // it (CSS centers inline content via the parent's text-align). Set
+    // the parent's counterAxisAlignItems so the Figma inspector reflects
+    // the visual alignment AND inline-display children inherit it. Block
+    // children that get layoutAlign='STRETCH' via the implicit-stretch
+    // pass still take full width regardless of this alignment, preserving
+    // the headline/paragraph stretch-with-text-align behaviour.
+    //
+    // Don't touch FRAME_CROSS_ALIGN — the implicit-stretch logic uses
+    // that to decide which children stretch; setting it to CENTER here
+    // would disable stretching for block children of `text-center` divs.
+    //
+    // Doesn't `continue` — text-center also affects text rendering and is
+    // consumed by the text builder later.
+    if (utility === 'text-center') {
+      setFrameInlineAlign(frame, 'CENTER');
+      if ('counterAxisAlignItems' in frame) {
+        try { frame.counterAxisAlignItems = 'CENTER'; } catch (_e) { /* ignore */ }
+      }
+    } else if (utility === 'text-right') {
+      setFrameInlineAlign(frame, 'MAX');
+      if ('counterAxisAlignItems' in frame) {
+        try { frame.counterAxisAlignItems = 'MAX'; } catch (_e) { /* ignore */ }
+      }
+    } else if (utility === 'text-left') {
+      setFrameInlineAlign(frame, 'MIN');
+      if ('counterAxisAlignItems' in frame) {
+        try { frame.counterAxisAlignItems = 'MIN'; } catch (_e) { /* ignore */ }
+      }
+    }
+    if (utility === 'items-center') { frame.counterAxisAlignItems = 'CENTER'; setFrameCrossAlign(frame, 'CENTER'); handled.add(cls); continue; }
+    if (utility === 'items-start') { frame.counterAxisAlignItems = 'MIN'; setFrameCrossAlign(frame, 'MIN'); handled.add(cls); continue; }
+    if (utility === 'items-end') { frame.counterAxisAlignItems = 'MAX'; setFrameCrossAlign(frame, 'MAX'); handled.add(cls); continue; }
+    // Figma has no parent-level STRETCH — emulated per-child via layoutAlign in applyChildProperties.
+    if (utility === 'items-stretch') { frame.counterAxisAlignItems = 'MIN'; setFrameCrossAlign(frame, 'STRETCH'); handled.add(cls); continue; }
     if (utility === 'justify-center') { frame.primaryAxisAlignItems = 'CENTER'; handled.add(cls); continue; }
     if (utility === 'justify-between') { frame.primaryAxisAlignItems = 'SPACE_BETWEEN'; handled.add(cls); continue; }
     if (utility === 'justify-start') { frame.primaryAxisAlignItems = 'MIN'; handled.add(cls); continue; }
     if (utility === 'justify-end') { frame.primaryAxisAlignItems = 'MAX'; handled.add(cls); continue; }
     if (utility === 'mx-auto') {
-      // Figma no longer supports layoutAlign = CENTER. Keep as a no-op.
+      markSelfAlignmentNode(frame, 'CENTER');
+      markFullWidthNode(frame);
       handled.add(cls);
       continue;
     }
@@ -1716,12 +1355,28 @@ function applySemanticUtilitiesToFrame(
       handled.add(cls);
       continue;
     }
+    if (utility === 'w-fit' || utility === 'w-auto' || utility === 'w-max') {
+      // Hug content width — counterAxisSizingMode AUTO for vertical layout,
+      // primaryAxisSizingMode AUTO for horizontal layout.
+      try {
+        if (frame.layoutMode === 'HORIZONTAL') {
+          frame.primaryAxisSizingMode = 'AUTO';
+        } else {
+          frame.counterAxisSizingMode = 'AUTO';
+        }
+      } catch (_err) { /* ignore */ }
+      handled.add(cls);
+      continue;
+    }
     if (utility === 'container') {
       markFullWidthNode(frame);
       handled.add(cls);
       continue;
     }
-    if (utility === 'h-full') {
+    if (utility === 'h-full' || utility === 'h-screen' || utility === 'min-h-screen') {
+      // h-screen / min-h-screen are treated like h-full: fill parent primary axis.
+      // The Story Layout viewport-height pre-pass pins a fixed height upstream so
+      // the fill cascades correctly.
       markFullHeightNode(frame);
       handled.add(cls);
       continue;
@@ -1745,9 +1400,20 @@ function applySemanticUtilitiesToFrame(
           }
         }
       } else {
-        const fraction = parseFractionToken(token);
-        if (fraction != null) {
-          markFractionWidthNode(frame, fraction);
+        // Arbitrary percent — `w-[60%]` — same parent-relative semantics as
+        // a w-1/2 / w-2/3 fraction. The post-append pipeline resizes the
+        // child to fraction * parent content-width.
+        const percentMatch = token.match(/^\[(\d+(?:\.\d+)?)%\]$/);
+        if (percentMatch) {
+          const pct = parseFloat(percentMatch[1]);
+          if (Number.isFinite(pct) && pct >= 0) {
+            markFractionWidthNode(frame, Math.max(0, Math.min(1, pct / 100)));
+          }
+        } else {
+          const fraction = parseFractionToken(token);
+          if (fraction != null) {
+            markFractionWidthNode(frame, fraction);
+          }
         }
       }
       handled.add(cls);
@@ -1758,6 +1424,7 @@ function applySemanticUtilitiesToFrame(
       const val = resolveSpacingToken(hMatch[1], spacingScale);
       if (val != null) {
         frame.resize(frame.width, val);
+        markFixedHeightNode(frame);
         // Set sizing mode to FIXED to prevent auto-resizing
         if (frame.layoutMode === 'VERTICAL') {
           frame.primaryAxisSizingMode = 'FIXED';
@@ -1774,6 +1441,64 @@ function applySemanticUtilitiesToFrame(
       continue;
     }
 
+    // min-h-N / min-h-[Npx] → minHeight floor. Used by shadcn Textarea
+    // (`min-h-20`) and any other consumer who wants a height baseline.
+    // `min-h-screen` is handled separately upstream as a FILL signal.
+    const minHScaleMatch = utility.match(/^min-h-(\d+(?:\.\d+)?)$/);
+    if (minHScaleMatch) {
+      const val = resolveSpacingToken(minHScaleMatch[1], spacingScale);
+      if (val != null && val > 0) {
+        try {
+          if ('minHeight' in frame) (frame as { minHeight: number }).minHeight = val;
+          if (frame.height < val) frame.resize(frame.width, val);
+        } catch (_e) { /* ignore */ }
+      }
+      handled.add(cls);
+      continue;
+    }
+    const minHArbitraryMatch = utility.match(/^min-h-\[(\d+(?:\.\d+)?)(px|rem|em)?\]$/);
+    if (minHArbitraryMatch) {
+      let val = parseFloat(minHArbitraryMatch[1]);
+      const unit = minHArbitraryMatch[2] || 'px';
+      if (unit === 'rem' || unit === 'em') val *= 16;
+      if (Number.isFinite(val) && val > 0) {
+        try {
+          if ('minHeight' in frame) (frame as { minHeight: number }).minHeight = val;
+          if (frame.height < val) frame.resize(frame.width, val);
+        } catch (_e) { /* ignore */ }
+      }
+      handled.add(cls);
+      continue;
+    }
+
+    // min-w-N / min-w-[Npx] — mirror of min-h-*.
+    const minWScaleMatch = utility.match(/^min-w-(\d+(?:\.\d+)?)$/);
+    if (minWScaleMatch) {
+      const val = resolveSpacingToken(minWScaleMatch[1], spacingScale);
+      if (val != null && val > 0) {
+        try {
+          if ('minWidth' in frame) (frame as { minWidth: number }).minWidth = val;
+          if (frame.width < val) frame.resize(val, frame.height);
+        } catch (_e) { /* ignore */ }
+      }
+      handled.add(cls);
+      continue;
+    }
+    const minWArbitraryMatch = utility.match(/^min-w-\[(\d+(?:\.\d+)?)(px|rem|em)?\]$/);
+    if (minWArbitraryMatch) {
+      let val = parseFloat(minWArbitraryMatch[1]);
+      const unit = minWArbitraryMatch[2] || 'px';
+      if (unit === 'rem' || unit === 'em') val *= 16;
+      if (Number.isFinite(val) && val > 0) {
+        try {
+          if ('minWidth' in frame) (frame as { minWidth: number }).minWidth = val;
+          if (frame.width < val) frame.resize(val, frame.height);
+        } catch (_e) { /* ignore */ }
+      }
+      handled.add(cls);
+      continue;
+    }
+
     // size-X sets both width and height (Tailwind's size utility)
     const sizeMatch = utility.match(/^size-(.+)$/);
     if (sizeMatch) {
@@ -1781,6 +1506,7 @@ function applySemanticUtilitiesToFrame(
       if (val != null) {
         frame.resize(val, val);
         markFixedWidthNode(frame);
+        markFixedHeightNode(frame);
         frame.primaryAxisSizingMode = 'FIXED';
         frame.counterAxisSizingMode = 'FIXED';
       }
@@ -1793,6 +1519,7 @@ function applySemanticUtilitiesToFrame(
       if (maxW != null) {
         frame.resize(maxW, frame.height);
         frame.counterAxisSizingMode = 'FIXED';
+        markMaxWidthNode(frame, maxW);
       }
       handled.add(cls);
       continue;
@@ -1858,11 +1585,17 @@ export function applyTailwindStylesToFrame(
 ): TailwindStyle {
   const style = tailwindClassesToStyle(classes, 'default', colorGroup);
   const styleMap = getStyleMap();
-  applySemanticUtilitiesToFrame(frame, classes, radiusGroup);
+  const semanticHandled = applySemanticUtilitiesToFrame(frame, classes, radiusGroup);
   let hasGradient = false;
 
   if (styleMap) {
     for (const cls of classes) {
+      // Classes resolved by the semantic pass above (grid/flex/grid-cols-*/col-span-*/…)
+      // must not be re-applied via per-class CSS declarations. Per-class CSS is isolated:
+      // when `grid` is processed in isolation it sees `display: grid` with no
+      // `grid-template-columns` and resets layoutMode to VERTICAL, undoing the semantic
+      // pass that already set HORIZONTAL + WRAP for multi-column grids.
+      if (semanticHandled.has(cls)) continue;
       const entryList = styleMap[cls];
       if (!entryList || entryList.length === 0) continue;
       const atom = parseUtilityClass(cls);
@@ -2010,6 +1743,18 @@ export function applyTailwindStylesToFrame(
     frame.opacity = style.opacity;
   }
 
+  // Ring utilities (`ring-1`, `ring-2`, `ring-ring`, `ring-primary/50`,
+  // `ring-offset-N`, …) are MARKED here at parse time and resolved later
+  // by `applyRingIfPossible` in the post-append pipeline, when the host's
+  // content children are all in place and its natural W × H is final.
+  // Doing this eagerly here used to inflate Hug-sized parents during the
+  // brief flex-child moment between `appendChild` and
+  // `layoutPositioning = 'ABSOLUTE'`. See `src/layout/deferred-layout.ts`
+  // (`applyRingIfPossible`) for why the deferred phase is the right
+  // place for this concern.
+  const ringInfo = getRingInfoFromClasses(classes, colorGroup);
+  if (ringInfo) markRingNode(frame, ringInfo);
+
   return style;
 }
 
@@ -2299,11 +2044,11 @@ export function tailwindForNode(node: SceneNode): string {
     if (frame.counterAxisAlignItems && mapAlign[frame.counterAxisAlignItems]) {
       classes.push(mapAlign[frame.counterAxisAlignItems]);
     }
-    if ((frame as any).layoutGrow === 1) classes.push('flex-1');
-    if ((frame as any).layoutAlign === 'STRETCH') classes.push('self-stretch');
+    if (frame.layoutGrow === 1) classes.push('flex-1');
+    if (frame.layoutAlign === 'STRETCH') classes.push('self-stretch');
   } else {
-    if (typeof (node as any).width === 'number') pushSizeClass(classes, 'w', (node as any).width);
-    if (typeof (node as any).height === 'number') pushSizeClass(classes, 'h', (node as any).height);
+    if ('width' in node && typeof node.width === 'number') pushSizeClass(classes, 'w', node.width);
+    if ('height' in node && typeof node.height === 'number') pushSizeClass(classes, 'h', node.height);
   }
 
   // Corner radius
@@ -2315,7 +2060,8 @@ export function tailwindForNode(node: SceneNode): string {
 
   // Fills -> background or text color
   try {
-    const paint = firstVisiblePaint((node as any).fills);
+    const fills = 'fills' in node ? node.fills : undefined;
+    const paint = firstVisiblePaint(Array.isArray(fills) ? fills : null);
     if (paint) {
       const rgb = paint.color;
       const token = nearestColorToken(rgb);
@@ -2325,35 +2071,38 @@ export function tailwindForNode(node: SceneNode): string {
         classes.push(opacityClass(paint.opacity));
       }
     }
-  } catch (e) { /* ignore */ }
+  } catch (_e) { /* ignore */ }
 
   // Strokes -> border color/width
   try {
-    const paint = firstVisiblePaint((node as any).strokes);
+    const strokes = 'strokes' in node ? node.strokes : undefined;
+    const paint = firstVisiblePaint(Array.isArray(strokes) ? strokes : null);
     if (paint) {
-      const w = Math.round((node as any).strokeWeight || 1);
+      const sw = 'strokeWeight' in node && typeof node.strokeWeight === 'number' ? node.strokeWeight : 1;
+      const w = Math.round(sw || 1);
       classes.push('border');
       if (w !== 1) classes.push('border-' + twSpace(w));
       const token = nearestColorToken(paint.color);
       if (token) classes.push('border-' + token);
     }
-  } catch (e) { /* ignore */ }
+  } catch (_e) { /* ignore */ }
 
   // Shadows (drop)
   try {
-    const eff = ((node as any).effects || []).find(
+    const effects = 'effects' in node && Array.isArray(node.effects) ? node.effects : [];
+    const eff = effects.find(
       (e: Effect) => e.type === 'DROP_SHADOW' && e.visible !== false,
     );
     const cl = mapShadow(eff);
     if (cl) classes.push(cl);
-  } catch (e) { /* ignore */ }
+  } catch (_e) { /* ignore */ }
 
   // Typography for text
   if (node.type === 'TEXT') {
     const textNode = node as TextNode;
     if (textNode.fontSize) classes.push('text-[' + px(textNode.fontSize as number) + ']');
-    if (textNode.lineHeight && (textNode.lineHeight as any).unit === 'PIXELS') {
-      classes.push('leading-[' + px((textNode.lineHeight as any).value) + ']');
+    if (textNode.lineHeight && typeof textNode.lineHeight === 'object' && textNode.lineHeight.unit === 'PIXELS') {
+      classes.push('leading-[' + px(textNode.lineHeight.value) + ']');
     }
     if (textNode.fontName && (textNode.fontName as FontName).style && /bold/i.test((textNode.fontName as FontName).style)) {
       classes.push('font-bold');