@llc3233149/core 0.9.0

package/src/constants.ts

@@ -0,0 +1,277 @@
+import type { Color } from './types'
+
+export const IS_TAURI = typeof window !== 'undefined' && '__TAURI_INTERNALS__' in window
+
+export const BLACK: Color = { r: 0, g: 0, b: 0, a: 1 }
+export const TRANSPARENT: Color = { r: 0, g: 0, b: 0, a: 0 }
+export const DEFAULT_SHADOW_COLOR: Color = { r: 0, g: 0, b: 0, a: 0.25 }
+export const SELECTION_COLOR = { r: 0.23, g: 0.51, b: 0.96, a: 1 } satisfies Color
+export const COMPONENT_COLOR = { r: 0.592, g: 0.278, b: 1, a: 1 } satisfies Color
+export const SNAP_COLOR = { r: 1.0, g: 0.0, b: 0.56, a: 1 } satisfies Color
+export const MEASUREMENT_COLOR = { r: 1.0, g: 0.3, b: 0.3, a: 1 } satisfies Color
+export const CANVAS_BG_COLOR = { r: 0.96, g: 0.96, b: 0.96, a: 1 } satisfies Color
+
+// Measurement overlay
+export const MEASUREMENT_LINE_WIDTH = 1
+export const MEASUREMENT_PILL_HEIGHT = 16
+export const MEASUREMENT_PILL_PADDING_X = 5
+export const MEASUREMENT_PILL_RADIUS = 3
+export const MEASUREMENT_FONT_SIZE = 10
+export const MEASUREMENT_DASH = [4, 3]
+export const MEASUREMENT_ARROW_SIZE = 4
+
+export const ROTATION_HANDLE_OFFSET = 20
+export const SNAP_THRESHOLD = 5
+
+export const RULER_SIZE = 20
+export const RULER_BG_COLOR = { r: 0.14, g: 0.14, b: 0.14, a: 1 } satisfies Color
+export const RULER_TICK_COLOR = { r: 0.4, g: 0.4, b: 0.4, a: 1 } satisfies Color
+export const RULER_TEXT_COLOR = { r: 0.55, g: 0.55, b: 0.55, a: 1 } satisfies Color
+export const RULER_BADGE_HEIGHT = 14
+export const RULER_BADGE_PADDING = 3
+export const RULER_BADGE_RADIUS = 2
+export const RULER_BADGE_EXCLUSION = 30
+export const RULER_TEXT_BASELINE = 0.65
+export const RULER_MAJOR_TICK = 0.5
+export const RULER_MINOR_TICK = 0.25
+export const RULER_HIGHLIGHT_ALPHA = 0.3
+
+export const PEN_HANDLE_RADIUS = 3
+export const PEN_VERTEX_RADIUS = 4
+export const PEN_CLOSE_RADIUS_BOOST = 2
+export const PEN_PATH_STROKE_WIDTH = 2
+export const PARENT_OUTLINE_ALPHA = 0.5
+export const PARENT_OUTLINE_DASH = 4
+export const DEFAULT_FONT_FAMILY = 'Inter'
+export const DEFAULT_FONT_SIZE = 14
+export const DEFAULT_STROKE_MITER_LIMIT = 4
+export const LABEL_FONT_SIZE = 11
+export const SIZE_FONT_SIZE = 10
+
+export const ROTATION_HANDLE_RADIUS = 4
+
+export const HANDLE_HALF_SIZE = 3
+
+export const LABEL_OFFSET_Y = 8
+export const SIZE_PILL_PADDING_X = 6
+export const SIZE_PILL_PADDING_Y = 6
+export const SIZE_PILL_HEIGHT = 18
+export const SIZE_PILL_RADIUS = 4
+export const SIZE_PILL_TEXT_OFFSET_Y = 13
+
+export const MARQUEE_FILL_ALPHA = 0.08
+export const SELECTION_DASH_ALPHA = 0.6
+export const DROP_HIGHLIGHT_ALPHA = 0.8
+export const DROP_HIGHLIGHT_STROKE = 2
+
+export const LAYOUT_INDICATOR_STROKE = 2
+
+export const SECTION_CORNER_RADIUS = 5
+export const SECTION_TITLE_HEIGHT = 24
+export const SECTION_TITLE_PADDING_X = 8
+export const SECTION_TITLE_RADIUS = 5
+export const SECTION_TITLE_FONT_SIZE = 12
+export const SECTION_TITLE_GAP = 6
+
+export const COMPONENT_SET_DASH = 6
+export const COMPONENT_SET_DASH_GAP = 4
+export const COMPONENT_SET_BORDER_WIDTH = 1.5
+export const COMPONENT_LABEL_FONT_SIZE = 11
+export const COMPONENT_LABEL_GAP = 6
+export const COMPONENT_LABEL_ICON_SIZE = 10
+export const COMPONENT_LABEL_ICON_GAP = 4
+
+export const RULER_TARGET_PIXEL_SPACING = 100
+export const RULER_MAJOR_TOLERANCE = 0.01
+
+export const FLASH_COLOR = SELECTION_COLOR
+export const FLASH_ATTACK_MS = 200
+export const FLASH_HOLD_MS = 400
+export const FLASH_RELEASE_MS = 300
+export const FLASH_STROKE_WIDTH = 2
+export const FLASH_PADDING = 5
+export const FLASH_OVERSHOOT = 30
+export const FLASH_RADIUS = 4
+
+export const TEXT_SELECTION_COLOR = { r: 0.26, g: 0.52, b: 0.96, a: 0.3 }
+export const TEXT_CARET_COLOR = BLACK
+export const TEXT_CARET_WIDTH = 1
+
+export type AIProviderID =
+  | 'openrouter'
+  | 'anthropic'
+  | 'openai'
+  | 'google'
+  | 'openai-compatible'
+  | 'zai'
+  | 'minimax'
+  | 'anthropic-compatible'
+
+export interface ModelOption {
+  id: string
+  name: string
+  tag?: string
+}
+
+export interface AIProviderDef {
+  id: AIProviderID
+  name: string
+  keyPlaceholder: string
+  keyURL: string
+  models: ModelOption[]
+  defaultModel: string
+  supportsCustomBaseURL?: boolean
+  supportsCustomModel?: boolean
+  recommended?: boolean
+}
+
+export const AI_PROVIDERS: AIProviderDef[] = [
+  {
+    id: 'openrouter',
+    name: 'OpenRouter',
+    keyPlaceholder: 'sk-or-…',
+    keyURL: 'https://openrouter.ai/keys',
+    defaultModel: 'anthropic/claude-sonnet-4.6',
+    recommended: true,
+    models: [
+      { id: 'anthropic/claude-sonnet-4.6', name: 'Claude Sonnet 4.6', tag: 'Best for design' },
+      { id: 'anthropic/claude-opus-4.6', name: 'Claude Opus 4.6', tag: 'Smartest' },
+      { id: 'moonshotai/kimi-k2.5', name: 'Kimi K2.5', tag: 'Vision + code' },
+      {
+        id: 'google/gemini-3.1-pro-preview',
+        name: 'Gemini 3.1 Pro',
+        tag: '1M context'
+      },
+      { id: 'openai/gpt-5.3-codex', name: 'GPT-5.3 Codex' },
+      { id: 'google/gemini-3-flash-preview', name: 'Gemini 3 Flash', tag: 'Fast' },
+      { id: 'deepseek/deepseek-v3.2', name: 'DeepSeek V3.2', tag: 'Cheap' },
+      { id: 'qwen/qwen3.5-flash-02-23', name: 'Qwen 3.5 Flash', tag: 'Cheap' },
+      { id: 'qwen/qwen3-coder:free', name: 'Qwen3 Coder', tag: 'Free' },
+      { id: 'openai/gpt-oss-120b:free', name: 'GPT-OSS 120B', tag: 'Free' }
+    ]
+  },
+  {
+    id: 'anthropic',
+    name: 'Anthropic',
+    keyPlaceholder: 'sk-ant-…',
+    keyURL: 'https://console.anthropic.com/settings/keys',
+    defaultModel: 'claude-sonnet-4-6-20260301',
+    models: [
+      { id: 'claude-sonnet-4-6-20260301', name: 'Claude Sonnet 4.6', tag: 'Best for design' },
+      { id: 'claude-opus-4-6-20260301', name: 'Claude Opus 4.6', tag: 'Smartest' }
+    ]
+  },
+  {
+    id: 'openai',
+    name: 'OpenAI',
+    keyPlaceholder: 'sk-…',
+    keyURL: 'https://platform.openai.com/api-keys',
+    defaultModel: 'gpt-5.3-codex',
+    models: [
+      { id: 'gpt-5.3-codex', name: 'GPT-5.3 Codex' },
+      { id: 'gpt-4.1', name: 'GPT-4.1' },
+      { id: 'o3', name: 'o3', tag: 'Reasoning' },
+      { id: 'o4-mini', name: 'o4-mini', tag: 'Fast reasoning' }
+    ]
+  },
+  {
+    id: 'google',
+    name: 'Google AI',
+    keyPlaceholder: 'AIza…',
+    keyURL: 'https://aistudio.google.com/apikey',
+    defaultModel: 'gemini-3.1-pro-preview',
+    models: [
+      { id: 'gemini-3.1-pro-preview', name: 'Gemini 3.1 Pro', tag: '1M context' },
+      { id: 'gemini-3-flash-preview', name: 'Gemini 3 Flash', tag: 'Fast' }
+    ]
+  },
+  {
+    id: 'zai',
+    name: 'Z.ai',
+    keyPlaceholder: 'API key',
+    keyURL: 'https://docs.z.ai/api-reference/introduction',
+    defaultModel: 'glm-5',
+    models: [
+      { id: 'glm-5', name: 'GLM-5' },
+      { id: 'glm-5-code', name: 'GLM-5-Code' },
+      { id: 'glm-4.7', name: 'GLM-4.7' },
+      { id: 'glm-4.7-flashx', name: 'GLM-4.7-FlashX' },
+      { id: 'glm-4.6', name: 'GLM-4.6' },
+      { id: 'glm-4.5', name: 'GLM-4.5' },
+      { id: 'glm-4.5-x', name: 'GLM-4.5-X' },
+      { id: 'glm-4.5-air', name: 'GLM-4.5-Air' },
+      { id: 'glm-4.5-airx', name: 'GLM-4.5-AirX' },
+      { id: 'glm-4-32b-0414-128k', name: 'GLM-4-32B-0414-128K' },
+      { id: 'glm-4.7-flash', name: 'GLM-4.7-Flash', tag: 'Free' },
+      { id: 'glm-4.5-flash', name: 'GLM-4.5-Flash', tag: 'Free' }
+    ]
+  },
+  {
+    id: 'minimax',
+    name: 'MiniMax',
+    keyPlaceholder: 'API key',
+    keyURL: 'https://platform.minimax.io/user-center/basic-information/interface-key',
+    defaultModel: 'MiniMax-M2.5',
+    models: [
+      { id: 'MiniMax-M2.5', name: 'MiniMax-M2.5', tag: 'Best' },
+      { id: 'MiniMax-M2.5-highspeed', name: 'MiniMax-M2.5 Highspeed', tag: 'Fast' },
+      { id: 'MiniMax-M2.1', name: 'MiniMax-M2.1' },
+      { id: 'MiniMax-M2.1-highspeed', name: 'MiniMax-M2.1 Highspeed', tag: 'Fast' },
+      { id: 'MiniMax-M2', name: 'MiniMax-M2' }
+    ]
+  },
+  {
+    id: 'openai-compatible',
+    name: 'OpenAI-compatible',
+    keyPlaceholder: 'API key',
+    keyURL: '',
+    defaultModel: '',
+    models: [],
+    supportsCustomBaseURL: true,
+    supportsCustomModel: true
+  },
+  {
+    id: 'anthropic-compatible',
+    name: 'Anthropic-compatible',
+    keyPlaceholder: 'API key',
+    keyURL: '',
+    defaultModel: '',
+    models: [],
+    supportsCustomBaseURL: true,
+    supportsCustomModel: true
+  }
+]
+
+export const DEFAULT_AI_PROVIDER: AIProviderID = 'openrouter'
+export const DEFAULT_AI_MODEL = AI_PROVIDERS[0].defaultModel
+
+export const AUTOMATION_HTTP_PORT = 7600
+export const AUTOMATION_WS_PORT = 7601
+
+export const GOOGLE_FONTS_API_KEY: string =
+  import.meta.env?.VITE_GOOGLE_FONTS_API_KEY ?? ''
+
+export const CJK_FALLBACK_FAMILIES_MACOS = [
+  'PingFang SC',
+  'Hiragino Sans',
+  'Apple SD Gothic Neo',
+  'Heiti SC'
+]
+
+export const CJK_FALLBACK_FAMILIES_WINDOWS = [
+  'Microsoft YaHei',
+  'Microsoft JhengHei',
+  'Yu Gothic',
+  'Malgun Gothic',
+  'SimHei'
+]
+
+export const CJK_FALLBACK_FAMILIES_LINUX = [
+  'Noto Sans CJK SC',
+  'Noto Sans CJK JP',
+  'Noto Sans CJK KR',
+  'WenQuanYi Micro Hei',
+  'Droid Sans Fallback'
+]
+
+export const CJK_GOOGLE_FONT = 'Noto Sans SC'

package/src/copy.ts

@@ -0,0 +1,75 @@
+/**
+ * Typed shallow-copy helpers for Fill, Stroke, Effect, and StyleRun.
+ *
+ * These replace `structuredClone` for known scene-graph array types,
+ * avoiding the ~24× overhead of the generic deep-clone algorithm.
+ * Each helper spreads the top-level object and any nested objects
+ * (color, offset, gradientStops, dashPattern, style) to ensure
+ * no shared references between source and copy.
+ */
+
+import type { Effect, Fill, GeometryPath, GradientStop, Stroke, StyleRun } from './scene-graph'
+
+// --- Individual copy functions ---
+
+export function copyFill(f: Fill): Fill {
+  const copy: Fill = { ...f, color: { ...f.color } }
+  if (f.gradientStops) copy.gradientStops = f.gradientStops.map(copyGradientStop)
+  if (f.gradientTransform) copy.gradientTransform = { ...f.gradientTransform }
+  if (f.imageTransform) copy.imageTransform = { ...f.imageTransform }
+  return copy
+}
+
+export function copyStroke(s: Stroke): Stroke {
+  const copy: Stroke = { ...s, color: { ...s.color } }
+  if (s.dashPattern) {
+    copy.dashPattern = [...s.dashPattern]
+  }
+  return copy
+}
+
+export function copyEffect(e: Effect): Effect {
+  return {
+    ...e,
+    color: { ...e.color },
+    offset: { ...e.offset },
+  }
+}
+
+export function copyStyleRun(r: StyleRun): StyleRun {
+  return {
+    ...r,
+    style: { ...r.style },
+  }
+}
+
+// --- Array copy functions ---
+
+export function copyFills(fills: Fill[]): Fill[] {
+  return fills.map(copyFill)
+}
+
+export function copyStrokes(strokes: Stroke[]): Stroke[] {
+  return strokes.map(copyStroke)
+}
+
+export function copyEffects(effects: Effect[]): Effect[] {
+  return effects.map(copyEffect)
+}
+
+export function copyStyleRuns(runs: StyleRun[]): StyleRun[] {
+  return runs.map(copyStyleRun)
+}
+
+export function copyGeometryPaths(paths: GeometryPath[]): GeometryPath[] {
+  return paths.map((p) => ({
+    windingRule: p.windingRule,
+    commandsBlob: p.commandsBlob.slice(),
+  }))
+}
+
+// --- Internal helpers ---
+
+function copyGradientStop(gs: GradientStop): GradientStop {
+  return { color: { ...gs.color }, position: gs.position }
+}

package/src/fig-export-worker.ts

@@ -0,0 +1,28 @@
+import { zipSync, type Zippable } from 'fflate'
+import { buildFigKiwi } from './kiwi-serialize'
+
+interface CompressMessage {
+  schemaDeflated: Uint8Array
+  kiwiData: Uint8Array
+  thumbnailPng: Uint8Array
+  metaJson: string
+  images: Array<{ name: string; data: Uint8Array }>
+}
+
+self.onmessage = (e: MessageEvent<CompressMessage>) => {
+  const { schemaDeflated, kiwiData, thumbnailPng, metaJson, images } = e.data
+
+  const canvasData = buildFigKiwi(schemaDeflated, kiwiData)
+
+  const zipEntries: Zippable = {
+    'canvas.fig': [canvasData, { level: 0 }],
+    'thumbnail.png': [thumbnailPng, { level: 0 }],
+    'meta.json': new TextEncoder().encode(metaJson)
+  }
+  for (const entry of images) {
+    zipEntries[entry.name] = [entry.data, { level: 0 }]
+  }
+
+  const result = zipSync(zipEntries)
+  self.postMessage(result, { transfer: [result.buffer] })
+}

package/src/fig-export.ts

@@ -0,0 +1,321 @@
+import { zipSync, deflateSync, type Zippable } from 'fflate'
+
+import { CANVAS_BG_COLOR, IS_TAURI } from './constants'
+import { sceneNodeToKiwi, fractionalPosition, buildFigKiwi, buildFontDigestMap } from './kiwi-serialize'
+import { initCodec, getCompiledSchema, getSchemaBytes } from './kiwi/codec'
+import { stringToGuid } from './kiwi/kiwi-convert'
+import { renderThumbnail } from './render-image'
+
+import type { NodeChange } from './kiwi/codec'
+import type { SkiaRenderer } from './renderer'
+import type { SceneGraph, VariableValue } from './scene-graph'
+import type { CanvasKit } from 'canvaskit-wasm'
+import type { GUID } from './types'
+
+const THUMBNAIL_1X1 = Uint8Array.from(
+  atob(
+    'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg=='
+  ),
+  (c) => c.charCodeAt(0)
+)
+
+type KiwiNodeChange = NodeChange & Record<string, unknown>
+
+function variableValueToKiwi(
+  value: VariableValue,
+  type: string
+): { value: Record<string, unknown>; dataType: string; resolvedDataType: string } {
+  if (typeof value === 'object' && 'aliasId' in value) {
+    return {
+      value: { alias: { guid: stringToGuid(value.aliasId) } },
+      dataType: 'ALIAS',
+      resolvedDataType: { COLOR: 'COLOR', BOOLEAN: 'BOOLEAN', STRING: 'STRING' }[type] ?? 'FLOAT'
+    }
+  }
+  if (type === 'COLOR' && typeof value === 'object' && 'r' in value) {
+    return {
+      value: { colorValue: { r: value.r, g: value.g, b: value.b, a: value.a } },
+      dataType: 'COLOR',
+      resolvedDataType: 'COLOR'
+    }
+  }
+  if (type === 'BOOLEAN') {
+    return { value: { boolValue: !!value }, dataType: 'BOOLEAN', resolvedDataType: 'BOOLEAN' }
+  }
+  if (type === 'STRING') {
+    return {
+      value: { textValue: typeof value === 'string' ? value : JSON.stringify(value) },
+      dataType: 'STRING',
+      resolvedDataType: 'STRING'
+    }
+  }
+  return { value: { floatValue: Number(value) }, dataType: 'FLOAT', resolvedDataType: 'FLOAT' }
+}
+
+function collectImageEntries(graph: SceneGraph): Array<{ name: string; data: Uint8Array }> {
+  const entries: Array<{ name: string; data: Uint8Array }> = []
+  for (const [hash, data] of graph.images) {
+    entries.push({ name: `images/${hash}`, data })
+  }
+  return entries
+}
+
+const THUMBNAIL_WIDTH = 400
+const THUMBNAIL_HEIGHT = 225
+
+export async function exportFigFile(
+  graph: SceneGraph,
+  ck?: CanvasKit,
+  renderer?: SkiaRenderer,
+  pageId?: string
+): Promise<Uint8Array> {
+  await initCodec()
+  const compiled = getCompiledSchema()
+  const schemaDeflated = deflateSync(getSchemaBytes())
+
+  const docGuid = { sessionID: 0, localID: 0 }
+  const localIdCounter = { value: 2 }
+
+  const nodeChanges: KiwiNodeChange[] = [
+    {
+      guid: docGuid,
+      type: 'DOCUMENT',
+      name: 'Document',
+      visible: true,
+      opacity: 1,
+      phase: 'CREATED',
+      transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 },
+      strokeWeight: 1,
+      strokeAlign: 'CENTER',
+      strokeJoin: 'MITER',
+      documentColorProfile: 'SRGB'
+    }
+  ]
+
+  const blobs: Uint8Array[] = []
+  const pages = graph.getPages(true)
+  const nodeIdToGuid = new Map<string, GUID>()
+  const fontDigestMap = await buildFontDigestMap(graph)
+  let internalCanvasGuid: GUID | null = null
+
+  for (let p = 0; p < pages.length; p++) {
+    const page = pages[p]
+    const canvasLocalID = localIdCounter.value++
+    const canvasGuid = { sessionID: 0, localID: canvasLocalID }
+
+    if (page.internalOnly) internalCanvasGuid = canvasGuid
+
+    const canvasNc: KiwiNodeChange = {
+      guid: canvasGuid,
+      parentIndex: { guid: docGuid, position: fractionalPosition(p) },
+      type: 'CANVAS',
+      name: page.name,
+      visible: true,
+      opacity: 1,
+      phase: 'CREATED',
+      transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 },
+      strokeWeight: 1,
+      strokeAlign: 'CENTER',
+      strokeJoin: 'MITER',
+      backgroundOpacity: 1,
+      backgroundColor: { ...CANVAS_BG_COLOR },
+      backgroundEnabled: true
+    }
+    if (page.internalOnly) canvasNc.internalOnly = true
+    nodeChanges.push(canvasNc)
+
+    const children = graph.getChildren(page.id)
+    for (let i = 0; i < children.length; i++) {
+      nodeChanges.push(
+        ...sceneNodeToKiwi(children[i], canvasGuid, i, localIdCounter, graph, blobs, nodeIdToGuid, fontDigestMap)
+      )
+    }
+  }
+
+  if (graph.variableCollections.size > 0) {
+    if (!internalCanvasGuid) {
+      const internalLocalID = localIdCounter.value++
+      internalCanvasGuid = { sessionID: 0, localID: internalLocalID }
+      nodeChanges.push({
+        guid: internalCanvasGuid,
+        parentIndex: { guid: docGuid, position: fractionalPosition(pages.length) },
+        type: 'CANVAS',
+        name: 'Internal Only Canvas',
+        visible: true,
+        opacity: 1,
+        phase: 'CREATED',
+        transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 },
+        strokeWeight: 1,
+        strokeAlign: 'CENTER',
+        strokeJoin: 'MITER',
+        internalOnly: true
+      })
+    }
+
+    let collIdx = 0
+    for (const [colId, col] of graph.variableCollections) {
+      const colGuid = stringToGuid(colId)
+      const colNc: KiwiNodeChange = {
+        guid: colGuid,
+        parentIndex: { guid: internalCanvasGuid, position: fractionalPosition(collIdx++) },
+        type: 'VARIABLE_SET',
+        name: col.name,
+        phase: 'CREATED',
+        strokeAlign: 'CENTER',
+        strokeJoin: 'BEVEL',
+        variableSetModes: col.modes.map((m, i) => ({
+          id: stringToGuid(m.modeId),
+          name: m.name,
+          sortPosition: fractionalPosition(i)
+        }))
+      }
+      nodeChanges.push(colNc)
+
+      let varIdx = 0
+      for (const varId of col.variableIds) {
+        const variable = graph.variables.get(varId)
+        if (!variable) continue
+
+        const varGuid = stringToGuid(varId)
+        const typeMap: Record<string, string> = { COLOR: 'COLOR', BOOLEAN: 'BOOLEAN', STRING: 'STRING' }
+        const resolvedType = typeMap[variable.type] ?? 'FLOAT'
+
+        const entries = Object.entries(variable.valuesByMode).map(([modeId, value]) => ({
+          modeID: stringToGuid(modeId),
+          variableData: variableValueToKiwi(value, variable.type)
+        }))
+
+        const varNc: KiwiNodeChange = {
+          guid: varGuid,
+          parentIndex: { guid: internalCanvasGuid, position: fractionalPosition(varIdx++) },
+          type: 'VARIABLE',
+          name: variable.name,
+          phase: 'CREATED',
+          strokeAlign: 'CENTER',
+          strokeJoin: 'BEVEL',
+          variableSetID: { guid: colGuid },
+          variableResolvedType: resolvedType,
+          variableDataValues: { entries },
+          variableScopes: ['ALL_SCOPES']
+        }
+        nodeChanges.push(varNc)
+      }
+    }
+  }
+
+  const msg: Record<string, unknown> = {
+    type: 'NODE_CHANGES',
+    sessionID: 0,
+    ackID: 0,
+    nodeChanges
+  }
+
+  if (blobs.length > 0) {
+    msg.blobs = blobs.map((bytes) => ({ bytes }))
+  }
+
+  const kiwiData = compiled.encodeMessage(msg)
+
+  const currentPageId = pageId ?? pages[0]?.id
+  const thumbnailPng =
+    (ck && renderer && currentPageId
+      ? renderThumbnail(ck, renderer, graph, currentPageId, THUMBNAIL_WIDTH, THUMBNAIL_HEIGHT)
+      : null) ?? THUMBNAIL_1X1
+
+  const metaJson = JSON.stringify({
+    version: 1,
+    app: 'Lutris',
+    createdAt: new Date().toISOString()
+  })
+
+  const imageEntries = collectImageEntries(graph)
+
+  if (IS_TAURI) {
+    const { invoke } = await import('@tauri-apps/api/core')
+    return new Uint8Array(
+      await invoke<number[]>('build_fig_file', {
+        schemaDeflated: Array.from(schemaDeflated),
+        kiwiData: Array.from(kiwiData),
+        thumbnailPng: Array.from(thumbnailPng),
+        metaJson,
+        images: imageEntries.map(e => ({ name: e.name, data: Array.from(e.data) }))
+      })
+    )
+  }
+
+  return compressFigData(schemaDeflated, kiwiData, thumbnailPng, metaJson, imageEntries)
+}
+
+export function compressFigDataSync(
+  schemaDeflated: Uint8Array,
+  kiwiData: Uint8Array,
+  thumbnailPng: Uint8Array,
+  metaJson: string,
+  imageEntries: Array<{ name: string; data: Uint8Array }>
+): Uint8Array {
+  const canvasData = buildFigKiwi(schemaDeflated, kiwiData)
+  const zipEntries: Zippable = {
+    'canvas.fig': [canvasData, { level: 0 }],
+    'thumbnail.png': [thumbnailPng, { level: 0 }],
+    'meta.json': new TextEncoder().encode(metaJson)
+  }
+  for (const entry of imageEntries) {
+    zipEntries[entry.name] = [entry.data, { level: 0 }]
+  }
+  return zipSync(zipEntries)
+}
+
+function canUseWorker(): boolean {
+  return typeof Worker !== 'undefined' && typeof window !== 'undefined'
+}
+
+function compressViaWorker(
+  schemaDeflated: Uint8Array,
+  kiwiData: Uint8Array,
+  thumbnailPng: Uint8Array,
+  metaJson: string,
+  imageEntries: Array<{ name: string; data: Uint8Array }>
+): Promise<Uint8Array> {
+  return new Promise((resolve, reject) => {
+    const worker = new Worker(new URL('./fig-export-worker.ts', import.meta.url), { type: 'module' })
+
+    worker.onmessage = (e: MessageEvent<Uint8Array>) => {
+      resolve(e.data)
+      worker.terminate()
+    }
+    worker.onerror = (err) => {
+      reject(new Error(err.message))
+      worker.terminate()
+    }
+
+    const imgCopies = imageEntries.map((e) => ({
+      name: e.name,
+      data: new Uint8Array(e.data)
+    }))
+
+    const transferables = [
+      schemaDeflated.buffer,
+      kiwiData.buffer,
+      thumbnailPng.buffer,
+      ...imgCopies.map((e) => e.data.buffer)
+    ]
+
+    worker.postMessage(
+      { schemaDeflated, kiwiData, thumbnailPng, metaJson, images: imgCopies },
+      transferables
+    )
+  })
+}
+
+export function compressFigData(
+  schemaDeflated: Uint8Array,
+  kiwiData: Uint8Array,
+  thumbnailPng: Uint8Array,
+  metaJson: string,
+  imageEntries: Array<{ name: string; data: Uint8Array }>
+): Promise<Uint8Array> {
+  if (canUseWorker()) {
+    return compressViaWorker(schemaDeflated, kiwiData, thumbnailPng, metaJson, imageEntries)
+  }
+  return Promise.resolve(compressFigDataSync(schemaDeflated, kiwiData, thumbnailPng, metaJson, imageEntries))
+}