@web-engine-dev/editor-ui

Editor UI component library with a TypeRegistry-driven auto-inspector that generates property panels from component type metadata. Built on the engine's UI system with editor-specific widgets.

Layer 8 · Content

Features

• Auto-Inspector: Generates property panels from @web-engine-dev/reflection type metadata
• TypeRegistry Integration: Custom type editors register via decorator or manual registration
• Component Panels: Expandable, reorderable component sections with add/remove
• Property Widgets: Number (slider/drag/input), string, boolean, color picker, enum dropdown, vec2/3/4, quaternion (Euler), curve editor, asset reference
• Drag & Drop: Asset drag from browser to inspector/viewport, entity reparenting in hierarchy
• Context Menus: Right-click menus with keyboard shortcut hints
• Panels: Hierarchy, Inspector, Asset Browser, Console, Timeline, Animation, Scene Settings
• Theming: Design-token driven styling via @web-engine-dev/design-tokens
• Layout System: Dockable, resizable panels with layout persistence

Installation

npm install @web-engine-dev/editor-ui
# or
pnpm add @web-engine-dev/editor-ui

Quick Start

import { Inspector, HierarchyPanel, AssetBrowser } from '@web-engine-dev/editor-ui';

// Auto-inspector reads component metadata and builds the UI
const inspector = new Inspector({
  target: selectedEntity,
  typeRegistry: editor.typeRegistry,
});

// Custom property widget for a specific type
inspector.registerWidget('ColorGradient', ColorGradientEditor);

// Hierarchy panel with drag-and-drop reparenting
const hierarchy = new HierarchyPanel({
  scene: editor.activeScene,
  onSelect: (entity) => editor.select(entity),
  onReparent: (entity, newParent) => editor.reparent(entity, newParent),
});

Auto-Inspector

The inspector reads @web-engine-dev/reflection metadata to automatically generate appropriate widgets:

// Components with type metadata get auto-inspected
@component
class PointLight {
  @property({ type: 'color' }) color: Color = Color.WHITE;
  @property({ type: 'float', min: 0, max: 100 }) intensity: number = 1.0;
  @property({ type: 'float', min: 0 }) range: number = 10.0;
  @property({ type: 'boolean' }) castShadows: boolean = true;
}

// Inspector auto-generates: color picker, slider, slider, checkbox

Panel Types

Panel	Purpose
Hierarchy	Entity tree with search, filter, drag-and-drop
Inspector	Auto-generated property editors for selected entity
Asset Browser	File tree with thumbnails, search, import
Console	Log output with filtering and clickable stack traces
Scene Settings	Global scene properties (skybox, fog, gravity)

Dependencies

• @web-engine-dev/ui — Base UI system
• @web-engine-dev/reflection — Type metadata for auto-inspection
• @web-engine-dev/editor-core — Editor commands and selection
• @web-engine-dev/design-tokens — Visual theming