@widgetstools/angular-dock-manager 0.1.0

package/fesm2022/widgetstools-angular-dock-manager.mjs

@@ -0,0 +1,194 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, ViewChild, Output, Input, ChangeDetectionStrategy, Component, Injectable } from '@angular/core';
+import { DockviewComponent } from '@widgetstools/dock-manager-core';
+export { DockviewApi, DockviewComponent, EventEmitter, clearLocalStorage, createDefaultState, deserialize, dockReducer, draculaDark, exportToFile, findAllTabGroups, findFirstTabGroup, findTabGroupById, findTabGroupForPanel, forestDark, getThemeByName, getThemesByMode, githubLight, importFromFile, lavenderLight, loadFromLocalStorage, midnightDark, mintLight, nordDark, saveToLocalStorage, sepiaLight, serialize, slateDark, solarizedDark, solarizedLight, themes, validateState, vsCodeDark, vsCodeLight, warmLight } from '@widgetstools/dock-manager-core';
+import { BehaviorSubject } from 'rxjs';
+
+/**
+ * Thin Angular wrapper around the core DockviewComponent.
+ *
+ * All DOM rendering, event handling, and layout logic lives in core.
+ * Angular only provides panel content via dynamic component creation.
+ *
+ * Zoneless: Uses ChangeDetectorRef.markForCheck() instead of NgZone.
+ * Compatible with both zone.js and zoneless (provideZonelessChangeDetection).
+ */
+class DockManagerCoreComponent {
+    cdr;
+    /** Initial state for the dock manager */
+    initialState;
+    /** Content renderer — called when a panel needs content mounted into a container */
+    createContent;
+    /** Optional custom tab renderer */
+    createTab;
+    /** Optional header actions renderer */
+    createHeaderActions;
+    /** Theme: 'light', 'dark', or a DockTheme object */
+    theme = 'light';
+    /** Emits when state changes */
+    stateChange = new EventEmitter();
+    /** Emits before a panel close (preventable) */
+    willClose = new EventEmitter();
+    /** Emits before a drop (preventable) */
+    willDrop = new EventEmitter();
+    containerRef;
+    dock = null;
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    ngAfterViewInit() {
+        const options = {
+            initialState: this.initialState,
+            theme: this.theme,
+            createContent: (panelId, container, api) => {
+                const disposable = this.createContent(panelId, container, api);
+                this.cdr.markForCheck();
+                return disposable;
+            },
+            createTab: this.createTab
+                ? (panelId, container, isActive) => {
+                    const disposable = this.createTab(panelId, container, isActive);
+                    this.cdr.markForCheck();
+                    return disposable;
+                }
+                : undefined,
+            createHeaderActions: this.createHeaderActions
+                ? (slot, tabGroupId, container) => {
+                    const disposable = this.createHeaderActions(slot, tabGroupId, container);
+                    this.cdr.markForCheck();
+                    return disposable;
+                }
+                : undefined,
+            onStateChange: (state) => {
+                this.stateChange.emit(state);
+                this.cdr.markForCheck();
+            },
+            onWillClose: (event, panelId) => {
+                this.willClose.emit({ event, panelId });
+                this.cdr.markForCheck();
+            },
+            onWillDrop: (event, sourceId, targetId, position) => {
+                this.willDrop.emit({ event, sourceId, targetId, position });
+                this.cdr.markForCheck();
+            },
+        };
+        this.dock = new DockviewComponent(this.containerRef.nativeElement, options);
+    }
+    ngOnChanges(changes) {
+        if (changes['theme'] && !changes['theme'].firstChange && this.dock) {
+            this.dock.updateOptions({ theme: this.theme });
+        }
+    }
+    ngOnDestroy() {
+        this.dock?.dispose();
+        this.dock = null;
+    }
+    /** Dispatch an action to the dock manager */
+    dispatch(action) {
+        this.dock?.dispatch(action);
+    }
+    /** Get current state */
+    getState() {
+        return this.dock?.getState() ?? null;
+    }
+    /** Get the underlying DockviewComponent instance */
+    getInstance() {
+        return this.dock;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DockManagerCoreComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.2", type: DockManagerCoreComponent, isStandalone: true, selector: "dock-manager-core", inputs: { initialState: "initialState", createContent: "createContent", createTab: "createTab", createHeaderActions: "createHeaderActions", theme: "theme" }, outputs: { stateChange: "stateChange", willClose: "willClose", willDrop: "willDrop" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `<div #container style="width:100%;height:100%"></div>`, isInline: true, styles: [":host{display:block;width:100%;height:100%;overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DockManagerCoreComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dock-manager-core', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `<div #container style="width:100%;height:100%"></div>`, styles: [":host{display:block;width:100%;height:100%;overflow:hidden}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { initialState: [{
+                type: Input
+            }], createContent: [{
+                type: Input
+            }], createTab: [{
+                type: Input
+            }], createHeaderActions: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], stateChange: [{
+                type: Output
+            }], willClose: [{
+                type: Output
+            }], willDrop: [{
+                type: Output
+            }], containerRef: [{
+                type: ViewChild,
+                args: ['container', { static: true }]
+            }] } });
+
+class DockThemeService {
+    themeModeSubject = new BehaviorSubject('light');
+    mediaQueryList = null;
+    mediaQueryListener = null;
+    themeMode$ = this.themeModeSubject.asObservable();
+    constructor() {
+        this.initializeSystemModeListener();
+    }
+    setThemeMode(mode) {
+        this.themeModeSubject.next(mode);
+        this.applyTheme(mode);
+    }
+    getThemeMode() {
+        return this.themeModeSubject.getValue();
+    }
+    applyTheme(mode) {
+        const root = document.documentElement;
+        const isDark = mode === 'dark' || (mode === 'system' && this.isSystemDark());
+        if (isDark) {
+            root.classList.add('dark');
+        }
+        else {
+            root.classList.remove('dark');
+        }
+    }
+    isSystemDark() {
+        if (typeof window === 'undefined')
+            return false;
+        return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    initializeSystemModeListener() {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            this.mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
+            this.mediaQueryListener = (e) => {
+                const currentMode = this.themeModeSubject.getValue();
+                if (currentMode === 'system') {
+                    this.applyTheme('system');
+                }
+            };
+            this.mediaQueryList.addEventListener('change', this.mediaQueryListener);
+        }
+        catch (e) {
+            console.warn('System theme detection not supported', e);
+        }
+    }
+    ngOnDestroy() {
+        if (this.mediaQueryList && this.mediaQueryListener) {
+            this.mediaQueryList.removeEventListener('change', this.mediaQueryListener);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DockThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DockThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DockThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+// Core-owned DOM architecture
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DockManagerCoreComponent, DockThemeService };
+//# sourceMappingURL=widgetstools-angular-dock-manager.mjs.map

package/fesm2022/widgetstools-angular-dock-manager.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"widgetstools-angular-dock-manager.mjs","sources":["../../../packages/angular-dock-manager/src/lib/components/dock-manager-core/dock-manager-core.component.ts","../../../packages/angular-dock-manager/src/lib/services/dock-theme.service.ts","../../../packages/angular-dock-manager/src/public-api.ts","../../../packages/angular-dock-manager/src/widgetstools-angular-dock-manager.ts"],"sourcesContent":["/**\n * Thin Angular wrapper around the core DockviewComponent.\n *\n * All DOM rendering, event handling, and layout logic lives in core.\n * Angular only provides panel content via dynamic component creation.\n *\n * Zoneless: Uses ChangeDetectorRef.markForCheck() instead of NgZone.\n * Compatible with both zone.js and zoneless (provideZonelessChangeDetection).\n */\nimport {\n  Component,\n  Input,\n  Output,\n  EventEmitter,\n  ViewChild,\n  ElementRef,\n  AfterViewInit,\n  OnDestroy,\n  OnChanges,\n  SimpleChanges,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n} from '@angular/core';\nimport type {\n  DockManagerState,\n  DockPosition,\n  PreventableDockEvent,\n  DockviewComponentOptions,\n  IDisposable,\n  DockTheme,\n} from '@widgetstools/dock-manager-core';\nimport {\n  DockviewComponent,\n  PanelApi,\n} from '@widgetstools/dock-manager-core';\nimport type { DockAction } from '@widgetstools/dock-manager-core';\n\n/**\n * Content renderer function type.\n * Called by the core when a panel needs content.\n * @param api - PanelApi instance for widget-to-header communication.\n * Returns a dispose function to clean up when the panel is hidden/removed.\n */\nexport type ContentRenderer = (panelId: string, container: HTMLElement, api: PanelApi) => IDisposable;\nexport type TabRenderer = (panelId: string, container: HTMLElement, isActive: boolean) => IDisposable;\nexport type HeaderActionsRenderer = (slot: 'left' | 'right' | 'prefix', tabGroupId: string, container: HTMLElement) => IDisposable;\n\n@Component({\n  selector: 'dock-manager-core',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `<div #container style=\"width:100%;height:100%\"></div>`,\n  styles: [`:host { display: block; width: 100%; height: 100%; overflow: hidden; }`],\n})\nexport class DockManagerCoreComponent implements AfterViewInit, OnDestroy, OnChanges {\n  /** Initial state for the dock manager */\n  @Input() initialState!: DockManagerState;\n\n  /** Content renderer — called when a panel needs content mounted into a container */\n  @Input() createContent!: ContentRenderer;\n\n  /** Optional custom tab renderer */\n  @Input() createTab?: TabRenderer;\n\n  /** Optional header actions renderer */\n  @Input() createHeaderActions?: HeaderActionsRenderer;\n\n  /** Theme: 'light', 'dark', or a DockTheme object */\n  @Input() theme: 'light' | 'dark' | DockTheme = 'light';\n\n  /** Emits when state changes */\n  @Output() stateChange = new EventEmitter<DockManagerState>();\n\n  /** Emits before a panel close (preventable) */\n  @Output() willClose = new EventEmitter<{ event: PreventableDockEvent; panelId: string }>();\n\n  /** Emits before a drop (preventable) */\n  @Output() willDrop = new EventEmitter<{\n    event: PreventableDockEvent;\n    sourceId: string;\n    targetId: string;\n    position: DockPosition;\n  }>();\n\n  @ViewChild('container', { static: true }) containerRef!: ElementRef<HTMLDivElement>;\n\n  private dock: DockviewComponent | null = null;\n\n  constructor(private cdr: ChangeDetectorRef) {}\n\n  ngAfterViewInit(): void {\n    const options: DockviewComponentOptions = {\n      initialState: this.initialState,\n      theme: this.theme,\n\n      createContent: (panelId: string, container: HTMLElement, api: PanelApi): IDisposable => {\n        const disposable = this.createContent(panelId, container, api);\n        this.cdr.markForCheck();\n        return disposable;\n      },\n\n      createTab: this.createTab\n        ? (panelId: string, container: HTMLElement, isActive: boolean): IDisposable => {\n            const disposable = this.createTab!(panelId, container, isActive);\n            this.cdr.markForCheck();\n            return disposable;\n          }\n        : undefined,\n\n      createHeaderActions: this.createHeaderActions\n        ? (slot, tabGroupId, container): IDisposable => {\n            const disposable = this.createHeaderActions!(slot, tabGroupId, container);\n            this.cdr.markForCheck();\n            return disposable;\n          }\n        : undefined,\n\n      onStateChange: (state: DockManagerState) => {\n        this.stateChange.emit(state);\n        this.cdr.markForCheck();\n      },\n\n      onWillClose: (event: PreventableDockEvent, panelId: string) => {\n        this.willClose.emit({ event, panelId });\n        this.cdr.markForCheck();\n      },\n\n      onWillDrop: (event, sourceId, targetId, position) => {\n        this.willDrop.emit({ event, sourceId, targetId, position });\n        this.cdr.markForCheck();\n      },\n    };\n\n    this.dock = new DockviewComponent(this.containerRef.nativeElement, options);\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes['theme'] && !changes['theme'].firstChange && this.dock) {\n      this.dock.updateOptions({ theme: this.theme });\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.dock?.dispose();\n    this.dock = null;\n  }\n\n  /** Dispatch an action to the dock manager */\n  dispatch(action: DockAction): void {\n    this.dock?.dispatch(action);\n  }\n\n  /** Get current state */\n  getState(): DockManagerState | null {\n    return this.dock?.getState() ?? null;\n  }\n\n  /** Get the underlying DockviewComponent instance */\n  getInstance(): DockviewComponent | null {\n    return this.dock;\n  }\n}\n","import { Injectable } from '@angular/core';\nimport { BehaviorSubject, Observable } from 'rxjs';\n\nexport type ThemeMode = 'light' | 'dark' | 'system';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class DockThemeService {\n  private themeModeSubject = new BehaviorSubject<ThemeMode>('light');\n  private mediaQueryList: MediaQueryList | null = null;\n  private mediaQueryListener: ((e: MediaQueryListEvent) => void) | null = null;\n\n  themeMode$: Observable<ThemeMode> = this.themeModeSubject.asObservable();\n\n  constructor() {\n    this.initializeSystemModeListener();\n  }\n\n  setThemeMode(mode: ThemeMode): void {\n    this.themeModeSubject.next(mode);\n    this.applyTheme(mode);\n  }\n\n  getThemeMode(): ThemeMode {\n    return this.themeModeSubject.getValue();\n  }\n\n  private applyTheme(mode: ThemeMode): void {\n    const root = document.documentElement;\n    const isDark = mode === 'dark' || (mode === 'system' && this.isSystemDark());\n\n    if (isDark) {\n      root.classList.add('dark');\n    } else {\n      root.classList.remove('dark');\n    }\n  }\n\n  private isSystemDark(): boolean {\n    if (typeof window === 'undefined') return false;\n    return window.matchMedia('(prefers-color-scheme: dark)').matches;\n  }\n\n  private initializeSystemModeListener(): void {\n    if (typeof window === 'undefined') return;\n\n    try {\n      this.mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');\n      this.mediaQueryListener = (e) => {\n        const currentMode = this.themeModeSubject.getValue();\n        if (currentMode === 'system') {\n          this.applyTheme('system');\n        }\n      };\n      this.mediaQueryList.addEventListener('change', this.mediaQueryListener);\n    } catch (e) {\n      console.warn('System theme detection not supported', e);\n    }\n  }\n\n  ngOnDestroy(): void {\n    if (this.mediaQueryList && this.mediaQueryListener) {\n      this.mediaQueryList.removeEventListener('change', this.mediaQueryListener);\n    }\n  }\n}\n","// Core-owned DOM architecture\nexport * from './lib/components/dock-manager-core/dock-manager-core.component';\n\n// Services\nexport * from './lib/services/dock-theme.service';\n\n// Re-export core types and utilities for convenience\nexport {\n  DockviewComponent, DockviewApi, EventEmitter,\n  dockReducer, createDefaultState, validateState,\n  findTabGroupForPanel, findFirstTabGroup, findTabGroupById, findAllTabGroups,\n  serialize, deserialize, saveToLocalStorage, loadFromLocalStorage, clearLocalStorage, exportToFile, importFromFile,\n  themes, vsCodeLight, githubLight, warmLight, solarizedLight, sepiaLight, mintLight, lavenderLight,\n  vsCodeDark, draculaDark, nordDark, solarizedDark, midnightDark, forestDark, slateDark,\n  getThemeByName, getThemesByMode,\n} from '@widgetstools/dock-manager-core';\nexport type {\n  DockviewComponentOptions, IDisposable, DockAction,\n  AddPanelOptions, FloatPanelOptions, MovePanelOptions,\n  SplitDirection, DockPosition, DockEdge, PanelConfig, TabGroupNode,\n  SplitNode, LayoutNode, FloatingPanel, PopoutPanel, UnpinnedPanel,\n  DockManagerState, PreventableDockEvent, HeaderPosition,\n  DockTheme, DockThemeColors,\n} from '@widgetstools/dock-manager-core';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@widgetstools/angular-dock-manager",
+  "version": "0.1.0",
+  "description": "Angular dock manager — thin wrapper around dock-manager-core",
+  "peerDependencies": {
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0",
+    "rxjs": "^7.8.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "keywords": [
+    "angular",
+    "dock-manager",
+    "layout",
+    "tabs",
+    "split-pane",
+    "floating-panels",
+    "drag-and-drop"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/widgetstools/dockmanager.git",
+    "directory": "packages/angular-dock-manager"
+  },
+  "homepage": "https://github.com/widgetstools/dockmanager#readme",
+  "bugs": {
+    "url": "https://github.com/widgetstools/dockmanager/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/widgetstools-angular-dock-manager.mjs",
+  "typings": "types/widgetstools-angular-dock-manager.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/widgetstools-angular-dock-manager.d.ts",
+      "default": "./fesm2022/widgetstools-angular-dock-manager.mjs"
+    }
+  }
+}

package/types/widgetstools-angular-dock-manager.d.ts

@@ -0,0 +1,86 @@
+import * as i0 from '@angular/core';
+import { AfterViewInit, OnDestroy, OnChanges, EventEmitter, ElementRef, ChangeDetectorRef, SimpleChanges } from '@angular/core';
+import { PanelApi, IDisposable, DockManagerState, DockTheme, PreventableDockEvent, DockPosition, DockAction, DockviewComponent } from '@widgetstools/dock-manager-core';
+export { AddPanelOptions, DockAction, DockEdge, DockManagerState, DockPosition, DockTheme, DockThemeColors, DockviewApi, DockviewComponent, DockviewComponentOptions, EventEmitter, FloatPanelOptions, FloatingPanel, HeaderPosition, IDisposable, LayoutNode, MovePanelOptions, PanelConfig, PopoutPanel, PreventableDockEvent, SplitDirection, SplitNode, TabGroupNode, UnpinnedPanel, clearLocalStorage, createDefaultState, deserialize, dockReducer, draculaDark, exportToFile, findAllTabGroups, findFirstTabGroup, findTabGroupById, findTabGroupForPanel, forestDark, getThemeByName, getThemesByMode, githubLight, importFromFile, lavenderLight, loadFromLocalStorage, midnightDark, mintLight, nordDark, saveToLocalStorage, sepiaLight, serialize, slateDark, solarizedDark, solarizedLight, themes, validateState, vsCodeDark, vsCodeLight, warmLight } from '@widgetstools/dock-manager-core';
+import { Observable } from 'rxjs';
+
+/**
+ * Thin Angular wrapper around the core DockviewComponent.
+ *
+ * All DOM rendering, event handling, and layout logic lives in core.
+ * Angular only provides panel content via dynamic component creation.
+ *
+ * Zoneless: Uses ChangeDetectorRef.markForCheck() instead of NgZone.
+ * Compatible with both zone.js and zoneless (provideZonelessChangeDetection).
+ */
+
+/**
+ * Content renderer function type.
+ * Called by the core when a panel needs content.
+ * @param api - PanelApi instance for widget-to-header communication.
+ * Returns a dispose function to clean up when the panel is hidden/removed.
+ */
+type ContentRenderer = (panelId: string, container: HTMLElement, api: PanelApi) => IDisposable;
+type TabRenderer = (panelId: string, container: HTMLElement, isActive: boolean) => IDisposable;
+type HeaderActionsRenderer = (slot: 'left' | 'right' | 'prefix', tabGroupId: string, container: HTMLElement) => IDisposable;
+declare class DockManagerCoreComponent implements AfterViewInit, OnDestroy, OnChanges {
+    private cdr;
+    /** Initial state for the dock manager */
+    initialState: DockManagerState;
+    /** Content renderer — called when a panel needs content mounted into a container */
+    createContent: ContentRenderer;
+    /** Optional custom tab renderer */
+    createTab?: TabRenderer;
+    /** Optional header actions renderer */
+    createHeaderActions?: HeaderActionsRenderer;
+    /** Theme: 'light', 'dark', or a DockTheme object */
+    theme: 'light' | 'dark' | DockTheme;
+    /** Emits when state changes */
+    stateChange: EventEmitter<DockManagerState>;
+    /** Emits before a panel close (preventable) */
+    willClose: EventEmitter<{
+        event: PreventableDockEvent;
+        panelId: string;
+    }>;
+    /** Emits before a drop (preventable) */
+    willDrop: EventEmitter<{
+        event: PreventableDockEvent;
+        sourceId: string;
+        targetId: string;
+        position: DockPosition;
+    }>;
+    containerRef: ElementRef<HTMLDivElement>;
+    private dock;
+    constructor(cdr: ChangeDetectorRef);
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    /** Dispatch an action to the dock manager */
+    dispatch(action: DockAction): void;
+    /** Get current state */
+    getState(): DockManagerState | null;
+    /** Get the underlying DockviewComponent instance */
+    getInstance(): DockviewComponent | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DockManagerCoreComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DockManagerCoreComponent, "dock-manager-core", never, { "initialState": { "alias": "initialState"; "required": false; }; "createContent": { "alias": "createContent"; "required": false; }; "createTab": { "alias": "createTab"; "required": false; }; "createHeaderActions": { "alias": "createHeaderActions"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; }, { "stateChange": "stateChange"; "willClose": "willClose"; "willDrop": "willDrop"; }, never, never, true, never>;
+}
+
+type ThemeMode = 'light' | 'dark' | 'system';
+declare class DockThemeService {
+    private themeModeSubject;
+    private mediaQueryList;
+    private mediaQueryListener;
+    themeMode$: Observable<ThemeMode>;
+    constructor();
+    setThemeMode(mode: ThemeMode): void;
+    getThemeMode(): ThemeMode;
+    private applyTheme;
+    private isSystemDark;
+    private initializeSystemModeListener;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DockThemeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DockThemeService>;
+}
+
+export { DockManagerCoreComponent, DockThemeService };
+export type { ContentRenderer, HeaderActionsRenderer, TabRenderer, ThemeMode };