@furystack/shades-common-components/esm/services/layout-service.d.ts

Common UI components for FuryStack Shades

import type { Token } from '@furystack/inject';
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 = {
    open: boolean;
    width: string;
    variant: DrawerVariant;
};
/**
 * State for all drawers in the layout.
 */
export type DrawerState = {
    left?: DrawerSideState;
    right?: DrawerSideState;
};
/**
 * CSS variable names managed by LayoutService. Exposed so consumer components
 * can reference the same names in their own CSS.
 */
export declare const LAYOUT_CSS_VARIABLES: {
    readonly appBarHeight: "--layout-appbar-height";
    readonly topGap: "--layout-top-gap";
    readonly sideGap: "--layout-side-gap";
    readonly contentPaddingTop: "--layout-content-padding-top";
    readonly drawerLeftWidth: "--layout-drawer-left-width";
    readonly drawerRightWidth: "--layout-drawer-right-width";
    readonly drawerLeftConfiguredWidth: "--layout-drawer-left-configured-width";
    readonly drawerRightConfiguredWidth: "--layout-drawer-right-configured-width";
    readonly contentMarginTop: "--layout-content-margin-top";
    readonly contentMarginLeft: "--layout-content-margin-left";
    readonly contentMarginRight: "--layout-content-margin-right";
};
/**
 * Thrown when a component tries to resolve {@link LayoutService} but no
 * `<PageLayout>` ancestor has bound one on its scoped injector.
 */
export declare class LayoutServiceNotConfiguredError extends Error {
    constructor();
}
/**
 * Scoped service managing layout state within a PageLayout component.
 *
 * Exposes observables for drawer state, AppBar visibility, gap values and a
 * set of CSS custom properties that are optionally mirrored onto a target
 * element.
 */
export interface LayoutService extends Disposable {
    readonly drawerState: ObservableValue<DrawerState>;
    readonly appBarVisible: ObservableValue<boolean>;
    readonly appBarVariant: ObservableValue<AppBarVariant>;
    readonly appBarHeight: ObservableValue<string>;
    readonly topGap: ObservableValue<string>;
    readonly sideGap: ObservableValue<string>;
    toggleDrawer(position: 'left' | 'right'): void;
    setDrawerOpen(position: 'left' | 'right', open: boolean): void;
    setDrawerWidth(position: 'left' | 'right', width: string): void;
    initDrawer(position: 'left' | 'right', config: DrawerSideState): void;
    removeDrawer(position: 'left' | 'right'): void;
    setTopGap(gap: string): void;
    setSideGap(gap: string): void;
    getContentMarginForPosition(position: 'left' | 'right'): string;
}
/**
 * Creates a fresh {@link LayoutService} instance. Used by `<PageLayout>` to
 * bind a per-scope service inside a child injector. Consumer code should go
 * through the {@link LayoutService} token rather than calling this directly.
 * @param targetElement - Optional element (or ref) that will have CSS variables
 *   applied as the layout state changes. When omitted, CSS variables are not
 *   written — the page-layout component applies them via host props instead.
 */
export declare const createLayoutService: (targetElement?: HTMLElement | {
    readonly current: HTMLElement | null;
}) => LayoutService;
/**
 * Scoped {@link LayoutService} token. The default factory throws — a
 * `<PageLayout>` ancestor binds a real instance on its child scope via
 * {@link createLayoutService}.
 */
export declare const LayoutService: Token<LayoutService, 'scoped'>;
//# sourceMappingURL=layout-service.d.ts.map