@jamesyong42/infinite-canvas 0.1.0 → 1.1.0

package/README.md

@@ -18,6 +18,7 @@ Build Figma-style infinite canvases in React -- drag, resize, snap, zoom, nested
 - **Hierarchical navigation** -- Enter and exit nested containers with camera state preservation
 - **ECS architecture** -- Extensible via custom components, tags, and systems with topologically-sorted scheduling
 - **Performance** -- SDF shaders for grid and selection chrome, RBush spatial indexing, viewport culling, per-system profiling
+- **Live ECS editor** -- Drop-in `<EcsDevtools>` panel for spawning, inspecting, and editing components and tags at runtime
 - **Dark mode** -- Full dark mode support across canvas, widgets, and UI chrome
 
 ## Quick Start
@@ -30,39 +31,42 @@ npm install three @react-three/fiber
 
 ```tsx
 import { useMemo } from 'react';
+import type { DomWidget, EntityId } from '@jamesyong42/infinite-canvas';
 import { createLayoutEngine, InfiniteCanvas, useWidgetData } from '@jamesyong42/infinite-canvas';
+import { z } from 'zod';
 
-function MyCard({ entityId }) {
-  const data = useWidgetData(entityId);
+const schema = z.object({ title: z.string().default('Card') });
+type CardData = z.infer<typeof schema>;
+
+function MyCardView({ entityId }: { entityId: EntityId }) {
+  const data = useWidgetData<CardData>(entityId);
   return <div style={{ padding: 16, background: 'white', borderRadius: 8 }}>{data.title}</div>;
 }
 
-const widgets = [
-  { type: 'card', component: MyCard, defaultSize: { width: 250, height: 180 } },
-];
+const MyCard: DomWidget<CardData> = {
+  type: 'card',
+  schema,
+  defaultData: { title: 'Card' },
+  defaultSize: { width: 250, height: 180 },
+  component: MyCardView,
+};
 
 export default function App() {
   const engine = useMemo(() => {
-    const e = createLayoutEngine({ zoom: { min: 0.05, max: 8 } });
-    e.addWidget({
-      type: 'card',
-      position: { x: 100, y: 100 },
-      size: { width: 250, height: 180 },
-      data: { title: 'Hello World' },
+    const e = createLayoutEngine({
+      zoom: { min: 0.05, max: 8 },
+      widgets: [MyCard],
     });
+    e.spawn('card', { at: { x: 100, y: 100 }, data: { title: 'Hello World' } });
     return e;
   }, []);
 
-  return (
-    <InfiniteCanvas
-      engine={engine}
-      widgets={widgets}
-      style={{ width: '100vw', height: '100vh' }}
-    />
-  );
+  return <InfiniteCanvas engine={engine} style={{ width: '100vw', height: '100vh' }} />;
 }
 ```
 
+Widgets declare a **schema** (any [Standard Schema v1](https://standardschema.dev)-compatible validator — Zod 3.24+, Valibot, ArkType) and **default data**. Entities are spawned by `engine.spawn(archetypeOrWidgetId, options)`. For widgets without a custom archetype, the engine synthesizes a default one that makes the entity selectable, draggable, and resizable.
+
 ## Package
 
 Everything ships in a single package: **`@jamesyong42/infinite-canvas`**. It exposes three entry points:
@@ -70,8 +74,10 @@ Everything ships in a single package: **`@jamesyong42/infinite-canvas`**. It exp
 | Import | Purpose |
 |--------|---------|
 | `@jamesyong42/infinite-canvas` | Main API -- `<InfiniteCanvas>`, `createLayoutEngine`, hooks, built-in components |
-| `@jamesyong42/infinite-canvas/ecs` | ECS primitives for advanced users (`defineComponent`, `defineSystem`, `World`) |
 | `@jamesyong42/infinite-canvas/advanced` | WebGL renderers, serialization, profiler, spatial index |
+| `@jamesyong42/infinite-canvas/devtools` | `<EcsDevtools>` live ECS editor (see [Devtools](#devtools)) |
+
+The underlying ECS primitives (`defineComponent`, `defineSystem`, `World`, `SystemScheduler`) live in a separate package: [**`@jamesyong42/reactive-ecs`**](https://github.com/jamesyong-42/reactive-ecs).
 
 ## Why This Library?
 
@@ -99,14 +105,18 @@ Everything ships in a single package: **`@jamesyong42/infinite-canvas`**. It exp
 | `useQuery(...types)` | Entity IDs matching component/tag types |
 | `useTaggedEntities(type)` | All entity IDs with a specific tag |
 | `useResource<T>(type)` | Read an ECS resource reactively |
+| `useAllEntities()` | Every live entity ID (reactive on create/destroy) |
+| `useEntityComponents(entityId)` | `ComponentType[]` currently on an entity |
+| `useEntityTags(entityId)` | `TagType[]` currently on an entity |
+| `useRegisteredComponents()` | Every `ComponentType` the world has observed |
+| `useRegisteredTags()` | Every `TagType` the world has observed |
 | `useLayoutEngine()` | Access the `LayoutEngine` instance from context |
 
 ### InfiniteCanvas Props
 
 | Prop | Type | Description |
 |------|------|-------------|
-| `engine` | `LayoutEngine` | Engine instance (required) |
-| `widgets` | `WidgetDef[]` | Widget type definitions |
+| `engine` | `LayoutEngine` | Engine instance (required) -- widgets and archetypes are registered on the engine, not passed as props |
 | `grid` | `Partial<GridConfig> \| false` | Grid configuration, or `false` to disable |
 | `selection` | `Partial<SelectionConfig>` | Selection style overrides |
 | `onSelectionChange` | `(ids: EntityId[]) => void` | Called when selected entities change |
@@ -118,10 +128,10 @@ Everything ships in a single package: **`@jamesyong42/infinite-canvas`**. It exp
 
 ## Widget Development
 
-Widgets are React components that receive an `entityId` prop and use hooks to read/write ECS data:
+A widget is a self-contained plugin: a schema describing its data, a default data object, and a React view. Export it as a `DomWidget<T>` (or `R3FWidget<T>` — see below) and register it on the engine.
 
 ```tsx
-import type { WidgetProps } from '@jamesyong42/infinite-canvas';
+import type { DomWidget, EntityId } from '@jamesyong42/infinite-canvas';
 import {
   Transform2D,
   useBreakpoint,
@@ -130,33 +140,103 @@ import {
   useUpdateWidget,
   useWidgetData,
 } from '@jamesyong42/infinite-canvas';
+import { z } from 'zod';
 
-function MyWidget({ entityId }: WidgetProps) {
-  const data = useWidgetData(entityId);            // custom widget data
-  const breakpoint = useBreakpoint(entityId);      // 'micro' | 'compact' | 'normal' | 'expanded' | 'detailed'
-  const isSelected = useIsSelected(entityId);      // selection state
-  const transform = useComponent(entityId, Transform2D);  // position/size
-  const updateWidget = useUpdateWidget(entityId);  // update widget data
+const schema = z.object({
+  title: z.string().default('Widget'),
+  note: z.string().default(''),
+});
+type MyWidgetData = z.infer<typeof schema>;
+
+function MyWidgetView({ entityId }: { entityId: EntityId }) {
+  const data = useWidgetData<MyWidgetData>(entityId);  // typed custom data
+  const breakpoint = useBreakpoint(entityId);          // 'micro' | 'compact' | 'normal' | 'expanded' | 'detailed'
+  const isSelected = useIsSelected(entityId);          // selection state
+  const transform = useComponent(entityId, Transform2D); // position/size
+  const updateWidget = useUpdateWidget(entityId);      // patch widget data
 
   if (breakpoint === 'micro') return <div>...</div>;   // minimal view
   if (breakpoint === 'compact') return <div>...</div>; // condensed view
   return <div>...</div>;                                // full view
 }
+
+export const MyWidget: DomWidget<MyWidgetData> = {
+  type: 'my-widget',
+  schema,
+  defaultData: { title: 'Widget', note: '' },
+  defaultSize: { width: 280, height: 200 },
+  component: MyWidgetView,
+};
+```
+
+DOM widget components receive only `{ entityId }`. The outer slot div is sized by CSS, so read `Transform2D` via `useComponent` if you need width/height. Register the widget via `createLayoutEngine({ widgets: [MyWidget] })` or imperatively with `engine.registerWidget(MyWidget)`.
+
+## Archetypes
+
+An **archetype** is a recipe for spawning an entity — a bundle of components and tags, optionally referencing a widget type. Every widget you register gets a default archetype automatically (with `Selectable`, `Draggable`, `Resizable`). Write a custom archetype when you need to attach extra behaviour like `Container` + `Children` for an enterable container, or skip the interactive defaults for a locked decoration.
+
+```tsx
+import type { Archetype, DomWidget, EntityId } from '@jamesyong42/infinite-canvas';
+import { Children, Container } from '@jamesyong42/infinite-canvas';
+
+export const MyContainer: DomWidget<{ title: string }> = {
+  type: 'my-container',
+  schema,
+  defaultData: { title: 'Container' },
+  defaultSize: { width: 500, height: 350 },
+  component: MyContainerView,
+};
+
+export const MyContainerArchetype: Archetype = {
+  id: 'my-container',
+  widget: 'my-container',
+  components: [
+    [Container, { enterable: true }],
+    [Children, { ids: [] as EntityId[] }],
+  ],
+};
+
+// Use it:
+const engine = createLayoutEngine({
+  widgets: [MyContainer],
+  archetypes: [MyContainerArchetype],
+});
+const id = engine.spawn('my-container', { at: { x: 50, y: 50 }, data: { title: 'Hello' } });
 ```
 
-The `WidgetProps` interface provides `entityId`, `width`, `height`, and `zoom`.
+Spawning is uniform: `engine.spawn(id, options)`. If `id` matches an archetype, that archetype is used; otherwise the engine synthesizes a default from the widget. Options:
+
+| Option | Description |
+|--------|-------------|
+| `at` | World-space position. Defaults to `{ x: 0, y: 0 }`. |
+| `size` | Overrides the widget's `defaultSize`. |
+| `data` | Patch merged into the widget's `defaultData`. |
+| `zIndex` | Rendering + hit-test order. |
+| `parent` | Parent entity id for nesting. |
+| `rotation` | Initial rotation in radians. |
 
 ## WebGL Widgets (R3F)
 
-Register widgets with `surface: 'webgl'` to render 3D content via React Three Fiber:
+Define an `R3FWidget<T>` with `surface: 'webgl'` to render 3D content via React Three Fiber. R3F widget views receive `{ entityId, width, height }` and render in local coordinates (origin at widget centre):
 
 ```tsx
+import type { EntityId, R3FWidget } from '@jamesyong42/infinite-canvas';
 import { useFrame } from '@react-three/fiber';
 import { useRef } from 'react';
-
-function My3DWidget({ entityId, width, height }) {
-  const meshRef = useRef();
-  useFrame((_, delta) => { meshRef.current.rotation.y += delta; });
+import { z } from 'zod';
+import type { Mesh } from 'three';
+
+const schema = z.object({ color: z.string().default('hotpink') });
+
+function My3DView({
+  entityId,
+  width,
+  height,
+}: { entityId: EntityId; width: number; height: number }) {
+  const meshRef = useRef<Mesh>(null);
+  useFrame((_, delta) => {
+    if (meshRef.current) meshRef.current.rotation.y += delta;
+  });
   return (
     <mesh ref={meshRef}>
       <boxGeometry args={[width * 0.5, height * 0.5, 50]} />
@@ -165,15 +245,20 @@ function My3DWidget({ entityId, width, height }) {
   );
 }
 
-<InfiniteCanvas
-  engine={engine}
-  widgets={[
-    { type: 'my-3d', surface: 'webgl', component: My3DWidget, defaultSize: { width: 250, height: 250 } },
-  ]}
-/>
+export const My3D: R3FWidget<z.infer<typeof schema>> = {
+  type: 'my-3d',
+  surface: 'webgl',
+  schema,
+  defaultData: { color: 'hotpink' },
+  defaultSize: { width: 250, height: 250 },
+  component: My3DView,
+};
+
+const engine = createLayoutEngine({ widgets: [My3D] });
+engine.spawn('my-3d', { at: { x: 100, y: 100 } });
 ```
 
-WebGL widgets get a transparent R3F canvas layered between the grid and DOM layers. The R3F camera is synced with the engine camera every frame. Widget components receive `entityId`, `width`, and `height` props and work in centered local coordinates.
+WebGL widgets get a transparent R3F canvas layered between the grid and DOM layers. The R3F camera is synced with the engine camera every frame.
 
 ## Configuration
 
@@ -255,6 +340,42 @@ deserializeWorld(engine.world, saved, componentTypes, tagTypes);
 engine.markDirty();
 ```
 
+## Devtools
+
+A live ECS editor ships in `@jamesyong42/infinite-canvas/devtools`. Drop it in during development to spawn widgets, inspect entities, edit components, and toggle tags at runtime — FLECS Explorer-style, but driven by the live React tree.
+
+```tsx
+import { InfiniteCanvas } from '@jamesyong42/infinite-canvas';
+import { EcsDevtools } from '@jamesyong42/infinite-canvas/devtools';
+
+function App() {
+  const engine = useMemo(() => createLayoutEngine({ widgets: [MyWidget] }), []);
+  const [showDevtools, setShowDevtools] = useState(false);
+
+  return (
+    <>
+      <InfiniteCanvas engine={engine} />
+      {showDevtools && <EcsDevtools engine={engine} onClose={() => setShowDevtools(false)} />}
+    </>
+  );
+}
+```
+
+What the panel does:
+
+- **Spawn** any registered widget at the current viewport centre.
+- **List** all widget entities (or all entities with `show all`).
+- **Inspect** the canvas-selected entity: its components and tags.
+- **Edit** component fields inline — primitive types get typed inputs, everything else falls back to a JSON input. `WidgetData.data` is edited field-by-field.
+- **Add / remove** components and toggle tags without leaving the canvas.
+- **Destroy** entities.
+
+Pass `engine` as a prop when the devtools render outside the `<InfiniteCanvas>` subtree (the usual case, since the panel is typically absolute-positioned above the canvas). If rendered inside, the prop is optional — it reads from context.
+
+Styling is self-contained (a single scoped `<style>` injected once, classnames prefixed `ic-ecs-`). Dark mode is auto via `prefers-color-scheme` or an ancestor `.dark` class. No stylesheet import required.
+
+The devtools consume the same introspection primitives (`useAllEntities`, `useEntityComponents`, `useRegisteredComponents`, etc.) that are exported from the main entry point, so you can build your own inspector UI on top of them if you need something bespoke.
+
 ## Programmatic Control
 
 ### Camera
@@ -275,6 +396,27 @@ engine.redo();
 engine.markDirty();
 ```
 
+### Spawning & ECS mutation
+
+Runtime spawning and component edits go through the engine so it can cascade handles and mark dirty in one step:
+
+```tsx
+// Spawn at the viewport centre (sized from the widget/archetype default)
+const id = engine.spawnAtCameraCenter('my-widget');
+
+// Component mutation
+engine.addComponent(id, Container, { enterable: true });
+engine.removeComponent(id, Container);
+engine.set(id, Transform2D, { x: 200 });          // partial merge
+engine.addTag(id, Selected);
+engine.removeTag(id, Draggable);
+
+// Widget-aware introspection
+engine.getSchemaFor(id);   // Standard Schema for the widget's data, if declared
+```
+
+All of these mark the engine dirty internally — no separate `markDirty` call needed.
+
 ### Imperative Handle
 
 Use a ref on `<InfiniteCanvas>` for imperative control from outside:
@@ -282,7 +424,7 @@ Use a ref on `<InfiniteCanvas>` for imperative control from outside:
 ```tsx
 const canvasRef = useRef<InfiniteCanvasHandle>(null);
 
-<InfiniteCanvas ref={canvasRef} engine={engine} widgets={widgets} />
+<InfiniteCanvas ref={canvasRef} engine={engine} />
 
 // Later:
 canvasRef.current?.zoomToFit();
@@ -318,7 +460,7 @@ useEffect(() => {
 Define custom components and systems to extend the canvas:
 
 ```tsx
-import { defineComponent, defineSystem } from '@jamesyong42/infinite-canvas/ecs';
+import { defineComponent, defineSystem } from '@jamesyong42/reactive-ecs';
 import { Visible } from '@jamesyong42/infinite-canvas';
 
 const Health = defineComponent('Health', { hp: 100, maxHp: 100 });

package/dist/SelectionRenderer-DRtwHWJ0.d.cts

@@ -0,0 +1,102 @@
+import * as react from 'react';
+import { EntityId } from '@jamesyong42/reactive-ecs';
+import { L as LayoutEngine, q as DomWidgetProps, R as R3FWidgetProps, _ as SnapGuide, s as EqualSpacingIndicator } from './engine-DqgJ82tq.cjs';
+import * as THREE from 'three';
+
+declare const EngineProvider: react.Provider<LayoutEngine | null>;
+declare const ContainerRefProvider: react.Provider<react.RefObject<HTMLDivElement | null> | null>;
+declare function useContainerRef(): React.RefObject<HTMLDivElement | null> | null;
+/**
+ * Returns the LayoutEngine instance from the nearest InfiniteCanvas context.
+ * Throws if used outside an InfiniteCanvas provider.
+ */
+declare function useLayoutEngine(): LayoutEngine;
+
+/**
+ * Discriminated resolution of a widget by type. The surface determines which
+ * layer renders the component and with what prop shape.
+ */
+type ResolvedWidget = {
+    surface: 'dom';
+    component: React.ComponentType<DomWidgetProps>;
+} | {
+    surface: 'webgl';
+    component: React.ComponentType<R3FWidgetProps>;
+};
+type WidgetResolver = (entityId: EntityId, widgetType: string) => ResolvedWidget | null;
+declare const WidgetResolverProvider: react.Provider<WidgetResolver | null>;
+declare function useWidgetResolver(): WidgetResolver | null;
+
+interface GridConfig {
+    /** World-unit spacings for up to 3 grid levels [fine, medium, coarse]. */
+    spacings: [number, number, number];
+    /** Dot RGB color as [r, g, b] in 0–1 range. */
+    dotColor: [number, number, number];
+    /** Base dot opacity multiplier (0–1). */
+    dotAlpha: number;
+    /** CSS-pixel range where a grid level fades in: [start, end]. */
+    fadeIn: [number, number];
+    /** CSS-pixel range where a grid level fades out: [start, end]. */
+    fadeOut: [number, number];
+    /** Dot radius range in CSS pixels [min, max]. Scaled by DPR internally. */
+    dotRadius: [number, number];
+    /** Per-level opacity weight: level i gets (base + i * step). */
+    levelWeight: [number, number];
+}
+declare const DEFAULT_GRID_CONFIG: GridConfig;
+declare class GridRenderer {
+    private renderer;
+    private scene;
+    private camera;
+    private material;
+    private mesh;
+    constructor(canvas: HTMLCanvasElement);
+    /** Apply a (partial) grid config. Only provided fields are updated. */
+    setConfig(config: Partial<GridConfig>): void;
+    setSize(width: number, height: number, dpr?: number): void;
+    render(cameraX: number, cameraY: number, zoom: number): void;
+    dispose(): void;
+    /** Expose for future WebGL widget rendering */
+    getWebGLRenderer(): THREE.WebGLRenderer;
+}
+
+interface SelectionConfig {
+    /** Selection outline color [r,g,b] 0-1. Default: Figma blue. */
+    outlineColor: [number, number, number];
+    /** Selection outline width in screen px. */
+    outlineWidth: number;
+    /** Hover outline color [r,g,b] 0-1. */
+    hoverColor: [number, number, number];
+    /** Hover outline width in screen px. */
+    hoverWidth: number;
+    /** Handle size in screen px. */
+    handleSize: number;
+    /** Handle fill color [r,g,b] 0-1 (white). */
+    handleFill: [number, number, number];
+    /** Handle border color [r,g,b] 0-1 (same as outline). */
+    handleBorder: [number, number, number];
+    /** Handle border width in screen px. */
+    handleBorderWidth: number;
+    /** Group bbox dash length in screen px (0 = solid). */
+    groupDash: number;
+}
+declare const DEFAULT_SELECTION_CONFIG: SelectionConfig;
+interface SelectionBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+declare class SelectionRenderer {
+    private material;
+    private mesh;
+    private scene;
+    private camera;
+    constructor();
+    setConfig(config: Partial<SelectionConfig>): void;
+    setSize(resolution: THREE.Vector2, dpr: number): void;
+    render(renderer: THREE.WebGLRenderer, cameraX: number, cameraY: number, zoom: number, selected: SelectionBounds[], hovered: SelectionBounds | null, guides?: SnapGuide[], spacings?: EqualSpacingIndicator[]): void;
+    dispose(): void;
+}
+
+export { ContainerRefProvider as C, DEFAULT_GRID_CONFIG as D, EngineProvider as E, GridRenderer as G, type ResolvedWidget as R, SelectionRenderer as S, WidgetResolverProvider as W, type GridConfig as a, type SelectionConfig as b, DEFAULT_SELECTION_CONFIG as c, type SelectionBounds as d, useLayoutEngine as e, useWidgetResolver as f, useContainerRef as u };

package/dist/SelectionRenderer-rGYPadnn.d.ts

@@ -0,0 +1,102 @@
+import * as react from 'react';
+import { EntityId } from '@jamesyong42/reactive-ecs';
+import { L as LayoutEngine, q as DomWidgetProps, R as R3FWidgetProps, _ as SnapGuide, s as EqualSpacingIndicator } from './engine-DqgJ82tq.js';
+import * as THREE from 'three';
+
+declare const EngineProvider: react.Provider<LayoutEngine | null>;
+declare const ContainerRefProvider: react.Provider<react.RefObject<HTMLDivElement | null> | null>;
+declare function useContainerRef(): React.RefObject<HTMLDivElement | null> | null;
+/**
+ * Returns the LayoutEngine instance from the nearest InfiniteCanvas context.
+ * Throws if used outside an InfiniteCanvas provider.
+ */
+declare function useLayoutEngine(): LayoutEngine;
+
+/**
+ * Discriminated resolution of a widget by type. The surface determines which
+ * layer renders the component and with what prop shape.
+ */
+type ResolvedWidget = {
+    surface: 'dom';
+    component: React.ComponentType<DomWidgetProps>;
+} | {
+    surface: 'webgl';
+    component: React.ComponentType<R3FWidgetProps>;
+};
+type WidgetResolver = (entityId: EntityId, widgetType: string) => ResolvedWidget | null;
+declare const WidgetResolverProvider: react.Provider<WidgetResolver | null>;
+declare function useWidgetResolver(): WidgetResolver | null;
+
+interface GridConfig {
+    /** World-unit spacings for up to 3 grid levels [fine, medium, coarse]. */
+    spacings: [number, number, number];
+    /** Dot RGB color as [r, g, b] in 0–1 range. */
+    dotColor: [number, number, number];
+    /** Base dot opacity multiplier (0–1). */
+    dotAlpha: number;
+    /** CSS-pixel range where a grid level fades in: [start, end]. */
+    fadeIn: [number, number];
+    /** CSS-pixel range where a grid level fades out: [start, end]. */
+    fadeOut: [number, number];
+    /** Dot radius range in CSS pixels [min, max]. Scaled by DPR internally. */
+    dotRadius: [number, number];
+    /** Per-level opacity weight: level i gets (base + i * step). */
+    levelWeight: [number, number];
+}
+declare const DEFAULT_GRID_CONFIG: GridConfig;
+declare class GridRenderer {
+    private renderer;
+    private scene;
+    private camera;
+    private material;
+    private mesh;
+    constructor(canvas: HTMLCanvasElement);
+    /** Apply a (partial) grid config. Only provided fields are updated. */
+    setConfig(config: Partial<GridConfig>): void;
+    setSize(width: number, height: number, dpr?: number): void;
+    render(cameraX: number, cameraY: number, zoom: number): void;
+    dispose(): void;
+    /** Expose for future WebGL widget rendering */
+    getWebGLRenderer(): THREE.WebGLRenderer;
+}
+
+interface SelectionConfig {
+    /** Selection outline color [r,g,b] 0-1. Default: Figma blue. */
+    outlineColor: [number, number, number];
+    /** Selection outline width in screen px. */
+    outlineWidth: number;
+    /** Hover outline color [r,g,b] 0-1. */
+    hoverColor: [number, number, number];
+    /** Hover outline width in screen px. */
+    hoverWidth: number;
+    /** Handle size in screen px. */
+    handleSize: number;
+    /** Handle fill color [r,g,b] 0-1 (white). */
+    handleFill: [number, number, number];
+    /** Handle border color [r,g,b] 0-1 (same as outline). */
+    handleBorder: [number, number, number];
+    /** Handle border width in screen px. */
+    handleBorderWidth: number;
+    /** Group bbox dash length in screen px (0 = solid). */
+    groupDash: number;
+}
+declare const DEFAULT_SELECTION_CONFIG: SelectionConfig;
+interface SelectionBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+declare class SelectionRenderer {
+    private material;
+    private mesh;
+    private scene;
+    private camera;
+    constructor();
+    setConfig(config: Partial<SelectionConfig>): void;
+    setSize(resolution: THREE.Vector2, dpr: number): void;
+    render(renderer: THREE.WebGLRenderer, cameraX: number, cameraY: number, zoom: number, selected: SelectionBounds[], hovered: SelectionBounds | null, guides?: SnapGuide[], spacings?: EqualSpacingIndicator[]): void;
+    dispose(): void;
+}
+
+export { ContainerRefProvider as C, DEFAULT_GRID_CONFIG as D, EngineProvider as E, GridRenderer as G, type ResolvedWidget as R, SelectionRenderer as S, WidgetResolverProvider as W, type GridConfig as a, type SelectionConfig as b, DEFAULT_SELECTION_CONFIG as c, type SelectionBounds as d, useLayoutEngine as e, useWidgetResolver as f, useContainerRef as u };

package/dist/advanced.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkOFQ75B4X_cjs = require('./chunk-OFQ75B4X.cjs');
-require('./chunk-TX3ZABAK.cjs');
+var chunkFUPKRQB2_cjs = require('./chunk-FUPKRQB2.cjs');
+var chunk2KBYGER3_cjs = require('./chunk-2KBYGER3.cjs');
 
 // src/serialization.ts
 function serializeWorld(world, componentTypes, tagTypes, camera, navigationFrames) {
@@ -65,22 +65,22 @@ function deserializeWorld(world, doc, componentTypes, tagTypes) {
     }
   }
   for (const [_oldId, newId] of idMap) {
-    const parent = world.getComponent(newId, chunkOFQ75B4X_cjs.Parent);
+    const parent = world.getComponent(newId, chunk2KBYGER3_cjs.Parent);
     if (parent && idMap.has(parent.id)) {
       const mappedId = idMap.get(parent.id);
       if (mappedId !== void 0) {
-        world.setComponent(newId, chunkOFQ75B4X_cjs.Parent, { id: mappedId });
+        world.setComponent(newId, chunk2KBYGER3_cjs.Parent, { id: mappedId });
       }
     }
-    const children = world.getComponent(newId, chunkOFQ75B4X_cjs.Children);
+    const children = world.getComponent(newId, chunk2KBYGER3_cjs.Children);
     if (children) {
-      world.setComponent(newId, chunkOFQ75B4X_cjs.Children, {
+      world.setComponent(newId, chunk2KBYGER3_cjs.Children, {
         ids: children.ids.map((id) => idMap.get(id) ?? id)
       });
     }
-    const handleSet = world.getComponent(newId, chunkOFQ75B4X_cjs.HandleSet);
+    const handleSet = world.getComponent(newId, chunk2KBYGER3_cjs.HandleSet);
     if (handleSet) {
-      world.setComponent(newId, chunkOFQ75B4X_cjs.HandleSet, {
+      world.setComponent(newId, chunk2KBYGER3_cjs.HandleSet, {
         ids: handleSet.ids.map((id) => idMap.get(id) ?? id)
       });
     }
@@ -121,53 +121,53 @@ function serializeEntities(world, entityIds, componentTypes, tagTypes) {
   return result;
 }
 
-Object.defineProperty(exports, "ContainerRefProvider", {
-  enumerable: true,
-  get: function () { return chunkOFQ75B4X_cjs.ContainerRefProvider; }
-});
-Object.defineProperty(exports, "EngineProvider", {
-  enumerable: true,
-  get: function () { return chunkOFQ75B4X_cjs.EngineProvider; }
-});
 Object.defineProperty(exports, "GridRenderer", {
   enumerable: true,
-  get: function () { return chunkOFQ75B4X_cjs.GridRenderer; }
+  get: function () { return chunkFUPKRQB2_cjs.GridRenderer; }
 });
 Object.defineProperty(exports, "Profiler", {
   enumerable: true,
-  get: function () { return chunkOFQ75B4X_cjs.Profiler; }
+  get: function () { return chunkFUPKRQB2_cjs.Profiler; }
 });
 Object.defineProperty(exports, "SelectionOverlaySlot", {
   enumerable: true,
-  get: function () { return chunkOFQ75B4X_cjs.SelectionOverlaySlot; }
+  get: function () { return chunkFUPKRQB2_cjs.SelectionOverlaySlot; }
 });
 Object.defineProperty(exports, "SelectionRenderer", {
   enumerable: true,
-  get: function () { return chunkOFQ75B4X_cjs.SelectionRenderer; }
+  get: function () { return chunkFUPKRQB2_cjs.SelectionRenderer; }
 });
 Object.defineProperty(exports, "SpatialIndex", {
   enumerable: true,
-  get: function () { return chunkOFQ75B4X_cjs.SpatialIndex; }
+  get: function () { return chunkFUPKRQB2_cjs.SpatialIndex; }
 });
 Object.defineProperty(exports, "SpatialIndexResource", {
   enumerable: true,
-  get: function () { return chunkOFQ75B4X_cjs.SpatialIndexResource; }
+  get: function () { return chunkFUPKRQB2_cjs.SpatialIndexResource; }
 });
 Object.defineProperty(exports, "WebGLWidgetLayer", {
   enumerable: true,
-  get: function () { return chunkOFQ75B4X_cjs.WebGLWidgetLayer; }
+  get: function () { return chunkFUPKRQB2_cjs.WebGLWidgetLayer; }
 });
 Object.defineProperty(exports, "WebGLWidgetSlot", {
   enumerable: true,
-  get: function () { return chunkOFQ75B4X_cjs.WebGLWidgetSlot; }
+  get: function () { return chunkFUPKRQB2_cjs.WebGLWidgetSlot; }
 });
 Object.defineProperty(exports, "WidgetSlot", {
   enumerable: true,
-  get: function () { return chunkOFQ75B4X_cjs.WidgetSlot; }
+  get: function () { return chunkFUPKRQB2_cjs.WidgetSlot; }
 });
 Object.defineProperty(exports, "computeSnapGuides", {
   enumerable: true,
-  get: function () { return chunkOFQ75B4X_cjs.computeSnapGuides; }
+  get: function () { return chunkFUPKRQB2_cjs.computeSnapGuides; }
+});
+Object.defineProperty(exports, "ContainerRefProvider", {
+  enumerable: true,
+  get: function () { return chunk2KBYGER3_cjs.ContainerRefProvider; }
+});
+Object.defineProperty(exports, "EngineProvider", {
+  enumerable: true,
+  get: function () { return chunk2KBYGER3_cjs.EngineProvider; }
 });
 exports.deserializeWorld = deserializeWorld;
 exports.serializeEntities = serializeEntities;