@furystack/shades-common-components 11.0.0 → 12.0.1

package/esm/services/index.js

@@ -1,9 +1,13 @@
 export * from './click-away-service.js';
 export * from './collection-service.js';
-export * from './theme-provider-service.js';
+export * from './css-variable-theme.js';
 export * from './default-dark-theme.js';
 export * from './default-light-theme.js';
 export * from './default-palette.js';
+export * from './layout-service.js';
+export * from './list-service.js';
 export * from './noty-service.js';
-export * from './css-variable-theme.js';
+export * from './palette-css-vars.js';
+export * from './theme-provider-service.js';
+export * from './tree-service.js';
 //# sourceMappingURL=index.js.map

package/esm/services/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/services/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,yBAAyB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/services/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,mBAAmB,CAAA"}

package/esm/services/layout-service.d.ts

@@ -0,0 +1,217 @@
+import { ObservableValue } from '@furystack/utils';
+/**
+ * Drawer variant that determines how the drawer affects content layout.
+ * - 'permanent': Always visible and pushes content
+ * - 'collapsible': Pushes content when open, collapses when closed
+ * - 'temporary': Overlays content without pushing (like a modal drawer)
+ */
+export type DrawerVariant = 'permanent' | 'collapsible' | 'temporary';
+/**
+ * AppBar variant that determines visibility behavior.
+ * - 'permanent': Always visible, pushes content down
+ * - 'auto-hide': Hidden by default, overlays content when visible (on hover or programmatically)
+ */
+export type AppBarVariant = 'permanent' | 'auto-hide';
+/**
+ * Drawer configuration for a single side (left or right).
+ */
+export type DrawerSideState = {
+    /** Whether the drawer is currently open */
+    open: boolean;
+    /** Width of the drawer (CSS value, e.g., '240px') */
+    width: string;
+    /** Variant that determines how the drawer affects content layout */
+    variant: DrawerVariant;
+};
+/**
+ * State for all drawers in the layout.
+ */
+export type DrawerState = {
+    /** Left drawer configuration */
+    left?: DrawerSideState;
+    /** Right drawer configuration */
+    right?: DrawerSideState;
+};
+/**
+ * CSS variable names managed by LayoutService.
+ * These variables are set on the PageLayout host element for scoped access.
+ *
+ * Use these to access layout dimensions in your components:
+ * ```typescript
+ * // In Shade css property
+ * css: {
+ *   height: `var(${LAYOUT_CSS_VARIABLES.contentAvailableHeight})`,
+ *   marginLeft: `var(${LAYOUT_CSS_VARIABLES.contentMarginLeft})`,
+ * }
+ *
+ * // In inline styles
+ * style={{ height: `var(${LAYOUT_CSS_VARIABLES.contentAvailableHeight})` }}
+ * ```
+ */
+export declare const LAYOUT_CSS_VARIABLES: {
+    /** Height of the AppBar (e.g., '48px') */
+    readonly appBarHeight: "--layout-appbar-height";
+    /** Top gap spacing between AppBar and content */
+    readonly topGap: "--layout-top-gap";
+    /** Side gap spacing for content padding */
+    readonly sideGap: "--layout-side-gap";
+    /** Total padding from top (appBarHeight + topGap) */
+    readonly contentPaddingTop: "--layout-content-padding-top";
+    /** Current width of the left drawer (0 when closed for collapsible/temporary) */
+    readonly drawerLeftWidth: "--layout-drawer-left-width";
+    /** Current width of the right drawer (0 when closed for collapsible/temporary) */
+    readonly drawerRightWidth: "--layout-drawer-right-width";
+    /** Configured width of the left drawer (always set, even when closed) */
+    readonly drawerLeftConfiguredWidth: "--layout-drawer-left-configured-width";
+    /** Configured width of the right drawer (always set, even when closed) */
+    readonly drawerRightConfiguredWidth: "--layout-drawer-right-configured-width";
+    /** Top margin for content (deprecated, use contentPaddingTop instead) */
+    readonly contentMarginTop: "--layout-content-margin-top";
+    /** Left margin for content (considers drawer variant) */
+    readonly contentMarginLeft: "--layout-content-margin-left";
+    /** Right margin for content (considers drawer variant) */
+    readonly contentMarginRight: "--layout-content-margin-right";
+};
+/**
+ * Scoped service for managing layout state within a PageLayout component.
+ *
+ * This service is created per PageLayout instance and sets CSS variables on the
+ * host element rather than document.documentElement, providing proper scoping.
+ *
+ * Manages:
+ * - Drawer open/close state and widths
+ * - AppBar visibility (for auto-hide mode)
+ * - CSS custom properties for layout dimensions (scoped to the PageLayout)
+ *
+ * **Note:** For responsive breakpoint detection, use `ScreenService` from `@furystack/shades`.
+ * ScreenService provides `screenSize.atLeast[size]` observables for responsive behavior.
+ *
+ * @example
+ * ```typescript
+ * // Get layout service from injector (must be inside PageLayout)
+ * const layoutService = injector.getInstance(LayoutService);
+ *
+ * // Toggle left drawer
+ * layoutService.toggleDrawer('left');
+ * ```
+ */
+export declare class LayoutService implements Disposable {
+    private targetElement?;
+    /**
+     * Observable state for all drawers.
+     * Subscribe to receive updates when any drawer opens, closes, or changes width.
+     */
+    drawerState: ObservableValue<DrawerState>;
+    /**
+     * AppBar visibility state.
+     * Used for auto-hide AppBar mode - set to false to hide the AppBar.
+     */
+    appBarVisible: ObservableValue<boolean>;
+    /**
+     * AppBar variant that determines visibility behavior.
+     * - 'permanent': Always visible, content has padding for appbar
+     * - 'auto-hide': Hidden by default, overlays content when visible
+     */
+    appBarVariant: ObservableValue<AppBarVariant>;
+    /**
+     * Current AppBar height.
+     * Used for calculating content margins.
+     */
+    appBarHeight: ObservableValue<string>;
+    /**
+     * Top gap spacing between AppBar and content.
+     * CSS value (e.g., '0px', '16px').
+     */
+    topGap: ObservableValue<string>;
+    /**
+     * Side gap spacing for content padding.
+     * CSS value (e.g., '0px', '16px').
+     */
+    sideGap: ObservableValue<string>;
+    private drawerStateSubscription;
+    private appBarHeightSubscription;
+    private appBarVariantSubscription;
+    private topGapSubscription;
+    private sideGapSubscription;
+    /**
+     * Creates a new LayoutService instance scoped to the given element or ref.
+     *
+     * @param targetElement - The element (or ref) to set CSS variables on (typically the PageLayout host).
+     *                        If undefined (e.g., in SSR), CSS variables won't be set.
+     */
+    constructor(targetElement?: (HTMLElement | {
+        readonly current: HTMLElement | null;
+    }) | undefined);
+    private getTarget;
+    /**
+     * Toggles the open/close state of a drawer.
+     * If the drawer doesn't exist in the state, this is a no-op.
+     *
+     * @param position - Which drawer to toggle ('left' or 'right')
+     */
+    toggleDrawer(position: 'left' | 'right'): void;
+    /**
+     * Sets the open state of a drawer.
+     * Creates the drawer entry if it doesn't exist.
+     *
+     * @param position - Which drawer to modify ('left' or 'right')
+     * @param open - Whether the drawer should be open
+     */
+    setDrawerOpen(position: 'left' | 'right', open: boolean): void;
+    /**
+     * Sets the width of a drawer.
+     * Creates the drawer entry if it doesn't exist (defaults to closed).
+     *
+     * @param position - Which drawer to modify ('left' or 'right')
+     * @param width - The CSS width value (e.g., '240px', '20rem')
+     */
+    setDrawerWidth(position: 'left' | 'right', width: string): void;
+    /**
+     * Initializes a drawer with the given configuration.
+     * Use this when setting up a drawer for the first time.
+     *
+     * @param position - Which drawer to initialize ('left' or 'right')
+     * @param config - Initial drawer configuration
+     */
+    initDrawer(position: 'left' | 'right', config: DrawerSideState): void;
+    /**
+     * Sets the top gap spacing between AppBar and content.
+     *
+     * @param gap - CSS value for the gap (e.g., '0px', '16px')
+     */
+    setTopGap(gap: string): void;
+    /**
+     * Sets the side gap spacing for content padding.
+     *
+     * @param gap - CSS value for the gap (e.g., '0px', '16px')
+     */
+    setSideGap(gap: string): void;
+    /**
+     * Calculates the content margin for a drawer based on its variant and open state.
+     *
+     * - 'temporary': always '0px' (overlay, doesn't push content)
+     * - 'permanent': always drawer width (always visible)
+     * - 'collapsible': drawer width when open, '0px' when closed
+     *
+     * @param drawerState - The drawer state (may be undefined)
+     * @returns The margin value to use
+     */
+    getContentMarginForPosition(position: 'left' | 'right'): string;
+    private getContentMarginForDrawer;
+    /**
+     * Updates CSS custom properties based on current layout state.
+     * Called automatically when drawer state, AppBar height, variant, or gap values change.
+     */
+    private updateCssVariables;
+    /**
+     * Sets up subscriptions to automatically update CSS variables
+     * when drawer state, AppBar height, variant, or gap values change.
+     */
+    private setupCssVariableSync;
+    /**
+     * Cleans up all resources held by the service.
+     * Disposes subscriptions and observables.
+     */
+    [Symbol.dispose](): void;
+}
+//# sourceMappingURL=layout-service.d.ts.map

package/esm/services/layout-service.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-service.d.ts","sourceRoot":"","sources":["../../src/services/layout-service.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAsB,MAAM,kBAAkB,CAAA;AAEtE;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,aAAa,GAAG,WAAW,CAAA;AAErE;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,WAAW,CAAA;AAErD;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,2CAA2C;IAC3C,IAAI,EAAE,OAAO,CAAA;IACb,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAA;IACb,oEAAoE;IACpE,OAAO,EAAE,aAAa,CAAA;CACvB,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,gCAAgC;IAChC,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,eAAe,CAAA;CACxB,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,oBAAoB;IAC/B,0CAA0C;;IAE1C,iDAAiD;;IAEjD,2CAA2C;;IAE3C,qDAAqD;;IAErD,iFAAiF;;IAEjF,kFAAkF;;IAElF,yEAAyE;;IAEzE,0EAA0E;;IAE1E,yEAAyE;;IAEzE,yDAAyD;;IAEzD,0DAA0D;;CAElD,CAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,aAAc,YAAW,UAAU;IAkDlC,OAAO,CAAC,aAAa,CAAC;IAjDlC;;;OAGG;IACI,WAAW,+BAAuC;IAEzD;;;OAGG;IACI,aAAa,2BAAqC;IAEzD;;;;OAIG;IACI,aAAa,iCAAkD;IAEtE;;;OAGG;IACI,YAAY,0BAAsC;IAEzD;;;OAGG;IACI,MAAM,0BAAqC;IAElD;;;OAGG;IACI,OAAO,0BAAqC;IAEnD,OAAO,CAAC,uBAAuB,CAA0C;IACzE,OAAO,CAAC,wBAAwB,CAAqC;IACrE,OAAO,CAAC,yBAAyB,CAA4C;IAC7E,OAAO,CAAC,kBAAkB,CAAqC;IAC/D,OAAO,CAAC,mBAAmB,CAAqC;IAEhE;;;;;OAKG;gBACiB,aAAa,CAAC,GAAE,WAAW,GAAG;QAAE,QAAQ,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;KAAE,aAAA;IAK1F,OAAO,CAAC,SAAS;IAMjB;;;;;OAKG;IACI,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IASrD;;;;;;OAMG;IACI,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI;IAcrE;;;;;;OAMG;IACI,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IActE;;;;;;OAMG;IACI,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,EAAE,MAAM,EAAE,eAAe,GAAG,IAAI;IAS5E;;;;OAIG;IACI,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAInC;;;;OAIG;IACI,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAIpC;;;;;;;;;OASG;IACI,2BAA2B,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM;IAItE,OAAO,CAAC,yBAAyB;IAiBjC;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IA2C1B;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAsB5B;;;OAGG;IACI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,IAAI;CAyBhC"}

package/esm/services/layout-service.js

@@ -0,0 +1,331 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Injectable } from '@furystack/inject';
+import { ObservableValue } from '@furystack/utils';
+/**
+ * CSS variable names managed by LayoutService.
+ * These variables are set on the PageLayout host element for scoped access.
+ *
+ * Use these to access layout dimensions in your components:
+ * ```typescript
+ * // In Shade css property
+ * css: {
+ *   height: `var(${LAYOUT_CSS_VARIABLES.contentAvailableHeight})`,
+ *   marginLeft: `var(${LAYOUT_CSS_VARIABLES.contentMarginLeft})`,
+ * }
+ *
+ * // In inline styles
+ * style={{ height: `var(${LAYOUT_CSS_VARIABLES.contentAvailableHeight})` }}
+ * ```
+ */
+export const LAYOUT_CSS_VARIABLES = {
+    /** Height of the AppBar (e.g., '48px') */
+    appBarHeight: '--layout-appbar-height',
+    /** Top gap spacing between AppBar and content */
+    topGap: '--layout-top-gap',
+    /** Side gap spacing for content padding */
+    sideGap: '--layout-side-gap',
+    /** Total padding from top (appBarHeight + topGap) */
+    contentPaddingTop: '--layout-content-padding-top',
+    /** Current width of the left drawer (0 when closed for collapsible/temporary) */
+    drawerLeftWidth: '--layout-drawer-left-width',
+    /** Current width of the right drawer (0 when closed for collapsible/temporary) */
+    drawerRightWidth: '--layout-drawer-right-width',
+    /** Configured width of the left drawer (always set, even when closed) */
+    drawerLeftConfiguredWidth: '--layout-drawer-left-configured-width',
+    /** Configured width of the right drawer (always set, even when closed) */
+    drawerRightConfiguredWidth: '--layout-drawer-right-configured-width',
+    /** Top margin for content (deprecated, use contentPaddingTop instead) */
+    contentMarginTop: '--layout-content-margin-top',
+    /** Left margin for content (considers drawer variant) */
+    contentMarginLeft: '--layout-content-margin-left',
+    /** Right margin for content (considers drawer variant) */
+    contentMarginRight: '--layout-content-margin-right',
+};
+/**
+ * Scoped service for managing layout state within a PageLayout component.
+ *
+ * This service is created per PageLayout instance and sets CSS variables on the
+ * host element rather than document.documentElement, providing proper scoping.
+ *
+ * Manages:
+ * - Drawer open/close state and widths
+ * - AppBar visibility (for auto-hide mode)
+ * - CSS custom properties for layout dimensions (scoped to the PageLayout)
+ *
+ * **Note:** For responsive breakpoint detection, use `ScreenService` from `@furystack/shades`.
+ * ScreenService provides `screenSize.atLeast[size]` observables for responsive behavior.
+ *
+ * @example
+ * ```typescript
+ * // Get layout service from injector (must be inside PageLayout)
+ * const layoutService = injector.getInstance(LayoutService);
+ *
+ * // Toggle left drawer
+ * layoutService.toggleDrawer('left');
+ * ```
+ */
+let LayoutService = class LayoutService {
+    targetElement;
+    /**
+     * Observable state for all drawers.
+     * Subscribe to receive updates when any drawer opens, closes, or changes width.
+     */
+    drawerState = new ObservableValue({});
+    /**
+     * AppBar visibility state.
+     * Used for auto-hide AppBar mode - set to false to hide the AppBar.
+     */
+    appBarVisible = new ObservableValue(true);
+    /**
+     * AppBar variant that determines visibility behavior.
+     * - 'permanent': Always visible, content has padding for appbar
+     * - 'auto-hide': Hidden by default, overlays content when visible
+     */
+    appBarVariant = new ObservableValue('permanent');
+    /**
+     * Current AppBar height.
+     * Used for calculating content margins.
+     */
+    appBarHeight = new ObservableValue('48px');
+    /**
+     * Top gap spacing between AppBar and content.
+     * CSS value (e.g., '0px', '16px').
+     */
+    topGap = new ObservableValue('0px');
+    /**
+     * Side gap spacing for content padding.
+     * CSS value (e.g., '0px', '16px').
+     */
+    sideGap = new ObservableValue('0px');
+    drawerStateSubscription = null;
+    appBarHeightSubscription = null;
+    appBarVariantSubscription = null;
+    topGapSubscription = null;
+    sideGapSubscription = null;
+    /**
+     * Creates a new LayoutService instance scoped to the given element or ref.
+     *
+     * @param targetElement - The element (or ref) to set CSS variables on (typically the PageLayout host).
+     *                        If undefined (e.g., in SSR), CSS variables won't be set.
+     */
+    constructor(targetElement) {
+        this.targetElement = targetElement;
+        this.setupCssVariableSync();
+        this.updateCssVariables();
+    }
+    getTarget() {
+        if (!this.targetElement)
+            return undefined;
+        if ('current' in this.targetElement)
+            return this.targetElement.current ?? undefined;
+        return this.targetElement;
+    }
+    /**
+     * Toggles the open/close state of a drawer.
+     * If the drawer doesn't exist in the state, this is a no-op.
+     *
+     * @param position - Which drawer to toggle ('left' or 'right')
+     */
+    toggleDrawer(position) {
+        const currentState = this.drawerState.getValue();
+        const drawerConfig = currentState[position];
+        if (drawerConfig) {
+            this.setDrawerOpen(position, !drawerConfig.open);
+        }
+    }
+    /**
+     * Sets the open state of a drawer.
+     * Creates the drawer entry if it doesn't exist.
+     *
+     * @param position - Which drawer to modify ('left' or 'right')
+     * @param open - Whether the drawer should be open
+     */
+    setDrawerOpen(position, open) {
+        const currentState = this.drawerState.getValue();
+        const existingConfig = currentState[position];
+        this.drawerState.setValue({
+            ...currentState,
+            [position]: {
+                width: existingConfig?.width ?? '240px',
+                variant: existingConfig?.variant ?? 'collapsible',
+                open,
+            },
+        });
+    }
+    /**
+     * Sets the width of a drawer.
+     * Creates the drawer entry if it doesn't exist (defaults to closed).
+     *
+     * @param position - Which drawer to modify ('left' or 'right')
+     * @param width - The CSS width value (e.g., '240px', '20rem')
+     */
+    setDrawerWidth(position, width) {
+        const currentState = this.drawerState.getValue();
+        const existingConfig = currentState[position];
+        this.drawerState.setValue({
+            ...currentState,
+            [position]: {
+                open: existingConfig?.open ?? false,
+                variant: existingConfig?.variant ?? 'collapsible',
+                width,
+            },
+        });
+    }
+    /**
+     * Initializes a drawer with the given configuration.
+     * Use this when setting up a drawer for the first time.
+     *
+     * @param position - Which drawer to initialize ('left' or 'right')
+     * @param config - Initial drawer configuration
+     */
+    initDrawer(position, config) {
+        const currentState = this.drawerState.getValue();
+        this.drawerState.setValue({
+            ...currentState,
+            [position]: config,
+        });
+    }
+    /**
+     * Sets the top gap spacing between AppBar and content.
+     *
+     * @param gap - CSS value for the gap (e.g., '0px', '16px')
+     */
+    setTopGap(gap) {
+        this.topGap.setValue(gap);
+    }
+    /**
+     * Sets the side gap spacing for content padding.
+     *
+     * @param gap - CSS value for the gap (e.g., '0px', '16px')
+     */
+    setSideGap(gap) {
+        this.sideGap.setValue(gap);
+    }
+    /**
+     * Calculates the content margin for a drawer based on its variant and open state.
+     *
+     * - 'temporary': always '0px' (overlay, doesn't push content)
+     * - 'permanent': always drawer width (always visible)
+     * - 'collapsible': drawer width when open, '0px' when closed
+     *
+     * @param drawerState - The drawer state (may be undefined)
+     * @returns The margin value to use
+     */
+    getContentMarginForPosition(position) {
+        return this.getContentMarginForDrawer(this.drawerState.getValue()[position]);
+    }
+    getContentMarginForDrawer(drawerState) {
+        if (!drawerState)
+            return '0px';
+        switch (drawerState.variant) {
+            case 'temporary':
+                // Temporary drawers overlay content, never push
+                return '0px';
+            case 'permanent':
+                // Permanent drawers always push content
+                return drawerState.width;
+            case 'collapsible':
+            default:
+                // Collapsible drawers push content only when open
+                return drawerState.open ? drawerState.width : '0px';
+        }
+    }
+    /**
+     * Updates CSS custom properties based on current layout state.
+     * Called automatically when drawer state, AppBar height, variant, or gap values change.
+     */
+    updateCssVariables() {
+        const target = this.getTarget();
+        if (!target)
+            return;
+        const state = this.drawerState.getValue();
+        const appBarHeight = this.appBarHeight.getValue();
+        const appBarVariant = this.appBarVariant.getValue();
+        const topGap = this.topGap.getValue();
+        const sideGap = this.sideGap.getValue();
+        // AppBar and gap values
+        target.style.setProperty(LAYOUT_CSS_VARIABLES.appBarHeight, appBarHeight);
+        target.style.setProperty(LAYOUT_CSS_VARIABLES.topGap, topGap);
+        target.style.setProperty(LAYOUT_CSS_VARIABLES.sideGap, sideGap);
+        // Content padding top:
+        // - For 'permanent' appbar: appBarHeight + topGap (content pushed below appbar)
+        // - For 'auto-hide' appbar: just topGap (appbar overlays content when visible)
+        const contentPaddingTop = appBarVariant === 'auto-hide' ? topGap : `calc(${appBarHeight} + ${topGap})`;
+        target.style.setProperty(LAYOUT_CSS_VARIABLES.contentPaddingTop, contentPaddingTop);
+        // Legacy content margin top (deprecated, kept for backward compatibility)
+        target.style.setProperty(LAYOUT_CSS_VARIABLES.contentMarginTop, appBarHeight);
+        // Left drawer
+        const leftConfiguredWidth = state.left?.width ?? '0px';
+        const leftWidth = state.left?.open ? state.left.width : '0px';
+        const leftContentMargin = this.getContentMarginForDrawer(state.left);
+        target.style.setProperty(LAYOUT_CSS_VARIABLES.drawerLeftConfiguredWidth, leftConfiguredWidth);
+        target.style.setProperty(LAYOUT_CSS_VARIABLES.drawerLeftWidth, leftWidth);
+        target.style.setProperty(LAYOUT_CSS_VARIABLES.contentMarginLeft, leftContentMargin);
+        // Right drawer
+        const rightConfiguredWidth = state.right?.width ?? '0px';
+        const rightWidth = state.right?.open ? state.right.width : '0px';
+        const rightContentMargin = this.getContentMarginForDrawer(state.right);
+        target.style.setProperty(LAYOUT_CSS_VARIABLES.drawerRightConfiguredWidth, rightConfiguredWidth);
+        target.style.setProperty(LAYOUT_CSS_VARIABLES.drawerRightWidth, rightWidth);
+        target.style.setProperty(LAYOUT_CSS_VARIABLES.contentMarginRight, rightContentMargin);
+    }
+    /**
+     * Sets up subscriptions to automatically update CSS variables
+     * when drawer state, AppBar height, variant, or gap values change.
+     */
+    setupCssVariableSync() {
+        this.drawerStateSubscription = this.drawerState.subscribe(() => {
+            this.updateCssVariables();
+        });
+        this.appBarHeightSubscription = this.appBarHeight.subscribe(() => {
+            this.updateCssVariables();
+        });
+        this.appBarVariantSubscription = this.appBarVariant.subscribe(() => {
+            this.updateCssVariables();
+        });
+        this.topGapSubscription = this.topGap.subscribe(() => {
+            this.updateCssVariables();
+        });
+        this.sideGapSubscription = this.sideGap.subscribe(() => {
+            this.updateCssVariables();
+        });
+    }
+    /**
+     * Cleans up all resources held by the service.
+     * Disposes subscriptions and observables.
+     */
+    [Symbol.dispose]() {
+        // Clean up subscriptions
+        this.drawerStateSubscription?.[Symbol.dispose]();
+        this.drawerStateSubscription = null;
+        this.appBarHeightSubscription?.[Symbol.dispose]();
+        this.appBarHeightSubscription = null;
+        this.appBarVariantSubscription?.[Symbol.dispose]();
+        this.appBarVariantSubscription = null;
+        this.topGapSubscription?.[Symbol.dispose]();
+        this.topGapSubscription = null;
+        this.sideGapSubscription?.[Symbol.dispose]();
+        this.sideGapSubscription = null;
+        // Dispose observables
+        this.drawerState[Symbol.dispose]();
+        this.appBarVisible[Symbol.dispose]();
+        this.appBarVariant[Symbol.dispose]();
+        this.appBarHeight[Symbol.dispose]();
+        this.topGap[Symbol.dispose]();
+        this.sideGap[Symbol.dispose]();
+    }
+};
+LayoutService = __decorate([
+    Injectable({ lifetime: 'explicit' }),
+    __metadata("design:paramtypes", [Object])
+], LayoutService);
+export { LayoutService };
+//# sourceMappingURL=layout-service.js.map

package/esm/services/layout-service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-service.js","sourceRoot":"","sources":["../../src/services/layout-service.ts"],"names":[],"mappings":"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"}

package/esm/services/layout-service.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=layout-service.spec.d.ts.map

package/esm/services/layout-service.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-service.spec.d.ts","sourceRoot":"","sources":["../../src/services/layout-service.spec.ts"],"names":[],"mappings":""}