@nice2dev/ui-graphics 1.0.0

package/dist/types/game/gameAssetTypes.d.ts

@@ -0,0 +1,238 @@
+/**
+ * gameAssetTypes.ts — Types for GameAsset2dEditor
+ *
+ * Supports tile maps, sprite sheets, animations, and game asset processing.
+ */
+export type TileMapMode = '2d' | '2.5d-isometric' | '2.5d-oblique';
+export interface TileDefinition {
+    id: string;
+    name: string;
+    image: ImageData;
+    thumbnail: string;
+    width: number;
+    height: number;
+    properties: Record<string, string | number | boolean>;
+    collision?: CollisionShape;
+    animated?: boolean;
+    frames?: string[];
+    frameDuration?: number;
+}
+export interface CollisionShape {
+    type: 'none' | 'full' | 'custom';
+    polygons?: {
+        x: number;
+        y: number;
+    }[][];
+}
+export interface TileLayer {
+    id: string;
+    name: string;
+    visible: boolean;
+    locked: boolean;
+    opacity: number;
+    tiles: (string | null)[][];
+    parallaxX: number;
+    parallaxY: number;
+    offsetX: number;
+    offsetY: number;
+    zIndex: number;
+}
+export interface TileMap {
+    id: string;
+    name: string;
+    mode: TileMapMode;
+    width: number;
+    height: number;
+    tileWidth: number;
+    tileHeight: number;
+    layers: TileLayer[];
+    properties: Record<string, string | number | boolean>;
+    backgroundColor: string;
+}
+export interface SpriteFrame {
+    id: string;
+    name: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    pivotX: number;
+    pivotY: number;
+    trimmed?: boolean;
+    trimRect?: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+}
+export interface SpriteSheet {
+    id: string;
+    name: string;
+    image: HTMLImageElement | null;
+    imageData: ImageData | null;
+    dataUrl: string;
+    width: number;
+    height: number;
+    frames: SpriteFrame[];
+    animations: SpriteAnimation[];
+}
+export interface SpriteAnimation {
+    id: string;
+    name: string;
+    frameIds: string[];
+    frameDurations: number[];
+    loop: boolean;
+    pingPong: boolean;
+}
+export interface AnimationState {
+    id: string;
+    name: string;
+    animationId: string;
+    speed: number;
+    loop: boolean;
+    position: {
+        x: number;
+        y: number;
+    };
+}
+export interface AnimationTransition {
+    id: string;
+    fromStateId: string;
+    toStateId: string;
+    condition: TransitionCondition;
+    duration: number;
+    priority: number;
+}
+export interface TransitionCondition {
+    type: 'trigger' | 'bool' | 'int' | 'float' | 'any';
+    paramName: string;
+    comparison?: '==' | '!=' | '>' | '<' | '>=' | '<=';
+    value?: string | number | boolean;
+}
+export interface AnimationParameter {
+    id: string;
+    name: string;
+    type: 'trigger' | 'bool' | 'int' | 'float';
+    defaultValue: boolean | number;
+}
+export interface AnimationStateMachine {
+    id: string;
+    name: string;
+    states: AnimationState[];
+    transitions: AnimationTransition[];
+    parameters: AnimationParameter[];
+    entryStateId: string;
+    anyStateTransitions: AnimationTransition[];
+}
+export type EffectType = 'outline' | 'shadow' | 'glow' | 'palette-swap' | 'pixelate' | 'blur' | 'brightness' | 'contrast' | 'saturation' | 'hue-shift' | 'invert' | 'tint';
+export interface Effect {
+    id: string;
+    type: EffectType;
+    enabled: boolean;
+    params: Record<string, number | string>;
+}
+export interface EffectPreset {
+    id: string;
+    name: string;
+    effects: Effect[];
+}
+export interface GameAssetProject {
+    id: string;
+    name: string;
+    tileSets: TileDefinition[];
+    tileMaps: TileMap[];
+    spriteSheets: SpriteSheet[];
+    stateMachines: AnimationStateMachine[];
+    effectPresets: EffectPreset[];
+    settings: ProjectSettings;
+}
+export interface ProjectSettings {
+    defaultTileWidth: number;
+    defaultTileHeight: number;
+    pixelsPerUnit: number;
+    exportFormat: 'json' | 'yaml' | 'binary';
+    compressImages: boolean;
+}
+export type EditorMode = 'tilemap' | 'spritesheet' | 'animation' | 'effects';
+export type TileMapTool = 'select' | 'brush' | 'eraser' | 'fill' | 'rectangle' | 'ellipse' | 'line' | 'eyedropper' | 'move';
+export type SpriteSheetTool = 'select' | 'slice' | 'auto-slice' | 'merge' | 'split' | 'move' | 'resize';
+export interface EditorState {
+    mode: EditorMode;
+    tileMapTool: TileMapTool;
+    spriteSheetTool: SpriteSheetTool;
+    selectedTileId: string | null;
+    selectedFrameIds: string[];
+    selectedStateId: string | null;
+    activeLayerId: string | null;
+    activeTileMapId: string | null;
+    activeSpriteSheetId: string | null;
+    activeStateMachineId: string | null;
+    zoom: number;
+    panX: number;
+    panY: number;
+    showGrid: boolean;
+    showCollision: boolean;
+    snapToGrid: boolean;
+}
+export interface ExportOptions {
+    format: 'png' | 'json' | 'tiled-json' | 'godot' | 'unity';
+    includeImages: boolean;
+    optimizeAtlas: boolean;
+    maxAtlasSize: number;
+    padding: number;
+    powerOfTwo: boolean;
+}
+export interface TiledExport {
+    type: 'map';
+    version: string;
+    tiledversion: string;
+    width: number;
+    height: number;
+    tilewidth: number;
+    tileheight: number;
+    layers: object[];
+    tilesets: object[];
+}
+export interface UnityExport {
+    sprites: {
+        name: string;
+        rect: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        };
+        pivot: {
+            x: number;
+            y: number;
+        };
+        border: {
+            x: number;
+            y: number;
+            z: number;
+            w: number;
+        };
+    }[];
+    animations: {
+        name: string;
+        frames: {
+            sprite: string;
+            duration: number;
+        }[];
+    }[];
+}
+export interface HistoryEntry {
+    id: string;
+    description: string;
+    timestamp: number;
+    snapshot: Partial<GameAssetProject>;
+}
+export declare const TILE_MAP_TOOLS: {
+    id: TileMapTool;
+    icon: string;
+    label: string;
+    key: string;
+}[];
+export declare const EFFECT_DEFAULTS: Record<EffectType, Record<string, number | string>>;
+export declare const DEFAULT_PROJECT_SETTINGS: ProjectSettings;

package/dist/types/game/gameAssetUtils.d.ts

@@ -0,0 +1,23 @@
+/**
+ * gameAssetUtils.ts — Utilities for GameAsset2dEditor
+ */
+import type { TileDefinition, TileMap, TileLayer, SpriteFrame, SpriteAnimation, Effect, GameAssetProject, TiledExport } from './gameAssetTypes';
+export declare const generateId: (prefix?: string) => string;
+export declare const imageDataToDataUrl: (imageData: ImageData) => string;
+export declare const dataUrlToImageData: (dataUrl: string) => Promise<ImageData>;
+export declare const loadImage: (src: string) => Promise<HTMLImageElement>;
+export declare const cropImageData: (imageData: ImageData, x: number, y: number, width: number, height: number) => ImageData;
+export declare const createTileFromImage: (imageData: ImageData, name: string) => TileDefinition;
+export declare const createEmptyTileLayer: (name: string, mapWidth: number, mapHeight: number) => TileLayer;
+export declare const createEmptyTileMap: (name: string, width: number, height: number, tileWidth: number, tileHeight: number, mode?: "tilemap" | "2d" | "2.5d-isometric" | "2.5d-oblique") => TileMap;
+export declare const autoSliceSpriteSheet: (imageData: ImageData, frameWidth: number, frameHeight: number, padding?: number) => SpriteFrame[];
+export declare const detectFrames: (imageData: ImageData) => SpriteFrame[];
+export declare const createSpriteAnimation: (name: string, frameIds: string[], frameDelay?: number) => SpriteAnimation;
+export declare const applyEffect: (imageData: ImageData, effect: Effect) => ImageData;
+export declare const applyEffects: (imageData: ImageData, effects: Effect[]) => ImageData;
+export declare const exportToTiledJson: (tileMap: TileMap, tileSets: TileDefinition[]) => TiledExport;
+export declare const downloadJson: (data: object, filename: string) => void;
+export declare const downloadPng: (canvas: HTMLCanvasElement, filename: string) => void;
+export declare const createEmptyProject: (name: string) => GameAssetProject;
+export declare const serializeProject: (project: GameAssetProject) => string;
+export declare const deserializeProject: (json: string) => Promise<GameAssetProject>;

package/dist/types/game/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * game/index.ts — Public exports for GameAsset2dEditor
+ */
+export { GameAsset2dEditor, type GameAsset2dEditorProps } from './GameAsset2dEditor';
+export { useGameAssetEditor, type GameAssetEditorApi, type UseGameAssetEditorOptions } from './useGameAssetEditor';
+export type { TileMapMode, TileDefinition, CollisionShape, TileLayer, TileMap, SpriteFrame, SpriteSheet, SpriteAnimation, AnimationState, AnimationTransition, TransitionCondition, AnimationParameter, AnimationStateMachine, EffectType, Effect, EffectPreset, GameAssetProject, ProjectSettings, EditorMode, TileMapTool, SpriteSheetTool, EditorState, ExportOptions, TiledExport, UnityExport, HistoryEntry, } from './gameAssetTypes';
+export { TILE_MAP_TOOLS, EFFECT_DEFAULTS, DEFAULT_PROJECT_SETTINGS, } from './gameAssetTypes';
+export { generateId, imageDataToDataUrl, dataUrlToImageData, loadImage, cropImageData, createTileFromImage, createEmptyTileLayer, createEmptyTileMap, autoSliceSpriteSheet, detectFrames, createSpriteAnimation, applyEffect, applyEffects, exportToTiledJson, downloadJson, downloadPng, createEmptyProject, serializeProject, deserializeProject, } from './gameAssetUtils';

package/dist/types/game/isometricTiles.d.ts

@@ -0,0 +1,250 @@
+/**
+ * Isometric Tile System
+ * Support for 2.5D isometric/dimetric tile rendering and editing
+ */
+export type IsometricProjection = 'isometric' | 'dimetric' | 'trimetric' | 'military' | 'cavalier';
+export interface IsometricConfig {
+    /** Projection type */
+    projection: IsometricProjection;
+    /** Tile width in pixels */
+    tileWidth: number;
+    /** Tile height in pixels (visible portion) */
+    tileHeight: number;
+    /** Tile depth (for 3D tiles) */
+    tileDepth: number;
+    /** Angle in degrees (for custom projections) */
+    angle: number;
+    /** Scale factor */
+    scale: number;
+    /** Origin offset */
+    origin: {
+        x: number;
+        y: number;
+    };
+    /** Grid size (columns x rows) */
+    gridSize: {
+        cols: number;
+        rows: number;
+    };
+    /** Stacking layers */
+    layers: number;
+}
+export interface IsometricTile {
+    /** Unique ID */
+    id: string;
+    /** Grid position */
+    gridX: number;
+    gridY: number;
+    /** Layer (z-level) */
+    layer: number;
+    /** Tile type/sprite index */
+    tileType: number;
+    /** Rotation (0, 90, 180, 270) */
+    rotation: 0 | 90 | 180 | 270;
+    /** Flip horizontally */
+    flipX: boolean;
+    /** Flip vertically */
+    flipY: boolean;
+    /** Custom height offset */
+    heightOffset: number;
+    /** Tile metadata */
+    metadata?: Record<string, unknown>;
+}
+export interface IsometricTileset {
+    /** Tileset name */
+    name: string;
+    /** Source image path */
+    imagePath: string;
+    /** Tile definitions */
+    tiles: IsometricTileDefinition[];
+    /** Tileset dimensions */
+    imageWidth: number;
+    imageHeight: number;
+}
+export interface IsometricTileDefinition {
+    /** Tile ID */
+    id: number;
+    /** Name */
+    name: string;
+    /** Region in source image */
+    region: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    /** Tile footprint (for larger tiles) */
+    footprint: {
+        cols: number;
+        rows: number;
+    };
+    /** Height in layers */
+    height: number;
+    /** Anchor point (for positioning) */
+    anchor: {
+        x: number;
+        y: number;
+    };
+    /** Collision type */
+    collision: 'none' | 'solid' | 'half' | 'ramp-n' | 'ramp-s' | 'ramp-e' | 'ramp-w';
+    /** Tags for filtering */
+    tags: string[];
+}
+export interface IsometricMap {
+    /** Map name */
+    name: string;
+    /** Grid dimensions */
+    width: number;
+    height: number;
+    /** Number of layers */
+    layers: number;
+    /** Tile data */
+    tiles: IsometricTile[];
+    /** Tileset references */
+    tilesets: string[];
+    /** Map properties */
+    properties: Record<string, unknown>;
+}
+export interface ScreenPosition {
+    x: number;
+    y: number;
+}
+export interface GridPosition {
+    col: number;
+    row: number;
+    layer: number;
+}
+/**
+ * Get projection angles for different isometric types
+ */
+export declare function getProjectionAngles(projection: IsometricProjection): {
+    x: number;
+    y: number;
+};
+/**
+ * Convert grid coordinates to screen coordinates
+ */
+export declare function gridToScreen(gridX: number, gridY: number, layer: number, config: IsometricConfig): ScreenPosition;
+/**
+ * Convert screen coordinates to grid coordinates
+ */
+export declare function screenToGrid(screenX: number, screenY: number, layer: number, config: IsometricConfig): GridPosition;
+/**
+ * Get tile corners in screen space
+ */
+export declare function getTileCorners(gridX: number, gridY: number, layer: number, config: IsometricConfig): ScreenPosition[];
+/**
+ * Get 3D tile vertices (for cubes/blocks)
+ */
+export declare function getTile3DVertices(gridX: number, gridY: number, layer: number, height: number, config: IsometricConfig): {
+    top: ScreenPosition[];
+    left: ScreenPosition[];
+    right: ScreenPosition[];
+};
+/**
+ * Sort tiles for correct rendering order (painter's algorithm)
+ */
+export declare function sortTilesForRendering(tiles: IsometricTile[]): IsometricTile[];
+/**
+ * Get visible tiles within viewport
+ */
+export declare function getVisibleTiles(tiles: IsometricTile[], viewport: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, config: IsometricConfig): IsometricTile[];
+/**
+ * Render isometric grid to canvas
+ */
+export declare function renderIsometricGrid(ctx: CanvasRenderingContext2D, config: IsometricConfig, options?: {
+    gridColor?: string;
+    gridOpacity?: number;
+    showCoordinates?: boolean;
+}): void;
+/**
+ * Render a single isometric tile
+ */
+export declare function renderIsometricTile(ctx: CanvasRenderingContext2D, tile: IsometricTile, tileset: IsometricTileset, tileImage: HTMLImageElement, config: IsometricConfig): void;
+/**
+ * Render 3D block (cube) at position
+ */
+export declare function renderIsometricBlock(ctx: CanvasRenderingContext2D, gridX: number, gridY: number, layer: number, height: number, colors: {
+    top: string;
+    left: string;
+    right: string;
+}, config: IsometricConfig): void;
+/**
+ * Create a new isometric map
+ */
+export declare function createIsometricMap(name: string, width: number, height: number, layers?: number): IsometricMap;
+/**
+ * Add a tile to the map
+ */
+export declare function addTile(map: IsometricMap, tile: Omit<IsometricTile, 'id'>): IsometricMap;
+/**
+ * Remove a tile from the map
+ */
+export declare function removeTile(map: IsometricMap, tileId: string): IsometricMap;
+/**
+ * Get tile at position
+ */
+export declare function getTileAt(map: IsometricMap, gridX: number, gridY: number, layer: number): IsometricTile | undefined;
+/**
+ * Get all tiles at position (all layers)
+ */
+export declare function getTilesAt(map: IsometricMap, gridX: number, gridY: number): IsometricTile[];
+/**
+ * Fill a region with tiles
+ */
+export declare function fillRegion(map: IsometricMap, startX: number, startY: number, endX: number, endY: number, layer: number, tileType: number): IsometricMap;
+/**
+ * Export to Tiled TMX format (isometric)
+ */
+export declare function exportToTiledIsometric(map: IsometricMap, configOrTileset?: IsometricConfig | IsometricTileset, configArg?: IsometricConfig): string;
+/**
+ * Export to Godot isometric tilemap
+ */
+export declare function exportToGodotIsometric(map: IsometricMap, configOrTileset?: IsometricConfig | IsometricTileset, configArg?: IsometricConfig): string;
+export interface UseIsometricEditorOptions {
+    /** Initial configuration */
+    config?: Partial<IsometricConfig>;
+    /** Initial map */
+    initialMap?: IsometricMap;
+}
+export interface UseIsometricEditorReturn {
+    /** Current configuration */
+    config: IsometricConfig;
+    /** Current map */
+    map: IsometricMap;
+    /** Update configuration */
+    setConfig: (config: Partial<IsometricConfig>) => void;
+    /** Set selected tile type */
+    setSelectedTile: (tileType: number) => void;
+    /** Selected tile type */
+    selectedTile: number;
+    /** Current layer */
+    currentLayer: number;
+    /** Set current layer */
+    setCurrentLayer: (layer: number) => void;
+    /** Place tile at grid position */
+    placeTile: (gridX: number, gridY: number) => void;
+    /** Remove tile at grid position */
+    eraseTile: (gridX: number, gridY: number) => void;
+    /** Fill region */
+    fill: (startX: number, startY: number, endX: number, endY: number) => void;
+    /** Convert screen to grid */
+    screenToGrid: (screenX: number, screenY: number) => GridPosition;
+    /** Undo last action */
+    undo: () => void;
+    /** Redo last undone action */
+    redo: () => void;
+    /** Can undo */
+    canUndo: boolean;
+    /** Can redo */
+    canRedo: boolean;
+    /** Clear map */
+    clear: () => void;
+}
+export declare function useIsometricEditor(options?: UseIsometricEditorOptions): UseIsometricEditorReturn;
+export default useIsometricEditor;

package/dist/types/game/useAnimationPreview.d.ts

@@ -0,0 +1,63 @@
+/**
+ * useAnimationPreview — Hook for animation playback in GameAsset2dEditor
+ *
+ * Features:
+ * - Real-time frame playback with configurable speed
+ * - State machine simulation with parameter control
+ * - Transition blending preview
+ * - Play/pause/stop/step controls
+ * - Loop and ping-pong modes
+ * - Timeline scrubbing
+ */
+import type { SpriteFrame, SpriteSheet, AnimationStateMachine } from './gameAssetTypes';
+export interface AnimationPreviewState {
+    isPlaying: boolean;
+    currentFrameIndex: number;
+    elapsedTime: number;
+    playbackSpeed: number;
+    currentAnimationId: string | null;
+    animationType: 'single' | 'stateMachine';
+    currentStateId: string | null;
+    targetStateId: string | null;
+    transitionProgress: number;
+    isTransitioning: boolean;
+    parameterValues: Map<string, boolean | number>;
+    currentFrame: SpriteFrame | null;
+    frameImageData: ImageData | null;
+    onionSkinEnabled: boolean;
+    onionSkinFrames: number;
+    onionSkinOpacity: number;
+}
+export interface AnimationPreviewOptions {
+    spriteSheets: SpriteSheet[];
+    stateMachines: AnimationStateMachine[];
+    onFrameChange?: (frameIndex: number) => void;
+    onStateChange?: (stateId: string) => void;
+    onTransitionStart?: (fromId: string, toId: string) => void;
+    onTransitionEnd?: (toId: string) => void;
+}
+export interface AnimationPreviewApi {
+    state: AnimationPreviewState;
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    stepForward: () => void;
+    stepBackward: () => void;
+    setPlaybackSpeed: (speed: number) => void;
+    toggleLoop: () => void;
+    seekToFrame: (frameIndex: number) => void;
+    seekToTime: (timeMs: number) => void;
+    playAnimation: (animationId: string) => void;
+    playStateMachine: (stateMachineId: string) => void;
+    setParameter: (name: string, value: boolean | number) => void;
+    triggerParameter: (name: string) => void;
+    forceState: (stateId: string) => void;
+    resetStateMachine: () => void;
+    toggleOnionSkin: () => void;
+    setOnionSkinFrames: (count: number) => void;
+    setOnionSkinOpacity: (opacity: number) => void;
+    getAnimationDuration: (animationId: string) => number;
+    getFrameAt: (animationId: string, timeMs: number) => SpriteFrame | null;
+    getCurrentFrameImage: () => HTMLCanvasElement | null;
+}
+export declare function useAnimationPreview(options: AnimationPreviewOptions): AnimationPreviewApi;

package/dist/types/game/useCollisionEditor.d.ts

@@ -0,0 +1,96 @@
+/**
+ * useCollisionEditor — Hook for collision editing state management
+ *
+ * Features:
+ * - Collision body management (CRUD)
+ * - Undo/redo history
+ * - Collision shape operations
+ * - Per-frame collision support
+ * - Collision testing/preview
+ * - Export to physics engine formats
+ */
+import type { CollisionBody, CollisionShape, CollisionShapeType } from './CollisionEditor';
+export interface FrameCollision {
+    frameIndex: number;
+    body: CollisionBody;
+}
+export interface CollisionEditorState {
+    /** Current body being edited */
+    currentBody: CollisionBody | null;
+    /** Per-frame collision data */
+    frameCollisions: FrameCollision[];
+    /** Currently selected frame index (for animations) */
+    currentFrameIndex: number;
+    /** Whether to use per-frame collisions */
+    usePerFrameCollisions: boolean;
+    /** Undo history */
+    undoStack: CollisionBody[];
+    /** Redo history */
+    redoStack: CollisionBody[];
+    /** Selected shape ID */
+    selectedShapeId: string | null;
+    /** Preview mode enabled */
+    previewMode: boolean;
+}
+export interface UseCollisionEditorOptions {
+    /** Initial body */
+    initialBody?: CollisionBody | null;
+    /** Initial frame collisions */
+    initialFrameCollisions?: FrameCollision[];
+    /** Max undo history size */
+    maxHistory?: number;
+    /** Called when body changes */
+    onChange?: (body: CollisionBody | null, frameCollisions: FrameCollision[]) => void;
+}
+export interface UseCollisionEditorReturn {
+    /** Current state */
+    state: CollisionEditorState;
+    /** Current body (auto-switches based on frame) */
+    currentBody: CollisionBody | null;
+    /** Update the current body */
+    setBody: (body: CollisionBody) => void;
+    /** Create a new body */
+    createBody: () => void;
+    /** Delete the current body */
+    deleteBody: () => void;
+    /** Clone the current body */
+    cloneBody: () => void;
+    /** Add a shape to current body */
+    addShape: (type: CollisionShapeType) => void;
+    /** Update a shape */
+    updateShape: (shape: CollisionShape) => void;
+    /** Delete a shape */
+    deleteShape: (shapeId: string) => void;
+    /** Duplicate a shape */
+    duplicateShape: (shapeId: string) => void;
+    /** Select a shape */
+    selectShape: (shapeId: string | null) => void;
+    /** Move shape in layer order */
+    moveShape: (shapeId: string, direction: 'up' | 'down') => void;
+    /** Undo last action */
+    undo: () => void;
+    /** Redo last undone action */
+    redo: () => void;
+    /** Can undo */
+    canUndo: boolean;
+    /** Can redo */
+    canRedo: boolean;
+    /** Toggle per-frame collisions */
+    setUsePerFrameCollisions: (use: boolean) => void;
+    /** Set current frame */
+    setCurrentFrame: (frameIndex: number) => void;
+    /** Copy collision to frame */
+    copyToFrame: (targetFrameIndex: number) => void;
+    /** Copy collision to all frames */
+    copyToAllFrames: () => void;
+    /** Toggle preview mode */
+    setPreviewMode: (enabled: boolean) => void;
+    /** Export to physics engine format */
+    exportToFormat: (format: 'box2d' | 'matter' | 'rapier' | 'json') => string;
+    /** Import from JSON */
+    importFromJson: (json: string) => void;
+    /** Reset to defaults */
+    reset: () => void;
+}
+export declare function useCollisionEditor(options?: UseCollisionEditorOptions): UseCollisionEditorReturn;
+export default useCollisionEditor;