@thatopen/services 0.0.1

package/src/built-in/index.ts

@@ -0,0 +1,755 @@
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars */
+/**
+ * Built-in component types and runtime stubs.
+ * Auto-generated by platform_builtin-components/scripts/distribute-types.mjs
+ */
+
+import type * as OBC from '@thatopen/components';
+import type * as BUI from '@thatopen/ui';
+import type * as THREE from 'three';
+type DataMap<_A = any, _B = any, _C = any, _D = any> = any;
+import type { EngineServicesClient, Item, ProjectData } from '../';
+
+export type ComponentSetup = (components: OBC.Components) => Promise<void> | void;
+export type ComponentSetups = {
+    core?: ComponentSetup[];
+    lazy?: {
+        uuid: string;
+        fn: ComponentSetup;
+    }[];
+};
+/**
+ * Application-level configuration passed to {@link AppManager} as a generic.
+ * Define this interface in your app to get typed access to icons and the grid.
+ * - `icons`: tuple of icon key names (e.g. `["SAVE", "DELETE"]`).
+ * - `grid`: the exact `BUI.Grid` type this app will use (e.g. `BUI.Grid<["Split", "Viewer"], [...]>`).
+ */
+export interface App {
+    icons?: readonly string[];
+    grid?: BUI.Grid<any, any>;
+}
+/** Derives a `Record<K, string>` from the icon keys tuple in `TApp`. */
+export type IconsOf<TApp extends App> = TApp['icons'] extends readonly (infer K extends string)[] ? Record<K, string> : undefined;
+/** Extracts the grid type from `TApp`, falling back to the base `BUI.Grid`. */
+export type AppGrid<TApp extends App> = TApp['grid'] extends BUI.Grid<any, any> ? TApp['grid'] : BUI.Grid<any, any>;
+/** Config object passed to {@link AppManager.init}. */
+export type AppInitConfig<TApp extends App> = {
+    client?: EngineServicesClient;
+    icons: IconsOf<TApp>;
+    componentSetups?: ComponentSetups;
+    grid: (grid: AppGrid<TApp>) => void;
+    container?: HTMLElement;
+};
+
+export declare const SIDEBAR_STORAGE_KEY = "thatopen-sidebar-collapsed";
+export interface SidebarState {
+    grid: BUI.Grid<any, any>;
+    collapsed: boolean;
+}
+export declare const sidebarTemplate: BUI.StatefullComponent<SidebarState>;
+
+/**
+ * Built-in component that structures a ThatOpen Platform application.
+ *
+ * AppManager creates the app shell: a content grid with named element
+ * slots arranged by CSS grid layouts, and an optional sidebar that lets
+ * the user switch between layouts.
+ *
+ * Usage:
+ * 1. Call {@link init} with icons, a grid configuration callback, and an optional container.
+ * 2. Optionally set {@link showSidebar} at any point after init.
+ */
+declare class _AppManager<TApp extends App = App> extends OBC.Component {
+    static readonly uuid: "2e32d873-02c9-421c-8743-d8a5ca6ad38a";
+    enabled: boolean;
+    private _icons;
+    private _iconsSet;
+    private _grid;
+    private _initialized;
+    private _sidebar;
+    private _client;
+    private _projectData;
+    private _lazySetups;
+    get icons(): IconsOf<TApp>;
+    /**
+     * The underlying `<bim-grid>` element.
+     * Available after {@link init} has been called.
+     */
+    get grid(): AppGrid<TApp> | null;
+    get client(): EngineServicesClient;
+    get projectData(): ProjectData;
+    /**
+     * Shows or hides the layout-switching sidebar.
+     * Can be set at any point after {@link init} has been called.
+     */
+    get showSidebar(): boolean;
+    set showSidebar(value: boolean);
+    /**
+     * Initialise the app: resolve client context, process icons, mount the DOM, and invoke the grid configuration callback.
+     */
+    init(config: AppInitConfig<TApp>): Promise<void>;
+    addSetup(uuid: string, fn: ComponentSetup): void;
+    private _registerLazySetup;
+    private injectStyles;
+}
+
+/**
+ * Built-in component that structures a ThatOpen Platform application.
+ *
+ * AppManager creates the app shell: a content grid with named element
+ * slots arranged by CSS grid layouts, and an optional sidebar that lets
+ * the user switch between layouts.
+ *
+ * Usage:
+ * 1. Call {@link init} with icons, a grid configuration callback, and an optional container.
+ * 2. Optionally set {@link showSidebar} at any point after init.
+ */
+export type AppManager = InstanceType<typeof _AppManager>;
+/**
+ * Built-in component that structures a ThatOpen Platform application.
+ *
+ * AppManager creates the app shell: a content grid with named element
+ * slots arranged by CSS grid layouts, and an optional sidebar that lets
+ * the user switch between layouts.
+ *
+ * Usage:
+ * 1. Call {@link init} with icons, a grid configuration callback, and an optional container.
+ * 2. Optionally set {@link showSidebar} at any point after init.
+ */
+export const AppManager = { uuid: '2e32d873-02c9-421c-8743-d8a5ca6ad38a' } as typeof _AppManager & { uuid: '2e32d873-02c9-421c-8743-d8a5ca6ad38a' };
+
+/**
+ * Which action buttons to expose per file row. All default to `true`.
+ */
+export interface FileListActions {
+    download?: boolean;
+    rename?: boolean;
+    delete?: boolean;
+}
+/**
+ * Config passed to {@link FileList.create}.
+ */
+export interface FileListConfig {
+    /** Services client used to list and mutate files. */
+    client: EngineServicesClient;
+    /** Optional folder ID to scope the list. If omitted, lists root files. */
+    folderId?: string;
+    /** Which action buttons to show per row. Defaults to all enabled. */
+    actions?: FileListActions;
+    /** Called when a file row is clicked (not an action button). */
+    onFileClick?: (file: Item) => void;
+}
+/**
+ * The result returned by {@link FileList.create}.
+ */
+export interface FileListInstance {
+    /** The DOM element to mount somewhere in your layout. */
+    element: HTMLElement;
+    /** Reloads the list from the services client. */
+    refresh: () => Promise<void>;
+    /** Changes the folder scope and reloads. Pass `undefined` for the root. */
+    setFolder: (folderId?: string) => Promise<void>;
+    /** Removes the element and forgets the instance. */
+    dispose: () => void;
+}
+
+/**
+ * Built-in component that renders a file list backed by the services client,
+ * with built-in download / rename / delete actions.
+ *
+ * The backing data comes from {@link EngineServicesClient.listFiles}, so the
+ * list stays in sync with the storage service. Each call to {@link create}
+ * returns an independent instance with its own DOM element.
+ *
+ * @example
+ * ```ts
+ * const fileList = components.get(FileList);
+ * const { element, refresh } = fileList.create({
+ *   client: app.client,
+ *   folderId: someFolderId,
+ * });
+ * container.appendChild(element);
+ * ```
+ */
+declare class _FileList extends OBC.Component {
+    static readonly uuid: "b0b5e2a2-0b3a-4a6b-8b1c-0b1c4a6b8b1c";
+    enabled: boolean;
+    readonly name = "FileList";
+    private _instances;
+    /**
+     * Creates a new file-list instance. Returns the DOM element to mount plus a
+     * `refresh` handle to reload the list, a `setFolder` to change scope, and a
+     * `dispose` to remove it.
+     */
+    create(config: FileListConfig): FileListInstance;
+    /**
+     * Removes every instance this manager has created.
+     */
+    dispose(): void;
+}
+
+/**
+ * Built-in component that renders a file list backed by the services client,
+ * with built-in download / rename / delete actions.
+ *
+ * The backing data comes from {@link EngineServicesClient.listFiles}, so the
+ * list stays in sync with the storage service. Each call to {@link create}
+ * returns an independent instance with its own DOM element.
+ *
+ * @example
+ * ```ts
+ * const fileList = components.get(FileList);
+ * const { element, refresh } = fileList.create({
+ *   client: app.client,
+ *   folderId: someFolderId,
+ * });
+ * container.appendChild(element);
+ * ```
+ */
+export type FileList = InstanceType<typeof _FileList>;
+/**
+ * Built-in component that renders a file list backed by the services client,
+ * with built-in download / rename / delete actions.
+ *
+ * The backing data comes from {@link EngineServicesClient.listFiles}, so the
+ * list stays in sync with the storage service. Each call to {@link create}
+ * returns an independent instance with its own DOM element.
+ *
+ * @example
+ * ```ts
+ * const fileList = components.get(FileList);
+ * const { element, refresh } = fileList.create({
+ *   client: app.client,
+ *   folderId: someFolderId,
+ * });
+ * container.appendChild(element);
+ * ```
+ */
+export const FileList = { uuid: 'b0b5e2a2-0b3a-4a6b-8b1c-0b1c4a6b8b1c' } as typeof _FileList & { uuid: 'b0b5e2a2-0b3a-4a6b-8b1c-0b1c4a6b8b1c' };
+
+/**
+ * A simple test component to validate the built-in component pipeline.
+ * Replace this with real components once the infrastructure is verified.
+ */
+declare class _HelloWorld extends OBC.Component {
+    static readonly uuid: "2c4ae432-fc24-43e9-9783-0c960c674e96";
+    enabled: boolean;
+    readonly name = "HelloWorld";
+    constructor(components: OBC.Components);
+    /**
+     * Returns a greeting message and logs it to the console.
+     * @param who - The name to greet. Defaults to `"World"`.
+     */
+    greet(who?: string): string;
+}
+/**
+ * PlatformComponents.import() expects a `main` variable in scope with
+ * a `componentDefinition` property pointing to the OBC.Component class.
+ * The IIFE build (name: 'main') assigns this to `var main = ...`.
+ */
+
+/**
+ * A simple test component to validate the built-in component pipeline.
+ * Replace this with real components once the infrastructure is verified.
+ */
+export type HelloWorld = InstanceType<typeof _HelloWorld>;
+/**
+ * A simple test component to validate the built-in component pipeline.
+ * Replace this with real components once the infrastructure is verified.
+ */
+export const HelloWorld = { uuid: '2c4ae432-fc24-43e9-9783-0c960c674e96' } as typeof _HelloWorld & { uuid: '2c4ae432-fc24-43e9-9783-0c960c674e96' };
+
+/**
+ * Config passed to {@link TabbedNavigation.create}. All fields are optional.
+ */
+export interface TabbedNavigationConfig {
+    /** Hide the text labels and show only icons. Defaults to `false`. */
+    iconsOnly?: boolean;
+    /**
+     * Fallback icon used when a layout doesn't declare one in its definition.
+     * Defaults to `"mdi:view-dashboard"`.
+     */
+    fallbackIcon?: string;
+    /** Called after the user switches to a different layout via the tabs. */
+    onLayoutChange?: (layoutName: string) => void;
+}
+/**
+ * The result returned by {@link TabbedNavigation.create}.
+ */
+export interface TabbedNavigationInstance {
+    /** The tab-bar DOM element. Mount it inside an AppManager grid slot. */
+    element: HTMLElement;
+    /** Re-reads the grid's layouts and re-renders the tabs. Call after mutating `grid.layouts`. */
+    refresh: () => void;
+    /** Tears down listeners and removes the element. */
+    dispose: () => void;
+}
+
+/**
+ * Built-in tabbed navigation for a platform app. Renders one tab per layout
+ * declared on the `AppManager`'s grid, with the current layout highlighted.
+ * Clicking a tab switches `grid.layout`, which swaps the visible area set.
+ *
+ * This is the default top-of-app navigation pattern the platform proposes —
+ * Claude Code should use it by default when scaffolding apps with multiple
+ * layouts, instead of hand-rolling a custom tab bar.
+ *
+ * Must be called after `AppManager.init()` has mounted the grid.
+ *
+ * @example
+ * ```ts
+ * const app = components.get(AppManager<MyApp>);
+ * await app.init({ ... });
+ * const tabs = components.get(TabbedNavigation);
+ * const { element } = tabs.create();
+ * // Mount `element` in a grid area that sits above the main content.
+ * ```
+ */
+declare class _TabbedNavigation extends OBC.Component {
+    static readonly uuid: "3c2a9f34-8b6c-4d1b-8f7a-1e4a5b2c9f08";
+    enabled: boolean;
+    readonly name = "TabbedNavigation";
+    private _instances;
+    /**
+     * Creates a new tab-bar instance bound to the current `AppManager` grid.
+     */
+    create(config?: TabbedNavigationConfig): TabbedNavigationInstance;
+    /** Disposes every instance this manager has created. */
+    dispose(): void;
+}
+
+/**
+ * Built-in tabbed navigation for a platform app. Renders one tab per layout
+ * declared on the `AppManager`'s grid, with the current layout highlighted.
+ * Clicking a tab switches `grid.layout`, which swaps the visible area set.
+ *
+ * This is the default top-of-app navigation pattern the platform proposes —
+ * Claude Code should use it by default when scaffolding apps with multiple
+ * layouts, instead of hand-rolling a custom tab bar.
+ *
+ * Must be called after `AppManager.init()` has mounted the grid.
+ *
+ * @example
+ * ```ts
+ * const app = components.get(AppManager<MyApp>);
+ * await app.init({ ... });
+ * const tabs = components.get(TabbedNavigation);
+ * const { element } = tabs.create();
+ * // Mount `element` in a grid area that sits above the main content.
+ * ```
+ */
+export type TabbedNavigation = InstanceType<typeof _TabbedNavigation>;
+/**
+ * Built-in tabbed navigation for a platform app. Renders one tab per layout
+ * declared on the `AppManager`'s grid, with the current layout highlighted.
+ * Clicking a tab switches `grid.layout`, which swaps the visible area set.
+ *
+ * This is the default top-of-app navigation pattern the platform proposes —
+ * Claude Code should use it by default when scaffolding apps with multiple
+ * layouts, instead of hand-rolling a custom tab bar.
+ *
+ * Must be called after `AppManager.init()` has mounted the grid.
+ *
+ * @example
+ * ```ts
+ * const app = components.get(AppManager<MyApp>);
+ * await app.init({ ... });
+ * const tabs = components.get(TabbedNavigation);
+ * const { element } = tabs.create();
+ * // Mount `element` in a grid area that sits above the main content.
+ * ```
+ */
+export const TabbedNavigation = { uuid: '3c2a9f34-8b6c-4d1b-8f7a-1e4a5b2c9f08' } as typeof _TabbedNavigation & { uuid: '3c2a9f34-8b6c-4d1b-8f7a-1e4a5b2c9f08' };
+
+export interface ColorsPaletteState {
+    components: OBC.Components;
+    onApply: (color: string, name?: string) => void | Promise<void>;
+    defaultColors?: string[];
+    addHighlighterColors?: boolean;
+}
+export type ColorsPaletteComponent = BUI.StatefullComponent<ColorsPaletteState>;
+
+export declare const colorsPaletteTemplate: ColorsPaletteComponent;
+
+export interface LoadModelButtonState {
+    components: OBC.Components;
+    types?: {
+        ifc?: boolean;
+        fragments?: boolean;
+    };
+    onIfcProcessed?: (model: any) => void | Promise<void>;
+}
+export type LoadModelButtonComponent = BUI.StatefullComponent<LoadModelButtonState>;
+
+export declare const loadModelButtonTemplate: LoadModelButtonComponent;
+
+export type HighlightersListData = {
+    Name: string;
+    color: string;
+    Actions: string;
+};
+export interface HighlightersListState {
+    components: OBC.Components;
+    missingDataMessage?: string;
+}
+export type HighlightersListComponent = BUI.StatefullComponent<HighlightersListState>;
+
+export declare const highlightersListTemplate: HighlightersListComponent;
+export declare const onHighlightersListCreated: ([table, _, { getCurrentState }]: [BUI.Table<HighlightersListData>, BUI.UpdateFunction<HighlightersListState>, BUI.ComponentUtils<HighlightersListState>]) => void;
+
+export type ClippingsListData = {
+    Name: string;
+    Actions: string;
+    id: string;
+};
+export interface ClippingsListState {
+    components: OBC.Components;
+    missingDataMessage?: string;
+}
+export type ClippingsListComponent = BUI.StatefullComponent<ClippingsListState>;
+
+export declare const clippingsListTemplate: ClippingsListComponent;
+export declare const onClippingsListCreated: ([table, _, { getCurrentState }]: [BUI.Table<ClippingsListData>, BUI.UpdateFunction<ClippingsListState>, BUI.ComponentUtils<ClippingsListState>]) => void;
+
+export interface ScreenshotAnnotatorState {
+    components: OBC.Components;
+    blob: Blob;
+    onSend: (annotatedBlob: Blob) => Promise<void>;
+    onCancel: () => Promise<void>;
+    sendLabel?: string;
+}
+export type ScreenshotAnnotatorComponent = BUI.StatefullComponent<ScreenshotAnnotatorState>;
+
+export declare const screenshotAnnotatorTemplate: ScreenshotAnnotatorComponent;
+
+export type AreaMeasuringsListData = {
+    id: string;
+    Value: string;
+    Actions: string;
+    isTotal: boolean;
+};
+export interface AreaMeasuringsListState {
+    components: OBC.Components;
+    world: OBC.World;
+    missingDataMessage?: string;
+}
+export type AreaMeasuringsListComponent = BUI.StatefullComponent<AreaMeasuringsListState>;
+
+export declare const areaMeasuringsListTemplate: AreaMeasuringsListComponent;
+export declare const onAreaMeasuringsListCreated: ([table, _, { getCurrentState }]: [BUI.Table<AreaMeasuringsListData>, BUI.UpdateFunction<AreaMeasuringsListState>, BUI.ComponentUtils<AreaMeasuringsListState>]) => void;
+
+export type ClassificationsListData = {
+    Name: string;
+    modelIdMap: string;
+    Actions: string;
+};
+export interface ClassificationsListState {
+    components: OBC.Components;
+    missingDataMessage?: string;
+}
+export type ClassificationsListComponent = BUI.StatefullComponent<ClassificationsListState>;
+
+export declare const classificationsListTemplate: ClassificationsListComponent;
+export declare const onClassificationsListCreated: ([table, _, { getCurrentState }]: [BUI.Table<ClassificationsListData>, BUI.UpdateFunction<ClassificationsListState>, BUI.ComponentUtils<ClassificationsListState>]) => void;
+
+export type LengthMeasuringsListData = {
+    id: string;
+    Value: string;
+    Actions: string;
+    isTotal: boolean;
+};
+export interface LengthMeasuringsListState {
+    components: OBC.Components;
+    world: OBC.World;
+    missingDataMessage?: string;
+}
+export type LengthMeasuringsListComponent = BUI.StatefullComponent<LengthMeasuringsListState>;
+
+export declare const lengthMeasuringsListTemplate: LengthMeasuringsListComponent;
+export declare const onLengthMeasuringsListCreated: ([table, _, { getCurrentState }]: [BUI.Table<LengthMeasuringsListData>, BUI.UpdateFunction<LengthMeasuringsListState>, BUI.ComponentUtils<LengthMeasuringsListState>]) => void;
+
+export type QueriesHierarchyData = {
+    Name: string;
+    queries: string;
+    Actions: string;
+};
+export interface QueriesHierarchyState {
+    components: OBC.Components;
+    queryHierarchy: string[][];
+    missingDataMessage?: string;
+}
+export type QueriesHierarchyComponent = BUI.StatefullComponent<QueriesHierarchyState>;
+
+export declare const queriesHierarchyTemplate: QueriesHierarchyComponent;
+export declare const onQueriesHierarchyCreated: ([table, _, { getCurrentState }]: [BUI.Table<QueriesHierarchyData>, BUI.UpdateFunction<QueriesHierarchyState>, BUI.ComponentUtils<QueriesHierarchyState>]) => void;
+
+export interface ViewerToolbarState {
+    components: OBC.Components;
+    world: OBC.World;
+}
+export type ViewerToolbarComponent = BUI.StatefullComponent<ViewerToolbarState>;
+
+export declare const viewerToolbarTemplate: ViewerToolbarComponent;
+
+export interface ModelsDropdownState {
+    components: OBC.Components;
+    filterFn?: (modelId: string) => boolean;
+}
+export type ModelsDropdownComponent = BUI.StatefullComponent<ModelsDropdownState>;
+
+export declare const modelsDropdownTemplate: ModelsDropdownComponent;
+export declare const onModelsDropdownCreated: ([dropdown]: [BUI.Dropdown, BUI.UpdateFunction<ModelsDropdownState>, BUI.ComponentUtils<ModelsDropdownState>]) => void;
+
+export interface ModelsSectionState {
+    components: OBC.Components;
+    /** Whether to show the load-model button. Defaults to `true`. */
+    showLoadButton?: boolean;
+    /** Custom element to use as load button instead of the default. */
+    loadButton?: HTMLElement;
+}
+export type ModelsSectionComponent = BUI.StatefullComponent<ModelsSectionState>;
+export type ModelsSectionGridElement = {
+    name: "collider";
+    state: ModelsSectionState;
+};
+
+export declare const modelsSectionTemplate: ModelsSectionComponent;
+export declare const onModelsSectionCreated: ([panelSection, _, { getCurrentState }]: [BUI.PanelSection, BUI.UpdateFunction<ModelsSectionState>, BUI.ComponentUtils<ModelsSectionState>]) => void;
+
+export type UICustomShape = Record<string, {
+    type: HTMLElement;
+    state: Record<string, any>;
+}>;
+export type BuiltinShape = {
+    colorsPalette: {
+        type: HTMLDivElement;
+        state: ColorsPaletteState;
+    };
+    loadModelButton: {
+        type: BUI.Button;
+        state: LoadModelButtonState;
+    };
+    highlightersList: {
+        type: BUI.Table<HighlightersListData>;
+        state: HighlightersListState;
+    };
+    clippingsList: {
+        type: BUI.Table<ClippingsListData>;
+        state: ClippingsListState;
+    };
+    screenshotAnnotator: {
+        type: HTMLDialogElement;
+        state: ScreenshotAnnotatorState;
+    };
+    areaMeasuringsList: {
+        type: BUI.Table<AreaMeasuringsListData>;
+        state: AreaMeasuringsListState;
+    };
+    classificationsList: {
+        type: BUI.Table<ClassificationsListData>;
+        state: ClassificationsListState;
+    };
+    lengthMeasuringsList: {
+        type: BUI.Table<LengthMeasuringsListData>;
+        state: LengthMeasuringsListState;
+    };
+    queriesHierarchy: {
+        type: BUI.Table<QueriesHierarchyData>;
+        state: QueriesHierarchyState;
+    };
+    viewerToolbar: {
+        type: HTMLElement;
+        state: ViewerToolbarState;
+    };
+    modelsDropdown: {
+        type: BUI.Dropdown;
+        state: ModelsDropdownState;
+    };
+    modelsSection: {
+        type: BUI.PanelSection;
+        state: ModelsSectionState;
+    };
+};
+
+export type UIFactoryMap<T extends UICustomShape> = {
+    [K in keyof T]: UIFactory<T[K]['type'], T[K]['state']>;
+};
+export declare class UIDataMap<T extends UICustomShape> {
+    get<K extends keyof T & string>(key: K): UIFactoryMap<T>[K];
+    get(key: keyof T & string): UIFactoryMap<T>[keyof T];
+}
+export type UIFactoryInstance<TElement extends HTMLElement, TState extends Record<string, any>> = [TElement, BUI.UpdateFunction<TState>, BUI.ComponentUtils<TState>];
+export declare abstract class UIFactory<TElement extends HTMLElement, TState extends Record<string, any>> {
+    readonly instances: DataMap<string, UIFactoryInstance<TElement, TState>>;
+    abstract readonly template: BUI.StatefullComponent<TState>;
+    create(state: TState, options?: {
+        id?: string;
+    }): UIFactoryInstance<TElement, TState>;
+    updateInstances(state?: Partial<TState>): void;
+}
+export declare function createFactory<TEl extends HTMLElement, TState extends Record<string, any>>(template: BUI.StatefullComponent<TState>, onInstanceCreated?: (item: UIFactoryInstance<TEl, TState>) => void): UIFactory<TEl, TState>;
+
+declare class _UIManager<TCustom extends UICustomShape = UICustomShape> extends OBC.Component {
+    static readonly uuid: "234f1416-528d-452a-9cc9-a16c5239b2eb";
+    enabled: boolean;
+    readonly name = "UIManager";
+    readonly builtIn: UIDataMap<BuiltinShape>;
+    readonly custom: UIDataMap<TCustom>;
+    constructor(components: OBC.Components);
+    private registerBuiltInTemplate;
+    registerTemplate<K extends keyof TCustom & string>(name: K, config: {
+        template: BUI.StatefullComponent<TCustom[K]['state']>;
+        onInstanceCreated?: (item: [TCustom[K]['type'], BUI.UpdateFunction<TCustom[K]['state']>, BUI.ComponentUtils<TCustom[K]['state']>]) => void;
+    }): void;
+}
+
+export type UIManager = InstanceType<typeof _UIManager>;
+export const UIManager = { uuid: '234f1416-528d-452a-9cc9-a16c5239b2eb' } as typeof _UIManager & { uuid: '234f1416-528d-452a-9cc9-a16c5239b2eb' };
+
+export type ViewportFloatingGridLayouts = ['default'];
+export interface ViewportFloatingGridToolbarState {
+    components: OBC.Components;
+    world: OBC.World;
+}
+export type ViewportFloatingGridElements = [
+    {
+        name: 'top';
+        state: ViewportFloatingGridToolbarState;
+    },
+    {
+        name: 'left';
+        state: ViewportFloatingGridToolbarState;
+    },
+    {
+        name: 'right';
+        state: ViewportFloatingGridToolbarState;
+    },
+    {
+        name: 'bottom';
+        state: ViewportFloatingGridToolbarState;
+    }
+];
+export type ViewportFloatingGrid = BUI.Grid<ViewportFloatingGridLayouts, ViewportFloatingGridElements>;
+/**
+ * The result of creating a viewport instance via {@link ViewportsManager.create}.
+ */
+export interface ViewportInstance {
+    /** The `<bim-viewport>` HTML element to mount in a layout slot. */
+    element: BUI.Viewport;
+    /** The Three.js world bound to this viewport. */
+    world: OBC.SimpleWorld<OBC.SimpleScene, OBC.OrthoPerspectiveCamera, OBC.SimpleRenderer>;
+    floatingGrid?: ViewportFloatingGrid;
+}
+export type FloatingGridToolbars = {
+    top?: ViewportFloatingGrid['elements']['top'];
+    bottom?: ViewportFloatingGrid['elements']['bottom'];
+    left?: ViewportFloatingGrid['elements']['left'];
+    right?: ViewportFloatingGrid['elements']['right'];
+};
+/**
+ * Optional configuration when creating a viewport instance.
+ */
+export interface ViewportConfig {
+    /** Background color for the scene. Set to `null` for transparent. Defaults to `null`. */
+    backgroundColor?: THREE.ColorRepresentation | null;
+    /** Grid color. Defaults to `"lightgray"`. */
+    gridColor?: THREE.ColorRepresentation;
+    /** Setup for the floating grid in the viewport. Useful for toolbars. */
+    floatingToolbarsSetup?: (state: ViewportFloatingGridToolbarState) => FloatingGridToolbars;
+}
+
+/**
+ * Built-in component that creates 3D viewports with a pre-configured
+ * world (scene, camera, renderer) and fragments manager.
+ *
+ * ViewportManager is a factory: each call to {@link create} returns a
+ * new independent viewport with its own world. The component tracks all
+ * created instances and cleans them up on {@link dispose}.
+ *
+ * @example
+ * ```ts
+ * const viewports = components.get(ViewportManager);
+ * const { element, world } = await viewports.create();
+ *
+ * // Use `element` as a slot in AppManager
+ * app.setup = {
+ *   elements: { viewer: element },
+ *   layouts: { Main: { template: `"viewer" 1fr / 1fr` } },
+ * };
+ * ```
+ */
+declare class _ViewportsManager extends OBC.Component {
+    static readonly uuid: "def81d43-6b44-4f4a-9c08-7649486112a4";
+    enabled: boolean;
+    readonly name = "ViewportManager";
+    private _instances;
+    private _fragmentsInitialized;
+    /**
+     * Creates a new viewport instance with its own world, scene, camera,
+     * and renderer. Fragments manager is initialised automatically on
+     * the first call.
+     *
+     * @param config - Optional visual configuration for the viewport.
+     * @returns A {@link ViewportInstance} containing the DOM element and world.
+     */
+    create(config?: ViewportConfig): Promise<ViewportInstance>;
+    private setupFloatingGrid;
+    /**
+     * Disposes all created viewport instances and their worlds.
+     */
+    dispose(): void;
+    /**
+     * Initialises the fragments manager if not yet done, and wires up
+     * model loading for the given world.
+     */
+    private _initFragments;
+    /**
+     * Grows the camera's far plane so it always encompasses every loaded
+     * model. Without this, large models clip against the default far plane
+     * and disappear from view.
+     */
+    private _expandCameraFar;
+}
+
+/**
+ * Built-in component that creates 3D viewports with a pre-configured
+ * world (scene, camera, renderer) and fragments manager.
+ *
+ * ViewportManager is a factory: each call to {@link create} returns a
+ * new independent viewport with its own world. The component tracks all
+ * created instances and cleans them up on {@link dispose}.
+ *
+ * @example
+ * ```ts
+ * const viewports = components.get(ViewportManager);
+ * const { element, world } = await viewports.create();
+ *
+ * // Use `element` as a slot in AppManager
+ * app.setup = {
+ *   elements: { viewer: element },
+ *   layouts: { Main: { template: `"viewer" 1fr / 1fr` } },
+ * };
+ * ```
+ */
+export type ViewportsManager = InstanceType<typeof _ViewportsManager>;
+/**
+ * Built-in component that creates 3D viewports with a pre-configured
+ * world (scene, camera, renderer) and fragments manager.
+ *
+ * ViewportManager is a factory: each call to {@link create} returns a
+ * new independent viewport with its own world. The component tracks all
+ * created instances and cleans them up on {@link dispose}.
+ *
+ * @example
+ * ```ts
+ * const viewports = components.get(ViewportManager);
+ * const { element, world } = await viewports.create();
+ *
+ * // Use `element` as a slot in AppManager
+ * app.setup = {
+ *   elements: { viewer: element },
+ *   layouts: { Main: { template: `"viewer" 1fr / 1fr` } },
+ * };
+ * ```
+ */
+export const ViewportsManager = { uuid: 'def81d43-6b44-4f4a-9c08-7649486112a4' } as typeof _ViewportsManager & { uuid: 'def81d43-6b44-4f4a-9c08-7649486112a4' };