@frame-kit/ui-ng 0.0.1

package/fesm2022/frame-kit-ui-ng-layouts-app-shell.mjs

@@ -0,0 +1,239 @@
+import { BreakpointObserver } from '@angular/cdk/layout';
+import * as i0 from '@angular/core';
+import { input, inject, signal, computed, DestroyRef, afterNextRender, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { OverlayOrchestrator, OVERLAY_PRIORITY } from '@frame-kit/ui-ng/services/overlay-orchestrator';
+
+class AppShellComponent {
+    // ===== INPUTS =====
+    /** Layout mode for the primary sidenav — `"side"` pushes content, `"over"` floats above it, `"icon"` collapses to an icon rail. */
+    mode = input('side', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Width of the primary sidenav when fully open. */
+    sidenavWidth = input('260px', ...(ngDevMode ? [{ debugName: "sidenavWidth" }] : /* istanbul ignore next */ []));
+    /** Width of the primary sidenav when collapsed to icon-rail mode. */
+    collapsedWidth = input('64px', ...(ngDevMode ? [{ debugName: "collapsedWidth" }] : /* istanbul ignore next */ []));
+    /** CSS media query used to determine mobile breakpoint for the primary sidenav. */
+    breakpoint = input('(min-width: 48em)', ...(ngDevMode ? [{ debugName: "breakpoint" }] : /* istanbul ignore next */ []));
+    /** When true, the main header sticks to the top of the viewport during scroll. */
+    sticky = input(true, ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+    /** When true and on mobile, the sidenav collapses to the icon rail instead of hiding entirely. */
+    collapseOnMobile = input(false, ...(ngDevMode ? [{ debugName: "collapseOnMobile" }] : /* istanbul ignore next */ []));
+    /** Layout mode for the end (trailing) panel. */
+    endMode = input('over', ...(ngDevMode ? [{ debugName: "endMode" }] : /* istanbul ignore next */ []));
+    /** Width of the end panel when fully open. */
+    endWidth = input('320px', ...(ngDevMode ? [{ debugName: "endWidth" }] : /* istanbul ignore next */ []));
+    /** Width of the end panel when collapsed to icon-rail mode. */
+    endCollapsedWidth = input('64px', ...(ngDevMode ? [{ debugName: "endCollapsedWidth" }] : /* istanbul ignore next */ []));
+    orchestrator = inject(OverlayOrchestrator);
+    navOverlayId = null;
+    endOverlayId = null;
+    // ===== INTERNAL STATE =====
+    stickyPreference = signal(null, ...(ngDevMode ? [{ debugName: "stickyPreference" }] : /* istanbul ignore next */ []));
+    tempOpen = signal(false, ...(ngDevMode ? [{ debugName: "tempOpen" }] : /* istanbul ignore next */ []));
+    isMobile = signal(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
+    endStickyPreference = signal('closed', ...(ngDevMode ? [{ debugName: "endStickyPreference" }] : /* istanbul ignore next */ []));
+    endTempOpen = signal(false, ...(ngDevMode ? [{ debugName: "endTempOpen" }] : /* istanbul ignore next */ []));
+    /**
+     * Transitions are opt-in: only enabled after a user action (toggle, open,
+     * close, dismiss). Viewport changes clear this flag so layout shifts are
+     * always instant — no flash of the aside sliding in/out on resize.
+     */
+    animate = signal(false, ...(ngDevMode ? [{ debugName: "animate" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    sidenavOpen = computed(() => {
+        if (this.stickyPreference() === 'closed') {
+            return false;
+        }
+        if (this.tempOpen()) {
+            return true;
+        }
+        return !this.isMobile();
+    }, ...(ngDevMode ? [{ debugName: "sidenavOpen" }] : /* istanbul ignore next */ []));
+    showOverlay = computed(() => {
+        if (!this.sidenavOpen()) {
+            return false;
+        }
+        if (this.mode() === 'over') {
+            return true;
+        }
+        return this.isMobile();
+    }, ...(ngDevMode ? [{ debugName: "showOverlay" }] : /* istanbul ignore next */ []));
+    isCollapsed = computed(() => {
+        if (this.mode() !== 'icon') {
+            return false;
+        }
+        if (this.sidenavOpen()) {
+            return false;
+        }
+        if (this.isMobile()) {
+            return this.collapseOnMobile();
+        }
+        return true;
+    }, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+    endOpen = computed(() => {
+        if (this.endStickyPreference() === 'closed') {
+            return false;
+        }
+        if (this.endTempOpen()) {
+            return true;
+        }
+        return !this.isMobile();
+    }, ...(ngDevMode ? [{ debugName: "endOpen" }] : /* istanbul ignore next */ []));
+    showEndOverlay = computed(() => {
+        if (!this.endOpen()) {
+            return false;
+        }
+        if (this.endMode() === 'over') {
+            return true;
+        }
+        return this.isMobile();
+    }, ...(ngDevMode ? [{ debugName: "showEndOverlay" }] : /* istanbul ignore next */ []));
+    isEndCollapsed = computed(() => {
+        return this.endMode() === 'icon' && !this.endOpen() && !this.isMobile();
+    }, ...(ngDevMode ? [{ debugName: "isEndCollapsed" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const mode = this.mode();
+        const endMode = this.endMode();
+        return [
+            'fk-app-shell',
+            `fk-app-shell--${mode}`,
+            this.sticky() ? 'fk-app-shell--sticky' : '',
+            this.sidenavOpen() ? 'fk-app-shell--open' : '',
+            this.isCollapsed() ? 'fk-app-shell--collapsed' : '',
+            this.isMobile() ? 'fk-app-shell--mobile' : '',
+            this.animate() ? 'fk-app-shell--animate' : '',
+            `fk-app-shell--end-${endMode}`,
+            this.endOpen() ? 'fk-app-shell--end-open' : '',
+            this.isEndCollapsed() ? 'fk-app-shell--end-collapsed' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostStyle() {
+        return {
+            '--fk-app-shell-sidenav-width': this.sidenavWidth(),
+            '--fk-app-shell-collapsed-width': this.collapsedWidth(),
+            '--fk-app-shell-end-width': this.endWidth(),
+            '--fk-app-shell-end-collapsed-width': this.endCollapsedWidth(),
+        };
+    }
+    // ===== BREAKPOINT =====
+    breakpointObserver = inject(BreakpointObserver);
+    destroyRef = inject(DestroyRef);
+    constructor() {
+        // Defer the breakpoint subscription until the first client-side render.
+        // During SSR, CDK's MediaMatcher returns `{ matches: false }` for every
+        // query, which would flip `isMobile` to true and produce a mobile-layout
+        // HTML in the server output, causing a visible flash of the overlay
+        // sidebar before the client corrects it on hydration. `afterNextRender`
+        // only runs in the browser, so `isMobile` stays at its `false` default
+        // through SSR and the real viewport check happens post-hydration.
+        afterNextRender(() => {
+            this.breakpointObserver
+                .observe(this.breakpoint())
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe((result) => {
+                this.animate.set(false);
+                this.isMobile.set(!result.matches);
+                this.tempOpen.set(false);
+                this.endTempOpen.set(false);
+            });
+        });
+    }
+    // ===== METHODS =====
+    /** Open the primary sidenav, registering it with the overlay orchestrator on mobile. */
+    openSidenav() {
+        this.animate.set(true);
+        this.stickyPreference.set(null);
+        if (this.isMobile()) {
+            this.tempOpen.set(true);
+            this.navOverlayId = this.orchestrator.register({
+                priority: OVERLAY_PRIORITY.NAVIGATION,
+                type: 'navigation',
+                close: () => this.closeSidenav(),
+            });
+        }
+    }
+    /** Close the primary sidenav and unregister it from the overlay orchestrator. */
+    closeSidenav() {
+        this.animate.set(true);
+        this.stickyPreference.set('closed');
+        this.tempOpen.set(false);
+        if (this.navOverlayId) {
+            this.orchestrator.unregister(this.navOverlayId);
+            this.navOverlayId = null;
+        }
+    }
+    /** Toggle the primary sidenav between open and closed. */
+    toggleSidenav() {
+        if (this.sidenavOpen()) {
+            this.closeSidenav();
+        }
+        else {
+            this.openSidenav();
+        }
+    }
+    /** Dismiss the sidenav overlay on mobile without marking it as permanently closed. */
+    dismissSidenav() {
+        this.animate.set(true);
+        this.tempOpen.set(false);
+    }
+    /** Open the end panel, registering it with the overlay orchestrator on mobile. */
+    openEnd() {
+        this.animate.set(true);
+        this.endStickyPreference.set(null);
+        if (this.isMobile()) {
+            this.endTempOpen.set(true);
+            this.endOverlayId = this.orchestrator.register({
+                priority: OVERLAY_PRIORITY.NAVIGATION,
+                type: 'navigation',
+                close: () => this.closeEnd(),
+            });
+        }
+    }
+    /** Close the end panel and unregister it from the overlay orchestrator. */
+    closeEnd() {
+        this.animate.set(true);
+        this.endStickyPreference.set('closed');
+        this.endTempOpen.set(false);
+        if (this.endOverlayId) {
+            this.orchestrator.unregister(this.endOverlayId);
+            this.endOverlayId = null;
+        }
+    }
+    /** Toggle the end panel between open and closed. */
+    toggleEnd() {
+        if (this.endOpen()) {
+            this.closeEnd();
+        }
+        else {
+            this.openEnd();
+        }
+    }
+    /** Dismiss the end panel overlay and unregister it from the overlay orchestrator. */
+    dismissEnd() {
+        this.animate.set(true);
+        this.endStickyPreference.set('closed');
+        this.endTempOpen.set(false);
+        if (this.endOverlayId) {
+            this.orchestrator.unregister(this.endOverlayId);
+            this.endOverlayId = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AppShellComponent, isStandalone: true, selector: "fk-app-shell", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, sidenavWidth: { classPropertyName: "sidenavWidth", publicName: "sidenavWidth", isSignal: true, isRequired: false, transformFunction: null }, collapsedWidth: { classPropertyName: "collapsedWidth", publicName: "collapsedWidth", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, collapseOnMobile: { classPropertyName: "collapseOnMobile", publicName: "collapseOnMobile", isSignal: true, isRequired: false, transformFunction: null }, endMode: { classPropertyName: "endMode", publicName: "endMode", isSignal: true, isRequired: false, transformFunction: null }, endWidth: { classPropertyName: "endWidth", publicName: "endWidth", isSignal: true, isRequired: false, transformFunction: null }, endCollapsedWidth: { classPropertyName: "endCollapsedWidth", publicName: "endCollapsedWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "this.hostStyle" } }, ngImport: i0, template: "<div [class]=\"classes()\">\n  <header class=\"fk-app-shell__header\">\n    <ng-content select=\"[appShellHeader]\" />\n  </header>\n\n  <div class=\"fk-app-shell__body\">\n    @if (showOverlay()) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n      <div class=\"fk-app-shell__overlay\" (click)=\"dismissSidenav()\"></div>\n    }\n\n    <aside\n      class=\"fk-app-shell__aside\"\n      [class.fk-app-shell__aside--open]=\"sidenavOpen()\"\n      [class.fk-app-shell__aside--collapsed]=\"isCollapsed()\"\n    >\n      <ng-content select=\"[appShellSidenav]\" />\n    </aside>\n\n    <main class=\"fk-app-shell__content\">\n      <ng-content select=\"[appShellContent]\" />\n    </main>\n\n    @if (showEndOverlay()) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n      <div class=\"fk-app-shell__end-overlay\" (click)=\"dismissEnd()\"></div>\n    }\n\n    <aside\n      class=\"fk-app-shell__end\"\n      [class.fk-app-shell__end--open]=\"endOpen()\"\n      [class.fk-app-shell__end--collapsed]=\"isEndCollapsed()\"\n    >\n      <ng-content select=\"[appShellEnd]\" />\n    </aside>\n  </div>\n\n  <footer class=\"fk-app-shell__footer\">\n    <ng-content select=\"[appShellFooter]\" />\n  </footer>\n</div>\n", styles: [":host{display:block;height:100%;flex:1;min-height:0}.fk-app-shell{display:flex;flex-direction:column;height:100%;overflow:hidden}.fk-app-shell--animate .fk-app-shell__aside,.fk-app-shell--animate .fk-app-shell__end{transition:width .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1)}.fk-app-shell__header{position:relative;z-index:var(--fk-app-shell-header-z-index, 100);flex-shrink:0}.fk-app-shell__body{display:flex;flex:1;position:relative;min-height:0}.fk-app-shell__overlay{position:fixed;inset:0;z-index:var(--fk-app-shell-overlay-z-index, 200);background:var(--fk-app-shell-overlay-bg, var(--fk-black-50, rgba(0, 0, 0, .5)))}.fk-app-shell__aside{display:flex;flex-direction:column;width:var(--fk-app-shell-sidenav-width);flex-shrink:0;overflow:hidden}.fk-app-shell__content{flex:1;min-width:0;overflow-y:auto;overscroll-behavior:contain}.fk-app-shell__footer{flex-shrink:0}.fk-app-shell--side .fk-app-shell__aside{position:relative}.fk-app-shell--side:not(.fk-app-shell--mobile):not(.fk-app-shell--open) .fk-app-shell__aside{width:0;overflow:hidden}.fk-app-shell--mobile .fk-app-shell__aside,.fk-app-shell--over .fk-app-shell__aside{position:fixed;top:0;left:0;bottom:0;z-index:var(--fk-app-shell-aside-z-index, 201);width:var(--fk-app-shell-sidenav-width);transform:translate(-100%);background:var(--fk-app-shell-aside-bg, var(--fk-color-surface, #ffffff))}.fk-app-shell--mobile .fk-app-shell__aside{width:var(--fk-app-shell-mobile-sidenav-width, 100%)}.fk-app-shell--mobile .fk-app-shell__aside--open,.fk-app-shell--over .fk-app-shell__aside--open{transform:translate(0)}.fk-app-shell--icon:not(.fk-app-shell--mobile) .fk-app-shell__aside{position:relative}.fk-app-shell--icon:not(.fk-app-shell--mobile) .fk-app-shell__aside--collapsed{width:var(--fk-app-shell-collapsed-width)}.fk-app-shell--mobile .fk-app-shell__aside--collapsed{position:relative;top:auto;left:auto;bottom:auto;width:var(--fk-app-shell-collapsed-width);transform:none;z-index:auto}.fk-app-shell__end-overlay{position:fixed;inset:0;z-index:var(--fk-app-shell-overlay-z-index, 200);background:var(--fk-app-shell-overlay-bg, var(--fk-black-50, rgba(0, 0, 0, .5)))}.fk-app-shell__end{display:flex;flex-direction:column;width:var(--fk-app-shell-end-width);flex-shrink:0;overflow:hidden;background:var(--fk-app-shell-end-bg, var(--fk-color-surface, #ffffff));border-radius:var(--fk-app-shell-end-radius, 0)}.fk-app-shell--end-side .fk-app-shell__end{position:relative}.fk-app-shell--end-side:not(.fk-app-shell--mobile):not(.fk-app-shell--end-open) .fk-app-shell__end{width:0;overflow:hidden}.fk-app-shell--mobile .fk-app-shell__end,.fk-app-shell--end-over .fk-app-shell__end{position:fixed;top:0;right:0;bottom:0;z-index:var(--fk-app-shell-end-z-index, 201);width:var(--fk-app-shell-end-width);transform:translate(100%);background:var(--fk-app-shell-end-bg, var(--fk-color-surface, #ffffff))}.fk-app-shell--mobile .fk-app-shell__end--open,.fk-app-shell--end-over .fk-app-shell__end--open{box-shadow:var(--fk-app-shell-end-shadow, -4px 0 16px rgba(0, 0, 0, .08))}.fk-app-shell--mobile .fk-app-shell__end--open,.fk-app-shell--end-over .fk-app-shell__end--open{transform:translate(0)}.fk-app-shell--end-icon:not(.fk-app-shell--mobile) .fk-app-shell__end{position:relative}.fk-app-shell--end-icon:not(.fk-app-shell--mobile) .fk-app-shell__end--collapsed{width:var(--fk-app-shell-end-collapsed-width)}@media(prefers-reduced-motion:reduce){.fk-app-shell--animate .fk-app-shell__aside,.fk-app-shell--animate .fk-app-shell__end{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppShellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-app-shell', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"classes()\">\n  <header class=\"fk-app-shell__header\">\n    <ng-content select=\"[appShellHeader]\" />\n  </header>\n\n  <div class=\"fk-app-shell__body\">\n    @if (showOverlay()) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n      <div class=\"fk-app-shell__overlay\" (click)=\"dismissSidenav()\"></div>\n    }\n\n    <aside\n      class=\"fk-app-shell__aside\"\n      [class.fk-app-shell__aside--open]=\"sidenavOpen()\"\n      [class.fk-app-shell__aside--collapsed]=\"isCollapsed()\"\n    >\n      <ng-content select=\"[appShellSidenav]\" />\n    </aside>\n\n    <main class=\"fk-app-shell__content\">\n      <ng-content select=\"[appShellContent]\" />\n    </main>\n\n    @if (showEndOverlay()) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n      <div class=\"fk-app-shell__end-overlay\" (click)=\"dismissEnd()\"></div>\n    }\n\n    <aside\n      class=\"fk-app-shell__end\"\n      [class.fk-app-shell__end--open]=\"endOpen()\"\n      [class.fk-app-shell__end--collapsed]=\"isEndCollapsed()\"\n    >\n      <ng-content select=\"[appShellEnd]\" />\n    </aside>\n  </div>\n\n  <footer class=\"fk-app-shell__footer\">\n    <ng-content select=\"[appShellFooter]\" />\n  </footer>\n</div>\n", styles: [":host{display:block;height:100%;flex:1;min-height:0}.fk-app-shell{display:flex;flex-direction:column;height:100%;overflow:hidden}.fk-app-shell--animate .fk-app-shell__aside,.fk-app-shell--animate .fk-app-shell__end{transition:width .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1)}.fk-app-shell__header{position:relative;z-index:var(--fk-app-shell-header-z-index, 100);flex-shrink:0}.fk-app-shell__body{display:flex;flex:1;position:relative;min-height:0}.fk-app-shell__overlay{position:fixed;inset:0;z-index:var(--fk-app-shell-overlay-z-index, 200);background:var(--fk-app-shell-overlay-bg, var(--fk-black-50, rgba(0, 0, 0, .5)))}.fk-app-shell__aside{display:flex;flex-direction:column;width:var(--fk-app-shell-sidenav-width);flex-shrink:0;overflow:hidden}.fk-app-shell__content{flex:1;min-width:0;overflow-y:auto;overscroll-behavior:contain}.fk-app-shell__footer{flex-shrink:0}.fk-app-shell--side .fk-app-shell__aside{position:relative}.fk-app-shell--side:not(.fk-app-shell--mobile):not(.fk-app-shell--open) .fk-app-shell__aside{width:0;overflow:hidden}.fk-app-shell--mobile .fk-app-shell__aside,.fk-app-shell--over .fk-app-shell__aside{position:fixed;top:0;left:0;bottom:0;z-index:var(--fk-app-shell-aside-z-index, 201);width:var(--fk-app-shell-sidenav-width);transform:translate(-100%);background:var(--fk-app-shell-aside-bg, var(--fk-color-surface, #ffffff))}.fk-app-shell--mobile .fk-app-shell__aside{width:var(--fk-app-shell-mobile-sidenav-width, 100%)}.fk-app-shell--mobile .fk-app-shell__aside--open,.fk-app-shell--over .fk-app-shell__aside--open{transform:translate(0)}.fk-app-shell--icon:not(.fk-app-shell--mobile) .fk-app-shell__aside{position:relative}.fk-app-shell--icon:not(.fk-app-shell--mobile) .fk-app-shell__aside--collapsed{width:var(--fk-app-shell-collapsed-width)}.fk-app-shell--mobile .fk-app-shell__aside--collapsed{position:relative;top:auto;left:auto;bottom:auto;width:var(--fk-app-shell-collapsed-width);transform:none;z-index:auto}.fk-app-shell__end-overlay{position:fixed;inset:0;z-index:var(--fk-app-shell-overlay-z-index, 200);background:var(--fk-app-shell-overlay-bg, var(--fk-black-50, rgba(0, 0, 0, .5)))}.fk-app-shell__end{display:flex;flex-direction:column;width:var(--fk-app-shell-end-width);flex-shrink:0;overflow:hidden;background:var(--fk-app-shell-end-bg, var(--fk-color-surface, #ffffff));border-radius:var(--fk-app-shell-end-radius, 0)}.fk-app-shell--end-side .fk-app-shell__end{position:relative}.fk-app-shell--end-side:not(.fk-app-shell--mobile):not(.fk-app-shell--end-open) .fk-app-shell__end{width:0;overflow:hidden}.fk-app-shell--mobile .fk-app-shell__end,.fk-app-shell--end-over .fk-app-shell__end{position:fixed;top:0;right:0;bottom:0;z-index:var(--fk-app-shell-end-z-index, 201);width:var(--fk-app-shell-end-width);transform:translate(100%);background:var(--fk-app-shell-end-bg, var(--fk-color-surface, #ffffff))}.fk-app-shell--mobile .fk-app-shell__end--open,.fk-app-shell--end-over .fk-app-shell__end--open{box-shadow:var(--fk-app-shell-end-shadow, -4px 0 16px rgba(0, 0, 0, .08))}.fk-app-shell--mobile .fk-app-shell__end--open,.fk-app-shell--end-over .fk-app-shell__end--open{transform:translate(0)}.fk-app-shell--end-icon:not(.fk-app-shell--mobile) .fk-app-shell__end{position:relative}.fk-app-shell--end-icon:not(.fk-app-shell--mobile) .fk-app-shell__end--collapsed{width:var(--fk-app-shell-end-collapsed-width)}@media(prefers-reduced-motion:reduce){.fk-app-shell--animate .fk-app-shell__aside,.fk-app-shell--animate .fk-app-shell__end{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], sidenavWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidenavWidth", required: false }] }], collapsedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedWidth", required: false }] }], breakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoint", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], collapseOnMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseOnMobile", required: false }] }], endMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "endMode", required: false }] }], endWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "endWidth", required: false }] }], endCollapsedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "endCollapsedWidth", required: false }] }], hostStyle: [{
+                type: HostBinding,
+                args: ['style']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AppShellComponent };
+//# sourceMappingURL=frame-kit-ui-ng-layouts-app-shell.mjs.map

package/fesm2022/frame-kit-ui-ng-layouts-app-shell.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-layouts-app-shell.mjs","sources":["../../../../packages/ui-ng/layouts/app-shell/app-shell.component.ts","../../../../packages/ui-ng/layouts/app-shell/app-shell.component.html","../../../../packages/ui-ng/layouts/app-shell/frame-kit-ui-ng-layouts-app-shell.ts"],"sourcesContent":["import { BreakpointObserver } from '@angular/cdk/layout';\nimport {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  HostBinding,\n  inject,\n  input,\n  signal,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nimport { OverlayOrchestrator } from '@frame-kit/ui-ng/services/overlay-orchestrator';\nimport { OVERLAY_PRIORITY } from '@frame-kit/ui-ng/services/overlay-orchestrator';\nimport type { AppShellMode } from './app-shell.types';\n\n@Component({\n  selector: 'fk-app-shell',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './app-shell.component.html',\n  styleUrl: './app-shell.component.scss',\n})\nexport class AppShellComponent {\n  // ===== INPUTS =====\n  /** Layout mode for the primary sidenav — `\"side\"` pushes content, `\"over\"` floats above it, `\"icon\"` collapses to an icon rail. */\n  readonly mode = input<AppShellMode>('side');\n  /** Width of the primary sidenav when fully open. */\n  readonly sidenavWidth = input<string>('260px');\n  /** Width of the primary sidenav when collapsed to icon-rail mode. */\n  readonly collapsedWidth = input<string>('64px');\n  /** CSS media query used to determine mobile breakpoint for the primary sidenav. */\n  readonly breakpoint = input<string>('(min-width: 48em)');\n  /** When true, the main header sticks to the top of the viewport during scroll. */\n  readonly sticky = input<boolean>(true);\n  /** When true and on mobile, the sidenav collapses to the icon rail instead of hiding entirely. */\n  readonly collapseOnMobile = input<boolean>(false);\n\n  /** Layout mode for the end (trailing) panel. */\n  readonly endMode = input<AppShellMode>('over');\n  /** Width of the end panel when fully open. */\n  readonly endWidth = input<string>('320px');\n  /** Width of the end panel when collapsed to icon-rail mode. */\n  readonly endCollapsedWidth = input<string>('64px');\n\n  private readonly orchestrator = inject(OverlayOrchestrator);\n  private navOverlayId: string | null = null;\n  private endOverlayId: string | null = null;\n\n  // ===== INTERNAL STATE =====\n  readonly stickyPreference = signal<'closed' | null>(null);\n  readonly tempOpen = signal<boolean>(false);\n  readonly isMobile = signal<boolean>(false);\n\n  readonly endStickyPreference = signal<'closed' | null>('closed');\n  readonly endTempOpen = signal<boolean>(false);\n\n  /**\n   * Transitions are opt-in: only enabled after a user action (toggle, open,\n   * close, dismiss). Viewport changes clear this flag so layout shifts are\n   * always instant — no flash of the aside sliding in/out on resize.\n   */\n  readonly animate = signal<boolean>(false);\n\n  // ===== COMPUTED =====\n  readonly sidenavOpen = computed(() => {\n    if (this.stickyPreference() === 'closed') {\n      return false;\n    }\n\n    if (this.tempOpen()) {\n      return true;\n    }\n\n    return !this.isMobile();\n  });\n\n  readonly showOverlay = computed(() => {\n    if (!this.sidenavOpen()) {\n      return false;\n    }\n\n    if (this.mode() === 'over') {\n      return true;\n    }\n\n    return this.isMobile();\n  });\n\n  readonly isCollapsed = computed(() => {\n    if (this.mode() !== 'icon') {\n      return false;\n    }\n\n    if (this.sidenavOpen()) {\n      return false;\n    }\n\n    if (this.isMobile()) {\n      return this.collapseOnMobile();\n    }\n\n    return true;\n  });\n\n  readonly endOpen = computed(() => {\n    if (this.endStickyPreference() === 'closed') {\n      return false;\n    }\n\n    if (this.endTempOpen()) {\n      return true;\n    }\n\n    return !this.isMobile();\n  });\n\n  readonly showEndOverlay = computed(() => {\n    if (!this.endOpen()) {\n      return false;\n    }\n\n    if (this.endMode() === 'over') {\n      return true;\n    }\n\n    return this.isMobile();\n  });\n\n  readonly isEndCollapsed = computed(() => {\n    return this.endMode() === 'icon' && !this.endOpen() && !this.isMobile();\n  });\n\n  readonly classes = computed(() => {\n    const mode = this.mode();\n\n    const endMode = this.endMode();\n\n    return [\n      'fk-app-shell',\n      `fk-app-shell--${mode}`,\n      this.sticky() ? 'fk-app-shell--sticky' : '',\n      this.sidenavOpen() ? 'fk-app-shell--open' : '',\n      this.isCollapsed() ? 'fk-app-shell--collapsed' : '',\n      this.isMobile() ? 'fk-app-shell--mobile' : '',\n      this.animate() ? 'fk-app-shell--animate' : '',\n      `fk-app-shell--end-${endMode}`,\n      this.endOpen() ? 'fk-app-shell--end-open' : '',\n      this.isEndCollapsed() ? 'fk-app-shell--end-collapsed' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  @HostBinding('style')\n  get hostStyle() {\n    return {\n      '--fk-app-shell-sidenav-width': this.sidenavWidth(),\n      '--fk-app-shell-collapsed-width': this.collapsedWidth(),\n      '--fk-app-shell-end-width': this.endWidth(),\n      '--fk-app-shell-end-collapsed-width': this.endCollapsedWidth(),\n    };\n  }\n\n  // ===== BREAKPOINT =====\n  private readonly breakpointObserver = inject(BreakpointObserver);\n  private readonly destroyRef = inject(DestroyRef);\n\n  constructor() {\n    // Defer the breakpoint subscription until the first client-side render.\n    // During SSR, CDK's MediaMatcher returns `{ matches: false }` for every\n    // query, which would flip `isMobile` to true and produce a mobile-layout\n    // HTML in the server output, causing a visible flash of the overlay\n    // sidebar before the client corrects it on hydration. `afterNextRender`\n    // only runs in the browser, so `isMobile` stays at its `false` default\n    // through SSR and the real viewport check happens post-hydration.\n    afterNextRender(() => {\n      this.breakpointObserver\n        .observe(this.breakpoint())\n        .pipe(takeUntilDestroyed(this.destroyRef))\n        .subscribe((result) => {\n          this.animate.set(false);\n          this.isMobile.set(!result.matches);\n          this.tempOpen.set(false);\n          this.endTempOpen.set(false);\n        });\n    });\n  }\n\n  // ===== METHODS =====\n  /** Open the primary sidenav, registering it with the overlay orchestrator on mobile. */\n  openSidenav(): void {\n    this.animate.set(true);\n    this.stickyPreference.set(null);\n\n    if (this.isMobile()) {\n      this.tempOpen.set(true);\n\n      this.navOverlayId = this.orchestrator.register({\n        priority: OVERLAY_PRIORITY.NAVIGATION,\n        type: 'navigation',\n        close: () => this.closeSidenav(),\n      });\n    }\n  }\n\n  /** Close the primary sidenav and unregister it from the overlay orchestrator. */\n  closeSidenav(): void {\n    this.animate.set(true);\n    this.stickyPreference.set('closed');\n    this.tempOpen.set(false);\n\n    if (this.navOverlayId) {\n      this.orchestrator.unregister(this.navOverlayId);\n      this.navOverlayId = null;\n    }\n  }\n\n  /** Toggle the primary sidenav between open and closed. */\n  toggleSidenav(): void {\n    if (this.sidenavOpen()) {\n      this.closeSidenav();\n    } else {\n      this.openSidenav();\n    }\n  }\n\n  /** Dismiss the sidenav overlay on mobile without marking it as permanently closed. */\n  dismissSidenav(): void {\n    this.animate.set(true);\n    this.tempOpen.set(false);\n  }\n\n  /** Open the end panel, registering it with the overlay orchestrator on mobile. */\n  openEnd(): void {\n    this.animate.set(true);\n    this.endStickyPreference.set(null);\n\n    if (this.isMobile()) {\n      this.endTempOpen.set(true);\n\n      this.endOverlayId = this.orchestrator.register({\n        priority: OVERLAY_PRIORITY.NAVIGATION,\n        type: 'navigation',\n        close: () => this.closeEnd(),\n      });\n    }\n  }\n\n  /** Close the end panel and unregister it from the overlay orchestrator. */\n  closeEnd(): void {\n    this.animate.set(true);\n    this.endStickyPreference.set('closed');\n    this.endTempOpen.set(false);\n\n    if (this.endOverlayId) {\n      this.orchestrator.unregister(this.endOverlayId);\n      this.endOverlayId = null;\n    }\n  }\n\n  /** Toggle the end panel between open and closed. */\n  toggleEnd(): void {\n    if (this.endOpen()) {\n      this.closeEnd();\n    } else {\n      this.openEnd();\n    }\n  }\n\n  /** Dismiss the end panel overlay and unregister it from the overlay orchestrator. */\n  dismissEnd(): void {\n    this.animate.set(true);\n    this.endStickyPreference.set('closed');\n    this.endTempOpen.set(false);\n\n    if (this.endOverlayId) {\n      this.orchestrator.unregister(this.endOverlayId);\n      this.endOverlayId = null;\n    }\n  }\n}\n","<div [class]=\"classes()\">\n  <header class=\"fk-app-shell__header\">\n    <ng-content select=\"[appShellHeader]\" />\n  </header>\n\n  <div class=\"fk-app-shell__body\">\n    @if (showOverlay()) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n      <div class=\"fk-app-shell__overlay\" (click)=\"dismissSidenav()\"></div>\n    }\n\n    <aside\n      class=\"fk-app-shell__aside\"\n      [class.fk-app-shell__aside--open]=\"sidenavOpen()\"\n      [class.fk-app-shell__aside--collapsed]=\"isCollapsed()\"\n    >\n      <ng-content select=\"[appShellSidenav]\" />\n    </aside>\n\n    <main class=\"fk-app-shell__content\">\n      <ng-content select=\"[appShellContent]\" />\n    </main>\n\n    @if (showEndOverlay()) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n      <div class=\"fk-app-shell__end-overlay\" (click)=\"dismissEnd()\"></div>\n    }\n\n    <aside\n      class=\"fk-app-shell__end\"\n      [class.fk-app-shell__end--open]=\"endOpen()\"\n      [class.fk-app-shell__end--collapsed]=\"isEndCollapsed()\"\n    >\n      <ng-content select=\"[appShellEnd]\" />\n    </aside>\n  </div>\n\n  <footer class=\"fk-app-shell__footer\">\n    <ng-content select=\"[appShellFooter]\" />\n  </footer>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/frame-kit-ui-ng-layouts-content-split.mjs

@@ -0,0 +1,132 @@
+import { isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, NgZone, DestroyRef, PLATFORM_ID, input, model, signal, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class FkContentSplitComponent {
+    el = inject((ElementRef));
+    ngZone = inject(NgZone);
+    destroyRef = inject(DestroyRef);
+    platformId = inject(PLATFORM_ID);
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    // ===== INPUTS =====
+    /** Width of the left panel when the layout is in wide mode. */
+    leftWidth = input('280px', ...(ngDevMode ? [{ debugName: "leftWidth" }] : /* istanbul ignore next */ []));
+    /** Width of the left panel when collapsed to a narrow icon rail. */
+    railWidth = input('64px', ...(ngDevMode ? [{ debugName: "railWidth" }] : /* istanbul ignore next */ []));
+    /** Host element pixel width below which the layout switches to narrow mode. */
+    breakpoint = input(700, ...(ngDevMode ? [{ debugName: "breakpoint" }] : /* istanbul ignore next */ []));
+    /** Two-way binding for the collapsed state of the left panel. */
+    collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    // ===== INTERNAL STATE =====
+    layout = signal('wide', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    animate = signal(false, ...(ngDevMode ? [{ debugName: "animate" }] : /* istanbul ignore next */ []));
+    observer = null;
+    // ===== COMPUTED =====
+    isNarrow = computed(() => this.layout() === 'narrow', ...(ngDevMode ? [{ debugName: "isNarrow" }] : /* istanbul ignore next */ []));
+    isWide = computed(() => this.layout() === 'wide', ...(ngDevMode ? [{ debugName: "isWide" }] : /* istanbul ignore next */ []));
+    showOverlay = computed(() => this.isNarrow() && !this.collapsed(), ...(ngDevMode ? [{ debugName: "showOverlay" }] : /* istanbul ignore next */ []));
+    classes = computed(() => [
+        'fk-content-split',
+        this.isNarrow() ? 'fk-content-split--narrow' : 'fk-content-split--wide',
+        this.isNarrow() && !this.collapsed() ? 'fk-content-split--open' : '',
+        this.isNarrow() && this.collapsed() ? 'fk-content-split--closed' : '',
+        this.animate() ? 'fk-content-split--animate' : '',
+        this.className(),
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    // ===== HOST BINDINGS =====
+    get hostClass() {
+        return this.classes();
+    }
+    get hostLeftWidth() {
+        return this.leftWidth();
+    }
+    get hostRailWidth() {
+        return this.railWidth();
+    }
+    // ===== CONSTRUCTOR =====
+    constructor() {
+        // ResizeObserver is browser-only — the SSR pass has no live
+        // layout to observe, so the initial layout signal stays at its
+        // default ("wide") and the browser pass wires the observer once
+        // hydration mounts the element.
+        if (isPlatformBrowser(this.platformId)) {
+            this.ngZone.runOutsideAngular(() => {
+                this.observer = new ResizeObserver((entries) => {
+                    const entry = entries[0];
+                    if (!entry) {
+                        return;
+                    }
+                    const hostWidth = entry.contentRect.width;
+                    const bp = this.breakpoint();
+                    if (hostWidth < bp && this.layout() !== 'narrow') {
+                        this.ngZone.run(() => {
+                            this.layout.set('narrow');
+                            this.animate.set(false);
+                            this.collapsed.set(true);
+                        });
+                    }
+                    else if (hostWidth >= bp && this.layout() !== 'wide') {
+                        this.ngZone.run(() => {
+                            this.layout.set('wide');
+                            this.animate.set(false);
+                            this.collapsed.set(true);
+                        });
+                    }
+                });
+                this.observer.observe(this.el.nativeElement);
+            });
+        }
+        this.destroyRef.onDestroy(() => {
+            this.observer?.disconnect();
+        });
+    }
+    // ===== PUBLIC METHODS =====
+    /** Expand the left panel. */
+    open() {
+        this.animate.set(true);
+        this.collapsed.set(false);
+    }
+    /** Collapse the left panel. */
+    close() {
+        this.animate.set(true);
+        this.collapsed.set(true);
+    }
+    /** Toggle the left panel between expanded and collapsed. */
+    toggle() {
+        if (this.collapsed()) {
+            this.open();
+        }
+        else {
+            this.close();
+        }
+    }
+    /** Dismiss the left panel overlay on narrow viewports (alias for `close`). */
+    dismiss() {
+        this.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkContentSplitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FkContentSplitComponent, isStandalone: true, selector: "fk-content-split", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, leftWidth: { classPropertyName: "leftWidth", publicName: "leftWidth", isSignal: true, isRequired: false, transformFunction: null }, railWidth: { classPropertyName: "railWidth", publicName: "railWidth", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "class": "this.hostClass", "style.--fk-content-split-left-width": "this.hostLeftWidth", "style.--fk-content-split-rail-width": "this.hostRailWidth" } }, ngImport: i0, template: "@if (showOverlay()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div class=\"fk-content-split__overlay\" (click)=\"dismiss()\"></div>\n}\n\n<div\n  class=\"fk-content-split__left\"\n  [class.fk-content-split__left--open]=\"!collapsed()\"\n>\n  <div class=\"fk-content-split__left-content\">\n    <ng-content select=\"[contentSplitLeft]\" />\n  </div>\n</div>\n\n<div class=\"fk-content-split__rail\">\n  <button\n    class=\"fk-content-split__rail-toggle\"\n    type=\"button\"\n    [attr.aria-label]=\"collapsed() ? 'Open panel' : 'Close panel'\"\n    (click)=\"toggle()\"\n  >\n    <span\n      class=\"fk-content-split__rail-toggle-icon\"\n      [class.fk-content-split__rail-toggle-icon--open]=\"!collapsed()\"\n      aria-hidden=\"true\"\n    >\n      <span class=\"fk-content-split__rail-toggle-projected\">\n        <ng-content select=\"[contentSplitToggleIcon]\" />\n      </span>\n      <svg\n        class=\"fk-content-split__rail-toggle-fallback\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"18\"\n        height=\"18\"\n        viewBox=\"0 0 18 18\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <path d=\"M15.25 9H2.75\" />\n        <path d=\"M11 4.75L15.25 9L11 13.25\" />\n      </svg>\n    </span>\n  </button>\n</div>\n\n<div class=\"fk-content-split__right\">\n  <ng-content select=\"[contentSplitRight]\" />\n</div>\n", styles: [":host{display:flex;position:relative;height:100%;overflow:hidden}.fk-content-split__left{width:var(--fk-content-split-left-width, 280px);flex-shrink:0;overflow:hidden;background:var(--fk-content-split-left-bg, var(--fk-color-surface, #ffffff));border-right:var(--fk-content-split-left-border, 1px solid var(--fk-color-border, #e2e8f0))}.fk-content-split__left-content{height:100%;overflow-y:auto;overscroll-behavior:contain}.fk-content-split__overlay,.fk-content-split__rail{display:none}.fk-content-split__right{flex:1;min-width:0;overflow-y:auto}:host(.fk-content-split--narrow) .fk-content-split__left{position:absolute;top:0;left:0;bottom:0;z-index:var(--fk-content-split-panel-z-index, 11);width:min(var(--fk-content-split-left-width, 280px),100% - var(--fk-content-split-rail-width, 64px));transform:translate(-100%);visibility:hidden;pointer-events:none;background:var(--fk-content-split-left-bg, var(--fk-color-surface, #ffffff));border-right:var(--fk-content-split-left-border, 1px solid var(--fk-color-border, #e2e8f0))}:host(.fk-content-split--narrow) .fk-content-split__left--open{transform:translate(var(--fk-content-split-rail-width, 64px));visibility:visible;pointer-events:auto}:host(.fk-content-split--narrow) .fk-content-split__overlay{display:block;position:absolute;inset:0;left:var(--fk-content-split-rail-width, 64px);z-index:var(--fk-content-split-overlay-z-index, 10);background:var(--fk-content-split-overlay-bg, var(--fk-black-50, rgba(0, 0, 0, .5)))}:host(.fk-content-split--narrow) .fk-content-split__rail{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:var(--fk-content-split-rail-width, 64px);background:var(--fk-content-split-left-bg, var(--fk-color-surface, #ffffff));border-right:var(--fk-content-split-left-border, 1px solid var(--fk-color-border, #e2e8f0));overflow-y:auto;overscroll-behavior:contain}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle{display:flex;align-items:center;justify-content:center;width:100%;padding:var(--fk-content-split-rail-toggle-padding, var(--fk-rhythm-3, .75rem)) 0;border:none;background:transparent;color:var(--fk-content-split-rail-toggle-color, var(--fk-color-muted, #64748b));cursor:pointer;flex-shrink:0}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle:hover{color:var(--fk-content-split-rail-toggle-color-hover, var(--fk-color-text, #1f2d3d));background:var(--fk-content-split-rail-toggle-bg-hover, var(--fk-color-surface-muted, #f1f5f9))}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle:focus-visible{outline:var(--fk-focus-ring, 0 0 0 3px rgba(59, 130, 246, .5));outline-offset:-2px}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-icon{display:flex;align-items:center;justify-content:center;transition:transform .15s ease}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-icon--open{transform:rotate(180deg)}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-projected{display:contents}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-projected:empty+.fk-content-split__rail-toggle-fallback{display:block}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-fallback{display:none}:host(.fk-content-split--narrow) .fk-content-split__right{flex:1;min-width:0}:host(.fk-content-split--animate) .fk-content-split__left{transition:transform .25s cubic-bezier(.4,0,.2,1),visibility 0s .25s}:host(.fk-content-split--animate.fk-content-split--open) .fk-content-split__left{transition:transform .25s cubic-bezier(.4,0,.2,1),visibility 0s 0s}@media(prefers-reduced-motion:reduce){:host(.fk-content-split--animate) .fk-content-split__left{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkContentSplitComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-content-split', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showOverlay()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div class=\"fk-content-split__overlay\" (click)=\"dismiss()\"></div>\n}\n\n<div\n  class=\"fk-content-split__left\"\n  [class.fk-content-split__left--open]=\"!collapsed()\"\n>\n  <div class=\"fk-content-split__left-content\">\n    <ng-content select=\"[contentSplitLeft]\" />\n  </div>\n</div>\n\n<div class=\"fk-content-split__rail\">\n  <button\n    class=\"fk-content-split__rail-toggle\"\n    type=\"button\"\n    [attr.aria-label]=\"collapsed() ? 'Open panel' : 'Close panel'\"\n    (click)=\"toggle()\"\n  >\n    <span\n      class=\"fk-content-split__rail-toggle-icon\"\n      [class.fk-content-split__rail-toggle-icon--open]=\"!collapsed()\"\n      aria-hidden=\"true\"\n    >\n      <span class=\"fk-content-split__rail-toggle-projected\">\n        <ng-content select=\"[contentSplitToggleIcon]\" />\n      </span>\n      <svg\n        class=\"fk-content-split__rail-toggle-fallback\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"18\"\n        height=\"18\"\n        viewBox=\"0 0 18 18\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <path d=\"M15.25 9H2.75\" />\n        <path d=\"M11 4.75L15.25 9L11 13.25\" />\n      </svg>\n    </span>\n  </button>\n</div>\n\n<div class=\"fk-content-split__right\">\n  <ng-content select=\"[contentSplitRight]\" />\n</div>\n", styles: [":host{display:flex;position:relative;height:100%;overflow:hidden}.fk-content-split__left{width:var(--fk-content-split-left-width, 280px);flex-shrink:0;overflow:hidden;background:var(--fk-content-split-left-bg, var(--fk-color-surface, #ffffff));border-right:var(--fk-content-split-left-border, 1px solid var(--fk-color-border, #e2e8f0))}.fk-content-split__left-content{height:100%;overflow-y:auto;overscroll-behavior:contain}.fk-content-split__overlay,.fk-content-split__rail{display:none}.fk-content-split__right{flex:1;min-width:0;overflow-y:auto}:host(.fk-content-split--narrow) .fk-content-split__left{position:absolute;top:0;left:0;bottom:0;z-index:var(--fk-content-split-panel-z-index, 11);width:min(var(--fk-content-split-left-width, 280px),100% - var(--fk-content-split-rail-width, 64px));transform:translate(-100%);visibility:hidden;pointer-events:none;background:var(--fk-content-split-left-bg, var(--fk-color-surface, #ffffff));border-right:var(--fk-content-split-left-border, 1px solid var(--fk-color-border, #e2e8f0))}:host(.fk-content-split--narrow) .fk-content-split__left--open{transform:translate(var(--fk-content-split-rail-width, 64px));visibility:visible;pointer-events:auto}:host(.fk-content-split--narrow) .fk-content-split__overlay{display:block;position:absolute;inset:0;left:var(--fk-content-split-rail-width, 64px);z-index:var(--fk-content-split-overlay-z-index, 10);background:var(--fk-content-split-overlay-bg, var(--fk-black-50, rgba(0, 0, 0, .5)))}:host(.fk-content-split--narrow) .fk-content-split__rail{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:var(--fk-content-split-rail-width, 64px);background:var(--fk-content-split-left-bg, var(--fk-color-surface, #ffffff));border-right:var(--fk-content-split-left-border, 1px solid var(--fk-color-border, #e2e8f0));overflow-y:auto;overscroll-behavior:contain}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle{display:flex;align-items:center;justify-content:center;width:100%;padding:var(--fk-content-split-rail-toggle-padding, var(--fk-rhythm-3, .75rem)) 0;border:none;background:transparent;color:var(--fk-content-split-rail-toggle-color, var(--fk-color-muted, #64748b));cursor:pointer;flex-shrink:0}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle:hover{color:var(--fk-content-split-rail-toggle-color-hover, var(--fk-color-text, #1f2d3d));background:var(--fk-content-split-rail-toggle-bg-hover, var(--fk-color-surface-muted, #f1f5f9))}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle:focus-visible{outline:var(--fk-focus-ring, 0 0 0 3px rgba(59, 130, 246, .5));outline-offset:-2px}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-icon{display:flex;align-items:center;justify-content:center;transition:transform .15s ease}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-icon--open{transform:rotate(180deg)}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-projected{display:contents}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-projected:empty+.fk-content-split__rail-toggle-fallback{display:block}:host(.fk-content-split--narrow) .fk-content-split__rail-toggle-fallback{display:none}:host(.fk-content-split--narrow) .fk-content-split__right{flex:1;min-width:0}:host(.fk-content-split--animate) .fk-content-split__left{transition:transform .25s cubic-bezier(.4,0,.2,1),visibility 0s .25s}:host(.fk-content-split--animate.fk-content-split--open) .fk-content-split__left{transition:transform .25s cubic-bezier(.4,0,.2,1),visibility 0s 0s}@media(prefers-reduced-motion:reduce){:host(.fk-content-split--animate) .fk-content-split__left{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], leftWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftWidth", required: false }] }], railWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "railWidth", required: false }] }], breakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoint", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostLeftWidth: [{
+                type: HostBinding,
+                args: ['style.--fk-content-split-left-width']
+            }], hostRailWidth: [{
+                type: HostBinding,
+                args: ['style.--fk-content-split-rail-width']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FkContentSplitComponent };
+//# sourceMappingURL=frame-kit-ui-ng-layouts-content-split.mjs.map

package/fesm2022/frame-kit-ui-ng-layouts-content-split.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-layouts-content-split.mjs","sources":["../../../../packages/ui-ng/layouts/content-split/content-split.component.ts","../../../../packages/ui-ng/layouts/content-split/content-split.component.html","../../../../packages/ui-ng/layouts/content-split/frame-kit-ui-ng-layouts-content-split.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  ElementRef,\n  HostBinding,\n  inject,\n  input,\n  model,\n  NgZone,\n  PLATFORM_ID,\n  signal,\n} from '@angular/core';\n\nimport type { ContentSplitLayout } from './content-split.types';\n\n@Component({\n  selector: 'fk-content-split',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './content-split.component.html',\n  styleUrl: './content-split.component.scss',\n})\nexport class FkContentSplitComponent {\n  private readonly el = inject(ElementRef<HTMLElement>);\n  private readonly ngZone = inject(NgZone);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly platformId = inject(PLATFORM_ID);\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n\n  // ===== INPUTS =====\n  /** Width of the left panel when the layout is in wide mode. */\n  readonly leftWidth = input<string>('280px');\n  /** Width of the left panel when collapsed to a narrow icon rail. */\n  readonly railWidth = input<string>('64px');\n  /** Host element pixel width below which the layout switches to narrow mode. */\n  readonly breakpoint = input<number>(700);\n  /** Two-way binding for the collapsed state of the left panel. */\n  readonly collapsed = model<boolean>(false);\n\n  // ===== INTERNAL STATE =====\n  readonly layout = signal<ContentSplitLayout>('wide');\n  readonly animate = signal(false);\n\n  private observer: ResizeObserver | null = null;\n\n  // ===== COMPUTED =====\n  readonly isNarrow = computed(() => this.layout() === 'narrow');\n  readonly isWide = computed(() => this.layout() === 'wide');\n  readonly showOverlay = computed(() => this.isNarrow() && !this.collapsed());\n\n  readonly classes = computed(() =>\n    [\n      'fk-content-split',\n      this.isNarrow() ? 'fk-content-split--narrow' : 'fk-content-split--wide',\n      this.isNarrow() && !this.collapsed() ? 'fk-content-split--open' : '',\n      this.isNarrow() && this.collapsed() ? 'fk-content-split--closed' : '',\n      this.animate() ? 'fk-content-split--animate' : '',\n      this.className(),\n    ]\n      .filter(Boolean)\n      .join(' '),\n  );\n\n  // ===== HOST BINDINGS =====\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  @HostBinding('style.--fk-content-split-left-width')\n  get hostLeftWidth() {\n    return this.leftWidth();\n  }\n\n  @HostBinding('style.--fk-content-split-rail-width')\n  get hostRailWidth() {\n    return this.railWidth();\n  }\n\n  // ===== CONSTRUCTOR =====\n\n  constructor() {\n    // ResizeObserver is browser-only — the SSR pass has no live\n    // layout to observe, so the initial layout signal stays at its\n    // default (\"wide\") and the browser pass wires the observer once\n    // hydration mounts the element.\n    if (isPlatformBrowser(this.platformId)) {\n      this.ngZone.runOutsideAngular(() => {\n        this.observer = new ResizeObserver((entries) => {\n          const entry = entries[0];\n\n          if (!entry) {\n            return;\n          }\n\n          const hostWidth = entry.contentRect.width;\n          const bp = this.breakpoint();\n\n          if (hostWidth < bp && this.layout() !== 'narrow') {\n            this.ngZone.run(() => {\n              this.layout.set('narrow');\n              this.animate.set(false);\n              this.collapsed.set(true);\n            });\n          } else if (hostWidth >= bp && this.layout() !== 'wide') {\n            this.ngZone.run(() => {\n              this.layout.set('wide');\n              this.animate.set(false);\n              this.collapsed.set(true);\n            });\n          }\n        });\n\n        this.observer.observe(this.el.nativeElement);\n      });\n    }\n\n    this.destroyRef.onDestroy(() => {\n      this.observer?.disconnect();\n    });\n  }\n\n  // ===== PUBLIC METHODS =====\n\n  /** Expand the left panel. */\n  open(): void {\n    this.animate.set(true);\n    this.collapsed.set(false);\n  }\n\n  /** Collapse the left panel. */\n  close(): void {\n    this.animate.set(true);\n    this.collapsed.set(true);\n  }\n\n  /** Toggle the left panel between expanded and collapsed. */\n  toggle(): void {\n    if (this.collapsed()) {\n      this.open();\n    } else {\n      this.close();\n    }\n  }\n\n  /** Dismiss the left panel overlay on narrow viewports (alias for `close`). */\n  dismiss(): void {\n    this.close();\n  }\n}\n","@if (showOverlay()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div class=\"fk-content-split__overlay\" (click)=\"dismiss()\"></div>\n}\n\n<div\n  class=\"fk-content-split__left\"\n  [class.fk-content-split__left--open]=\"!collapsed()\"\n>\n  <div class=\"fk-content-split__left-content\">\n    <ng-content select=\"[contentSplitLeft]\" />\n  </div>\n</div>\n\n<div class=\"fk-content-split__rail\">\n  <button\n    class=\"fk-content-split__rail-toggle\"\n    type=\"button\"\n    [attr.aria-label]=\"collapsed() ? 'Open panel' : 'Close panel'\"\n    (click)=\"toggle()\"\n  >\n    <span\n      class=\"fk-content-split__rail-toggle-icon\"\n      [class.fk-content-split__rail-toggle-icon--open]=\"!collapsed()\"\n      aria-hidden=\"true\"\n    >\n      <span class=\"fk-content-split__rail-toggle-projected\">\n        <ng-content select=\"[contentSplitToggleIcon]\" />\n      </span>\n      <svg\n        class=\"fk-content-split__rail-toggle-fallback\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"18\"\n        height=\"18\"\n        viewBox=\"0 0 18 18\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <path d=\"M15.25 9H2.75\" />\n        <path d=\"M11 4.75L15.25 9L11 13.25\" />\n      </svg>\n    </span>\n  </button>\n</div>\n\n<div class=\"fk-content-split__right\">\n  <ng-content select=\"[contentSplitRight]\" />\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/frame-kit-ui-ng-services-overlay-orchestrator.mjs

@@ -0,0 +1,133 @@
+import * as i0 from '@angular/core';
+import { signal, computed, Injectable } from '@angular/core';
+
+let nextOverlayId = 0;
+/**
+ * Centralized overlay orchestrator.
+ *
+ * Tracks all open overlays (dialogs, drawers, popovers, navigation, tooltips)
+ * in a priority-based stack. When a new overlay opens:
+ *
+ * - All overlays with LOWER priority are closed automatically.
+ * - Overlays with EQUAL or HIGHER priority are left open.
+ *
+ * This prevents UI conflicts like drawers staying open behind dialogs,
+ * or kebab menus persisting when a modal pops up.
+ *
+ * @example
+ * ```ts
+ * const id = orchestrator.register({
+ *   priority: OVERLAY_PRIORITY.DRAWER,
+ *   type: 'drawer',
+ *   close: () => drawerRef.close(),
+ * });
+ *
+ * // Later, when the overlay closes:
+ * orchestrator.unregister(id);
+ * ```
+ */
+class OverlayOrchestrator {
+    entries = signal([], ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
+    /** Whether any overlay is currently open. */
+    hasActiveOverlay = computed(() => this.entries().length > 0, ...(ngDevMode ? [{ debugName: "hasActiveOverlay" }] : /* istanbul ignore next */ []));
+    /** The topmost (highest priority) overlay. */
+    topOverlay = computed(() => {
+        const all = this.entries();
+        if (all.length === 0) {
+            return null;
+        }
+        return all.reduce((top, entry) => entry.priority >= top.priority ? entry : top);
+    }, ...(ngDevMode ? [{ debugName: "topOverlay" }] : /* istanbul ignore next */ []));
+    /** Current number of active overlays. */
+    count = computed(() => this.entries().length, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    /**
+     * Register an overlay and close all overlays with lower priority.
+     *
+     * @returns The unique overlay ID — pass this to `unregister()` when closing.
+     */
+    register(entry) {
+        const id = `overlay-${nextOverlayId++}`;
+        // Close all overlays with strictly lower priority
+        const current = this.entries();
+        const toClose = current.filter((e) => e.priority < entry.priority);
+        for (const overlay of toClose) {
+            overlay.close();
+        }
+        // Remove closed overlays and add the new one
+        const remaining = current.filter((e) => e.priority >= entry.priority);
+        this.entries.set([...remaining, { ...entry, id }]);
+        return id;
+    }
+    /**
+     * Unregister an overlay by ID. Call this when the overlay closes.
+     */
+    unregister(id) {
+        this.entries.update((entries) => entries.filter((e) => e.id !== id));
+    }
+    /**
+     * Check if an overlay with the given priority or higher is currently open.
+     * Useful for guards that want to prevent opening lower-priority overlays.
+     */
+    hasOverlayAtOrAbove(priority) {
+        return this.entries().some((e) => e.priority >= priority);
+    }
+    /**
+     * Check if any overlay of a specific type is open.
+     */
+    hasOverlayOfType(type) {
+        return this.entries().some((e) => e.type === type);
+    }
+    /**
+     * Close all overlays. Closes from lowest to highest priority.
+     */
+    closeAll() {
+        const sorted = [...this.entries()].sort((a, b) => a.priority - b.priority);
+        for (const entry of sorted) {
+            entry.close();
+        }
+        this.entries.set([]);
+    }
+    /**
+     * Close all overlays at or below the given priority.
+     */
+    closeAtOrBelow(priority) {
+        const current = this.entries();
+        const toClose = current.filter((e) => e.priority <= priority);
+        for (const overlay of toClose) {
+            overlay.close();
+        }
+        this.entries.update((entries) => entries.filter((e) => e.priority > priority));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OverlayOrchestrator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OverlayOrchestrator, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OverlayOrchestrator, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Default priority levels for common overlay types.
+ * Higher number = higher priority = stays open when lower-priority overlays open.
+ *
+ * Consumers can use any number — these are conventions, not constraints.
+ */
+const OVERLAY_PRIORITY = {
+    /** Tooltips, inline popovers */
+    TOOLTIP: 0,
+    /** Dropdown menus, kebab menus, popovers */
+    POPOVER: 10,
+    /** Side panels, detail drawers */
+    DRAWER: 20,
+    /** Modal dialogs, confirmations */
+    DIALOG: 30,
+    /** App-level navigation (sidebar, mobile nav) */
+    NAVIGATION: 40,
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { OVERLAY_PRIORITY, OverlayOrchestrator };
+//# sourceMappingURL=frame-kit-ui-ng-services-overlay-orchestrator.mjs.map