Two fixes for component instances with multi-level nesting:
1. getComponentRoot now falls back to kiwi symbolData when graph
nodes are deleted (internal page cleanup). Resolves the component
chain via symbolData.symbolID so findNodeByComponentId can match
clones whose componentId points to a deleted source node.
2. propagateOverridesTransitively skips nodes that were directly
targeted by applySymbolOverrides. Previously the sync would
overwrite override values (e.g. text 'Health' → 'Badge') with
the source component's defaults.
Use fillGeometry/strokeGeometry blobs from .fig files for pixel-perfect
vector rendering. These pre-computed outlines account for stroke alignment,
caps, joins, and miter limits — eliminating white gaps between adjacent
stroked shapes.
For clipboard paste (where geometry blobs are unavailable), convert
vectorNetwork paths to filled stroke outlines via CanvasKit path.stroke().
Apply derivedSymbolData transforms, sizes, and geometry during import
so instance children render at the correct scale and position. When
derivedSymbolData provides size but no geometry, scale inherited blobs
proportionally.
Three issues fixed:
1. componentPropAssignments inside symbolOverrides are scoped to the
nested instance their guidPath resolves to, not the top-level
instance. Resolve guidPath first, then apply to that subtree.
2. Instance swap values can use guidValue (GUID object) in addition
to textValue (string). Handle both formats.
3. Transitive clone sync was running BEFORE component properties,
causing repopulateInstance to wipe children that had just received
visibility assignments. Reorder: symbolOverrides → transitive sync
→ componentProperties → derivedSymbolData.
Also extracted propagateOverridesTransitively into its own function
and guarded against propagating undefined values that would overwrite
explicitly-set properties.
Figma pre-computes child dimensions for each combination of
component property values and stores them in derivedSymbolData.
Apply these size overrides using the same guidPath resolution
as symbolOverrides so containers shrink correctly when boolean
properties hide children.
Evaluate componentPropAssignments from instances against
componentPropRefs on cloned children. Handles VISIBLE (boolean
toggle) and OVERRIDDEN_SYMBOL_ID (instance swap) property fields.
Walks componentId chain to find propRefs on source nodes.
When an override targets an instance node directly (not a descendant),
the node's componentId matches the remapped target. Check the current
node itself before searching descendants. Also prefer exact componentId
match over root-chain match for more precise resolution.
Extract populateAndApplyOverrides() into instance-overrides.ts shared
by fig-import.ts and clipboard.ts. The clipboard path previously only
handled single-level guid paths and missed nested overrides, instance
swaps, and transitive propagation.
Bun picks the "node" condition pointing to dist/index.js which doesn't
exist in CI or fresh checkouts. Explicit "bun" condition ensures Bun
always resolves to source files.
- Resolve symbolOverride guidPaths by overrideKey instead of guid
- Handle overriddenSymbolID for instance component swaps
- Propagate overrides transitively through the componentId clone chain
- Preserve internalOnly flag on canvas nodes during export
- Scope computeAllLayouts to current page for paste/undo/font-load
Profiler modules in packages/core/src/profiler/:
- FrameStats: rolling 120-frame buffer tracking FPS, CPU/GPU times, node counts
- GpuTimer: EXT_disjoint_timer_query_webgl2 wrapper for GPU-side timing
- DrawCallCounter: WebGL context proxy counting draw calls per frame
- PhaseTimer: Chrome DevTools Performance panel custom tracks via User Timing API
- HudRenderer: in-canvas overlay with stats text and frame time bar graph
- CaptureStack: per-node profiling with speedscope JSON export
- RenderProfiler: orchestrates all layers with zero cost when disabled
Integration:
- SkiaRenderer.render() instrumented with phase markers for scene, picture
recording/replay, section titles, component labels, selection, rulers, flush
- Node counting and viewport culling tracking in renderNode()
- WebGL2 context passed through for GPU timer and draw call counter
- Shift+P keyboard shortcut to toggle HUD overlay
- toggleProfiler() added to editor store
Figma .fig files store instance overrides (text, fills, visibility,
layout props, corner radii, etc.) in symbolData.symbolOverrides on
each INSTANCE node. Each override targets a descendant via guidPath
(chain of original Figma GUIDs).
Implementation:
- convertOverrideToProps() in kiwi-convert.ts maps raw kiwi override
fields to SceneNode properties (reuses existing conversion helpers)
- resolveOverrideTarget() walks the cloned instance tree to find the
target node by following componentId chains
- getComponentRoot() traverses componentId references to handle
multi-level cloning (instance of instance of component)
- 49K+ overrides applied across 8.8K instances in Preline UI file
Instance population can create scene graph children that don't
have corresponding Yoga nodes (e.g. when the Yoga tree was built
before cloned children were fully resolved). Skip null yogaChild
instead of crashing.
During .fig import, instance nodes have no children — Figma expects
them to be cloned from their component. The componentId references
used original Figma GUIDs that didn't match our generated node IDs.
Fix:
- Track original GUID → new node ID mapping during import
- Remap all instance componentId references after node creation
- Iteratively populate empty instances from their components
(multiple passes needed since cloning creates new instances)
- Add destroyed flag to SkiaRenderer.destroy() to prevent double-free
- Check destroyed flag in renderNow() to skip rendering after unmount
(loadFonts promise could resolve after component unmounts)
localeCompare is locale-dependent and produces different orderings
across runtimes (Bun vs browser, Safari vs Chrome). Figma's
fractional indexing uses base-95 ASCII which sorts correctly by
code point.
- Extract font key collection from editor store into
collectFontKeys() in packages/core/src/fonts.ts
- 18 tests: styleToWeight, weightToStyle, markFontLoaded/isFontLoaded,
collectFontKeys (nested nodes, style runs, deduplication, default
font filtering, invalid IDs)
Fetch TTF files from Google Fonts when local and bundled fonts
are unavailable. Uses the Webfonts API for direct TTF URLs per
variant. Font file listings are cached per family; failed lookups
are recorded to avoid retries.
Figma distributes leading equally above and below text. CanvasKit
defaults to ascent-biased leading. halfLeading: true fixes this but
must only apply to rendering (drawParagraph), not measureTextNode —
otherwise measured sizes change and break grid layouts.
btoa() only handles Latin-1. Use TextEncoder + binaryToBase64 for
encoding and TextDecoder + base64ToBinary for decoding the internal
OpenPencil clipboard format.
Figma's lineHeight with units=PERCENT stores e.g. 100 meaning 100%
of fontSize. We stored the raw value (100) which the renderer
interpreted as 100px, producing ~6x line height. Now properly
converts: PERCENT → value/100 * fontSize, PIXELS → value as-is.
Tauri's loadFont registered fonts with the CanvasKit provider but
not in core's loadedFamilies cache, so isFontLoaded returned false
and measureTextNode returned null during layout recomputation.
Add markFontLoaded() to core and call it from Tauri font loader.
Add tests verifying text measurement integrates with auto-layout
centering.
Text nodes with textAutoResize=WIDTH_AND_HEIGHT now use an estimated
content width instead of the node's current width when computing
auto-layout. Fixes month headers (and similar centered text in
auto-layout) appearing left-aligned after paste.
Replace all 'Inter' string literals with DEFAULT_FONT_FAMILY from
constants. Add loadFontsForNodes() that collects font families from
text nodes and loads them into CanvasKit, called after clipboard
paste and .fig file import.
Figma's parentIndex.position strings represent z-order, not visual
layout order. In auto-layout frames, children must be sorted by their
x (horizontal) or y (vertical) coordinate to match the visual order.
Fixes scrambled calendar dates and other auto-layout child ordering.
Each instance in Figma's clipboard carries symbolData.symbolOverrides
with per-child property changes (text, fills, visibility). The override
targets a child via guidPath which matches the overrideKey field on the
component's child node.
After cloning component children into instances, overrides are resolved
through the overrideKey→figmaId→internalId→clonedChild chain and applied
to the instance's children.
FRAME nodes with VARIANT componentPropDefs are now promoted to
COMPONENT_SET on import (both .fig files and clipboard paste).
Clipboard paste now respects the Internal Only Canvas: components
on it are used to populate instance children but are not pasted
as visible nodes, matching Figma's behavior.
When pasting from Figma, INSTANCE nodes reference their component via
symbolData.symbolID but have no children in the clipboard. If the
component was also pasted, clone its children into the instance using
the componentId mapping (cloneChildrenWithMapping).
Figma vectors use a normalized coordinate space (vectorData.normalizedSize)
that can differ from the node's actual size. The decoded path vertices and
tangents must be scaled to fit the node bounds, otherwise vectors render
at the wrong size (e.g. 16×16 path in a 12×12 node).
Extract shared kiwi→SceneNode conversion into kiwi-convert.ts, used by
both fig-import.ts (.fig file opening) and clipboard.ts (Figma paste).
The clipboard import was a simplified copy that diverged over time:
- Missing SYMBOL→COMPONENT type mapping (Figma's kiwi name for components)
- textAutoResize hardcoded to NONE instead of using clipboard value
- No gradient/image fill support, no effects, no style runs
- Missing flipX/flipY, constraints, text decorations, arc data, etc.
- Percent letter spacing not converted to pixels
Now both paths use nodeChangeToProps() with identical conversion logic.
