@jamesyong42/infinite-canvas 1.0.0 → 1.2.0

package/README.md

@@ -17,7 +17,9 @@ Build Figma-style infinite canvases in React -- drag, resize, snap, zoom, nested
 - **Undo / redo** -- Command buffer with grouped operations (an entire drag is one undo step)
 - **Hierarchical navigation** -- Enter and exit nested containers with camera state preservation
 - **ECS architecture** -- Extensible via custom components, tags, and systems with topologically-sorted scheduling
+- **Card widgets** -- iOS-style preset-sized tiles (small / medium / large / xl) with rounded corners, soft shadows, and lift-on-drag animation; DOM or R3F/PBR flavors via `createCardWidget` / `createGeometryCardWidget`
 - **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
@@ -68,12 +70,13 @@ Widgets declare a **schema** (any [Standard Schema v1](https://standardschema.de
 
 ## Package
 
-Everything ships in a single package: **`@jamesyong42/infinite-canvas`**. It exposes two entry points:
+Everything ships in a single package: **`@jamesyong42/infinite-canvas`**. It exposes three entry points:
 
 | Import | Purpose |
 |--------|---------|
 | `@jamesyong42/infinite-canvas` | Main API -- `<InfiniteCanvas>`, `createLayoutEngine`, hooks, built-in components |
 | `@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).
 
@@ -103,6 +106,11 @@ The underlying ECS primitives (`defineComponent`, `defineSystem`, `World`, `Syst
 | `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
@@ -208,6 +216,97 @@ Spawning is uniform: `engine.spawn(id, options)`. If `id` matches an archetype,
 | `parent` | Parent entity id for nesting. |
 | `rotation` | Initial rotation in radians. |
 
+The `interactive` field on `Archetype` accepts a boolean or an object. Pass `{ selectable, draggable, resizable, selectionFrame }` (any subset) when you want finer control. Cards that move, select, but never resize and render their own chrome: `{ selectable: true, draggable: true, resizable: false, selectionFrame: false }`. Omitted keys default to `false`, except `selectionFrame` which follows `selectable` (an entity you can select gets a frame unless you opt out).
+
+## Card Widgets
+
+**Card widgets** are fixed-size, non-resizable widgets that sit on an iOS-style preset grid. They ship with rounded corners, a soft drop shadow, a hairline ring, and a subtle lift animation while dragging. Use them when you want dashboard-style tiles rather than free-form resizable surfaces.
+
+```tsx
+import { createCardWidget } from '@jamesyong42/infinite-canvas';
+import { z } from 'zod';
+
+const schema = z.object({ label: z.string().default('Hi') });
+
+export const Greeting = createCardWidget<{ label: string }>({
+  type: 'greeting-card',
+  size: 'small',                 // 'small' | 'medium' | 'large' | 'xl'
+  schema,
+  defaultData: { label: 'Hi' },
+  render: ({ data }) => (
+    <div className="flex h-full w-full items-center justify-center bg-white">
+      {data.label}
+    </div>
+  ),
+});
+
+// Register both the widget and the matching archetype.
+const engine = createLayoutEngine({
+  widgets: [Greeting.widget],
+  archetypes: [Greeting.archetype],
+});
+engine.spawn('greeting-card', { at: { x: 50, y: 50 } });
+```
+
+Preset sizes (default, matching iOS widget conventions on a 19 px grid):
+
+| Preset | Width × Height |
+|--------|----------------|
+| `small`  | 155 × 155 |
+| `medium` | 329 × 155 |
+| `large`  | 329 × 345 |
+| `xl`     | 329 × 535 |
+
+Override per-engine via `createLayoutEngine({ cardPresets: { presets: { small: { width: 200, height: 200 } }, gap: 24 } })`. Omitted presets keep their defaults.
+
+Under the hood: the returned widget wraps your `render` in `<CardFrame>` (exported for manual composition), the archetype is non-resizable, and it bundles a `Card` component. A built-in `cardSystem` stamps `Transform2D.width/height` from `Card.preset` each tick — to change a card's size at runtime, update the preset: `engine.set(id, Card, { preset: 'large' })`. Reading the `Dragging` tag from the frame drives the lift affordance; you can read it elsewhere too via `useTag(entityId, Dragging)`.
+
+Cards also opt out of the engine-drawn selection + hover outline (`selectionFrame: false` in their archetype) — the iOS rounded chrome in `<CardFrame>` is the card's visual contract, so the standard blue frame would fight it. If you need a selected/hover affordance inside a card, read `useIsSelected(entityId)` / `useTag(entityId, /* Hovered tag */)` from within `render` and style accordingly.
+
+### 3D Card Widgets
+
+`createGeometryCardWidget` is the R3F counterpart — same preset sizes, non-resizable archetype, and drag-lift behavior, but the widget body is a three.js scene instead of DOM content. The helper pairs cleanly with PBR materials.
+
+```tsx
+import { createGeometryCardWidget } from '@jamesyong42/infinite-canvas';
+import { useFrame } from '@react-three/fiber';
+import { useRef } from 'react';
+import type { Mesh } from 'three';
+import { z } from 'zod';
+
+const schema = z.object({ color: z.string().default('#F5B8D0') });
+
+export const Sphere = createGeometryCardWidget<{ color: string }>({
+  type: 'sphere',
+  size: 'small',
+  schema,
+  defaultData: { color: '#F5B8D0' },
+  background: 'card',                 // or 'transparent' — the geometry floats over the canvas
+  geometry: ({ data, width }) => {
+    const ref = useRef<Mesh>(null);
+    useFrame((_, dt) => { if (ref.current) ref.current.rotation.y += dt * 0.3; });
+    return (
+      <group>
+        <pointLight position={[80, 80, 120]} intensity={160} distance={300} decay={1.4} />
+        <ambientLight intensity={0.3} />
+        <mesh ref={ref}>
+          <sphereGeometry args={[width * 0.32, 48, 48]} />
+          <meshStandardMaterial color={data.color} roughness={0.35} />
+        </mesh>
+      </group>
+    );
+  },
+});
+```
+
+`background` options:
+
+- `'card'` (default) — a rounded iOS-style card mesh sits behind the geometry in the same widget group.
+- `'transparent'` — no back plane; the geometry floats over whatever's behind the widget.
+- `{ color, roughness?, metalness? }` — card back with custom PBR parameters for tinted or glossy variants.
+
+**Lighting caveat.** All R3F widgets share a single `<Canvas>`, so lights and `envMap`s you declare inside one widget's render function affect every other 3D widget. Keep per-widget lights `pointLight`s with `distance` scoped to the widget's size, or add one shared `<Environment>` at the app level (if you control the R3F canvas). The helper itself adds no lights — declare what you need inside your `geometry` component.
+
 ## WebGL Widgets (R3F)
 
 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):
@@ -333,6 +432,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
@@ -353,6 +488,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:
@@ -461,20 +617,25 @@ z:3  UI chrome
 | `InteractionRole` | Interaction behavior (drag, select, resize, etc.) |
 | `HandleSet` | Child handle entity references |
 | `CursorHint` | Cursor style on hover/active |
+| `Card` | Marks an iOS-style card; carries the preset (`small`/`medium`/`large`/`xl`) |
 
 ### ECS Tags
 
-`Selectable` `Draggable` `Resizable` `Locked` `Selected` `Active` `Visible`
+`Selectable` `Draggable` `Resizable` `SelectionFrame` `Locked` `Selected` `Dragging` `Active` `Visible`
+
+- `Dragging` — transient state tag (parallels `Selected`): added when the drag dead zone is crossed, removed on pointer up or cancel. Read via `useTag(entityId, Dragging)` to drive drag-time affordances.
+- `SelectionFrame` — opts an entity into the engine-drawn selection + hover outline. Granted automatically to Selectable entities via the archetype's `interactive` caps; widgets that render their own chrome (e.g. cards) opt out.
 
 ### Systems (execution order)
 
-1. `transformPropagate` -- Propagate transforms down hierarchy, compute WorldBounds
-2. `handleSync` -- Synchronize resize handle entities with parent widgets
-3. `hitboxWorldBounds` -- Compute world-space hitbox bounds
-4. `navigationFilter` -- Filter entities to active navigation layer
-5. `cull` -- Mark viewport-visible entities
-6. `breakpoint` -- Compute responsive breakpoints
-7. `sort` -- Z-index ordering
+1. `card` -- Stamp Transform2D size from Card preset
+2. `transformPropagate` -- Propagate transforms down hierarchy, compute WorldBounds
+3. `handleSync` -- Synchronize resize handle entities with parent widgets
+4. `hitboxWorldBounds` -- Compute world-space hitbox bounds
+5. `navigationFilter` -- Filter entities to active navigation layer
+6. `cull` -- Mark viewport-visible entities
+7. `breakpoint` -- Compute responsive breakpoints
+8. `sort` -- Z-index ordering
 
 ## Performance Profiling
 

package/dist/SelectionRenderer-CR2PBQwx.d.cts

@@ -0,0 +1,105 @@
+import { F as DomWidgetProps, L as R3FWidgetProps, b as EqualSpacingIndicator, n as LayoutEngine, x as SnapGuide } from "./engine-CCjuFMC-.cjs";
+import { EntityId } from "@jamesyong42/reactive-ecs";
+import * as _$react from "react";
+import * as THREE from "three";
+
+//#region src/react/context.d.ts
+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;
+//#endregion
+//#region src/react/webgl/GridRenderer.d.ts
+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;
+}
+//#endregion
+//#region src/react/webgl/SelectionRenderer.d.ts
+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;
+}
+//#endregion
+export { DEFAULT_GRID_CONFIG as a, ContainerRefProvider as c, WidgetResolverProvider as d, useContainerRef as f, SelectionRenderer as i, EngineProvider as l, useWidgetResolver as m, SelectionBounds as n, GridConfig as o, useLayoutEngine as p, SelectionConfig as r, GridRenderer as s, DEFAULT_SELECTION_CONFIG as t, ResolvedWidget as u };
+//# sourceMappingURL=SelectionRenderer-CR2PBQwx.d.cts.map

package/dist/SelectionRenderer-CR2PBQwx.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionRenderer-CR2PBQwx.d.cts","names":[],"sources":["../src/react/context.ts","../src/react/webgl/GridRenderer.ts","../src/react/webgl/SelectionRenderer.ts"],"mappings":";;;;;;cASa,cAAA,EAAc,OAAA,CAAA,QAAA,CAAA,YAAA;AAAA,cAOd,oBAAA,EAAoB,OAAA,CAAA,QAAA,CAAA,OAAA,CAAA,SAAA,CAAA,cAAA;AAAA,iBAEjB,eAAA,CAAA,GAAmB,KAAA,CAAM,SAAA,CAAU,cAAA;AATnD;;;;AAAA,iBAiBgB,eAAA,CAAA,GAAmB,YAAA;;;;;KAgBvB,cAAA;EACP,OAAA;EAAgB,SAAA,EAAW,KAAA,CAAM,aAAA,CAAc,cAAA;AAAA;EAC/C,OAAA;EAAkB,SAAA,EAAW,KAAA,CAAM,aAAA,CAAc,cAAA;AAAA;AAAA,KAE1C,cAAA,IAAkB,QAAA,EAAU,QAAA,EAAU,UAAA,aAAuB,cAAA;AAAA,cAI5D,sBAAA,EAAsB,OAAA,CAAA,QAAA,CAAA,cAAA;AAAA,iBAEnB,iBAAA,CAAA,GAAqB,cAAA;;;UChDpB,UAAA;;EAEhB,QAAA;;EAEA,QAAA;EDCY;ECCZ,QAAA;;EAEA,MAAA;EDH0B;ECK1B,OAAA;EDE+D;ECA/D,SAAA;EDAgC;ECEhC,WAAA;AAAA;AAAA,cAGY,mBAAA,EAAqB,UAAA;AAAA,cAoFrB,YAAA;EAAA,QACJ,QAAA;EAAA,QACA,KAAA;EAAA,QACA,MAAA;EAAA,QACA,QAAA;EAAA,QACA,IAAA;cAEI,MAAA,EAAQ,iBAAA;ED9FU;EC8I9B,SAAA,CAAU,MAAA,EAAQ,OAAA,CAAQ,UAAA;EAW1B,OAAA,CAAQ,KAAA,UAAe,MAAA,UAAgB,GAAA;EAQvC,MAAA,CAAO,OAAA,UAAiB,OAAA,UAAiB,IAAA;EAOzC,OAAA,CAAA;EDxKkD;EC+KlD,gBAAA,CAAA,GAAoB,KAAA,CAAM,aAAA;AAAA;;;UC3LV,eAAA;;EAEhB,YAAA;;EAEA,YAAA;EFDmD;EEGnD,UAAA;EFH0B;EEK1B,UAAA;EFEY;EEAZ,UAAA;;EAEA,UAAA;EFFgC;EEIhC,YAAA;EFJgC;EEMhC,iBAAA;EFNgC;EEQhC,SAAA;AAAA;AAAA,cAGY,wBAAA,EAA0B,eAAA;AAAA,UActB,eAAA;EAChB,CAAA;EACA,CAAA;EACA,KAAA;EACA,MAAA;AAAA;AAAA,cAoOY,iBAAA;EAAA,QACJ,QAAA;EAAA,QACA,IAAA;EAAA,QACA,KAAA;EAAA,QACA,MAAA;;EAsDR,SAAA,CAAU,MAAA,EAAQ,OAAA,CAAQ,eAAA;EAc1B,OAAA,CAAQ,UAAA,EAAY,KAAA,CAAM,OAAA,EAAS,GAAA;EAKnC,MAAA,CACC,QAAA,EAAU,KAAA,CAAM,aAAA,EAChB,OAAA,UACA,OAAA,UACA,IAAA,UACA,QAAA,EAAU,eAAA,IACV,OAAA,EAAS,eAAA,SACT,MAAA,GAAQ,SAAA,IACR,QAAA,GAAU,qBAAA;EAiFX,OAAA,CAAA;AAAA"}

package/dist/SelectionRenderer-DlsBstAq.d.mts

@@ -0,0 +1,105 @@
+import { F as DomWidgetProps, L as R3FWidgetProps, b as EqualSpacingIndicator, n as LayoutEngine, x as SnapGuide } from "./engine-BfbvWXSk.mjs";
+import { EntityId } from "@jamesyong42/reactive-ecs";
+import * as _$react from "react";
+import * as THREE from "three";
+
+//#region src/react/context.d.ts
+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;
+//#endregion
+//#region src/react/webgl/GridRenderer.d.ts
+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;
+}
+//#endregion
+//#region src/react/webgl/SelectionRenderer.d.ts
+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;
+}
+//#endregion
+export { DEFAULT_GRID_CONFIG as a, ContainerRefProvider as c, WidgetResolverProvider as d, useContainerRef as f, SelectionRenderer as i, EngineProvider as l, useWidgetResolver as m, SelectionBounds as n, GridConfig as o, useLayoutEngine as p, SelectionConfig as r, GridRenderer as s, DEFAULT_SELECTION_CONFIG as t, ResolvedWidget as u };
+//# sourceMappingURL=SelectionRenderer-DlsBstAq.d.mts.map

package/dist/SelectionRenderer-DlsBstAq.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionRenderer-DlsBstAq.d.mts","names":[],"sources":["../src/react/context.ts","../src/react/webgl/GridRenderer.ts","../src/react/webgl/SelectionRenderer.ts"],"mappings":";;;;;;cASa,cAAA,EAAc,OAAA,CAAA,QAAA,CAAA,YAAA;AAAA,cAOd,oBAAA,EAAoB,OAAA,CAAA,QAAA,CAAA,OAAA,CAAA,SAAA,CAAA,cAAA;AAAA,iBAEjB,eAAA,CAAA,GAAmB,KAAA,CAAM,SAAA,CAAU,cAAA;AATnD;;;;AAAA,iBAiBgB,eAAA,CAAA,GAAmB,YAAA;;;;;KAgBvB,cAAA;EACP,OAAA;EAAgB,SAAA,EAAW,KAAA,CAAM,aAAA,CAAc,cAAA;AAAA;EAC/C,OAAA;EAAkB,SAAA,EAAW,KAAA,CAAM,aAAA,CAAc,cAAA;AAAA;AAAA,KAE1C,cAAA,IAAkB,QAAA,EAAU,QAAA,EAAU,UAAA,aAAuB,cAAA;AAAA,cAI5D,sBAAA,EAAsB,OAAA,CAAA,QAAA,CAAA,cAAA;AAAA,iBAEnB,iBAAA,CAAA,GAAqB,cAAA;;;UChDpB,UAAA;;EAEhB,QAAA;;EAEA,QAAA;EDCY;ECCZ,QAAA;;EAEA,MAAA;EDH0B;ECK1B,OAAA;EDE+D;ECA/D,SAAA;EDAgC;ECEhC,WAAA;AAAA;AAAA,cAGY,mBAAA,EAAqB,UAAA;AAAA,cAoFrB,YAAA;EAAA,QACJ,QAAA;EAAA,QACA,KAAA;EAAA,QACA,MAAA;EAAA,QACA,QAAA;EAAA,QACA,IAAA;cAEI,MAAA,EAAQ,iBAAA;ED9FU;EC8I9B,SAAA,CAAU,MAAA,EAAQ,OAAA,CAAQ,UAAA;EAW1B,OAAA,CAAQ,KAAA,UAAe,MAAA,UAAgB,GAAA;EAQvC,MAAA,CAAO,OAAA,UAAiB,OAAA,UAAiB,IAAA;EAOzC,OAAA,CAAA;EDxKkD;EC+KlD,gBAAA,CAAA,GAAoB,KAAA,CAAM,aAAA;AAAA;;;UC3LV,eAAA;;EAEhB,YAAA;;EAEA,YAAA;EFDmD;EEGnD,UAAA;EFH0B;EEK1B,UAAA;EFEY;EEAZ,UAAA;;EAEA,UAAA;EFFgC;EEIhC,YAAA;EFJgC;EEMhC,iBAAA;EFNgC;EEQhC,SAAA;AAAA;AAAA,cAGY,wBAAA,EAA0B,eAAA;AAAA,UActB,eAAA;EAChB,CAAA;EACA,CAAA;EACA,KAAA;EACA,MAAA;AAAA;AAAA,cAoOY,iBAAA;EAAA,QACJ,QAAA;EAAA,QACA,IAAA;EAAA,QACA,KAAA;EAAA,QACA,MAAA;;EAsDR,SAAA,CAAU,MAAA,EAAQ,OAAA,CAAQ,eAAA;EAc1B,OAAA,CAAQ,UAAA,EAAY,KAAA,CAAM,OAAA,EAAS,GAAA;EAKnC,MAAA,CACC,QAAA,EAAU,KAAA,CAAM,aAAA,EAChB,OAAA,UACA,OAAA,UACA,IAAA,UACA,QAAA,EAAU,eAAA,IACV,OAAA,EAAS,eAAA,SACT,MAAA,GAAQ,SAAA,IACR,QAAA,GAAU,qBAAA;EAiFX,OAAA,CAAA;AAAA"}