@foliokit/cms-ui 0.0.0 → 0.4.2

package/esm2022/index.js

@@ -1,2 +1,4 @@
-export * from './lib/cms-ui/cms-ui';
+export * from './lib/app-shell/app-shell.component';
+export * from './lib/theme.service';
+export * from './lib/shell-config.token';
 //# sourceMappingURL=index.js.map

package/esm2022/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/cms-ui/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './lib/cms-ui/cms-ui';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/cms-ui/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './lib/app-shell/app-shell.component';\nexport * from './lib/theme.service';\nexport * from './lib/shell-config.token';\n"]}

package/esm2022/lib/app-shell/app-shell.component.js

@@ -0,0 +1,52 @@
+import { ChangeDetectionStrategy, Component, inject, signal, } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { SHELL_CONFIG } from '../shell-config.token';
+import { ThemeService } from '../theme.service';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/material/sidenav";
+import * as i2 from "@angular/material/toolbar";
+import * as i3 from "@angular/material/icon";
+import * as i4 from "@angular/material/button";
+export class AppShellComponent {
+    config = inject(SHELL_CONFIG);
+    theme = inject(ThemeService);
+    isMobile = signal(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
+    sidenavOpen = signal(false, ...(ngDevMode ? [{ debugName: "sidenavOpen" }] : /* istanbul ignore next */ []));
+    breakpointObserver = inject(BreakpointObserver);
+    bpSub;
+    ngOnInit() {
+        this.bpSub = this.breakpointObserver
+            .observe([Breakpoints.XSmall, Breakpoints.Small])
+            .subscribe((state) => {
+            const mobile = state.matches;
+            this.isMobile.set(mobile);
+            this.sidenavOpen.set(!mobile);
+        });
+        this.theme.apply();
+    }
+    ngOnDestroy() {
+        this.bpSub?.unsubscribe();
+    }
+    toggleSidenav() {
+        this.sidenavOpen.update((open) => !open);
+    }
+    toggleTheme() {
+        this.theme.toggle();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AppShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: AppShellComponent, isStandalone: true, selector: "folio-app-shell", ngImport: i0, template: "<mat-sidenav-container class=\"shell-container\">\n  <mat-sidenav\n    class=\"shell-sidenav\"\n    [mode]=\"isMobile() ? 'over' : 'side'\"\n    [opened]=\"sidenavOpen()\"\n    (openedChange)=\"sidenavOpen.set($event)\"\n  >\n    <ng-content select=\"[shellNav]\" />\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"shell-content\">\n    <mat-toolbar class=\"shell-toolbar\">\n      @if (isMobile()) {\n        <button mat-icon-button aria-label=\"Toggle navigation\" (click)=\"toggleSidenav()\">\n          <mat-icon>menu</mat-icon>\n        </button>\n      }\n\n      @if (config.logoUrl) {\n        <img [src]=\"config.logoUrl\" [alt]=\"config.appName\" class=\"shell-logo\" />\n      }\n      <span class=\"shell-app-name\">{{ config.appName }}</span>\n\n      <span class=\"flex-1\"></span>\n\n      <button\n        mat-icon-button\n        [attr.aria-label]=\"theme.scheme() === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'\"\n        (click)=\"toggleTheme()\"\n      >\n        <mat-icon>{{ theme.scheme() === 'dark' ? 'light_mode' : 'dark_mode' }}</mat-icon>\n      </button>\n\n      <ng-content select=\"[shellHeaderActions]\" />\n\n      @if (config.showAuth) {\n        <ng-content select=\"[shellAuthSlot]\" />\n      }\n    </mat-toolbar>\n\n    <main class=\"shell-main\">\n      <ng-content />\n    </main>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:block;height:100%}.shell-container{height:100%;background-color:var(--mat-sys-surface)}.shell-sidenav{width:260px;border-right:1px solid var(--mat-sys-outline-variant);background-color:var(--mat-sys-surface-container-low)}.shell-toolbar{position:sticky;top:0;z-index:100;background-color:var(--mat-sys-surface-container);border-bottom:1px solid var(--mat-sys-outline-variant);gap:4px}.shell-logo{height:32px;width:auto;margin-right:8px}.shell-app-name{font-size:1.125rem;font-weight:600;color:var(--mat-sys-on-surface);white-space:nowrap}.shell-content{display:flex;flex-direction:column;background-color:var(--mat-sys-surface)}.shell-main{flex:1;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AppShellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'folio-app-shell', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatSidenavModule,
+                        MatToolbarModule,
+                        MatIconModule,
+                        MatButtonModule,
+                    ], template: "<mat-sidenav-container class=\"shell-container\">\n  <mat-sidenav\n    class=\"shell-sidenav\"\n    [mode]=\"isMobile() ? 'over' : 'side'\"\n    [opened]=\"sidenavOpen()\"\n    (openedChange)=\"sidenavOpen.set($event)\"\n  >\n    <ng-content select=\"[shellNav]\" />\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"shell-content\">\n    <mat-toolbar class=\"shell-toolbar\">\n      @if (isMobile()) {\n        <button mat-icon-button aria-label=\"Toggle navigation\" (click)=\"toggleSidenav()\">\n          <mat-icon>menu</mat-icon>\n        </button>\n      }\n\n      @if (config.logoUrl) {\n        <img [src]=\"config.logoUrl\" [alt]=\"config.appName\" class=\"shell-logo\" />\n      }\n      <span class=\"shell-app-name\">{{ config.appName }}</span>\n\n      <span class=\"flex-1\"></span>\n\n      <button\n        mat-icon-button\n        [attr.aria-label]=\"theme.scheme() === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'\"\n        (click)=\"toggleTheme()\"\n      >\n        <mat-icon>{{ theme.scheme() === 'dark' ? 'light_mode' : 'dark_mode' }}</mat-icon>\n      </button>\n\n      <ng-content select=\"[shellHeaderActions]\" />\n\n      @if (config.showAuth) {\n        <ng-content select=\"[shellAuthSlot]\" />\n      }\n    </mat-toolbar>\n\n    <main class=\"shell-main\">\n      <ng-content />\n    </main>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:block;height:100%}.shell-container{height:100%;background-color:var(--mat-sys-surface)}.shell-sidenav{width:260px;border-right:1px solid var(--mat-sys-outline-variant);background-color:var(--mat-sys-surface-container-low)}.shell-toolbar{position:sticky;top:0;z-index:100;background-color:var(--mat-sys-surface-container);border-bottom:1px solid var(--mat-sys-outline-variant);gap:4px}.shell-logo{height:32px;width:auto;margin-right:8px}.shell-app-name{font-size:1.125rem;font-weight:600;color:var(--mat-sys-on-surface);white-space:nowrap}.shell-content{display:flex;flex-direction:column;background-color:var(--mat-sys-surface)}.shell-main{flex:1;overflow-y:auto}\n"] }]
+        }] });
+//# sourceMappingURL=app-shell.component.js.map

package/esm2022/lib/app-shell/app-shell.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell.component.js","sourceRoot":"","sources":["../../../../../../libs/cms-ui/src/lib/app-shell/app-shell.component.ts","../../../../../../libs/cms-ui/src/lib/app-shell/app-shell.component.html"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,MAAM,EAGN,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;;;;;;AAehD,MAAM,OAAO,iBAAiB;IACT,MAAM,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAC9B,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAE7B,QAAQ,GAAG,MAAM,CAAC,KAAK,+EAAC,CAAC;IACzB,WAAW,GAAG,MAAM,CAAC,KAAK,kFAAC,CAAC;IAE9B,kBAAkB,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAAC;IACzD,KAAK,CAAgB;IAE7B,QAAQ;QACN,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,kBAAkB;aACjC,OAAO,CAAC,CAAC,WAAW,CAAC,MAAM,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;aAChD,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;YACnB,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YAC1B,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC;QAChC,CAAC,CAAC,CAAC;QACL,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC;IAED,WAAW;QACT,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC;IAC5B,CAAC;IAES,aAAa;QACrB,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAC3C,CAAC;IAES,WAAW;QACnB,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;IACtB,CAAC;uGA/BU,iBAAiB;2FAAjB,iBAAiB,2EC9B9B,k3CA6CA,guBDrBI,gBAAgB,0YAChB,gBAAgB,gJAChB,aAAa,mLACb,eAAe;;2FAGN,iBAAiB;kBAb7B,SAAS;+BACE,iBAAiB,mBAGV,uBAAuB,CAAC,MAAM,cACnC,IAAI,WACP;wBACP,gBAAgB;wBAChB,gBAAgB;wBAChB,aAAa;wBACb,eAAe;qBAChB","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  inject,\n  OnDestroy,\n  OnInit,\n  signal,\n} from '@angular/core';\nimport { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';\nimport { Subscription } from 'rxjs';\nimport { MatSidenavModule } from '@angular/material/sidenav';\nimport { MatToolbarModule } from '@angular/material/toolbar';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { SHELL_CONFIG } from '../shell-config.token';\nimport { ThemeService } from '../theme.service';\n\n@Component({\n  selector: 'folio-app-shell',\n  templateUrl: './app-shell.component.html',\n  styleUrl: './app-shell.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [\n    MatSidenavModule,\n    MatToolbarModule,\n    MatIconModule,\n    MatButtonModule,\n  ],\n})\nexport class AppShellComponent implements OnInit, OnDestroy {\n  protected readonly config = inject(SHELL_CONFIG);\n  protected readonly theme = inject(ThemeService);\n\n  protected readonly isMobile = signal(false);\n  protected readonly sidenavOpen = signal(false);\n\n  private readonly breakpointObserver = inject(BreakpointObserver);\n  private bpSub?: Subscription;\n\n  ngOnInit(): void {\n    this.bpSub = this.breakpointObserver\n      .observe([Breakpoints.XSmall, Breakpoints.Small])\n      .subscribe((state) => {\n        const mobile = state.matches;\n        this.isMobile.set(mobile);\n        this.sidenavOpen.set(!mobile);\n      });\n    this.theme.apply();\n  }\n\n  ngOnDestroy(): void {\n    this.bpSub?.unsubscribe();\n  }\n\n  protected toggleSidenav(): void {\n    this.sidenavOpen.update((open) => !open);\n  }\n\n  protected toggleTheme(): void {\n    this.theme.toggle();\n  }\n}\n","<mat-sidenav-container class=\"shell-container\">\n  <mat-sidenav\n    class=\"shell-sidenav\"\n    [mode]=\"isMobile() ? 'over' : 'side'\"\n    [opened]=\"sidenavOpen()\"\n    (openedChange)=\"sidenavOpen.set($event)\"\n  >\n    <ng-content select=\"[shellNav]\" />\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"shell-content\">\n    <mat-toolbar class=\"shell-toolbar\">\n      @if (isMobile()) {\n        <button mat-icon-button aria-label=\"Toggle navigation\" (click)=\"toggleSidenav()\">\n          <mat-icon>menu</mat-icon>\n        </button>\n      }\n\n      @if (config.logoUrl) {\n        <img [src]=\"config.logoUrl\" [alt]=\"config.appName\" class=\"shell-logo\" />\n      }\n      <span class=\"shell-app-name\">{{ config.appName }}</span>\n\n      <span class=\"flex-1\"></span>\n\n      <button\n        mat-icon-button\n        [attr.aria-label]=\"theme.scheme() === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'\"\n        (click)=\"toggleTheme()\"\n      >\n        <mat-icon>{{ theme.scheme() === 'dark' ? 'light_mode' : 'dark_mode' }}</mat-icon>\n      </button>\n\n      <ng-content select=\"[shellHeaderActions]\" />\n\n      @if (config.showAuth) {\n        <ng-content select=\"[shellAuthSlot]\" />\n      }\n    </mat-toolbar>\n\n    <main class=\"shell-main\">\n      <ng-content />\n    </main>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n"]}

package/esm2022/lib/shell-config.token.js

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+export const SHELL_CONFIG = new InjectionToken('SHELL_CONFIG');
+//# sourceMappingURL=shell-config.token.js.map

package/esm2022/lib/shell-config.token.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell-config.token.js","sourceRoot":"","sources":["../../../../../libs/cms-ui/src/lib/shell-config.token.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAU/C,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,cAAc,CAAc,cAAc,CAAC,CAAC","sourcesContent":["import { InjectionToken } from '@angular/core';\nimport type { NavItem } from '@foliokit/cms-core';\n\nexport interface ShellConfig {\n  appName: string;\n  logoUrl?: string;\n  showAuth?: boolean;\n  nav?: NavItem[];\n}\n\nexport const SHELL_CONFIG = new InjectionToken<ShellConfig>('SHELL_CONFIG');\n"]}

package/esm2022/lib/theme.service.js

@@ -0,0 +1,45 @@
+import { inject, Injectable, PLATFORM_ID, signal } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import * as i0 from "@angular/core";
+const STORAGE_KEY = 'folio-theme';
+export class ThemeService {
+    platformId = inject(PLATFORM_ID);
+    scheme = signal(this.resolveInitialScheme(), ...(ngDevMode ? [{ debugName: "scheme" }] : /* istanbul ignore next */ []));
+    toggle() {
+        this.scheme.update((s) => (s === 'light' ? 'dark' : 'light'));
+        this.apply();
+    }
+    apply() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        const current = this.scheme();
+        document.documentElement.setAttribute('data-theme', current);
+        try {
+            localStorage.setItem(STORAGE_KEY, current);
+        }
+        catch {
+            // localStorage may be unavailable (private browsing, etc.)
+        }
+    }
+    resolveInitialScheme() {
+        if (!isPlatformBrowser(this.platformId))
+            return 'light';
+        try {
+            const stored = localStorage.getItem(STORAGE_KEY);
+            if (stored === 'light' || stored === 'dark')
+                return stored;
+        }
+        catch {
+            // ignore
+        }
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        return prefersDark ? 'dark' : 'light';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+//# sourceMappingURL=theme.service.js.map

package/esm2022/lib/theme.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.service.js","sourceRoot":"","sources":["../../../../../libs/cms-ui/src/lib/theme.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;;AAIpD,MAAM,WAAW,GAAG,aAAa,CAAC;AAGlC,MAAM,OAAO,YAAY;IACN,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;IAEzC,MAAM,GAAG,MAAM,CAAc,IAAI,CAAC,oBAAoB,EAAE,6EAAC,CAAC;IAEnE,MAAM;QACJ,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;QAC9D,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAED,KAAK;QACH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC;YAAE,OAAO;QAChD,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC9B,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;QAC7D,IAAI,CAAC;YACH,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;QAC7C,CAAC;QAAC,MAAM,CAAC;YACP,2DAA2D;QAC7D,CAAC;IACH,CAAC;IAEO,oBAAoB;QAC1B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC;YAAE,OAAO,OAAO,CAAC;QAExD,IAAI,CAAC;YACH,MAAM,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,WAAW,CAAuB,CAAC;YACvE,IAAI,MAAM,KAAK,OAAO,IAAI,MAAM,KAAK,MAAM;gBAAE,OAAO,MAAM,CAAC;QAC7D,CAAC;QAAC,MAAM,CAAC;YACP,SAAS;QACX,CAAC;QAED,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,CAAC;QAC9E,OAAO,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IACxC,CAAC;uGAjCU,YAAY;2GAAZ,YAAY,cADC,MAAM;;2FACnB,YAAY;kBADxB,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE","sourcesContent":["import { inject, Injectable, PLATFORM_ID, signal } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\n\nexport type ColorScheme = 'light' | 'dark';\n\nconst STORAGE_KEY = 'folio-theme';\n\n@Injectable({ providedIn: 'root' })\nexport class ThemeService {\n  private readonly platformId = inject(PLATFORM_ID);\n\n  readonly scheme = signal<ColorScheme>(this.resolveInitialScheme());\n\n  toggle(): void {\n    this.scheme.update((s) => (s === 'light' ? 'dark' : 'light'));\n    this.apply();\n  }\n\n  apply(): void {\n    if (!isPlatformBrowser(this.platformId)) return;\n    const current = this.scheme();\n    document.documentElement.setAttribute('data-theme', current);\n    try {\n      localStorage.setItem(STORAGE_KEY, current);\n    } catch {\n      // localStorage may be unavailable (private browsing, etc.)\n    }\n  }\n\n  private resolveInitialScheme(): ColorScheme {\n    if (!isPlatformBrowser(this.platformId)) return 'light';\n\n    try {\n      const stored = localStorage.getItem(STORAGE_KEY) as ColorScheme | null;\n      if (stored === 'light' || stored === 'dark') return stored;\n    } catch {\n      // ignore\n    }\n\n    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n    return prefersDark ? 'dark' : 'light';\n  }\n}\n"]}

package/index.d.ts

@@ -1 +1,3 @@
-export * from './lib/cms-ui/cms-ui';
+export * from './lib/app-shell/app-shell.component';
+export * from './lib/theme.service';
+export * from './lib/shell-config.token';

package/lib/app-shell/app-shell.component.d.ts

@@ -0,0 +1,17 @@
+import { OnDestroy, OnInit } from '@angular/core';
+import { ThemeService } from '../theme.service';
+import * as i0 from "@angular/core";
+export declare class AppShellComponent implements OnInit, OnDestroy {
+    protected readonly config: import("@foliokit/cms-ui").ShellConfig;
+    protected readonly theme: ThemeService;
+    protected readonly isMobile: import("@angular/core").WritableSignal<boolean>;
+    protected readonly sidenavOpen: import("@angular/core").WritableSignal<boolean>;
+    private readonly breakpointObserver;
+    private bpSub?;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    protected toggleSidenav(): void;
+    protected toggleTheme(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AppShellComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AppShellComponent, "folio-app-shell", never, {}, {}, never, ["[shellNav]", "[shellHeaderActions]", "[shellAuthSlot]", "*"], true, never>;
+}

package/lib/shell-config.token.d.ts

@@ -0,0 +1,9 @@
+import { InjectionToken } from '@angular/core';
+import type { NavItem } from '@foliokit/cms-core';
+export interface ShellConfig {
+    appName: string;
+    logoUrl?: string;
+    showAuth?: boolean;
+    nav?: NavItem[];
+}
+export declare const SHELL_CONFIG: InjectionToken<ShellConfig>;

package/lib/theme.service.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+export type ColorScheme = 'light' | 'dark';
+export declare class ThemeService {
+    private readonly platformId;
+    readonly scheme: import("@angular/core").WritableSignal<ColorScheme>;
+    toggle(): void;
+    apply(): void;
+    private resolveInitialScheme;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ThemeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ThemeService>;
+}

package/package.json

@@ -1,12 +1,33 @@
 {
   "name": "@foliokit/cms-ui",
-  "version": "0.0.0",
+  "version": "0.4.2",
+  "description": "Angular shell layout components and theme service for FolioKit CMS",
+  "keywords": [
+    "angular",
+    "cms",
+    "foliokit",
+    "app-shell",
+    "material"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dougwilliamson/foliokit"
+  },
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
-    "@angular/common": "^21.1.0",
-    "@angular/core": "^21.1.0"
+    "@angular/cdk": "^21.2.2",
+    "@angular/common": "^21.2.4",
+    "@angular/core": "^21.2.4",
+    "@angular/material": "^21.2.2",
+    "@foliokit/cms-core": "^0.4.2"
+  },
+  "peerDependenciesMeta": {
+    "@foliokit/cms-core": {
+      "optional": true
+    }
   },
   "sideEffects": false,
   "module": "esm2022/foliokit-cms-ui.js",

package/esm2022/lib/cms-ui/cms-ui.js

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-import * as i0 from "@angular/core";
-export class CmsUi {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CmsUi, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.6", type: CmsUi, isStandalone: true, selector: "lib-cms-ui", ngImport: i0, template: "<p>CmsUi works!</p>\n", styles: [""] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CmsUi, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-cms-ui', imports: [], template: "<p>CmsUi works!</p>\n" }]
-        }] });
-//# sourceMappingURL=cms-ui.js.map

package/esm2022/lib/cms-ui/cms-ui.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"cms-ui.js","sourceRoot":"","sources":["../../../../../../libs/cms-ui/src/lib/cms-ui/cms-ui.ts","../../../../../../libs/cms-ui/src/lib/cms-ui/cms-ui.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;AAQ1C,MAAM,OAAO,KAAK;uGAAL,KAAK;2FAAL,KAAK,sECRlB,uBACA;;2FDOa,KAAK;kBANjB,SAAS;+BACE,YAAY,WACb,EAAE","sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n  selector: 'lib-cms-ui',\n  imports: [],\n  templateUrl: './cms-ui.html',\n  styleUrl: './cms-ui.scss',\n})\nexport class CmsUi {}\n","<p>CmsUi works!</p>\n"]}

package/lib/cms-ui/cms-ui.d.ts

@@ -1,5 +0,0 @@
-import * as i0 from "@angular/core";
-export declare class CmsUi {
-    static ɵfac: i0.ɵɵFactoryDeclaration<CmsUi, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CmsUi, "lib-cms-ui", never, {}, {}, never, never, true, never>;
-}