@vscode/component-explorer 0.2.1-18 → 0.2.1-180

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.
Files changed (85) hide show
  1. package/README.md +198 -27
  2. package/dist/browserDaemonClient-AB8d4x2O.js +3465 -0
  3. package/dist/browserDaemonClient-AB8d4x2O.js.map +1 -0
  4. package/dist/components/BottomDebugPanel.d.ts +8 -0
  5. package/dist/components/BottomDebugPanel.d.ts.map +1 -0
  6. package/dist/components/DebugPanelPlacement.d.ts +3 -0
  7. package/dist/components/DebugPanelPlacement.d.ts.map +1 -0
  8. package/dist/components/DebugWorkbench.d.ts +42 -0
  9. package/dist/components/DebugWorkbench.d.ts.map +1 -0
  10. package/dist/components/DebugWorkbenchLayout.d.ts +30 -0
  11. package/dist/components/DebugWorkbenchLayout.d.ts.map +1 -0
  12. package/dist/components/DebugWorkbenchState.d.ts +31 -0
  13. package/dist/components/DebugWorkbenchState.d.ts.map +1 -0
  14. package/dist/components/ExplorerModel.d.ts +28 -5
  15. package/dist/components/ExplorerModel.d.ts.map +1 -1
  16. package/dist/components/FixtureDebugStore.d.ts +20 -0
  17. package/dist/components/FixtureDebugStore.d.ts.map +1 -0
  18. package/dist/components/FixturePreviewItem.d.ts +11 -0
  19. package/dist/components/FixturePreviewItem.d.ts.map +1 -1
  20. package/dist/components/LeftSidebar.d.ts.map +1 -1
  21. package/dist/components/PageViewportState.d.ts +34 -0
  22. package/dist/components/PageViewportState.d.ts.map +1 -0
  23. package/dist/components/PreviewArea.d.ts.map +1 -1
  24. package/dist/components/RightSidebar.d.ts +8 -2
  25. package/dist/components/RightSidebar.d.ts.map +1 -1
  26. package/dist/components/TitleBar.d.ts.map +1 -1
  27. package/dist/components/TreeView.d.ts +3 -1
  28. package/dist/components/TreeView.d.ts.map +1 -1
  29. package/dist/components/favoriteFixtures.d.ts +4 -0
  30. package/dist/components/favoriteFixtures.d.ts.map +1 -0
  31. package/dist/components/icons.d.ts +12 -8
  32. package/dist/components/icons.d.ts.map +1 -1
  33. package/dist/components/types.d.ts +2 -0
  34. package/dist/components/types.d.ts.map +1 -1
  35. package/dist/core/ComponentRenderer.d.ts +26 -3
  36. package/dist/core/ComponentRenderer.d.ts.map +1 -1
  37. package/dist/core/ErrorInfo.d.ts +21 -1
  38. package/dist/core/ErrorInfo.d.ts.map +1 -1
  39. package/dist/core/FixtureInputStore.d.ts +32 -0
  40. package/dist/core/FixtureInputStore.d.ts.map +1 -0
  41. package/dist/core/FixtureInteractionRuntime.d.ts +30 -0
  42. package/dist/core/FixtureInteractionRuntime.d.ts.map +1 -0
  43. package/dist/core/FixtureNode.d.ts.map +1 -1
  44. package/dist/core/FixtureRegistry.d.ts +2 -0
  45. package/dist/core/FixtureRegistry.d.ts.map +1 -1
  46. package/dist/core/RenderTimeout.d.ts +39 -0
  47. package/dist/core/RenderTimeout.d.ts.map +1 -0
  48. package/dist/core/fixtureApi.d.ts +234 -32
  49. package/dist/core/fixtureApi.d.ts.map +1 -1
  50. package/dist/core/fixtureApiConsumer.d.ts +22 -2
  51. package/dist/core/fixtureApiConsumer.d.ts.map +1 -1
  52. package/dist/core/index.d.ts +7 -3
  53. package/dist/core/index.d.ts.map +1 -1
  54. package/dist/core/inputAggregation.d.ts +31 -0
  55. package/dist/core/inputAggregation.d.ts.map +1 -0
  56. package/dist/daemon/DaemonConfig.d.ts +0 -2
  57. package/dist/daemon/DaemonConfig.d.ts.map +1 -1
  58. package/dist/daemon/DaemonModel.d.ts +12 -6
  59. package/dist/daemon/DaemonModel.d.ts.map +1 -1
  60. package/dist/daemon/browserDaemonClient.d.ts +3 -0
  61. package/dist/daemon/browserDaemonClient.d.ts.map +1 -0
  62. package/dist/fixtureApi.d-DjVuiRlO.d.ts +533 -0
  63. package/dist/index.d.ts +53 -10
  64. package/dist/index.d.ts.map +1 -1
  65. package/dist/index.js +11 -9
  66. package/dist/lib/explorerQueryParams.d.ts +2 -2
  67. package/dist/lib/explorerQueryParams.d.ts.map +1 -1
  68. package/dist/lib/fixtureSizeCache.d.ts +2 -0
  69. package/dist/lib/fixtureSizeCache.d.ts.map +1 -1
  70. package/dist/modes/EmbeddedMode.d.ts +7 -0
  71. package/dist/modes/EmbeddedMode.d.ts.map +1 -1
  72. package/dist/modes/ExplorerUIMode.d.ts +1 -1
  73. package/dist/modes/ExplorerUIMode.d.ts.map +1 -1
  74. package/dist/modes/HeadlessMode.d.ts +12 -3
  75. package/dist/modes/HeadlessMode.d.ts.map +1 -1
  76. package/dist/{runtimeVersion-DLeDvOjy.js → runtimeVersion-D9F0L_-O.js} +80 -39
  77. package/dist/runtimeVersion-D9F0L_-O.js.map +1 -0
  78. package/dist/viewer.d.ts +2900 -24
  79. package/dist/viewer.d.ts.map +1 -1
  80. package/dist/viewer.js +5596 -2332
  81. package/dist/viewer.js.map +1 -1
  82. package/package.json +10 -6
  83. package/dist/core/PropertySchema.d.ts +0 -40
  84. package/dist/core/PropertySchema.d.ts.map +0 -1
  85. package/dist/runtimeVersion-DLeDvOjy.js.map +0 -1
@@ -0,0 +1,31 @@
1
+ import { IJsonSchema } from './fixtureApi.js';
2
+ /**
3
+ * A single input property shared by one or more of the currently rendered fixtures.
4
+ * Properties are grouped by name **and** structural schema equality, so a control can edit
5
+ * every fixture that declares the same property at once.
6
+ */
7
+ export interface AggregatedInputProperty {
8
+ readonly name: string;
9
+ readonly schema: IJsonSchema;
10
+ /** Ids of the fixtures that declare this exact property (same name + schema). */
11
+ readonly fixtureIds: readonly string[];
12
+ }
13
+ /** Minimal shape needed to aggregate: a fixture id and its (merged) input schema. */
14
+ export interface ComponentInputInfo {
15
+ readonly id: string;
16
+ readonly inputSchema?: IJsonSchema;
17
+ }
18
+ /**
19
+ * Stable identity of an input property: its name plus structural schema. Two fixtures that
20
+ * declare the same property (same name + schema) share this key, so a chosen value can be
21
+ * persisted once and reused across every fixture that has it.
22
+ */
23
+ export declare function inputPropertyKey(name: string, schema: IJsonSchema): string;
24
+ /**
25
+ * Collects the input properties declared across the given fixtures, grouping identical
26
+ * (name + schema) properties so they can be edited together. Order follows first appearance.
27
+ */
28
+ export declare function aggregateInputProperties(components: readonly ComponentInputInfo[]): AggregatedInputProperty[];
29
+ /** The value currently in effect for a property: explicit override, else schema default. */
30
+ export declare function effectiveInputValue(override: Record<string, unknown> | undefined, name: string, schema: IJsonSchema): unknown;
31
+ //# sourceMappingURL=inputAggregation.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"inputAggregation.d.ts","sourceRoot":"","sources":["../../src/core/inputAggregation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD;;;;GAIG;AACH,MAAM,WAAW,uBAAuB;IACpC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;IAC7B,iFAAiF;IACjF,QAAQ,CAAC,UAAU,EAAE,SAAS,MAAM,EAAE,CAAC;CAC1C;AAED,qFAAqF;AACrF,MAAM,WAAW,kBAAkB;IAC/B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC;CACtC;AAgBD;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,GAAG,MAAM,CAE1E;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,CACpC,UAAU,EAAE,SAAS,kBAAkB,EAAE,GAC1C,uBAAuB,EAAE,CA0B3B;AAED,4FAA4F;AAC5F,wBAAgB,mBAAmB,CAC/B,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,EAC7C,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,WAAW,GACpB,OAAO,CAKT"}
@@ -5,8 +5,6 @@
5
5
  export interface DaemonConfig {
6
6
  /** Name of the session this explorer instance belongs to (e.g. 'current' or 'baseline') */
7
7
  readonly sessionName: string;
8
- /** Daemon API version served by the daemon process. */
9
- readonly daemonApiVersion: string;
10
8
  /** Runtime version required by the vite plugin for the explorer bundle it serves. */
11
9
  readonly runtimeVersionNeededByPlugin: string;
12
10
  }
@@ -1 +1 @@
1
- {"version":3,"file":"DaemonConfig.d.ts","sourceRoot":"","sources":["../../src/daemon/DaemonConfig.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC5B,2FAA2F;IAC3F,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,uDAAuD;IACvD,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAClC,qFAAqF;IACrF,QAAQ,CAAC,4BAA4B,EAAE,MAAM,CAAC;CAC9C"}
1
+ {"version":3,"file":"DaemonConfig.d.ts","sourceRoot":"","sources":["../../src/daemon/DaemonConfig.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC5B,2FAA2F;IAC3F,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,qFAAqF;IACrF,QAAQ,CAAC,4BAA4B,EAAE,MAAM,CAAC;CAC9C"}
@@ -1,12 +1,12 @@
1
1
  import { IObservable } from '@vscode/observables';
2
- import { DaemonApiType } from '@vscode/component-explorer-cli/daemon-types';
2
+ import { DaemonMethods } from '@vscode/component-explorer-common/daemon-rpc';
3
3
  import { DaemonConfig } from './DaemonConfig.js';
4
4
  /** Screenshot result from the daemon */
5
- export type DaemonScreenshotResult = DaemonApiType['screenshots']['take']['TResult'];
5
+ export type DaemonScreenshotResult = Awaited<ReturnType<DaemonMethods['screenshots']['take']>>;
6
6
  /** Comparison result from the daemon */
7
- export type DaemonCompareResult = DaemonApiType['screenshots']['compare']['TResult'];
7
+ export type DaemonCompareResult = Awaited<ReturnType<DaemonMethods['screenshots']['compare']>>;
8
8
  /** Fixture info from the daemon */
9
- export type DaemonFixtureInfo = DaemonApiType['fixtures']['list']['TResult']['fixtures'][number];
9
+ export type DaemonFixtureInfo = Awaited<ReturnType<DaemonMethods['fixtures']['list']>>['fixtures'][number];
10
10
  export interface DaemonSession {
11
11
  readonly name: string;
12
12
  readonly serverUrl: string;
@@ -21,8 +21,10 @@ export declare class DaemonModel {
21
21
  private readonly _sourceTreeIds;
22
22
  private readonly _sessions;
23
23
  private readonly _screenshotCache;
24
- private readonly _client;
25
- private _eventStreamAbort;
24
+ private _client;
25
+ private _stopEventStream;
26
+ private _reconnectTimer;
27
+ private _disposed;
26
28
  readonly sessionName: string;
27
29
  /** Observable map of sessionName → current sourceTreeId */
28
30
  readonly sourceTreeIds: IObservable<ReadonlyMap<string, string>>;
@@ -52,8 +54,12 @@ export declare class DaemonModel {
52
54
  */
53
55
  getSessionExplorerUrl(sessionName: string): string | undefined;
54
56
  dispose(): void;
57
+ private _requireClient;
58
+ private _connect;
55
59
  private _fetchSessionInfos;
56
60
  private _startEventStream;
61
+ private _onEventStreamEnded;
62
+ private _scheduleReconnect;
57
63
  private _handleEvent;
58
64
  private _validateProtocolVersions;
59
65
  }
@@ -1 +1 @@
1
- {"version":3,"file":"DaemonModel.d.ts","sourceRoot":"","sources":["../../src/daemon/DaemonModel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGxE,OAAO,EACH,KAAK,aAAa,EAErB,MAAM,6CAA6C,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGtD,wCAAwC;AACxC,MAAM,MAAM,sBAAsB,GAAG,aAAa,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;AAErF,wCAAwC;AACxC,MAAM,MAAM,mBAAmB,GAAG,aAAa,CAAC,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;AAErF,mCAAmC;AACnC,MAAM,MAAM,iBAAiB,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjG,MAAM,WAAW,aAAa;IAC7B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,UAAU,EAAE,SAAS,GAAG,UAAU,CAAC;CAC5C;AAOD;;;GAGG;AACH,qBAAa,WAAW;IAeX,QAAQ,CAAC,MAAM,EAAE,YAAY;IAdzC,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAiE;IAChG,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAuD;IACjF,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAuC;IACxE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAgC;IACxD,OAAO,CAAC,iBAAiB,CAAgC;IAEzD,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAE7B,2DAA2D;IAC3D,QAAQ,CAAC,aAAa,EAAE,WAAW,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAuB;IAEvF,kDAAkD;IAClD,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC,SAAS,aAAa,EAAE,CAAC,CAAkB;gBAErD,MAAM,EAAE,YAAY;IAOzC;;;OAGG;IACG,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAMjC;;;OAGG;IACG,aAAa,CAAC,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,sBAAsB,CAAC;IAuB5F;;OAEG;IACG,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,GAAG,OAAO,CAAC,mBAAmB,CAAC;IAgBvH;;OAEG;IACG,YAAY,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,iBAAiB,EAAE,CAAC;IAS9E;;OAEG;IACH,qBAAqB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IAM9D,OAAO,IAAI,IAAI;YASD,kBAAkB;YAelB,iBAAiB;IAuB/B,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,yBAAyB;CAgBjC"}
1
+ {"version":3,"file":"DaemonModel.d.ts","sourceRoot":"","sources":["../../src/daemon/DaemonModel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAExE,OAAO,EAEN,KAAK,aAAa,EAElB,MAAM,8CAA8C,CAAC;AACtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGtD,wCAAwC;AACxC,MAAM,MAAM,sBAAsB,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AAE/F,wCAAwC;AACxC,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAE/F,mCAAmC;AACnC,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3G,MAAM,WAAW,aAAa;IAC7B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,UAAU,EAAE,SAAS,GAAG,UAAU,CAAC;CAC5C;AAOD;;;GAGG;AACH,qBAAa,WAAW;IAiBX,QAAQ,CAAC,MAAM,EAAE,YAAY;IAhBzC,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAiE;IAChG,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAuD;IACjF,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAuC;IACxE,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,gBAAgB,CAA2B;IACnD,OAAO,CAAC,eAAe,CAA4C;IACnE,OAAO,CAAC,SAAS,CAAS;IAE1B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAE7B,2DAA2D;IAC3D,QAAQ,CAAC,aAAa,EAAE,WAAW,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAuB;IAEvF,kDAAkD;IAClD,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC,SAAS,aAAa,EAAE,CAAC,CAAkB;gBAErD,MAAM,EAAE,YAAY;IAIzC;;;OAGG;IACG,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAKjC;;;OAGG;IACG,aAAa,CAAC,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,sBAAsB,CAAC;IAuB5F;;OAEG;IACG,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,GAAG,OAAO,CAAC,mBAAmB,CAAC;IAgBvH;;OAEG;IACG,YAAY,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,iBAAiB,EAAE,CAAC;IAS9E;;OAEG;IACH,qBAAqB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IAM9D,OAAO,IAAI,IAAI;IAaf,OAAO,CAAC,cAAc;YAKR,QAAQ;YAmBR,kBAAkB;IAgBhC,OAAO,CAAC,iBAAiB;IAkBzB,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,yBAAyB;CASjC"}
@@ -0,0 +1,3 @@
1
+ import { DaemonClient } from '@vscode/component-explorer-common/daemon-rpc';
2
+ export declare function createBrowserDaemonClient(): Promise<DaemonClient>;
3
+ //# sourceMappingURL=browserDaemonClient.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"browserDaemonClient.d.ts","sourceRoot":"","sources":["../../src/daemon/browserDaemonClient.ts"],"names":[],"mappings":"AACA,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,8CAA8C,CAAC;AAI1G,wBAAsB,yBAAyB,IAAI,OAAO,CAAC,YAAY,CAAC,CAmCvE"}
@@ -0,0 +1,533 @@
1
+ import { z } from 'zod';
2
+
3
+ /**
4
+ * Disposable resource that can be cleaned up.
5
+ * `dispose` may be sync or async; the framework awaits the returned promise (if any)
6
+ * and captures any thrown errors.
7
+ */
8
+ interface IDisposable {
9
+ dispose(): void | Promise<void>;
10
+ }
11
+ type DebugPanelPlacement = 'canvas-right' | 'bottom-panel';
12
+ interface DebugPanelViewContext<TAction> {
13
+ sendAction(action: TAction): void;
14
+ viewState<T>(options: DebugPanelViewStateOptions<T>): DebugPanelViewState<T>;
15
+ }
16
+ interface DebugPanelViewStateOptions<T> {
17
+ readonly version: number;
18
+ readonly scope: 'pane' | 'fixture';
19
+ readonly schema: z.ZodType<T>;
20
+ readonly defaultValue: T;
21
+ }
22
+ interface DebugPanelViewState<T> {
23
+ get(): T;
24
+ set(value: T): void;
25
+ onChange(listener: (value: T) => void): IDisposable;
26
+ }
27
+ interface DebugPanelViewInstance<TState> extends IDisposable {
28
+ update(state: TState): void;
29
+ }
30
+ interface DefineDebugPanelOptions<TState, TAction> {
31
+ readonly id: string;
32
+ readonly title: string;
33
+ readonly placement?: DebugPanelPlacement;
34
+ render(container: HTMLElement, context: DebugPanelViewContext<TAction>): DebugPanelViewInstance<TState>;
35
+ }
36
+ interface ErasedDebugPanelViewInstance extends IDisposable {
37
+ update(state: unknown): void;
38
+ }
39
+ /**
40
+ * A statically declared custom panel. `TState` is published by the fixture and
41
+ * `TAction` is sent back by the panel UI.
42
+ */
43
+ interface DebugPanelDefinition<TState = unknown, TAction = unknown> {
44
+ readonly id: string;
45
+ readonly title: string;
46
+ readonly placement?: DebugPanelPlacement;
47
+ /** @internal Viewer-side, type-erased renderer produced by defineDebugPanel. */
48
+ readonly _render: (container: HTMLElement, sendAction: (action: unknown) => void, viewState?: DebugPanelViewContext<unknown>['viewState']) => ErasedDebugPanelViewInstance;
49
+ /** @internal Carries types for inference without affecting the runtime shape. */
50
+ readonly _types?: {
51
+ readonly state: TState;
52
+ readonly action: TAction;
53
+ };
54
+ }
55
+ interface DebugPanelChannel<TState, TAction> {
56
+ publish(state: TState): void;
57
+ onAction(listener: (action: TAction) => void): IDisposable;
58
+ }
59
+ type DebugPanelActivation<TState, TAction> = (channel: DebugPanelChannel<TState, TAction>) => void | IDisposable;
60
+ interface FixtureDebugApi {
61
+ connect<TState, TAction>(panel: DebugPanelDefinition<TState, TAction>, activate: DebugPanelActivation<TState, TAction>): IDisposable;
62
+ }
63
+ interface FixtureInputControlOptions {
64
+ readonly placement?: 'sidebar' | 'toolbar' | 'both';
65
+ readonly label?: string;
66
+ readonly title?: string;
67
+ }
68
+ /** Brand for an output that can be observed and edited while its Output panel is visible. */
69
+ declare const interactiveOutputBrand: unique symbol;
70
+ interface InteractiveOutput<T> {
71
+ readonly [interactiveOutputBrand]: true;
72
+ getSnapshot(): T;
73
+ activate(channel: DebugPanelChannel<T, T>): void | IDisposable;
74
+ }
75
+ /**
76
+ * Result of a render operation.
77
+ * Supports both sync and async rendering with cancellation.
78
+ * All fields are optional for simple use cases.
79
+ */
80
+ interface RenderResult {
81
+ /**
82
+ * Resolves when the component is fully rendered and ready.
83
+ * For sync renders, this can be omitted (treated as immediately ready).
84
+ * Rejects if the render is aborted via the AbortSignal.
85
+ */
86
+ readonly ready?: Promise<void>;
87
+ /**
88
+ * Cleanup function. Called when the fixture is unmounted.
89
+ * May be sync or async; the framework awaits the returned promise (if any).
90
+ * Errors thrown (sync or async) are captured and surfaced via the
91
+ * `previousDispose` field of the next render report (or `currentDispose`
92
+ * if `disposeAfter` was requested).
93
+ * Can be omitted if no cleanup is needed.
94
+ */
95
+ dispose?(): void | Promise<void>;
96
+ /**
97
+ * Arbitrary data to include in the render report.
98
+ * Visible to the CLI and MCP tools (surfaced as `output`).
99
+ *
100
+ * Symmetric counterpart of `RenderContext.input`: input flows in, output flows out.
101
+ */
102
+ readonly output?: unknown;
103
+ }
104
+ /**
105
+ * What the render function can return.
106
+ * - undefined: no cleanup needed, immediately ready
107
+ * - RenderResult: object with optional ready/dispose
108
+ * - Promise<...>: async render that resolves to undefined or RenderResult
109
+ */
110
+ type RenderReturn = RenderResult | undefined | void | Promise<RenderResult | undefined | void>;
111
+ /**
112
+ * Context passed to the render function.
113
+ *
114
+ * @typeParam TInput - Shape of `input`, inferred from the fixture's zod `inputSchema`
115
+ * (defaults to `unknown` when no schema is declared).
116
+ */
117
+ interface RenderContext<TInput = unknown> {
118
+ /**
119
+ * Unique identifier of the fixture being rendered.
120
+ * Stable across renders of the same fixture; useful for keying caches,
121
+ * logging, or distinguishing between sibling fixtures sharing a render function.
122
+ */
123
+ readonly fixtureId: string;
124
+ /** AbortSignal for cancellation; check signal.aborted or listen to 'abort' event */
125
+ readonly signal: AbortSignal;
126
+ /** Register a disposable to be cleaned up when the fixture is unmounted. Returns the same disposable for chaining. */
127
+ addDisposable<T extends IDisposable>(disposable: T): T;
128
+ /**
129
+ * Observes one input property without remounting the fixture. The listener is
130
+ * invoked immediately and again for subsequent changes to this property.
131
+ * Input properties without a watcher retain the default remount behavior.
132
+ */
133
+ watchInput<TKey extends Extract<keyof TInput, string>>(key: TKey, listener: (value: TInput[TKey], input: TInput) => void): IDisposable;
134
+ /** Reports a component-originated change to a watched input, keeping sidebar controls synchronized without echoing it to the watcher. */
135
+ reportInput<TKey extends Extract<keyof TInput, string>>(key: TKey, value: TInput[TKey]): void;
136
+ /** Connects statically declared debug panels to this live fixture instance. */
137
+ readonly debug: FixtureDebugApi;
138
+ /**
139
+ * Describes where this fixture is being rendered. Use this to enable dev-only affordances
140
+ * (e.g. extra controls, logging) without affecting screenshots or embedded views.
141
+ */
142
+ readonly host: RenderHost;
143
+ /**
144
+ * Data passed in by the caller (CLI/MCP screenshot tool, explorer UI). Use this to
145
+ * parameterize the fixture: e.g. switch theme, vary props, select a scenario.
146
+ *
147
+ * When the fixture declares a zod `inputSchema`, this is typed as `z.infer<typeof schema>`
148
+ * and populated with the schema's defaults for any keys the caller omitted. Without a
149
+ * schema it is `unknown` (and `undefined` when no input was provided).
150
+ *
151
+ * Symmetric with `RenderResult.output` (which flows back out to the caller).
152
+ */
153
+ readonly input: TInput;
154
+ }
155
+ /**
156
+ * Describes the environment a fixture is rendered in.
157
+ */
158
+ type RenderHost =
159
+ /** Rendered in the Component Explorer UI (visible to a human). */
160
+ {
161
+ readonly kind: 'explorer-ui';
162
+ readonly interactive: true;
163
+ }
164
+ /** Headless render for CLI/MCP screenshots. */
165
+ | {
166
+ readonly kind: 'headless';
167
+ readonly interactive: false;
168
+ }
169
+ /** Rendered inside an isolation iframe (user-facing standalone view). */
170
+ | {
171
+ readonly kind: 'embedded';
172
+ readonly interactive: false;
173
+ };
174
+ /**
175
+ * Style definition for shadow DOM injection.
176
+ */
177
+ type StyleDefinition = {
178
+ readonly type: 'css';
179
+ readonly content: string;
180
+ } | {
181
+ readonly type: 'url';
182
+ readonly href: string;
183
+ } | {
184
+ readonly type: 'adopted';
185
+ readonly sheet: CSSStyleSheet;
186
+ };
187
+ /**
188
+ * Display mode for a component.
189
+ */
190
+ type DisplayMode = PageMode | ComponentMode;
191
+ /**
192
+ * Page mode - component fills a viewport with device presets.
193
+ */
194
+ interface PageMode {
195
+ readonly type: 'page';
196
+ readonly viewports: ViewportPreset[];
197
+ }
198
+ /**
199
+ * Component mode - renders at natural size.
200
+ */
201
+ interface ComponentMode {
202
+ readonly type: 'component';
203
+ }
204
+ /**
205
+ * Viewport preset - either a named preset or custom dimensions.
206
+ */
207
+ type ViewportPreset = ViewportPresetName | {
208
+ readonly name: string;
209
+ readonly width: number;
210
+ readonly height: number;
211
+ };
212
+ type ViewportPresetName = 'mobile' | 'tablet' | 'desktop';
213
+ /**
214
+ * Minimal JSON Schema interface used to describe a fixture's expected `input` shape.
215
+ *
216
+ * This is the *derived* form: fixtures declare their input with a zod schema
217
+ * (`DefineFixtureOptions.inputSchema`) and the framework converts it to this JSON Schema
218
+ * at define time. Tools (CLI/MCP/explorer UI) read it for validation, autocompletion, or
219
+ * to generate input-editing controls.
220
+ *
221
+ * Intentionally a structural, recursive type covering the subset of JSON Schema we
222
+ * actually surface to tools — the index signature lets any additional standard JSON Schema
223
+ * keywords (`format`, `pattern`, `oneOf`, `$ref`, …) flow through without changing this interface.
224
+ */
225
+ interface IJsonSchema {
226
+ readonly type?: 'object' | 'array' | 'string' | 'number' | 'integer' | 'boolean' | 'null';
227
+ readonly properties?: {
228
+ readonly [key: string]: IJsonSchema;
229
+ };
230
+ readonly required?: readonly string[];
231
+ readonly items?: IJsonSchema;
232
+ readonly enum?: readonly unknown[];
233
+ readonly const?: unknown;
234
+ readonly default?: unknown;
235
+ readonly description?: string;
236
+ readonly title?: string;
237
+ readonly additionalProperties?: boolean | IJsonSchema;
238
+ readonly anyOf?: readonly IJsonSchema[];
239
+ readonly oneOf?: readonly IJsonSchema[];
240
+ readonly allOf?: readonly IJsonSchema[];
241
+ readonly [key: string]: unknown;
242
+ }
243
+ /** Brand symbol to identify single fixtures */
244
+ declare const singleFixtureBrand: unique symbol;
245
+ /** Brand symbol to identify fixture groups */
246
+ declare const fixtureGroupBrand: unique symbol;
247
+ /** Brand symbol to identify fixture variants */
248
+ declare const fixtureVariantsBrand: unique symbol;
249
+ /**
250
+ * Options for defining a single component fixture.
251
+ *
252
+ * @typeParam TInput - Shape of the fixture's `input`, inferred from `inputSchema`.
253
+ */
254
+ interface DefineFixtureOptions<TInput = unknown> {
255
+ /**
256
+ * Path in the explorer tree.
257
+ * - `undefined` (default): use fixture filename only
258
+ * - `'Foo/Bar'`: exact path (fixture filename NOT appended)
259
+ * - `'Foo/Bar/'`: prefix (fixture filename IS appended → Foo/Bar/{filename})
260
+ *
261
+ * @throws Error if path contains empty segments (e.g., '/foo', 'foo//bar')
262
+ */
263
+ path?: string;
264
+ /** Optional description for documentation */
265
+ description?: string;
266
+ /** How to isolate: 'none' (default) renders in light DOM, 'shadow-dom' for CSS isolation, 'iframe' for full isolation */
267
+ isolation?: 'none' | 'shadow-dom' | 'iframe';
268
+ /** Display mode: defaults to { type: 'component' } */
269
+ displayMode?: DisplayMode;
270
+ /** Styles to inject (into document head for 'none', into shadow root for 'shadow-dom', into iframe head for 'iframe') */
271
+ styles?: StyleDefinition[];
272
+ /** Background pattern for the preview canvas: 'light' (default) or 'dark' for dark transparent pattern */
273
+ background?: 'light' | 'dark';
274
+ /** Labels for categorization and filtering (e.g. 'animation', 'blocks-ci') */
275
+ labels?: readonly string[];
276
+ /** Human/AI-readable description(s) of expected visual appearance. Inherited from parent group/variants and accumulated into a string[]. */
277
+ expectedVisualDescriptions?: string | readonly string[];
278
+ /**
279
+ * Zod schema describing the expected shape of `RenderContext.input`.
280
+ *
281
+ * Declaring it gives two things:
282
+ * 1. **Type safety** — `render`'s `context.input` is typed as `z.infer<typeof schema>`.
283
+ * 2. **Tooling** — the framework converts the schema to JSON Schema at define time so the
284
+ * CLI/MCP/explorer UI can validate, autocomplete, or render input-editing controls.
285
+ *
286
+ * The schema must describe an object (`z.object({...})`) — `input` is always a JSON object
287
+ * (or `undefined`). Property-level `.default(...)` values are surfaced to tooling and used
288
+ * to populate omitted keys before `render` runs.
289
+ *
290
+ * @example
291
+ * ```ts
292
+ * inputSchema: z.object({
293
+ * theme: z.enum(['light', 'dark']).default('light'),
294
+ * count: z.number().int().default(1),
295
+ * })
296
+ * ```
297
+ */
298
+ inputSchema?: z.ZodType<TInput>;
299
+ /** Controls how selected input properties are presented in the Explorer UI. */
300
+ inputControls?: {
301
+ readonly [TKey in Extract<keyof TInput, string>]?: FixtureInputControlOptions;
302
+ };
303
+ /** Custom debug panels contributed by this fixture. */
304
+ debugPanels?: readonly DebugPanelDefinition<unknown, unknown>[];
305
+ /**
306
+ * Render the component into the container.
307
+ *
308
+ * @param container - The DOM element to render into
309
+ * @param context - Render context containing input and abort signal
310
+ * @returns Optional RenderResult, or a Promise that resolves to one
311
+ */
312
+ render: (container: HTMLElement, context: RenderContext<TInput>) => RenderReturn;
313
+ }
314
+ /** @deprecated Use DefineFixtureOptions instead */
315
+ type DefineComponentOptions = DefineFixtureOptions;
316
+ /**
317
+ * A single fixture export created by defineFixture().
318
+ */
319
+ interface SingleFixtureExport {
320
+ readonly [singleFixtureBrand]: true;
321
+ readonly _options: DefineFixtureOptions;
322
+ readonly _path?: string;
323
+ /** JSON Schema derived from `_options.inputSchema` at define time (cross-version safe). */
324
+ readonly _inputSchemaJson?: IJsonSchema;
325
+ }
326
+ /**
327
+ * Group entry: either a single fixture, a nested group, or variants.
328
+ */
329
+ type FixtureGroupEntry = SingleFixtureExport | FixtureGroupExport | FixtureVariantsExport;
330
+ /**
331
+ * A fixture group export created by defineFixtureGroup().
332
+ */
333
+ interface FixtureGroupExport {
334
+ readonly [fixtureGroupBrand]: true;
335
+ readonly _entries: {
336
+ [key: string]: FixtureGroupEntry;
337
+ };
338
+ readonly _path?: string;
339
+ readonly _labels?: readonly string[];
340
+ readonly _expectedVisualDescriptions?: string | readonly string[];
341
+ /** JSON Schema derived from the group's `inputSchema`; merged into every descendant fixture. */
342
+ readonly _inputSchemaJson?: IJsonSchema;
343
+ }
344
+ /**
345
+ * A fixture variants export created by defineFixtureVariants().
346
+ */
347
+ interface FixtureVariantsExport {
348
+ readonly [fixtureVariantsBrand]: true;
349
+ readonly _variants: {
350
+ [key: string]: SingleFixtureExport;
351
+ };
352
+ readonly _path?: string;
353
+ readonly _labels?: readonly string[];
354
+ readonly _expectedVisualDescriptions?: string | readonly string[];
355
+ /** JSON Schema derived from the variants group's `inputSchema`; merged into every variant. */
356
+ readonly _inputSchemaJson?: IJsonSchema;
357
+ }
358
+ /**
359
+ * Fixture export type - a single fixture, a group, or variants.
360
+ */
361
+ type FixtureExport = SingleFixtureExport | FixtureGroupExport | FixtureVariantsExport;
362
+ /**
363
+ * Input for defineFixtureGroup.
364
+ */
365
+ type FixtureGroupInput = {
366
+ [key: string]: FixtureGroupEntry;
367
+ };
368
+ /**
369
+ * Options for defineFixtureGroup with optional path.
370
+ */
371
+ interface DefineFixtureGroupOptions {
372
+ /**
373
+ * Path in the explorer tree.
374
+ * - `undefined` (default): use fixture filename only
375
+ * - `'Foo/Bar'`: exact path (fixture filename NOT appended)
376
+ * - `'Foo/Bar/'`: prefix (fixture filename IS appended → Foo/Bar/{filename})
377
+ */
378
+ path?: string;
379
+ /** Labels for categorization and filtering (e.g. 'animation', 'blocks-ci') */
380
+ labels?: readonly string[];
381
+ /** Human/AI-readable description(s) of expected visual appearance. Inherited by nested fixtures. */
382
+ expectedVisualDescriptions?: string | readonly string[];
383
+ /**
384
+ * Zod schema describing `input` shared by every fixture in this group. It is converted to
385
+ * JSON Schema at define time and merged into each descendant fixture's own schema (the
386
+ * descendant's properties win on conflict). Use it to declare common input — e.g. a `theme`
387
+ * switch — once for a whole group instead of repeating it on each fixture.
388
+ */
389
+ inputSchema?: z.ZodType;
390
+ }
391
+ /**
392
+ * Input for defineFixtureVariants (only single fixtures, no nesting).
393
+ */
394
+ type FixtureVariantsInput = {
395
+ [key: string]: SingleFixtureExport;
396
+ };
397
+ /**
398
+ * Options for defineFixtureVariants with optional path.
399
+ */
400
+ interface DefineFixtureVariantsOptions {
401
+ /**
402
+ * Path in the explorer tree.
403
+ * - `undefined` (default): use fixture filename only
404
+ * - `'Foo/Bar'`: exact path (fixture filename NOT appended)
405
+ * - `'Foo/Bar/'`: prefix (fixture filename IS appended → Foo/Bar/{filename})
406
+ */
407
+ path?: string;
408
+ /** Labels for categorization and filtering (e.g. 'animation', 'blocks-ci') */
409
+ labels?: readonly string[];
410
+ /** Human/AI-readable description(s) of expected visual appearance. Inherited by nested fixtures. */
411
+ expectedVisualDescriptions?: string | readonly string[];
412
+ /**
413
+ * Zod schema describing `input` shared by every variant in this group. Converted to JSON
414
+ * Schema at define time and merged into each variant's own schema (the variant's properties
415
+ * win on conflict).
416
+ */
417
+ inputSchema?: z.ZodType;
418
+ }
419
+ /**
420
+ * Defines a single fixture.
421
+ *
422
+ * @example
423
+ * ```ts
424
+ * // Simple - no cleanup needed
425
+ * export default defineFixture({
426
+ * render: (container) => {
427
+ * container.innerHTML = `<button>Click me</button>`;
428
+ * },
429
+ * });
430
+ *
431
+ * // Typed, parameterizable input via a zod schema
432
+ * export default defineFixture({
433
+ * inputSchema: z.object({ label: z.string().default('Click me') }),
434
+ * render: (container, { input }) => {
435
+ * const root = createRoot(container);
436
+ * root.render(<Button label={input.label} />);
437
+ * return { dispose: () => root.unmount() };
438
+ * },
439
+ * });
440
+ *
441
+ * // Async render
442
+ * export default defineFixture({
443
+ * inputSchema: z.object({ url: z.string() }),
444
+ * render: async (container, { input, signal }) => {
445
+ * const data = await fetch(input.url, { signal });
446
+ * container.innerHTML = await data.text();
447
+ * return { dispose: () => { container.innerHTML = ''; } };
448
+ * },
449
+ * });
450
+ * ```
451
+ */
452
+ declare function defineFixture<TInput = unknown>(options: DefineFixtureOptions<TInput>): SingleFixtureExport;
453
+ declare function defineDebugPanel<TState, TAction = never>(options: DefineDebugPanelOptions<TState, TAction>): DebugPanelDefinition<TState, TAction>;
454
+ declare function interactiveOutput<T>(options: {
455
+ readonly getSnapshot: () => T;
456
+ readonly activate: DebugPanelActivation<T, T>;
457
+ }): InteractiveOutput<T>;
458
+ declare function isInteractiveOutput(value: unknown): value is InteractiveOutput<unknown>;
459
+ /**
460
+ * Defines a group of fixtures with support for nesting.
461
+ *
462
+ * @example
463
+ * ```ts
464
+ * export default defineFixtureGroup({
465
+ * Primary: defineFixture({
466
+ * render: (container) => { ... },
467
+ * }),
468
+ * Variants: defineFixtureGroup({
469
+ * Small: defineFixture({ ... }),
470
+ * Large: defineFixture({ ... }),
471
+ * }),
472
+ * });
473
+ * ```
474
+ */
475
+ declare function defineFixtureGroup(entries: FixtureGroupInput): FixtureGroupExport;
476
+ declare function defineFixtureGroup(options: DefineFixtureGroupOptions, entries: FixtureGroupInput): FixtureGroupExport;
477
+ /**
478
+ * Defines a group of fixture variants (no nesting allowed).
479
+ * Variants are rendered horizontally by default and have a distinct icon in the tree.
480
+ *
481
+ * @example
482
+ * ```ts
483
+ * export default defineFixtureGroup({
484
+ * Button: defineFixtureVariants({
485
+ * Small: defineFixture({ ... }),
486
+ * Medium: defineFixture({ ... }),
487
+ * Large: defineFixture({ ... }),
488
+ * }),
489
+ * });
490
+ * ```
491
+ */
492
+ declare function defineFixtureVariants(variants: FixtureVariantsInput): FixtureVariantsExport;
493
+ declare function defineFixtureVariants(options: DefineFixtureVariantsOptions, variants: FixtureVariantsInput): FixtureVariantsExport;
494
+ /**
495
+ * Helper for synchronous renders.
496
+ * Executes the render function immediately and wraps the cleanup in a RenderResult.
497
+ *
498
+ * @param doRender - Function that renders synchronously and returns a cleanup function
499
+ * @returns A RenderResult with an already-resolved ready promise
500
+ *
501
+ * @example
502
+ * ```ts
503
+ * render: (container, { input }) => syncRender(() => {
504
+ * const el = document.createElement('button');
505
+ * el.textContent = input.label;
506
+ * container.appendChild(el);
507
+ * return () => el.remove();
508
+ * })
509
+ * ```
510
+ */
511
+ declare function syncRender(doRender: () => (() => void) | IDisposable | void): RenderResult;
512
+ /**
513
+ * Helper for asynchronous renders with cancellation support.
514
+ *
515
+ * @param signal - AbortSignal for cancellation
516
+ * @param doRender - Async function that renders and returns a cleanup function.
517
+ * Should check signal.aborted periodically for long operations.
518
+ * @returns A RenderResult whose ready promise rejects with AbortError if cancelled
519
+ *
520
+ * @example
521
+ * ```ts
522
+ * render: (container, { input, signal }) => asyncRender(signal, async () => {
523
+ * const data = await fetchData(input.url, { signal });
524
+ * if (signal.aborted) return;
525
+ * container.innerHTML = data;
526
+ * return () => { container.innerHTML = ''; };
527
+ * })
528
+ * ```
529
+ */
530
+ declare function asyncRender(signal: AbortSignal, doRender: () => Promise<(() => void) | IDisposable | void>): RenderResult;
531
+
532
+ export { defineFixture as A, defineFixtureGroup as B, defineFixtureVariants as E, fixtureGroupBrand as G, fixtureVariantsBrand as H, interactiveOutput as J, singleFixtureBrand as K, asyncRender as L, isInteractiveOutput as M, syncRender as N, defineDebugPanel as z };
533
+ export type { ComponentMode as C, DebugPanelActivation as D, FixtureDebugApi as F, IDisposable as I, PageMode as P, RenderContext as R, SingleFixtureExport as S, ViewportPreset as V, DebugPanelChannel as a, DebugPanelDefinition as b, DebugPanelPlacement as c, DebugPanelViewContext as d, DebugPanelViewInstance as e, DebugPanelViewState as f, DebugPanelViewStateOptions as g, DefineComponentOptions as h, DefineDebugPanelOptions as i, DefineFixtureOptions as j, DisplayMode as k, FixtureExport as l, FixtureGroupEntry as m, FixtureGroupExport as n, FixtureGroupInput as o, FixtureInputControlOptions as p, FixtureVariantsExport as q, FixtureVariantsInput as r, IJsonSchema as s, InteractiveOutput as t, RenderHost as u, RenderResult as v, RenderReturn as w, StyleDefinition as x, ViewportPresetName as y };