@zseven-w/pen-figma 0.0.1

package/src/figma-image-resolver.ts

@@ -0,0 +1,113 @@
+import type { PenNode } from '@zseven-w/pen-types'
+import type { ImageFill } from '@zseven-w/pen-types'
+
+/**
+ * Resolve __blob:N and __hash:<hex> references in the PenNode tree to data URLs
+ * using extracted image blobs and ZIP image files from the .fig file.
+ */
+export function resolveImageBlobs(
+  nodes: PenNode[],
+  imageBlobs: Map<number, Uint8Array>,
+  imageFiles?: Map<string, Uint8Array>,
+): number {
+  if (imageBlobs.size === 0 && (!imageFiles || imageFiles.size === 0)) return 0
+
+  // Convert blobs to data URLs
+  const dataUrls = new Map<number, string>()
+  for (const [index, bytes] of imageBlobs) {
+    dataUrls.set(index, blobToDataUrl(bytes))
+  }
+
+  // Convert hash-based image files to data URLs
+  const hashDataUrls = new Map<string, string>()
+  if (imageFiles) {
+    for (const [hash, bytes] of imageFiles) {
+      hashDataUrls.set(hash, blobToDataUrl(bytes))
+    }
+  }
+
+  let resolved = 0
+  for (const node of nodes) {
+    resolved += patchNode(node, dataUrls, hashDataUrls)
+  }
+  return resolved
+}
+
+function blobToDataUrl(bytes: Uint8Array): string {
+  // Detect MIME type from magic bytes
+  let mime = 'image/png'
+  if (bytes[0] === 0xFF && bytes[1] === 0xD8) {
+    mime = 'image/jpeg'
+  } else if (bytes[0] === 0x47 && bytes[1] === 0x49) {
+    mime = 'image/gif'
+  } else if (bytes[0] === 0x52 && bytes[1] === 0x49) {
+    mime = 'image/webp'
+  }
+
+  // Convert to base64
+  let binary = ''
+  const len = bytes.byteLength
+  for (let i = 0; i < len; i++) {
+    binary += String.fromCharCode(bytes[i])
+  }
+  const base64 = btoa(binary)
+  return `data:${mime};base64,${base64}`
+}
+
+function resolveRef(
+  src: string,
+  dataUrls: Map<number, string>,
+  hashDataUrls: Map<string, string>,
+): string | null {
+  if (src.startsWith('__blob:')) {
+    const index = parseInt(src.slice(7), 10)
+    return dataUrls.get(index) ?? null
+  }
+  if (src.startsWith('__hash:')) {
+    const hash = src.slice(7)
+    return hashDataUrls.get(hash) ?? null
+  }
+  return null
+}
+
+function patchNode(
+  node: PenNode,
+  dataUrls: Map<number, string>,
+  hashDataUrls: Map<string, string>,
+): number {
+  let resolved = 0
+
+  // Patch ImageNode src
+  if (node.type === 'image' && node.src && (node.src.startsWith('__blob:') || node.src.startsWith('__hash:'))) {
+    const url = resolveRef(node.src, dataUrls, hashDataUrls)
+    if (url) {
+      node.src = url
+      resolved++
+    }
+  }
+
+  // Patch image fills
+  if ('fill' in node && Array.isArray(node.fill)) {
+    for (const fill of node.fill) {
+      if (fill.type === 'image') {
+        const imgFill = fill as ImageFill
+        if (imgFill.url && (imgFill.url.startsWith('__blob:') || imgFill.url.startsWith('__hash:'))) {
+          const url = resolveRef(imgFill.url, dataUrls, hashDataUrls)
+          if (url) {
+            imgFill.url = url
+            resolved++
+          }
+        }
+      }
+    }
+  }
+
+  // Recurse into children
+  if ('children' in node && Array.isArray(node.children)) {
+    for (const child of node.children) {
+      resolved += patchNode(child, dataUrls, hashDataUrls)
+    }
+  }
+
+  return resolved
+}

package/src/figma-layout-mapper.ts

@@ -0,0 +1,145 @@
+import type { FigmaNodeChange } from './figma-types'
+import type { ContainerProps, SizingBehavior } from '@zseven-w/pen-types'
+
+/**
+ * Map Figma stack (auto-layout) properties to PenNode ContainerProps.
+ */
+export function mapFigmaLayout(
+  node: FigmaNodeChange
+): Pick<
+  ContainerProps,
+  'layout' | 'gap' | 'padding' | 'justifyContent' | 'alignItems' | 'clipContent'
+> {
+  const result: Pick<
+    ContainerProps,
+    'layout' | 'gap' | 'padding' | 'justifyContent' | 'alignItems' | 'clipContent'
+  > = {}
+
+  if (node.stackMode && node.stackMode !== 'NONE') {
+    result.layout = node.stackMode === 'HORIZONTAL' ? 'horizontal' : 'vertical'
+  }
+
+  if (node.stackPrimaryAlignItems) {
+    result.justifyContent = mapJustifyContent(node.stackPrimaryAlignItems)
+  }
+
+  // Set gap from stackSpacing, but skip when justifyContent is space_between.
+  // Figma stores the COMPUTED inter-item spacing in stackSpacing for
+  // SPACE_EVENLY mode — using it as an explicit gap would conflict with
+  // the dynamic spacing that space_between already provides.
+  if (node.stackSpacing !== undefined && node.stackSpacing !== 0 && result.justifyContent !== 'space_between') {
+    result.gap = node.stackSpacing
+  }
+
+  const padding = mapPadding(node)
+  if (padding !== undefined) {
+    result.padding = padding
+  }
+
+  if (node.stackCounterAlignItems) {
+    result.alignItems = mapAlignItems(node.stackCounterAlignItems)
+  }
+
+  // Frames clip by default in Figma (frameMaskDisabled defaults to false).
+  // Only skip clipContent when explicitly disabled.
+  if (node.frameMaskDisabled !== true) {
+    result.clipContent = true
+  }
+
+  return result
+}
+
+function mapPadding(
+  node: FigmaNodeChange
+): number | [number, number] | [number, number, number, number] | undefined {
+  // Check individual padding values first
+  const hasHorizontal = node.stackHorizontalPadding !== undefined
+  const hasVertical = node.stackVerticalPadding !== undefined
+  const hasRight = node.stackPaddingRight !== undefined
+  const hasBottom = node.stackPaddingBottom !== undefined
+
+  if (!hasHorizontal && !hasVertical && !hasRight && !hasBottom) {
+    // Uniform padding
+    if (node.stackPadding && node.stackPadding > 0) return node.stackPadding
+    return undefined
+  }
+
+  const vPad = node.stackVerticalPadding ?? node.stackPadding ?? 0
+  const hPad = node.stackHorizontalPadding ?? node.stackPadding ?? 0
+  const top = vPad
+  const bottom = node.stackPaddingBottom ?? vPad
+  const left = hPad
+  const right = node.stackPaddingRight ?? hPad
+
+  if (top === 0 && right === 0 && bottom === 0 && left === 0) return undefined
+  if (top === right && right === bottom && bottom === left) return top
+  if (top === bottom && left === right) return [top, right]
+  return [top, right, bottom, left]
+}
+
+function mapJustifyContent(
+  align: string
+): ContainerProps['justifyContent'] {
+  switch (align) {
+    case 'MIN': return 'start'
+    case 'CENTER': return 'center'
+    case 'MAX': return 'end'
+    case 'SPACE_EVENLY': return 'space_between'
+    default: return undefined
+  }
+}
+
+function mapAlignItems(
+  align: string
+): ContainerProps['alignItems'] {
+  switch (align) {
+    case 'MIN': return 'start'
+    case 'CENTER': return 'center'
+    case 'MAX': return 'end'
+    default: return undefined
+  }
+}
+
+/**
+ * Determine width sizing behavior from Figma internal format.
+ */
+export function mapWidthSizing(node: FigmaNodeChange, parentStackMode?: string): SizingBehavior {
+  // Check stack sizing for containers
+  if (node.stackPrimarySizing === 'RESIZE_TO_FIT' && node.stackMode === 'HORIZONTAL') {
+    return 'fit_content'
+  }
+  if (node.stackCounterSizing === 'RESIZE_TO_FIT' && node.stackMode === 'VERTICAL') {
+    return 'fit_content'
+  }
+
+  // Check child sizing within parent
+  if (node.stackChildPrimaryGrow === 1 && parentStackMode === 'HORIZONTAL') {
+    return 'fill_container'
+  }
+  if (node.stackChildAlignSelf === 'STRETCH' && parentStackMode === 'VERTICAL') {
+    return 'fill_container'
+  }
+
+  return node.size?.x ?? 100
+}
+
+/**
+ * Determine height sizing behavior from Figma internal format.
+ */
+export function mapHeightSizing(node: FigmaNodeChange, parentStackMode?: string): SizingBehavior {
+  if (node.stackPrimarySizing === 'RESIZE_TO_FIT' && node.stackMode === 'VERTICAL') {
+    return 'fit_content'
+  }
+  if (node.stackCounterSizing === 'RESIZE_TO_FIT' && node.stackMode === 'HORIZONTAL') {
+    return 'fit_content'
+  }
+
+  if (node.stackChildPrimaryGrow === 1 && parentStackMode === 'VERTICAL') {
+    return 'fill_container'
+  }
+  if (node.stackChildAlignSelf === 'STRETCH' && parentStackMode === 'HORIZONTAL') {
+    return 'fill_container'
+  }
+
+  return node.size?.y ?? 100
+}