@zylem/editor 0.7.3 → 0.7.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,112 +1,58 @@
1
- import { Component } from 'solid-js';
2
- import { LucideProps } from 'lucide-solid';
3
1
  import * as _zylem_bridge from '@zylem/bridge';
4
- import { BridgeDebugTool, BridgeVec3, BridgeQuat, BridgePose, SnapSettingsPayload, SceneOperationPayload, EntityTypeDescriptor } from '@zylem/bridge';
5
-
6
- /**
7
- * Editor Event Bus
8
- *
9
- * Wraps the shared zylemEventBus to provide backward-compatible API
10
- * for the editor package. This allows external code to dispatch state
11
- * updates to the editor using the familiar editorEvents API.
12
- */
2
+ import { BridgePose, BridgeVec3, BridgeQuat, SnapSettingsPayload, BridgeDebugTool, SceneOperationPayload, EntityTypeDescriptor } from '@zylem/bridge';
3
+ import { LucideProps } from 'lucide-solid';
4
+ import { Component } from 'solid-js';
13
5
 
14
- type EditorEventType = 'debug' | 'game' | 'stage' | 'entities';
15
- interface EditorEvent<T = unknown> {
16
- type: EditorEventType;
17
- payload: T;
18
- }
19
- type EventHandler<T = unknown> = (event: EditorEvent<T>) => void;
20
- /**
21
- * Backward-compatible wrapper around zylemEventBus.
22
- * Maintains the existing editorEvents.emit({ type, payload }) API
23
- * while internally using the shared Mitt-based event bus.
24
- */
25
- declare class EditorEventBusWrapper {
26
- private legacyListeners;
27
- /**
28
- * Emit an event to all registered listeners of that type.
29
- * Also emits to the global zylemEventBus for cross-package communication.
30
- */
31
- emit<T>(event: EditorEvent<T>): void;
32
- /**
33
- * Subscribe to events of a specific type.
34
- * Returns an unsubscribe function.
35
- */
36
- on<T>(type: EditorEventType, handler: EventHandler<T>): () => void;
37
- /**
38
- * Remove all listeners (useful for cleanup).
39
- */
40
- clear(): void;
41
- }
6
+ declare const channel: _zylem_bridge.BridgeChannel;
42
7
  /**
43
- * Global editor event bus instance.
8
+ * Subscribe the editor stores to game→editor bridge messages and hydrate
9
+ * from the channel's retained state.
44
10
  *
45
- * Usage from game-lib:
46
- * ```ts
47
- * import { editorEvents } from '@zylem/editor';
48
- * editorEvents.emit({ type: 'debug', payload: { enabled: true } });
49
- * ```
11
+ * Reference-counted: the game gates expensive editor-only work (thumbnails,
12
+ * entity summaries) on these subscriptions existing, so the last editor to
13
+ * unmount must actually release them, while any editor still mounted must
14
+ * keep them alive.
50
15
  *
51
- * Usage from editor components:
52
- * ```ts
53
- * editorEvents.on('debug', (e) => setDebugState(e.payload));
54
- * ```
55
- */
56
- declare const editorEvents: EditorEventBusWrapper;
57
-
58
- /**
59
- * Entities state for the entities section.
60
- * Manages debug state and entity selection/hover.
16
+ * @returns A release function; safe to call more than once.
61
17
  */
62
- type DebugTools = 'select' | 'translate' | 'rotate' | 'scale' | 'delete' | 'add' | 'none';
63
- interface DebugState {
64
- paused: boolean;
65
- tool: DebugTools;
66
- selectedEntityId: string | null;
67
- /**
68
- * Full selection, mirroring the game. `selectedEntityId` is its first entry,
69
- * kept so single-select consumers need no change.
70
- */
71
- selectedEntityIds: string[];
72
- hoveredEntityId: string | null;
73
- /**
74
- * Most recently selected or created entity, kept after it is deselected.
75
- *
76
- * What the gizmo tools fall back to: pressing Rotate with nothing selected
77
- * should turn the thing you were last working on, rather than nothing. Never
78
- * cleared on deselect — only overwritten — and validated against the current
79
- * entity list at the point of use, since the entity it names can be deleted
80
- * or undone away.
81
- */
82
- lastTouchedEntityId: string | null;
83
- flags: Set<string>;
84
- }
85
- declare const debugState: DebugState;
86
-
18
+ declare function connectEditorBridge(): () => void;
19
+ /** Tear down all bridge subscriptions, ignoring the reference count. */
20
+ declare function disconnectEditorBridge(): void;
21
+ /** Toggle the game's debug mode. */
22
+ declare function sendDebugEnabled(enabled: boolean): void;
23
+ /** Switch the active editor tool in the game. */
24
+ declare function sendTool(tool: BridgeDebugTool): void;
25
+ /** Pause or resume the game loop. */
26
+ declare function sendPlayback(paused: boolean): void;
27
+ /** Select an entity in the game (null clears the selection). */
28
+ declare function sendEntitySelect(uuid: string | null): void;
29
+ /** Focus/frame the game debug camera on an entity. */
30
+ declare function sendEntityFocus(uuid: string): void;
31
+ /** Write a stage variable in the running game. */
32
+ declare function sendStageVariable(key: string, value: unknown): void;
87
33
  /**
88
- * Game state for the game section.
89
- * Manages global game variables and state.
34
+ * Set an entity's transform absolutely.
35
+ *
36
+ * `quaternion` is authoritative when supplied; `rotation` is Euler radians for
37
+ * the numeric fields, and round-trips less cleanly.
90
38
  */
91
- /** Game config state from game-lib */
92
- interface GameConfigState {
93
- id: string;
94
- aspectRatio: number;
95
- fullscreen: boolean;
96
- bodyBackground: string | undefined;
97
- internalResolution: {
98
- width: number;
99
- height: number;
100
- } | undefined;
101
- debug: boolean;
102
- }
103
- interface GameState {
104
- id: string;
105
- globals: Record<string, unknown>;
106
- time: number;
107
- config: GameConfigState | null;
108
- }
109
- declare const gameState: GameState;
39
+ declare function sendEntityTransform(uuid: string, transform: {
40
+ position?: BridgeVec3;
41
+ rotation?: BridgeVec3;
42
+ quaternion?: BridgeQuat;
43
+ scale?: BridgeVec3;
44
+ }): void;
45
+ /** Arm the game's add tool with a catalog type, or `null` to disarm it. */
46
+ declare function sendAddType(typeId: string | null, props?: Record<string, unknown>): void;
47
+ /** Spawn a catalog entity without a placement click. */
48
+ declare function sendEntityCreate(typeId: string, options?: {
49
+ props?: Record<string, unknown>;
50
+ pose?: BridgePose;
51
+ }): void;
52
+ /** Push snap increments to the game's gizmo. */
53
+ declare function sendSnapSettings(snap: SnapSettingsPayload): void;
54
+ /** Show or hide the game's construction-plane grid. */
55
+ declare function sendGridVisible(visible: boolean): void;
110
56
 
111
57
  /**
112
58
  * Shared types for the editor store.
@@ -153,13 +99,6 @@ interface StageStateInterface {
153
99
  entities: Partial<BaseEntityInterface>[];
154
100
  }
155
101
 
156
- /**
157
- * Stage state for the stages section.
158
- * Manages stage configuration and entity list.
159
- */
160
-
161
- declare const stageState: StageStateInterface;
162
-
163
102
  /**
164
103
  * Dock layout geometry.
165
104
  *
@@ -210,6 +149,59 @@ interface DockLayoutOptions {
210
149
  */
211
150
  declare const computeDockLayout: (registry: DockRegistry, viewport: Viewport, options?: DockLayoutOptions) => Record<DockPanelId, DockRect>;
212
151
 
152
+ /**
153
+ * Entities state for the entities section.
154
+ * Manages debug state and entity selection/hover.
155
+ */
156
+ type DebugTools = 'select' | 'translate' | 'rotate' | 'scale' | 'delete' | 'add' | 'none';
157
+ interface DebugState {
158
+ paused: boolean;
159
+ tool: DebugTools;
160
+ selectedEntityId: string | null;
161
+ /**
162
+ * Full selection, mirroring the game. `selectedEntityId` is its first entry,
163
+ * kept so single-select consumers need no change.
164
+ */
165
+ selectedEntityIds: string[];
166
+ hoveredEntityId: string | null;
167
+ /**
168
+ * Most recently selected or created entity, kept after it is deselected.
169
+ *
170
+ * What the gizmo tools fall back to: pressing Rotate with nothing selected
171
+ * should turn the thing you were last working on, rather than nothing. Never
172
+ * cleared on deselect — only overwritten — and validated against the current
173
+ * entity list at the point of use, since the entity it names can be deleted
174
+ * or undone away.
175
+ */
176
+ lastTouchedEntityId: string | null;
177
+ flags: Set<string>;
178
+ }
179
+ declare const debugState: DebugState;
180
+
181
+ /**
182
+ * Game state for the game section.
183
+ * Manages global game variables and state.
184
+ */
185
+ /** Game config state from game-lib */
186
+ interface GameConfigState {
187
+ id: string;
188
+ aspectRatio: number;
189
+ fullscreen: boolean;
190
+ bodyBackground: string | undefined;
191
+ internalResolution: {
192
+ width: number;
193
+ height: number;
194
+ } | undefined;
195
+ debug: boolean;
196
+ }
197
+ interface GameState {
198
+ id: string;
199
+ globals: Record<string, unknown>;
200
+ time: number;
201
+ config: GameConfigState | null;
202
+ }
203
+ declare const gameState: GameState;
204
+
213
205
  /** Registry id of the main editor panel; detached sections use their panel id. */
214
206
  declare const MAIN_PANEL_ID = "main";
215
207
  interface DetachedPanelState {
@@ -258,200 +250,69 @@ declare const dockPanelToSide: (panelId: DockPanelId, side: DockSide, index?: nu
258
250
  declare const undockPanelFromSides: (panelId: DockPanelId) => void;
259
251
  declare const getDockedSide: (panelId: DockPanelId) => DockSide | null;
260
252
 
261
- type EditorLauncherMode = 'floating' | 'hidden';
262
-
263
253
  /**
264
- * Configuration options for the ZylemEditorElement
254
+ * Editor Event Bus
255
+ *
256
+ * Wraps the shared zylemEventBus to provide backward-compatible API
257
+ * for the editor package. This allows external code to dispatch state
258
+ * updates to the editor using the familiar editorEvents API.
265
259
  */
266
- interface ZylemEditorConfig {
267
- /**
268
- * External debug state to sync with.
269
- * If provided, the editor will use this state instead of its internal state.
270
- */
271
- debugState?: any;
272
- /**
273
- * External game state to sync with.
274
- */
275
- gameState?: any;
276
- /**
277
- * External stage state to sync with.
278
- */
279
- stageState?: any;
280
- /**
281
- * Whether to include default styles.
282
- * @default true
283
- */
284
- includeStyles?: boolean;
285
- /**
286
- * Controls whether the internal floating launcher is rendered.
287
- * @default 'floating'
288
- */
289
- launcherMode?: EditorLauncherMode;
290
- /**
291
- * Dock layout to seed the first time the editor runs in this browser, keyed
292
- * by viewport edge. Use `'main'` for the editor panel itself; any other id is
293
- * a section (for example `'console'`), which gets detached from the accordion
294
- * so it can hold a dock slot.
295
- *
296
- * Ignored once the user has a saved layout, so it sets a starting point
297
- * rather than forcing one.
298
- */
299
- defaultDocks?: EditorDockDefaults;
300
- /**
301
- * Whether the editor claims cmd/ctrl+z for its own undo stack.
302
- *
303
- * Disable it when embedding the editor in an app with its own history, and
304
- * call the exported `undo()` / `redo()` from that app's handler instead.
305
- * @default true
306
- */
307
- enableUndoShortcut?: boolean;
308
- /**
309
- * Whether Escape disarms the active tool.
310
- * @default true
311
- */
312
- enableEscapeShortcut?: boolean;
260
+
261
+ type EditorEventType = 'debug' | 'game' | 'stage' | 'entities';
262
+ interface EditorEvent<T = unknown> {
263
+ type: EditorEventType;
264
+ payload: T;
313
265
  }
266
+ type EventHandler<T = unknown> = (event: EditorEvent<T>) => void;
314
267
  /**
315
- * ZylemEditorElement - A web component that wraps the Zylem Editor.
316
- *
317
- * This component is fully self-contained with bundled styles.
318
- * It can be imported and used in any project without additional CSS configuration.
319
- *
320
- * @example
321
- * ```html
322
- * <!-- Standalone usage -->
323
- * <zylem-editor></zylem-editor>
324
- * ```
325
- *
326
- * @example
327
- * ```js
328
- * // Configured usage
329
- * const editor = document.querySelector('zylem-editor');
330
- * editor.config = {
331
- * debugState: myGame.debugState,
332
- * gameState: myGame.gameState,
333
- * stageState: myGame.stageState,
334
- * };
335
- * ```
336
- *
337
- * @example
338
- * ```js
339
- * // Manual registration in another project
340
- * import { ZylemEditorElement } from '@zylem/editor';
341
- *
342
- * // Optionally customize before registering
343
- * customElements.define('my-editor', ZylemEditorElement);
344
- * ```
268
+ * Backward-compatible wrapper around zylemEventBus.
269
+ * Maintains the existing editorEvents.emit({ type, payload }) API
270
+ * while internally using the shared Mitt-based event bus.
345
271
  */
346
- declare class ZylemEditorElement extends HTMLElement {
347
- private dispose;
348
- private _config;
349
- private _initialized;
350
- private controller;
351
- /** Releases this element's bridge subscription (reference-counted). */
352
- private releaseBridge;
353
- /** Keyboard shortcuts and the snap/grid mirror, torn down with the element. */
354
- private teardownHooks;
355
- constructor();
356
- /**
357
- * Set configuration for the editor.
358
- * Must be set before the element is connected to the DOM, or call `reinitialize()` after.
359
- */
360
- set config(value: ZylemEditorConfig);
361
- get config(): ZylemEditorConfig;
362
- set launcherMode(value: EditorLauncherMode);
363
- get launcherMode(): EditorLauncherMode;
272
+ declare class EditorEventBusWrapper {
273
+ private legacyListeners;
364
274
  /**
365
- * Observed attributes for the web component
275
+ * Emit an event to all registered listeners of that type.
276
+ * Also emits to the global zylemEventBus for cross-package communication.
366
277
  */
367
- static get observedAttributes(): string[];
368
- attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
369
- connectedCallback(): void;
370
- private initialize;
371
- openPanel(): void;
372
- closePanel(): void;
373
- togglePanel(): void;
278
+ emit<T>(event: EditorEvent<T>): void;
374
279
  /**
375
- * Dock a panel to a viewport edge, or pass `null` to float it again.
376
- * Defaults to the main editor panel.
280
+ * Subscribe to events of a specific type.
281
+ * Returns an unsubscribe function.
377
282
  */
378
- dockPanel(side: DockSide | null, panelId?: DockPanelId): void;
283
+ on<T>(type: EditorEventType, handler: EventHandler<T>): () => void;
379
284
  /**
380
- * Reinitialize the editor with new configuration.
381
- * Call this after changing the `config` property if the element is already connected.
285
+ * Remove all listeners (useful for cleanup).
382
286
  */
383
- reinitialize(): void;
384
- disconnectedCallback(): void;
385
- private teardown;
287
+ clear(): void;
386
288
  }
387
289
  /**
388
- * Register the ZylemEditorElement as a custom element.
389
- * Call this function to use the default 'zylem-editor' tag name.
290
+ * Global editor event bus instance.
390
291
  *
391
- * @example
392
- * ```js
393
- * import { registerZylemEditor } from '@zylem/editor';
394
- * registerZylemEditor();
395
- * // Now you can use <zylem-editor> in your HTML
292
+ * Usage from game-lib:
293
+ * ```ts
294
+ * import { editorEvents } from '@zylem/editor';
295
+ * editorEvents.emit({ type: 'debug', payload: { enabled: true } });
396
296
  * ```
397
- */
398
- declare function registerZylemEditor(tagName?: string): void;
399
-
400
- interface IconProps extends LucideProps {
401
- icon: Component<LucideProps>;
402
- }
403
- declare const Icon: Component<IconProps>;
404
-
405
- declare const channel: _zylem_bridge.BridgeChannel;
406
- /**
407
- * Subscribe the editor stores to game→editor bridge messages and hydrate
408
- * from the channel's retained state.
409
297
  *
410
- * Reference-counted: the game gates expensive editor-only work (thumbnails,
411
- * entity summaries) on these subscriptions existing, so the last editor to
412
- * unmount must actually release them, while any editor still mounted must
413
- * keep them alive.
414
- *
415
- * @returns A release function; safe to call more than once.
298
+ * Usage from editor components:
299
+ * ```ts
300
+ * editorEvents.on('debug', (e) => setDebugState(e.payload));
301
+ * ```
416
302
  */
417
- declare function connectEditorBridge(): () => void;
418
- /** Tear down all bridge subscriptions, ignoring the reference count. */
419
- declare function disconnectEditorBridge(): void;
420
- /** Toggle the game's debug mode. */
421
- declare function sendDebugEnabled(enabled: boolean): void;
422
- /** Switch the active editor tool in the game. */
423
- declare function sendTool(tool: BridgeDebugTool): void;
424
- /** Pause or resume the game loop. */
425
- declare function sendPlayback(paused: boolean): void;
426
- /** Select an entity in the game (null clears the selection). */
427
- declare function sendEntitySelect(uuid: string | null): void;
428
- /** Focus/frame the game debug camera on an entity. */
429
- declare function sendEntityFocus(uuid: string): void;
430
- /** Write a stage variable in the running game. */
431
- declare function sendStageVariable(key: string, value: unknown): void;
303
+ declare const editorEvents: EditorEventBusWrapper;
304
+
432
305
  /**
433
- * Set an entity's transform absolutely.
434
- *
435
- * `quaternion` is authoritative when supplied; `rotation` is Euler radians for
436
- * the numeric fields, and round-trips less cleanly.
306
+ * Stage state for the stages section.
307
+ * Manages stage configuration and entity list.
437
308
  */
438
- declare function sendEntityTransform(uuid: string, transform: {
439
- position?: BridgeVec3;
440
- rotation?: BridgeVec3;
441
- quaternion?: BridgeQuat;
442
- scale?: BridgeVec3;
443
- }): void;
444
- /** Arm the game's add tool with a catalog type, or `null` to disarm it. */
445
- declare function sendAddType(typeId: string | null, props?: Record<string, unknown>): void;
446
- /** Spawn a catalog entity without a placement click. */
447
- declare function sendEntityCreate(typeId: string, options?: {
448
- props?: Record<string, unknown>;
449
- pose?: BridgePose;
450
- }): void;
451
- /** Push snap increments to the game's gizmo. */
452
- declare function sendSnapSettings(snap: SnapSettingsPayload): void;
453
- /** Show or hide the game's construction-plane grid. */
454
- declare function sendGridVisible(visible: boolean): void;
309
+
310
+ declare const stageState: StageStateInterface;
311
+
312
+ interface IconProps extends LucideProps {
313
+ icon: Component<LucideProps>;
314
+ }
315
+ declare const Icon: Component<IconProps>;
455
316
 
456
317
  /**
457
318
  * Undo/redo history for scene edits.
@@ -498,6 +359,56 @@ declare function redo(): boolean;
498
359
  */
499
360
  declare function clearHistory(): void;
500
361
 
362
+ /**
363
+ * Stage export.
364
+ *
365
+ * Edits are runtime-only: moving a crate in the editor does not rewrite the
366
+ * source that created it. Export is the bridge between the two — it dumps the
367
+ * current stage as JSON so the values can be pasted back into the code that
368
+ * authored the scene. Source write-back is a later problem; this makes the work
369
+ * recoverable in the meantime.
370
+ *
371
+ * Built from the editor's own bridge state rather than `@zylem/game-lib/schema`,
372
+ * because the editor has no game-lib dependency at runtime and the entity
373
+ * blueprint schema stores 2D positions, which would drop the Z of every
374
+ * transform this feature exists to preserve.
375
+ */
376
+
377
+ interface StageExportEntity {
378
+ uuid: string;
379
+ name?: string;
380
+ type?: string;
381
+ position?: Vector3Like;
382
+ /** Euler angles in radians, matching the game's own representation. */
383
+ rotation?: Vector3Like;
384
+ scale?: Vector3Like;
385
+ }
386
+ interface StageExport {
387
+ /** Bumped when the shape changes, so an old file is recognisable. */
388
+ version: 1;
389
+ exportedAt: string;
390
+ stage: {
391
+ id: string;
392
+ backgroundColor: string;
393
+ backgroundImage: string | null;
394
+ gravity: Vector3Like;
395
+ variables: Record<string, unknown>;
396
+ } | null;
397
+ entities: StageExportEntity[];
398
+ }
399
+ /** Snapshot the current stage as a plain, serializable object. */
400
+ declare function buildStageExport(): StageExport;
401
+ /** The export as formatted JSON. */
402
+ declare function stageExportToString(): string;
403
+ /**
404
+ * Copy the export to the clipboard.
405
+ *
406
+ * @returns The serialized stage when the copy succeeded, or `null` when the
407
+ * clipboard was unavailable — over plain HTTP, or without a user gesture, the
408
+ * API is either missing or rejects, and the caller falls back to the console.
409
+ */
410
+ declare function copyStageExport(): Promise<string | null>;
411
+
501
412
  /**
502
413
  * The placeable entity types the game offers, and which one the Add tool is
503
414
  * armed with.
@@ -572,73 +483,144 @@ declare function setSnapEnabled(enabled: boolean): void;
572
483
  declare function setSnapIncrements(increments: Partial<Pick<TransformState, 'translate' | 'rotate' | 'scale'>>): void;
573
484
  declare function setGridVisible(visible: boolean): void;
574
485
 
575
- /**
576
- * Host observation of committed scene edits.
577
- *
578
- * Every edit the editor records is also announced here, so an embedding app can
579
- * react to it — persisting a layout, marking a document dirty, or eventually
580
- * writing changes back to source. Kept in its own module so `editor-bridge` does
581
- * not have to import the host surface (which imports the bridge), which would be
582
- * circular.
583
- */
486
+ type EditorLauncherMode = 'floating' | 'hidden';
584
487
 
585
- type SceneOperationListener = (op: SceneOperationPayload) => void;
586
488
  /**
587
- * Observe committed scene operations.
588
- *
589
- * @returns An unsubscribe function.
489
+ * Configuration options for the ZylemEditorElement
590
490
  */
591
- declare function onSceneOperation(listener: SceneOperationListener): () => void;
592
-
491
+ interface ZylemEditorConfig {
492
+ /**
493
+ * External debug state to sync with.
494
+ * If provided, the editor will use this state instead of its internal state.
495
+ */
496
+ debugState?: any;
497
+ /**
498
+ * External game state to sync with.
499
+ */
500
+ gameState?: any;
501
+ /**
502
+ * External stage state to sync with.
503
+ */
504
+ stageState?: any;
505
+ /**
506
+ * Whether to include default styles.
507
+ * @default true
508
+ */
509
+ includeStyles?: boolean;
510
+ /**
511
+ * Controls whether the internal floating launcher is rendered.
512
+ * @default 'floating'
513
+ */
514
+ launcherMode?: EditorLauncherMode;
515
+ /**
516
+ * Dock layout to seed the first time the editor runs in this browser, keyed
517
+ * by viewport edge. Use `'main'` for the editor panel itself; any other id is
518
+ * a section (for example `'console'`), which gets detached from the accordion
519
+ * so it can hold a dock slot.
520
+ *
521
+ * Ignored once the user has a saved layout, so it sets a starting point
522
+ * rather than forcing one.
523
+ */
524
+ defaultDocks?: EditorDockDefaults;
525
+ /**
526
+ * Whether the editor claims cmd/ctrl+z for its own undo stack.
527
+ *
528
+ * Disable it when embedding the editor in an app with its own history, and
529
+ * call the exported `undo()` / `redo()` from that app's handler instead.
530
+ * @default true
531
+ */
532
+ enableUndoShortcut?: boolean;
533
+ /**
534
+ * Whether Escape disarms the active tool.
535
+ * @default true
536
+ */
537
+ enableEscapeShortcut?: boolean;
538
+ }
593
539
  /**
594
- * Stage export.
540
+ * ZylemEditorElement - A web component that wraps the Zylem Editor.
595
541
  *
596
- * Edits are runtime-only: moving a crate in the editor does not rewrite the
597
- * source that created it. Export is the bridge between the two — it dumps the
598
- * current stage as JSON so the values can be pasted back into the code that
599
- * authored the scene. Source write-back is a later problem; this makes the work
600
- * recoverable in the meantime.
542
+ * This component is fully self-contained with bundled styles.
543
+ * It can be imported and used in any project without additional CSS configuration.
601
544
  *
602
- * Built from the editor's own bridge state rather than `@zylem/game-lib/schema`,
603
- * because the editor has no game-lib dependency at runtime and the entity
604
- * blueprint schema stores 2D positions, which would drop the Z of every
605
- * transform this feature exists to preserve.
545
+ * @example
546
+ * ```html
547
+ * <!-- Standalone usage -->
548
+ * <zylem-editor></zylem-editor>
549
+ * ```
550
+ *
551
+ * @example
552
+ * ```js
553
+ * // Configured usage
554
+ * const editor = document.querySelector('zylem-editor');
555
+ * editor.config = {
556
+ * debugState: myGame.debugState,
557
+ * gameState: myGame.gameState,
558
+ * stageState: myGame.stageState,
559
+ * };
560
+ * ```
561
+ *
562
+ * @example
563
+ * ```js
564
+ * // Manual registration in another project
565
+ * import { ZylemEditorElement } from '@zylem/editor';
566
+ *
567
+ * // Optionally customize before registering
568
+ * customElements.define('my-editor', ZylemEditorElement);
569
+ * ```
606
570
  */
607
-
608
- interface StageExportEntity {
609
- uuid: string;
610
- name?: string;
611
- type?: string;
612
- position?: Vector3Like;
613
- /** Euler angles in radians, matching the game's own representation. */
614
- rotation?: Vector3Like;
615
- scale?: Vector3Like;
616
- }
617
- interface StageExport {
618
- /** Bumped when the shape changes, so an old file is recognisable. */
619
- version: 1;
620
- exportedAt: string;
621
- stage: {
622
- id: string;
623
- backgroundColor: string;
624
- backgroundImage: string | null;
625
- gravity: Vector3Like;
626
- variables: Record<string, unknown>;
627
- } | null;
628
- entities: StageExportEntity[];
571
+ declare class ZylemEditorElement extends HTMLElement {
572
+ private dispose;
573
+ private _config;
574
+ private _initialized;
575
+ private controller;
576
+ /** Releases this element's bridge subscription (reference-counted). */
577
+ private releaseBridge;
578
+ /** Keyboard shortcuts and the snap/grid mirror, torn down with the element. */
579
+ private teardownHooks;
580
+ constructor();
581
+ /**
582
+ * Set configuration for the editor.
583
+ * Must be set before the element is connected to the DOM, or call `reinitialize()` after.
584
+ */
585
+ set config(value: ZylemEditorConfig);
586
+ get config(): ZylemEditorConfig;
587
+ set launcherMode(value: EditorLauncherMode);
588
+ get launcherMode(): EditorLauncherMode;
589
+ /**
590
+ * Observed attributes for the web component
591
+ */
592
+ static get observedAttributes(): string[];
593
+ attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
594
+ connectedCallback(): void;
595
+ private initialize;
596
+ openPanel(): void;
597
+ closePanel(): void;
598
+ togglePanel(): void;
599
+ /**
600
+ * Dock a panel to a viewport edge, or pass `null` to float it again.
601
+ * Defaults to the main editor panel.
602
+ */
603
+ dockPanel(side: DockSide | null, panelId?: DockPanelId): void;
604
+ /**
605
+ * Reinitialize the editor with new configuration.
606
+ * Call this after changing the `config` property if the element is already connected.
607
+ */
608
+ reinitialize(): void;
609
+ disconnectedCallback(): void;
610
+ private teardown;
629
611
  }
630
- /** Snapshot the current stage as a plain, serializable object. */
631
- declare function buildStageExport(): StageExport;
632
- /** The export as formatted JSON. */
633
- declare function stageExportToString(): string;
634
612
  /**
635
- * Copy the export to the clipboard.
613
+ * Register the ZylemEditorElement as a custom element.
614
+ * Call this function to use the default 'zylem-editor' tag name.
636
615
  *
637
- * @returns The serialized stage when the copy succeeded, or `null` when the
638
- * clipboard was unavailable — over plain HTTP, or without a user gesture, the
639
- * API is either missing or rejects, and the caller falls back to the console.
616
+ * @example
617
+ * ```js
618
+ * import { registerZylemEditor } from '@zylem/editor';
619
+ * registerZylemEditor();
620
+ * // Now you can use <zylem-editor> in your HTML
621
+ * ```
640
622
  */
641
- declare function copyStageExport(): Promise<string | null>;
623
+ declare function registerZylemEditor(tagName?: string): void;
642
624
 
643
625
  /**
644
626
  * Editor Host Helpers
@@ -756,4 +738,22 @@ interface MountedZylemEditor extends EditorStateBridge {
756
738
  */
757
739
  declare function mountZylemEditor(options?: MountZylemEditorOptions): MountedZylemEditor;
758
740
 
741
+ /**
742
+ * Host observation of committed scene edits.
743
+ *
744
+ * Every edit the editor records is also announced here, so an embedding app can
745
+ * react to it — persisting a layout, marking a document dirty, or eventually
746
+ * writing changes back to source. Kept in its own module so `editor-bridge` does
747
+ * not have to import the host surface (which imports the bridge), which would be
748
+ * circular.
749
+ */
750
+
751
+ type SceneOperationListener = (op: SceneOperationPayload) => void;
752
+ /**
753
+ * Observe committed scene operations.
754
+ *
755
+ * @returns An unsubscribe function.
756
+ */
757
+ declare function onSceneOperation(listener: SceneOperationListener): () => void;
758
+
759
759
  export { type CatalogState, DEFAULT_ROTATE_SNAP, DOCK_SIDES, type DockPanelId, type DockRect, type DockRegistry, type DockSide, type DockZoneState, type EditorDockDefaults, type EditorEvent, type EditorEventType, type EditorStateBridge, type EditorStateBridgeOptions, type EditorUpdatePayload, type HistoryState, Icon, MAIN_PANEL_ID, MAX_HISTORY_DEPTH, type MountZylemEditorOptions, type MountedZylemEditor, type SceneOperationListener, type StageExport, type StageExportEntity, type TransformState, type TransformToolGuardOptions, type ZylemEditorConfig, ZylemEditorElement, attachEditorStateBridge, channel as bridgeChannel, buildStageExport, canRedo, canUndo, catalogState, clearHistory, computeDockLayout, connectEditorBridge, copyStageExport, debugState, debugStore, disarmTools, disconnectEditorBridge, dispatchEditorUpdate, dispatchToEditor, dockPanelToSide, editorEvents, findDockedSide, gameState, getDockedSide, historyState, installTransformToolGuard, mountZylemEditor, onSceneOperation, redo, redoLabel, registerZylemEditor, releaseOrphanedTransformTool, sendAddType, sendDebugEnabled, sendEntityCreate, sendEntityFocus, sendEntitySelect, sendEntityTransform, sendGridVisible, sendPlayback, sendSnapSettings, sendStageVariable, sendTool, setArmedType, setEntityCatalog, setGridVisible, setSnapEnabled, setSnapIncrements, stageExportToString, stageState, transformState, undo, undoLabel, undockPanelFromSides };