@franzzemen/brokenstock-shell 0.0.33 → 0.0.35

package/fesm2022/franzzemen-brokenstock-shell.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, makeEnvironmentProviders, signal, computed, Injectable, inject, input, Directive, isDevMode, effect, untracked, HostListener, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgZone, viewChild, afterNextRender } from '@angular/core';
 import * as i2$1 from '@angular/router';
-import { Router, RouterLink, ActivatedRoute, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { Router, RouterLink, RouterLinkActive, ActivatedRoute, RouterOutlet } from '@angular/router';
 import { HttpHeader, BEARER_TOKEN_REGEX, USERNAME_REGEX, PASSWORD_REGEX } from '@franzzemen/utility';
 import { validateCredentials } from '@franzzemen/identity';
 import { HttpClient } from '@angular/common/http';
@@ -637,6 +637,7 @@ class FaqService {
         this.loader = inject(FAQ_CONTENT_LOADER);
         this.history = inject(FaqHistoryService);
         this.auth = inject(AuthenticationService);
+        this.router = inject(Router);
         this._currentFaqKey = signal(null, ...(ngDevMode ? [{ debugName: "_currentFaqKey" }] : /* istanbul ignore next */ []));
         /** Component-set current key. Bare `faq` opens at this key. */
         this.currentFaqKey = this._currentFaqKey.asReadonly();
@@ -730,6 +731,27 @@ class FaqService {
      * `history.pushState`.
      */
     async openModal(initialKey, opts) {
+        // Unauthenticated visitors get routed to the public /help SSR surface
+        // instead of the in-app modal. The modal is an authenticated experience;
+        // /help/* is the SEO/marketing-funnel surface.
+        if (!this.auth.authenticated()) {
+            await this.ensureManifest();
+            const entries = this.entries();
+            const target = initialKey ?? this._currentFaqKey() ?? null;
+            let route = '/help';
+            if (target) {
+                const chain = buildFallbackChain(target);
+                for (const candidate of chain) {
+                    const entry = entries.find((e) => e.key === candidate);
+                    if (entry && entry.audience === 'public' && entry.seoReady) {
+                        route = `/help/${entry.file}`;
+                        break;
+                    }
+                }
+            }
+            await this.router.navigateByUrl(route);
+            return;
+        }
         const searchTerm = opts?.searchTerm?.trim();
         this._initialSearchTerm.set(searchTerm && searchTerm.length > 0 ? searchTerm : null);
         if (this._modalOpen()) {
@@ -1238,6 +1260,98 @@ var faqAuthoringPanel = /*#__PURE__*/Object.freeze({
     FaqAuthoringPanel: FaqAuthoringPanel
 });
 
+/**
+ * Shared TOC sidebar for the public /help pages. Lists every
+ * `audience: 'public' && seoReady: true` entry grouped by category.
+ *
+ * Pass `activeFile` from the parent page so the matching link gets
+ * the `active` style. RouterLinkActive isn't sufficient on its own
+ * because the index page (`/help`) and entry pages
+ * (`/help/<file>`) all share this sidebar.
+ */
+class PublicFaqToc {
+    constructor() {
+        this.loader = inject(FAQ_CONTENT_LOADER);
+        /** Currently-active entry file path (e.g. `landing`). Empty/undefined on the index. */
+        this.activeFile = input(undefined, ...(ngDevMode ? [{ debugName: "activeFile" }] : /* istanbul ignore next */ []));
+        this._entries = signal([], ...(ngDevMode ? [{ debugName: "_entries" }] : /* istanbul ignore next */ []));
+        this.groups = computed(() => {
+            const visible = this._entries().filter((e) => e.audience === 'public' && e.seoReady);
+            const byCategory = new Map();
+            for (const entry of visible) {
+                const list = byCategory.get(entry.category) ?? [];
+                list.push(entry);
+                byCategory.set(entry.category, list);
+            }
+            const groups = [];
+            for (const [category, entries] of byCategory) {
+                entries.sort((a, b) => a.order - b.order || a.title.localeCompare(b.title));
+                groups.push({ category, entries });
+            }
+            groups.sort((a, b) => a.category.localeCompare(b.category));
+            return groups;
+        }, ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    }
+    async ngOnInit() {
+        const manifest = await this.loader.loadManifest();
+        this._entries.set(manifest.entries);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: PublicFaqToc, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: PublicFaqToc, isStandalone: true, selector: "public-faq-toc", inputs: { activeFile: { classPropertyName: "activeFile", publicName: "activeFile", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <nav class="public-faq-toc" aria-label="Help contents">
+      <a
+        class="public-faq-toc__index"
+        routerLink="/help"
+        routerLinkActive="active"
+        [routerLinkActiveOptions]="{ exact: true }"
+      >Brokenstock Help</a>
+      @for (group of groups(); track group.category) {
+        <div class="public-faq-toc__group">
+          <h3 class="public-faq-toc__category">{{ group.category }}</h3>
+          <ul>
+            @for (entry of group.entries; track entry.key) {
+              <li>
+                <a
+                  [routerLink]="['/help', entry.file]"
+                  [class.active]="activeFile() === entry.file"
+                >{{ entry.title }}</a>
+              </li>
+            }
+          </ul>
+        </div>
+      }
+    </nav>
+  `, isInline: true, styles: [":host{display:block}.public-faq-toc{padding:1.25rem 1rem;font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:.95rem;line-height:1.4}.public-faq-toc__index{display:block;font-weight:600;color:#cfd6e4;text-decoration:none;padding:.4rem .5rem;border-radius:4px;margin-bottom:.75rem}.public-faq-toc__index.active,.public-faq-toc__index:hover{background:#ffffff0f}.public-faq-toc__group{margin-bottom:1rem}.public-faq-toc__category{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8a93a3;margin:0 0 .35rem;padding:0 .5rem}.public-faq-toc ul{list-style:none;padding:0;margin:0}.public-faq-toc li a{display:block;padding:.35rem .5rem;border-radius:4px;color:#cfd6e4;text-decoration:none}.public-faq-toc li a:hover{background:#ffffff0d}.public-faq-toc li a.active{background:#6ea8fe2e;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: PublicFaqToc, decorators: [{
+            type: Component,
+            args: [{ selector: 'public-faq-toc', standalone: true, imports: [CommonModule, RouterLink, RouterLinkActive], template: `
+    <nav class="public-faq-toc" aria-label="Help contents">
+      <a
+        class="public-faq-toc__index"
+        routerLink="/help"
+        routerLinkActive="active"
+        [routerLinkActiveOptions]="{ exact: true }"
+      >Brokenstock Help</a>
+      @for (group of groups(); track group.category) {
+        <div class="public-faq-toc__group">
+          <h3 class="public-faq-toc__category">{{ group.category }}</h3>
+          <ul>
+            @for (entry of group.entries; track entry.key) {
+              <li>
+                <a
+                  [routerLink]="['/help', entry.file]"
+                  [class.active]="activeFile() === entry.file"
+                >{{ entry.title }}</a>
+              </li>
+            }
+          </ul>
+        </div>
+      }
+    </nav>
+  `, styles: [":host{display:block}.public-faq-toc{padding:1.25rem 1rem;font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:.95rem;line-height:1.4}.public-faq-toc__index{display:block;font-weight:600;color:#cfd6e4;text-decoration:none;padding:.4rem .5rem;border-radius:4px;margin-bottom:.75rem}.public-faq-toc__index.active,.public-faq-toc__index:hover{background:#ffffff0f}.public-faq-toc__group{margin-bottom:1rem}.public-faq-toc__category{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8a93a3;margin:0 0 .35rem;padding:0 .5rem}.public-faq-toc ul{list-style:none;padding:0;margin:0}.public-faq-toc li a{display:block;padding:.35rem .5rem;border-radius:4px;color:#cfd6e4;text-decoration:none}.public-faq-toc li a:hover{background:#ffffff0d}.public-faq-toc li a.active{background:#6ea8fe2e;color:#fff}\n"] }]
+        }], propDecorators: { activeFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeFile", required: false }] }] } });
+
 /**
  * Canonical public base URL (no trailing slash) used for OpenGraph,
  * Twitter, JSON-LD canonical URLs, and sitemap entries on the
@@ -1348,72 +1462,82 @@ class PublicFaqIndex {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: PublicFaqIndex, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: PublicFaqIndex, isStandalone: true, selector: "public-faq-index", ngImport: i0, template: `
-    <article class="public-faq-index">
-      <header>
-        <h1>Brokenstock Help</h1>
-        <p class="lead">Documentation and walkthroughs for the Brokenstock trade-journal platform.</p>
-      </header>
-      @if (loading()) {
-        <p>Loading…</p>
-      } @else if (groups().length === 0) {
-        <p>No help pages are published yet.</p>
-      } @else {
-        @for (group of groups(); track group.category) {
-          <section>
-            <h2>{{ group.category }}</h2>
-            <ul>
-              @for (entry of group.entries; track entry.key) {
-                <li>
-                  <a [routerLink]="['/help', entry.file]">{{ entry.title }}</a>
-                  @if (entry.description) {
-                    <span class="desc"> — {{ entry.description }}</span>
-                  }
-                </li>
-              }
-            </ul>
-          </section>
+    <div class="public-faq-layout">
+      <aside class="public-faq-sidebar">
+        <public-faq-toc />
+      </aside>
+      <article class="public-faq-index">
+        <header>
+          <h1>Brokenstock Help</h1>
+          <p class="lead">Documentation and walkthroughs for the Brokenstock trade-journal platform.</p>
+        </header>
+        @if (loading()) {
+          <p>Loading…</p>
+        } @else if (groups().length === 0) {
+          <p>No help pages are published yet.</p>
+        } @else {
+          @for (group of groups(); track group.category) {
+            <section>
+              <h2>{{ group.category }}</h2>
+              <ul>
+                @for (entry of group.entries; track entry.key) {
+                  <li>
+                    <a [routerLink]="['/help', entry.file]">{{ entry.title }}</a>
+                    @if (entry.description) {
+                      <span class="desc"> — {{ entry.description }}</span>
+                    }
+                  </li>
+                }
+              </ul>
+            </section>
+          }
         }
-      }
-      @if (jsonLd(); as ld) {
-        <script type="application/ld+json">{{ ld }}</script>
-      }
-    </article>
-  `, isInline: true, styles: [":host{display:block}.public-faq-index{max-width:860px;margin:0 auto;padding:2rem 1.25rem 4rem;font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.55}header h1{font-size:2.25rem;margin:0 0 .5rem}.lead{color:#555;margin:0 0 2rem;font-size:1.1rem}h2{font-size:1.35rem;margin:1.75rem 0 .5rem;border-bottom:1px solid #eee;padding-bottom:.25rem}ul{list-style:none;padding:0;margin:0}li{padding:.4rem 0}a{color:#1565c0;text-decoration:none;font-weight:500}a:hover{text-decoration:underline}.desc{color:#666;font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+        @if (jsonLd(); as ld) {
+          <script type="application/ld+json">{{ ld }}</script>
+        }
+      </article>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.public-faq-layout{display:grid;grid-template-columns:minmax(220px,280px) 1fr;gap:1.5rem;max-width:1280px;margin:0 auto;padding:1.5rem 1.25rem 4rem}.public-faq-sidebar{border-right:1px solid rgba(255,255,255,.08);align-self:start;position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow-y:auto}.public-faq-index{max-width:860px;font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.55}header h1{font-size:2.25rem;margin:0 0 .5rem}.lead{color:#9aa3b3;margin:0 0 2rem;font-size:1.1rem}h2{font-size:1.35rem;margin:1.75rem 0 .5rem;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:.25rem}ul{list-style:none;padding:0;margin:0}li{padding:.4rem 0}.public-faq-index a{color:#6ea8fe;text-decoration:none;font-weight:500}.public-faq-index a:hover{text-decoration:underline}.desc{color:#8a93a3;font-weight:400}@media(max-width:900px){.public-faq-layout{grid-template-columns:1fr}.public-faq-sidebar{position:static;max-height:none;border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PublicFaqToc, selector: "public-faq-toc", inputs: ["activeFile"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: PublicFaqIndex, decorators: [{
             type: Component,
-            args: [{ selector: 'public-faq-index', standalone: true, imports: [CommonModule, RouterLink], template: `
-    <article class="public-faq-index">
-      <header>
-        <h1>Brokenstock Help</h1>
-        <p class="lead">Documentation and walkthroughs for the Brokenstock trade-journal platform.</p>
-      </header>
-      @if (loading()) {
-        <p>Loading…</p>
-      } @else if (groups().length === 0) {
-        <p>No help pages are published yet.</p>
-      } @else {
-        @for (group of groups(); track group.category) {
-          <section>
-            <h2>{{ group.category }}</h2>
-            <ul>
-              @for (entry of group.entries; track entry.key) {
-                <li>
-                  <a [routerLink]="['/help', entry.file]">{{ entry.title }}</a>
-                  @if (entry.description) {
-                    <span class="desc"> — {{ entry.description }}</span>
-                  }
-                </li>
-              }
-            </ul>
-          </section>
+            args: [{ selector: 'public-faq-index', standalone: true, imports: [CommonModule, RouterLink, PublicFaqToc], template: `
+    <div class="public-faq-layout">
+      <aside class="public-faq-sidebar">
+        <public-faq-toc />
+      </aside>
+      <article class="public-faq-index">
+        <header>
+          <h1>Brokenstock Help</h1>
+          <p class="lead">Documentation and walkthroughs for the Brokenstock trade-journal platform.</p>
+        </header>
+        @if (loading()) {
+          <p>Loading…</p>
+        } @else if (groups().length === 0) {
+          <p>No help pages are published yet.</p>
+        } @else {
+          @for (group of groups(); track group.category) {
+            <section>
+              <h2>{{ group.category }}</h2>
+              <ul>
+                @for (entry of group.entries; track entry.key) {
+                  <li>
+                    <a [routerLink]="['/help', entry.file]">{{ entry.title }}</a>
+                    @if (entry.description) {
+                      <span class="desc"> — {{ entry.description }}</span>
+                    }
+                  </li>
+                }
+              </ul>
+            </section>
+          }
         }
-      }
-      @if (jsonLd(); as ld) {
-        <script type="application/ld+json">{{ ld }}</script>
-      }
-    </article>
-  `, styles: [":host{display:block}.public-faq-index{max-width:860px;margin:0 auto;padding:2rem 1.25rem 4rem;font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.55}header h1{font-size:2.25rem;margin:0 0 .5rem}.lead{color:#555;margin:0 0 2rem;font-size:1.1rem}h2{font-size:1.35rem;margin:1.75rem 0 .5rem;border-bottom:1px solid #eee;padding-bottom:.25rem}ul{list-style:none;padding:0;margin:0}li{padding:.4rem 0}a{color:#1565c0;text-decoration:none;font-weight:500}a:hover{text-decoration:underline}.desc{color:#666;font-weight:400}\n"] }]
+        @if (jsonLd(); as ld) {
+          <script type="application/ld+json">{{ ld }}</script>
+        }
+      </article>
+    </div>
+  `, styles: [":host{display:block}.public-faq-layout{display:grid;grid-template-columns:minmax(220px,280px) 1fr;gap:1.5rem;max-width:1280px;margin:0 auto;padding:1.5rem 1.25rem 4rem}.public-faq-sidebar{border-right:1px solid rgba(255,255,255,.08);align-self:start;position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow-y:auto}.public-faq-index{max-width:860px;font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.55}header h1{font-size:2.25rem;margin:0 0 .5rem}.lead{color:#9aa3b3;margin:0 0 2rem;font-size:1.1rem}h2{font-size:1.35rem;margin:1.75rem 0 .5rem;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:.25rem}ul{list-style:none;padding:0;margin:0}li{padding:.4rem 0}.public-faq-index a{color:#6ea8fe;text-decoration:none;font-weight:500}.public-faq-index a:hover{text-decoration:underline}.desc{color:#8a93a3;font-weight:400}@media(max-width:900px){.public-faq-layout{grid-template-columns:1fr}.public-faq-sidebar{position:static;max-height:none;border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}}\n"] }]
         }] });
 function serializeJsonLd$1(obj) {
     return JSON.stringify(obj).replace(/</g, '\\u003c');
@@ -1445,6 +1569,7 @@ class PublicFaqPage {
         this.entry = signal(null, ...(ngDevMode ? [{ debugName: "entry" }] : /* istanbul ignore next */ []));
         this.body = signal('', ...(ngDevMode ? [{ debugName: "body" }] : /* istanbul ignore next */ []));
         this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.activeFile = computed(() => this.entry()?.file, ...(ngDevMode ? [{ debugName: "activeFile" }] : /* istanbul ignore next */ []));
         this.renderedHtml = computed(() => {
             const entry = this.entry();
             const body = this.body();
@@ -1541,60 +1666,64 @@ class PublicFaqPage {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: PublicFaqPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: PublicFaqPage, isStandalone: true, selector: "public-faq-page", ngImport: i0, template: `
-    <article class="public-faq-page">
-      <nav class="crumbs">
-        <a routerLink="/help">← Help</a>
-      </nav>
-      @if (loading()) {
-        <p>Loading…</p>
-      } @else if (!entry()) {
-        <header>
-          <h1>Page not found</h1>
-          <p>That help page doesn't exist or isn't published. Try the <a routerLink="/help">help index</a>.</p>
-        </header>
-      } @else {
-        <header>
-          <h1>{{ entry()!.title }}</h1>
-          @if (entry()!.description) {
-            <p class="lead">{{ entry()!.description }}</p>
+    <div class="public-faq-layout">
+      <aside class="public-faq-sidebar">
+        <public-faq-toc [activeFile]="activeFile()" />
+      </aside>
+      <article class="public-faq-page">
+        @if (loading()) {
+          <p>Loading…</p>
+        } @else if (!entry()) {
+          <header>
+            <h1>Page not found</h1>
+            <p>That help page doesn't exist or isn't published. Try the <a routerLink="/help">help index</a>.</p>
+          </header>
+        } @else {
+          <header>
+            <h1>{{ entry()!.title }}</h1>
+            @if (entry()!.description) {
+              <p class="lead">{{ entry()!.description }}</p>
+            }
+          </header>
+          <div class="body" [innerHTML]="renderedHtml()"></div>
+          @if (jsonLd(); as ld) {
+            <script type="application/ld+json">{{ ld }}</script>
           }
-        </header>
-        <div class="body" [innerHTML]="renderedHtml()"></div>
-        @if (jsonLd(); as ld) {
-          <script type="application/ld+json">{{ ld }}</script>
         }
-      }
-    </article>
-  `, isInline: true, styles: [":host{display:block}.public-faq-page{max-width:860px;margin:0 auto;padding:2rem 1.25rem 4rem;font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.6}.crumbs{margin-bottom:1.5rem;font-size:.9rem}.crumbs a{color:#1565c0;text-decoration:none}.crumbs a:hover{text-decoration:underline}header h1{font-size:2.1rem;margin:0 0 .5rem}.lead{color:#555;font-size:1.1rem;margin:0 0 1.5rem}.body :is(h1,h2,h3,h4){margin-top:2rem}.body a{color:#1565c0}.body img{max-width:100%;height:auto}.body pre{background:#f6f8fa;padding:.75rem 1rem;border-radius:6px;overflow-x:auto}.body code{background:#f6f8fa;padding:.1rem .3rem;border-radius:3px;font-size:.9em}.body pre code{background:transparent;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+      </article>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.public-faq-layout{display:grid;grid-template-columns:minmax(220px,280px) 1fr;gap:1.5rem;max-width:1280px;margin:0 auto;padding:1.5rem 1.25rem 4rem}.public-faq-sidebar{border-right:1px solid rgba(255,255,255,.08);align-self:start;position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow-y:auto}.public-faq-page{font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.6;max-width:860px}header h1{font-size:2.1rem;margin:0 0 .5rem}.lead{color:#9aa3b3;font-size:1.1rem;margin:0 0 1.5rem}.body :is(h1,h2,h3,h4){margin-top:2rem}.body a{color:#6ea8fe}.body img{max-width:100%;height:auto}.body pre{background:#00000059;padding:.75rem 1rem;border-radius:6px;overflow-x:auto}.body code{background:#ffffff14;padding:.1rem .3rem;border-radius:3px;font-size:.9em}.body pre code{background:transparent;padding:0}@media(max-width:900px){.public-faq-layout{grid-template-columns:1fr}.public-faq-sidebar{position:static;max-height:none;border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PublicFaqToc, selector: "public-faq-toc", inputs: ["activeFile"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: PublicFaqPage, decorators: [{
             type: Component,
-            args: [{ selector: 'public-faq-page', standalone: true, imports: [CommonModule, RouterLink], template: `
-    <article class="public-faq-page">
-      <nav class="crumbs">
-        <a routerLink="/help">← Help</a>
-      </nav>
-      @if (loading()) {
-        <p>Loading…</p>
-      } @else if (!entry()) {
-        <header>
-          <h1>Page not found</h1>
-          <p>That help page doesn't exist or isn't published. Try the <a routerLink="/help">help index</a>.</p>
-        </header>
-      } @else {
-        <header>
-          <h1>{{ entry()!.title }}</h1>
-          @if (entry()!.description) {
-            <p class="lead">{{ entry()!.description }}</p>
+            args: [{ selector: 'public-faq-page', standalone: true, imports: [CommonModule, RouterLink, PublicFaqToc], template: `
+    <div class="public-faq-layout">
+      <aside class="public-faq-sidebar">
+        <public-faq-toc [activeFile]="activeFile()" />
+      </aside>
+      <article class="public-faq-page">
+        @if (loading()) {
+          <p>Loading…</p>
+        } @else if (!entry()) {
+          <header>
+            <h1>Page not found</h1>
+            <p>That help page doesn't exist or isn't published. Try the <a routerLink="/help">help index</a>.</p>
+          </header>
+        } @else {
+          <header>
+            <h1>{{ entry()!.title }}</h1>
+            @if (entry()!.description) {
+              <p class="lead">{{ entry()!.description }}</p>
+            }
+          </header>
+          <div class="body" [innerHTML]="renderedHtml()"></div>
+          @if (jsonLd(); as ld) {
+            <script type="application/ld+json">{{ ld }}</script>
           }
-        </header>
-        <div class="body" [innerHTML]="renderedHtml()"></div>
-        @if (jsonLd(); as ld) {
-          <script type="application/ld+json">{{ ld }}</script>
         }
-      }
-    </article>
-  `, styles: [":host{display:block}.public-faq-page{max-width:860px;margin:0 auto;padding:2rem 1.25rem 4rem;font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.6}.crumbs{margin-bottom:1.5rem;font-size:.9rem}.crumbs a{color:#1565c0;text-decoration:none}.crumbs a:hover{text-decoration:underline}header h1{font-size:2.1rem;margin:0 0 .5rem}.lead{color:#555;font-size:1.1rem;margin:0 0 1.5rem}.body :is(h1,h2,h3,h4){margin-top:2rem}.body a{color:#1565c0}.body img{max-width:100%;height:auto}.body pre{background:#f6f8fa;padding:.75rem 1rem;border-radius:6px;overflow-x:auto}.body code{background:#f6f8fa;padding:.1rem .3rem;border-radius:3px;font-size:.9em}.body pre code{background:transparent;padding:0}\n"] }]
+      </article>
+    </div>
+  `, styles: [":host{display:block}.public-faq-layout{display:grid;grid-template-columns:minmax(220px,280px) 1fr;gap:1.5rem;max-width:1280px;margin:0 auto;padding:1.5rem 1.25rem 4rem}.public-faq-sidebar{border-right:1px solid rgba(255,255,255,.08);align-self:start;position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow-y:auto}.public-faq-page{font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.6;max-width:860px}header h1{font-size:2.1rem;margin:0 0 .5rem}.lead{color:#9aa3b3;font-size:1.1rem;margin:0 0 1.5rem}.body :is(h1,h2,h3,h4){margin-top:2rem}.body a{color:#6ea8fe}.body img{max-width:100%;height:auto}.body pre{background:#00000059;padding:.75rem 1rem;border-radius:6px;overflow-x:auto}.body code{background:#ffffff14;padding:.1rem .3rem;border-radius:3px;font-size:.9em}.body pre code{background:transparent;padding:0}@media(max-width:900px){.public-faq-layout{grid-template-columns:1fr}.public-faq-sidebar{position:static;max-height:none;border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}}\n"] }]
         }] });
 /**
  * Serializes a JSON-LD object for safe inclusion in a
@@ -2419,5 +2548,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AuthenticationService, CLEAR_USAGE, CommandRegistryService, CommandService, CommandTerminal, ConfirmDialog, FAQ_CONTENT_LOADER, FAQ_DEV_EDITOR, FAQ_DEV_MODE, FAQ_DEV_WORKSPACE_ROOT, FAQ_PUBLIC_PUBLISHER, FAQ_PUBLIC_SITE_BASE_URL, FaqAuthoringPanel, FaqHistoryService, FaqMarkdownRendererService, FaqModal, FaqService, HELP_USAGE, HttpFaqContentLoader, KeyboardShortcutService, Login, MainContent, PublicFaqIndex, PublicFaqPage, RegexValidatorDirective, SHELL_APP_NAME, SHELL_AUTH_URLS, SHELL_COMMANDS, SHELL_MENU_ITEMS, SHELL_POST_LOGIN_ROUTE, Shell, SideMenu, StatusBar, TerminalFocusService, ThemeService, ThinkingService, audienceAllowed, authGuard, authInterceptor, buildFallbackChain, guestGuard, provideShellConfig, tokenize };
+export { AuthenticationService, CLEAR_USAGE, CommandRegistryService, CommandService, CommandTerminal, ConfirmDialog, FAQ_CONTENT_LOADER, FAQ_DEV_EDITOR, FAQ_DEV_MODE, FAQ_DEV_WORKSPACE_ROOT, FAQ_PUBLIC_PUBLISHER, FAQ_PUBLIC_SITE_BASE_URL, FaqAuthoringPanel, FaqHistoryService, FaqMarkdownRendererService, FaqModal, FaqService, HELP_USAGE, HttpFaqContentLoader, KeyboardShortcutService, Login, MainContent, PublicFaqIndex, PublicFaqPage, PublicFaqToc, RegexValidatorDirective, SHELL_APP_NAME, SHELL_AUTH_URLS, SHELL_COMMANDS, SHELL_MENU_ITEMS, SHELL_POST_LOGIN_ROUTE, Shell, SideMenu, StatusBar, TerminalFocusService, ThemeService, ThinkingService, audienceAllowed, authGuard, authInterceptor, buildFallbackChain, guestGuard, provideShellConfig, tokenize };
 //# sourceMappingURL=franzzemen-brokenstock-shell.mjs.map