@llc3233149/core 0.9.0

package/src/kiwi/fig-file.ts

@@ -0,0 +1,248 @@
+import { Unzip, UnzipInflate, inflateSync } from 'fflate'
+import { decompress as zstdDecompress } from 'fzstd'
+
+import { importNodeChanges } from './fig-import'
+import { decodeBinarySchema, compileSchema, ByteBuffer } from './kiwi-schema'
+import { isZstdCompressed } from './protocol'
+
+import type { SceneGraph } from '../scene-graph'
+import type { FigmaMessage } from './codec'
+import type { FigParseResult } from './fig-parse-worker'
+
+interface FigKiwiPayload {
+  schemaDeflated: Uint8Array
+  dataRaw: Uint8Array
+}
+
+function parseFigKiwiContainer(data: Uint8Array): FigKiwiPayload | null {
+  const header = new TextDecoder().decode(data.slice(0, 8))
+  if (header !== 'fig-kiwi') return null
+
+  const view = new DataView(data.buffer, data.byteOffset, data.byteLength)
+  let offset = 12
+
+  const chunks: Uint8Array[] = []
+  while (offset < data.length) {
+    const len = view.getUint32(offset, true)
+    offset += 4
+    chunks.push(data.slice(offset, offset + len))
+    offset += len
+  }
+  if (chunks.length < 2) return null
+
+  const compressed = chunks[1]
+  let dataRaw: Uint8Array
+  if (isZstdCompressed(compressed)) {
+    dataRaw = zstdDecompress(compressed)
+  } else {
+    try {
+      dataRaw = inflateSync(compressed)
+    } catch {
+      dataRaw = compressed
+    }
+  }
+
+  return { schemaDeflated: chunks[0], dataRaw }
+}
+
+/** Concatenate Uint8Array chunks. */
+function concatChunks(chunks: Uint8Array[]): Uint8Array {
+  if (chunks.length === 1) return chunks[0]
+  let total = 0
+  for (const c of chunks) total += c.length
+  const out = new Uint8Array(total)
+  let offset = 0
+  for (const c of chunks) {
+    out.set(c, offset)
+    offset += c.length
+  }
+  return out
+}
+
+function isCanvasEntry(name: string): boolean {
+  return name === 'canvas.fig' || name === 'canvas'
+}
+
+function isImageEntry(name: string): boolean {
+  return name.startsWith('images/') && name !== 'images/'
+}
+
+/**
+ * Streaming parse using fflate.Unzip — decompresses entries one at a time
+ * instead of all at once, reducing peak memory for large files.
+ */
+function streamingParseFigFile(data: Uint8Array): Promise<SceneGraph> {
+  return new Promise<SceneGraph>((resolve, reject) => {
+    const fileChunks = new Map<string, Uint8Array[]>()
+    let pending = 0
+    let pushDone = false
+
+    const uz = new Unzip((file) => {
+      if (!isCanvasEntry(file.name) && !isImageEntry(file.name)) return
+      pending++
+      const chunks: Uint8Array[] = []
+      fileChunks.set(file.name, chunks)
+      file.ondata = (err, chunk, final) => {
+        if (err) { reject(err); return }
+        chunks.push(chunk)
+        if (final) { pending--; maybeFinish() }
+      }
+      file.start()
+    })
+    uz.register(UnzipInflate)
+
+    function maybeFinish() {
+      if (!pushDone || pending > 0) return
+      try { resolve(finalize()) } catch (err) { reject(err) }
+    }
+
+    function finalize(): SceneGraph {
+      let canvasData: Uint8Array | null = null
+      for (const [name, chunks] of fileChunks) {
+        if (isCanvasEntry(name)) { canvasData = concatChunks(chunks); break }
+      }
+      if (!canvasData) {
+        let maxSize = 0
+        for (const [name, chunks] of fileChunks) {
+          if (isImageEntry(name)) continue
+          const size = chunks.reduce((s, c) => s + c.length, 0)
+          if (size > maxSize) { maxSize = size; canvasData = concatChunks(chunks) }
+        }
+      }
+      if (!canvasData) {
+        throw new Error(`No canvas data found. Entries: ${[...fileChunks.keys()].join(', ')}`)
+      }
+
+      const payload = parseFigKiwiContainer(canvasData)
+      if (!payload) throw new Error('Invalid fig-kiwi container')
+
+      const schemaBytes = inflateSync(payload.schemaDeflated)
+      const schema = decodeBinarySchema(new ByteBuffer(schemaBytes))
+      const compiled = compileSchema(schema) as { decodeMessage(data: Uint8Array): unknown }
+      const message = compiled.decodeMessage(payload.dataRaw) as FigmaMessage
+
+      if (!message.nodeChanges?.length) throw new Error('No nodes found in .fig file')
+
+      const blobs: Uint8Array[] = (message.blobs ?? []).map((b) =>
+        b.bytes instanceof Uint8Array ? b.bytes : new Uint8Array(Object.values(b.bytes))
+      )
+
+      const images = new Map<string, Uint8Array>()
+      for (const [name, chunks] of fileChunks) {
+        if (isImageEntry(name)) {
+          images.set(name.replace('images/', ''), concatChunks(chunks))
+        }
+      }
+
+      return importNodeChanges(message.nodeChanges, blobs, images)
+    }
+
+    uz.push(data, true)
+    pushDone = true
+    maybeFinish()
+  })
+}
+
+function parseViaWorker(buffer: ArrayBuffer): Promise<SceneGraph> {
+  return new Promise((resolve, reject) => {
+    const worker = new Worker(new URL('./fig-parse-worker.ts', import.meta.url), { type: 'module' })
+
+    worker.onmessage = (e: MessageEvent<FigParseResult & { error?: string }>) => {
+      worker.terminate()
+      if (e.data.error) { reject(new Error(e.data.error)); return }
+      const { nodeChanges, blobs, images: imageEntries } = e.data
+      const images = new Map<string, Uint8Array>(imageEntries)
+      resolve(importNodeChanges(nodeChanges, blobs, images))
+    }
+
+    worker.onerror = (err) => {
+      worker.terminate()
+      reject(new Error(err.message))
+    }
+
+    worker.postMessage(buffer, [buffer])
+  })
+}
+
+/**
+ * Stream a File to the worker in chunks, avoiding loading the entire file
+ * into memory at once. Falls back to full-buffer for small files.
+ */
+function streamFileToWorker(file: File): Promise<SceneGraph> {
+  const CHUNK_SIZE = 4 * 1024 * 1024 // 4MB chunks
+
+  return new Promise((resolve, reject) => {
+    const worker = new Worker(new URL('./fig-parse-worker.ts', import.meta.url), { type: 'module' })
+
+    worker.onmessage = (e: MessageEvent<FigParseResult & { error?: string }>) => {
+      worker.terminate()
+      if (e.data.error) { reject(new Error(e.data.error)); return }
+      const { nodeChanges, blobs, images: imageEntries } = e.data
+      const images = new Map<string, Uint8Array>(imageEntries)
+      resolve(importNodeChanges(nodeChanges, blobs, images))
+    }
+
+    worker.onerror = (err) => {
+      worker.terminate()
+      reject(new Error(err.message))
+    }
+
+    // Stream file in chunks
+    const reader = file.stream().getReader()
+    let buffer: Uint8Array[] = []
+    let bufferSize = 0
+
+    function flush(final: boolean) {
+      if (bufferSize === 0 && !final) return
+      const chunk = buffer.length === 1 ? buffer[0] : concatChunks(buffer)
+      const transfer = chunk.buffer as ArrayBuffer
+      worker.postMessage(
+        { type: 'stream-chunk', chunk, final },
+        [transfer]
+      )
+      buffer = []
+      bufferSize = 0
+    }
+
+    function pump(): void {
+      reader.read().then(({ done, value }) => {
+        if (done) {
+          flush(true)
+          return
+        }
+        buffer.push(value)
+        bufferSize += value.length
+        if (bufferSize >= CHUNK_SIZE) flush(false)
+        pump()
+      }).catch(reject)
+    }
+
+    pump()
+  })
+}
+
+/** Small file threshold for using streaming (50MB) */
+const STREAM_THRESHOLD = 50 * 1024 * 1024
+
+export async function parseFigFile(buffer: ArrayBuffer): Promise<SceneGraph> {
+  if (typeof Worker !== 'undefined' && typeof window !== 'undefined') {
+    return parseViaWorker(buffer)
+  }
+  // Non-worker fallback: use streaming parse to reduce peak memory
+  return streamingParseFigFile(new Uint8Array(buffer))
+}
+
+export async function readFigFile(file: File): Promise<SceneGraph> {
+  if (typeof Worker !== 'undefined' && typeof window !== 'undefined') {
+    // Large files: stream to worker in chunks to avoid full-buffer in main thread
+    if (file.size > STREAM_THRESHOLD) {
+      return streamFileToWorker(file)
+    }
+    // Small files: full buffer is fine
+    const buffer = await file.arrayBuffer()
+    return parseViaWorker(buffer)
+  }
+  // Non-worker fallback
+  const buffer = await file.arrayBuffer()
+  return streamingParseFigFile(new Uint8Array(buffer))
+}

package/src/kiwi/fig-import.ts

@@ -0,0 +1,300 @@
+import type { VariableType, VariableValue } from '../scene-graph'
+import { SceneGraph } from '../scene-graph'
+
+import {
+  guidToString,
+  nodeChangeToProps,
+  sortChildren,
+  VARIABLE_BINDING_FIELDS_INVERSE
+} from './kiwi-convert'
+import { populateAndApplyOverrides } from './instance-overrides'
+import type { InstanceNodeChange } from './instance-overrides'
+
+import type { NodeChange, VariableDataValuesEntry } from './codec'
+
+interface ChangeMaps {
+  changeMap: Map<string, NodeChange>
+  parentMap: Map<string, string>
+  childrenMap: Map<string, string[]>
+}
+
+function buildChangeMaps(nodeChanges: NodeChange[]): ChangeMaps {
+  const changeMap = new Map<string, NodeChange>()
+  const parentMap = new Map<string, string>()
+  const childrenMap = new Map<string, string[]>()
+
+  for (const nc of nodeChanges) {
+    if (!nc.guid) continue
+    if (nc.phase === 'REMOVED') continue
+    const id = guidToString(nc.guid)
+    changeMap.set(id, nc)
+
+    if (nc.parentIndex?.guid) {
+      const pid = guidToString(nc.parentIndex.guid)
+      parentMap.set(id, pid)
+      let siblings = childrenMap.get(pid)
+      if (!siblings) {
+        siblings = []
+        childrenMap.set(pid, siblings)
+      }
+      siblings.push(id)
+    }
+  }
+
+  for (const [parentId, children] of childrenMap) {
+    const parentNc = changeMap.get(parentId)
+    if (parentNc) sortChildren(children, parentNc, changeMap)
+  }
+
+  return { changeMap, parentMap, childrenMap }
+}
+
+function resolveVariableType(resolvedType: string | undefined): VariableType {
+  if (resolvedType === 'COLOR') return 'COLOR'
+  if (resolvedType === 'BOOLEAN') return 'BOOLEAN'
+  if (resolvedType === 'STRING') return 'STRING'
+  return 'FLOAT'
+}
+
+function resolveVariableValue(entry: VariableDataValuesEntry): VariableValue | undefined {
+  const vd = entry.variableData
+  if (!vd.value) return undefined
+
+  const dt = vd.dataType ?? vd.resolvedDataType
+  if (dt === 'COLOR' && vd.value.colorValue) {
+    const c = vd.value.colorValue
+    return { r: c.r, g: c.g, b: c.b, a: c.a }
+  }
+  if (dt === 'BOOLEAN') return vd.value.boolValue ?? false
+  if (dt === 'STRING') return vd.value.textValue ?? ''
+  if (dt === 'ALIAS' && vd.value.alias?.guid) {
+    return { aliasId: guidToString(vd.value.alias.guid) }
+  }
+  return vd.value.floatValue ?? 0
+}
+
+function resolveDefaultValue(type: VariableType): VariableValue {
+  if (type === 'BOOLEAN') return false
+  if (type === 'STRING') return ''
+  if (type === 'COLOR') return { r: 0, g: 0, b: 0, a: 1 }
+  return 0
+}
+
+function importCollections(
+  changeMap: Map<string, NodeChange>,
+  graph: SceneGraph
+): void {
+  for (const [id, nc] of changeMap) {
+    if (nc.type !== 'VARIABLE_SET') continue
+
+    const modes = (nc.variableSetModes ?? []).map((m) => {
+      const modeId = guidToString(m.id)
+      return { modeId, name: m.name }
+    })
+    if (modes.length === 0) modes.push({ modeId: 'default', name: 'Default' })
+
+    graph.addCollection({
+      id,
+      name: nc.name ?? 'Variables',
+      modes,
+      defaultModeId: modes[0].modeId,
+      variableIds: []
+    })
+  }
+}
+
+function importVariableEntries(
+  changeMap: Map<string, NodeChange>,
+  parentMap: Map<string, string>,
+  graph: SceneGraph
+): void {
+  for (const [id, nc] of changeMap) {
+    if (nc.type !== 'VARIABLE') continue
+
+    const collectionId = nc.variableSetID?.guid ? guidToString(nc.variableSetID.guid) : (parentMap.get(id) ?? '')
+
+    if (!graph.variableCollections.has(collectionId)) {
+      const parentNc = changeMap.get(collectionId)
+      graph.addCollection({
+        id: collectionId,
+        name: parentNc?.name ?? 'Variables',
+        modes: [{ modeId: 'default', name: 'Default' }],
+        defaultModeId: 'default',
+        variableIds: []
+      })
+    }
+
+    const type = resolveVariableType(nc.variableResolvedType)
+    const valuesByMode: Record<string, VariableValue> = {}
+
+    if (nc.variableDataValues?.entries) {
+      for (const entry of nc.variableDataValues.entries) {
+        const val = resolveVariableValue(entry)
+        if (val !== undefined) {
+          valuesByMode[guidToString(entry.modeID)] = val
+        }
+      }
+    }
+
+    if (Object.keys(valuesByMode).length === 0) {
+      const col = graph.variableCollections.get(collectionId)
+      const defaultMode = col?.defaultModeId ?? 'default'
+      valuesByMode[defaultMode] = resolveDefaultValue(type)
+    }
+
+    graph.addVariable({
+      id,
+      name: nc.name ?? 'Variable',
+      type,
+      collectionId,
+      valuesByMode,
+      description: '',
+      hiddenFromPublishing: false
+    })
+  }
+}
+
+function importPages(
+  graph: SceneGraph,
+  changeMap: Map<string, NodeChange>,
+  parentMap: Map<string, string>,
+  childrenMap: Map<string, string[]>,
+  created: Set<string>,
+  createSceneNode: (ncId: string, graphParentId: string) => void
+): void {
+  let docId: string | null = null
+  for (const [id, nc] of changeMap) {
+    if (nc.type === 'DOCUMENT' || id === '0:0') {
+      docId = id
+      break
+    }
+  }
+
+  if (docId) {
+    for (const canvasId of childrenMap.get(docId) ?? []) {
+      const canvasNc = changeMap.get(canvasId)
+      if (!canvasNc) continue
+      if (canvasNc.type === 'CANVAS') {
+        const page = graph.addPage(canvasNc.name ?? 'Page')
+        if (canvasNc.internalOnly) page.internalOnly = true
+        created.add(canvasId)
+        for (const childId of childrenMap.get(canvasId) ?? []) {
+          createSceneNode(childId, page.id)
+        }
+      } else {
+        createSceneNode(canvasId, graph.getPages()[0]?.id ?? graph.rootId)
+      }
+    }
+  } else {
+    const roots: string[] = []
+    for (const [id] of changeMap) {
+      const pid = parentMap.get(id)
+      if (!pid || !changeMap.has(pid)) roots.push(id)
+    }
+    const page = graph.getPages()[0] ?? graph.addPage('Page 1')
+    for (const rootId of roots) {
+      createSceneNode(rootId, page.id)
+    }
+  }
+}
+
+function importVariableBindings(
+  changeMap: Map<string, NodeChange>,
+  guidToNodeId: Map<string, string>,
+  graph: SceneGraph
+): void {
+  for (const [ncId, nc] of changeMap) {
+    if (!nc.variableConsumptionMap?.entries?.length) continue
+    const nodeId = guidToNodeId.get(ncId)
+    if (!nodeId) continue
+    for (const entry of nc.variableConsumptionMap.entries) {
+      const varGuid = entry.variableData?.value?.alias?.guid
+      if (!varGuid) continue
+      const field = VARIABLE_BINDING_FIELDS_INVERSE[entry.variableField ?? '']
+      if (field) graph.bindVariable(nodeId, field, guidToString(varGuid))
+    }
+  }
+}
+
+function remapComponentIds(
+  graph: SceneGraph,
+  guidToNodeId: Map<string, string>
+): void {
+  for (const node of graph.getAllNodes()) {
+    if (node.type !== 'INSTANCE' || !node.componentId) continue
+    const remapped = guidToNodeId.get(node.componentId)
+    if (remapped) node.componentId = remapped
+  }
+}
+
+export function importNodeChanges(
+  nodeChanges: NodeChange[],
+  blobs: Uint8Array[] = [],
+  images?: Map<string, Uint8Array>
+): SceneGraph {
+  const graph = new SceneGraph()
+
+  if (images) {
+    for (const [hash, data] of images) {
+      graph.images.set(hash, data)
+    }
+  }
+
+  for (const page of graph.getPages(true)) {
+    graph.deleteNode(page.id)
+  }
+
+  const { changeMap, parentMap, childrenMap } = buildChangeMaps(nodeChanges)
+
+  const created = new Set<string>()
+  const guidToNodeId = new Map<string, string>()
+  const getChildren = (ncId: string): string[] => childrenMap.get(ncId) ?? []
+
+  function createSceneNode(ncId: string, graphParentId: string) {
+    if (created.has(ncId)) return
+    created.add(ncId)
+
+    const nc = changeMap.get(ncId)
+    if (!nc) return
+
+    try {
+      const { nodeType, ...props } = nodeChangeToProps(nc, blobs)
+      if (nodeType === 'DOCUMENT' || nodeType === 'VARIABLE' || nc.type === 'VARIABLE_SET') return
+
+      const node = graph.createNode(nodeType, graphParentId, props)
+      guidToNodeId.set(ncId, node.id)
+
+      for (const childId of getChildren(ncId)) {
+        createSceneNode(childId, node.id)
+      }
+    } catch (e) {
+      // Skip nodes that fail to import rather than aborting the entire file
+      console.warn(`[fig-import] Skipped node ${ncId} (${nc.name ?? nc.type}):`, e)
+    }
+  }
+
+  importPages(graph, changeMap, parentMap, childrenMap, created, createSceneNode)
+
+  importCollections(changeMap, graph)
+  importVariableEntries(changeMap, parentMap, graph)
+  importVariableBindings(changeMap, guidToNodeId, graph)
+  remapComponentIds(graph, guidToNodeId)
+
+  try {
+    populateAndApplyOverrides(
+      graph,
+      changeMap as unknown as Map<string, InstanceNodeChange>,
+      guidToNodeId,
+      blobs
+    )
+  } catch (e) {
+    // Instance overrides are non-critical — import continues without them
+    console.warn('[fig-import] Instance override population failed:', e)
+  }
+
+  if (graph.getPages(true).length === 0) {
+    graph.addPage('Page 1')
+  }
+
+  return graph
+}