inkhouse 0.1.0-beta.0

package/src/layout-utils.ts

@@ -0,0 +1,155 @@
+import { applyFullWidthIfPossible, applyGridColumnsIfPossible, getGridColumnsNode, hasGridColumnsNode, getColSpanNode } from './tailwind';
+import { getBaseClass } from './width-solver';
+
+declare const figma: any;
+
+export type LayoutWrapContext = {
+  maxWidth?: number;
+  parentLayout?: 'HORIZONTAL' | 'VERTICAL';
+};
+
+export function shouldClipContent(classes: string[]): boolean {
+  let hasOverflowHidden = false;
+  let hasBlur = false;
+  for (const cls of classes) {
+    const base = getBaseClass(cls) || cls;
+    if (base === 'overflow-hidden' || base === 'overflow-clip') hasOverflowHidden = true;
+    if (base === 'overflow-visible') return false;
+    if (/^blur(-[a-z0-9]+)?$/.test(base)) hasBlur = true;
+  }
+  // In CSS, overflow:hidden clips children but NOT the element's own filter:blur —
+  // the blur bleeds past the frame's bounds. In Figma, clipsContent=true would
+  // clip the blur too. Skip clipsContent when both are present so blur can spread
+  // naturally (the inner gradient-blob-mask still clips the polygon itself).
+  if (hasOverflowHidden && hasBlur) return false;
+  return hasOverflowHidden;
+}
+
+export function applyClipBehavior(frame: FrameNode, classes: string[] | undefined): void {
+  const list = classes || [];
+  frame.clipsContent = shouldClipContent(list);
+}
+
+export function resolveGridWidthOverride(frame: FrameNode, contentWidth?: number | null): number | undefined {
+  if (contentWidth == null || !Number.isFinite(contentWidth)) return undefined;
+  const padding = (frame.paddingLeft || 0) + (frame.paddingRight || 0);
+  const width = contentWidth + padding;
+  if (!Number.isFinite(width) || width <= 0) return undefined;
+  return width;
+}
+
+function reflowFullWidthInSubtree(parent: FrameNode): void {
+  const padding = (parent.paddingLeft || 0) + (parent.paddingRight || 0);
+  const widthOverride = Number.isFinite(parent.width) ? Math.max(0, parent.width - padding) : null;
+  const options = widthOverride != null ? { widthOverride: widthOverride } : undefined;
+
+  for (const child of parent.children) {
+    applyFullWidthIfPossible(child, parent, options);
+    if ('layoutMode' in child) {
+      const childFrame = child as FrameNode;
+      if (hasGridColumnsNode(childFrame)) {
+        applyGridColumnsIfPossible(childFrame);
+      }
+      reflowFullWidthInSubtree(childFrame);
+    }
+  }
+}
+
+export function applyGridColumnsWithReflow(
+  frame: FrameNode,
+  widthOverride?: number,
+  colsOverride?: number
+): void {
+  applyGridColumnsIfPossible(frame, widthOverride, colsOverride);
+  if (!hasGridColumnsNode(frame)) return;
+  for (const child of frame.children) {
+    if ('layoutMode' in child) {
+      reflowFullWidthInSubtree(child as FrameNode);
+    }
+  }
+  stretchGridRowHeights(frame, colsOverride);
+}
+
+function stretchGridRowHeights(frame: FrameNode, colsOverride?: number): void {
+  const cols = colsOverride != null ? colsOverride : getGridColumnsNode(frame);
+  if (!cols || cols <= 0) return;
+  const flowChildren: SceneNode[] = [];
+  for (const child of frame.children) {
+    if ((child as any).layoutPositioning === 'ABSOLUTE') continue;
+    if (!('resize' in child)) continue;
+    flowChildren.push(child);
+  }
+  if (flowChildren.length === 0) return;
+
+  // Track row index per child, accounting for col-spans
+  const rowIndices: number[] = [];
+  const rowHeights: number[] = [];
+  let slotIndex = 0;
+  for (let i = 0; i < flowChildren.length; i++) {
+    const span = Math.min(getColSpanNode(flowChildren[i]), cols);
+    const rowIndex = Math.floor(slotIndex / cols);
+    rowIndices.push(rowIndex);
+    const height = (flowChildren[i] as any).height;
+    if (Number.isFinite(height)) {
+      const current = rowHeights[rowIndex];
+      if (current == null || height > current) rowHeights[rowIndex] = height;
+    }
+    slotIndex += span;
+  }
+
+  for (let i = 0; i < flowChildren.length; i++) {
+    const rowIndex = rowIndices[i];
+    const targetHeight = rowHeights[rowIndex];
+    if (!Number.isFinite(targetHeight) || targetHeight <= 0) continue;
+    const child = flowChildren[i] as any;
+    try {
+      child.resize(child.width, targetHeight);
+      if ('layoutMode' in child) {
+        if (child.layoutMode === 'VERTICAL' && 'primaryAxisSizingMode' in child) {
+          child.primaryAxisSizingMode = 'FIXED';
+        } else if (child.layoutMode === 'HORIZONTAL' && 'counterAxisSizingMode' in child) {
+          child.counterAxisSizingMode = 'FIXED';
+        }
+      } else if ('primaryAxisSizingMode' in child) {
+        child.primaryAxisSizingMode = 'FIXED';
+      }
+    } catch (_err) {
+      // ignore
+    }
+  }
+}
+
+export function maybeWrapMxAuto(
+  node: SceneNode | null,
+  classes: string[],
+  context: LayoutWrapContext
+): SceneNode | null {
+  if (!node) return null;
+  if (!classes.includes('mx-auto')) return node;
+  if (context.parentLayout !== 'VERTICAL') return node;
+  const wrapper = figma.createFrame();
+  wrapper.name = 'mx-auto';
+  wrapper.layoutMode = 'HORIZONTAL';
+  wrapper.primaryAxisSizingMode = 'AUTO';
+  wrapper.counterAxisSizingMode = 'AUTO';
+  wrapper.primaryAxisAlignItems = 'CENTER';
+  wrapper.counterAxisAlignItems = 'CENTER';
+  wrapper.fills = [];
+  wrapper.strokes = [];
+  wrapper.clipsContent = false;
+  if ('layoutAlign' in wrapper) (wrapper as any).layoutAlign = 'STRETCH';
+  wrapper.appendChild(node);
+  if (typeof context.maxWidth === 'number' && context.maxWidth > 0 && 'resize' in wrapper) {
+    try {
+      if ((wrapper as any).width < context.maxWidth) {
+        (wrapper as any).resize(context.maxWidth, (wrapper as any).height);
+        if ('primaryAxisSizingMode' in wrapper) {
+          (wrapper as any).primaryAxisSizingMode = 'FIXED';
+        }
+      }
+    } catch (_err) {
+      // ignore resize errors
+    }
+  }
+  return wrapper;
+}