@foliokit/cms-ui 0.0.0 → 1.0.0

package/esm2022/index.js

@@ -1,2 +1,7 @@
-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';
+export * from './lib/about-page/about-page.component';
+export * from './lib/links-page/links-page.component';
+export * from './lib/route-data';
 //# 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;AACzC,cAAc,uCAAuC,CAAC;AACtD,cAAc,uCAAuC,CAAC;AACtD,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './lib/app-shell/app-shell.component';\nexport * from './lib/theme.service';\nexport * from './lib/shell-config.token';\nexport * from './lib/about-page/about-page.component';\nexport * from './lib/links-page/links-page.component';\nexport * from './lib/route-data';\n"]}

package/esm2022/lib/about-page/about-page.component.js

@@ -0,0 +1,81 @@
+import { ChangeDetectionStrategy, Component, effect, inject, PLATFORM_ID, } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { ActivatedRoute } from '@angular/router';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { map } from 'rxjs';
+import { Meta, Title } from '@angular/platform-browser';
+import { MarkdownModule } from 'ngx-markdown';
+import * as i0 from "@angular/core";
+import * as i1 from "ngx-markdown";
+export class AboutPageComponent {
+    route = inject(ActivatedRoute);
+    meta = inject(Meta);
+    title = inject(Title);
+    platformId = inject(PLATFORM_ID);
+    page = toSignal(this.route.data.pipe(map((data) => data['page'] ?? null)), { initialValue: this.route.snapshot.data['page'] ?? null });
+    constructor() {
+        effect(() => {
+            const p = this.page();
+            if (!p)
+                return;
+            if (!isPlatformBrowser(this.platformId))
+                return;
+            this.title.setTitle(p.seo?.title ?? p.title);
+            if (p.seo?.description) {
+                this.meta.updateTag({ name: 'description', content: p.seo.description });
+            }
+            if (p.seo?.ogImage) {
+                this.meta.updateTag({ property: 'og:image', content: p.seo.ogImage });
+            }
+            if (p.seo?.noIndex) {
+                this.meta.updateTag({ name: 'robots', content: 'noindex' });
+            }
+            else {
+                this.meta.removeTag('name="robots"');
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AboutPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: AboutPageComponent, isStandalone: true, selector: "cms-about-page", ngImport: i0, template: `
+    @if (page()) {
+      <article class="max-w-3xl mx-auto px-4 py-10">
+        @if (page()!.heroImageUrl) {
+          <img
+            class="w-full rounded-xl object-cover mb-8 max-h-80"
+            [src]="page()!.heroImageUrl"
+            [alt]="page()!.heroImageAlt || page()!.title"
+          />
+        }
+        <markdown [data]="page()!.body" class="folio-prose" />
+      </article>
+    } @else {
+      <p class="p-10 text-center opacity-50">No content available.</p>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MarkdownModule }, { kind: "component", type: i1.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AboutPageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'cms-about-page',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [MarkdownModule],
+                    template: `
+    @if (page()) {
+      <article class="max-w-3xl mx-auto px-4 py-10">
+        @if (page()!.heroImageUrl) {
+          <img
+            class="w-full rounded-xl object-cover mb-8 max-h-80"
+            [src]="page()!.heroImageUrl"
+            [alt]="page()!.heroImageAlt || page()!.title"
+          />
+        }
+        <markdown [data]="page()!.body" class="folio-prose" />
+      </article>
+    } @else {
+      <p class="p-10 text-center opacity-50">No content available.</p>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [] });
+//# sourceMappingURL=about-page.component.js.map

package/esm2022/lib/about-page/about-page.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"about-page.component.js","sourceRoot":"","sources":["../../../../../../libs/cms-ui/src/lib/about-page/about-page.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EAET,MAAM,EACN,MAAM,EACN,WAAW,GACZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,GAAG,EAAE,MAAM,MAAM,CAAC;AAC3B,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;;;AAyB9C,MAAM,OAAO,kBAAkB;IACZ,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAC/B,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACpB,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACtB,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;IAEzC,IAAI,GAAG,QAAQ,CACtB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAE,IAAI,CAAC,MAAM,CAAe,IAAI,IAAI,CAAC,CAAC,EACxE,EAAE,YAAY,EAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAe,IAAI,IAAI,EAAE,CAC1E,CAAC;IAEF;QACE,MAAM,CAAC,GAAG,EAAE;YACV,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;YACtB,IAAI,CAAC,CAAC;gBAAE,OAAO;YACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC;gBAAE,OAAO;YAChD,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC;YAC7C,IAAI,CAAC,CAAC,GAAG,EAAE,WAAW,EAAE,CAAC;gBACvB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC;YAC3E,CAAC;YACD,IAAI,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,CAAC;gBACnB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC;YACxE,CAAC;YACD,IAAI,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,CAAC;gBACnB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC;YAC9D,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;YACvC,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;uGA7BU,kBAAkB;2FAAlB,kBAAkB,0EAjBnB;;;;;;;;;;;;;;;GAeT,2DAhBS,cAAc;;2FAkBb,kBAAkB;kBAtB9B,SAAS;mBAAC;oBACT,QAAQ,EAAE,gBAAgB;oBAC1B,UAAU,EAAE,IAAI;oBAChB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,OAAO,EAAE,CAAC,cAAc,CAAC;oBACzB,QAAQ,EAAE;;;;;;;;;;;;;;;GAeT;iBACF","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  inject,\n  PLATFORM_ID,\n} from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { ActivatedRoute } from '@angular/router';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { map } from 'rxjs';\nimport { Meta, Title } from '@angular/platform-browser';\nimport { MarkdownModule } from 'ngx-markdown';\nimport type { AboutPage } from '@foliokit/cms-core';\n\n@Component({\n  selector: 'cms-about-page',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [MarkdownModule],\n  template: `\n    @if (page()) {\n      <article class=\"max-w-3xl mx-auto px-4 py-10\">\n        @if (page()!.heroImageUrl) {\n          <img\n            class=\"w-full rounded-xl object-cover mb-8 max-h-80\"\n            [src]=\"page()!.heroImageUrl\"\n            [alt]=\"page()!.heroImageAlt || page()!.title\"\n          />\n        }\n        <markdown [data]=\"page()!.body\" class=\"folio-prose\" />\n      </article>\n    } @else {\n      <p class=\"p-10 text-center opacity-50\">No content available.</p>\n    }\n  `,\n})\nexport class AboutPageComponent {\n  private readonly route = inject(ActivatedRoute);\n  private readonly meta = inject(Meta);\n  private readonly title = inject(Title);\n  private readonly platformId = inject(PLATFORM_ID);\n\n  readonly page = toSignal(\n    this.route.data.pipe(map((data) => (data['page'] as AboutPage) ?? null)),\n    { initialValue: (this.route.snapshot.data['page'] as AboutPage) ?? null },\n  );\n\n  constructor() {\n    effect(() => {\n      const p = this.page();\n      if (!p) return;\n      if (!isPlatformBrowser(this.platformId)) return;\n      this.title.setTitle(p.seo?.title ?? p.title);\n      if (p.seo?.description) {\n        this.meta.updateTag({ name: 'description', content: p.seo.description });\n      }\n      if (p.seo?.ogImage) {\n        this.meta.updateTag({ property: 'og:image', content: p.seo.ogImage });\n      }\n      if (p.seo?.noIndex) {\n        this.meta.updateTag({ name: 'robots', content: 'noindex' });\n      } else {\n        this.meta.removeTag('name=\"robots\"');\n      }\n    });\n  }\n}\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/links-page/links-page.component.js

@@ -0,0 +1,143 @@
+import { ChangeDetectionStrategy, Component, computed, effect, inject, PLATFORM_ID, } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { ActivatedRoute } from '@angular/router';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { map } from 'rxjs';
+import { Meta, Title } from '@angular/platform-browser';
+import { MatButtonModule } from '@angular/material/button';
+import * as i0 from "@angular/core";
+const PLATFORM_ICONS = {
+    youtube: 'fa-brands fa-youtube',
+    twitch: 'fa-brands fa-twitch',
+    twitter: 'fa-brands fa-x-twitter',
+    bluesky: 'fa-brands fa-bluesky',
+    github: 'fa-brands fa-github',
+    linkedin: 'fa-brands fa-linkedin-in',
+    instagram: 'fa-brands fa-instagram',
+    tiktok: 'fa-brands fa-tiktok',
+    facebook: 'fa-brands fa-facebook',
+    email: 'fa-solid fa-envelope',
+    website: 'fa-solid fa-globe',
+};
+export class LinksPageComponent {
+    route = inject(ActivatedRoute);
+    meta = inject(Meta);
+    title = inject(Title);
+    platformId = inject(PLATFORM_ID);
+    page = toSignal(this.route.data.pipe(map((data) => data['page'] ?? null)), { initialValue: this.route.snapshot.data['page'] ?? null });
+    sortedLinks = computed(() => [...(this.page()?.links ?? [])].sort((a, b) => a.order - b.order), ...(ngDevMode ? [{ debugName: "sortedLinks" }] : /* istanbul ignore next */ []));
+    getIcon(link) {
+        if (link.icon)
+            return link.icon;
+        if (link.platform)
+            return PLATFORM_ICONS[link.platform] ?? '';
+        return '';
+    }
+    constructor() {
+        effect(() => {
+            const p = this.page();
+            if (!p)
+                return;
+            if (!isPlatformBrowser(this.platformId))
+                return;
+            this.title.setTitle(p.seo?.title ?? p.title);
+            if (p.seo?.description) {
+                this.meta.updateTag({ name: 'description', content: p.seo.description });
+            }
+            if (p.seo?.ogImage) {
+                this.meta.updateTag({ property: 'og:image', content: p.seo.ogImage });
+            }
+            if (p.seo?.noIndex) {
+                this.meta.updateTag({ name: 'robots', content: 'noindex' });
+            }
+            else {
+                this.meta.removeTag('name="robots"');
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LinksPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: LinksPageComponent, isStandalone: true, selector: "cms-links-page", ngImport: i0, template: `
+    @if (page()) {
+      <div class="flex flex-col items-center max-w-md mx-auto px-4 py-12 gap-6">
+        @if (page()!.avatarUrl) {
+          <img
+            class="w-24 h-24 rounded-full object-cover shadow-md"
+            [src]="page()!.avatarUrl"
+            [alt]="page()!.avatarAlt || page()!.title"
+          />
+        }
+        @if (page()!.headline) {
+          <h1 class="text-2xl font-bold text-center">{{ page()!.headline }}</h1>
+        }
+        @if (page()!.bio) {
+          <p class="text-center opacity-70">{{ page()!.bio }}</p>
+        }
+        <nav class="flex flex-col w-full gap-3">
+          @for (link of sortedLinks(); track link.id) {
+            <a
+              [href]="link.url"
+              target="_blank"
+              rel="noopener noreferrer"
+              [class]="link.highlighted ? 'link-btn-featured' : 'link-btn'"
+              class="w-full flex items-center rounded-full px-5 !py-3 text-base font-medium transition-opacity no-underline"
+            >
+              <span class="w-6 flex-shrink-0 text-lg leading-none">
+                @if (getIcon(link)) {
+                  <i [class]="getIcon(link)"></i>
+                }
+              </span>
+              <span class="flex-1 text-center">{{ link.label }}</span>
+              <span class="w-6 flex-shrink-0"></span>
+            </a>
+          }
+        </nav>
+      </div>
+    } @else {
+      <p class="p-10 text-center opacity-50">No content available.</p>
+    }
+  `, isInline: true, styles: [".link-btn{background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary)}.link-btn-featured{background-color:var(--mat-sys-tertiary-container);color:var(--mat-sys-on-tertiary-container)}.link-btn:hover,.link-btn-featured:hover{opacity:.92}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LinksPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cms-links-page', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule], template: `
+    @if (page()) {
+      <div class="flex flex-col items-center max-w-md mx-auto px-4 py-12 gap-6">
+        @if (page()!.avatarUrl) {
+          <img
+            class="w-24 h-24 rounded-full object-cover shadow-md"
+            [src]="page()!.avatarUrl"
+            [alt]="page()!.avatarAlt || page()!.title"
+          />
+        }
+        @if (page()!.headline) {
+          <h1 class="text-2xl font-bold text-center">{{ page()!.headline }}</h1>
+        }
+        @if (page()!.bio) {
+          <p class="text-center opacity-70">{{ page()!.bio }}</p>
+        }
+        <nav class="flex flex-col w-full gap-3">
+          @for (link of sortedLinks(); track link.id) {
+            <a
+              [href]="link.url"
+              target="_blank"
+              rel="noopener noreferrer"
+              [class]="link.highlighted ? 'link-btn-featured' : 'link-btn'"
+              class="w-full flex items-center rounded-full px-5 !py-3 text-base font-medium transition-opacity no-underline"
+            >
+              <span class="w-6 flex-shrink-0 text-lg leading-none">
+                @if (getIcon(link)) {
+                  <i [class]="getIcon(link)"></i>
+                }
+              </span>
+              <span class="flex-1 text-center">{{ link.label }}</span>
+              <span class="w-6 flex-shrink-0"></span>
+            </a>
+          }
+        </nav>
+      </div>
+    } @else {
+      <p class="p-10 text-center opacity-50">No content available.</p>
+    }
+  `, styles: [".link-btn{background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary)}.link-btn-featured{background-color:var(--mat-sys-tertiary-container);color:var(--mat-sys-on-tertiary-container)}.link-btn:hover,.link-btn-featured:hover{opacity:.92}\n"] }]
+        }], ctorParameters: () => [] });
+//# sourceMappingURL=links-page.component.js.map

package/esm2022/lib/links-page/links-page.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"links-page.component.js","sourceRoot":"","sources":["../../../../../../libs/cms-ui/src/lib/links-page/links-page.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  inject,\n  PLATFORM_ID,\n} from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { ActivatedRoute } from '@angular/router';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { map } from 'rxjs';\nimport { Meta, Title } from '@angular/platform-browser';\nimport { MatButtonModule } from '@angular/material/button';\nimport type { LinksPage, LinksLink } from '@foliokit/cms-core';\nimport type { SocialPlatform } from '@foliokit/cms-core';\n\nconst PLATFORM_ICONS: Record<SocialPlatform, string> = {\n  youtube: 'fa-brands fa-youtube',\n  twitch: 'fa-brands fa-twitch',\n  twitter: 'fa-brands fa-x-twitter',\n  bluesky: 'fa-brands fa-bluesky',\n  github: 'fa-brands fa-github',\n  linkedin: 'fa-brands fa-linkedin-in',\n  instagram: 'fa-brands fa-instagram',\n  tiktok: 'fa-brands fa-tiktok',\n  facebook: 'fa-brands fa-facebook',\n  email: 'fa-solid fa-envelope',\n  website: 'fa-solid fa-globe',\n};\n\n@Component({\n  selector: 'cms-links-page',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [MatButtonModule],\n  styles: [`\n    .link-btn {\n      background-color: var(--mat-sys-primary);\n      color: var(--mat-sys-on-primary);\n    }\n    .link-btn-featured {\n      background-color: var(--mat-sys-tertiary-container);\n      color: var(--mat-sys-on-tertiary-container);\n    }\n    .link-btn:hover, .link-btn-featured:hover {\n      opacity: 0.92;\n    }\n  `],\n  template: `\n    @if (page()) {\n      <div class=\"flex flex-col items-center max-w-md mx-auto px-4 py-12 gap-6\">\n        @if (page()!.avatarUrl) {\n          <img\n            class=\"w-24 h-24 rounded-full object-cover shadow-md\"\n            [src]=\"page()!.avatarUrl\"\n            [alt]=\"page()!.avatarAlt || page()!.title\"\n          />\n        }\n        @if (page()!.headline) {\n          <h1 class=\"text-2xl font-bold text-center\">{{ page()!.headline }}</h1>\n        }\n        @if (page()!.bio) {\n          <p class=\"text-center opacity-70\">{{ page()!.bio }}</p>\n        }\n        <nav class=\"flex flex-col w-full gap-3\">\n          @for (link of sortedLinks(); track link.id) {\n            <a\n              [href]=\"link.url\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              [class]=\"link.highlighted ? 'link-btn-featured' : 'link-btn'\"\n              class=\"w-full flex items-center rounded-full px-5 !py-3 text-base font-medium transition-opacity no-underline\"\n            >\n              <span class=\"w-6 flex-shrink-0 text-lg leading-none\">\n                @if (getIcon(link)) {\n                  <i [class]=\"getIcon(link)\"></i>\n                }\n              </span>\n              <span class=\"flex-1 text-center\">{{ link.label }}</span>\n              <span class=\"w-6 flex-shrink-0\"></span>\n            </a>\n          }\n        </nav>\n      </div>\n    } @else {\n      <p class=\"p-10 text-center opacity-50\">No content available.</p>\n    }\n  `,\n})\nexport class LinksPageComponent {\n  private readonly route = inject(ActivatedRoute);\n  private readonly meta = inject(Meta);\n  private readonly title = inject(Title);\n  private readonly platformId = inject(PLATFORM_ID);\n\n  readonly page = toSignal(\n    this.route.data.pipe(map((data) => (data['page'] as LinksPage) ?? null)),\n    { initialValue: (this.route.snapshot.data['page'] as LinksPage) ?? null },\n  );\n\n  readonly sortedLinks = computed<LinksLink[]>(() =>\n    [...(this.page()?.links ?? [])].sort((a, b) => a.order - b.order),\n  );\n\n  getIcon(link: LinksLink): string {\n    if (link.icon) return link.icon;\n    if (link.platform) return PLATFORM_ICONS[link.platform] ?? '';\n    return '';\n  }\n\n  constructor() {\n    effect(() => {\n      const p = this.page();\n      if (!p) return;\n      if (!isPlatformBrowser(this.platformId)) return;\n      this.title.setTitle(p.seo?.title ?? p.title);\n      if (p.seo?.description) {\n        this.meta.updateTag({ name: 'description', content: p.seo.description });\n      }\n      if (p.seo?.ogImage) {\n        this.meta.updateTag({ property: 'og:image', content: p.seo.ogImage });\n      }\n      if (p.seo?.noIndex) {\n        this.meta.updateTag({ name: 'robots', content: 'noindex' });\n      } else {\n        this.meta.removeTag('name=\"robots\"');\n      }\n    });\n  }\n}\n"]}

package/esm2022/lib/route-data.js

@@ -0,0 +1,17 @@
+/**
+ * The route data key used by AboutPageComponent and LinksPageComponent
+ * to read their page from Angular Router resolved data.
+ *
+ * Use this constant in your route definition's `resolve` map so the key
+ * stays in sync with what the components expect:
+ *
+ * ```ts
+ * {
+ *   path: 'about',
+ *   component: AboutPageComponent,
+ *   resolve: { [CMS_ROUTE_DATA_KEY]: aboutPageResolver }
+ * }
+ * ```
+ */
+export const CMS_ROUTE_DATA_KEY = 'page';
+//# sourceMappingURL=route-data.js.map

package/esm2022/lib/route-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"route-data.js","sourceRoot":"","sources":["../../../../../libs/cms-ui/src/lib/route-data.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAe,CAAC","sourcesContent":["import type { AboutPage, LinksPage } from '@foliokit/cms-core';\n\n/**\n * The route data key used by AboutPageComponent and LinksPageComponent\n * to read their page from Angular Router resolved data.\n *\n * Use this constant in your route definition's `resolve` map so the key\n * stays in sync with what the components expect:\n *\n * ```ts\n * {\n *   path: 'about',\n *   component: AboutPageComponent,\n *   resolve: { [CMS_ROUTE_DATA_KEY]: aboutPageResolver }\n * }\n * ```\n */\nexport const CMS_ROUTE_DATA_KEY = 'page' as const;\n\n/**\n * Shape of the resolved route data expected by AboutPageComponent.\n * Use as the return type annotation on your resolver:\n *\n * ```ts\n * export const aboutPageResolver: ResolveFn<AboutPageRouteData[typeof CMS_ROUTE_DATA_KEY]> = ...\n * ```\n */\nexport interface AboutPageRouteData {\n  [CMS_ROUTE_DATA_KEY]: AboutPage | null;\n}\n\n/**\n * Shape of the resolved route data expected by LinksPageComponent.\n */\nexport interface LinksPageRouteData {\n  [CMS_ROUTE_DATA_KEY]: LinksPage | null;\n}\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,6 @@
-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';
+export * from './lib/about-page/about-page.component';
+export * from './lib/links-page/links-page.component';
+export * from './lib/route-data';

package/lib/about-page/about-page.component.d.ts

@@ -0,0 +1,12 @@
+import type { AboutPage } from '@foliokit/cms-core';
+import * as i0 from "@angular/core";
+export declare class AboutPageComponent {
+    private readonly route;
+    private readonly meta;
+    private readonly title;
+    private readonly platformId;
+    readonly page: import("@angular/core").Signal<AboutPage>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<AboutPageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AboutPageComponent, "cms-about-page", never, {}, {}, never, never, true, never>;
+}

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/links-page/links-page.component.d.ts

@@ -0,0 +1,14 @@
+import type { LinksPage, LinksLink } from '@foliokit/cms-core';
+import * as i0 from "@angular/core";
+export declare class LinksPageComponent {
+    private readonly route;
+    private readonly meta;
+    private readonly title;
+    private readonly platformId;
+    readonly page: import("@angular/core").Signal<LinksPage>;
+    readonly sortedLinks: import("@angular/core").Signal<LinksLink[]>;
+    getIcon(link: LinksLink): string;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<LinksPageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LinksPageComponent, "cms-links-page", never, {}, {}, never, never, true, never>;
+}

package/lib/route-data.d.ts

@@ -0,0 +1,34 @@
+import type { AboutPage, LinksPage } from '@foliokit/cms-core';
+/**
+ * The route data key used by AboutPageComponent and LinksPageComponent
+ * to read their page from Angular Router resolved data.
+ *
+ * Use this constant in your route definition's `resolve` map so the key
+ * stays in sync with what the components expect:
+ *
+ * ```ts
+ * {
+ *   path: 'about',
+ *   component: AboutPageComponent,
+ *   resolve: { [CMS_ROUTE_DATA_KEY]: aboutPageResolver }
+ * }
+ * ```
+ */
+export declare const CMS_ROUTE_DATA_KEY: "page";
+/**
+ * Shape of the resolved route data expected by AboutPageComponent.
+ * Use as the return type annotation on your resolver:
+ *
+ * ```ts
+ * export const aboutPageResolver: ResolveFn<AboutPageRouteData[typeof CMS_ROUTE_DATA_KEY]> = ...
+ * ```
+ */
+export interface AboutPageRouteData {
+    [CMS_ROUTE_DATA_KEY]: AboutPage | null;
+}
+/**
+ * Shape of the resolved route data expected by LinksPageComponent.
+ */
+export interface LinksPageRouteData {
+    [CMS_ROUTE_DATA_KEY]: LinksPage | null;
+}

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,32 @@
 {
   "name": "@foliokit/cms-ui",
-  "version": "0.0.0",
+  "version": "1.0.0",
+  "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",
+    "@angular/platform-browser": "^21.2.4",
+    "@angular/router": "^21.2.4",
+    "@foliokit/cms-core": "^1.0.0",
+    "ngx-markdown": "^21.1.0",
+    "rxjs": "~7.8.0"
   },
   "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>;
-}