@vscode/component-explorer 0.1.1-0

package/dist/components/Explorer.d.ts

@@ -0,0 +1,6 @@
+import { FixtureRegistry } from '../core/index.js';
+export declare const Explorer: import('react').ComponentType<{
+    registry: FixtureRegistry;
+} & {} & {} & {}>;
+export declare function ExplorerWithDefaults(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Explorer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Explorer.d.ts","sourceRoot":"","sources":["../../src/components/Explorer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAiB,MAAM,kBAAkB,CAAC;AAQlE,eAAO,MAAM,QAAQ;;iBAsBpB,CAAC;AAgEF,wBAAgB,oBAAoB,4CAGnC"}

package/dist/components/ExplorerModel.d.ts

@@ -0,0 +1,50 @@
+import { IReader } from '@vscode/observables';
+import { FixtureRegistry, ComponentDefinition } from '../core/index.js';
+import { ExplorerTreeNode } from './types.js';
+/**
+ * A fixture item to be rendered in the preview area.
+ */
+export interface FixtureItem {
+    readonly id: string;
+    readonly name: string;
+    readonly path: string;
+    readonly component: ComponentDefinition;
+}
+/**
+ * A preview row can be either a single fixture or a horizontal variant group.
+ */
+export type PreviewRow = {
+    readonly type: 'single';
+    readonly fixture: FixtureItem;
+} | {
+    readonly type: 'variants';
+    readonly id: string;
+    readonly name: string;
+    readonly path: string;
+    readonly fixtures: readonly FixtureItem[];
+};
+declare const ExplorerModel_base: import('@vscode/observables-react').ViewModelClass<{
+    registry: import('@vscode/observables-react').IPropertyTransformerFactory<FixtureRegistry, FixtureRegistry>;
+}>;
+export declare class ExplorerModel extends ExplorerModel_base {
+    readonly leftSidebarVisible: import('@vscode/observables').ISettableObservable<boolean, void>;
+    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>;
+    /** The explorer's tree derived from the registry */
+    readonly tree: import('@vscode/observables').IObservableWithChange<ExplorerTreeNode, void>;
+    readonly selectedNode: import('@vscode/observables').IObservableWithChange<ExplorerTreeNode | undefined, void>;
+    /** List of preview rows to render based on current selection */
+    readonly selectedFixtures: import('@vscode/observables').IObservableWithChange<readonly PreviewRow[], void>;
+    toggleLeftSidebar: () => void;
+    toggleRightSidebar: () => void;
+    toggleTheme: () => void;
+    selectNode: (nodeId: string) => void;
+    toggleNodeExpanded: (nodeId: string) => void;
+    isNodeExpanded(nodeId: string, reader: IReader): boolean;
+    private _findNode;
+    private _collectPreviewRows;
+}
+export {};
+//# sourceMappingURL=ExplorerModel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExplorerModel.d.ts","sourceRoot":"","sources":["../../src/components/ExplorerModel.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAExE,OAAO,KAAK,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,KAAK,gBAAgB,EAAkB,MAAM,YAAY,CAAC;AAGnE;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,SAAS,EAAE,mBAAmB,CAAC;CACzC;AAED;;GAEG;AACH,MAAM,MAAM,UAAU,GAClB;IAAE,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IAAC,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAA;CAAE,GAC1D;IAAE,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;IAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,QAAQ,EAAE,SAAS,WAAW,EAAE,CAAA;CAAE,CAAC;;;;AAEhJ,qBAAa,aAAc,SAAQ,kBAEjC;IACA,QAAQ,CAAC,kBAAkB,mEAGxB;IACH,QAAQ,CAAC,mBAAmB,mEAGzB;IACH,QAAQ,CAAC,WAAW,mEAGjB;IACH,QAAQ,CAAC,cAAc,8EAGpB;IACH,QAAQ,CAAC,eAAe,+EAAyD;IAEjF,oDAAoD;IACpD,QAAQ,CAAC,IAAI,8EAGV;IAEH,QAAQ,CAAC,YAAY,0FAKlB;IAEH,gEAAgE;IAChE,QAAQ,CAAC,gBAAgB,mFAItB;IAEH,iBAAiB,QAAO,IAAI,CAE1B;IAEF,kBAAkB,QAAO,IAAI,CAE3B;IAEF,WAAW,QAAO,IAAI,CAEpB;IAEF,UAAU,GAAI,QAAQ,MAAM,KAAG,IAAI,CAEjC;IAEF,kBAAkB,GAAI,QAAQ,MAAM,KAAG,IAAI,CASzC;IAEF,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,OAAO;IAIxD,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,mBAAmB;CA8C5B"}

package/dist/components/FixturePreviewItem.d.ts

@@ -0,0 +1,8 @@
+import { FixtureItem } from './ExplorerModel.js';
+import * as React from 'react';
+export declare const FixturePreviewItem: React.ComponentType<{
+    fixture: FixtureItem;
+    onSizeChange: (id: string, width: number, height: number) => void;
+    compact: boolean | undefined;
+} & {} & {} & {}>;
+//# sourceMappingURL=FixturePreviewItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FixturePreviewItem.d.ts","sourceRoot":"","sources":["../../src/components/FixturePreviewItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAuItD,eAAO,MAAM,kBAAkB;;uBAnIC,MAAM,SAAS,MAAM,UAAU,MAAM,KAAK,IAAI;;iBAoL7E,CAAC"}

package/dist/components/LeftSidebar.d.ts

@@ -0,0 +1,5 @@
+import { ExplorerModel } from './ExplorerModel.js';
+export declare const LeftSidebar: import('react').ComponentType<import('@vscode/observables-react').PropsIn<{
+    model: import('@vscode/observables-react').IPropertyTransformerFactory<ExplorerModel, ExplorerModel>;
+}>>;
+//# sourceMappingURL=LeftSidebar.d.ts.map

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

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

package/dist/components/PreviewArea.d.ts

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

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

@@ -0,0 +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,EAA2B,MAAM,oBAAoB,CAAC;AA2KjF,eAAO,MAAM,WAAW;;iBAoDvB,CAAC"}

package/dist/components/RightSidebar.d.ts

@@ -0,0 +1,6 @@
+import { ExplorerTreeNode } from './types.js';
+import * as React from 'react';
+export declare const RightSidebar: React.ComponentType<import('@vscode/observables-react').PropsIn<{
+    selectedNode: import('@vscode/observables-react').IPropertyTransformerFactory<ExplorerTreeNode | undefined, ExplorerTreeNode | undefined>;
+}>>;
+//# sourceMappingURL=RightSidebar.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/TitleBar.d.ts

@@ -0,0 +1,5 @@
+import { ExplorerModel } from './ExplorerModel.js';
+export declare const TitleBar: import('react').ComponentType<import('@vscode/observables-react').PropsIn<{
+    model: import('@vscode/observables-react').IPropertyTransformerFactory<ExplorerModel, ExplorerModel>;
+}>>;
+//# sourceMappingURL=TitleBar.d.ts.map

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

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

package/dist/components/TitleBarButton.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export declare const TitleBarButton: React.ComponentType<{
+    active: boolean;
+} & {} & {
+    onClick: () => void;
+    title: string;
+    children: React.ReactNode;
+} & {}>;
+//# sourceMappingURL=TitleBarButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TitleBarButton.d.ts","sourceRoot":"","sources":["../../src/components/TitleBarButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,eAAO,MAAM,cAAc;;;mBAGG,IAAI;;;OA0BjC,CAAC"}

package/dist/components/TreeView.d.ts

@@ -0,0 +1,14 @@
+import { ExplorerModel } from './ExplorerModel.js';
+import { 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>;
+}>>;
+export declare const TreeItem: React.ComponentType<{
+    model: ExplorerModel;
+    node: ExplorerTreeNode;
+    depth: number;
+} & {} & {} & {}>;
+//# sourceMappingURL=TreeView.d.ts.map

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

@@ -0,0 +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;AAGnD,eAAO,MAAM,QAAQ;;;;GAapB,CAAC;AAuCF,eAAO,MAAM,QAAQ;;;;iBAiDnB,CAAC"}

package/dist/components/icons.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export declare const ChevronRightIcon: ({ style }: {
+    style?: React.CSSProperties;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ChevronDownIcon: ({ style }: {
+    style?: React.CSSProperties;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ComponentIcon: ({ style }: {
+    style?: React.CSSProperties;
+}) => import("react/jsx-runtime").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;
+//# sourceMappingURL=icons.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/index.d.ts

@@ -0,0 +1,15 @@
+export { Explorer, ExplorerWithDefaults } from './Explorer.js';
+export { ExplorerModel } from './ExplorerModel.js';
+export type { FixtureItem } from './ExplorerModel.js';
+export type { ExplorerTreeNode } from './types.js';
+export { toExplorerTree } from './types.js';
+export { TitleBar } from './TitleBar.js';
+export { TitleBarButton } from './TitleBarButton.js';
+export { LeftSidebar } from './LeftSidebar.js';
+export { RightSidebar } from './RightSidebar.js';
+export { TreeView, TreeItem } from './TreeView.js';
+export { PreviewArea } from './PreviewArea.js';
+export { FixturePreviewItem } from './FixturePreviewItem.js';
+export * from './icons.js';
+export { styles, mergeStyles } from './styles.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGtD,YAAY,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAG5C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAG7D,cAAc,YAAY,CAAC;AAG3B,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/styles.d.ts

@@ -0,0 +1,192 @@
+import * as React from 'react';
+export declare const styles: {
+    readonly container: {
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly height: "100%";
+        readonly width: "100%";
+        readonly fontFamily: "var(--vscode-font-family)";
+        readonly fontSize: "var(--vscode-font-size)";
+        readonly color: "var(--vscode-foreground)";
+        readonly backgroundColor: "var(--vscode-editor-background)";
+    };
+    readonly centerArea: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly flex: 1;
+        readonly overflow: "hidden";
+    };
+    readonly titleBar: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "space-between";
+        readonly height: "35px";
+        readonly minHeight: "35px";
+        readonly padding: "0 10px";
+        readonly backgroundColor: "var(--vscode-titleBar-activeBackground)";
+        readonly color: "var(--vscode-titleBar-activeForeground)";
+        readonly borderBottom: "1px solid var(--vscode-titleBar-border, var(--vscode-panel-border))";
+    };
+    readonly titleBarSection: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly gap: "2px";
+    };
+    readonly titleBarCenter: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly gap: "4px";
+        readonly fontSize: "13px";
+        readonly fontWeight: 400;
+    };
+    readonly titleBarButton: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly width: "28px";
+        readonly height: "28px";
+        readonly border: "none";
+        readonly background: "transparent";
+        readonly color: "var(--vscode-titleBar-activeForeground)";
+        readonly cursor: "pointer";
+        readonly borderRadius: "4px";
+    };
+    readonly titleBarButtonHover: {
+        readonly backgroundColor: "var(--vscode-toolbar-hoverBackground)";
+    };
+    readonly titleBarButtonActive: {
+        readonly backgroundColor: "var(--vscode-toolbar-activeBackground)";
+        readonly color: "var(--vscode-focusBorder)";
+    };
+    readonly sidebar: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly width: "260px";
+        readonly minWidth: "200px";
+        readonly backgroundColor: "var(--vscode-sideBar-background)";
+        readonly borderRight: "1px solid var(--vscode-titleBar-border, var(--vscode-panel-border))";
+    };
+    readonly sidebarRight: {
+        readonly borderRight: "none";
+        readonly borderLeft: "1px solid var(--vscode-titleBar-border, var(--vscode-panel-border))";
+    };
+    readonly sidebarHeader: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly height: "35px";
+        readonly minHeight: "35px";
+        readonly padding: "0 12px";
+        readonly fontSize: "11px";
+        readonly fontWeight: 700;
+        readonly textTransform: "uppercase";
+        readonly letterSpacing: "0.04em";
+        readonly color: "var(--vscode-titleBar-activeForeground)";
+        readonly backgroundColor: "var(--vscode-titleBar-activeBackground)";
+        readonly borderBottom: "1px solid var(--vscode-titleBar-border, var(--vscode-panel-border))";
+    };
+    readonly sidebarContent: {
+        readonly flex: 1;
+        readonly overflow: "auto";
+        readonly padding: "4px 0";
+    };
+    readonly treeItem: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly height: "22px";
+        readonly paddingRight: "8px";
+        readonly cursor: "pointer";
+        readonly userSelect: "none";
+    };
+    readonly treeItemSelected: {
+        readonly backgroundColor: "var(--vscode-list-activeSelectionBackground)";
+        readonly color: "var(--vscode-list-activeSelectionForeground)";
+    };
+    readonly treeItemHover: {
+        readonly backgroundColor: "var(--vscode-list-hoverBackground)";
+    };
+    readonly treeItemChevron: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly width: "16px";
+        readonly height: "16px";
+        readonly color: "var(--vscode-foreground)";
+        readonly opacity: 0.8;
+        readonly cursor: "pointer";
+    };
+    readonly treeItemChevronPlaceholder: {
+        readonly width: "16px";
+    };
+    readonly treeItemIcon: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly width: "16px";
+        readonly height: "16px";
+        readonly marginRight: "4px";
+    };
+    readonly treeItemLabel: {
+        readonly flex: 1;
+        readonly overflow: "hidden";
+        readonly textOverflow: "ellipsis";
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: "13px";
+    };
+    readonly treeItemCount: {
+        readonly marginLeft: "8px";
+        readonly fontSize: "11px";
+        readonly color: "var(--vscode-descriptionForeground)";
+    };
+    readonly mainContent: {
+        readonly flex: 1;
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly backgroundColor: "var(--vscode-editor-background)";
+        readonly color: "var(--vscode-descriptionForeground)";
+        readonly fontSize: "14px";
+    };
+    readonly propertiesPanel: {
+        readonly padding: "12px";
+    };
+    readonly propertyRow: {
+        readonly marginBottom: "12px";
+    };
+    readonly propertyLabel: {
+        readonly fontSize: "12px";
+        readonly color: "var(--vscode-foreground)";
+        readonly marginBottom: "4px";
+    };
+    readonly propertyDescription: {
+        readonly fontSize: "11px";
+        readonly color: "var(--vscode-descriptionForeground)";
+        readonly marginTop: "2px";
+    };
+    readonly propertyInput: {
+        readonly width: "100%";
+        readonly height: "26px";
+        readonly padding: "0 8px";
+        readonly fontSize: "13px";
+        readonly color: "var(--vscode-input-foreground)";
+        readonly backgroundColor: "var(--vscode-input-background)";
+        readonly border: "1px solid var(--vscode-input-border, transparent)";
+        readonly borderRadius: "2px";
+        readonly outline: "none";
+        readonly boxSizing: "border-box";
+    };
+    readonly propertySelect: {
+        readonly width: "100%";
+        readonly height: "26px";
+        readonly padding: "0 8px";
+        readonly fontSize: "13px";
+        readonly color: "var(--vscode-dropdown-foreground)";
+        readonly backgroundColor: "var(--vscode-dropdown-background)";
+        readonly border: "1px solid var(--vscode-dropdown-border)";
+        readonly borderRadius: "2px";
+        readonly outline: "none";
+        readonly boxSizing: "border-box";
+        readonly cursor: "pointer";
+    };
+};
+export declare function mergeStyles(...styleObjects: (React.CSSProperties | undefined | false)[]): React.CSSProperties;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/components/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4LT,CAAC;AAGX,wBAAgB,WAAW,CAAC,GAAG,YAAY,EAAE,CAAC,KAAK,CAAC,aAAa,GAAG,SAAS,GAAG,KAAK,CAAC,EAAE,GAAG,KAAK,CAAC,aAAa,CAE7G"}

package/dist/components/types.d.ts

@@ -0,0 +1,18 @@
+import { FixtureNode, ComponentDefinition } from '../core/index.js';
+/**
+ * Explorer's tree node structure, derived from FixtureNode.
+ * This is the explorer's own representation of the fixture tree.
+ */
+export interface ExplorerTreeNode {
+    readonly id: string;
+    readonly name: string;
+    readonly type: 'folder' | 'variants' | 'component';
+    readonly children?: readonly ExplorerTreeNode[];
+    readonly component?: ComponentDefinition;
+}
+/**
+ * Converts a FixtureNode tree to ExplorerTreeNode tree.
+ * This allows the explorer to have its own tree structure.
+ */
+export declare function toExplorerTree(node: FixtureNode): ExplorerTreeNode;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEzE;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAC;IACnD,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAC;IAChD,QAAQ,CAAC,SAAS,CAAC,EAAE,mBAAmB,CAAC;CAC1C;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,gBAAgB,CAQlE"}

package/dist/core/ComponentDefinition.d.ts

@@ -0,0 +1,70 @@
+import { Disposable, DisplayMode, StyleDefinition } from './DisplayMode.js';
+import { PropertySchema } from './PropertySchema.js';
+import { DefineFixtureOptions, FixtureGroupEntry, singleFixtureBrand, fixtureGroupBrand, fixtureVariantsBrand } from './defineFixture.js';
+/**
+ * Definition of a component fixture.
+ * Components can render React, plain HTML, or any other UI library.
+ */
+export interface ComponentDefinition {
+    /** Unique identifier within the fixture file */
+    readonly id: string;
+    /** Display name shown in the tree */
+    readonly name: string;
+    /** Optional description for documentation */
+    readonly description?: string;
+    /** How to isolate this component from other components */
+    readonly isolation: 'iframe' | 'shadow-dom';
+    /** How to display: page (device viewport) or component (natural size) */
+    readonly displayMode: DisplayMode;
+    /**
+     * Stylesheets to inject into shadow root (for shadow-dom isolation).
+     * Ignored when isolation is 'iframe'.
+     */
+    readonly styles?: readonly StyleDefinition[];
+    /** Background pattern for the preview canvas: 'light' (default) or 'dark' for dark transparent pattern */
+    readonly background: 'light' | 'dark';
+    /** Property schema for the component */
+    readonly properties: readonly PropertySchema[];
+    /**
+     * Render the component into the container.
+     * Returns a disposable for cleanup (e.g., unmounting React).
+     */
+    render(container: HTMLElement, props: Record<string, unknown>): Disposable;
+}
+/**
+ * A single fixture export created by defineFixture().
+ */
+export interface SingleFixtureExport {
+    readonly [singleFixtureBrand]: true;
+    readonly _options: DefineFixtureOptions;
+    readonly _createDefinition: (id: string, name: string) => ComponentDefinition;
+}
+/**
+ * A fixture group export created by defineFixtureGroup().
+ */
+export interface FixtureGroupExport {
+    readonly [fixtureGroupBrand]: true;
+    readonly _entries: {
+        [key: string]: FixtureGroupEntry;
+    };
+}
+/**
+ * A fixture variants export created by defineFixtureVariants().
+ * Variants are rendered horizontally by default and have a distinct icon.
+ */
+export interface FixtureVariantsExport {
+    readonly [fixtureVariantsBrand]: true;
+    readonly _variants: {
+        [key: string]: SingleFixtureExport;
+    };
+}
+/**
+ * Fixture export type - a single fixture, a group, or variants.
+ */
+export type FixtureExport = SingleFixtureExport | FixtureGroupExport | FixtureVariantsExport;
+/**
+ * Type guard for checking if a value is a ComponentDefinition.
+ * @deprecated Use isSingleFixture or isFixtureGroup from defineFixture.ts instead
+ */
+export declare function isComponentDefinition(value: unknown): value is ComponentDefinition;
+//# sourceMappingURL=ComponentDefinition.d.ts.map

package/dist/core/ComponentDefinition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentDefinition.d.ts","sourceRoot":"","sources":["../../src/core/ComponentDefinition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACjF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,KAAK,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE/I;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IAEpB,qCAAqC;IACrC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtB,6CAA6C;IAC7C,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAE9B,0DAA0D;IAC1D,QAAQ,CAAC,SAAS,EAAE,QAAQ,GAAG,YAAY,CAAC;IAE5C,yEAAyE;IACzE,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC;IAElC;;;OAGG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IAE7C,0GAA0G;IAC1G,QAAQ,CAAC,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC;IAEtC,wCAAwC;IACxC,QAAQ,CAAC,UAAU,EAAE,SAAS,cAAc,EAAE,CAAC;IAE/C;;;OAGG;IACH,MAAM,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,UAAU,CAAC;CAC5E;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,CAAC,kBAAkB,CAAC,EAAE,IAAI,CAAC;IACpC,QAAQ,CAAC,QAAQ,EAAE,oBAAoB,CAAC;IACxC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,mBAAmB,CAAC;CAC/E;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,CAAC,iBAAiB,CAAC,EAAE,IAAI,CAAC;IACnC,QAAQ,CAAC,QAAQ,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,iBAAiB,CAAA;KAAE,CAAC;CACzD;AAED;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,CAAC,oBAAoB,CAAC,EAAE,IAAI,CAAC;IACtC,QAAQ,CAAC,SAAS,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,mBAAmB,CAAA;KAAE,CAAC;CAC5D;AAED;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;AAE7F;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,mBAAmB,CASlF"}

package/dist/core/DisplayMode.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Disposable resource that can be cleaned up.
+ */
+export interface Disposable {
+    dispose(): void;
+}
+/**
+ * Style definition for shadow DOM injection.
+ */
+export type StyleDefinition = {
+    readonly type: 'css';
+    readonly content: string;
+} | {
+    readonly type: 'url';
+    readonly href: string;
+} | {
+    readonly type: 'adopted';
+    readonly sheet: CSSStyleSheet;
+};
+/**
+ * Display mode for a component.
+ */
+export type DisplayMode = PageMode | ComponentMode;
+/**
+ * Page mode - component fills a viewport with device presets.
+ */
+export interface PageMode {
+    readonly type: 'page';
+    /**
+     * Device presets or custom viewport sizes.
+     * When viewing, user can switch between these.
+     */
+    readonly viewports: ViewportPreset[];
+}
+/**
+ * Component mode - renders at natural size.
+ */
+export interface ComponentMode {
+    readonly type: 'component';
+}
+/**
+ * Viewport preset - either a named preset or custom dimensions.
+ */
+export type ViewportPreset = ViewportPresetName | {
+    readonly name: string;
+    readonly width: number;
+    readonly height: number;
+};
+export type ViewportPresetName = 'mobile' | 'tablet' | 'desktop';
+/**
+ * Standard viewport dimensions for presets.
+ */
+export declare const VIEWPORT_SIZES: Record<ViewportPresetName, {
+    readonly width: number;
+    readonly height: number;
+}>;
+/**
+ * Resolves a viewport preset to actual dimensions.
+ */
+export declare function resolveViewport(preset: ViewportPreset): {
+    name: string;
+    width: number;
+    height: number;
+};
+//# sourceMappingURL=DisplayMode.d.ts.map

package/dist/core/DisplayMode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisplayMode.d.ts","sourceRoot":"","sources":["../../src/core/DisplayMode.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GACvB;IAAE,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC;IAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAClD;IAAE,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC;IAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAC/C;IAAE,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAA;CAAE,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,aAAa,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,SAAS,EAAE,cAAc,EAAE,CAAC;CACtC;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,MAAM,cAAc,GACtB,kBAAkB,GAClB;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/E,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjE;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,kBAAkB,EAAE;IAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAI1G,CAAC;AAEF;;GAEG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,cAAc,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAKvG"}

package/dist/core/FixtureNode.d.ts

@@ -0,0 +1,31 @@
+import { ComponentDefinition, FixtureExport } from './ComponentDefinition.js';
+/**
+ * A node in the fixture tree.
+ * Can be a folder (with children), variants (with children, horizontal layout), or a component leaf.
+ */
+export interface FixtureNode {
+    /** Unique identifier (path segments joined by '/') */
+    readonly id: string;
+    /** Display name */
+    readonly name: string;
+    /** Node type: folder for groups, variants for horizontal variant display, component for leaves */
+    readonly type: 'folder' | 'variants' | 'component';
+    /** Children (for folders and variants) */
+    readonly children?: readonly FixtureNode[];
+    /** Component definition (only for component nodes) */
+    readonly component?: ComponentDefinition;
+}
+/**
+ * Creates a fixture tree from a map of fixture exports.
+ * @param fixtures Map of fixture file path to exported fixture object
+ */
+export declare function createFixtureTree(fixtures: Map<string, FixtureExport>): FixtureNode;
+/**
+ * Finds a node in the tree by path.
+ */
+export declare function findNodeByPath(root: FixtureNode, path: string[]): FixtureNode | undefined;
+/**
+ * Collects all component nodes from a subtree.
+ */
+export declare function collectComponents(node: FixtureNode): ComponentDefinition[];
+//# sourceMappingURL=FixtureNode.d.ts.map

package/dist/core/FixtureNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FixtureNode.d.ts","sourceRoot":"","sources":["../../src/core/FixtureNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAGnF;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IAEpB,mBAAmB;IACnB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtB,kGAAkG;IAClG,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAC;IAEnD,0CAA0C;IAC1C,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,WAAW,EAAE,CAAC;IAE3C,sDAAsD;IACtD,QAAQ,CAAC,SAAS,CAAC,EAAE,mBAAmB,CAAC;CAC1C;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,GAAG,WAAW,CAenF;AA8FD;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,WAAW,GAAG,SAAS,CAezF;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,WAAW,GAAG,mBAAmB,EAAE,CAU1E"}

package/dist/core/FixtureRegistry.d.ts

@@ -0,0 +1,37 @@
+import { IObservable, IReader } from '@vscode/observables';
+import { ComponentDefinition, FixtureExport } from './ComponentDefinition.js';
+import { FixtureNode } from './FixtureNode.js';
+/**
+ * Registry for discovered fixtures.
+ * Holds the fixture tree as an observable for reactivity.
+ */
+export declare class FixtureRegistry {
+    private readonly _fixtures;
+    /** Observable root of the fixture tree */
+    readonly root: IObservable<FixtureNode>;
+    /**
+     * Registers a fixture file.
+     * @param path The file path (e.g., 'components/Button.fixture.tsx')
+     * @param fixtureExport The exported fixture object
+     */
+    register(path: string, fixtureExport: FixtureExport): void;
+    /**
+     * Unregisters a fixture file.
+     * @param path The file path to remove
+     */
+    unregister(path: string): void;
+    /**
+     * Clears all registered fixtures.
+     */
+    clear(): void;
+    /**
+     * Gets a node by path.
+     */
+    getNode(reader: IReader, path: string[]): FixtureNode | undefined;
+    /**
+     * Gets a component by path (non-reactive, for use in preview iframe).
+     * @param path Array of path segments (e.g., ['Button', 'Primary'])
+     */
+    getComponentByPath(path: string[]): ComponentDefinition | undefined;
+}
+//# sourceMappingURL=FixtureRegistry.d.ts.map