@furystack/shades-common-components 10.0.35 → 12.0.0

package/esm/services/default-light-theme.js

@@ -19,5 +19,91 @@ export const defaultLightTheme = {
         paper: '#fff',
     },
     divider: 'rgba(0, 0, 0, 0.12)',
+    action: {
+        hoverBackground: 'rgba(128, 128, 128, 0.08)',
+        selectedBackground: 'rgba(128, 128, 128, 0.15)',
+        activeBackground: 'rgba(128, 128, 128, 0.2)',
+        focusRing: '0 0 0 3px rgba(128, 128, 128, 0.15)',
+        disabledOpacity: '0.6',
+        backdrop: 'rgba(0, 0, 0, 0.5)',
+        subtleBorder: 'rgba(128, 128, 128, 0.2)',
+    },
+    shape: {
+        borderRadius: {
+            xs: '2px',
+            sm: '4px',
+            md: '8px',
+            lg: '12px',
+            full: '50%',
+        },
+    },
+    shadows: {
+        none: 'none',
+        sm: '0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06)',
+        md: '0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.08)',
+        lg: '0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08)',
+        xl: '0 12px 32px rgba(0, 0, 0, 0.15), 0 6px 12px rgba(0, 0, 0, 0.1)',
+    },
+    typography: {
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+        fontSize: {
+            xs: '11px',
+            sm: '13px',
+            md: '14px',
+            lg: '16px',
+            xl: '24px',
+        },
+        fontWeight: {
+            normal: '400',
+            medium: '500',
+            semibold: '600',
+            bold: '700',
+        },
+        lineHeight: {
+            tight: '1.3',
+            normal: '1.5',
+            relaxed: '1.75',
+        },
+        letterSpacing: {
+            tight: '-0.5px',
+            dense: '-0.25px',
+            normal: '0px',
+            wide: '0.15px',
+            wider: '0.5px',
+            widest: '1.5px',
+        },
+    },
+    transitions: {
+        duration: {
+            fast: '0.15s',
+            normal: '0.2s',
+            slow: '0.3s',
+        },
+        easing: {
+            default: 'cubic-bezier(0.4, 0, 0.2, 1)',
+            easeOut: 'cubic-bezier(0.23, 1.0, 0.32, 1.0)',
+            easeInOut: 'ease-in-out',
+        },
+    },
+    spacing: {
+        xs: '4px',
+        sm: '8px',
+        md: '16px',
+        lg: '24px',
+        xl: '32px',
+    },
+    zIndex: {
+        drawer: '1000',
+        appBar: '1100',
+        modal: '1200',
+        tooltip: '1300',
+        dropdown: '1400',
+    },
+    effects: {
+        blurSm: '4px',
+        blurMd: '8px',
+        blurLg: '15px',
+        blurXl: '20px',
+    },
 };
 //# sourceMappingURL=default-light-theme.js.map

package/esm/services/default-light-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"default-light-theme.js","sourceRoot":"","sources":["../../src/services/default-light-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAGrD,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACtC,IAAI,EAAE,qBAAqB;IAC3B,OAAO,EAAE,cAAc;IACvB,IAAI,EAAE;QACJ,OAAO,EAAE,qBAAqB;QAC9B,SAAS,EAAE,qBAAqB;QAChC,QAAQ,EAAE,qBAAqB;KAChC;IACD,MAAM,EAAE;QACN,MAAM,EAAE,qBAAqB;QAC7B,KAAK,EAAE,qBAAqB;QAC5B,QAAQ,EAAE,qBAAqB;QAC/B,QAAQ,EAAE,qBAAqB;QAC/B,kBAAkB,EAAE,qBAAqB;KAC1C;IACD,UAAU,EAAE;QACV,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,MAAM;KACd;IACD,OAAO,EAAE,qBAAqB;CAC/B,CAAA"}
+{"version":3,"file":"default-light-theme.js","sourceRoot":"","sources":["../../src/services/default-light-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAGrD,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,IAAI,EAAE,qBAAqB;IAC3B,OAAO,EAAE,cAAc;IACvB,IAAI,EAAE;QACJ,OAAO,EAAE,qBAAqB;QAC9B,SAAS,EAAE,qBAAqB;QAChC,QAAQ,EAAE,qBAAqB;KAChC;IACD,MAAM,EAAE;QACN,MAAM,EAAE,qBAAqB;QAC7B,KAAK,EAAE,qBAAqB;QAC5B,QAAQ,EAAE,qBAAqB;QAC/B,QAAQ,EAAE,qBAAqB;QAC/B,kBAAkB,EAAE,qBAAqB;KAC1C;IACD,UAAU,EAAE;QACV,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,MAAM;KACd;IACD,OAAO,EAAE,qBAAqB;IAC9B,MAAM,EAAE;QACN,eAAe,EAAE,2BAA2B;QAC5C,kBAAkB,EAAE,2BAA2B;QAC/C,gBAAgB,EAAE,0BAA0B;QAC5C,SAAS,EAAE,qCAAqC;QAChD,eAAe,EAAE,KAAK;QACtB,QAAQ,EAAE,oBAAoB;QAC9B,YAAY,EAAE,0BAA0B;KACzC;IACD,KAAK,EAAE;QACL,YAAY,EAAE;YACZ,EAAE,EAAE,KAAK;YACT,EAAE,EAAE,KAAK;YACT,EAAE,EAAE,KAAK;YACT,EAAE,EAAE,MAAM;YACV,IAAI,EAAE,KAAK;SACZ;KACF;IACD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;QACZ,EAAE,EAAE,8DAA8D;QAClE,EAAE,EAAE,8DAA8D;QAClE,EAAE,EAAE,+DAA+D;QACnE,EAAE,EAAE,gEAAgE;KACrE;IACD,UAAU,EAAE;QACV,UAAU,EAAE,sCAAsC;QAClD,QAAQ,EAAE;YACR,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;SACX;QACD,UAAU,EAAE;YACV,MAAM,EAAE,KAAK;YACb,MAAM,EAAE,KAAK;YACb,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,KAAK;SACZ;QACD,UAAU,EAAE;YACV,KAAK,EAAE,KAAK;YACZ,MAAM,EAAE,KAAK;YACb,OAAO,EAAE,MAAM;SAChB;QACD,aAAa,EAAE;YACb,KAAK,EAAE,QAAQ;YACf,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,KAAK;YACb,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;SAChB;KACF;IACD,WAAW,EAAE;QACX,QAAQ,EAAE;YACR,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,MAAM;YACd,IAAI,EAAE,MAAM;SACb;QACD,MAAM,EAAE;YACN,OAAO,EAAE,8BAA8B;YACvC,OAAO,EAAE,oCAAoC;YAC7C,SAAS,EAAE,aAAa;SACzB;KACF;IACD,OAAO,EAAE;QACP,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;KACX;IACD,MAAM,EAAE;QACN,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,MAAM;KACjB;IACD,OAAO,EAAE;QACP,MAAM,EAAE,KAAK;QACb,MAAM,EAAE,KAAK;QACb,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,MAAM;KACf;CACc,CAAA"}

package/esm/services/default-palette.d.ts

@@ -1,3 +1,7 @@
 import type { Palette } from './theme-provider-service.js';
+/**
+ * Default color palette with semantic colors for the application.
+ * Contrast colors are calculated based on WCAG contrast guidelines.
+ */
 export declare const defaultPalette: Palette;
 //# sourceMappingURL=default-palette.d.ts.map

package/esm/services/default-palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default-palette.d.ts","sourceRoot":"","sources":["../../src/services/default-palette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAA;AAE1D,eAAO,MAAM,cAAc,EAAE,OA+B5B,CAAA"}
+{"version":3,"file":"default-palette.d.ts","sourceRoot":"","sources":["../../src/services/default-palette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAA;AAE1D;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,OAiD5B,CAAA"}

package/esm/services/default-palette.js

@@ -1,33 +1,55 @@
+/**
+ * Default color palette with semantic colors for the application.
+ * Contrast colors are calculated based on WCAG contrast guidelines.
+ */
 export const defaultPalette = {
     primary: {
         light: '#6573c3',
+        lightContrast: '#ffffff',
         main: '#3f51b5',
+        mainContrast: '#ffffff',
         dark: '#2c387e',
+        darkContrast: '#ffffff',
     },
     secondary: {
         light: '#4aedc4',
+        lightContrast: '#000000',
         main: '#1de9b6',
+        mainContrast: '#000000',
         dark: '#14a37f',
+        darkContrast: '#ffffff',
     },
     error: {
         light: '#e57373',
+        lightContrast: '#000000',
         main: '#f44336',
+        mainContrast: '#ffffff',
         dark: '#a31f1f',
+        darkContrast: '#ffffff',
     },
     warning: {
         light: '#ffb74d',
+        lightContrast: '#000000',
         main: '#ff9800',
+        mainContrast: '#000000',
         dark: '#f57c00',
+        darkContrast: '#000000',
     },
     info: {
         light: '#64b5f6',
+        lightContrast: '#000000',
         main: '#2196f3',
+        mainContrast: '#ffffff',
         dark: '#1976d2',
+        darkContrast: '#ffffff',
     },
     success: {
         light: '#81c784',
+        lightContrast: '#000000',
         main: '#4caf50',
+        mainContrast: '#000000',
         dark: '#388e3c',
+        darkContrast: '#ffffff',
     },
 };
 //# sourceMappingURL=default-palette.js.map

package/esm/services/default-palette.js.map

@@ -1 +1 @@
-{"version":3,"file":"default-palette.js","sourceRoot":"","sources":["../../src/services/default-palette.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAY;IACrC,OAAO,EAAE;QACP,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KAChB;IACD,SAAS,EAAE;QACT,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KAChB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KAChB;IACD,OAAO,EAAE;QACP,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KAChB;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KAChB;IACD,OAAO,EAAE;QACP,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KAChB;CACF,CAAA"}
+{"version":3,"file":"default-palette.js","sourceRoot":"","sources":["../../src/services/default-palette.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAY;IACrC,OAAO,EAAE;QACP,KAAK,EAAE,SAAS;QAChB,aAAa,EAAE,SAAS;QACxB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;QACvB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;KACxB;IACD,SAAS,EAAE;QACT,KAAK,EAAE,SAAS;QAChB,aAAa,EAAE,SAAS;QACxB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;QACvB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;KACxB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,aAAa,EAAE,SAAS;QACxB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;QACvB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;KACxB;IACD,OAAO,EAAE;QACP,KAAK,EAAE,SAAS;QAChB,aAAa,EAAE,SAAS;QACxB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;QACvB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;KACxB;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,aAAa,EAAE,SAAS;QACxB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;QACvB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;KACxB;IACD,OAAO,EAAE;QACP,KAAK,EAAE,SAAS;QAChB,aAAa,EAAE,SAAS;QACxB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;QACvB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;KACxB;CACF,CAAA"}

package/esm/services/index.d.ts

@@ -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.d.ts.map

package/esm/services/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","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.d.ts","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/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"}