@ojiepermana/angular 22.1.14 → 22.2.1

package/fesm2022/ojiepermana-angular-theme-layout.mjs

@@ -1,49 +1,66 @@
-import * as i0 from '@angular/core';
-import { inject, input, computed, DestroyRef, Component, effect, booleanAttribute, ElementRef } from '@angular/core';
-import { cn } from '@ojiepermana/angular/component/utils/core';
-import { LayoutLoadingService, LayoutService } from '@ojiepermana/angular/theme/layout/services';
-export { LAYOUT_LOADING_HIDE_DELAY_MS, LAYOUT_LOADING_INITIAL_PROGRESS, LAYOUT_LOADING_SKIP, LAYOUT_LOADING_TRICKLE_CEILING, LAYOUT_LOADING_TRICKLE_INTERVAL_MS, LayoutLoadingService, LayoutService, layoutLoadingInterceptor } from '@ojiepermana/angular/theme/layout/services';
-import { ThemeRadiusService } from '@ojiepermana/angular/theme/styles';
-import { LAYOUT_LOCKED_WIDTH, LAYOUT_DEFAULT_SURFACE, LAYOUT_DEFAULT_APPEARANCE, LAYOUT_DEFAULT_WIDTH } from '@ojiepermana/angular/theme/layout/types';
-export { LAYOUT_APPEARANCES, LAYOUT_APPEARANCE_STORAGE_KEY, LAYOUT_DEFAULT_APPEARANCE, LAYOUT_DEFAULT_SURFACE, LAYOUT_DEFAULT_TYPE, LAYOUT_DEFAULT_WIDTH, LAYOUT_LOCKED_WIDTH, LAYOUT_SURFACES, LAYOUT_SURFACE_STORAGE_KEY, LAYOUT_TYPES, LAYOUT_TYPE_STORAGE_KEY, LAYOUT_WIDTHS, LAYOUT_WIDTH_STORAGE_KEY, isUiLayoutAppearance, isUiLayoutSurface, isUiLayoutType, isUiLayoutWidth } from '@ojiepermana/angular/theme/layout/types';
-import { DOCUMENT } from '@angular/common';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Router, NavigationEnd } from '@angular/router';
-
-/**
- * A thin progress line along the top edge of the viewport, running left to right.
- * `Layout` renders it automatically and `LayoutLoadingService` drives it, so it
- * turns itself on while a route navigation or a data load is in flight.
- *
- * It can also be placed at the application root, so the bar is already up during
- * the first navigation; any extra instance inside `Layout` goes inert on its own,
- * and the line is never drawn twice.
- */
-class LayoutLoadingComponent {
-    loading = inject(LayoutLoadingService);
-    hostId = this.loading.registerHost();
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    ariaLabel = input('Loading page', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    isPrimary = computed(() => this.loading.primaryHostId() === this.hostId, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isPrimary" }] : /* istanbul ignore next */ []));
-    state = computed(() => {
-        if (!this.isPrimary()) {
-            return 'inert';
-        }
-        return this.loading.active() ? 'active' : 'idle';
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
-    hostClasses = computed(() => cn('pointer-events-none fixed inset-x-0 top-0 z-50 block h-0.5', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    roundedProgress = computed(() => Math.round(this.loading.progress()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "roundedProgress" }] : /* istanbul ignore next */ []));
-    constructor() {
-        inject(DestroyRef).onDestroy(() => this.loading.unregisterHost(this.hostId));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LayoutLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: LayoutLoadingComponent, isStandalone: true, selector: "LayoutLoading", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-loading": "" }, properties: { "class": "hostClasses()", "attr.data-state": "state()" } }, ngImport: i0, template: `
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, ElementRef, booleanAttribute, computed, effect, inject, input } from "@angular/core";
+import { cn } from "@ojiepermana/angular/component/utils/core";
+import { LAYOUT_LOADING_HIDE_DELAY_MS, LAYOUT_LOADING_INITIAL_PROGRESS, LAYOUT_LOADING_SKIP, LAYOUT_LOADING_TRICKLE_CEILING, LAYOUT_LOADING_TRICKLE_INTERVAL_MS, LayoutLoadingService, LayoutLoadingService as LayoutLoadingService$1, LayoutService, LayoutService as LayoutService$1, layoutLoadingInterceptor } from "@ojiepermana/angular/theme/layout/services";
+import { ThemeRadiusService } from "@ojiepermana/angular/theme/styles";
+import { LAYOUT_APPEARANCES, LAYOUT_APPEARANCE_STORAGE_KEY, LAYOUT_DEFAULT_APPEARANCE, LAYOUT_DEFAULT_APPEARANCE as LAYOUT_DEFAULT_APPEARANCE$1, LAYOUT_DEFAULT_SURFACE, LAYOUT_DEFAULT_SURFACE as LAYOUT_DEFAULT_SURFACE$1, LAYOUT_DEFAULT_TYPE, LAYOUT_DEFAULT_WIDTH, LAYOUT_DEFAULT_WIDTH as LAYOUT_DEFAULT_WIDTH$1, LAYOUT_LOCKED_WIDTH, LAYOUT_LOCKED_WIDTH as LAYOUT_LOCKED_WIDTH$1, LAYOUT_SURFACES, LAYOUT_SURFACE_STORAGE_KEY, LAYOUT_TYPES, LAYOUT_TYPE_STORAGE_KEY, LAYOUT_WIDTHS, LAYOUT_WIDTH_STORAGE_KEY, isUiLayoutAppearance, isUiLayoutSurface, isUiLayoutType, isUiLayoutWidth } from "@ojiepermana/angular/theme/layout/types";
+import { DOCUMENT } from "@angular/common";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { NavigationEnd, Router } from "@angular/router";
+var LayoutLoadingComponent = class LayoutLoadingComponent {
+	loading = inject(LayoutLoadingService$1);
+	hostId = this.loading.registerHost();
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("Loading page", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	isPrimary = computed(() => this.loading.primaryHostId() === this.hostId, ...ngDevMode ? [{ debugName: "isPrimary" }] : /* istanbul ignore next */ []);
+	state = computed(() => {
+		if (!this.isPrimary()) return "inert";
+		return this.loading.active() ? "active" : "idle";
+	}, ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => cn("pointer-events-none fixed inset-x-0 top-0 z-50 block h-0.5", this.class()), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	roundedProgress = computed(() => Math.round(this.loading.progress()), ...ngDevMode ? [{ debugName: "roundedProgress" }] : /* istanbul ignore next */ []);
+	constructor() {
+		inject(DestroyRef).onDestroy(() => this.loading.unregisterHost(this.hostId));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: LayoutLoadingComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: LayoutLoadingComponent,
+		isStandalone: true,
+		selector: "LayoutLoading",
+		inputs: {
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "data-layout-loading": "" },
+			properties: {
+				"class": "hostClasses()",
+				"attr.data-state": "state()"
+			}
+		},
+		ngImport: i0,
+		template: `
     @if (isPrimary() && loading.active()) {
       <div
         role="progressbar"
@@ -61,18 +78,25 @@ class LayoutLoadingComponent {
         ></div>
       </div>
     }
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LayoutLoadingComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'LayoutLoading',
-                    host: {
-                        '[class]': 'hostClasses()',
-                        'data-layout-loading': '',
-                        '[attr.data-state]': 'state()',
-                    },
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: LayoutLoadingComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "LayoutLoading",
+			host: {
+				"[class]": "hostClasses()",
+				"data-layout-loading": "",
+				"[attr.data-state]": "state()"
+			},
+			template: `
     @if (isPrimary() && loading.active()) {
       <div
         role="progressbar"
@@ -90,229 +114,177 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         ></div>
       </div>
     }
-  `,
-                }]
-        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
-
-class LayoutComponent {
-    layout = inject(LayoutService);
-    themeRadius = inject(ThemeRadiusService);
-    surface = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
-    appearance = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-    layoutAppearanceAttribute = input(null, { ...(ngDevMode ? { debugName: "layoutAppearanceAttribute" } : /* istanbul ignore next */ {}), alias: 'layout-appearance' });
-    width = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
-    /**
-     * Layout type (`vertical` | `horizontal` | `empty` | `fluid`). When set it is the
-     * source of truth and overrides the projected `Layout*` variant; `null` leaves the
-     * variant in charge.
-     */
-    type = input(null, { ...(ngDevMode ? { debugName: "type" } : /* istanbul ignore next */ {}), alias: 'layout-type' });
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    appearanceInput = computed(() => this.appearance() ?? this.layoutAppearanceAttribute(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appearanceInput" }] : /* istanbul ignore next */ []));
-    resolvedSurface = computed(() => this.surface() ?? this.layout.surface(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedSurface" }] : /* istanbul ignore next */ []));
-    resolvedAppearance = computed(() => this.appearanceInput() ?? this.layout.appearance(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedAppearance" }] : /* istanbul ignore next */ []));
-    // The shell-mode lock outranks a host-declared width: on desktop, tablet, and
-    // mobile the app IS the surface, so there is no page for the frame to be inset
-    // within, whatever the consumer asked for.
-    resolvedWidth = computed(() => this.layout.widthLocked() ? LAYOUT_LOCKED_WIDTH : (this.width() ?? this.layout.width()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedWidth" }] : /* istanbul ignore next */ []));
-    resolvedType = computed(() => this.type() ?? this.layout.type(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedType" }] : /* istanbul ignore next */ []));
-    isBorderRail = computed(() => this.resolvedAppearance() === 'border-rail', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []));
-    isFluidFrame = computed(() => this.resolvedWidth() === 'fluid' && this.resolvedType() === 'fluid', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isFluidFrame" }] : /* istanbul ignore next */ []));
-    isFullFlat = computed(() => this.resolvedWidth() === 'full' && !this.isBorderRail(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isFullFlat" }] : /* istanbul ignore next */ []));
-    // The `grid-line` surface forces square frame corners (like `border-rail`) so
-    // the mosaic grid runs cleanly to the edges instead of being clipped by the
-    // theme-radius curve.
-    isGridLineSurface = computed(() => this.resolvedSurface() === 'grid-line', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isGridLineSurface" }] : /* istanbul ignore next */ []));
-    showsInsetRails = computed(() => {
-        const layoutType = this.resolvedType();
-        return this.isBorderRail() && (layoutType === 'horizontal' || layoutType === 'vertical');
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showsInsetRails" }] : /* istanbul ignore next */ []));
-    frameStageClasses = computed(() => cn('relative grid min-h-0 min-w-0 grid-cols-1 grid-rows-1', this.frameSizeClasses()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "frameStageClasses" }] : /* istanbul ignore next */ []));
-    railAnchorClasses = computed(() => 'relative h-full min-h-0 w-full min-w-0', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "railAnchorClasses" }] : /* istanbul ignore next */ []));
-    contentShellClasses = computed(() => cn('relative z-10 min-h-0 min-w-0', this.isFluidFrame() ? 'h-auto w-auto max-h-full max-w-full' : 'h-full w-full', this.isBorderRail() ? 'overflow-visible' : 'overflow-hidden'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contentShellClasses" }] : /* istanbul ignore next */ []));
-    hostClasses = computed(() => cn(
-    // Size comes from --layout-viewport-height / -width so the layout can be
-    // nested. Height is 100dvh by default (the layout IS the viewport) and a
-    // <Shell> retunes it to `auto` so the titlebar keeps its own slice. Width is
-    // 100% by default; `frame='modern'` retunes it to `auto` so the shell's inset
-    // margins actually shrink the panel instead of pushing it off the window.
-    // These go through variables rather than being overridden in CSS because
-    // these are Tailwind UTILITIES — a rule in @layer components could never win
-    // against them, whatever its specificity.
-    'relative isolate h-[var(--layout-viewport-height,100dvh)] w-[var(--layout-viewport-width,100%)] min-w-0 box-border overflow-hidden text-foreground', this.isFluidFrame() ? 'grid place-items-center' : 'block', this.surfaceClasses(), this.widthPaddingClasses(), this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    frameClasses = computed(() => {
-        const gridLine = this.isGridLineSurface();
-        return cn(
-        // Solid frame (FluxUI-style): the panel stays --background (constant
-        // white / near-black) while the tinted --layout-canvas shows only around
-        // it. The old translucent veil (bg-background/55 + blur) is gone — the
-        // decorative host surfaces/rails no longer bleed through the frame.
-        'relative min-h-0 min-w-0 bg-background', this.frameSizeClasses(), 
-        // Frame border color:
-        // • border-rail → the accent-driven rail color var (--layout-rail-color / -opacity),
-        //   so the frame border (--layout-rail-width) matches the rail lines.
-        // • grid-line flat → the accent at --layout-grid-line-border-opacity (0.484).
-        // • everything else → --border.
-        this.isBorderRail()
-            ? 'border-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]'
-            : gridLine
-                ? 'border-[hsl(var(--accent-foreground)/var(--layout-grid-line-border-opacity))]'
-                : 'border-border', 
-        // flat: the outer frame rounds with the active theme-radius
-        // (--layout-frame-radius → --radius-lg → --radius-base). border-rail keeps
-        // square corners for its grid-rail aesthetic. `grid-line` is always a clearly
-        // bordered square box (rounded-none + a visible border in every width) so the
-        // mosaic reads as a framed panel.
-        this.isBorderRail()
-            ? 'overflow-visible border-[length:var(--layout-rail-width)]'
-            : gridLine
-                ? 'overflow-hidden border rounded-none'
-                : this.isFullFlat()
-                    ? 'overflow-hidden'
-                    : 'overflow-hidden border rounded-[var(--layout-frame-radius)]');
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "frameClasses" }] : /* istanbul ignore next */ []));
-    frameLayerClasses = computed(() => cn('col-start-1 row-start-1', this.frameClasses()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "frameLayerClasses" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            const surface = this.surface();
-            if (surface !== null) {
-                this.layout.setSurface(surface, { persist: false });
-            }
-            else {
-                this.layout.registerSurface(LAYOUT_DEFAULT_SURFACE);
-            }
-            const appearance = this.appearanceInput();
-            if (appearance !== null) {
-                this.layout.setAppearance(appearance, { persist: false });
-            }
-            else {
-                this.layout.registerAppearance(LAYOUT_DEFAULT_APPEARANCE);
-            }
-            if (this.resolvedAppearance() === 'border-rail' && this.themeRadius.radius() !== 'none') {
-                this.themeRadius.setRadius('none');
-            }
-            // While the shell mode locks the width, the incoming value is NOT recorded.
-            // Hosts commonly feed `width` straight back from `LayoutService.width()`, which
-            // already reports the locked width — writing that back would overwrite the
-            // user's real preference with the lock and lose it for good.
-            const width = this.width();
-            if (this.layout.widthLocked()) {
-                // no-op: resolvedWidth() forces the locked width regardless
-            }
-            else if (width !== null) {
-                this.layout.setWidth(width, { persist: false });
-            }
-            else {
-                this.layout.registerWidth(LAYOUT_DEFAULT_WIDTH);
-            }
-            // Type: bila consumer mendaftarkan `layout-type`, itu jadi sumber kebenaran (override
-            // variant). Bila null, dibiarkan — variant `Layout*` yang menetapkan (registerType default
-            // sengaja TIDAK dipanggil agar tidak menimpa type yang sudah di-set variant).
-            const type = this.type();
-            if (type !== null) {
-                this.layout.setType(type, { persist: false });
-            }
-        });
-    }
-    surfaceClasses() {
-        switch (this.resolvedSurface()) {
-            case 'grid':
-                // `grid`: two-axis 1px gradient. The line color is --layout-grid-color —
-                // the pattern LINE tier at --layout-grid-line-opacity (base/theme.css):
-                // the active theme-neutral's family hue (saturation-raised so it reads),
-                // or the accent at pinned lightness on theme-neutral='base'. Classic HSL
-                // triplets keep the same mapping without relative-color support.
-                return '[--layout-grid-size:2rem] bg-layout-canvas bg-[linear-gradient(var(--layout-grid-color)_1px,transparent_1px),linear-gradient(to_right,var(--layout-grid-color)_1px,transparent_1px)] bg-position-[center_center] bg-size-[var(--layout-grid-size)_var(--layout-grid-size)]';
-            case 'grid-line':
-                // `grid-line`: a richer "mosaic" cousin of `grid`, painted by the
-                // `.layout-surface-grid-line` mask layer (base/components.css). One mask
-                // carries the faint uniform grid PLUS scattered bright highlight squares
-                // and a few subtly-lit cells, so the layers stay pixel-aligned. The glow
-                // is the pattern HIGHLIGHT tier: the active neutral family's hue, or the
-                // accent on theme-neutral='base' — lightness pinned to
-                // --layout-grid-highlight-l either way so brightness stays put. (The
-                // frame border stays accent on every neutral: it is chrome, not pattern.)
-                return 'bg-layout-canvas layout-surface-grid-line';
-            case 'honeycomb':
-                // True honeycomb: tileable hexagon outline painted by the
-                // `.layout-surface-honeycomb` mask layer (base/components.css), so it
-                // stays token-colored across themes. `bg-layout-canvas` is the base.
-                return 'bg-layout-canvas layout-surface-honeycomb';
-            case 'matrix':
-                // `matrix`: a scattered binary (0/1) field painted by the
-                // `.layout-surface-matrix` mask layer (base/components.css). The glyphs
-                // are tinted with the pattern NODE tier (the active neutral family's
-                // hue; `--primary` on theme-neutral='base') and carry
-                // baked-in per-glyph opacity, so the field reads as a soft "digital"
-                // signature that recolors with the neutral/theme.
-                return 'bg-layout-canvas layout-surface-matrix';
-            case 'circuit':
-                // `circuit`: a tileable PCB / circuit-board texture — routed traces with
-                // 45° bends, via nodes, and concentric ring pads. Painted by the
-                // `.layout-surface-circuit` class (base/components.css) as TWO stacked,
-                // pixel-aligned mask layers (a single mask only carries alpha, so two
-                // colors need two layers): `::before` strokes the copper traces in the
-                // pattern LINE tier (`--layout-circuit-trace-color`) and `::after`
-                // paints the via nodes/pads in the pattern NODE tier
-                // (`--layout-circuit-node-color`) — the neutral family's hue on every
-                // neutral except 'base', where the traces tint with the accent and the
-                // nodes glow with `--primary`. Both recolor across neutrals + dark mode.
-                return 'bg-layout-canvas layout-surface-circuit';
-            case 'line-vertical':
-                // Single-axis rules: --layout-line-color is the pattern LINE tier at
-                // --layout-grid-dot-opacity (a step above the dense multi-axis tier),
-                // composed in base/theme.css like --layout-grid-color.
-                return 'bg-layout-canvas bg-[linear-gradient(to_right,var(--layout-line-color)_1px,transparent_1px)] bg-position-[center_center] bg-size-[2rem_2rem]';
-            case 'line-horizontal':
-                return 'bg-layout-canvas bg-[linear-gradient(var(--layout-line-color)_1px,transparent_1px)] bg-position-[center_center] bg-size-[2rem_2rem]';
-            default:
-                return 'bg-layout-canvas';
-        }
-    }
-    widthPaddingClasses() {
-        if (this.isFullFlat())
-            return '';
-        switch (this.resolvedWidth()) {
-            case 'wide':
-                return 'p-4 lg:p-12';
-            case 'container':
-                return 'p-4 lg:px-0 lg:py-16';
-            case 'fluid':
-                return 'p-4 sm:p-6 lg:p-8';
-            default:
-                return 'p-4'; // full + border-rail
-        }
-    }
-    frameSizeClasses() {
-        if (this.isFluidFrame()) {
-            return 'h-auto w-auto max-h-full max-w-full';
-        }
-        return this.resolvedWidth() === 'container'
-            ? 'h-full w-full lg:container lg:mx-auto'
-            : 'h-full w-full';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: LayoutComponent, isStandalone: true, selector: "Layout", inputs: { surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, layoutAppearanceAttribute: { classPropertyName: "layoutAppearanceAttribute", publicName: "layout-appearance", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "layout-type", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-root": "" }, properties: { "class": "hostClasses()", "attr.data-surface": "resolvedSurface()", "attr.data-layout-appearance": "resolvedAppearance()", "attr.data-layout-width": "resolvedWidth()", "attr.data-layout-type": "resolvedType()" } }, ngImport: i0, template: `
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}]
+	}
+});
+var LayoutComponent = class LayoutComponent {
+	layout = inject(LayoutService$1);
+	themeRadius = inject(ThemeRadiusService);
+	surface = input(null, ...ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []);
+	appearance = input(null, ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
+	layoutAppearanceAttribute = input(null, {
+		...ngDevMode ? { debugName: "layoutAppearanceAttribute" } : /* istanbul ignore next */ {},
+		alias: "layout-appearance"
+	});
+	width = input(null, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	type = input(null, {
+		...ngDevMode ? { debugName: "type" } : /* istanbul ignore next */ {},
+		alias: "layout-type"
+	});
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	appearanceInput = computed(() => this.appearance() ?? this.layoutAppearanceAttribute(), ...ngDevMode ? [{ debugName: "appearanceInput" }] : /* istanbul ignore next */ []);
+	resolvedSurface = computed(() => this.surface() ?? this.layout.surface(), ...ngDevMode ? [{ debugName: "resolvedSurface" }] : /* istanbul ignore next */ []);
+	resolvedAppearance = computed(() => this.appearanceInput() ?? this.layout.appearance(), ...ngDevMode ? [{ debugName: "resolvedAppearance" }] : /* istanbul ignore next */ []);
+	resolvedWidth = computed(() => this.layout.widthLocked() ? LAYOUT_LOCKED_WIDTH$1 : this.width() ?? this.layout.width(), ...ngDevMode ? [{ debugName: "resolvedWidth" }] : /* istanbul ignore next */ []);
+	resolvedType = computed(() => this.type() ?? this.layout.type(), ...ngDevMode ? [{ debugName: "resolvedType" }] : /* istanbul ignore next */ []);
+	isBorderRail = computed(() => this.resolvedAppearance() === "border-rail", ...ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []);
+	isFluidFrame = computed(() => this.resolvedWidth() === "fluid" && this.resolvedType() === "fluid", ...ngDevMode ? [{ debugName: "isFluidFrame" }] : /* istanbul ignore next */ []);
+	isFullFlat = computed(() => this.resolvedWidth() === "full" && !this.isBorderRail(), ...ngDevMode ? [{ debugName: "isFullFlat" }] : /* istanbul ignore next */ []);
+	isGridLineSurface = computed(() => this.resolvedSurface() === "grid-line", ...ngDevMode ? [{ debugName: "isGridLineSurface" }] : /* istanbul ignore next */ []);
+	showsInsetRails = computed(() => {
+		const layoutType = this.resolvedType();
+		return this.isBorderRail() && (layoutType === "horizontal" || layoutType === "vertical");
+	}, ...ngDevMode ? [{ debugName: "showsInsetRails" }] : /* istanbul ignore next */ []);
+	frameStageClasses = computed(() => cn("relative grid min-h-0 min-w-0 grid-cols-1 grid-rows-1", this.frameSizeClasses()), ...ngDevMode ? [{ debugName: "frameStageClasses" }] : /* istanbul ignore next */ []);
+	railAnchorClasses = computed(() => "relative h-full min-h-0 w-full min-w-0", ...ngDevMode ? [{ debugName: "railAnchorClasses" }] : /* istanbul ignore next */ []);
+	contentShellClasses = computed(() => cn("relative z-10 min-h-0 min-w-0", this.isFluidFrame() ? "h-auto w-auto max-h-full max-w-full" : "h-full w-full", this.isBorderRail() ? "overflow-visible" : "overflow-hidden"), ...ngDevMode ? [{ debugName: "contentShellClasses" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => cn("relative isolate h-[var(--layout-viewport-height,100dvh)] w-[var(--layout-viewport-width,100%)] min-w-0 box-border overflow-hidden text-foreground", this.isFluidFrame() ? "grid place-items-center" : "block", this.surfaceClasses(), this.widthPaddingClasses(), this.class()), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	frameClasses = computed(() => {
+		const gridLine = this.isGridLineSurface();
+		return cn("relative min-h-0 min-w-0 bg-background", this.frameSizeClasses(), this.isBorderRail() ? "border-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]" : gridLine ? "border-[hsl(var(--accent-foreground)/var(--layout-grid-line-border-opacity))]" : "border-border", this.isBorderRail() ? "overflow-visible border-[length:var(--layout-rail-width)]" : gridLine ? "overflow-hidden border rounded-none" : this.isFullFlat() ? "overflow-hidden" : "overflow-hidden border rounded-[var(--layout-frame-radius)]");
+	}, ...ngDevMode ? [{ debugName: "frameClasses" }] : /* istanbul ignore next */ []);
+	frameLayerClasses = computed(() => cn("col-start-1 row-start-1", this.frameClasses()), ...ngDevMode ? [{ debugName: "frameLayerClasses" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const surface = this.surface();
+			if (surface !== null) this.layout.setSurface(surface, { persist: false });
+			else this.layout.registerSurface(LAYOUT_DEFAULT_SURFACE$1);
+			const appearance = this.appearanceInput();
+			if (appearance !== null) this.layout.setAppearance(appearance, { persist: false });
+			else this.layout.registerAppearance(LAYOUT_DEFAULT_APPEARANCE$1);
+			if (this.resolvedAppearance() === "border-rail" && this.themeRadius.radius() !== "none") this.themeRadius.setRadius("none");
+			const width = this.width();
+			if (this.layout.widthLocked()) {} else if (width !== null) this.layout.setWidth(width, { persist: false });
+			else this.layout.registerWidth(LAYOUT_DEFAULT_WIDTH$1);
+			const type = this.type();
+			if (type !== null) this.layout.setType(type, { persist: false });
+		});
+	}
+	surfaceClasses() {
+		switch (this.resolvedSurface()) {
+			case "grid": return "[--layout-grid-size:2rem] bg-layout-canvas bg-[linear-gradient(var(--layout-grid-color)_1px,transparent_1px),linear-gradient(to_right,var(--layout-grid-color)_1px,transparent_1px)] bg-position-[center_center] bg-size-[var(--layout-grid-size)_var(--layout-grid-size)]";
+			case "grid-line": return "bg-layout-canvas layout-surface-grid-line";
+			case "honeycomb": return "bg-layout-canvas layout-surface-honeycomb";
+			case "matrix": return "bg-layout-canvas layout-surface-matrix";
+			case "circuit": return "bg-layout-canvas layout-surface-circuit";
+			case "line-vertical": return "bg-layout-canvas bg-[linear-gradient(to_right,var(--layout-line-color)_1px,transparent_1px)] bg-position-[center_center] bg-size-[2rem_2rem]";
+			case "line-horizontal": return "bg-layout-canvas bg-[linear-gradient(var(--layout-line-color)_1px,transparent_1px)] bg-position-[center_center] bg-size-[2rem_2rem]";
+			default: return "bg-layout-canvas";
+		}
+	}
+	widthPaddingClasses() {
+		if (this.isFullFlat()) return "";
+		switch (this.resolvedWidth()) {
+			case "wide": return "p-4 lg:p-12";
+			case "container": return "p-4 lg:px-0 lg:py-16";
+			case "fluid": return "p-4 sm:p-6 lg:p-8";
+			default: return "p-4";
+		}
+	}
+	frameSizeClasses() {
+		if (this.isFluidFrame()) return "h-auto w-auto max-h-full max-w-full";
+		return this.resolvedWidth() === "container" ? "h-full w-full lg:container lg:mx-auto" : "h-full w-full";
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: LayoutComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: LayoutComponent,
+		isStandalone: true,
+		selector: "Layout",
+		inputs: {
+			surface: {
+				classPropertyName: "surface",
+				publicName: "surface",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			appearance: {
+				classPropertyName: "appearance",
+				publicName: "appearance",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			layoutAppearanceAttribute: {
+				classPropertyName: "layoutAppearanceAttribute",
+				publicName: "layout-appearance",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			type: {
+				classPropertyName: "type",
+				publicName: "layout-type",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "data-layout-root": "" },
+			properties: {
+				"class": "hostClasses()",
+				"attr.data-surface": "resolvedSurface()",
+				"attr.data-layout-appearance": "resolvedAppearance()",
+				"attr.data-layout-width": "resolvedWidth()",
+				"attr.data-layout-type": "resolvedType()"
+			}
+		},
+		ngImport: i0,
+		template: `
     <LayoutLoading />
 
     <div data-layout-stage [class]="frameStageClasses()">
@@ -417,22 +389,35 @@ class LayoutComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: LayoutLoadingComponent, selector: "LayoutLoading", inputs: ["class", "ariaLabel"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LayoutComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'Layout',
-                    imports: [LayoutLoadingComponent],
-                    host: {
-                        '[class]': 'hostClasses()',
-                        'data-layout-root': '',
-                        '[attr.data-surface]': 'resolvedSurface()',
-                        '[attr.data-layout-appearance]': 'resolvedAppearance()',
-                        '[attr.data-layout-width]': 'resolvedWidth()',
-                        '[attr.data-layout-type]': 'resolvedType()',
-                    },
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: LayoutLoadingComponent,
+			selector: "LayoutLoading",
+			inputs: ["class", "ariaLabel"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: LayoutComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "Layout",
+			imports: [LayoutLoadingComponent],
+			host: {
+				"[class]": "hostClasses()",
+				"data-layout-root": "",
+				"[attr.data-surface]": "resolvedSurface()",
+				"[attr.data-layout-appearance]": "resolvedAppearance()",
+				"[attr.data-layout-width]": "resolvedWidth()",
+				"[attr.data-layout-type]": "resolvedType()"
+			},
+			template: `
     <LayoutLoading />
 
     <div data-layout-stage [class]="frameStageClasses()">
@@ -537,202 +522,568 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         </div>
       </div>
     </div>
-  `,
-                }]
-        }], ctorParameters: () => [], propDecorators: { surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], layoutAppearanceAttribute: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout-appearance", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout-type", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class LayoutVerticalComponent {
-    layout = inject(LayoutService);
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('grid h-full min-h-0 w-full min-w-0 grid-cols-[auto_minmax(0,1fr)]', this.layout.appearance() === 'border-rail' ? 'overflow-visible' : 'overflow-hidden', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    constructor() {
-        this.layout.setType('vertical', { persist: false });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LayoutVerticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: LayoutVerticalComponent, isStandalone: true, selector: "LayoutVertical", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-variant": "", "data-layout-type": "vertical" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LayoutVerticalComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'LayoutVertical',
-                    host: {
-                        '[class]': 'classes()',
-                        'data-layout-variant': '',
-                        'data-layout-type': 'vertical',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class LayoutHorizontalComponent {
-    layout = inject(LayoutService);
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    constructor() {
-        this.layout.setType('horizontal', { persist: false });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LayoutHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: LayoutHorizontalComponent, isStandalone: true, selector: "LayoutHorizontal", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-variant": "", "data-layout-type": "horizontal" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LayoutHorizontalComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'LayoutHorizontal',
-                    host: {
-                        '[class]': 'classes()',
-                        'data-layout-variant': '',
-                        'data-layout-type': 'horizontal',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class LayoutEmptyComponent {
-    layout = inject(LayoutService);
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('h-full min-h-0 w-full min-w-0 overflow-hidden', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    constructor() {
-        this.layout.setType('empty', { persist: false });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LayoutEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: LayoutEmptyComponent, isStandalone: true, selector: "LayoutEmpty", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-variant": "", "data-layout-type": "empty" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LayoutEmptyComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'LayoutEmpty',
-                    host: {
-                        '[class]': 'classes()',
-                        'data-layout-variant': '',
-                        'data-layout-type': 'empty',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class LayoutFluidComponent {
-    layout = inject(LayoutService);
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('grid min-h-0 min-w-0 place-items-center overflow-auto', this.layout.width() === 'fluid' ? 'h-auto w-auto max-h-full max-w-full' : 'h-full w-full', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    constructor() {
-        this.layout.setType('fluid', { persist: false });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LayoutFluidComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: LayoutFluidComponent, isStandalone: true, selector: "LayoutFluid", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-variant": "", "data-layout-type": "fluid" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LayoutFluidComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'LayoutFluid',
-                    host: {
-                        '[class]': 'classes()',
-                        'data-layout-variant': '',
-                        'data-layout-type': 'fluid',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class LayoutNavigationComponent {
-    layout = inject(LayoutService);
-    ariaLabel = input('Layout navigation', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    /** Turn off when the child `<Navigation>` is already the semantic navigation landmark. */
-    landmark = input(true, { ...(ngDevMode ? { debugName: "landmark" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => {
-        const layoutType = this.layout.type();
-        return cn('relative block min-h-0 min-w-0', layoutType === 'horizontal' &&
-            'h-(--layout-topbar-height) min-h-(--layout-topbar-height) w-full shrink-0 overflow-visible', 
-        // overflow-visible: clipping diatur host <Navigation>; overlay nav (aside
-        // drawer dockbar, preview rail) keluar dari kolom rail collapsed dan overflow-hidden
-        // di sini ikut ter-scroll oleh focus scroll-into-view sehingga rail hilang.
-        layoutType === 'vertical' && 'h-full w-max max-w-full shrink-0 overflow-visible', 
-        // empty & fluid = layout fokus-konten: slot nav boleh tetap diproyeksikan agar struktur
-        // konsumen seragam (`LayoutNavigation` + `LayoutContent`), tapi nav-nya disembunyikan.
-        (layoutType === 'empty' || layoutType === 'fluid') && 'hidden', this.class());
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LayoutNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: LayoutNavigationComponent, isStandalone: true, selector: "LayoutNavigation", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, landmark: { classPropertyName: "landmark", publicName: "landmark", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-navigation": "" }, properties: { "class": "classes()", "attr.role": "landmark() ? \"navigation\" : null", "attr.aria-label": "landmark() ? ariaLabel() || null : null", "attr.data-layout-type": "layout.type()", "attr.data-layout-appearance": "layout.appearance()" } }, ngImport: i0, template: ` <ng-content /> `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LayoutNavigationComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'LayoutNavigation',
-                    host: {
-                        '[class]': 'classes()',
-                        'data-layout-navigation': '',
-                        '[attr.role]': 'landmark() ? "navigation" : null',
-                        '[attr.aria-label]': 'landmark() ? ariaLabel() || null : null',
-                        '[attr.data-layout-type]': 'layout.type()',
-                        '[attr.data-layout-appearance]': 'layout.appearance()',
-                    },
-                    template: ` <ng-content /> `,
-                }]
-        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], landmark: [{ type: i0.Input, args: [{ isSignal: true, alias: "landmark", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class LayoutContentComponent {
-    layout = inject(LayoutService);
-    document = inject(DOCUMENT, { optional: true });
-    host = inject((ElementRef));
-    router = inject(Router, { optional: true });
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    /** Stable target for the skip link. */
-    contentId = input('main-content', { ...(ngDevMode ? { debugName: "contentId" } : /* istanbul ignore next */ {}), alias: 'content-id' });
-    /** Move focus to the main landmark after NavigationEnd (opt-in). */
-    focusOnNavigation = input(false, { ...(ngDevMode ? { debugName: "focusOnNavigation" } : /* istanbul ignore next */ {}), alias: 'focus-on-navigation' });
-    classes = computed(() => {
-        const layoutType = this.layout.type();
-        return cn('block min-h-0 min-w-0 overflow-auto', layoutType === 'horizontal' && 'flex-1', layoutType === 'vertical' && 'h-full', layoutType === 'empty' && 'h-full w-full', 
-        // fluid: konten dipusatkan oleh LayoutFluid; batasi ke ukuran frame agar tetap scrollable.
-        layoutType === 'fluid' && 'max-h-full max-w-full', this.layout.width() === 'container' && 'w-full lg:container lg:mx-auto', this.class());
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    constructor() {
-        this.router?.events.pipe(takeUntilDestroyed()).subscribe((event) => {
-            if (!(event instanceof NavigationEnd) || !this.focusOnNavigation()) {
-                return;
-            }
-            const view = this.document?.defaultView;
-            if (!view) {
-                return;
-            }
-            view.requestAnimationFrame(() => this.host.nativeElement.focus());
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LayoutContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: LayoutContentComponent, isStandalone: true, selector: "LayoutContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, contentId: { classPropertyName: "contentId", publicName: "content-id", isSignal: true, isRequired: false, transformFunction: null }, focusOnNavigation: { classPropertyName: "focusOnNavigation", publicName: "focus-on-navigation", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-content": "", "role": "main", "tabindex": "-1" }, properties: { "class": "classes()", "attr.id": "contentId()", "attr.data-layout-type": "layout.type()", "attr.data-layout-width": "layout.width()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LayoutContentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'LayoutContent',
-                    host: {
-                        '[class]': 'classes()',
-                        'data-layout-content': '',
-                        '[attr.id]': 'contentId()',
-                        role: 'main',
-                        tabindex: '-1',
-                        '[attr.data-layout-type]': 'layout.type()',
-                        '[attr.data-layout-width]': 'layout.width()',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], contentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "content-id", required: false }] }], focusOnNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "focus-on-navigation", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { LayoutComponent, LayoutContentComponent, LayoutEmptyComponent, LayoutFluidComponent, LayoutHorizontalComponent, LayoutLoadingComponent, LayoutNavigationComponent, LayoutVerticalComponent };
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		surface: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "surface",
+				required: false
+			}]
+		}],
+		appearance: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appearance",
+				required: false
+			}]
+		}],
+		layoutAppearanceAttribute: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "layout-appearance",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "layout-type",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var LayoutVerticalComponent = class LayoutVerticalComponent {
+	layout = inject(LayoutService$1);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("grid h-full min-h-0 w-full min-w-0 grid-cols-[auto_minmax(0,1fr)]", this.layout.appearance() === "border-rail" ? "overflow-visible" : "overflow-hidden", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.layout.setType("vertical", { persist: false });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: LayoutVerticalComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: LayoutVerticalComponent,
+		isStandalone: true,
+		selector: "LayoutVertical",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"data-layout-variant": "",
+				"data-layout-type": "vertical"
+			},
+			properties: { "class": "classes()" }
+		},
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: LayoutVerticalComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "LayoutVertical",
+			host: {
+				"[class]": "classes()",
+				"data-layout-variant": "",
+				"data-layout-type": "vertical"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var LayoutHorizontalComponent = class LayoutHorizontalComponent {
+	layout = inject(LayoutService$1);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.layout.setType("horizontal", { persist: false });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: LayoutHorizontalComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: LayoutHorizontalComponent,
+		isStandalone: true,
+		selector: "LayoutHorizontal",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"data-layout-variant": "",
+				"data-layout-type": "horizontal"
+			},
+			properties: { "class": "classes()" }
+		},
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: LayoutHorizontalComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "LayoutHorizontal",
+			host: {
+				"[class]": "classes()",
+				"data-layout-variant": "",
+				"data-layout-type": "horizontal"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var LayoutEmptyComponent = class LayoutEmptyComponent {
+	layout = inject(LayoutService$1);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("h-full min-h-0 w-full min-w-0 overflow-hidden", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.layout.setType("empty", { persist: false });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: LayoutEmptyComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: LayoutEmptyComponent,
+		isStandalone: true,
+		selector: "LayoutEmpty",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"data-layout-variant": "",
+				"data-layout-type": "empty"
+			},
+			properties: { "class": "classes()" }
+		},
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: LayoutEmptyComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "LayoutEmpty",
+			host: {
+				"[class]": "classes()",
+				"data-layout-variant": "",
+				"data-layout-type": "empty"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var LayoutFluidComponent = class LayoutFluidComponent {
+	layout = inject(LayoutService$1);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("grid min-h-0 min-w-0 place-items-center overflow-auto", this.layout.width() === "fluid" ? "h-auto w-auto max-h-full max-w-full" : "h-full w-full", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.layout.setType("fluid", { persist: false });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: LayoutFluidComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: LayoutFluidComponent,
+		isStandalone: true,
+		selector: "LayoutFluid",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"data-layout-variant": "",
+				"data-layout-type": "fluid"
+			},
+			properties: { "class": "classes()" }
+		},
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: LayoutFluidComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "LayoutFluid",
+			host: {
+				"[class]": "classes()",
+				"data-layout-variant": "",
+				"data-layout-type": "fluid"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var LayoutNavigationComponent = class LayoutNavigationComponent {
+	layout = inject(LayoutService$1);
+	ariaLabel = input("Layout navigation", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	landmark = input(true, {
+		...ngDevMode ? { debugName: "landmark" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => {
+		const layoutType = this.layout.type();
+		return cn("relative block min-h-0 min-w-0", layoutType === "horizontal" && "h-(--layout-topbar-height) min-h-(--layout-topbar-height) w-full shrink-0 overflow-visible", layoutType === "vertical" && "h-full w-max max-w-full shrink-0 overflow-visible", (layoutType === "empty" || layoutType === "fluid") && "hidden", this.class());
+	}, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: LayoutNavigationComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: LayoutNavigationComponent,
+		isStandalone: true,
+		selector: "LayoutNavigation",
+		inputs: {
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			landmark: {
+				classPropertyName: "landmark",
+				publicName: "landmark",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "data-layout-navigation": "" },
+			properties: {
+				"class": "classes()",
+				"attr.role": "landmark() ? \"navigation\" : null",
+				"attr.aria-label": "landmark() ? ariaLabel() || null : null",
+				"attr.data-layout-type": "layout.type()",
+				"attr.data-layout-appearance": "layout.appearance()"
+			}
+		},
+		ngImport: i0,
+		template: ` <ng-content /> `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: LayoutNavigationComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "LayoutNavigation",
+			host: {
+				"[class]": "classes()",
+				"data-layout-navigation": "",
+				"[attr.role]": "landmark() ? \"navigation\" : null",
+				"[attr.aria-label]": "landmark() ? ariaLabel() || null : null",
+				"[attr.data-layout-type]": "layout.type()",
+				"[attr.data-layout-appearance]": "layout.appearance()"
+			},
+			template: ` <ng-content /> `
+		}]
+	}],
+	propDecorators: {
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		landmark: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "landmark",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var LayoutContentComponent = class LayoutContentComponent {
+	layout = inject(LayoutService$1);
+	document = inject(DOCUMENT, { optional: true });
+	host = inject(ElementRef);
+	router = inject(Router, { optional: true });
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	contentId = input("main-content", {
+		...ngDevMode ? { debugName: "contentId" } : /* istanbul ignore next */ {},
+		alias: "content-id"
+	});
+	focusOnNavigation = input(false, {
+		...ngDevMode ? { debugName: "focusOnNavigation" } : /* istanbul ignore next */ {},
+		alias: "focus-on-navigation"
+	});
+	classes = computed(() => {
+		const layoutType = this.layout.type();
+		return cn("block min-h-0 min-w-0 overflow-auto", layoutType === "horizontal" && "flex-1", layoutType === "vertical" && "h-full", layoutType === "empty" && "h-full w-full", layoutType === "fluid" && "max-h-full max-w-full", this.layout.width() === "container" && "w-full lg:container lg:mx-auto", this.class());
+	}, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.router?.events.pipe(takeUntilDestroyed()).subscribe((event) => {
+			if (!(event instanceof NavigationEnd) || !this.focusOnNavigation()) return;
+			const view = this.document?.defaultView;
+			if (!view) return;
+			view.requestAnimationFrame(() => this.host.nativeElement.focus());
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: LayoutContentComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: LayoutContentComponent,
+		isStandalone: true,
+		selector: "LayoutContent",
+		inputs: {
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			contentId: {
+				classPropertyName: "contentId",
+				publicName: "content-id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			focusOnNavigation: {
+				classPropertyName: "focusOnNavigation",
+				publicName: "focus-on-navigation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"data-layout-content": "",
+				"role": "main",
+				"tabindex": "-1"
+			},
+			properties: {
+				"class": "classes()",
+				"attr.id": "contentId()",
+				"attr.data-layout-type": "layout.type()",
+				"attr.data-layout-width": "layout.width()"
+			}
+		},
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: LayoutContentComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "LayoutContent",
+			host: {
+				"[class]": "classes()",
+				"data-layout-content": "",
+				"[attr.id]": "contentId()",
+				role: "main",
+				tabindex: "-1",
+				"[attr.data-layout-type]": "layout.type()",
+				"[attr.data-layout-width]": "layout.width()"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		contentId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "content-id",
+				required: false
+			}]
+		}],
+		focusOnNavigation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "focus-on-navigation",
+				required: false
+			}]
+		}]
+	}
+});
+export { LAYOUT_APPEARANCES, LAYOUT_APPEARANCE_STORAGE_KEY, LAYOUT_DEFAULT_APPEARANCE, LAYOUT_DEFAULT_SURFACE, LAYOUT_DEFAULT_TYPE, LAYOUT_DEFAULT_WIDTH, LAYOUT_LOADING_HIDE_DELAY_MS, LAYOUT_LOADING_INITIAL_PROGRESS, LAYOUT_LOADING_SKIP, LAYOUT_LOADING_TRICKLE_CEILING, LAYOUT_LOADING_TRICKLE_INTERVAL_MS, LAYOUT_LOCKED_WIDTH, LAYOUT_SURFACES, LAYOUT_SURFACE_STORAGE_KEY, LAYOUT_TYPES, LAYOUT_TYPE_STORAGE_KEY, LAYOUT_WIDTHS, LAYOUT_WIDTH_STORAGE_KEY, LayoutComponent, LayoutContentComponent, LayoutEmptyComponent, LayoutFluidComponent, LayoutHorizontalComponent, LayoutLoadingComponent, LayoutLoadingService, LayoutNavigationComponent, LayoutService, LayoutVerticalComponent, isUiLayoutAppearance, isUiLayoutSurface, isUiLayoutType, isUiLayoutWidth, layoutLoadingInterceptor };