@cyclonium/2d 0.0.100

package/lib/editor.d.ts

@@ -0,0 +1,2 @@
+export { SpriteRendererEditor } from './sprite-renderer.editor.js';
+//# sourceMappingURL=editor.d.ts.map

package/lib/editor.js

@@ -0,0 +1 @@
+export { SpriteRendererEditor } from './sprite-renderer.editor.js';

package/lib/index.d.ts

@@ -0,0 +1,7 @@
+export { MAX_ORDER_IN_LAYER, MIN_ORDER_IN_LAYER, SortableRenderer, computeLocalSortingKey, } from './sortable.js';
+export { SortSettings } from './sort-settings.js';
+export { SortingGroup } from './sorting-group.component.js';
+export { SortingLayer } from './sorting-layer.js';
+export { SpriteRenderer, SpriteRenderType } from './sprite-renderer.component.js';
+export { Sprite } from './sprite.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.js

@@ -0,0 +1,6 @@
+export { MAX_ORDER_IN_LAYER, MIN_ORDER_IN_LAYER, SortableRenderer, computeLocalSortingKey, } from './sortable.js';
+export { SortSettings } from './sort-settings.js';
+export { SortingGroup } from './sorting-group.component.js';
+export { SortingLayer } from './sorting-layer.js';
+export { SpriteRenderer, SpriteRenderType } from './sprite-renderer.component.js';
+export { Sprite } from './sprite.js';

package/lib/sort-settings.d.ts

@@ -0,0 +1,17 @@
+import { SortableRenderer } from './sortable.js';
+import type { SortingGroup } from './sorting-group.component.js';
+export declare class SortSettings {
+    get sortingLayer(): number;
+    set sortingLayer(value: number);
+    get orderInLayer(): number;
+    set orderInLayer(value: number);
+    get connected(): boolean;
+    get sortingKey(): number;
+    connect(sortableRenderer: SortableRenderer | SortingGroup): void;
+    disconnect(): void;
+    private _sortingLayer;
+    private _orderInLayer;
+    private _sortingTreeNode;
+    private _updateRenderOrder;
+}
+//# sourceMappingURL=sort-settings.d.ts.map

package/lib/sort-settings.js

@@ -0,0 +1,75 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { cycloClass, editable, idem, designType, serializable } from '@cyclonium/core/legacy-decorator';
+import { CCInteger } from 'cc';
+import { MIN_ORDER_IN_LAYER, MAX_ORDER_IN_LAYER, SortableRenderer } from './sortable.js';
+import { SortingLayer } from './sorting-layer.js';
+import { SortingTreeNode } from './sorting-tree.js';
+let SortSettings = class SortSettings {
+    get sortingLayer() {
+        return this._sortingLayer;
+    }
+    set sortingLayer(value) {
+        this._sortingLayer = value;
+        this._updateRenderOrder();
+    }
+    get orderInLayer() {
+        return this._orderInLayer;
+    }
+    set orderInLayer(value) {
+        this._orderInLayer = value;
+        this._updateRenderOrder();
+    }
+    get connected() {
+        return this._sortingTreeNode !== undefined;
+    }
+    get sortingKey() {
+        return this._sortingTreeNode?.sortingKeyStart ?? 0;
+    }
+    connect(sortableRenderer) {
+        if (this._sortingTreeNode) {
+            throw new Error('Already connected to a sorting tree node');
+        }
+        this._sortingTreeNode = SortingTreeNode.create(sortableRenderer);
+    }
+    disconnect() {
+        this._sortingTreeNode?.destroy();
+        this._sortingTreeNode = undefined;
+    }
+    _sortingLayer = 0;
+    _orderInLayer = 0;
+    _sortingTreeNode = undefined;
+    _updateRenderOrder() {
+        if (!this._sortingTreeNode) {
+            return;
+        }
+        this._sortingTreeNode.update();
+    }
+};
+__decorate([
+    editable,
+    idem,
+    designType(SortingLayer)
+], SortSettings.prototype, "sortingLayer", null);
+__decorate([
+    editable({
+        type: CCInteger,
+        min: MIN_ORDER_IN_LAYER,
+        max: MAX_ORDER_IN_LAYER,
+    }),
+    idem
+], SortSettings.prototype, "orderInLayer", null);
+__decorate([
+    serializable
+], SortSettings.prototype, "_sortingLayer", void 0);
+__decorate([
+    serializable
+], SortSettings.prototype, "_orderInLayer", void 0);
+SortSettings = __decorate([
+    cycloClass(`cyclo.SortSettings`)
+], SortSettings);
+export { SortSettings };

package/lib/sortable.d.ts

@@ -0,0 +1,16 @@
+import type { Component } from 'cc';
+import type { SortSettings } from './sort-settings.js';
+export interface SortableRenderer extends Component {
+    readonly [SortableRenderer.Tags.sortSettings]: SortSettings;
+    setSortingKey(sortingKey: number): void;
+}
+export declare namespace SortableRenderer {
+    namespace Tags {
+        const sortSettings: unique symbol;
+    }
+    function is(component: Component): component is SortableRenderer;
+}
+export declare const MIN_ORDER_IN_LAYER: number;
+export declare const MAX_ORDER_IN_LAYER: number;
+export declare function computeLocalSortingKey(sortSettings: SortSettings): number;
+//# sourceMappingURL=sortable.d.ts.map

package/lib/sortable.js

@@ -0,0 +1,19 @@
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export var SortableRenderer;
+(function (SortableRenderer) {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    let Tags;
+    (function (Tags) {
+        Tags.sortSettings = Symbol('isSortableRenderer');
+    })(Tags = SortableRenderer.Tags || (SortableRenderer.Tags = {}));
+    function is(component) {
+        return Tags.sortSettings in component;
+    }
+    SortableRenderer.is = is;
+})(SortableRenderer || (SortableRenderer = {}));
+const MAX_ORDER_IN_LAYER_POW = 16;
+export const MIN_ORDER_IN_LAYER = -(2 ** (MAX_ORDER_IN_LAYER_POW - 1));
+export const MAX_ORDER_IN_LAYER = 2 ** (MAX_ORDER_IN_LAYER_POW - 1);
+export function computeLocalSortingKey(sortSettings) {
+    return (sortSettings.sortingLayer << MAX_ORDER_IN_LAYER_POW) + (sortSettings.orderInLayer + MAX_ORDER_IN_LAYER);
+}

package/lib/sorting-group.component.d.ts

@@ -0,0 +1,10 @@
+import { CycloComponent } from '@cyclonium/core/framework';
+import { SortSettings } from './sort-settings.js';
+export declare class SortingGroup extends CycloComponent {
+    get sortSettings(): SortSettings;
+    protected onDestroy(): void;
+    protected onEnabled(): void;
+    protected onDisabled(): void;
+    private _sortSettings;
+}
+//# sourceMappingURL=sorting-group.component.d.ts.map

package/lib/sorting-group.component.js

@@ -0,0 +1,36 @@
+/// <meta "uuid"="d716c0b9-0a04-4247-b7a1-21f76bbf0e3b"/>
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { CycloComponent } from '@cyclonium/core/framework';
+import { editable, executeInEditMode, cycloClass, serializable } from '@cyclonium/core/legacy-decorator';
+import { SortSettings } from './sort-settings.js';
+let SortingGroup = class SortingGroup extends CycloComponent {
+    get sortSettings() {
+        return this._sortSettings;
+    }
+    onDestroy() {
+        this._sortSettings.disconnect();
+    }
+    onEnabled() {
+        this._sortSettings.connect(this);
+    }
+    onDisabled() {
+        this._sortSettings.disconnect();
+    }
+    _sortSettings = new SortSettings();
+};
+__decorate([
+    editable
+], SortingGroup.prototype, "sortSettings", null);
+__decorate([
+    serializable
+], SortingGroup.prototype, "_sortSettings", void 0);
+SortingGroup = __decorate([
+    cycloClass(`cyclo.SortingGroup`),
+    executeInEditMode
+], SortingGroup);
+export { SortingGroup };

package/lib/sorting-layer.d.ts

@@ -0,0 +1,4 @@
+export declare const SortingLayer: {
+    default: number;
+};
+//# sourceMappingURL=sorting-layer.d.ts.map

package/lib/sorting-layer.js

@@ -0,0 +1,2 @@
+import { SortingLayers } from 'cc';
+export const SortingLayer = SortingLayers.Enum;

package/lib/sorting-tree.d.ts

@@ -0,0 +1,38 @@
+import { SortingGroup } from './sorting-group.component.js';
+import { SortableRenderer } from './sortable.js';
+export declare class SortingTreeNode {
+    private readonly _component;
+    private readonly _treeNodeMap;
+    static create(component: SortingGroup | SortableRenderer): SortingTreeNode;
+    get sortingKeyStart(): number;
+    destroy(): void;
+    update(): void;
+    private static _sceneSortingRecordMap;
+    private static _printSortingTree;
+    private static _computeLCAs;
+    private static _computeLCA;
+    private static _computeLocalSortingKey;
+    private static _compareLocalSortingKey;
+    private static _ensureSceneSortingRecord;
+    private static _getOrCreateParent;
+    private static _getOrCreateNode;
+    private static _createComponentSortingTreeNode;
+    private static _constructSubTree;
+    private static _queueUpdate;
+    private constructor();
+    private _parent;
+    private _children;
+    private _sortingKeyStart;
+    private _sortingKeyEnd;
+    private _sortSettings;
+    private _childrenSorted;
+    private _ensureChildrenSorted;
+    private _addChildSlightly;
+    private _removeChildSlightly;
+    private _transferChildren;
+    private _updateAll;
+    private _updateChild;
+    private _updateChildRangeSlightly;
+    private _updateChildFrom;
+}
+//# sourceMappingURL=sorting-tree.d.ts.map

package/lib/sorting-tree.js

@@ -0,0 +1,417 @@
+import { Node, Scene } from 'cc';
+import { SortingGroup } from './sorting-group.component.js';
+import { assert } from '@cyclonium/core/utils';
+import { logger } from '@cyclonium/core/log';
+import { EDITOR_NOT_IN_PREVIEW } from 'cc/env';
+import { computeLocalSortingKey, SortableRenderer } from './sortable.js';
+const ENABLE_SORTING_TREE_DEBUG = false && !EDITOR_NOT_IN_PREVIEW;
+const debugLog = ENABLE_SORTING_TREE_DEBUG
+    ? (() => {
+        let indent = 0;
+        return {
+            incIndent() {
+                indent++;
+            },
+            decIndent() {
+                indent--;
+            },
+            log: (head, ...args) => {
+                const tag = '[SortingTree]';
+                if (typeof head === 'string') {
+                    logger.info(`${tag} ${'  '.repeat(indent)}${head}`, ...args);
+                }
+                else {
+                    logger.info(tag, ...args);
+                }
+            },
+        };
+    })()
+    : undefined;
+export class SortingTreeNode {
+    _component;
+    _treeNodeMap;
+    static create(component) {
+        if (ENABLE_SORTING_TREE_DEBUG) {
+            debugLog?.log(`Request creating sorting tree node: ${component.name}`);
+        }
+        const sceneSortingRecord = this._ensureSceneSortingRecord(component);
+        const sortingTreeNode = this._getOrCreateNode(sceneSortingRecord, component);
+        let nodeToUpdate;
+        const { rootTreeNode, treeChangeContext: { dirtyTreeNodes, rootNodeInvolved, }, } = sceneSortingRecord;
+        if (rootNodeInvolved) {
+            nodeToUpdate = rootTreeNode;
+        }
+        else if (dirtyTreeNodes.length === 0) {
+            nodeToUpdate = undefined;
+            if (ENABLE_SORTING_TREE_DEBUG) {
+                debugLog?.log(`No dirty tree nodes, not updating any node`);
+            }
+        }
+        else {
+            const lca = this._computeLCAs(sceneSortingRecord.rootTreeNode, dirtyTreeNodes);
+            nodeToUpdate = lca;
+        }
+        nodeToUpdate?._updateAll();
+        return sortingTreeNode;
+    }
+    get sortingKeyStart() {
+        return this._sortingKeyStart;
+    }
+    destroy() {
+        const parent = this._parent;
+        assert(parent);
+        if (this._component) {
+            this._treeNodeMap?.delete(this._component);
+        }
+        parent._removeChildSlightly(this);
+        const children = this._children;
+        this._children = [];
+        parent._transferChildren(children);
+        parent._updateAll();
+    }
+    update() {
+        this._parent?._updateChild(this);
+        if (ENABLE_SORTING_TREE_DEBUG) {
+            let root;
+            // eslint-disable-next-line @typescript-eslint/no-this-alias
+            for (let node = this;;) {
+                if (!node._parent) {
+                    root = node;
+                    break;
+                }
+                else {
+                    node = node._parent;
+                }
+            }
+            SortingTreeNode._printSortingTree?.(root);
+        }
+    }
+    static _sceneSortingRecordMap = new WeakMap();
+    static _printSortingTree = (() => {
+        if (!ENABLE_SORTING_TREE_DEBUG) {
+            return undefined;
+        }
+        return (root) => {
+            let output = '== Sorting Tree ==\n';
+            function print(node, depth = 0) {
+                const sortingRange = node._sortingKeyEnd - node._sortingKeyStart === 1
+                    ? `${node._sortingKeyStart}`
+                    : `${node._sortingKeyStart}-${node._sortingKeyEnd}`;
+                output += `${' '.repeat(depth)}[${sortingRange}]${node._component?.name ?? '<root>'}`;
+                if (node._sortSettings) {
+                    const sortSettings = node._sortSettings;
+                    output += ` (SortingLayer: ${sortSettings.sortingLayer}, OrderInLayer: ${sortSettings.orderInLayer})`;
+                }
+                output += `\n`;
+                node._children.forEach((child) => print(child, depth + 1));
+            }
+            print(root);
+            debugLog?.log(output);
+        };
+    })();
+    static _computeLCAs(root, nodes) {
+        assert(nodes.length > 0);
+        if (nodes.length === 1) {
+            return nodes[0];
+        }
+        const lca = nodes[0];
+        for (let i = 1; i < nodes.length; i++) {
+            const which = this._computeLCA(lca, nodes[i]);
+            if (!which) {
+                return root;
+            }
+        }
+        return lca;
+    }
+    static _computeLCA(a, b) {
+        // 实现很垃圾，需要优化
+        const ancestors = new Set();
+        for (let current = a; current; current = current._parent) {
+            ancestors.add(current);
+        }
+        for (let current = b; current; current = current._parent) {
+            if (ancestors.has(current)) {
+                return current;
+            }
+        }
+        return undefined;
+    }
+    static _computeLocalSortingKey(sortingNode) {
+        assert(sortingNode._sortSettings);
+        return computeLocalSortingKey(sortingNode._sortSettings);
+    }
+    static _compareLocalSortingKey(a, b) {
+        return this._computeLocalSortingKey(a) - this._computeLocalSortingKey(b);
+    }
+    static _ensureSceneSortingRecord(component) {
+        const scene = component.node.scene;
+        let sceneSortingRecord = this._sceneSortingRecordMap.get(scene);
+        if (sceneSortingRecord) {
+            sceneSortingRecord.treeChangeContext.rootNodeInvolved = false;
+            sceneSortingRecord.treeChangeContext.dirtyTreeNodes.length = 0;
+        }
+        else {
+            const treeNodeMap = new WeakMap();
+            if (ENABLE_SORTING_TREE_DEBUG) {
+                debugLog?.log(`Create(PASSIVE) sorting tree root`);
+            }
+            const rootTreeNode = new SortingTreeNode(undefined, undefined);
+            sceneSortingRecord = {
+                rootTreeNode,
+                treeNodeMap,
+                treeChangeContext: {
+                    dirtyTreeNodes: [],
+                    rootNodeInvolved: true,
+                },
+            };
+            this._sceneSortingRecordMap.set(scene, sceneSortingRecord);
+            if (ENABLE_SORTING_TREE_DEBUG) {
+                debugLog?.log(`[NOTICE] Creating subtrees from <root> top-to-bottom`);
+            }
+            debugLog?.incIndent();
+            this._constructSubTree(sceneSortingRecord, rootTreeNode, scene);
+            debugLog?.decIndent();
+            if (ENABLE_SORTING_TREE_DEBUG) {
+                Object.defineProperty(globalThis, '__printSortingTree__', {
+                    value: this._printSortingTree?.bind(this, rootTreeNode),
+                    writable: true,
+                    configurable: true,
+                });
+            }
+        }
+        return sceneSortingRecord;
+    }
+    static _getOrCreateParent(sceneSortingRecord, component) {
+        const startSceneNode = component instanceof SortingGroup ? component.node.parent : component.node;
+        for (let currentNode = startSceneNode; currentNode; currentNode = currentNode.parent) {
+            const sortingGroup = currentNode.getComponent(SortingGroup);
+            if (sortingGroup && sortingGroup.enabledInHierarchy) {
+                const sortingTreeNode = this._getOrCreateNode(sceneSortingRecord, sortingGroup);
+                return sortingTreeNode;
+            }
+        }
+        return sceneSortingRecord.rootTreeNode;
+    }
+    static _getOrCreateNode(sceneSortingRecord, component) {
+        {
+            const existingTreeNode = sceneSortingRecord.treeNodeMap.get(component);
+            if (existingTreeNode) {
+                return existingTreeNode;
+            }
+        }
+        debugLog?.incIndent();
+        const parentTreeNode = this._getOrCreateParent(sceneSortingRecord, component);
+        debugLog?.decIndent();
+        {
+            const existingTreeNode = sceneSortingRecord.treeNodeMap.get(component);
+            if (existingTreeNode) {
+                return existingTreeNode;
+            }
+        }
+        if (ENABLE_SORTING_TREE_DEBUG) {
+            debugLog?.log(`[DYNAMIC] Create sorting tree node for ${component.name}`);
+        }
+        const newSortingTreeNode = this._createComponentSortingTreeNode(sceneSortingRecord, component);
+        parentTreeNode._addChildSlightly(newSortingTreeNode);
+        SortingTreeNode._queueUpdate(sceneSortingRecord, parentTreeNode);
+        if (component instanceof SortingGroup) {
+            debugLog?.log(`[NOTICE] Creating subtrees from ${component.name} top-to-bottom`);
+            this._constructSubTree(sceneSortingRecord, newSortingTreeNode, component.node);
+        }
+        sceneSortingRecord.treeChangeContext.dirtyTreeNodes.push(parentTreeNode);
+        return newSortingTreeNode;
+    }
+    static _createComponentSortingTreeNode(sceneSortingRecord, component) {
+        const sortingTreeNode = new SortingTreeNode(component, sceneSortingRecord.treeNodeMap);
+        sceneSortingRecord.treeNodeMap.set(component, sortingTreeNode);
+        return sortingTreeNode;
+    }
+    static _constructSubTree(sceneSortingRecord, sortingNode, sceneNode) {
+        // All sortable renderers of CURRENT node are our children.
+        for (const component of sceneNode.components) {
+            if (SortableRenderer.is(component) && component.enabledInHierarchy) {
+                let childTreeNode = sceneSortingRecord.treeNodeMap.get(component);
+                if (childTreeNode) {
+                    // Add component to a node already involved in sorting tree.
+                    assert(childTreeNode._parent);
+                    childTreeNode._parent._removeChildSlightly(childTreeNode);
+                    SortingTreeNode._queueUpdate(sceneSortingRecord, childTreeNode._parent);
+                }
+                else {
+                    // Add a brand new sub tree.
+                    if (ENABLE_SORTING_TREE_DEBUG) {
+                        debugLog?.log(`Create(PASSIVE) sorting tree node for ${component.name}`);
+                    }
+                    childTreeNode = SortingTreeNode._createComponentSortingTreeNode(sceneSortingRecord, component);
+                }
+                sortingNode._addChildSlightly(childTreeNode);
+            }
+        }
+        // For child scene nodes,
+        for (const childSceneNode of sceneNode.children) {
+            // If child scene node is a sorting group, then itself is our child,
+            // but its child scene nodes are not our children.
+            const childSortingGroup = childSceneNode.getComponent(SortingGroup);
+            if (childSortingGroup && childSortingGroup.enabledInHierarchy) {
+                let childTreeNode = sceneSortingRecord.treeNodeMap.get(childSortingGroup);
+                if (childTreeNode) {
+                    // Add component to a node already involved in sorting tree.
+                    assert(childTreeNode._parent);
+                    childTreeNode._parent._removeChildSlightly(childTreeNode);
+                    SortingTreeNode._queueUpdate(sceneSortingRecord, childTreeNode._parent);
+                }
+                else {
+                    // Add a brand new sub tree.
+                    if (ENABLE_SORTING_TREE_DEBUG) {
+                        debugLog?.log(`Create(PASSIVE) sorting tree node for ${childSortingGroup.name}`);
+                    }
+                    childTreeNode = SortingTreeNode._createComponentSortingTreeNode(sceneSortingRecord, childSortingGroup);
+                    debugLog?.incIndent();
+                    this._constructSubTree(sceneSortingRecord, childTreeNode, childSceneNode);
+                    debugLog?.decIndent();
+                }
+                sortingNode._addChildSlightly(childTreeNode);
+                continue;
+            }
+            // Otherwise, the child scene node is our child.
+            this._constructSubTree(sceneSortingRecord, sortingNode, childSceneNode);
+        }
+    }
+    static _queueUpdate(sceneSortingRecord, sortingNode) {
+        const { rootTreeNode, treeChangeContext: { rootNodeInvolved, dirtyTreeNodes, }, } = sceneSortingRecord;
+        if (rootNodeInvolved) {
+            return;
+        }
+        if (sortingNode === rootTreeNode) {
+            sceneSortingRecord.treeChangeContext.rootNodeInvolved = true;
+            return;
+        }
+        dirtyTreeNodes.push(sortingNode);
+    }
+    constructor(_component, _treeNodeMap) {
+        this._component = _component;
+        this._treeNodeMap = _treeNodeMap;
+        this._sortSettings = _component instanceof SortingGroup
+            ? _component.sortSettings
+            : _component
+                ? _component[SortableRenderer.Tags.sortSettings]
+                : undefined;
+    }
+    _parent = undefined;
+    _children = [];
+    _sortingKeyStart = 0;
+    _sortingKeyEnd = 0;
+    _sortSettings = undefined;
+    _childrenSorted = true;
+    _ensureChildrenSorted() {
+        if (!this._childrenSorted) {
+            this._children.sort(SortingTreeNode._compareLocalSortingKey.bind(SortingTreeNode));
+            this._childrenSorted = true;
+        }
+    }
+    _addChildSlightly(child) {
+        if (ENABLE_SORTING_TREE_DEBUG) {
+            debugLog?.log(`${this._component?.name ?? '<root>'} ·---> ${child._component?.name ?? '<root>'}`);
+        }
+        assert(!child._parent);
+        child._parent = this;
+        this._children.push(child);
+        this._childrenSorted = false;
+    }
+    _removeChildSlightly(child) {
+        assert(child._parent === this);
+        child._parent = undefined;
+        this._children = this._children.filter((c) => c !== child);
+    }
+    _transferChildren(children) {
+        children.forEach((child) => {
+            child._parent = this;
+        });
+        this._children.push(...children);
+        this._childrenSorted = false;
+    }
+    _updateAll() {
+        // Full sort
+        this._ensureChildrenSorted();
+        this._updateChildFrom(0);
+        if (ENABLE_SORTING_TREE_DEBUG) {
+            SortingTreeNode._printSortingTree?.(this);
+        }
+    }
+    _updateChild(child) {
+        const childIndex = this._children.indexOf(child);
+        if (childIndex < 0) {
+            return;
+        }
+        const affectingChildIndex = resort(this._children, childIndex, SortingTreeNode._compareLocalSortingKey.bind(SortingTreeNode));
+        this._updateChildFrom(affectingChildIndex);
+    }
+    _updateChildRangeSlightly(startChildIndex) {
+        let sortingKey = startChildIndex === 0 ? this._sortingKeyStart : this._children[startChildIndex - 1]._sortingKeyEnd;
+        for (let iChild = startChildIndex; iChild < this._children.length; iChild++) {
+            const child = this._children[iChild];
+            child._ensureChildrenSorted();
+            child._sortingKeyStart = sortingKey;
+            if (child._component && SortableRenderer.is(child._component)) {
+                assert(child._children.length === 0);
+                child._sortingKeyEnd = sortingKey + 1;
+                child._component.setSortingKey(sortingKey);
+                sortingKey = child._sortingKeyEnd;
+            }
+            else {
+                child._updateChildRangeSlightly(0);
+                sortingKey = child._sortingKeyEnd;
+            }
+        }
+        this._sortingKeyEnd = sortingKey;
+    }
+    _updateChildFrom(startChildIndex) {
+        const oldSortingKey = this._sortingKeyEnd;
+        this._updateChildRangeSlightly(startChildIndex);
+        // Our elements keep the same sorting orders.
+        if (oldSortingKey !== this._sortingKeyEnd) {
+            // Notify parent we're changed.
+            this._parent?._updateChild(this);
+        }
+    }
+}
+/**
+ * 重新排序已经排序的数组的元素，只有 `index` 会被重新排序。
+ * 返回插入位置。
+ */
+function resort(array, index, compare) {
+    const bound = lowerBoundIgnore(array, index, compare);
+    if (bound === index) {
+        return index;
+    }
+    else if (bound < index) {
+        const element = array[index];
+        for (let i = index - 1; i >= bound; i--) {
+            array[i + 1] = array[i];
+        }
+        array[bound] = element;
+        return bound;
+    }
+    else { // bound > index
+        const element = array[index];
+        for (let i = index; i < bound; i++) {
+            array[i] = array[i + 1];
+        }
+        array[bound - 1] = element;
+        return index;
+    }
+}
+function lowerBoundIgnore(array, index, compare) {
+    const length = array.length;
+    let iFirstGreaterThan = length;
+    for (let i = 0; i < length; i++) {
+        if (i === index) {
+            continue;
+        }
+        if (compare(array[i], array[index]) > 0) {
+            iFirstGreaterThan = i;
+            break;
+        }
+    }
+    return iFirstGreaterThan;
+}

package/lib/sprite-renderer.component.d.ts

@@ -0,0 +1,63 @@
+import { CycloComponent } from '@cyclonium/core/framework';
+import { Texture2D, Material, Color, componentEditorTraits, geometry } from 'cc';
+import { Bounds2D } from '@cyclonium/core/math/bounds-2d';
+import { SortableRenderer } from './sortable.js';
+import { SortSettings } from './sort-settings.js';
+export declare enum SpriteRenderType {
+    simple = "simple"
+}
+export declare class SpriteRenderer extends CycloComponent implements SortableRenderer {
+    static prepare(): Promise<void>;
+    get renderType(): SpriteRenderType;
+    set renderType(value: SpriteRenderType);
+    get color(): Color;
+    set color(value: Color);
+    get sprite(): Texture2D | undefined;
+    set sprite(value: Texture2D | undefined);
+    debugShowNormals: boolean;
+    get sortSettings(): SortSettings;
+    get [SortableRenderer.Tags.sortSettings](): SortSettings;
+    get pixelsPerUnit(): number;
+    set pixelsPerUnit(value: number);
+    get material(): Material | null;
+    set material(value: Material | null);
+    /**
+     * The renderer's quad bounds in node-local space. The returned object should be treated as readonly.
+     * When no sprite is assigned, this returns the default placeholder quad bounds from -1..1 on both axes.
+     */
+    get localBounds(): Bounds2D;
+    setSortingKey(sortingKey: number): void;
+    [componentEditorTraits.BoundingComponent.Tags.getBoundingBox](): geometry.AABB;
+    protected onAwake(): void;
+    protected onDestroy(): void;
+    protected onEnabled(): void;
+    protected onDisabled(): void;
+    protected onUpdate(): void;
+    private _renderType;
+    private readonly _color;
+    private _sprite;
+    private _pixelsPerUnit;
+    private _material;
+    private _sortSettings;
+    private _renderRecord;
+    private _effectiveMaterial;
+    private _localBounds;
+    private _getMaterial;
+    private _initializeEffectiveMaterial;
+    private _createDefaultEffectMaterialAndSetAsEffective;
+    private _setEffectiveMaterial;
+    private _destroyRenderRecord;
+    private _constructRenderRecord;
+    private _createRenderingSubMeshes;
+    private _createRenderingSubMeshesInSimpleRenderType;
+    private _updateAllMaterialProperties;
+    private _updateMaterialColor;
+    private _updateMaterialSprite;
+    private _updateMaterialPixelsPerUnit;
+    private _updateModelBoundingShape;
+    private _updateLocalBounds;
+    private _getBoundingHalfSize;
+    private _syncRenderRecordEnabled;
+    private _shouldRenderRecordBeEnabled;
+}
+//# sourceMappingURL=sprite-renderer.component.d.ts.map

package/lib/sprite-renderer.component.js

@@ -0,0 +1,432 @@
+/// <meta "uuid"="1ca96b17-efb6-4805-961e-17c292d0840f"/>
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { CycloComponent } from '@cyclonium/core/framework';
+import { designType, editable, executeInEditMode, cycloClass, idem, serializable } from '@cyclonium/core/legacy-decorator';
+import { Texture2D, Material, Color, renderer, RenderingSubMesh, gfx, EffectAsset, Vec2, Vec3, componentEditorTraits, geometry, assetManager } from 'cc';
+import { assert, markEnum } from '@cyclonium/core/utils';
+import { logger } from '@cyclonium/core/log';
+import { Bounds2D } from '@cyclonium/core/math/bounds-2d';
+import { Sprite } from './sprite.js';
+import { SortableRenderer } from './sortable.js';
+import { SortSettings } from './sort-settings.js';
+const ENABLE_RENDERING = true;
+export var SpriteRenderType;
+(function (SpriteRenderType) {
+    SpriteRenderType["simple"] = "simple";
+})(SpriteRenderType || (SpriteRenderType = {}));
+markEnum(SpriteRenderType);
+const loadDefaultEffect = (() => {
+    let defaultEffect;
+    return () => {
+        if (defaultEffect instanceof Promise) {
+            return defaultEffect;
+        }
+        if (!defaultEffect) {
+            defaultEffect = (async () => {
+                const loadedEffect = await loadAsset('230b4535-10a9-475d-843a-05cbf87b2227');
+                defaultEffect = loadedEffect;
+                return loadedEffect;
+            })().catch((error) => {
+                logger.error('Failed to load default effect', error);
+                return undefined;
+            });
+        }
+        return defaultEffect;
+    };
+})();
+let SpriteRenderer = class SpriteRenderer extends CycloComponent {
+    static async prepare() {
+        const effect = await loadDefaultEffect();
+        if (!effect) {
+            throw new Error('Failed to load default sprite renderer effect');
+        }
+    }
+    get renderType() {
+        return this._renderType;
+    }
+    set renderType(value) {
+        this._renderType = value;
+        this._constructRenderRecord();
+    }
+    get color() {
+        return this._color;
+    }
+    set color(value) {
+        this._color.set(value);
+        if (this._effectiveMaterial) {
+            this._updateMaterialColor(this._effectiveMaterial);
+        }
+    }
+    get sprite() {
+        return this._sprite;
+    }
+    set sprite(value) {
+        this._sprite = value;
+        if (this._effectiveMaterial) {
+            this._updateMaterialSprite(this._effectiveMaterial);
+        }
+        if (this._renderRecord) {
+            this._updateModelBoundingShape(this._renderRecord.model);
+            this._syncRenderRecordEnabled();
+        }
+    }
+    debugShowNormals = false;
+    get sortSettings() {
+        return this._sortSettings;
+    }
+    get [SortableRenderer.Tags.sortSettings]() {
+        return this._sortSettings;
+    }
+    get pixelsPerUnit() {
+        return this._pixelsPerUnit;
+    }
+    set pixelsPerUnit(value) {
+        this._pixelsPerUnit = value;
+        if (this._effectiveMaterial) {
+            this._updateMaterialPixelsPerUnit(this._effectiveMaterial);
+        }
+        if (this._renderRecord) {
+            this._updateModelBoundingShape(this._renderRecord.model);
+        }
+    }
+    get material() {
+        return this._material;
+    }
+    set material(value) {
+        this._material = value;
+        if (value) {
+            this._setEffectiveMaterial(value);
+            return;
+        }
+        this._effectiveMaterial = undefined;
+        void this._initializeEffectiveMaterial();
+    }
+    /**
+     * The renderer's quad bounds in node-local space. The returned object should be treated as readonly.
+     * When no sprite is assigned, this returns the default placeholder quad bounds from -1..1 on both axes.
+     */
+    get localBounds() {
+        return this._updateLocalBounds(this._localBounds ??= new Bounds2D());
+    }
+    setSortingKey(sortingKey) {
+        if (this._renderRecord) {
+            this._renderRecord.model.priority = sortingKey;
+        }
+    }
+    [componentEditorTraits.BoundingComponent.Tags.getBoundingBox]() {
+        const localBounds = this.localBounds;
+        const bounds = geometry.AABB.fromPoints(new geometry.AABB(), vec2ToVec3(localBounds.min), vec2ToVec3(localBounds.max));
+        bounds.transform(this.node.worldMatrix, null, null, null, bounds);
+        return bounds;
+    }
+    onAwake() {
+        const material = this._getMaterial();
+        void material;
+    }
+    onDestroy() {
+        super.onDestroy();
+        this._destroyRenderRecord();
+    }
+    onEnabled() {
+        this._sortSettings.connect(this);
+        this._syncRenderRecordEnabled();
+    }
+    onDisabled() {
+        this._sortSettings.disconnect();
+        if (this._renderRecord) {
+            this._renderRecord.model.priority = 0;
+        }
+        this._syncRenderRecordEnabled();
+    }
+    onUpdate() {
+        if (!ENABLE_RENDERING) {
+            return;
+        }
+        switch (this.renderType) {
+            case SpriteRenderType.simple:
+                if (this._renderRecord) {
+                    // nothing
+                }
+                else {
+                    this._destroyRenderRecord();
+                    this._constructRenderRecord();
+                }
+                break;
+            default:
+                this._destroyRenderRecord();
+                break;
+        }
+    }
+    _renderType = SpriteRenderType.simple;
+    _color = new Color(Color.WHITE);
+    _sprite = undefined;
+    _pixelsPerUnit = 100;
+    _material = null;
+    _sortSettings = new SortSettings();
+    _renderRecord = null;
+    _effectiveMaterial;
+    _localBounds;
+    _getMaterial() {
+        if (this._effectiveMaterial) {
+            return this._effectiveMaterial;
+        }
+        return this._initializeEffectiveMaterial();
+    }
+    _initializeEffectiveMaterial() {
+        assert(!this._effectiveMaterial);
+        if (this._material) {
+            return this._setEffectiveMaterial(this._material);
+        }
+        const defaultEffect = loadDefaultEffect();
+        if (defaultEffect instanceof EffectAsset) {
+            return this._createDefaultEffectMaterialAndSetAsEffective(defaultEffect);
+        }
+        const material = new Material();
+        material.reset({
+            effectName: 'builtin-unlit',
+        });
+        void defaultEffect.then((effect) => {
+            if (!effect) {
+                return;
+            }
+            if (this._effectiveMaterial !== material) {
+                return;
+            }
+            this._createDefaultEffectMaterialAndSetAsEffective(effect);
+            material.destroy();
+        });
+        return this._setEffectiveMaterial(material);
+    }
+    _createDefaultEffectMaterialAndSetAsEffective(effect) {
+        const material = new Material();
+        material.reset({
+            effectAsset: effect,
+        });
+        return this._setEffectiveMaterial(material);
+    }
+    _setEffectiveMaterial(material) {
+        this._effectiveMaterial = material;
+        this._updateAllMaterialProperties(material);
+        const renderRecord = this._renderRecord;
+        if (renderRecord) {
+            renderRecord.model.subModels.forEach((_, subModelIndex) => {
+                renderRecord.model.setSubModelMaterial(subModelIndex, material);
+            });
+        }
+        return material;
+    }
+    _destroyRenderRecord() {
+        if (!this._renderRecord) {
+            return;
+        }
+        const { renderScene, renderingSubMeshes, model, } = this._renderRecord;
+        this._renderRecord = null;
+        renderScene.removeModel(model);
+        renderingSubMeshes.forEach((subMesh) => {
+            subMesh.destroy();
+        });
+        model.destroy();
+    }
+    _constructRenderRecord() {
+        const renderScene = this._getRenderScene();
+        const device = renderScene.root.device;
+        const renderingSubMeshes = this._createRenderingSubMeshes(device);
+        const model = new renderer.scene.Model();
+        model.node = this.node;
+        model.transform = this.node;
+        this._updateModelBoundingShape(model);
+        const material = this._getMaterial();
+        renderingSubMeshes.forEach((subMesh, iSubModel) => {
+            model.initSubModel(iSubModel, subMesh, material);
+        });
+        model.visFlags = this.node.layer;
+        model.enabled = this._shouldRenderRecordBeEnabled();
+        renderScene.addModel(model);
+        this._renderRecord = {
+            renderingSubMeshes: renderingSubMeshes,
+            model: model,
+            renderScene,
+        };
+        if (this._sortSettings.connected) {
+            model.priority = this._sortSettings.sortingKey;
+        }
+    }
+    _createRenderingSubMeshes(device) {
+        switch (this._renderType) {
+            case SpriteRenderType.simple:
+                return this._createRenderingSubMeshesInSimpleRenderType(device);
+            default:
+                throw new Error('Unsupported render type');
+        }
+    }
+    _createRenderingSubMeshesInSimpleRenderType(device) {
+        const { vertexCount, positions, normals, indices, } = simpleSpriteQuad;
+        const offsetPositionF = 0;
+        const stridePositionF = 2;
+        const offsetNormalF = offsetPositionF + stridePositionF;
+        const strideNormalF = 2;
+        const strideF = offsetNormalF + strideNormalF;
+        const localVertexBuffer = new Float32Array(vertexCount * strideF);
+        let pVerticesF = 0;
+        for (let i = 0; i < vertexCount; i++) {
+            localVertexBuffer[pVerticesF + offsetPositionF] = positions[i * 2];
+            localVertexBuffer[pVerticesF + offsetPositionF + 1] = positions[i * 2 + 1];
+            localVertexBuffer[pVerticesF + offsetNormalF] = normals[i * 2];
+            localVertexBuffer[pVerticesF + offsetNormalF + 1] = normals[i * 2 + 1];
+            pVerticesF += strideF;
+        }
+        const vertexBuffer = device.createBuffer(new gfx.BufferInfo(gfx.BufferUsageBit.VERTEX, gfx.MemoryUsageBit.DEVICE, localVertexBuffer.byteLength, Float32Array.BYTES_PER_ELEMENT * strideF, gfx.BufferFlagBit.NONE));
+        updateGfxBuffer(vertexBuffer, localVertexBuffer);
+        const indexBuffer = device.createBuffer(new gfx.BufferInfo(gfx.BufferUsageBit.INDEX, gfx.MemoryUsageBit.DEVICE, indices.byteLength, indices.BYTES_PER_ELEMENT, gfx.BufferFlagBit.NONE));
+        updateGfxBuffer(indexBuffer, indices);
+        const renderingSubMesh = new RenderingSubMesh([vertexBuffer], [
+            new gfx.Attribute(gfx.AttributeName.ATTR_POSITION, gfx.Format.RGB32F, false, undefined, false, undefined),
+            new gfx.Attribute(gfx.AttributeName.ATTR_NORMAL, gfx.Format.RG32F, false, undefined, false, undefined),
+            new gfx.Attribute(gfx.AttributeName.ATTR_TEX_COORD, gfx.Format.RG32F, false, undefined, false, undefined),
+        ], gfx.PrimitiveMode.TRIANGLE_LIST, indexBuffer, null, true);
+        return [renderingSubMesh];
+    }
+    _updateAllMaterialProperties(material) {
+        this._updateMaterialColor(material);
+        this._updateMaterialSprite(material);
+        this._updateMaterialPixelsPerUnit(material);
+    }
+    _updateMaterialColor(material) {
+        material.setProperty('mainColor', this.color);
+    }
+    _updateMaterialSprite(material) {
+        const pixelsPerUnit = this._pixelsPerUnit;
+        let mainTexture = null;
+        const spriteSize = new Vec2();
+        if (this.sprite) {
+            mainTexture = this.sprite;
+            spriteSize.set(this.sprite.width / 2, this.sprite.height / 2);
+        }
+        else {
+            mainTexture = null;
+            spriteSize.set(pixelsPerUnit, pixelsPerUnit);
+        }
+        material.setProperty('mainTexture', mainTexture);
+        material.setProperty('spriteSize', spriteSize);
+    }
+    _updateMaterialPixelsPerUnit(material) {
+        material.setProperty('pixelsPerUnit', this._pixelsPerUnit);
+    }
+    _updateModelBoundingShape(model) {
+        const localBounds = this.localBounds;
+        model.createBoundingShape(new Vec3(localBounds.xMin, localBounds.yMin, 0), new Vec3(localBounds.xMax, localBounds.yMax, 0));
+        model.updateWorldBound();
+    }
+    _updateLocalBounds(bounds) {
+        const halfSize = this._getBoundingHalfSize();
+        bounds.min.set(-halfSize.x, -halfSize.y);
+        bounds.max.set(halfSize.x, halfSize.y);
+        return bounds;
+    }
+    _getBoundingHalfSize() {
+        if (!this.sprite) {
+            return new Vec2(1, 1);
+        }
+        return new Vec2(this.sprite.width / 2 / this.pixelsPerUnit, this.sprite.height / 2 / this.pixelsPerUnit);
+    }
+    _syncRenderRecordEnabled() {
+        if (this._renderRecord) {
+            this._renderRecord.model.enabled = this._shouldRenderRecordBeEnabled();
+        }
+    }
+    _shouldRenderRecordBeEnabled() {
+        return this.enabledInHierarchy && !!this.sprite;
+    }
+};
+__decorate([
+    editable,
+    serializable,
+    designType(SpriteRenderType)
+], SpriteRenderer.prototype, "renderType", null);
+__decorate([
+    editable
+], SpriteRenderer.prototype, "color", null);
+__decorate([
+    editable(Sprite)
+], SpriteRenderer.prototype, "sprite", null);
+__decorate([
+    editable,
+    serializable
+], SpriteRenderer.prototype, "debugShowNormals", void 0);
+__decorate([
+    editable
+], SpriteRenderer.prototype, "sortSettings", null);
+__decorate([
+    editable
+], SpriteRenderer.prototype, "pixelsPerUnit", null);
+__decorate([
+    editable(Material),
+    idem
+], SpriteRenderer.prototype, "material", null);
+__decorate([
+    serializable
+], SpriteRenderer.prototype, "_renderType", void 0);
+__decorate([
+    serializable
+], SpriteRenderer.prototype, "_color", void 0);
+__decorate([
+    serializable
+], SpriteRenderer.prototype, "_sprite", void 0);
+__decorate([
+    serializable
+], SpriteRenderer.prototype, "_pixelsPerUnit", void 0);
+__decorate([
+    serializable
+], SpriteRenderer.prototype, "_material", void 0);
+__decorate([
+    serializable
+], SpriteRenderer.prototype, "_sortSettings", void 0);
+SpriteRenderer = __decorate([
+    cycloClass('cyclo.SpriteRenderer'),
+    executeInEditMode
+], SpriteRenderer);
+export { SpriteRenderer };
+const simpleSpriteQuad = (() => {
+    const positions = new Float32Array([
+        -1, -1, // left bottom
+        -1, 1, // left top
+        1, 1, // right top
+        1, -1, // right bottom
+    ]);
+    const n = Math.sqrt(2);
+    const normals = positions.map((position) => n * position);
+    const indices = new Uint16Array([
+        0, 1, 2,
+        0, 2, 3,
+    ]);
+    return {
+        vertexCount: 4,
+        positions,
+        normals,
+        indices,
+    };
+})();
+function loadAsset(uuid) {
+    return new Promise((resolve, reject) => {
+        assetManager.loadAny(uuid, (error, asset) => {
+            if (error) {
+                reject(error);
+            }
+            else {
+                resolve(asset);
+            }
+        });
+    });
+}
+function updateGfxBuffer(buffer, source) {
+    // The `gfx.BufferSource` type does not contains ArrayBufferView, whereas in actual this works as expected.
+    buffer.update(source);
+}
+function vec2ToVec3(input) {
+    return new Vec3(input.x, input.y, 0);
+}

package/lib/sprite-renderer.editor.d.ts

@@ -0,0 +1,6 @@
+import { ComponentEditor, type SceneGuiContext } from '@cyclonium/editor';
+import { SpriteRenderer } from './sprite-renderer.component.js';
+export declare class SpriteRendererEditor extends ComponentEditor<SpriteRenderer> {
+    protected onSceneGUI(ctx: SceneGuiContext): void;
+}
+//# sourceMappingURL=sprite-renderer.editor.d.ts.map

package/lib/sprite-renderer.editor.js

@@ -0,0 +1,39 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Vec2 } from '@cyclonium/core/math/vec2';
+import { ComponentEditor } from '@cyclonium/editor';
+import { Color, componentEditorTraits } from 'cc';
+import { SpriteRenderer } from './sprite-renderer.component.js';
+let SpriteRendererEditor = class SpriteRendererEditor extends ComponentEditor {
+    onSceneGUI(ctx) {
+        const bounds = this.target[componentEditorTraits.BoundingComponent.Tags.getBoundingBox]();
+        if (!bounds) {
+            return;
+        }
+        const { center, halfExtents } = bounds;
+        const outlineHalfExtents = new Vec2(halfExtents.x + lineThickness * 0.5, halfExtents.y + lineThickness * 0.5);
+        ctx.handles.color = boundingFrameColor;
+        ctx.handles.drawPolyline2D({
+            points: [
+                new Vec2(center.x - outlineHalfExtents.x, center.y - outlineHalfExtents.y),
+                new Vec2(center.x - outlineHalfExtents.x, center.y + outlineHalfExtents.y),
+                new Vec2(center.x + outlineHalfExtents.x, center.y + outlineHalfExtents.y),
+                new Vec2(center.x + outlineHalfExtents.x, center.y - outlineHalfExtents.y),
+            ],
+            close: true,
+            thickness: lineThickness,
+            z: center.z + zOffset,
+        });
+    }
+};
+SpriteRendererEditor = __decorate([
+    ComponentEditor.LegacyDecorators.attachTo(SpriteRenderer)
+], SpriteRendererEditor);
+export { SpriteRendererEditor };
+const boundingFrameColor = new Color(255, 190, 82, 255);
+const lineThickness = 0.02;
+const zOffset = 0.01;

package/lib/sprite.d.ts

@@ -0,0 +1,2 @@
+export { Texture2D as Sprite } from 'cc';
+//# sourceMappingURL=sprite.d.ts.map

package/lib/sprite.js

@@ -0,0 +1 @@
+export { Texture2D as Sprite } from 'cc';

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@cyclonium/2d",
+  "version": "0.0.100",
+  "type": "module",
+  "files": [
+    "lib/**/*{.js,.d.ts}"
+  ],
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./editor": {
+      "types": "./lib/editor.d.ts",
+      "default": "./lib/editor.js"
+    }
+  },
+  "peerDependencies": {
+    "@cyclonium/core": "0.0.100",
+    "@cyclonium/editor": "0.0.100"
+  },
+  "peerDependenciesMeta": {
+    "@cyclonium/editor": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^25.9.2",
+    "@vitest/browser-playwright": "^4.1.5",
+    "playwright": "^1.59.1",
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.5",
+    "@cyclonium/workflow": "0.0.100",
+    "@cyclonium/editor": "0.0.100",
+    "@cyclonium/cc-test": "0.0.100",
+    "@cyclonium/types-cc": "0.0.100"
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "dev": "tsc -b --watch",
+    "test": "npm run test:compile && npm run t",
+    "test:compile": "tsc -b test/tsconfig.json",
+    "t": "vitest run --browser.headless=true",
+    "test:browser:dev": "vitest"
+  }
+}