@eric-emg/symphiq-components 1.2.163 → 1.2.164

package/fesm2022/symphiq-components.mjs

@@ -58556,6 +58556,18 @@ class SymphiqBusinessAnalysisDashboardComponent {
         this.lastSubsectionTitle = '';
         this.lastScrollY = 0;
         this.scrollDirection = 'down';
+        effect(() => {
+            const profile = this.profile();
+            this.currentProfile.set(profile);
+            this.lookupService.setProfile(profile);
+            if (profile) {
+                this.searchService.setProfile(profile);
+            }
+            if (profile?.profileStructured?.sections) {
+                const recommendations = profile.profileStructured?.recommendations;
+                this.profileContextService.indexProfile(profile.profileStructured.sections, recommendations);
+            }
+        });
     }
     onScroll() {
         this.headerScrollService.handleScroll(this.embedded());
@@ -58716,16 +58728,6 @@ class SymphiqBusinessAnalysisDashboardComponent {
         }, 2000);
     }
     ngOnInit() {
-        this.currentProfile.set(this.profile());
-        this.lookupService.setProfile(this.profile());
-        const profile = this.profile();
-        if (profile) {
-            this.searchService.setProfile(profile);
-        }
-        if (profile?.profileStructured?.sections) {
-            const recommendations = profile.profileStructured?.recommendations;
-            this.profileContextService.indexProfile(profile.profileStructured.sections, recommendations);
-        }
     }
     ngAfterViewInit() {
         // Use a single observer for subsections which includes parent section information
@@ -59024,257 +59026,257 @@ class SymphiqBusinessAnalysisDashboardComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SymphiqBusinessAnalysisDashboardComponent, [{
         type: Component,
-        args: [{ selector: 'symphiq-business-analysis-dashboard', standalone: true, imports: [CommonModule, ProfileSectionComponent, SectionNavigationComponent, FloatingTocComponent, FloatingBackButtonComponent, TooltipContainerComponent, SectionDividerComponent, BusinessAnalysisModalComponent, SearchButtonComponent, SearchModalComponent, ViewModeSwitcherModalComponent, JourneyProgressIndicatorComponent, WelcomeBannerComponent, RecommendationsTiledGridComponent, CollapsibleSectionGroupComponent, ContentGenerationProgressWithConfettiComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div [ngClass]="getContainerClasses()">
-      <!-- Scroll Progress Bar (fixed at top) -->
-      <div [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
-        <div
-          [style.width.%]="scrollProgress()"
-          [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
-          class="h-full transition-all duration-200 ease-out">
-        </div>
-      </div>
-      
-      <div class="animated-bubbles" [class.light-mode]="isLightMode()" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
-      
-      <div class="relative z-[51]">
-        <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
-          <!-- Expanded Header (default state) -->
-          <div
-            class="transition-all duration-300 ease-in-out overflow-hidden"
-            [class.max-h-0]="headerScrollService.isScrolled()"
-            [class.opacity-0]="headerScrollService.isScrolled()"
-            [class.max-h-96]="!headerScrollService.isScrolled()"
-            [class.opacity-100]="!headerScrollService.isScrolled()">
-            <div
-              class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
-              [class.pointer-events-none]="headerScrollService.isScrolled()"
-              [class.pointer-events-auto]="!headerScrollService.isScrolled()">
-              <div class="flex items-center justify-between">
-                <div>
-                  <h1 [ngClass]="getMainTitleClasses()">
-                    {{ currentProfile()?.profileStructured?.businessName || 'Business Analysis' }}
-                  </h1>
-                  <p [ngClass]="getSubtitleClasses()">
-                    Business Profile & Analysis
-                  </p>
-                </div>
-                @if (profile()?.selfContentStatus === AiDynamicContentStatusEnum.GENERATED) {
-                  <div class="flex items-center gap-2">
-                    <symphiq-search-button
-                      [isLightMode]="isLightMode()"
-                      (searchClick)="openSearch()"
-                    />
-                    <button
-                      type="button"
-                      (click)="openViewModeSwitcher()"
-                      [ngClass]="getViewModeButtonClasses()"
-                      class="cursor-pointer flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
-                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
-                      </svg>
-                      <span>{{ displayModeLabel() }}</span>
-                    </button>
-                  </div>
-                }
-              </div>
-            </div>
-          </div>
-
-          <!-- Condensed Header (scrolled state) -->
-          <div
-            class="transition-all duration-300 ease-in-out overflow-hidden"
-            [class.max-h-0]="!headerScrollService.isScrolled()"
-            [class.opacity-0]="!headerScrollService.isScrolled()"
-            [class.max-h-20]="headerScrollService.isScrolled()"
-            [class.opacity-100]="headerScrollService.isScrolled()">
-            <div
-              class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
-              [class.pointer-events-none]="!headerScrollService.isScrolled()"
-              [class.pointer-events-auto]="headerScrollService.isScrolled()">
-              <div class="flex items-center justify-between">
-                <div class="flex-1 min-w-0 mr-4">
-                  <h1 [ngClass]="isLightMode() ? 'text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent truncate' : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent truncate'">
-                    {{ currentProfile()?.profileStructured?.businessName || 'Business Analysis' }}
-                  </h1>
-                </div>
-                <div class="flex items-center gap-4">
-                  @if (!isSimplifiedView()) {
-                    <div class="flex items-center gap-2 text-sm flex-shrink-0">
-                      <span [ngClass]="isLightMode() ? 'text-slate-600 font-medium' : 'text-slate-400 font-medium'" class="transition-opacity duration-300" [class.opacity-0]="sectionTitleFading()" [class.opacity-100]="!sectionTitleFading()">
-                        {{ currentSectionTitle() }}
-                      </span>
-                      @if (currentSubsectionTitle()) {
-                        <span [ngClass]="isLightMode() ? 'text-slate-400' : 'text-slate-500'" class="transition-opacity duration-300" [class.opacity-0]="subsectionTitleFading()" [class.opacity-100]="!subsectionTitleFading()">›</span>
-                        <span [ngClass]="isLightMode() ? 'text-slate-500' : 'text-slate-500'" class="transition-opacity duration-300" [class.opacity-0]="subsectionTitleFading()" [class.opacity-100]="!subsectionTitleFading()">
-                          {{ currentSubsectionTitle() }}
-                        </span>
-                      }
-                    </div>
-                  }
-                  @if (profile()?.selfContentStatus === AiDynamicContentStatusEnum.GENERATED) {
-                    <symphiq-search-button
-                      [isLightMode]="isLightMode()"
-                      [minimized]="true"
-                      (searchClick)="openSearch()"
-                    />
-                    <button
-                      type="button"
-                      (click)="openViewModeSwitcher()"
-                      [ngClass]="getViewModeButtonClasses()"
-                      class="cursor-pointer flex items-center gap-2 px-2 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
-                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
-                      </svg>
-                    </button>
-                  }
-                </div>
-              </div>
-            </div>
-          </div>
-        </header>
-
-        <main class="relative">
-          @if (isContentGenerating()) {
-            <!-- Journey Progress Banner (always show when not onboarded) -->
-            @if (!isOnboarded()) {
-              <symphiq-journey-progress-indicator
-                [viewMode]="viewMode()"
-                [currentStepId]="JourneyStepIdEnum.BUSINESS_ANALYSIS"
-                [showNextStepAction]="false"
-                [forDemo]="forDemo()"
-                [maxAccessibleStepId]="maxAccessibleStepId()"
-                (stepClick)="stepClick.emit($event)"
-                (nextStepClick)="nextStepClick.emit()"
-              />
-            }
-
-            <!-- Content Generation Progress Component -->
-            <symphiq-content-generation-progress-with-confetti
-              [viewMode]="viewMode()"
-              [itemStatus]="itemStatus()"
-              [profile]="profile()"
-              [confettiIntensity]="'celebration'"
-              [title]="'We are generating a new Business Analysis for ' + (currentProfile()?.profileStructured?.businessName || 'your business') + '.'"
-              [subtitle]="'It will appear here when ready. You can check back later as this will take a few minutes to complete.'"
-            />
-          } @else {
-            @if (isSimplifiedView()) {
-              <!-- Journey Progress Banner - Full Width Sticky (only show when not onboarded) -->
-              @if (!isOnboarded()) {
-                <symphiq-journey-progress-indicator
-                  [viewMode]="viewMode()"
-                  [currentStepId]="JourneyStepIdEnum.BUSINESS_ANALYSIS"
-                  [showNextStepAction]="showNextStepAction()"
-                  [forDemo]="forDemo()"
-                  [maxAccessibleStepId]="maxAccessibleStepId()"
-                  (stepClick)="stepClick.emit($event)"
-                  (nextStepClick)="nextStepClick.emit()"
-                />
-              }
-
-              <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-                <div class="mb-8">
-                  <symphiq-welcome-banner
-                    [viewMode]="viewMode()"
-                    [businessName]="currentProfile()?.profileStructured?.businessName || 'your business'"
-                    [isOnboarded]="isOnboarded()"
-                  />
-                </div>
-
-                <div class="mb-8">
-                  <symphiq-recommendations-tiled-grid
-                    [recommendations]="recommendationItems()"
-                    [viewMode]="viewMode()"
-                    (viewMoreClick)="openRecommendationDetailsModal($event)"
-                  />
-                </div>
-
-                <div>
-                  <symphiq-collapsible-section-group
-                    [sections]="nonRecommendationSections()"
-                    [viewMode]="viewMode()"
-                  />
-                </div>
-              </div>
-            } @else {
-              @for (section of sections(); track trackBySectionId($index, section); let idx = $index; let last = $last) {
-                <symphiq-profile-section
-                  [section]="section"
-                  [viewMode]="viewMode()"
-                  [forceExpanded]="!isCompactView()"
-                />
-                @if (!last) {
-                  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                    <symphiq-section-divider
-                      [viewMode]="viewMode()"
-                      [subsections]="sections()[idx + 1].subsections || []" />
-                  </div>
-                }
-              }
-            }
-          }
-        </main>
-
-        @if (!isSimplifiedView()) {
-          <symphiq-section-navigation
-            [sections]="sections()"
-            [viewMode]="viewMode()"
-            [embedded]="embedded()"
-            [scrollElement]="scrollElement() ?? undefined"
-          />
-        }
-
-        @if (!isSimplifiedView()) {
-          <symphiq-floating-toc
-            [sections]="sections()"
-            [viewMode]="viewMode()"
-            [embedded]="embedded()"
-            [scrollElement]="scrollElement() ?? undefined"
-          />
-        }
-
-        <symphiq-floating-back-button
-          [viewMode]="viewMode()"
-          [embedded]="embedded()"
-        />
-      </div>
-
-      @if (isLoading()) {
-        <div [ngClass]="getLoadingOverlayClasses()">
-          <div [ngClass]="getSpinnerClasses()"></div>
-        </div>
-      }
-
-      <symphiq-tooltip-container />
-      <symphiq-business-analysis-modal
-        [isLightMode]="isLightMode()"
-        (viewInContextRequested)="handleViewInContext($event)" />
-
-      <symphiq-search-modal
-        [isLightMode]="isLightMode()"
-        [isOpen]="searchService.isSearchOpen()"
-        [searchQuery]="searchService.getSearchQuery()"
-        [results]="searchService.searchResults()"
-        [hasResults]="searchService.hasResults()"
-        [selectedIndex]="selectedSearchIndex()"
-        [placeholder]="'Search sections, items, and analysis...'"
-        (searchChange)="onSearchChange($event)"
-        (resultSelected)="onSearchResultSelected($event)"
-        (close)="closeSearch()"
-      />
-
-      <symphiq-view-mode-switcher-modal
-        [isOpen]="isViewModeSwitcherOpen()"
-        [currentMode]="displayMode()"
-        [viewMode]="viewMode()"
-        [isLoading]="isViewModeSwitching()"
-        (close)="closeViewModeSwitcher()"
-        (modeSelected)="handleDisplayModeChange($event)"
-      />
-    </div>
+        args: [{ selector: 'symphiq-business-analysis-dashboard', standalone: true, imports: [CommonModule, ProfileSectionComponent, SectionNavigationComponent, FloatingTocComponent, FloatingBackButtonComponent, TooltipContainerComponent, SectionDividerComponent, BusinessAnalysisModalComponent, SearchButtonComponent, SearchModalComponent, ViewModeSwitcherModalComponent, JourneyProgressIndicatorComponent, WelcomeBannerComponent, RecommendationsTiledGridComponent, CollapsibleSectionGroupComponent, ContentGenerationProgressWithConfettiComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div [ngClass]="getContainerClasses()">
+      <!-- Scroll Progress Bar (fixed at top) -->
+      <div [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
+        <div
+          [style.width.%]="scrollProgress()"
+          [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
+          class="h-full transition-all duration-200 ease-out">
+        </div>
+      </div>
+      
+      <div class="animated-bubbles" [class.light-mode]="isLightMode()" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
+      
+      <div class="relative z-[51]">
+        <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
+          <!-- Expanded Header (default state) -->
+          <div
+            class="transition-all duration-300 ease-in-out overflow-hidden"
+            [class.max-h-0]="headerScrollService.isScrolled()"
+            [class.opacity-0]="headerScrollService.isScrolled()"
+            [class.max-h-96]="!headerScrollService.isScrolled()"
+            [class.opacity-100]="!headerScrollService.isScrolled()">
+            <div
+              class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
+              [class.pointer-events-none]="headerScrollService.isScrolled()"
+              [class.pointer-events-auto]="!headerScrollService.isScrolled()">
+              <div class="flex items-center justify-between">
+                <div>
+                  <h1 [ngClass]="getMainTitleClasses()">
+                    {{ currentProfile()?.profileStructured?.businessName || 'Business Analysis' }}
+                  </h1>
+                  <p [ngClass]="getSubtitleClasses()">
+                    Business Profile & Analysis
+                  </p>
+                </div>
+                @if (profile()?.selfContentStatus === AiDynamicContentStatusEnum.GENERATED) {
+                  <div class="flex items-center gap-2">
+                    <symphiq-search-button
+                      [isLightMode]="isLightMode()"
+                      (searchClick)="openSearch()"
+                    />
+                    <button
+                      type="button"
+                      (click)="openViewModeSwitcher()"
+                      [ngClass]="getViewModeButtonClasses()"
+                      class="cursor-pointer flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                      </svg>
+                      <span>{{ displayModeLabel() }}</span>
+                    </button>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+
+          <!-- Condensed Header (scrolled state) -->
+          <div
+            class="transition-all duration-300 ease-in-out overflow-hidden"
+            [class.max-h-0]="!headerScrollService.isScrolled()"
+            [class.opacity-0]="!headerScrollService.isScrolled()"
+            [class.max-h-20]="headerScrollService.isScrolled()"
+            [class.opacity-100]="headerScrollService.isScrolled()">
+            <div
+              class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
+              [class.pointer-events-none]="!headerScrollService.isScrolled()"
+              [class.pointer-events-auto]="headerScrollService.isScrolled()">
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0 mr-4">
+                  <h1 [ngClass]="isLightMode() ? 'text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent truncate' : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent truncate'">
+                    {{ currentProfile()?.profileStructured?.businessName || 'Business Analysis' }}
+                  </h1>
+                </div>
+                <div class="flex items-center gap-4">
+                  @if (!isSimplifiedView()) {
+                    <div class="flex items-center gap-2 text-sm flex-shrink-0">
+                      <span [ngClass]="isLightMode() ? 'text-slate-600 font-medium' : 'text-slate-400 font-medium'" class="transition-opacity duration-300" [class.opacity-0]="sectionTitleFading()" [class.opacity-100]="!sectionTitleFading()">
+                        {{ currentSectionTitle() }}
+                      </span>
+                      @if (currentSubsectionTitle()) {
+                        <span [ngClass]="isLightMode() ? 'text-slate-400' : 'text-slate-500'" class="transition-opacity duration-300" [class.opacity-0]="subsectionTitleFading()" [class.opacity-100]="!subsectionTitleFading()">›</span>
+                        <span [ngClass]="isLightMode() ? 'text-slate-500' : 'text-slate-500'" class="transition-opacity duration-300" [class.opacity-0]="subsectionTitleFading()" [class.opacity-100]="!subsectionTitleFading()">
+                          {{ currentSubsectionTitle() }}
+                        </span>
+                      }
+                    </div>
+                  }
+                  @if (profile()?.selfContentStatus === AiDynamicContentStatusEnum.GENERATED) {
+                    <symphiq-search-button
+                      [isLightMode]="isLightMode()"
+                      [minimized]="true"
+                      (searchClick)="openSearch()"
+                    />
+                    <button
+                      type="button"
+                      (click)="openViewModeSwitcher()"
+                      [ngClass]="getViewModeButtonClasses()"
+                      class="cursor-pointer flex items-center gap-2 px-2 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                      </svg>
+                    </button>
+                  }
+                </div>
+              </div>
+            </div>
+          </div>
+        </header>
+
+        <main class="relative">
+          @if (isContentGenerating()) {
+            <!-- Journey Progress Banner (always show when not onboarded) -->
+            @if (!isOnboarded()) {
+              <symphiq-journey-progress-indicator
+                [viewMode]="viewMode()"
+                [currentStepId]="JourneyStepIdEnum.BUSINESS_ANALYSIS"
+                [showNextStepAction]="false"
+                [forDemo]="forDemo()"
+                [maxAccessibleStepId]="maxAccessibleStepId()"
+                (stepClick)="stepClick.emit($event)"
+                (nextStepClick)="nextStepClick.emit()"
+              />
+            }
+
+            <!-- Content Generation Progress Component -->
+            <symphiq-content-generation-progress-with-confetti
+              [viewMode]="viewMode()"
+              [itemStatus]="itemStatus()"
+              [profile]="profile()"
+              [confettiIntensity]="'celebration'"
+              [title]="'We are generating a new Business Analysis for ' + (currentProfile()?.profileStructured?.businessName || 'your business') + '.'"
+              [subtitle]="'It will appear here when ready. You can check back later as this will take a few minutes to complete.'"
+            />
+          } @else {
+            @if (isSimplifiedView()) {
+              <!-- Journey Progress Banner - Full Width Sticky (only show when not onboarded) -->
+              @if (!isOnboarded()) {
+                <symphiq-journey-progress-indicator
+                  [viewMode]="viewMode()"
+                  [currentStepId]="JourneyStepIdEnum.BUSINESS_ANALYSIS"
+                  [showNextStepAction]="showNextStepAction()"
+                  [forDemo]="forDemo()"
+                  [maxAccessibleStepId]="maxAccessibleStepId()"
+                  (stepClick)="stepClick.emit($event)"
+                  (nextStepClick)="nextStepClick.emit()"
+                />
+              }
+
+              <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                <div class="mb-8">
+                  <symphiq-welcome-banner
+                    [viewMode]="viewMode()"
+                    [businessName]="currentProfile()?.profileStructured?.businessName || 'your business'"
+                    [isOnboarded]="isOnboarded()"
+                  />
+                </div>
+
+                <div class="mb-8">
+                  <symphiq-recommendations-tiled-grid
+                    [recommendations]="recommendationItems()"
+                    [viewMode]="viewMode()"
+                    (viewMoreClick)="openRecommendationDetailsModal($event)"
+                  />
+                </div>
+
+                <div>
+                  <symphiq-collapsible-section-group
+                    [sections]="nonRecommendationSections()"
+                    [viewMode]="viewMode()"
+                  />
+                </div>
+              </div>
+            } @else {
+              @for (section of sections(); track trackBySectionId($index, section); let idx = $index; let last = $last) {
+                <symphiq-profile-section
+                  [section]="section"
+                  [viewMode]="viewMode()"
+                  [forceExpanded]="!isCompactView()"
+                />
+                @if (!last) {
+                  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <symphiq-section-divider
+                      [viewMode]="viewMode()"
+                      [subsections]="sections()[idx + 1].subsections || []" />
+                  </div>
+                }
+              }
+            }
+          }
+        </main>
+
+        @if (!isSimplifiedView()) {
+          <symphiq-section-navigation
+            [sections]="sections()"
+            [viewMode]="viewMode()"
+            [embedded]="embedded()"
+            [scrollElement]="scrollElement() ?? undefined"
+          />
+        }
+
+        @if (!isSimplifiedView()) {
+          <symphiq-floating-toc
+            [sections]="sections()"
+            [viewMode]="viewMode()"
+            [embedded]="embedded()"
+            [scrollElement]="scrollElement() ?? undefined"
+          />
+        }
+
+        <symphiq-floating-back-button
+          [viewMode]="viewMode()"
+          [embedded]="embedded()"
+        />
+      </div>
+
+      @if (isLoading()) {
+        <div [ngClass]="getLoadingOverlayClasses()">
+          <div [ngClass]="getSpinnerClasses()"></div>
+        </div>
+      }
+
+      <symphiq-tooltip-container />
+      <symphiq-business-analysis-modal
+        [isLightMode]="isLightMode()"
+        (viewInContextRequested)="handleViewInContext($event)" />
+
+      <symphiq-search-modal
+        [isLightMode]="isLightMode()"
+        [isOpen]="searchService.isSearchOpen()"
+        [searchQuery]="searchService.getSearchQuery()"
+        [results]="searchService.searchResults()"
+        [hasResults]="searchService.hasResults()"
+        [selectedIndex]="selectedSearchIndex()"
+        [placeholder]="'Search sections, items, and analysis...'"
+        (searchChange)="onSearchChange($event)"
+        (resultSelected)="onSearchResultSelected($event)"
+        (close)="closeSearch()"
+      />
+
+      <symphiq-view-mode-switcher-modal
+        [isOpen]="isViewModeSwitcherOpen()"
+        [currentMode]="displayMode()"
+        [viewMode]="viewMode()"
+        [isLoading]="isViewModeSwitching()"
+        (close)="closeViewModeSwitcher()"
+        (modeSelected)="handleDisplayModeChange($event)"
+      />
+    </div>
   `, styles: [":host{display:block}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse-highlight{0%,to{transform:scale(1);box-shadow:0 0 #3b82f6b3}50%{transform:scale(1.02);box-shadow:0 0 20px 8px #3b82f64d}}:host ::ng-deep .search-highlight-pulse{animation:pulse-highlight 2s ease-in-out;border-color:#3b82f6!important}\n"] }]
     }], () => [], { embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], parentHeaderOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentHeaderOffset", required: false }] }], requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], itemStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatus", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], onScroll: [{
             type: HostListener,