@llc3233149/core 0.9.0

package/dist/scene-graph.js

@@ -0,0 +1,803 @@
+import { createNanoEvents } from 'nanoevents';
+import { BLACK, DEFAULT_FONT_FAMILY, DEFAULT_STROKE_MITER_LIMIT } from './constants.js';
+import { copyEffects, copyFills, copyStrokes, copyStyleRuns } from './copy.js';
+let nextLocalID = 1;
+export function generateId() {
+    return `0:${nextLocalID++}`;
+}
+function createDefaultNode(type, overrides = {}, id) {
+    return {
+        id: id ?? generateId(),
+        type,
+        name: type.charAt(0) + type.slice(1).toLowerCase(),
+        parentId: null,
+        childIds: [],
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+        rotation: 0,
+        fills: [],
+        strokes: [],
+        effects: [],
+        opacity: 1,
+        cornerRadius: 0,
+        topLeftRadius: 0,
+        topRightRadius: 0,
+        bottomRightRadius: 0,
+        bottomLeftRadius: 0,
+        independentCorners: false,
+        cornerSmoothing: 0,
+        visible: true,
+        locked: false,
+        clipsContent: false,
+        text: '',
+        fontSize: 14,
+        fontFamily: DEFAULT_FONT_FAMILY,
+        fontWeight: 400,
+        italic: false,
+        textAlignHorizontal: 'LEFT',
+        lineHeight: null,
+        letterSpacing: 0,
+        layoutMode: 'NONE',
+        layoutWrap: 'NO_WRAP',
+        primaryAxisAlign: 'MIN',
+        counterAxisAlign: 'MIN',
+        primaryAxisSizing: 'FIXED',
+        counterAxisSizing: 'FIXED',
+        itemSpacing: 0,
+        counterAxisSpacing: 0,
+        paddingTop: 0,
+        paddingRight: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        blendMode: 'PASS_THROUGH',
+        layoutPositioning: 'AUTO',
+        layoutGrow: 0,
+        layoutAlignSelf: 'AUTO',
+        vectorNetwork: null,
+        fillGeometry: [],
+        strokeGeometry: [],
+        arcData: null,
+        textAlignVertical: 'TOP',
+        textAutoResize: 'NONE',
+        textCase: 'ORIGINAL',
+        textDecoration: 'NONE',
+        maxLines: null,
+        styleRuns: [],
+        horizontalConstraint: 'MIN',
+        verticalConstraint: 'MIN',
+        strokeCap: 'NONE',
+        strokeJoin: 'MITER',
+        dashPattern: [],
+        borderTopWeight: 0,
+        borderRightWeight: 0,
+        borderBottomWeight: 0,
+        borderLeftWeight: 0,
+        independentStrokeWeights: false,
+        strokeMiterLimit: DEFAULT_STROKE_MITER_LIMIT,
+        minWidth: null,
+        maxWidth: null,
+        minHeight: null,
+        maxHeight: null,
+        isMask: false,
+        maskType: 'ALPHA',
+        gridTemplateColumns: [],
+        gridTemplateRows: [],
+        gridColumnGap: 0,
+        gridRowGap: 0,
+        gridPosition: null,
+        counterAxisAlignContent: 'AUTO',
+        itemReverseZIndex: false,
+        strokesIncludedInLayout: false,
+        expanded: true,
+        textTruncation: 'DISABLED',
+        autoRename: true,
+        pointCount: 5,
+        starInnerRadius: 0.38,
+        componentId: null,
+        overrides: {},
+        boundVariables: {},
+        internalOnly: false,
+        flipX: false,
+        flipY: false,
+        textPicture: null,
+        ...overrides
+    };
+}
+const CONTAINER_TYPES = new Set([
+    'CANVAS',
+    'FRAME',
+    'GROUP',
+    'SECTION',
+    'COMPONENT',
+    'COMPONENT_SET',
+    'INSTANCE'
+]);
+export class SceneGraph {
+    nodes = new Map();
+    images = new Map();
+    variables = new Map();
+    variableCollections = new Map();
+    activeMode = new Map();
+    rootId;
+    emitter = createNanoEvents();
+    absPosCache = new Map();
+    instanceIndex = new Map();
+    nextLocalID = 1;
+    constructor() {
+        const root = createDefaultNode('FRAME', {
+            name: 'Document',
+            width: 0,
+            height: 0
+        }, this.generateId());
+        this.rootId = root.id;
+        this.nodes.set(root.id, root);
+        this.addPage('Page 1');
+    }
+    generateId() {
+        return `0:${this.nextLocalID++}`;
+    }
+    addPage(name) {
+        return this.createNode('CANVAS', this.rootId, { name, width: 0, height: 0 });
+    }
+    getPages(includeInternal = false) {
+        return this.getChildren(this.rootId).filter((n) => n.type === 'CANVAS' && (includeInternal || !n.internalOnly));
+    }
+    getAllNodes() {
+        return this.nodes.values();
+    }
+    getNode(id) {
+        return this.nodes.get(id);
+    }
+    // --- Variables ---
+    addVariable(variable) {
+        this.variables.set(variable.id, variable);
+        const collection = this.variableCollections.get(variable.collectionId);
+        if (collection && !collection.variableIds.includes(variable.id)) {
+            collection.variableIds.push(variable.id);
+        }
+    }
+    removeVariable(id) {
+        const variable = this.variables.get(id);
+        if (!variable)
+            return;
+        this.variables.delete(id);
+        const collection = this.variableCollections.get(variable.collectionId);
+        if (collection) {
+            collection.variableIds = collection.variableIds.filter((vid) => vid !== id);
+        }
+        for (const node of this.nodes.values()) {
+            for (const [field, varId] of Object.entries(node.boundVariables)) {
+                if (varId === id)
+                    delete node.boundVariables[field];
+            }
+        }
+    }
+    addCollection(collection) {
+        this.variableCollections.set(collection.id, collection);
+        if (!this.activeMode.has(collection.id)) {
+            this.activeMode.set(collection.id, collection.defaultModeId);
+        }
+    }
+    createVariable(name, type, collectionId, value) {
+        const collection = this.variableCollections.get(collectionId);
+        if (!collection)
+            throw new Error(`Collection "${collectionId}" not found`);
+        const id = this.generateId();
+        let defaultValue;
+        if (value !== undefined) {
+            defaultValue = value;
+        }
+        else if (type === 'COLOR') {
+            defaultValue = { ...BLACK };
+        }
+        else if (type === 'FLOAT') {
+            defaultValue = 0;
+        }
+        else if (type === 'BOOLEAN') {
+            defaultValue = false;
+        }
+        else {
+            defaultValue = '';
+        }
+        const valuesByMode = {};
+        for (const mode of collection.modes) {
+            valuesByMode[mode.modeId] = structuredClone(defaultValue);
+        }
+        const variable = {
+            id,
+            name,
+            type,
+            collectionId,
+            valuesByMode,
+            description: '',
+            hiddenFromPublishing: false
+        };
+        this.addVariable(variable);
+        return variable;
+    }
+    createCollection(name) {
+        const id = this.generateId();
+        const modeId = this.generateId();
+        const collection = {
+            id,
+            name,
+            modes: [{ modeId, name: 'Mode 1' }],
+            defaultModeId: modeId,
+            variableIds: []
+        };
+        this.addCollection(collection);
+        return collection;
+    }
+    removeCollection(id) {
+        const collection = this.variableCollections.get(id);
+        if (collection) {
+            for (const varId of Array.from(collection.variableIds)) {
+                this.removeVariable(varId);
+            }
+        }
+        this.variableCollections.delete(id);
+        this.activeMode.delete(id);
+    }
+    getActiveModeId(collectionId) {
+        const mode = this.activeMode.get(collectionId);
+        if (mode)
+            return mode;
+        const collection = this.variableCollections.get(collectionId);
+        return collection?.defaultModeId ?? '';
+    }
+    setActiveMode(collectionId, modeId) {
+        this.activeMode.set(collectionId, modeId);
+    }
+    resolveVariable(variableId, modeId, visited) {
+        if (visited?.has(variableId))
+            return undefined;
+        const variable = this.variables.get(variableId);
+        if (!variable)
+            return undefined;
+        const resolvedModeId = modeId ?? this.getActiveModeId(variable.collectionId);
+        const value = variable.valuesByMode[resolvedModeId];
+        if (typeof value === 'object' && 'aliasId' in value) {
+            const seen = visited ?? new Set();
+            seen.add(variableId);
+            return this.resolveVariable(value.aliasId, undefined, seen);
+        }
+        return value;
+    }
+    resolveColorVariable(variableId) {
+        const value = this.resolveVariable(variableId);
+        if (value && typeof value === 'object' && 'r' in value)
+            return value;
+        return undefined;
+    }
+    resolveNumberVariable(variableId) {
+        const value = this.resolveVariable(variableId);
+        return typeof value === 'number' ? value : undefined;
+    }
+    getVariablesForCollection(collectionId) {
+        const collection = this.variableCollections.get(collectionId);
+        if (!collection)
+            return [];
+        return collection.variableIds
+            .map((id) => this.variables.get(id))
+            .filter((v) => v !== undefined);
+    }
+    getVariablesByType(type) {
+        return [...this.variables.values()].filter((v) => v.type === type);
+    }
+    bindVariable(nodeId, field, variableId) {
+        const node = this.nodes.get(nodeId);
+        if (node)
+            node.boundVariables[field] = variableId;
+    }
+    unbindVariable(nodeId, field) {
+        const node = this.nodes.get(nodeId);
+        if (node)
+            delete node.boundVariables[field];
+    }
+    getChildren(id) {
+        const node = this.nodes.get(id);
+        if (!node)
+            return [];
+        return node.childIds
+            .map((cid) => this.nodes.get(cid))
+            .filter((n) => n !== undefined);
+    }
+    isContainer(id) {
+        const node = this.nodes.get(id);
+        return node ? CONTAINER_TYPES.has(node.type) : false;
+    }
+    isDescendant(childId, ancestorId) {
+        let current = this.nodes.get(childId);
+        while (current) {
+            if (current.id === ancestorId)
+                return true;
+            current = current.parentId ? this.nodes.get(current.parentId) : undefined;
+        }
+        return false;
+    }
+    clearAbsPosCache() {
+        this.absPosCache.clear();
+    }
+    getAbsolutePosition(id) {
+        const cached = this.absPosCache.get(id);
+        if (cached)
+            return cached;
+        let ax = 0;
+        let ay = 0;
+        let current = this.nodes.get(id);
+        while (current && current.id !== this.rootId && current.type !== 'CANVAS') {
+            ax += current.x;
+            ay += current.y;
+            current = current.parentId ? this.nodes.get(current.parentId) : undefined;
+        }
+        const result = { x: ax, y: ay };
+        this.absPosCache.set(id, result);
+        return result;
+    }
+    getAbsoluteBounds(id) {
+        const pos = this.getAbsolutePosition(id);
+        const node = this.nodes.get(id);
+        return {
+            x: pos.x,
+            y: pos.y,
+            width: node?.width ?? 0,
+            height: node?.height ?? 0
+        };
+    }
+    createNode(type, parentId, overrides = {}) {
+        // Figma API compat: map `characters` → `text`
+        if ('characters' in overrides && overrides.characters != null && !('text' in overrides)) {
+            overrides.text = overrides.characters;
+        }
+        const node = createDefaultNode(type, overrides, this.generateId());
+        node.parentId = parentId;
+        this.nodes.set(node.id, node);
+        const parent = this.nodes.get(parentId);
+        if (parent) {
+            parent.childIds.push(node.id);
+        }
+        if (node.type === 'INSTANCE' && node.componentId) {
+            let set = this.instanceIndex.get(node.componentId);
+            if (!set) {
+                set = new Set();
+                this.instanceIndex.set(node.componentId, set);
+            }
+            set.add(node.id);
+        }
+        this.emitter.emit('node:created', node);
+        return node;
+    }
+    static POS_AFFECTING_PROPS = new Set([
+        'x', 'y', 'width', 'height', 'rotation', 'parentId',
+        'layoutMode', 'layoutAlign', 'layoutGrow',
+        'primaryAxisSizingMode', 'counterAxisSizingMode',
+    ]);
+    updateNode(id, changes) {
+        const node = this.nodes.get(id);
+        if (!node)
+            return;
+        for (const key of Object.keys(changes)) {
+            if (SceneGraph.POS_AFFECTING_PROPS.has(key)) {
+                this.absPosCache.clear();
+                break;
+            }
+        }
+        if (node.type === 'INSTANCE' && 'componentId' in changes && changes.componentId !== node.componentId) {
+            if (node.componentId)
+                this.instanceIndex.get(node.componentId)?.delete(id);
+            if (changes.componentId) {
+                let set = this.instanceIndex.get(changes.componentId);
+                if (!set) {
+                    set = new Set();
+                    this.instanceIndex.set(changes.componentId, set);
+                }
+                set.add(id);
+            }
+        }
+        Object.assign(node, changes);
+        this.emitter.emit('node:updated', id, changes);
+    }
+    reparentNode(nodeId, newParentId) {
+        const node = this.nodes.get(nodeId);
+        if (!node || nodeId === this.rootId)
+            return;
+        if (this.isDescendant(newParentId, nodeId))
+            return;
+        const oldParent = node.parentId ? this.nodes.get(node.parentId) : undefined;
+        const newParent = this.nodes.get(newParentId);
+        if (!newParent)
+            return;
+        if (node.parentId === newParentId)
+            return;
+        const oldParentId = node.parentId;
+        this.absPosCache.clear();
+        // Convert absolute position
+        const absPos = this.getAbsolutePosition(nodeId);
+        const newParentNode = this.nodes.get(newParentId);
+        const newParentAbs = newParentId === this.rootId || newParentNode?.type === 'CANVAS'
+            ? { x: 0, y: 0 }
+            : this.getAbsolutePosition(newParentId);
+        // Remove from old parent
+        if (oldParent) {
+            oldParent.childIds = oldParent.childIds.filter((cid) => cid !== nodeId);
+        }
+        // Add to new parent
+        node.parentId = newParentId;
+        newParent.childIds.push(nodeId);
+        // Adjust position so node stays in same visual place
+        node.x = absPos.x - newParentAbs.x;
+        node.y = absPos.y - newParentAbs.y;
+        this.emitter.emit('node:reparented', nodeId, oldParentId, newParentId);
+    }
+    reorderChild(nodeId, parentId, insertIndex) {
+        const node = this.nodes.get(nodeId);
+        if (!node)
+            return;
+        const oldParent = node.parentId ? this.nodes.get(node.parentId) : undefined;
+        const newParent = this.nodes.get(parentId);
+        if (!newParent)
+            return;
+        // Capture original index before removal for same-parent off-by-one correction
+        const oldIndex = oldParent === newParent ? oldParent.childIds.indexOf(nodeId) : -1;
+        // Remove from old parent
+        if (oldParent) {
+            oldParent.childIds = oldParent.childIds.filter((cid) => cid !== nodeId);
+        }
+        // If same parent and target is after the removed position, adjust down by 1
+        let idx = insertIndex;
+        if (oldParent === newParent && oldIndex !== -1 && idx > oldIndex) {
+            idx--;
+        }
+        node.parentId = parentId;
+        idx = Math.min(idx, newParent.childIds.length);
+        newParent.childIds.splice(idx, 0, nodeId);
+        this.emitter.emit('node:reordered', nodeId, parentId, idx);
+    }
+    deleteNode(id) {
+        const node = this.nodes.get(id);
+        if (!node || id === this.rootId)
+            return;
+        if (node.parentId) {
+            const parent = this.nodes.get(node.parentId);
+            if (parent) {
+                parent.childIds = parent.childIds.filter((cid) => cid !== id);
+            }
+        }
+        for (const childId of Array.from(node.childIds)) {
+            this.deleteNode(childId);
+        }
+        if (node.type === 'INSTANCE' && node.componentId) {
+            this.instanceIndex.get(node.componentId)?.delete(id);
+        }
+        this.nodes.delete(id);
+        this.emitter.emit('node:deleted', id);
+    }
+    hitTest(px, py, scopeId) {
+        const scope = scopeId ?? this.rootId;
+        return this.hitTestChildren(px, py, scope, 0, 0, false);
+    }
+    hitTestDeep(px, py, scopeId) {
+        const scope = scopeId ?? this.rootId;
+        return this.hitTestChildren(px, py, scope, 0, 0, true);
+    }
+    static OPAQUE_CONTAINER_TYPES = new Set(['COMPONENT', 'INSTANCE']);
+    static hasVisibleFillOrStroke(node) {
+        return (node.fills.some((f) => f.visible) ||
+            node.strokes.some((s) => s.visible));
+    }
+    static containsPoint(px, py, ax, ay, node) {
+        return px >= ax && px <= ax + node.width && py >= ay && py <= ay + node.height;
+    }
+    hitTestOpaqueContainer(px, py, child, childId, ax, ay, deep) {
+        if (!SceneGraph.containsPoint(px, py, ax, ay, child))
+            return null;
+        const childHit = this.hitTestChildren(px, py, childId, ax, ay, deep);
+        if (childHit)
+            return child;
+        if (SceneGraph.hasVisibleFillOrStroke(child))
+            return child;
+        return null;
+    }
+    hitTestTransparentContainer(px, py, child, childId, ax, ay, deep) {
+        const deepHit = this.hitTestChildren(px, py, childId, ax, ay, deep);
+        if (deepHit)
+            return deepHit;
+        if (child.type === 'GROUP')
+            return null;
+        if (SceneGraph.containsPoint(px, py, ax, ay, child) && SceneGraph.hasVisibleFillOrStroke(child))
+            return child;
+        return null;
+    }
+    hitTestChildren(px, py, parentId, offsetX, offsetY, deep = false) {
+        const parent = this.nodes.get(parentId);
+        if (!parent)
+            return null;
+        if (parent.clipsContent) {
+            if (!SceneGraph.containsPoint(px, py, offsetX, offsetY, parent))
+                return null;
+        }
+        for (let i = parent.childIds.length - 1; i >= 0; i--) {
+            const childId = parent.childIds[i];
+            const child = this.nodes.get(childId);
+            if (!child || !child.visible)
+                continue;
+            const ax = offsetX + child.x;
+            const ay = offsetY + child.y;
+            if (CONTAINER_TYPES.has(child.type)) {
+                if (SceneGraph.OPAQUE_CONTAINER_TYPES.has(child.type) && !deep) {
+                    const hit = this.hitTestOpaqueContainer(px, py, child, childId, ax, ay, deep);
+                    if (hit)
+                        return hit;
+                    continue;
+                }
+                const hit = this.hitTestTransparentContainer(px, py, child, childId, ax, ay, deep);
+                if (hit)
+                    return hit;
+                continue;
+            }
+            if (SceneGraph.containsPoint(px, py, ax, ay, child))
+                return child;
+        }
+        return null;
+    }
+    hitTestFrame(px, py, excludeIds, scopeId) {
+        return this.hitTestFrameChildren(px, py, scopeId ?? this.rootId, 0, 0, excludeIds);
+    }
+    hitTestFrameChildren(px, py, parentId, offsetX, offsetY, excludeIds) {
+        const parent = this.nodes.get(parentId);
+        if (!parent)
+            return null;
+        // Deepest matching frame wins
+        let best = null;
+        for (const childId of parent.childIds) {
+            if (excludeIds.has(childId))
+                continue;
+            const child = this.nodes.get(childId);
+            if (!child || !child.visible)
+                continue;
+            const ax = offsetX + child.x;
+            const ay = offsetY + child.y;
+            if (!CONTAINER_TYPES.has(child.type))
+                continue;
+            if (px < ax || px > ax + child.width || py < ay || py > ay + child.height)
+                continue;
+            best = child;
+            const deeper = this.hitTestFrameChildren(px, py, childId, ax, ay, excludeIds);
+            if (deeper)
+                best = deeper;
+        }
+        return best;
+    }
+    cloneTree(sourceId, parentId, overrides = {}) {
+        const src = this.nodes.get(sourceId);
+        if (!src)
+            return null;
+        const { id: _srcId, parentId: _srcParent, childIds: _srcChildren, ...rest } = src;
+        const clone = this.createNode(src.type, parentId, { ...rest, ...overrides });
+        for (const childId of src.childIds) {
+            this.cloneTree(childId, clone.id);
+        }
+        return clone;
+    }
+    static INSTANCE_SYNC_PROPS = [
+        'width',
+        'height',
+        'fills',
+        'strokes',
+        'effects',
+        'opacity',
+        'cornerRadius',
+        'topLeftRadius',
+        'topRightRadius',
+        'bottomRightRadius',
+        'bottomLeftRadius',
+        'independentCorners',
+        'layoutMode',
+        'layoutWrap',
+        'primaryAxisAlign',
+        'counterAxisAlign',
+        'primaryAxisSizing',
+        'counterAxisSizing',
+        'itemSpacing',
+        'counterAxisSpacing',
+        'paddingTop',
+        'paddingRight',
+        'paddingBottom',
+        'paddingLeft',
+        'gridTemplateColumns',
+        'gridTemplateRows',
+        'gridColumnGap',
+        'gridRowGap',
+        'gridPosition',
+        'clipsContent',
+        'independentStrokeWeights',
+        'borderTopWeight',
+        'borderRightWeight',
+        'borderBottomWeight',
+        'borderLeftWeight'
+    ];
+    static copyProp(target, source, key) {
+        const val = source[key];
+        if (key === 'fills') {
+            ;
+            target[key] = copyFills(val);
+        }
+        else if (key === 'strokes') {
+            ;
+            target[key] = copyStrokes(val);
+        }
+        else if (key === 'effects') {
+            ;
+            target[key] = copyEffects(val);
+        }
+        else if (key === 'styleRuns') {
+            ;
+            target[key] = copyStyleRuns(val);
+        }
+        else {
+            ;
+            target[key] = Array.isArray(val) ? structuredClone(val) : val;
+        }
+    }
+    createInstance(componentId, parentId, overrides = {}) {
+        const component = this.nodes.get(componentId);
+        if (component?.type !== 'COMPONENT')
+            return null;
+        const props = { name: component.name, componentId };
+        for (const key of SceneGraph.INSTANCE_SYNC_PROPS) {
+            SceneGraph.copyProp(props, component, key);
+        }
+        const instance = this.createNode('INSTANCE', parentId, { ...props, ...overrides });
+        this.cloneChildrenWithMapping(component.id, instance.id);
+        return instance;
+    }
+    populateInstanceChildren(instanceId, componentId) {
+        const instance = this.nodes.get(instanceId);
+        const component = this.nodes.get(componentId);
+        if (!instance || !component || instance.type !== 'INSTANCE')
+            return;
+        this.cloneChildrenWithMapping(componentId, instanceId);
+    }
+    cloneChildrenWithMapping(sourceParentId, destParentId) {
+        const sourceParent = this.nodes.get(sourceParentId);
+        if (!sourceParent)
+            return;
+        for (const childId of sourceParent.childIds) {
+            const src = this.nodes.get(childId);
+            if (!src)
+                continue;
+            const { id: _, parentId: _p, childIds: _c, ...rest } = src;
+            const clone = this.createNode(src.type, destParentId, {
+                ...rest,
+                componentId: childId
+            });
+            if (src.childIds.length > 0) {
+                this.cloneChildrenWithMapping(childId, clone.id);
+            }
+        }
+    }
+    syncInstances(componentId) {
+        const component = this.nodes.get(componentId);
+        if (component?.type !== 'COMPONENT')
+            return;
+        for (const instance of this.getInstances(componentId)) {
+            // Sync instance-level props (unless overridden)
+            for (const key of SceneGraph.INSTANCE_SYNC_PROPS) {
+                if (key in instance.overrides)
+                    continue;
+                SceneGraph.copyProp(instance, component, key);
+            }
+            // Sync children: match by componentId
+            this.syncChildren(component.id, instance.id, instance.overrides);
+        }
+    }
+    syncChildren(compParentId, instParentId, overrides) {
+        const compParent = this.nodes.get(compParentId);
+        const instParent = this.nodes.get(instParentId);
+        if (!compParent || !instParent)
+            return;
+        const instChildMap = new Map();
+        for (const childId of instParent.childIds) {
+            const child = this.nodes.get(childId);
+            if (child?.componentId)
+                instChildMap.set(child.componentId, child);
+        }
+        // Add new children from component that don't exist in instance
+        for (const compChildId of compParent.childIds) {
+            if (!instChildMap.has(compChildId)) {
+                const src = this.nodes.get(compChildId);
+                if (!src)
+                    continue;
+                const { id: _, parentId: _p, childIds: _c, ...rest } = src;
+                const clone = this.createNode(src.type, instParentId, {
+                    ...rest,
+                    componentId: compChildId
+                });
+                if (src.childIds.length > 0) {
+                    this.cloneChildrenWithMapping(compChildId, clone.id);
+                }
+                instChildMap.set(compChildId, clone);
+            }
+        }
+        // Sync existing children
+        for (const compChildId of compParent.childIds) {
+            const compChild = this.nodes.get(compChildId);
+            const instChild = instChildMap.get(compChildId);
+            if (!compChild || !instChild)
+                continue;
+            for (const key of SceneGraph.INSTANCE_SYNC_PROPS) {
+                const overrideKey = `${instChild.id}:${key}`;
+                if (overrideKey in overrides)
+                    continue;
+                SceneGraph.copyProp(instChild, compChild, key);
+            }
+            for (const key of ['name', 'text', 'fontSize', 'fontWeight', 'fontFamily']) {
+                const overrideKey = `${instChild.id}:${key}`;
+                if (overrideKey in overrides)
+                    continue;
+                SceneGraph.copyProp(instChild, compChild, key);
+            }
+            if (compChild.childIds.length > 0) {
+                this.syncChildren(compChildId, instChild.id, overrides);
+            }
+        }
+        // Reorder instance children to match component order
+        const compChildOrder = compParent.childIds;
+        instParent.childIds.sort((a, b) => {
+            const nodeA = this.nodes.get(a);
+            const nodeB = this.nodes.get(b);
+            const idxA = nodeA?.componentId ? compChildOrder.indexOf(nodeA.componentId) : -1;
+            const idxB = nodeB?.componentId ? compChildOrder.indexOf(nodeB.componentId) : -1;
+            return idxA - idxB;
+        });
+    }
+    detachInstance(instanceId) {
+        const node = this.nodes.get(instanceId);
+        if (node?.type !== 'INSTANCE')
+            return;
+        if (node.componentId) {
+            this.instanceIndex.get(node.componentId)?.delete(instanceId);
+        }
+        node.type = 'FRAME';
+        node.componentId = null;
+        node.overrides = {};
+    }
+    getMainComponent(instanceId) {
+        const node = this.nodes.get(instanceId);
+        if (!node?.componentId)
+            return undefined;
+        return this.nodes.get(node.componentId);
+    }
+    getInstances(componentId) {
+        const ids = this.instanceIndex.get(componentId);
+        if (!ids)
+            return [];
+        const instances = [];
+        for (const id of ids) {
+            const node = this.nodes.get(id);
+            if (node)
+                instances.push(node);
+        }
+        return instances;
+    }
+    flattenTree(parentId, depth = 0) {
+        const id = parentId ?? this.rootId;
+        const parent = this.nodes.get(id);
+        if (!parent)
+            return [];
+        const result = [];
+        for (const childId of parent.childIds) {
+            const child = this.nodes.get(childId);
+            if (!child)
+                continue;
+            result.push({ node: child, depth });
+            if (child.childIds.length > 0) {
+                result.push(...this.flattenTree(childId, depth + 1));
+            }
+        }
+        return result;
+    }
+}
+//# sourceMappingURL=scene-graph.js.map