@vscode/component-explorer 0.2.1-16 → 0.2.1-160

package/README.md

@@ -1,6 +1,6 @@
 # @vscode/component-explorer
 
-Core library for the [Component Explorer](../../README.md). Contains the fixture API, property schemas, fixture registry, and the Explorer React UI.
+Core library for the [Component Explorer](../../README.md). Contains the fixture API, input schemas, fixture registry, and the Explorer React UI.
 
 ## Fixture API
 
@@ -10,46 +10,76 @@ Defines a single component fixture.
 
 ```tsx
 import { defineFixture } from '@vscode/component-explorer';
+import { z } from 'zod';
 
 export default defineFixture({
-  properties: [
-    { type: 'string', name: 'label', defaultValue: 'Click me' },
-    { type: 'boolean', name: 'disabled', defaultValue: false },
-  ],
-  render: (container, props) => {
+  inputSchema: z.object({
+    label: z.string().default('Click me'),
+    disabled: z.boolean().default(false),
+  }),
+  render: (container, { input }) => {
     const root = createRoot(container);
-    root.render(<Button label={props.label as string} disabled={props.disabled as boolean} />);
+    root.render(<Button label={input.label} disabled={input.disabled} />);
     return { dispose: () => root.unmount() };
   },
 });
 ```
 
+The `inputSchema` is a [zod](https://zod.dev) schema. It is converted to JSON Schema at define
+time, and `input` (typed as `z.infer<typeof schema>`) is populated with the schema's defaults
+plus any overrides set in the explorer's properties panel.
+
 Options:
 
 | Option | Type | Default | Description |
 |---|---|---|---|
-| `render` | `(container, props) => Disposable` | **(required)** | Renders the component. Must return `{ dispose() }` for cleanup. |
-| `properties` | `PropertySchema[]` | `[]` | Configurable properties shown in the properties panel. |
+| `render` | `(container, context) => Disposable` | **(required)** | Renders the component. Must return `{ dispose() }` for cleanup. |
+| `inputSchema` | `z.ZodType` | — | Zod schema describing `input`. Drives the properties panel controls. |
+| `inputControls` | `Record<inputKey, options>` | — | Places selected boolean/enum inputs in the fixture toolbar, sidebar, or both. |
+| `debugPanels` | `DebugPanelDefinition[]` | — | Statically declares typed, interactive debug panels. |
 | `isolation` | `'shadow-dom' \| 'iframe'` | `'shadow-dom'` | Component isolation strategy. |
 | `displayMode` | `DisplayMode` | `{ type: 'component' }` | `'component'` for natural size, or `'page'` with viewport presets. |
 | `styles` | `StyleDefinition[]` | — | Stylesheets injected into the shadow root (shadow-dom isolation only). |
 | `background` | `'light' \| 'dark'` | `'light'` | Preview canvas background pattern. |
 | `description` | `string` | — | Documentation description. |
 
-### `defineFixtureGroup(entries)`
+Page fixtures open in **Fit** mode in the normal Explorer UI. Their compact viewport toolbar can
+select a declared preset, edit logical width/height, switch to **Responsive** canvas sizing, or
+render at unscaled **1:1** size. These persisted UI settings do not affect embedded or headless
+rendering.
+
+### Render timeout and diagnostics
+
+Fixtures have a 3,000 ms asynchronous render/readiness budget. Synchronous work
+in an installed V8 `Error.prepareStackTrace` formatter, including source-map
+loading, parsing, and mapping, is excluded from that budget. The formatter's
+result and exceptions are preserved; genuine fixture errors still fail with
+their mapped stacks, and renders that never finish still time out.
+
+The watchdog uses captured real timers, not a fixture's virtual clock. Diagnostic
+time is shared across same-origin embedded frames, including synchronous fixture
+setup. Overlapping renders keep
+the formatter wrapped until the last render finishes. Headless timing reports
+remain real wall-clock durations, including diagnostics. The browser runner's
+outer timeout remains the limit on total wall-clock work.
+
+### `defineFixtureGroup(entries)` / `defineFixtureGroup(options, entries)`
 
-Groups multiple fixtures (supports nesting):
+Groups multiple fixtures (supports nesting). An optional first argument can declare an
+`inputSchema` shared by — and merged into — every descendant fixture, so common input (e.g. a
+`theme` switch) is declared once for the whole group:
 
 ```tsx
 import { defineFixture, defineFixtureGroup } from '@vscode/component-explorer';
+import { z } from 'zod';
 
-export default defineFixtureGroup({
-  Primary: defineFixture({ render: (c) => { /* ... */ } }),
-  Secondary: defineFixture({ render: (c) => { /* ... */ } }),
-  Nested: defineFixtureGroup({
-    Small: defineFixture({ render: (c) => { /* ... */ } }),
-  }),
-});
+export default defineFixtureGroup(
+  { inputSchema: z.object({ theme: z.enum(['light', 'dark']).default('dark') }) },
+  {
+    Primary: defineFixture({ render: (c) => { /* ... */ } }),
+    Secondary: defineFixture({ render: (c) => { /* ... */ } }),
+  },
+);
 ```
 
 ### `defineFixtureVariants(variants)`
@@ -66,16 +96,79 @@ defineFixtureVariants({
 });
 ```
 
-## Property Types
+## Input Schemas
+
+Fixture `input` is described with a [zod](https://zod.dev) schema (`inputSchema`). The explorer
+converts it to JSON Schema and renders a control per property in the properties panel:
+
+| Zod type | Control |
+|---|---|
+| `z.boolean()` | Toggle checkbox |
+| `z.string()` | Text input |
+| `z.number()` / `z.int()` | Number input |
+| `z.enum([...])` | Dropdown select |
+
+Use `.default(...)` to set the initial value and `.describe(...)` to document a property. When
+multiple rendered fixtures share a property of the same name and schema, the panel exposes a
+single control that edits them all at once.
+
+Use `inputControls` with `placement: 'toolbar'` for compact boolean or enum controls beside the
+fixture dimensions. Opt a property into live updates with `watchInput`; changed properties without
+a watcher keep the default full-remount behavior:
+
+```ts
+defineFixture({
+  inputSchema: z.object({ showBounds: z.boolean().default(false) }),
+  inputControls: {
+    showBounds: { placement: 'toolbar', label: 'bounds' },
+  },
+  render(container, { watchInput }) {
+    const overlay = createBoundsOverlay(container);
+    watchInput('showBounds', value => overlay.setVisible(value));
+    return overlay;
+  },
+});
+```
+
+## Typed Debug Panels and Output
+
+`defineDebugPanel<TState, TAction>()` defines a custom panel UI. The fixture connects its live
+state/action channel through `context.debug.connect`. The connection callback runs only while that
+panel is visible, so hidden panels do not parse, subscribe, or publish data.
+
+```ts
+const sourcePanel = defineDebugPanel<
+  { source: string },
+  { type: 'setSource'; source: string }
+>({
+  id: 'source',
+  title: 'Source',
+  render: (container, { sendAction }) => createSourceView(container, sendAction),
+});
+
+defineFixture({
+  debugPanels: [sourcePanel],
+  render(container, { debug }) {
+    const model = createModel(container);
+    debug.connect(sourcePanel, channel => {
+      const actions = channel.onAction(action => model.setSource(action.source));
+      const state = model.onDidChange(() => channel.publish({ source: model.source }));
+      channel.publish({ source: model.source });
+      return { dispose: () => { actions.dispose(); state.dispose(); } };
+    });
+    return model;
+  },
+});
+```
 
-| Type | Fields | Description |
-|---|---|---|
-| `boolean` | `name`, `defaultValue` | Toggle checkbox |
-| `string` | `name`, `defaultValue`, `multiline?` | Text input (or textarea) |
-| `number` | `name`, `defaultValue`, `min?`, `max?`, `step?` | Number input with optional range |
-| `enum` | `name`, `defaultValue`, `options` | Dropdown select |
+Panels default beside a single logical fixture and in the shared bottom workbench for variant rows.
+Set `placement: 'canvas-right'` or `'bottom-panel'` on the panel to override this rule. Golden Layout
+tabs can be dragged into splits when multiple panels need to remain visible.
 
-All property types support an optional `description` field.
+Any defined `RenderResult.output` gets a built-in read-only JSON panel. Wrap it with
+`interactiveOutput({ getSnapshot, activate })` to opt into JSON editing; output actions update the
+live fixture without remounting. Headless and CLI consumers continue to receive the unwrapped
+snapshot value.
 
 ## Explorer UI Components
 
@@ -96,7 +189,6 @@ The package exports the full Explorer UI as React components:
 |---|---|
 | `FixtureRegistry` | Observable registry of discovered fixtures. |
 | `createFixtureTree` | Builds a `FixtureNode` tree from registered fixtures. |
-| `getDefaultPropertyValues` | Extracts default values from a `PropertySchema[]`. |
 | `VIEWPORT_SIZES` | Built-in viewport preset dimensions (`mobile`, `tablet`, `desktop`). |
 
 ## Styles

package/dist/components/BottomDebugPanel.d.ts

@@ -0,0 +1,8 @@
+import { ConsoleEventsStore } from '../core/ConsoleEventsStore.js';
+import { ExplorerModel } from './ExplorerModel.js';
+import * as React from 'react';
+export declare const BottomDebugPanel: React.ComponentType<{
+    model: ExplorerModel;
+    consoleStore: ConsoleEventsStore;
+} & {} & {} & {}>;
+//# sourceMappingURL=BottomDebugPanel.d.ts.map

package/dist/components/BottomDebugPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomDebugPanel.d.ts","sourceRoot":"","sources":["../../src/components/BottomDebugPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAExE,OAAO,KAAK,EAAE,aAAa,EAAe,MAAM,oBAAoB,CAAC;AAsBrE,eAAO,MAAM,gBAAgB;;;iBA8D5B,CAAC"}

package/dist/components/DebugPanelPlacement.d.ts

@@ -0,0 +1,3 @@
+import { DebugPanelPlacement } from '../core/index.js';
+export declare function resolveDebugPanelPlacement(explicitPlacement: DebugPanelPlacement | undefined, logicalFixtureCount: number): DebugPanelPlacement;
+//# sourceMappingURL=DebugPanelPlacement.d.ts.map

package/dist/components/DebugPanelPlacement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugPanelPlacement.d.ts","sourceRoot":"","sources":["../../src/components/DebugPanelPlacement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,wBAAgB,0BAA0B,CACxC,iBAAiB,EAAE,mBAAmB,GAAG,SAAS,EAClD,mBAAmB,EAAE,MAAM,GAC1B,mBAAmB,CAGrB"}

package/dist/components/DebugWorkbench.d.ts

@@ -0,0 +1,42 @@
+import { ConsoleEventsStore } from '../core/ConsoleEventsStore.js';
+import { DebugPanelDefinition } from '../core/fixtureApi.js';
+import { FixtureDebugStore } from './FixtureDebugStore.js';
+import { DebugWorkbenchStateStore } from './DebugWorkbenchState.js';
+export interface DebugWorkbenchEntry {
+    readonly key: string;
+    readonly title: string;
+    readonly fixtureId: string;
+    readonly fixtureName: string;
+    readonly panelId: string;
+    readonly definition?: DebugPanelDefinition;
+    readonly outputEditable?: boolean;
+}
+export interface DebugWorkbenchProps {
+    readonly workbenchId: string;
+    readonly entries: readonly DebugWorkbenchEntry[];
+    readonly activeEntryKey: string;
+    readonly store: FixtureDebugStore;
+    readonly stateStore: DebugWorkbenchStateStore;
+    readonly consoleStore: ConsoleEventsStore | undefined;
+    readonly onActiveEntryChange: (entryKey: string) => void;
+    readonly onClose: (() => void) | undefined;
+    readonly externalHeaderHost: HTMLElement | null | undefined;
+    readonly contentVisible: boolean;
+    readonly popOutHref?: string;
+    readonly floatTopHeaders: boolean;
+}
+export declare const DebugWorkbench: import('react').ComponentType<{
+    workbenchId: string;
+    entries: readonly DebugWorkbenchEntry[];
+    activeEntryKey: string;
+    store: FixtureDebugStore;
+    stateStore: DebugWorkbenchStateStore;
+    consoleStore: ConsoleEventsStore | undefined;
+    onActiveEntryChange: (entryKey: string) => void;
+    onClose: (() => void) | undefined;
+    externalHeaderHost: HTMLElement | null | undefined;
+    contentVisible: boolean;
+    popOutHref: string | undefined;
+    floatTopHeaders: boolean;
+} & {}>;
+//# sourceMappingURL=DebugWorkbench.d.ts.map

package/dist/components/DebugWorkbench.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugWorkbench.d.ts","sourceRoot":"","sources":["../../src/components/DebugWorkbench.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,KAAK,EAAE,oBAAoB,EAAe,MAAM,uBAAuB,CAAC;AAc/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAG3D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAEzE,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAC3C,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;CACnC;AASD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,OAAO,EAAE,SAAS,mBAAmB,EAAE,CAAC;IACjD,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,KAAK,EAAE,iBAAiB,CAAC;IAClC,QAAQ,CAAC,UAAU,EAAE,wBAAwB,CAAC;IAC9C,QAAQ,CAAC,YAAY,EAAE,kBAAkB,GAAG,SAAS,CAAC;IACtD,QAAQ,CAAC,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,QAAQ,CAAC,OAAO,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,kBAAkB,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IAC5D,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,eAAe,EAAE,OAAO,CAAC;CACnC;AAmZD,eAAO,MAAM,cAAc;;;;;;;oCA3WkB,MAAM,KAAK,IAAI;oBAC/B,IAAI;;;;;OAiahC,CAAC"}

package/dist/components/DebugWorkbenchLayout.d.ts

@@ -0,0 +1,27 @@
+export type DebugSplitOrientation = 'horizontal' | 'vertical';
+export type DebugDockZone = 'center' | 'left' | 'right' | 'top' | 'bottom';
+export interface DebugStackNode {
+    readonly type: 'stack';
+    readonly id: string;
+    readonly entryKeys: readonly string[];
+    readonly activeEntryKey: string;
+}
+export interface DebugSplitNode {
+    readonly type: 'split';
+    readonly id: string;
+    readonly orientation: DebugSplitOrientation;
+    readonly ratio: number;
+    readonly first: DebugWorkbenchNode;
+    readonly second: DebugWorkbenchNode;
+}
+export type DebugWorkbenchNode = DebugStackNode | DebugSplitNode;
+export declare function createDebugWorkbenchLayout(entryKeys: readonly string[], activeEntryKey: string | undefined): DebugWorkbenchNode;
+export declare function getDebugWorkbenchEntryOrder(node: DebugWorkbenchNode): readonly string[];
+export declare function getVisibleDebugEntryKeys(node: DebugWorkbenchNode): ReadonlySet<string>;
+export declare function getFirstDebugStackId(node: DebugWorkbenchNode): string;
+export declare function reconcileDebugWorkbenchLayout(node: DebugWorkbenchNode, entryKeys: readonly string[], activeEntryKey: string | undefined): DebugWorkbenchNode;
+export declare function activateDebugEntry(node: DebugWorkbenchNode, entryKey: string): DebugWorkbenchNode;
+export declare function reorderDebugEntry(node: DebugWorkbenchNode, entryKey: string, targetEntryKey: string, before: boolean): DebugWorkbenchNode;
+export declare function dockDebugEntry(node: DebugWorkbenchNode, entryKey: string, targetStackId: string, zone: DebugDockZone): DebugWorkbenchNode;
+export declare function updateDebugSplitRatio(node: DebugWorkbenchNode, splitId: string, ratio: number): DebugWorkbenchNode;
+//# sourceMappingURL=DebugWorkbenchLayout.d.ts.map

package/dist/components/DebugWorkbenchLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugWorkbenchLayout.d.ts","sourceRoot":"","sources":["../../src/components/DebugWorkbenchLayout.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC9D,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE3E,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAC;IACtC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;CACjC;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,WAAW,EAAE,qBAAqB,CAAC;IAC5C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,kBAAkB,CAAC;IACnC,QAAQ,CAAC,MAAM,EAAE,kBAAkB,CAAC;CACrC;AAED,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG,cAAc,CAAC;AAIjE,wBAAgB,0BAA0B,CACxC,SAAS,EAAE,SAAS,MAAM,EAAE,EAC5B,cAAc,EAAE,MAAM,GAAG,SAAS,GACjC,kBAAkB,CAKpB;AAED,wBAAgB,2BAA2B,CAAC,IAAI,EAAE,kBAAkB,GAAG,SAAS,MAAM,EAAE,CAIvF;AAED,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,kBAAkB,GAAG,WAAW,CAAC,MAAM,CAAC,CAItF;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,kBAAkB,GAAG,MAAM,CAErE;AAED,wBAAgB,6BAA6B,CAC3C,IAAI,EAAE,kBAAkB,EACxB,SAAS,EAAE,SAAS,MAAM,EAAE,EAC5B,cAAc,EAAE,MAAM,GAAG,SAAS,GACjC,kBAAkB,CA4BpB;AAED,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,kBAAkB,EACxB,QAAQ,EAAE,MAAM,GACf,kBAAkB,CAMpB;AAED,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,kBAAkB,EACxB,QAAQ,EAAE,MAAM,EAChB,cAAc,EAAE,MAAM,EACtB,MAAM,EAAE,OAAO,GACd,kBAAkB,CAepB;AAED,wBAAgB,cAAc,CAC5B,IAAI,EAAE,kBAAkB,EACxB,QAAQ,EAAE,MAAM,EAChB,aAAa,EAAE,MAAM,EACrB,IAAI,EAAE,aAAa,GAClB,kBAAkB,CAwCpB;AAED,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,kBAAkB,EACxB,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,GACZ,kBAAkB,CAQpB"}

package/dist/components/DebugWorkbenchState.d.ts

@@ -0,0 +1,9 @@
+import { ISettableObservable } from '@vscode/observables';
+import { DebugWorkbenchNode } from './DebugWorkbenchLayout.js';
+export declare class DebugWorkbenchStateStore {
+    private readonly layouts;
+    private readonly activeEntries;
+    getLayout(workbenchId: string, entryKeys: readonly string[], activeEntryKey: string | undefined): ISettableObservable<DebugWorkbenchNode>;
+    getActiveEntry(workbenchId: string): ISettableObservable<string | undefined>;
+}
+//# sourceMappingURL=DebugWorkbenchState.d.ts.map

package/dist/components/DebugWorkbenchState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugWorkbenchState.d.ts","sourceRoot":"","sources":["../../src/components/DebugWorkbenchState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAChF,OAAO,EAGL,KAAK,kBAAkB,EACxB,MAAM,2BAA2B,CAAC;AAEnC,qBAAa,wBAAwB;IACnC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8D;IACtF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8D;IAE5F,SAAS,CACP,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,SAAS,MAAM,EAAE,EAC5B,cAAc,EAAE,MAAM,GAAG,SAAS,GACjC,mBAAmB,CAAC,kBAAkB,CAAC;IAiB1C,cAAc,CAAC,WAAW,EAAE,MAAM,GAAG,mBAAmB,CAAC,MAAM,GAAG,SAAS,CAAC;CAQ7E"}

package/dist/components/ExplorerModel.d.ts

@@ -1,9 +1,12 @@
 import { IReader } from '@vscode/observables';
-import { FixtureRegistry, ComponentDefinition } from '../core/index.js';
-import { ExplorerTreeNode } from './types.js';
+import { FixtureRegistry, ComponentDefinition, FixtureInputStore } from '../core/index.js';
+import { ExplorerTreeKind, ExplorerTreeNode } from './types.js';
 import { DaemonModel } from '../daemon/index.js';
 import { ReportModel } from '../report/ReportModel.js';
 import { ReportFixtureItem } from './ReportComparisonRow.js';
+import { FixtureViewportStore } from './PageViewportState.js';
+import { FixtureDebugStore } from './FixtureDebugStore.js';
+import { DebugWorkbenchStateStore } from './DebugWorkbenchState.js';
 export type ViewMode = 'session' | 'diff' | 'report';
 /**
  * A fixture item to be rendered in the preview area.
@@ -22,6 +25,10 @@ export interface ScreenshotComparisonItem {
     readonly name: string;
     readonly path: string;
 }
+export interface RevealTreeNodeRequest {
+    readonly id: number;
+    readonly nodeId: string;
+}
 /**
  * A preview row can be a live fixture, a variant group, or a screenshot comparison.
  */
@@ -57,7 +64,10 @@ export declare class ExplorerModel extends ExplorerModel_base {
     readonly rightSidebarVisible: import('@vscode/observables').ISettableObservable<boolean, void>;
     readonly isDarkTheme: import('@vscode/observables').ISettableObservable<boolean, void>;
     readonly selectedNodeId: import('@vscode/observables').ISettableObservable<string | undefined, void>;
-    readonly expandedNodeIds: import('@vscode/observables').ISettableObservable<ReadonlySet<string>, void>;
+    readonly expandedNodeKeys: import('@vscode/observables').ISettableObservable<ReadonlySet<string>, void>;
+    readonly revealTreeNodeRequest: import('@vscode/observables').ISettableObservable<RevealTreeNodeRequest | undefined, void>;
+    private _nextRevealTreeNodeRequestId;
+    readonly favoriteNodeIds: import('@vscode/observables').ISettableObservable<ReadonlySet<string>, void>;
     readonly viewMode: import('@vscode/observables').ISettableObservable<ViewMode, void>;
     get daemonAvailable(): boolean;
     get daemon(): DaemonModel | undefined;
@@ -69,17 +79,30 @@ export declare class ExplorerModel extends ExplorerModel_base {
     /** The explorer's tree derived from the registry or report */
     readonly tree: import('@vscode/observables').IObservableWithChange<ExplorerTreeNode, void>;
     readonly filteredTree: import('@vscode/observables').IObservableWithChange<ExplorerTreeNode, void>;
+    readonly sidebarTrees: import('@vscode/observables').IObservableWithChange<readonly ExplorerTreeNode[], void>;
     readonly selectedNode: import('@vscode/observables').IObservableWithChange<ExplorerTreeNode | undefined, void>;
     /** List of preview rows to render based on current selection and view mode */
     readonly selectedFixtures: import('@vscode/observables').IObservableWithChange<readonly PreviewRow[], void>;
+    /** Shared store of per-fixture `input` overrides, edited via the properties panel. */
+    readonly inputStore: FixtureInputStore;
+    /** Explorer-only page viewport size and presentation overrides. */
+    readonly viewportStore: FixtureViewportStore;
+    /** Live rendered fixture instances used by visibility-scoped debug panels. */
+    readonly debugStore: FixtureDebugStore;
+    /** Docking layouts and open-panel selections that survive preview-row recycling. */
+    readonly debugWorkbenchState: DebugWorkbenchStateStore;
+    /** Flattened list of the live fixtures currently shown in the preview area. */
+    readonly renderedFixtures: import('@vscode/observables').IObservableWithChange<readonly FixtureItem[], void>;
     setViewMode: (mode: ViewMode) => void;
     navigateToSession: (sessionName: string) => void;
     toggleLeftSidebar: () => void;
     toggleRightSidebar: () => void;
     toggleTheme: () => void;
     selectNode: (nodeId: string) => void;
-    toggleNodeExpanded: (nodeId: string) => void;
-    isNodeExpanded(nodeId: string, reader: IReader): boolean;
+    toggleNodeExpanded: (treeKind: ExplorerTreeKind, nodeId: string) => void;
+    toggleNodeFavorite: (nodeId: string) => void;
+    revealSelectedNodeInTree: () => void;
+    isNodeExpanded(treeKind: ExplorerTreeKind, nodeId: string, reader: IReader): boolean;
     private _initialExpandedNodes;
     private _findNode;
     private _collectPreviewRows;

package/dist/components/ExplorerModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExplorerModel.d.ts","sourceRoot":"","sources":["../../src/components/ExplorerModel.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ExplorerModel.d.ts","sourceRoot":"","sources":["../../src/components/ExplorerModel.ts"],"names":[],"mappings":"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"}

package/dist/components/FixtureDebugStore.d.ts

@@ -0,0 +1,20 @@
+import { IReader } from '@vscode/observables';
+import { ComponentRendering } from '../core/ComponentRenderer.js';
+import { FixtureItem } from './ExplorerModel.js';
+export interface FixtureDebugInfo {
+    readonly fixture: FixtureItem;
+    readonly rendering: ComponentRendering;
+    readonly ready: boolean;
+    readonly hasOutput: boolean;
+    readonly outputEditable: boolean;
+}
+export declare class FixtureDebugStore {
+    private readonly _entries;
+    read(reader: IReader, fixtureId: string): FixtureDebugInfo | undefined;
+    get(fixtureId: string): FixtureDebugInfo | undefined;
+    setRendering(fixture: FixtureItem, rendering: ComponentRendering): void;
+    markReady(fixture: FixtureItem, rendering: ComponentRendering): void;
+    remove(fixtureId: string, rendering: ComponentRendering): void;
+    private _set;
+}
+//# sourceMappingURL=FixtureDebugStore.d.ts.map

package/dist/components/FixtureDebugStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FixtureDebugStore.d.ts","sourceRoot":"","sources":["../../src/components/FixtureDebugStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,OAAO,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,QAAQ,CAAC,SAAS,EAAE,kBAAkB,CAAC;IACvC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAC;CAClC;AAED,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAGvB;IAEF,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,GAAG,gBAAgB,GAAG,SAAS;IAItE,GAAG,CAAC,SAAS,EAAE,MAAM,GAAG,gBAAgB,GAAG,SAAS;IAIpD,YAAY,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,kBAAkB,GAAG,IAAI;IAUvE,SAAS,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,kBAAkB,GAAG,IAAI;IAWpE,MAAM,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,GAAG,IAAI;IAQ9D,OAAO,CAAC,IAAI;CAKb"}

package/dist/components/FixturePreviewItem.d.ts

@@ -1,8 +1,20 @@
+import { FixtureInputStore } from '../core/index.js';
 import { FixtureItem } from './ExplorerModel.js';
+import { FixtureViewportStore } from './PageViewportState.js';
+import { FixtureDebugStore } from './FixtureDebugStore.js';
+import { DebugWorkbenchStateStore } from './DebugWorkbenchState.js';
 import * as React from 'react';
 export declare const FixturePreviewItem: React.ComponentType<{
     fixture: FixtureItem;
     compact: boolean | undefined;
     onSelect: ((nodeId: string) => void) | undefined;
+    inputStore: FixtureInputStore | undefined;
+    viewportStore: FixtureViewportStore;
+    availablePageHeight: number;
+    debugStore: FixtureDebugStore;
+    debugWorkbenchState: DebugWorkbenchStateStore;
+    logicalFixtureCount: number;
+    rowId: string;
+    getRowElement: (id: string) => HTMLDivElement | undefined;
 } & {} & {} & {}>;
 //# sourceMappingURL=FixturePreviewItem.d.ts.map

package/dist/components/FixturePreviewItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FixturePreviewItem.d.ts","sourceRoot":"","sources":["../../src/components/FixturePreviewItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AA0FtD,eAAO,MAAM,kBAAkB;;;wBAhFE,MAAM,KAAK,IAAI;iBAuH/C,CAAC"}
+{"version":3,"file":"FixturePreviewItem.d.ts","sourceRoot":"","sources":["../../src/components/FixturePreviewItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAItD,OAAO,EAEL,KAAK,oBAAoB,EAI1B,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AA8RzE,eAAO,MAAM,kBAAkB;;;wBA5QE,MAAM,KAAK,IAAI;;;;;;;;wBAQf,MAAM,KAAK,cAAc,GAAG,SAAS;iBAohBrE,CAAC"}

package/dist/components/LeftSidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LeftSidebar.d.ts","sourceRoot":"","sources":["../../src/components/LeftSidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGxD,eAAO,MAAM,WAAW;;GAgBvB,CAAC"}
+{"version":3,"file":"LeftSidebar.d.ts","sourceRoot":"","sources":["../../src/components/LeftSidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGxD,eAAO,MAAM,WAAW;;GAwBvB,CAAC"}

package/dist/components/PageViewportState.d.ts

@@ -0,0 +1,31 @@
+import { IReader } from '@vscode/observables';
+import { PageMode } from '../core/index.js';
+export type PagePreviewMode = 'fit' | 'responsive' | 'actual';
+export interface PageViewportSettings {
+    readonly viewportIndex: number;
+    readonly width: number;
+    readonly height: number;
+    readonly mode: PagePreviewMode;
+}
+export interface PagePreviewGeometry {
+    readonly logicalWidth: number;
+    readonly logicalHeight: number;
+    readonly scale: number;
+    readonly visualWidth: number;
+    readonly visualHeight: number;
+}
+export declare function calculatePagePreviewGeometry(settings: PageViewportSettings, availableWidth: number, availableHeight?: number): PagePreviewGeometry;
+export declare class FixtureViewportStore {
+    private readonly _values;
+    constructor();
+    read(reader: IReader, fixtureId: string, pageMode: PageMode): PageViewportSettings;
+    get(fixtureId: string, pageMode: PageMode): PageViewportSettings;
+    selectViewport(fixtureId: string, pageMode: PageMode, viewportIndex: number): void;
+    setWidth(fixtureId: string, pageMode: PageMode, width: number): void;
+    setHeight(fixtureId: string, pageMode: PageMode, height: number): void;
+    setMode(fixtureId: string, pageMode: PageMode, mode: PagePreviewMode): void;
+    private _set;
+    private _load;
+    private _persist;
+}
+//# sourceMappingURL=PageViewportState.d.ts.map

package/dist/components/PageViewportState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageViewportState.d.ts","sourceRoot":"","sources":["../../src/components/PageViewportState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,OAAO,EAA4B,MAAM,qBAAqB,CAAC;AAC9F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGjD,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,YAAY,GAAG,QAAQ,CAAC;AAE9D,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,IAAI,EAAE,eAAe,CAAC;CAChC;AASD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;CAC/B;AA2CD,wBAAgB,4BAA4B,CAC1C,QAAQ,EAAE,oBAAoB,EAC9B,cAAc,EAAE,MAAM,EACtB,eAAe,SAAI,GAClB,mBAAmB,CAwBrB;AAED,qBAAa,oBAAoB;IAC/B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAkE;;IAM1F,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,oBAAoB;IAIlF,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,oBAAoB;IAIhE,cAAc,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,GAAG,IAAI;IAYlF,QAAQ,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAKpE,SAAS,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAKtE,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,eAAe,GAAG,IAAI;IAK3E,OAAO,CAAC,IAAI;IAMZ,OAAO,CAAC,KAAK;IAgBb,OAAO,CAAC,QAAQ;CAOjB"}

package/dist/components/PreviewArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewArea.d.ts","sourceRoot":"","sources":["../../src/components/PreviewArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,aAAa,EAAc,MAAM,oBAAoB,CAAC;AAqbpE,eAAO,MAAM,WAAW;;iBAmGvB,CAAC"}
+{"version":3,"file":"PreviewArea.d.ts","sourceRoot":"","sources":["../../src/components/PreviewArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,aAAa,EAAc,MAAM,oBAAoB,CAAC;AAocpE,eAAO,MAAM,WAAW;;iBAoGvB,CAAC"}

package/dist/components/RightSidebar.d.ts

@@ -1,6 +1,12 @@
-import { ExplorerTreeNode } from './types.js';
+import { ExplorerModel } from './ExplorerModel.js';
 import * as React from 'react';
+/**
+ * Properties panel: aggregates the input schemas of every fixture currently rendered in the
+ * preview area and presents one control per shared property. Editing a control updates the
+ * `input` of all fixtures that declare that property (same name + schema), so common values
+ * like a theme can be switched across the whole view at once.
+ */
 export declare const RightSidebar: React.ComponentType<import('@vscode/observables-react').PropsIn<{
-    selectedNode: import('@vscode/observables-react').IPropertyTransformerFactory<ExplorerTreeNode | undefined, ExplorerTreeNode | undefined>;
+    model: import('@vscode/observables-react').IPropertyTransformerFactory<ExplorerModel, ExplorerModel>;
 }>>;
 //# sourceMappingURL=RightSidebar.d.ts.map

package/dist/components/RightSidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RightSidebar.d.ts","sourceRoot":"","sources":["../../src/components/RightSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AA8GnD,eAAO,MAAM,YAAY;;GAqBxB,CAAC"}
+{"version":3,"file":"RightSidebar.d.ts","sourceRoot":"","sources":["../../src/components/RightSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAiJxD;;;;;GAKG;AACH,eAAO,MAAM,YAAY;;GAwCxB,CAAC"}

package/dist/components/TitleBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TitleBar.d.ts","sourceRoot":"","sources":["../../src/components/TitleBar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAY,MAAM,oBAAoB,CAAC;AAoDlE,eAAO,MAAM,QAAQ;;GA2DpB,CAAC"}
+{"version":3,"file":"TitleBar.d.ts","sourceRoot":"","sources":["../../src/components/TitleBar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAY,MAAM,oBAAoB,CAAC;AAoDlE,eAAO,MAAM,QAAQ;;GAoEpB,CAAC"}

package/dist/components/TreeView.d.ts

@@ -1,14 +1,16 @@
 import { ExplorerModel } from './ExplorerModel.js';
-import { ExplorerTreeNode } from './types.js';
+import { ExplorerTreeKind, ExplorerTreeNode } from './types.js';
 import * as React from 'react';
 export declare const TreeView: React.ComponentType<import('@vscode/observables-react').PropsIn<{
     model: import('@vscode/observables-react').IPropertyTransformerFactory<ExplorerModel, ExplorerModel>;
     nodes: import('@vscode/observables-react').IPropertyTransformerFactory<readonly ExplorerTreeNode[], readonly ExplorerTreeNode[]>;
     depth: import('@vscode/observables-react').IPropertyTransformerFactory<number, number>;
+    treeKind: import('@vscode/observables-react').IPropertyTransformerFactory<ExplorerTreeKind, ExplorerTreeKind>;
 }>>;
 export declare const TreeItem: React.ComponentType<{
     model: ExplorerModel;
     node: ExplorerTreeNode;
     depth: number;
+    treeKind: ExplorerTreeKind;
 } & {} & {} & {}>;
 //# sourceMappingURL=TreeView.d.ts.map

package/dist/components/TreeView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../src/components/TreeView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AA+BnD,eAAO,MAAM,QAAQ;;;;GAapB,CAAC;AAuCF,eAAO,MAAM,QAAQ;;;;iBA+DnB,CAAC"}
+{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../src/components/TreeView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,aAAa,EAAyB,MAAM,oBAAoB,CAAC;AAC/E,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAoDrE,eAAO,MAAM,QAAQ;;;;;GAcpB,CAAC;AA4DF,eAAO,MAAM,QAAQ;;;;;iBA+EnB,CAAC"}

package/dist/components/favoriteFixtures.d.ts

@@ -0,0 +1,4 @@
+import { ExplorerTreeNode } from './types.js';
+export declare const FAVORITES_NODE_ID = "component-explorer-internal:favorites";
+export declare function createFavoriteFixturesTree(root: ExplorerTreeNode, favoriteNodeIds: ReadonlySet<string>): ExplorerTreeNode | undefined;
+//# sourceMappingURL=favoriteFixtures.d.ts.map

package/dist/components/favoriteFixtures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"favoriteFixtures.d.ts","sourceRoot":"","sources":["../../src/components/favoriteFixtures.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,eAAO,MAAM,iBAAiB,0CAA0C,CAAC;AAEzE,wBAAgB,0BAA0B,CACxC,IAAI,EAAE,gBAAgB,EACtB,eAAe,EAAE,WAAW,CAAC,MAAM,CAAC,GACnC,gBAAgB,GAAG,SAAS,CAc9B"}

package/dist/components/icons.d.ts

@@ -1,18 +1,22 @@
 import * as React from 'react';
 export declare const ChevronRightIcon: ({ style }: {
     style?: React.CSSProperties;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export declare const ChevronDownIcon: ({ style }: {
     style?: React.CSSProperties;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export declare const ComponentIcon: ({ style }: {
     style?: React.CSSProperties;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export declare const FolderIcon: ({ style }: {
     style?: React.CSSProperties;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const PanelLeftIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const PanelRightIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const SunIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const MoonIcon: () => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
+export declare const StarIcon: ({ filled }: {
+    filled?: boolean;
+}) => React.JSX.Element;
+export declare const RevealInTreeIcon: () => React.JSX.Element;
+export declare const PanelLeftIcon: () => React.JSX.Element;
+export declare const PanelRightIcon: () => React.JSX.Element;
+export declare const SunIcon: () => React.JSX.Element;
+export declare const MoonIcon: () => React.JSX.Element;
 //# sourceMappingURL=icons.d.ts.map

package/dist/components/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/components/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,gBAAgB,GAAI,WAAW;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAAE,4CAI1E,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,WAAW;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAAE,4CAIzE,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,WAAW;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAAE,4CAIvE,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,WAAW;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAAE,4CAIpE,CAAC;AAEF,eAAO,MAAM,aAAa,+CAIzB,CAAC;AAEF,eAAO,MAAM,cAAc,+CAI1B,CAAC;AAEF,eAAO,MAAM,OAAO,+CAInB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAIpB,CAAC"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/components/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,gBAAgB,GAAI,WAAW;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAAE,sBAI1E,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,WAAW;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAAE,sBAIzE,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,WAAW;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAAE,sBAIvE,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,WAAW;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAAE,sBAIpE,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,YAAoB;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,sBAIhE,CAAC;AAEF,eAAO,MAAM,gBAAgB,yBAI5B,CAAC;AAEF,eAAO,MAAM,aAAa,yBAIzB,CAAC;AAEF,eAAO,MAAM,cAAc,yBAI1B,CAAC;AAEF,eAAO,MAAM,OAAO,yBAInB,CAAC;AAEF,eAAO,MAAM,QAAQ,yBAIpB,CAAC"}

package/dist/components/types.d.ts

@@ -1,5 +1,6 @@
 import { FixtureNode, ComponentDefinition } from '../core/index.js';
 import { FixturePath } from '../core/FixturePath.js';
+export type ExplorerTreeKind = 'components' | 'favorites';
 /**
  * Explorer's tree node structure, derived from FixtureNode.
  * This is the explorer's own representation of the fixture tree.
@@ -11,6 +12,7 @@ export interface ExplorerTreeNode {
     readonly children?: readonly ExplorerTreeNode[];
     readonly component?: ComponentDefinition;
     readonly labels: readonly string[];
+    readonly isFavoritesRoot?: boolean;
 }
 /**
  * Converts a FixtureNode tree to ExplorerTreeNode tree.