Phaser 게임 엔진용 SolidJS 에디터 호스트, .pen 디자인 스펙에 맞춰 제작

I'll build this out systematically. Given the scope, I'll lay out the full structure and implement each piece.

## 1. Project scaffolding

**`src/editor/package.json`**

```json
{
  "name": "codogma-editor",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "preview": "vite preview",
    "test": "vitest run",
    "test:watch": "vitest",
    "test:e2e": "playwright test",
    "typecheck": "tsc -b --noEmit"
  },
  "dependencies": {
    "phaser": "^3.80.1",
    "solid-js": "^1.9.3"
  },
  "devDependencies": {
    "@playwright/test": "^1.48.2",
    "@tailwindcss/vite": "^4.0.0-beta.3",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/user-event": "^14.5.2",
    "@types/node": "^22.9.0",
    "jsdom": "^25.0.1",
    "solid-js": "^1.9.3",
    "tailwindcss": "^4.0.0-beta.3",
    "typescript": "^5.6.3",
    "vite": "^5.4.10",
    "vite-plugin-solid": "^2.10.2",
    "vitest": "^2.1.4"
  }
}
```

**`src/editor/vite.config.ts`**

```ts
import { defineConfig } from 'vite';
import solid from 'vite-plugin-solid';
import tailwindcss from '@tailwindcss/vite';

const ALLOWED_ORIGINS = new Set([
  'http://127.0.0.1:5173',
  'http://localhost:5173',
]);

export default defineConfig({
  plugins: [solid(), tailwindcss()],
  server: {
    host: '127.0.0.1',
    port: 5173,
    strictPort: true,
    proxy: {
      '/editor': {
        target: 'http://127.0.0.1:3000',
        changeOrigin: false,
        configure: (proxy) => {
          proxy.on('proxyReq', (proxyReq, req) => {
            const origin = req.headers.origin;
            if (origin && !ALLOWED_ORIGINS.has(origin)) {
              proxyReq.destroy(new Error(`Origin not allowed: ${origin}`));
            }
          });
        },
      },
    },
  },
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: true,
  },
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: ['./test/setup.ts'],
    include: ['test/**/*.test.{ts,tsx}'],
  },
});
```

**`src/editor/tsconfig.json`** — full ADR-0002 strict profile:

```json
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "types": ["vite/client", "vitest/globals", "node"],

    "allowJs": false,
    "checkJs": false,

    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "useUnknownInCatchVariables": true,
    "alwaysStrict": true,
    "exactOptionalPropertyTypes": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "verbatimModuleSyntax": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "noEmit": true
  },
  "include": ["src", "test", "e2e", "vite.config.ts", "playwright.config.ts"]
}
```

**`src/editor/index.html`**

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Codogma Editor</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
```

## 2. Domain models (real TypeScript)

**`src/editor/src/domain/scene.ts`**

```ts
export type NodeId = string;

export type Transform = {
  x: number;
  y: number;
  rotation: number;
  scaleX: number;
  scaleY: number;
};

export type ImageNode = {
  kind: 'image';
  id: NodeId;
  name: string;
  transform: Transform;
  assetId: string;
  visible: boolean;
};

export type TextNode = {
  kind: 'text';
  id: NodeId;
  name: string;
  transform: Transform;
  text: string;
  fontSize: number;
  color: string;
  visible: boolean;
};

export type ContainerNode = {
  kind: 'container';
  id: NodeId;
  name: string;
  transform: Transform;
  children: SceneNode[];
  visible: boolean;
};

export type SceneNode = ImageNode | TextNode | ContainerNode;

export type Scene = {
  version: 1;
  id: string;
  name: string;
  root: ContainerNode;
};

export const isContainer = (n: SceneNode): n is ContainerNode => n.kind === 'container';
export const isImage = (n: SceneNode): n is ImageNode => n.kind === 'image';
export const isText = (n: SceneNode): n is TextNode => n.kind === 'text';

export const identityTransform = (): Transform => ({
  x: 0, y: 0, rotation: 0, scaleX: 1, scaleY: 1,
});

export const createNodeId = (): NodeId =>
  `n_${Math.random().toString(36).slice(2, 10)}`;

export const createEmptyScene = (name = 'Untitled'): Scene => ({
  version: 1,
  id: `scene_${Math.random().toString(36).slice(2, 10)}`,
  name,
  root: {
    kind: 'container',
    id: 'root',
    name: 'Root',
    transform: identityTransform(),
    children: [],
    visible: true,
  },
});
```

**`src/editor/src/domain/animation.ts`**

```ts
import type { NodeId } from './scene';

export type Easing = 'linear' | 'easeIn' | 'easeOut' | 'easeInOut';

export type Keyframe = {
  time: number;
  value: number;
};

export type Track = {
  nodeId: NodeId;
  property: 'x' | 'y' | 'rotation' | 'scaleX' | 'scaleY' | 'opacity';
  keyframes: Keyframe[];
};

export type AnimationClip = {
  id: string;
  name: string;
  duration: number;
  loop: boolean;
  easing: Easing;
  tracks: Track[];
};

export type AnimationSet = {
  version: 1;
  clips: AnimationClip[];
};

export const createEmptyAnimationSet = (): AnimationSet => ({
  version: 1,
  clips: [],
});

export const createClip = (name: string, duration = 1000): AnimationClip => ({
  id: `clip_${Math.random().toString(36).slice(2, 10)}`,
  name,
  duration,
  loop: false,
  easing: 'linear',
  tracks: [],
});
```

**`src/editor/src/domain/prefab.ts`**

```ts
import type { SceneNode } from './scene';

export type Prefab = {
  id: string;
  name: string;
  template: SceneNode;
  overrides: Record<string, unknown>;
};

export type PrefabLibrary = {
  version: 1;
  prefabs: Prefab[];
};

export const createEmptyPrefabLibrary = (): PrefabLibrary => ({
  version: 1,
  prefabs: [],
});
```

**`src/editor/src/domain/components.ts`**

```ts
export type ComponentFieldType = 'number' | 'string' | 'boolean' | 'color';

export type ComponentField = {
  name: string;
  type: ComponentFieldType;
  default: number | string | boolean;
};

export type UserComponent = {
  id: string;
  name: string;
  fields: ComponentField[];
  script: string;
};

export type ComponentRegistry = {
  version: 1;
  components: UserComponent[];
};

export const createEmptyComponentRegistry = (): ComponentRegistry => ({
  version: 1,
  components: [],
});
```

**`src/editor/src/domain/spriteAsset.ts`**

```ts
export type SpriteAsset = {
  id: string;
  name: string;
  path: string;
  width: number;
  height: number;
  frameWidth: number;
  frameHeight: number;
  frameCount: number;
};

export type AssetLibrary = {
  version: 1;
  sprites: SpriteAsset[];
};

export const createEmptyAssetLibrary = (): AssetLibrary => ({
  version: 1,
  sprites: [],
});
```

## 3. Design tokens

**`src/editor/src/styles/tokens.css`**

```css
@import "tailwindcss";

@theme {
  --color-surface-0: #0b0d10;
  --color-surface-1: #12151a;
  --color-surface-2: #1a1f26;
  --color-surface-3: #232a33;
  --color-border: #2c343f;
  --color-border-strong: #3a4452;
  --color-text-primary: #e6ebf2;
  --color-text-secondary: #9aa6b5;
  --color-text-muted: #5f6b7a;
  --color-accent: #4f9dff;
  --color-accent-hover: #6fb0ff;
  --color-danger: #ff5c5c;
  --color-success: #4ade80;
  --color-warning: #fbbf24;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

html, body, #root {
  height: 100%;
  margin: 0;
  background: var(--color-surface-0);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
}
```

## 4. State stores

**`src/editor/src/state/layout.ts`** — persisted responsive layout

```ts
import { createSignal, createEffect } from 'solid-js';

export type PanelId = 'hierarchy' | 'inspector' | 'project' | 'animation' | 'components' | 'console';

export type PanelSlot = 'left' | 'right' | 'bottom' | 'bottom-dock';

export type LayoutState = {
  leftWidth: number;
  rightWidth: number;
  bottomHeight: number;
  slots: Record<PanelId, PanelSlot>;
  homeSlots: Record<PanelId, PanelSlot>;
  tabOrder: Record<PanelSlot, PanelId[]>;
  consoleDocked: boolean;
};

const STORAGE_KEY = 'codogma.layout.v1';

const defaultLayout = (): LayoutState => ({
  leftWidth: 260,
  rightWidth: 320,
  bottomHeight: 220,
  slots: {
    hierarchy: 'left',
    inspector: 'right',
    project: 'left',
    animation: 'bottom',
    components: 'bottom',
    console: 'bottom',
  },
  homeSlots: {
    hierarchy: 'left',
    inspector: 'right',
    project: 'left',
    animation: 'bottom',
    components: 'bottom',
    console: 'bottom',
  },
  tabOrder: {
    left: ['hierarchy', 'project'],
    right: ['inspector'],
    bottom: ['animation', 'components', 'console'],
    'bottom-dock': [],
  },
  consoleDocked: true,
});

const load = (): LayoutState => {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) return defaultLayout();
    const parsed = JSON.parse(raw) as Partial<LayoutState>;
    return { ...defaultLayout(), ...parsed };
  } catch {
    return defaultLayout();
  }
};

export const createLayoutStore = () => {
  const [layout, setLayout] = createSignal<LayoutState>(load());

  createEffect(() => {
    try {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(layout()));
    } catch {
      /* ignore quota */
    }
  });

  const movePanel = (panel: PanelId, slot: PanelSlot) => {
    setLayout((prev) => {
      const next: LayoutState = {
        ...prev,
        slots: { ...prev.slots, [panel]: slot },
        tabOrder: {
          left: prev.tabOrder.left.filter((p) => p !== panel),
          right: prev.tabOrder.right.filter((p) => p !== panel),
          bottom: prev.tabOrder.bottom.filter((p) => p !== panel),
          'bottom-dock': prev.tabOrder['bottom-dock'].filter((p) => p !== panel),
        },
      };
      next.tabOrder[slot] = [...next.tabOrder[slot], panel];
      return next;
    });
  };

  const restoreHome = (panel: PanelId) => {
    const home = layout().homeSlots[panel];
    movePanel(panel, home);
  };

  const reorderTabs = (slot: PanelSlot, from: number, to: number) => {
    setLayout((prev) => {
      const order = [...prev.tabOrder[slot]];
      const [moved] = order.splice(from, 1);
      if (moved === undefined) return prev;
      order.splice(to, 0, moved);
      return { ...prev, tabOrder: { ...prev.tabOrder, [slot]: order } };
    });
  };

  const setConsoleDocked = (docked: boolean) => {
    setLayout((prev) => ({ ...prev, consoleDocked: docked }));
    movePanel('console', docked ? 'bottom' : 'bottom-dock');
  };

  const setSize = (key: 'leftWidth' | 'rightWidth' | 'bottomHeight', value: number) => {
    setLayout((prev) => ({ ...prev, [key]: value }));
  };

  return { layout, movePanel, restoreHome, reorderTabs, setConsoleDocked, setSize };
};

export type LayoutStore = ReturnType<typeof createLayoutStore>;
```

**`src/editor/src/state/scene.ts`** — scene + undo/redo + dirty

```ts
import { createSignal, createMemo } from 'solid-js';
import type { Scene, SceneNode, NodeId, Transform } from '../domain/scene';
import { createEmptyScene, isContainer } from '../domain/scene';

export type Selection = NodeId | null;

type HistoryEntry = { scene: Scene; label: string };

const clone = <T,>(v: T): T => structuredClone(v);

export const createSceneStore = () => {
  const [scene, setSceneRaw] = createSignal<Scene>(createEmptyScene());
  const [selection, setSelection] = createSignal<Selection>(null);
  const [dirty, setDirty] = createSignal(false);
  const [undoStack, setUndoStack] = createSignal<HistoryEntry[]>([]);
  const [redoStack, setRedoStack] = createSignal<HistoryEntry[]>([]);
  const [filePath, setFilePath] = createSignal<string | null>(null);

  const commit = (label: string, mutator: (s: Scene) => Scene) => {
    const prev = scene();
    setUndoStack((s) => [...s, { scene: clone(prev), label }]);
    setRedoStack([]);
    setSceneRaw(mutator(clone(prev)));
    setDirty(true);
  };

  const replaceScene = (next: Scene, path: string | null) => {
    setSceneRaw(next);
    setFilePath(path);
    setDirty(false);
    setUndoStack([]);
    setRedoStack([]);
    setSelection(null);
  };

  const undo = () => {
    const stack = undoStack();
    const entry = stack[stack.length - 1];
    if (!entry) return;
    setRedoStack((r) => [...r, { scene: clone(scene()), label: entry.label }]);
    setUndoStack(stack.slice(0, -1));
    setSceneRaw(entry.scene);
    setDirty(true);
  };

  const redo = () => {
    const stack = redoStack();
    const entry = stack[stack.length - 1];
    if (!entry) return;
    setUndoStack((u) => [...u, { scene: clone(scene()), label: entry.label }]);
    setRedoStack(stack.slice(0, -1));
    setSceneRaw(entry.scene);
    setDirty(true);
  };

  const findNode = (root: SceneNode, id: NodeId): SceneNode | null => {
    if (root.id === id) return root;
    if (isContainer(root)) {
      for (const child of root.children) {
        const found = findNode(child, id);
        if (found) return found;
      }
    }
    return null;
  };

  const selectedNode = createMemo(() => {
    const id = selection();
    if (!id) return null;
    return findNode(scene().root, id);
  });

  const updateTransform = (id: NodeId, patch: Partial<Transform>) => {
    commit('transform', (s) => {
      const walk = (n: SceneNode): SceneNode => {
        if (n.id === id) return { ...n, transform: { ...n.transform, ...patch } };
        if (isContainer(n)) return { ...n, children: n.children.map(walk) };
        return n;
      };
      return { ...s, root: walk(s.root) as typeof s.root };
    });
  };

  const updateNode = (id: NodeId, patch: Partial<SceneNode>) => {
    commit('update', (s) => {
      const walk = (n: SceneNode): SceneNode => {
        if (n.id === id) return { ...n, ...patch } as SceneNode;
        if (isContainer(n)) return { ...n, children: n.children.map(walk) };
        return n;
      };
      return { ...s, root: walk(s.root) as typeof s.root };
    });
  };

  const addNode = (parentId: NodeId, node: SceneNode) => {
    commit('add', (s) => {
      const walk = (n: SceneNode): SceneNode => {
        if (n.id === parentId && isContainer(n)) {
          return { ...n, children: [...n.children, node] };
        }
        if (isContainer(n)) return { ...n, children: n.children.map(walk) };
        return n;
      };
      return { ...s, root: walk(s.root) as typeof s.root };
    });
    setSelection(node.id);
  };

  const removeNode = (id: NodeId) => {
    commit('remove', (s) => {
      const walk = (n: SceneNode): SceneNode => {
        if (isContainer(n)) {
          return { ...n, children: n.children.filter((c) => c.id !== id).map(walk) };
        }
        return n;
      };
      return { ...s, root: walk(s.root) as typeof s.root };
    });
    if (selection() === id) setSelection(null);
  };

  return {
    scene, setSceneRaw, selection, setSelection, selectedNode,
    dirty, setDirty, filePath, setFilePath,
    undo, redo, canUndo: () => undoStack().length > 0, canRedo: () => redoStack().length > 0,
    updateTransform, updateNode, addNode, removeNode, replaceScene, commit,
  };
};

export type SceneStore = ReturnType<typeof createSceneStore>;
```

## 5. Focus / command model

**`src/editor/src/state/focus.ts`**

```ts
import { createSignal } from 'solid-js';

export type FocusContext = 'scene' | 'hierarchy' | 'inspector' | 'palette' | 'none';

export const createFocusStore = () => {
  const [context, setContext] = createSignal<FocusContext>('none');
  const [paletteOpen, setPaletteOpen] = createSignal(false);
  const [paletteReturnFocus, setPaletteReturnFocus] = createSignal<HTMLElement | null>(null);

  const openPalette = () => {
    setPaletteReturnFocus(document.activeElement as HTMLElement | null);
    setPaletteOpen(true);
  };

  const closePalette = () => {
    setPaletteOpen(false);
    const el = paletteReturnFocus();
    if (el && typeof el.focus === 'function') el.focus();
  };

  return { context, setContext, paletteOpen, openPalette, closePalette };
};

export type FocusStore = ReturnType<typeof createFocusStore>;
```

**`src/editor/src/commands/registry.ts`**

```ts
import type { FocusContext } from '../state/focus';

export type Command = {
  id: string;
  label: string;
  shortcut?: string;
  contexts: FocusContext[];
  run: () => void;
};

export const createCommandRegistry = () => {
  const commands = new Map<string, Command>();
  const register = (cmd: Command) => { commands.set(cmd.id, cmd); };
  const all = () => Array.from(commands.values());
  const run = (id: string, ctx: FocusContext) => {
    const cmd = commands.get(id);
    if (!cmd) return false;
    if (!cmd.contexts.includes(ctx)) return false;
    cmd.run();
    return true;
  };
  return { register, all, run };
};

export type CommandRegistry = ReturnType<typeof createCommandRegistry>;
```

**`src/editor/src/commands/keymap.ts`**

```ts
import type { FocusContext } from '../state/focus';

export type KeyBinding = {
  key: string;
  contexts: FocusContext[];
  commandId: string;
};

export const KEYMAP: KeyBinding[] = [
  { key: 'w', contexts: ['scene', 'hierarchy'], commandId: 'tool.move' },
  { key: 'e', contexts: ['scene', 'hierarchy'], commandId: 'tool.rotate' },
  { key: 'r', contexts: ['scene', 'hierarchy'], commandId: 'tool.scale' },
  { key: 'q', contexts: ['scene', 'hierarchy'], commandId: 'tool.select' },
  { key: 'F2', contexts: ['scene', 'hierarchy'], commandId: 'node.rename' },
  { key: 'Delete', contexts: ['scene', 'hierarchy'], commandId: 'node.delete' },
];

export const resolveBinding = (key: string, ctx: FocusContext): string | null => {
  const b = KEYMAP.find((k) => k.key === key && k.contexts.includes(ctx));
  return b ? b.commandId : null;
};
```

## 6. Phaser Scene Canvas

**`src/editor/src/canvas/SceneCanvas.tsx`**

```tsx
import { onMount, onCleanup, createEffect } from 'solid-js';
import Phaser from 'phaser';
import type { SceneStore } from '../state/scene';
import type { SceneNode } from '../domain/scene';
import { isContainer } from '../domain/scene';

export type ToolMode = 'select' | 'move' | 'rotate' | 'scale';

type Props = {
  store: SceneStore;
  tool: () => ToolMode;
  onSelect: (id: string | null) => void;
};

const NODE_COLORS: Record<string, number> = {
  image: 0x4f9dff,
  text: 0xfbbf24,
  container: 0x4ade80,
};

export const SceneCanvas = (props: Props) => {
  let host!: HTMLDivElement;
  let game: Phaser.Game | null = null;
  let scene: Phaser.Scene | null = null;
  const sprites = new Map<string, Phaser.GameObjects.Container>();

  onMount(() => {
    const config: Phaser.Types.Core.GameConfig = {
      type: Phaser.AUTO,
      parent: host,
      backgroundColor: '#12151a',
      width: host.clientWidth || 800,
      height: host.clientHeight || 600,
      scene: {
        create() {
          scene = this;
          this.input.on('pointerdown', (pointer: Phaser.Input.Pointer) => {
            const hit = this.input.hitTestPointer(pointer);
            const first = hit[0];
            if (first && first.getData('nodeId')) {
              props.onSelect(first.getData('nodeId') as string);
            } else {
              props.onSelect(null);
            }
          });
          renderScene();
        },
      },
    };
    game = new Phaser.Game(config);

    const ro = new ResizeObserver(() => {
      if (game) game.scale.resize(host.clientWidth, host.clientHeight);
    });
    ro.observe(host);

    onCleanup(() => {
      ro.disconnect();
      game?.destroy(true);
      game = null;
      scene = null;
    });
  });

  const renderScene = () => {
    if (!scene) return;
    for (const s of sprites.values()) s.destroy();
    sprites.clear();

    const walk = (node: SceneNode) => {
      const container = scene!.add.container(node.transform.x, node.transform.y);
      container.setRotation(Phaser.Math.DegToRad(node.transform.rotation));
      container.setScale(node.transform.scaleX, node.transform.scaleY);
      container.setData('nodeId', node.id);

      const color = NODE_COLORS[node.kind] ?? 0xffffff;
      const rect = scene!.add.rectangle(0, 0, 80, 60, color, 0.25);
      rect.setStrokeStyle(2, color);
      rect.setInteractive();
      rect.setData('nodeId', node.id);
      container.add(rect);

      if (node.kind === 'text') {
        const label = scene!.add.text(0, 0, node.text, {
          fontSize: `${node.fontSize}px`,
          color: node.color,
        }).setOrigin(0.5);
        container.add(label);
      }

      sprites.set(node.id, container);

      if (isContainer(node)) node.children.forEach(walk);
    };
    walk(props.store.scene().root);
  };

  createEffect(() => {
    props.store.scene();
    renderScene();
  });

  createEffect(() => {
    const sel = props.store.selection();
    for (const [id, c] of sprites) {
      const rect = c.list[0] as Phaser.GameObjects.Rectangle | undefined;
      if (!rect) continue;
      if (id === sel) rect.setStrokeStyle(3, 0xffffff);
      else rect.setStrokeStyle(2, NODE_COLORS[c.getData('kind') as string] ?? 0x4f9dff);
    }
  });

  return <div ref={host} class="h-full w-full" data-testid="scene-canvas" />;
};
```

## 7. Workbench shell

**`src/editor/src/App.tsx`**

```tsx
import { createSignal, Show, For, onMount, onCleanup } from 'solid-js';
import { createSceneStore } from './state/scene';
import { createLayoutStore, type PanelId, type PanelSlot } from './state/layout';
import { createFocusStore } from './state/focus';
import { createCommandRegistry } from './commands/registry';
import { resolveBinding } from './commands/keymap';
import { SceneCanvas, type ToolMode } from './canvas/SceneCanvas';
import { MenuBar } from './ui/MenuBar';
import { Toolbar } from './ui/Toolbar';
import { HierarchyPanel } from './ui/HierarchyPanel';
import { InspectorPanel } from './ui/InspectorPanel';
import { ProjectPanel } from './ui/ProjectPanel';
import { AnimationPanel } from './ui/AnimationPanel';
import { ComponentsPanel } from './ui/ComponentsPanel';
import { ConsolePanel } from './ui/ConsolePanel';
import { CommandPalette } from './ui/CommandPalette';
import { Splitter } from './ui/Splitter';
import { GameView } from './ui/GameView';
import { TabStrip } from './ui/TabStrip';
import { sceneIO } from './io/sceneIO';

const PANEL_COMPONENTS: Record<PanelId, (props: { store: ReturnType<typeof createSceneStore> }) => JSX.Element> = {
  hierarchy: HierarchyPanel,
  inspector: InspectorPanel,
  project: ProjectPanel,
  animation: AnimationPanel,
  components: ComponentsPanel,
  console: ConsolePanel,
};

export const App = () => {
  const store = createSceneStore();
  const layout = createLayoutStore();
  const focus = createFocusStore();
  const commands = createCommandRegistry();
  const [tool, setTool] = createSignal<ToolMode>('select');
  const [view, setView] = createSignal<'scene' | 'game'>('scene');

  commands.register({ id: 'tool.move', label: 'Move Tool', shortcut: 'W', contexts: ['scene', 'hierarchy'], run: () => setTool('move') });
  commands.register({ id: 'tool.rotate', label: 'Rotate Tool', shortcut: 'E', contexts: ['scene', 'hierarchy'], run: () => setTool('rotate') });
  commands.register({ id: 'tool.scale', label: 'Scale Tool', shortcut: 'R', contexts: ['scene', 'hierarchy'], run: () => setTool('scale') });
  commands.register({ id: 'tool.select', label: 'Select Tool', shortcut: 'Q', contexts: ['scene', 'hierarchy'], run: () => setTool('select') });
  commands.register({ id: 'node.delete', label: 'Delete Node', shortcut: 'Delete', contexts: ['scene', 'hierarchy'], run: () => {
    const sel = store.selection();
    if (sel && sel !== 'root') store.removeNode(sel);
  }});
  commands.register({ id: 'node.rename', label: 'Rename Node', shortcut: 'F2', contexts: ['scene', 'hierarchy'], run: () => {
    const el = document.querySelector<HTMLInputElement>('[data-rename-input]');
    el?.focus();
    el?.select();
  }});
  commands.register({ id: 'edit.undo', label: 'Undo', shortcut: 'Ctrl+Z', contexts: ['scene', 'hierarchy', 'inspector'], run: () => store.undo() });
  commands.register({ id: 'edit.redo', label: 'Redo', shortcut: 'Ctrl+Shift+Z', contexts: ['scene', 'hierarchy', 'inspector'], run: () => store.redo() });
  commands.register({ id: 'file.open', label: 'Open Scene', contexts: ['scene', 'hierarchy', 'inspector', 'none'], run: () => void sceneIO.open(store) });
  commands.register({ id: 'file.save', label: 'Save Scene', contexts: ['scene', 'hierarchy', 'inspector', 'none'], run: () => void sceneIO.save(store) });

  const onKeyDown = (e: KeyboardEvent) => {
    if (focus.paletteOpen()) return;
    const ctx = focus.context();
    if (e.key === 'k' && (e.ctrlKey || e.metaKey)) {
      e.preventDefault();
      focus.openPalette();
      return;
    }
    if (e.key === 'z' && (e.ctrlKey || e.metaKey)) {
      e.preventDefault();
      if (e.shiftKey) store.redo(); else store.undo();
      return;
    }
    const cmdId = resolveBinding(e.key, ctx);
    if (cmdId) {
      e.preventDefault();
      commands.run(cmdId, ctx);
    }
  };

  onMount(() => window.addEventListener('keydown', onKeyDown));
  onCleanup(() => window.removeEventListener('keydown', onKeyDown));

  const renderSlot = (slot: PanelSlot) => (
    <For each={layout.layout().tabOrder[slot]}>
      {(panel) => {
        const Comp = PANEL_COMPONENTS[panel];
        return <Comp store={store} />;
      }}
    </For>
  );

  return (
    <div class="flex h-full flex-col bg-surface-0 text-text-primary">
      <MenuBar store={store} layout={layout} />
      <Toolbar tool={tool} setTool={setTool} view={view} setView={setView} store={store} />

      <div class="flex flex-1 overflow-hidden">
        <aside class="flex flex-col border-r border-border" style={{ width: `${layout.layout().leftWidth}px` }}>
          <TabStrip slot="left" layout={layout} />
          <div class="flex-1 overflow-auto">{renderSlot('left')}</div>
        </aside>
        <Splitter orientation="vertical" onDrag={(d) => layout.setSize('leftWidth', Math.max(180, layout.layout().leftWidth + d))} />

        <main class="flex flex-1 flex-col overflow-hidden">
          <div class="flex-1 overflow-hidden" onFocus={() => focus.setContext('scene')} tabIndex={-1}>
            <Show when={view() === 'scene'} fallback={<GameView />}>
              <SceneCanvas store={store} tool={tool} onSelect={(id) => store.setSelection(id)} />
            </Show>
          </div>
          <Splitter orientation="horizontal" onDrag={(d) => layout.setSize('bottomHeight', Math.max(120, layout.layout().bottomHeight - d))} />
          <section class="border-t border-border" style={{ height: `${layout.layout().bottomHeight}px` }}>
            <TabStrip slot="bottom" layout={layout} />
            <div class="h-[calc(100%-32px)] overflow-auto">{renderSlot('bottom')}</div>
          </section>
        </main>

        <Splitter orientation="vertical" onDrag={(d) => layout.setSize('rightWidth', Math.max(220, layout.layout().rightWidth - d))} />
        <aside class="flex flex-col border-l border-border" style={{ width: `${layout.layout().rightWidth}px` }}>
          <TabStrip slot="right" layout={layout} />
          <div class="flex-1 overflow-auto">{renderSlot('right')}</div>
        </aside>
      </div>

      <Show when={layout.layout().tabOrder['bottom-dock'].length > 0}>
        <section class="border-t border-border" style={{ height: '180px' }}>
          <TabStrip slot="bottom-dock" layout={layout} />
          <div class="h-[calc(100%-32px)] overflow-auto">{renderSlot('bottom-dock')}</div>
        </section>
      </Show>

      <CommandPalette focus={focus} commands={commands} />
    </div>
  );
};
```

## 8. UI panels

**`src/editor/src/ui/TabStrip.tsx`**

```tsx
import { For } from 'solid-js';
import type { LayoutStore, PanelSlot, PanelId } from '../state/layout';

type Props = { slot: PanelSlot; layout: LayoutStore };

export const TabStrip = (props: