npm - @eric-emg/symphiq-components - Versions diffs - 1.2.95 → 1.2.97 - Mend

@eric-emg/symphiq-components 1.2.95 → 1.2.97

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/fesm2022/symphiq-components.mjs +32079 -11333
package/fesm2022/symphiq-components.mjs.map +1 -1
package/index.d.ts +979 -53
package/index.d.ts.map +1 -1
package/package.json +2 -2
package/src/styles.css +91 -0
package/styles.css +1538 -87

package/index.d.ts CHANGED Viewed

@@ -1,11 +1,13 @@
 import * as _jebgem_model from '@jebgem/model';
-import { InsightBlockInterface, PerformanceMetricInterface, AiChartInterface, ViewModeEnum, BreakdownMetricInterface, UserInterface, FunnelAnalysisInterface, OverallAssessmentInterface } from '@jebgem/model';
+import { InsightBlockInterface, PerformanceMetricInterface, AiChartInterface, ProfileItemInterface, ViewModeEnum, ProfileAnalysisRecommendationActionStepInterface, MetricStatusEnum, TrendDirectionEnum, CompetitiveScoreEnum, ProfileSectionInterface, ProfileSubsectionInterface, ProfileInterface, BreakdownMetricInterface, UserInterface, FunnelAnalysisInterface, OverallAssessmentInterface, ProfileAnalysisRecommendationInterface, ProfileItemTypeEnum, IconObjectInterface as IconObjectInterface$1, NapkinVisualInterface, HierarchyDataInterface, ChartTypeEnum, IconSourceEnum } from '@jebgem/model';
 export * from '@jebgem/model';
 import * as _angular_core from '@angular/core';
-import { AfterViewInit, ElementRef, WritableSignal, OnInit, OnDestroy } from '@angular/core';
+import { AfterViewInit, ElementRef, WritableSignal, OnInit, OnDestroy, OnChanges, SimpleChanges, Renderer2, EventEmitter } from '@angular/core';
 import * as rxjs from 'rxjs';
-import * as _jebgem_model_lib_funnel_analysis_ai_chart_interface from '@jebgem/model/lib/funnel-analysis/ai-chart.interface';
-import { SafeHtml } from '@angular/platform-browser';
+import { Observable } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import * as _angular_platform_browser from '@angular/platform-browser';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 interface FunnelMetricOrder {
     metric: string;
@@ -32,8 +34,13 @@ declare class FunnelOrderService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<FunnelOrderService>;
 }
+interface VisualizationData {
+    type: 'horizontal-bar' | 'circular-progress' | 'napkin-visual' | 'custom';
+    title: string;
+    data: unknown;
+}
 interface ModalState {
-    type: 'insight' | 'metric' | 'chart' | 'insights-list' | 'metrics-list' | 'recommendations-list' | 'competitive-analysis' | null;
+    type: 'insight' | 'metric' | 'chart' | 'insights-list' | 'metrics-list' | 'charts-list' | 'recommendations-list' | 'competitive-analysis' | 'competitive-gap' | 'visualization' | 'recommendation-action-steps' | null;
     data: InsightBlockInterface | InsightBlockInterface[] | PerformanceMetricInterface | PerformanceMetricInterface[] | AiChartInterface | {
         metrics: PerformanceMetricInterface[];
         insightContext?: {
@@ -42,6 +49,14 @@ interface ModalState {
             businessContext: string;
             priority: number;
         };
+    } | {
+        charts: AiChartInterface[];
+        insightContext?: {
+            title: string;
+            description: string;
+            businessContext: string;
+            priority: number;
+        };
     } | {
         recommendations: string[];
         insightContext: {
@@ -58,7 +73,14 @@ interface ModalState {
             competitiveAnalysis: string;
             priority: number;
         };
-    } | null;
+    } | {
+        item: ProfileItemInterface;
+        viewMode: ViewModeEnum;
+    } | {
+        title?: string;
+        actionSteps: ProfileAnalysisRecommendationActionStepInterface[];
+        viewMode: ViewModeEnum;
+    } | VisualizationData | null;
     charts: AiChartInterface[];
     previousState?: ModalState | null;
     expandedSection?: string;
@@ -76,6 +98,12 @@ declare class ModalService {
         businessContext: string;
         priority: number;
     }): void;
+    openChartsListModal(charts: AiChartInterface[], insightContext?: {
+        title: string;
+        description: string;
+        businessContext: string;
+        priority: number;
+    }): void;
     openRecommendationsListModal(recommendations: string[], insightContext: {
         title: string;
         description: string;
@@ -89,6 +117,9 @@ declare class ModalService {
         competitiveAnalysis: string;
         priority: number;
     }): void;
+    openVisualizationModal(visualization: VisualizationData, previousState?: ModalState): void;
+    openCompetitiveGapModal(item: ProfileItemInterface, viewMode: ViewModeEnum, previousState?: ModalState): void;
+    openRecommendationActionStepsModal(title: string | undefined, actionSteps: ProfileAnalysisRecommendationActionStepInterface[], viewMode: ViewModeEnum, previousState?: ModalState): void;
     goBack(previousState: ModalState): void;
     closeModal(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalService, never>;
@@ -153,7 +184,7 @@ interface MetricValueTooltipContent {
     };
 }
 interface StatusBadgeTooltipContent {
-    status: string;
+    status: MetricStatusEnum;
     pacingPercentage?: number;
     currentValue?: number;
     projectedValue?: number;
@@ -171,7 +202,7 @@ interface TrendIndicatorTooltipContent {
     currentValue: number;
     priorValue: number;
     trendPercent: number;
-    trendDirection: 'UP' | 'DOWN' | 'FLAT';
+    trendDirection: TrendDirectionEnum;
     isInverseMetric?: boolean;
     unit?: string;
     status?: string;
@@ -204,7 +235,7 @@ interface BreakdownRowTooltipContent {
 interface CompetitiveBenchmarkTooltipContent {
     industry: string;
     metricBenchmark: string;
-    competitiveScore: 'LEADING' | 'COMPETITIVE' | 'LAGGING';
+    competitiveScore: CompetitiveScoreEnum;
     description: string;
     keyOpportunities: string;
     metricName?: string;
@@ -224,7 +255,7 @@ interface NarrativeTooltipContent {
     narrative: string;
 }
 interface CompetitiveStatusTooltipContent {
-    status: 'LEADING' | 'COMPETITIVE' | 'LAGGING';
+    status: CompetitiveScoreEnum;
     statusDescription: string;
     metrics: Array<{
         name: string;
@@ -234,7 +265,7 @@ interface CompetitiveStatusTooltipContent {
             max: number;
         };
         unit: string;
-        status?: 'LEADING' | 'COMPETITIVE' | 'LAGGING';
+        status?: CompetitiveScoreEnum;
     }>;
 }
 interface FunnelStageCompetitiveTooltipContent {
@@ -272,9 +303,9 @@ interface FunnelStageCompetitiveTooltipContent {
 declare class TooltipDataService {
     private formatCache;
     private metricLookupCache;
-    extractMetricTooltipData(metric: PerformanceMetricInterface, chart?: any): MetricValueTooltipContent;
+    extractMetricTooltipData(metric: PerformanceMetricInterface, chart?: AiChartInterface): MetricValueTooltipContent;
     extractStatusTooltipData(metric: PerformanceMetricInterface): StatusBadgeTooltipContent;
-    extractTrendTooltipData(metric: PerformanceMetricInterface, chart?: any): TrendIndicatorTooltipContent;
+    extractTrendTooltipData(metric: PerformanceMetricInterface, chart?: AiChartInterface): TrendIndicatorTooltipContent;
     extractPriorityTooltipData(insight: InsightBlockInterface): PriorityBadgeTooltipContent;
     extractBreakdownRowTooltipData(metric: PerformanceMetricInterface): BreakdownRowTooltipContent;
     findMetricByName(name: string, metrics: PerformanceMetricInterface[]): PerformanceMetricInterface | undefined;
@@ -456,27 +487,154 @@ declare class MetricFormatterService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<MetricFormatterService>;
 }
+interface HeaderScrollConfig {
+    collapseThreshold?: number;
+    expandThreshold?: number;
+    stateChangeCooldown?: number;
+    debounceDelay?: number;
+}
+declare class HeaderScrollService {
+    private readonly DEFAULT_COLLAPSE_THRESHOLD;
+    private readonly DEFAULT_EXPAND_THRESHOLD;
+    private readonly DEFAULT_STATE_CHANGE_COOLDOWN;
+    private readonly DEFAULT_DEBOUNCE_DELAY;
+    isScrolled: _angular_core.WritableSignal<boolean>;
+    scrollProgress: _angular_core.WritableSignal<number>;
+    private scrollTimeout;
+    private lastStateChangeTime;
+    private isProgrammaticScroll;
+    private config;
+    configure(config: HeaderScrollConfig): void;
+    handleScroll(embedded?: boolean): void;
+    resetHeaderState(): void;
+    resetState(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeaderScrollService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<HeaderScrollService>;
+}
+declare class IconService {
+    private http;
+    private sanitizer;
+    private cache;
+    constructor(http: HttpClient, sanitizer: DomSanitizer);
+    getIcon(name: string | undefined, size?: string): Observable<SafeHtml>;
+    private processSvg;
+    private getDefaultIcon;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IconService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<IconService>;
+}
+type ShadowLevel = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+interface ScrollDepthInfo {
+    scrollTop: number;
+    scrollHeight: number;
+    clientHeight: number;
+    scrollPercentage: number;
+    shadowLevel: ShadowLevel;
+}
+declare class ScrollDepthService {
+    private scrollDepthSubjects;
+    trackScrollDepth(element: HTMLElement | Window, id: string): Observable<ScrollDepthInfo>;
+    private calculateScrollInfo;
+    private calculateShadowLevel;
+    cleanup(id: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ScrollDepthService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ScrollDepthService>;
+}
+interface NavigationState {
+    sourceElementId: string | null;
+    sourceScrollPosition: number;
+    sourceViewportCoords: {
+        x: number;
+        y: number;
+    } | null;
+    targetElementId: string | null;
+    isBackButtonVisible: boolean;
+    targetScrollPosition: number;
+}
+declare class NavigationStateService {
+    private navigationState;
+    getNavigationState(): _angular_core.Signal<NavigationState>;
+    setNavigationState(sourceElementId: string, sourceScrollPosition: number, sourceViewportCoords: {
+        x: number;
+        y: number;
+    }, targetElementId: string): void;
+    showBackButton(): void;
+    hideBackButton(): void;
+    clearNavigationState(): void;
+    hasNavigationState(): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavigationStateService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NavigationStateService>;
+}
+interface BusinessSearchResult {
+    id: string;
+    type: 'section' | 'subsection' | 'item';
+    itemType?: string;
+    title: string;
+    description: string;
+    score: number;
+    sectionId?: string;
+    sectionTitle?: string;
+    subsectionId?: string;
+    subsectionTitle?: string;
+    data: ProfileSectionInterface | ProfileSubsectionInterface | ProfileItemInterface;
+    matchedFields: string[];
+}
+declare class BusinessProfileSearchService {
+    private searchQuery;
+    private allSections;
+    private allSubsections;
+    private allItems;
+    isSearchOpen: _angular_core.WritableSignal<boolean>;
+    highlightedResultId: _angular_core.WritableSignal<string | null>;
+    activeSearchResult: _angular_core.WritableSignal<BusinessSearchResult | null>;
+    searchResults: _angular_core.Signal<BusinessSearchResult[]>;
+    hasResults: _angular_core.Signal<boolean>;
+    setSearchQuery(query: string): void;
+    getSearchQuery(): string;
+    setProfile(profile: ProfileInterface): void;
+    openSearch(): void;
+    closeSearch(): void;
+    highlightResult(id: string): void;
+    clearHighlight(): void;
+    setActiveResult(result: BusinessSearchResult | null): void;
+    clearActiveResult(): void;
+    private buildSectionDescription;
+    private buildSubsectionDescription;
+    private buildItemDescription;
+    private scoreItem;
+    private fuzzyMatch;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BusinessProfileSearchService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<BusinessProfileSearchService>;
+}
 declare class ModalComponent {
     isLightMode: _angular_core.InputSignal<boolean>;
     viewMode: _angular_core.InputSignal<ViewModeEnum>;
     private metricNameCache;
     private allMetricsSignal;
     private modalStateSignal;
+    Math: Math;
+    private animatedMetricValues;
+    private animatedTrendValues;
+    private animationFrames;
     isOpen: _angular_core.Signal<boolean>;
-    modalType: _angular_core.Signal<"metric" | "insight" | "chart" | "insights-list" | "metrics-list" | "recommendations-list" | "competitive-analysis" | null>;
+    modalType: _angular_core.Signal<"insight" | "metric" | "chart" | "insights-list" | "metrics-list" | "charts-list" | "recommendations-list" | "competitive-analysis" | null>;
     charts: _angular_core.Signal<AiChartInterface[]>;
     modalKey: _angular_core.Signal<number>;
     insightData: _angular_core.Signal<InsightBlockInterface | null>;
     metricData: _angular_core.Signal<PerformanceMetricInterface | null>;
     chartData: _angular_core.Signal<AiChartInterface | null>;
     chartDescription: _angular_core.Signal<string>;
-    chartType: _angular_core.Signal<_jebgem_model_lib_funnel_analysis_ai_chart_interface.ChartTypeEnum | null>;
+    chartType: _angular_core.Signal<_jebgem_model.ChartTypeEnum | null>;
     chartLineData: _angular_core.Signal<AiChartInterface | null>;
     chartBarData: _angular_core.Signal<AiChartInterface | null>;
     chartPieData: _angular_core.Signal<AiChartInterface | null>;
     chartAreaData: _angular_core.Signal<AiChartInterface | null>;
     insightsListData: _angular_core.Signal<InsightBlockInterface[] | null>;
-    metricsListData: _angular_core.Signal<PerformanceMetricInterface | AiChartInterface | InsightBlockInterface | (PerformanceMetricInterface | InsightBlockInterface)[] | null>;
+    metricsListData: _angular_core.Signal<InsightBlockInterface | PerformanceMetricInterface | AiChartInterface | (InsightBlockInterface | PerformanceMetricInterface)[] | null>;
     metricsListMetrics: _angular_core.Signal<PerformanceMetricInterface[]>;
     metricsListInsightContext: _angular_core.Signal<{
         title: string;
@@ -484,7 +642,15 @@ declare class ModalComponent {
         businessContext: string;
         priority: number;
     } | null>;
-    recommendationsListData: _angular_core.Signal<PerformanceMetricInterface | AiChartInterface | InsightBlockInterface | (PerformanceMetricInterface | InsightBlockInterface)[] | null>;
+    chartsListData: _angular_core.Signal<InsightBlockInterface | PerformanceMetricInterface | AiChartInterface | (InsightBlockInterface | PerformanceMetricInterface)[] | null>;
+    chartsListCharts: _angular_core.Signal<AiChartInterface[]>;
+    chartsListInsightContext: _angular_core.Signal<{
+        title: string;
+        description: string;
+        businessContext: string;
+        priority: number;
+    } | null>;
+    recommendationsListData: _angular_core.Signal<InsightBlockInterface | PerformanceMetricInterface | AiChartInterface | (InsightBlockInterface | PerformanceMetricInterface)[] | null>;
     recommendationsListRecommendations: _angular_core.Signal<string[]>;
     recommendationsListInsightContext: _angular_core.Signal<{
         title: string;
@@ -492,7 +658,7 @@ declare class ModalComponent {
         businessContext: string;
         priority: number;
     } | null>;
-    competitiveAnalysisData: _angular_core.Signal<PerformanceMetricInterface | AiChartInterface | InsightBlockInterface | (PerformanceMetricInterface | InsightBlockInterface)[] | null>;
+    competitiveAnalysisData: _angular_core.Signal<InsightBlockInterface | PerformanceMetricInterface | AiChartInterface | (InsightBlockInterface | PerformanceMetricInterface)[] | null>;
     competitiveAnalysisContext: _angular_core.Signal<{
         title: string;
         description: string;
@@ -507,12 +673,12 @@ declare class ModalComponent {
     allCharts: _angular_core.Signal<AiChartInterface[]>;
     hasPreviousState: _angular_core.Signal<boolean>;
     currentModalState: _angular_core.Signal<{
-        type: "insight" | "metric" | "chart" | "insights-list" | "metrics-list" | "recommendations-list" | "competitive-analysis" | null;
+        type: "insight" | "metric" | "chart" | "insights-list" | "metrics-list" | "charts-list" | "recommendations-list" | "competitive-analysis" | null;
         data: InsightBlockInterface | PerformanceMetricInterface | AiChartInterface | (InsightBlockInterface | PerformanceMetricInterface)[] | null;
         charts: AiChartInterface[];
         openedAt: number;
         previousState: {
-            type: "insight" | "metric" | "chart" | "insights-list" | "metrics-list" | "recommendations-list" | "competitive-analysis";
+            type: "insight" | "metric" | "chart" | "insights-list" | "metrics-list" | "charts-list" | "recommendations-list" | "competitive-analysis";
             data: InsightBlockInterface | PerformanceMetricInterface | AiChartInterface | (InsightBlockInterface | PerformanceMetricInterface)[];
             charts: AiChartInterface[];
             previousState: null;
@@ -522,16 +688,23 @@ declare class ModalComponent {
     expandedSection: _angular_core.Signal<string | undefined>;
     modalTitle: _angular_core.Signal<string>;
     private modalService;
-    private tooltipDataService;
-    getMetricTooltip(metric: PerformanceMetricInterface): MetricValueTooltipContent;
     constructor();
     getInsightContextPriorityBadgeClass(priority: number): string;
     private computeModalTitle;
     closeModal(): void;
     openInsightModal(insight: InsightBlockInterface): void;
     openMetricModalFromList(metric: PerformanceMetricInterface): void;
+    openChartModalFromList(chart: AiChartInterface): void;
     goBack(): void;
     formatMetricName(name: string): string;
+    formatMetricValue(metric: PerformanceMetricInterface): string;
+    getMetricTrendClass(metric: PerformanceMetricInterface): string;
+    animateMetricsList(metrics: PerformanceMetricInterface[]): void;
+    animateMetricValue(index: number, targetValue: number): void;
+    animateMetricTrend(index: number, targetTrend: number): void;
+    getAnimatedMetricValue(index: number): number;
+    getAnimatedTrendValue(index: number): number;
+    formatAnimatedMetricValue(metric: PerformanceMetricInterface, animatedValue: number): string;
     setMetricsAndInsights(metrics: PerformanceMetricInterface[], insights: InsightBlockInterface[], allCharts?: AiChartInterface[]): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ModalComponent, "symphiq-funnel-analysis-modal", never, { "isLightMode": { "alias": "isLightMode"; "required": false; "isSignal": true; }; "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -590,21 +763,6 @@ declare class SearchService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<SearchService>;
 }
-interface GestureDetail {
-    type: string;
-    startX: number;
-    startY: number;
-    startTime: number;
-    currentX: number;
-    currentY: number;
-    velocityX: number;
-    velocityY: number;
-    deltaX: number;
-    deltaY: number;
-    currentTime: number;
-    event: UIEvent;
-    data?: any;
-}
 interface ScrollBaseDetail {
     isScrolling: boolean;
 }
@@ -626,6 +784,7 @@ declare class SymphiqFunnelAnalysisDashboardComponent implements AfterViewInit {
     private tooltipService;
     modalComponent?: ModalComponent;
     dashboardContainer?: ElementRef<HTMLElement>;
+    protected readonly ViewModeEnum: typeof ViewModeEnum;
     requestedByUser: _angular_core.InputSignal<UserInterface | undefined>;
     viewMode: _angular_core.InputSignal<ViewModeEnum>;
     funnelAnalysis: _angular_core.InputSignal<FunnelAnalysisInterface | undefined>;
@@ -728,6 +887,7 @@ declare class SymphiqFunnelAnalysisDashboardComponent implements AfterViewInit {
     showPerformanceMetrics: _angular_core.Signal<boolean>;
     showPerformanceBreakdowns: _angular_core.Signal<boolean>;
     showCompetitiveIntelligence: _angular_core.Signal<boolean>;
+    tocSections: _angular_core.Signal<ProfileSectionInterface[]>;
     private dateFormatCache;
     constructor(funnelOrderService: FunnelOrderService, viewModeService: ViewModeService, searchService: SearchService, tooltipService: TooltipService);
     ngAfterViewInit(): void;
@@ -841,7 +1001,7 @@ declare class MetricCardComponent {
     competitiveScoreBadgeLightClass: _angular_core.Signal<string>;
     competitiveScoreBadgeDarkClass: _angular_core.Signal<string>;
     competitiveScoreBadgeClass: _angular_core.Signal<string>;
-    competitiveScoreTextClass: _angular_core.Signal<"text-emerald-600" | "text-blue-700" | "text-blue-400" | "" | "text-orange-600">;
+    competitiveScoreTextClass: _angular_core.Signal<"" | "text-emerald-600" | "text-blue-700" | "text-blue-400" | "text-orange-600">;
     competitiveComparisonDefaultClass: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
     competitiveComparisonClass: _angular_core.Signal<"text-slate-700" | "text-slate-300" | "text-emerald-600 font-semibold" | "text-orange-600 font-semibold">;
     getCompetitiveScoreIcon(): string;
@@ -886,6 +1046,9 @@ declare class InsightCardComponent {
     descriptionClass: _angular_core.Signal<string>;
     metricButtonClass: _angular_core.Signal<string>;
     recommendationItemClass: _angular_core.Signal<string>;
+    recommendationsContainerLightClass: _angular_core.Signal<string>;
+    recommendationsContainerDarkClass: _angular_core.Signal<string>;
+    recommendationsContainerClass: _angular_core.Signal<string>;
     priorityBadgeLightClass: _angular_core.Signal<"w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-red-100/70 text-red-700 border-red-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-amber-100/70 text-amber-700 border-amber-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-blue-100/70 text-blue-700 border-blue-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-slate-100/70 text-slate-700 border-slate-400/60">;
     priorityBadgeDarkClass: _angular_core.Signal<"w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-red-500/20 text-red-400 border-red-500/50" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-amber-500/20 text-amber-400 border-amber-500/50" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-blue-500/20 text-blue-400 border-blue-500/50" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-slate-500/20 text-slate-400 border-slate-500/50">;
     priorityBadgeClass: _angular_core.Signal<"w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-red-100/70 text-red-700 border-red-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-amber-100/70 text-amber-700 border-amber-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-blue-100/70 text-blue-700 border-blue-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-slate-100/70 text-slate-700 border-slate-400/60" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-red-500/20 text-red-400 border-red-500/50" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-amber-500/20 text-amber-400 border-amber-500/50" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-blue-500/20 text-blue-400 border-blue-500/50" | "w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold border-2 backdrop-blur-md bg-slate-500/20 text-slate-400 border-slate-500/50">;
@@ -904,7 +1067,7 @@ declare class InsightCardComponent {
     formatMetricName(name: string): string;
     openMetricModal(metricName: string): void;
     openMetricsModal(): void;
-    openRecommendationsModal(): void;
+    openChartsModal(): void;
     openCompetitiveAnalysisModal(): void;
     openChartModal(chart: AiChartInterface): void;
     handleHeaderClick(event: Event): void;
@@ -1069,10 +1232,10 @@ declare class OverallAssessmentComponent {
     revenueTrendArrowPath: _angular_core.Signal<"M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" | "M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" | "M3 10h11m0 0l-4-4m4 4l-4 4">;
     lightModeTrendIconClass: _angular_core.Signal<"text-emerald-600" | "text-red-600">;
     darkModeTrendIconClass: _angular_core.Signal<"text-emerald-400" | "text-red-400">;
-    trendIconClass: _angular_core.Signal<"text-emerald-600" | "text-emerald-400" | "text-red-600" | "text-red-400">;
+    trendIconClass: _angular_core.Signal<"text-emerald-400" | "text-red-400" | "text-emerald-600" | "text-red-600">;
     lightModeTrendValueClass: _angular_core.Signal<"text-emerald-600" | "text-red-600">;
     darkModeTrendValueClass: _angular_core.Signal<"text-emerald-400" | "text-red-400">;
-    trendValueClass: _angular_core.Signal<"text-emerald-600" | "text-emerald-400" | "text-red-600" | "text-red-400">;
+    trendValueClass: _angular_core.Signal<"text-emerald-400" | "text-red-400" | "text-emerald-600" | "text-red-600">;
     formattedRevenueTrend: _angular_core.Signal<string>;
     formattedRevenueTarget: _angular_core.Signal<string>;
     hasRevenuePacing: _angular_core.Signal<boolean>;
@@ -1342,11 +1505,9 @@ declare class SymphiqFunnelAnalysisPreviewComponent {
     insightsCount: _angular_core.Signal<any>;
     revenueMetric: _angular_core.Signal<PerformanceMetricInterface | undefined>;
     topMetrics: _angular_core.Signal<PerformanceMetricInterface[]>;
-    statusLabel: _angular_core.Signal<any>;
-    statusIcon: _angular_core.Signal<"↑" | "→" | "⚠" | "•">;
     formattedRevenueValue: _angular_core.Signal<string>;
     formattedRevenueTrend: _angular_core.Signal<string>;
-    revenueStatusIcon: _angular_core.Signal<"↑" | "→" | "⚠" | "•">;
+    revenueStatusIcon: _angular_core.Signal<"↑" | "•" | "→" | "⚠">;
     hasCompetitiveData: _angular_core.Signal<boolean>;
     hasOverallCompetitiveBenchmark: _angular_core.Signal<boolean>;
     overallCompetitiveDescription: _angular_core.Signal<any>;
@@ -1387,7 +1548,7 @@ declare class SymphiqFunnelAnalysisPreviewComponent {
     competitiveTooltip: _angular_core.Signal<{
         industry: any;
         metricBenchmark: string;
-        competitiveScore: "LAGGING" | "LEADING" | "COMPETITIVE";
+        competitiveScore: "LEADING" | "LAGGING" | "COMPETITIVE";
         description: string;
         keyOpportunities: string;
     }>;
@@ -1440,7 +1601,7 @@ declare class SymphiqFunnelAnalysisPreviewComponent {
     getMetricLabel(metric: PerformanceMetricInterface): string;
     formatMetricValue(metric: PerformanceMetricInterface): string;
     formatTrend(metric: PerformanceMetricInterface): string;
-    getMetricTooltip(metric: PerformanceMetricInterface): any;
+    getMetricTooltip(metric: PerformanceMetricInterface): MetricValueTooltipContent;
     private formatCurrency;
     private formatPercent;
     private getGradeExplanation;
@@ -1451,6 +1612,493 @@ declare class SymphiqFunnelAnalysisPreviewComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SymphiqFunnelAnalysisPreviewComponent, "symphiq-funnel-analysis-preview", never, { "analysisInput": { "alias": "funnelAnalysis"; "required": false; "isSignal": true; }; "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "useSampleData": { "alias": "useSampleData"; "required": false; "isSignal": true; }; "scrollElement": { "alias": "scrollElement"; "required": false; "isSignal": true; }; }, { "onViewAnalysis": "onViewAnalysis"; }, never, never, true, never>;
 }
+declare class ProfileItemLookupService {
+    private profileData;
+    setProfile(profile: ProfileInterface | undefined): void;
+    findItemById(id: string): ProfileItemInterface | undefined;
+    findItemsByIds(ids: string[]): ProfileItemInterface[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProfileItemLookupService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ProfileItemLookupService>;
+}
+declare class ProfileContextService {
+    private contextIndex;
+    indexProfile(sections: any[], recommendations?: ProfileAnalysisRecommendationInterface[]): void;
+    getRegions(): ProfileItemInterface[];
+    getSeasons(): ProfileItemInterface[];
+    getPriceTiers(): ProfileItemInterface[];
+    getCustomerSegments(): ProfileItemInterface[];
+    getProductCategories(): ProfileItemInterface[];
+    getFocusAreas(): ProfileItemInterface[];
+    getItemById(id: string): ProfileItemInterface | undefined;
+    getItemsByIds(ids: string[]): ProfileItemInterface[];
+    getCompetitors(): ProfileItemInterface[];
+    getRecommendationById(id: string): ProfileAnalysisRecommendationInterface | undefined;
+    getCompetitorsByIds(ids: string[]): ProfileItemInterface[];
+    getRecommendationsByProfileItemIds(itemIds: string[]): ProfileAnalysisRecommendationInterface[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProfileContextService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ProfileContextService>;
+}
+declare class SymphiqBusinessAnalysisDashboardComponent implements OnInit, AfterViewInit, OnDestroy {
+    requestedByUser?: {
+        firstName: string;
+        lastName: string;
+    };
+    viewMode: ViewModeEnum;
+    embedded: boolean;
+    scrollEvent?: Event;
+    scrollElement?: HTMLElement;
+    isLoading: boolean;
+    useSampleData: boolean;
+    profile?: ProfileInterface;
+    protected headerScrollService: HeaderScrollService;
+    protected lookupService: ProfileItemLookupService;
+    protected navigationService: NavigationStateService;
+    protected profileContextService: ProfileContextService;
+    protected searchService: BusinessProfileSearchService;
+    protected currentProfile: _angular_core.WritableSignal<ProfileInterface | undefined>;
+    protected scrollProgress: _angular_core.Signal<number>;
+    protected isLightMode: _angular_core.Signal<boolean>;
+    protected isCompactView: _angular_core.WritableSignal<boolean>;
+    protected currentSectionTitle: _angular_core.WritableSignal<string>;
+    protected currentSubsectionTitle: _angular_core.WritableSignal<string>;
+    protected sectionTitleFading: _angular_core.WritableSignal<boolean>;
+    protected subsectionTitleFading: _angular_core.WritableSignal<boolean>;
+    protected selectedSearchIndex: _angular_core.WritableSignal<number>;
+    protected sections: _angular_core.Signal<ProfileSectionInterface[]>;
+    private subsectionObserver?;
+    private sectionUpdateTimeout?;
+    private subsectionUpdateTimeout?;
+    private lastSectionTitle;
+    private lastSubsectionTitle;
+    private scrollToTargetHandler?;
+    private lastScrollY;
+    private scrollDirection;
+    private scrollDirectionHandler?;
+    protected sectionHasContent(section: ProfileSectionInterface): boolean;
+    protected subsectionHasContent(subsection: ProfileSubsectionInterface): boolean;
+    constructor();
+    onScroll(): void;
+    protected toggleExpandedView(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    protected openSearch(): void;
+    protected closeSearch(): void;
+    protected onSearchChange(query: string): void;
+    protected onSearchResultSelected(result: BusinessSearchResult): void;
+    private scrollToSearchResult;
+    private highlightAndPulseItem;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    protected getContainerClasses(): string;
+    protected getBackgroundClasses(): string;
+    protected getMeshGradientClasses(): string;
+    protected getTopoPatternClasses(): string;
+    protected getOrbClasses(index: number): string;
+    protected getHeaderClasses(): string;
+    protected getMainTitleClasses(): string;
+    protected getSubtitleClasses(): string;
+    protected getLoadingOverlayClasses(): string;
+    protected getSpinnerClasses(): string;
+    protected trackBySectionId(index: number, section: ProfileSectionInterface): string | number;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SymphiqBusinessAnalysisDashboardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SymphiqBusinessAnalysisDashboardComponent, "symphiq-business-analysis-dashboard", never, { "requestedByUser": { "alias": "requestedByUser"; "required": false; }; "viewMode": { "alias": "viewMode"; "required": false; }; "embedded": { "alias": "embedded"; "required": false; }; "scrollEvent": { "alias": "scrollEvent"; "required": false; }; "scrollElement": { "alias": "scrollElement"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "useSampleData": { "alias": "useSampleData"; "required": false; }; "profile": { "alias": "profile"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class ProfileSectionComponent {
+    private sectionSignal;
+    set section(value: ProfileSectionInterface | undefined);
+    get section(): ProfileSectionInterface | null;
+    viewMode: ViewModeEnum;
+    forceExpanded: boolean;
+    protected visibleSubsections: _angular_core.Signal<ProfileSubsectionInterface[]>;
+    protected subsectionHasContent(subsection: ProfileSubsectionInterface): boolean;
+    protected getContainerClasses(): string;
+    protected getIconContainerClasses(): string;
+    protected getTitleClasses(): string;
+    protected getDividerClasses(): string;
+    protected trackBySubsectionId(index: number, subsection: ProfileSubsectionInterface): string | number;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProfileSectionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProfileSectionComponent, "symphiq-profile-section", never, { "section": { "alias": "section"; "required": false; }; "viewMode": { "alias": "viewMode"; "required": false; }; "forceExpanded": { "alias": "forceExpanded"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class ProfileSubsectionComponent {
+    subsection?: ProfileSubsectionInterface;
+    viewMode: ViewModeEnum;
+    parentSectionTitle?: string;
+    subsectionIndex: number;
+    forceExpanded: boolean;
+    private sanitizer;
+    private profileContextService;
+    protected ProfileItemTypeEnum: typeof ProfileItemTypeEnum;
+    protected sortedItems: _angular_core.Signal<ProfileItemInterface[]>;
+    protected formatContentWithLineBreaks(content: string): SafeHtml;
+    protected getContainerClasses(): string;
+    protected getIconClasses(): string;
+    protected getTitleClasses(): string;
+    protected getContentClasses(): string;
+    protected getVisualContainerClasses(): string;
+    protected getDisplayContent(): string | null;
+    protected trackByItemId(index: number, item: ProfileItemInterface): string | number;
+    protected getCompetitiveBenchmark(): any;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProfileSubsectionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProfileSubsectionComponent, "symphiq-profile-subsection", never, { "subsection": { "alias": "subsection"; "required": false; }; "viewMode": { "alias": "viewMode"; "required": false; }; "parentSectionTitle": { "alias": "parentSectionTitle"; "required": false; }; "subsectionIndex": { "alias": "subsectionIndex"; "required": false; }; "forceExpanded": { "alias": "forceExpanded"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class ProfileItemCardComponent {
+    item?: ProfileItemInterface;
+    viewMode: ViewModeEnum;
+    subsectionId?: string;
+    forceExpanded: boolean;
+    animationIndex: number;
+    isLoading: boolean;
+    protected isRecommendation(): boolean;
+    protected getCardClasses(): string;
+    protected getIconClasses(): string;
+    protected getLabelClasses(): string;
+    protected getValueClasses(): string;
+    protected getItemIcon(): IconObjectInterface$1 | undefined;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProfileItemCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProfileItemCardComponent, "symphiq-profile-item-card", never, { "item": { "alias": "item"; "required": false; }; "viewMode": { "alias": "viewMode"; "required": false; }; "subsectionId": { "alias": "subsectionId"; "required": false; }; "forceExpanded": { "alias": "forceExpanded"; "required": false; }; "animationIndex": { "alias": "animationIndex"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class NapkinVisualPlaceholderComponent implements OnInit, OnChanges {
+    visual?: NapkinVisualInterface;
+    viewMode: ViewModeEnum;
+    private sanitizer;
+    private modalService;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    protected hasSvgData(): boolean;
+    protected getSvgDataForViewMode(): string | undefined;
+    protected getSanitizedSvg(): SafeHtml;
+    protected getSvgContainerClasses(): string;
+    protected getContainerClasses(): string;
+    protected getIconContainerClasses(): string;
+    protected getTitleClasses(): string;
+    protected getSubtitleClasses(): string;
+    protected getBadgeClasses(): string;
+    protected getStyleLabel(styleId?: string): string;
+    protected getExpandIconClasses(): string;
+    protected openModal(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NapkinVisualPlaceholderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NapkinVisualPlaceholderComponent, "symphiq-napkin-visual-placeholder", never, { "visual": { "alias": "visual"; "required": false; }; "viewMode": { "alias": "viewMode"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class HierarchyDisplayComponent {
+    hierarchyData?: HierarchyDataInterface;
+    viewMode: ViewModeEnum;
+    protected getNodeClasses(level: number): string;
+    protected getNodeIconClasses(level: number): string;
+    protected getNodeLabelClasses(): string;
+    protected getNodeTextClasses(): string;
+    protected getConnectorClasses(): string;
+    protected getCompetitiveMetricsClasses(): string;
+    protected getCompetitiveMetricsTitleClasses(): string;
+    protected hasCompetitiveMetrics(): boolean;
+    protected getIndustryMarketShare(): number | undefined;
+    protected getCompetitorOverlap(): number | undefined;
+    protected getMarketShareType(share: number): 'advantage' | 'parity' | 'disadvantage' | 'opportunity' | 'threat';
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HierarchyDisplayComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HierarchyDisplayComponent, "symphiq-hierarchy-display", never, { "hierarchyData": { "alias": "hierarchyData"; "required": false; }; "viewMode": { "alias": "viewMode"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class SectionNavigationComponent implements OnInit {
+    sections: ProfileSectionInterface[];
+    viewMode: ViewModeEnum;
+    embedded: boolean;
+    protected activeSection: _angular_core.WritableSignal<number>;
+    ngOnInit(): void;
+    protected getNavClasses(): string;
+    protected getDotClasses(index: number): string;
+    protected getDotInnerClasses(index: number): string;
+    protected scrollToSection(sectionId: string): void;
+    protected trackBySectionId(index: number, section: ProfileSectionInterface): string | number;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SectionNavigationComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SectionNavigationComponent, "symphiq-section-navigation", never, { "sections": { "alias": "sections"; "required": false; }; "viewMode": { "alias": "viewMode"; "required": false; }; "embedded": { "alias": "embedded"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class FloatingTocComponent implements OnInit, OnDestroy {
+    sections: ProfileSectionInterface[];
+    viewMode: ViewModeEnum;
+    embedded: boolean;
+    protected isHovered: _angular_core.WritableSignal<boolean>;
+    protected isPinned: _angular_core.WritableSignal<boolean>;
+    protected activeSection: _angular_core.WritableSignal<string>;
+    protected activeSubsection: _angular_core.WritableSignal<string>;
+    protected expandedSections: _angular_core.WritableSignal<Set<string>>;
+    private readonly HEADER_OFFSET;
+    protected tocSections: _angular_core.Signal<{
+        id: string;
+        title: string;
+        icon: _jebgem_model.IconObjectInterface | undefined;
+        subsections: {
+            id: string;
+            title: string;
+            parentId: string;
+        }[];
+    }[]>;
+    private observer?;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private setupIntersectionObserver;
+    protected onMouseEnter(): void;
+    protected onMouseLeave(): void;
+    protected togglePinned(): void;
+    protected isSectionExpanded(sectionId: string): boolean;
+    protected scrollToSection(sectionId: string): void;
+    protected scrollToSubsection(subsectionId: string): void;
+    protected scrollToTop(): void;
+    protected getOuterContainerClasses(): string;
+    protected getInnerContainerClasses(): string;
+    protected getCollapsedIconClasses(): string;
+    protected getExpandedContentClasses(): string;
+    protected getBorderClasses(): string;
+    protected getHeaderIconClasses(): string;
+    protected getHeaderTextClasses(): string;
+    protected getPinButtonClasses(): string;
+    protected getScrollbarClasses(): string;
+    protected getSectionButtonClasses(sectionId: string): string;
+    protected getSectionIconClasses(sectionId: string): string;
+    protected getActiveIndicatorClasses(): string;
+    protected getSubsectionButtonClasses(subsectionId: string): string;
+    protected getActiveSubIndicatorClasses(): string;
+    protected getBackToTopButtonClasses(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FloatingTocComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FloatingTocComponent, "symphiq-floating-toc", never, { "sections": { "alias": "sections"; "required": false; }; "viewMode": { "alias": "viewMode"; "required": false; }; "embedded": { "alias": "embedded"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class FloatingBackButtonComponent implements OnInit, OnDestroy {
+    viewMode: ViewModeEnum;
+    embedded: boolean;
+    private navigationService;
+    private readonly HEADER_OFFSET;
+    protected navigationState: _angular_core.Signal<NavigationState>;
+    protected isVisible: _angular_core.Signal<boolean>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    protected navigateBack(): void;
+    protected close(): void;
+    protected getOuterContainerClasses(): string;
+    protected getInnerContainerClasses(): string;
+    protected getBackButtonClasses(): string;
+    protected getCloseButtonClasses(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FloatingBackButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FloatingBackButtonComponent, "symphiq-floating-back-button", never, { "viewMode": { "alias": "viewMode"; "required": false; }; "embedded": { "alias": "embedded"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class BusinessAnalysisModalComponent implements OnInit {
+    isLightMode: _angular_core.InputSignal<boolean>;
+    private modalService;
+    private sanitizer;
+    isOpen: _angular_core.WritableSignal<boolean>;
+    modalType: _angular_core.WritableSignal<string | null>;
+    modalTitle: _angular_core.WritableSignal<string>;
+    visualizationData: _angular_core.WritableSignal<VisualizationData | null>;
+    competitiveGapData: _angular_core.WritableSignal<{
+        item: ProfileItemInterface;
+        viewMode: ViewModeEnum;
+    } | null>;
+    recommendationActionStepsData: _angular_core.WritableSignal<{
+        title?: string;
+        actionSteps: ProfileAnalysisRecommendationActionStepInterface[];
+        viewMode: ViewModeEnum;
+    } | null>;
+    visualizationType: _angular_core.Signal<"horizontal-bar" | "circular-progress" | "napkin-visual" | "custom" | null>;
+    horizontalBarData: _angular_core.Signal<{
+        percentage: number;
+        label: string;
+        value: string;
+        gradient?: string;
+    }[] | null>;
+    circularProgressData: _angular_core.Signal<{
+        percentage: number;
+        progressColor?: string;
+        backgroundColor?: string;
+    } | null>;
+    napkinVisualData: _angular_core.Signal<{
+        svgData: string;
+        viewMode?: string;
+        styleId?: string;
+    } | null>;
+    competitiveGapItem: _angular_core.Signal<ProfileItemInterface | undefined>;
+    constructor();
+    ngOnInit(): void;
+    getSanitizedSvg(): SafeHtml;
+    closeModal(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BusinessAnalysisModalComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BusinessAnalysisModalComponent, "symphiq-business-analysis-modal", never, { "isLightMode": { "alias": "isLightMode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+declare class HorizontalBarComponent implements OnInit, OnDestroy {
+    percentage: number;
+    label: string;
+    value: string;
+    height: number;
+    showLabel: boolean;
+    gradient: string;
+    isDark: boolean;
+    animationDuration: number;
+    animationDelay: number;
+    private elementRef;
+    private observer?;
+    private animationFrame?;
+    private hasAnimated;
+    protected animatedPercentage: _angular_core.WritableSignal<number>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private setupObserver;
+    private animateProgress;
+    protected animatedDisplayValue(): string;
+    get backgroundClasses(): string;
+    get barClasses(): string;
+    get labelClasses(): string;
+    get valueClasses(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HorizontalBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HorizontalBarComponent, "symphiq-horizontal-bar", never, { "percentage": { "alias": "percentage"; "required": false; }; "label": { "alias": "label"; "required": false; }; "value": { "alias": "value"; "required": false; }; "height": { "alias": "height"; "required": false; }; "showLabel": { "alias": "showLabel"; "required": false; }; "gradient": { "alias": "gradient"; "required": false; }; "isDark": { "alias": "isDark"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; "animationDelay": { "alias": "animationDelay"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class CircularProgressComponent implements OnInit, OnDestroy {
+    percentage: number;
+    size: number;
+    strokeWidth: number;
+    progressColor: string;
+    backgroundColor: string;
+    showPercentage: boolean;
+    textClasses: string;
+    strokeLinecap: 'butt' | 'round' | 'square';
+    animationDuration: number;
+    animationDelay: number;
+    private elementRef;
+    private observer?;
+    private animationFrame?;
+    private hasAnimated;
+    protected animatedPercentage: _angular_core.WritableSignal<number>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private setupObserver;
+    private animateProgress;
+    get radius(): number;
+    get circumference(): number;
+    protected animatedOffset(): number;
+    protected animatedDisplayValue(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CircularProgressComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CircularProgressComponent, "symphiq-circular-progress", never, { "percentage": { "alias": "percentage"; "required": false; }; "size": { "alias": "size"; "required": false; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; }; "progressColor": { "alias": "progressColor"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "showPercentage": { "alias": "showPercentage"; "required": false; }; "textClasses": { "alias": "textClasses"; "required": false; }; "strokeLinecap": { "alias": "strokeLinecap"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; "animationDelay": { "alias": "animationDelay"; "required": false; }; }, {}, never, never, true, never>;
+}
+type VisualizationType = 'horizontal-bar' | 'circular-progress' | 'custom';
+declare class VisualizationContainerComponent {
+    isLightMode: _angular_core.InputSignal<boolean>;
+    visualizationType: _angular_core.InputSignal<VisualizationType>;
+    visualizationData: _angular_core.InputSignal<unknown>;
+    disableInteraction: _angular_core.InputSignal<boolean>;
+    visualizationClick: _angular_core.OutputEmitterRef<{
+        type: VisualizationType;
+        data: unknown;
+    }>;
+    containerClass: _angular_core.Signal<"" | "cursor-pointer">;
+    iconClass: _angular_core.Signal<"text-slate-400 group-hover:text-blue-500" | "text-slate-500 group-hover:text-blue-400">;
+    onExpandClick(event: Event): void;
+    onVisualizationClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<VisualizationContainerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<VisualizationContainerComponent, "symphiq-visualization-container", never, { "isLightMode": { "alias": "isLightMode"; "required": false; "isSignal": true; }; "visualizationType": { "alias": "visualizationType"; "required": false; "isSignal": true; }; "visualizationData": { "alias": "visualizationData"; "required": false; "isSignal": true; }; "disableInteraction": { "alias": "disableInteraction"; "required": false; "isSignal": true; }; }, { "visualizationClick": "visualizationClick"; }, never, ["*"], true, never>;
+}
+declare class ScrollProgressBarComponent {
+    set progress(value: number);
+    isLightMode: boolean;
+    embedded: boolean;
+    protected scrollProgress: _angular_core.WritableSignal<number>;
+    protected getContainerClasses(): string;
+    protected getGradientClasses(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ScrollProgressBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ScrollProgressBarComponent, "symphiq-scroll-progress-bar", never, { "progress": { "alias": "progress"; "required": false; }; "isLightMode": { "alias": "isLightMode"; "required": false; }; "embedded": { "alias": "embedded"; "required": false; }; }, {}, never, never, true, never>;
+}
+interface IconObjectInterface {
+    name?: string;
+    source?: 'HEROICONS' | string;
+}
+declare class SymphiqIconComponent {
+    private iconService;
+    set icon(value: IconObjectInterface | undefined);
+    set size(value: string);
+    set customClass(value: string);
+    private iconSignal;
+    private sizeSignal;
+    private customClassSignal;
+    protected containerClass: _angular_core.Signal<string>;
+    private iconRequest$;
+    protected iconHtml: _angular_core.Signal<"" | _angular_platform_browser.SafeHtml>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SymphiqIconComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SymphiqIconComponent, "symphiq-icon", never, { "icon": { "alias": "icon"; "required": false; }; "size": { "alias": "size"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class SectionDividerComponent {
+    viewMode: ViewModeEnum;
+    animationDelay: string;
+    private subsectionsSignal;
+    set subsections(value: ProfileSubsectionInterface[] | undefined);
+    protected displayIcons: _angular_core.Signal<_jebgem_model.IconObjectInterface[]>;
+    protected isLightMode(): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SectionDividerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SectionDividerComponent, "symphiq-section-divider", never, { "viewMode": { "alias": "viewMode"; "required": false; }; "animationDelay": { "alias": "animationDelay"; "required": false; }; "subsections": { "alias": "subsections"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class SearchButtonComponent {
+    isLightMode: _angular_core.InputSignal<boolean>;
+    minimized: _angular_core.InputSignal<boolean>;
+    title: _angular_core.InputSignal<string>;
+    searchClick: _angular_core.OutputEmitterRef<void>;
+    buttonClass: _angular_core.Signal<"bg-slate-100 text-slate-700 hover:bg-slate-200 hover:text-slate-900" | "bg-slate-800 text-slate-300 hover:bg-slate-700 hover:text-white">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SearchButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SearchButtonComponent, "symphiq-search-button", never, { "isLightMode": { "alias": "isLightMode"; "required": false; "isSignal": true; }; "minimized": { "alias": "minimized"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; }, { "searchClick": "searchClick"; }, never, never, true, never>;
+}
+declare class SearchModalComponent {
+    searchInput?: ElementRef<HTMLInputElement>;
+    isLightMode: _angular_core.InputSignal<boolean>;
+    isOpen: _angular_core.InputSignal<boolean>;
+    searchQuery: _angular_core.InputSignal<string>;
+    results: _angular_core.InputSignal<BusinessSearchResult[]>;
+    hasResults: _angular_core.InputSignal<boolean>;
+    selectedIndex: _angular_core.InputSignal<number>;
+    placeholder: _angular_core.InputSignal<string>;
+    searchChange: _angular_core.OutputEmitterRef<string>;
+    resultSelected: _angular_core.OutputEmitterRef<BusinessSearchResult>;
+    close: _angular_core.OutputEmitterRef<void>;
+    constructor();
+    onSearchChange(query: string): void;
+    clearSearch(): void;
+    closeModal(): void;
+    selectResult(result: BusinessSearchResult): void;
+    getResultClass(index: number): string;
+    getTypeIconBgClass(type: string): string;
+    getTypeIconClass(type: string): string;
+    getTypeBadgeText(result: BusinessSearchResult): string;
+    containerClass: _angular_core.Signal<"bg-white border border-slate-200" | "bg-slate-800 border border-slate-700">;
+    inputClass: _angular_core.Signal<"bg-white text-slate-900 placeholder-slate-400" | "bg-slate-800 text-white placeholder-slate-500">;
+    iconClass: _angular_core.Signal<"text-slate-400" | "text-slate-500">;
+    clearButtonClass: _angular_core.Signal<"bg-slate-100 text-slate-600 hover:bg-slate-200" | "bg-slate-700 text-slate-300 hover:bg-slate-600">;
+    closeButtonClass: _angular_core.Signal<"text-slate-400 hover:text-slate-600 hover:bg-slate-100" | "text-slate-500 hover:text-slate-300 hover:bg-slate-700">;
+    resultsContainerClass: _angular_core.Signal<"border-slate-200" | "border-slate-700">;
+    resultTitleClass: _angular_core.Signal<"text-slate-900" | "text-white">;
+    resultDescClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
+    breadcrumbClass: _angular_core.Signal<string>;
+    typeBadgeClass: _angular_core.Signal<"bg-slate-100 text-slate-600" | "bg-slate-700 text-slate-300">;
+    arrowClass: _angular_core.Signal<"text-slate-400" | "text-slate-500">;
+    emptyStateClass: _angular_core.Signal<"border-slate-200" | "border-slate-700">;
+    emptyIconClass: _angular_core.Signal<"text-slate-600" | "text-slate-300">;
+    emptyTitleClass: _angular_core.Signal<"text-slate-900" | "text-white">;
+    emptyDescClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
+    shortcutsClass: _angular_core.Signal<"bg-slate-900/50 border-slate-700" | "bg-slate-50 border-slate-200">;
+    kbdClass: _angular_core.Signal<"bg-white border border-slate-300 text-slate-700 shadow-sm" | "bg-slate-700 border border-slate-600 text-slate-300">;
+    shortcutTextClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SearchModalComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SearchModalComponent, "symphiq-search-modal", never, { "isLightMode": { "alias": "isLightMode"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "searchQuery": { "alias": "searchQuery"; "required": false; "isSignal": true; }; "results": { "alias": "results"; "required": false; "isSignal": true; }; "hasResults": { "alias": "hasResults"; "required": false; "isSignal": true; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, { "searchChange": "searchChange"; "resultSelected": "resultSelected"; "close": "close"; }, never, never, true, never>;
+}
 declare class ChartContainerComponent {
     chart: _angular_core.InputSignal<AiChartInterface>;
     isLightMode: _angular_core.InputSignal<boolean>;
@@ -1460,6 +2108,7 @@ declare class ChartContainerComponent {
     viewMode: _angular_core.InputSignal<ViewModeEnum>;
     chartClick: _angular_core.OutputEmitterRef<AiChartInterface>;
     isExpanded: _angular_core.WritableSignal<boolean>;
+    protected ChartTypeEnum: typeof ChartTypeEnum;
     containerClass: _angular_core.Signal<"bg-white border-slate-200 hover:border-blue-300 hover:shadow-blue-100/50" | "bg-slate-800 border-slate-700 hover:border-slate-600 hover:shadow-slate-900/50">;
     headerClass: _angular_core.Signal<"border-slate-200" | "border-slate-700">;
     titleClass: _angular_core.Signal<"text-slate-900" | "text-white">;
@@ -1482,7 +2131,7 @@ declare class LineChartComponent implements OnInit, AfterViewInit, OnDestroy {
     chart: _angular_core.InputSignal<AiChartInterface>;
     showAxisLabels: _angular_core.InputSignal<boolean>;
     viewMode: _angular_core.InputSignal<ViewModeEnum>;
-    chartHeight: _angular_core.Signal<"500px" | "133px">;
+    chartHeight: _angular_core.Signal<"133px" | "500px">;
     cursorColor: _angular_core.Signal<9741240 | 16777215>;
     tooltipTextColor: _angular_core.Signal<0 | 16777215>;
     chartHash: _angular_core.Signal<string>;
@@ -1525,7 +2174,7 @@ declare class BarChartComponent implements OnInit, AfterViewInit, OnDestroy {
     chart: _angular_core.InputSignal<AiChartInterface>;
     showAxisLabels: _angular_core.InputSignal<boolean>;
     viewMode: _angular_core.InputSignal<ViewModeEnum>;
-    chartHeight: _angular_core.Signal<"500px" | "175px">;
+    chartHeight: _angular_core.Signal<"175px" | "500px">;
     cursorColor: _angular_core.Signal<9741240 | 16777215>;
     tooltipTextColor: _angular_core.Signal<0 | 16777215>;
     chartHash: _angular_core.Signal<string>;
@@ -1561,7 +2210,7 @@ declare class PieChartComponent implements OnInit, AfterViewInit, OnDestroy {
     chart: _angular_core.InputSignal<AiChartInterface>;
     showAxisLabels: _angular_core.InputSignal<boolean>;
     viewMode: _angular_core.InputSignal<ViewModeEnum>;
-    chartHeight: _angular_core.Signal<"500px" | "200px">;
+    chartHeight: _angular_core.Signal<"200px" | "500px">;
     chartHash: _angular_core.Signal<string>;
     chartDiv: ElementRef;
     private root?;
@@ -1596,7 +2245,7 @@ declare class AreaChartComponent implements OnInit, AfterViewInit, OnDestroy {
     chart: _angular_core.InputSignal<AiChartInterface>;
     showAxisLabels: _angular_core.InputSignal<boolean>;
     viewMode: _angular_core.InputSignal<ViewModeEnum>;
-    chartHeight: _angular_core.Signal<"500px" | "133px">;
+    chartHeight: _angular_core.Signal<"133px" | "500px">;
     cursorColor: _angular_core.Signal<9741240 | 16777215>;
     chartHash: _angular_core.Signal<string>;
     chartDiv: ElementRef;
@@ -1630,6 +2279,7 @@ declare class AreaChartComponent implements OnInit, AfterViewInit, OnDestroy {
 declare class TooltipContainerComponent {
     isLightMode: _angular_core.WritableSignal<boolean>;
     private tooltipService;
+    private navigationService;
     private elementRef;
     private renderer;
     private tooltipStateSignal;
@@ -1661,6 +2311,7 @@ declare class TooltipContainerComponent {
     containerClass: _angular_core.Signal<"" | "-translate-x-1/2">;
     contentClass: _angular_core.Signal<"bg-white/95 border-slate-300 text-slate-900" | "bg-slate-800/95 border-slate-600 text-white">;
     textClass: _angular_core.Signal<"text-slate-700" | "text-slate-200">;
+    viewMoreButtonClass: _angular_core.Signal<"bg-blue-50 text-blue-700 border border-blue-200 hover:bg-blue-200 hover:border-blue-400 hover:text-blue-800 active:bg-blue-300" | "bg-blue-500/10 text-blue-400 border border-blue-500/20 hover:bg-blue-500/30 hover:border-blue-500/40 hover:text-blue-300 active:bg-blue-500/40">;
     transformStyle: _angular_core.Signal<"none" | "translateX(-192px)">;
     constructor();
     onTooltipMouseEnter(): void;
@@ -1668,6 +2319,7 @@ declare class TooltipContainerComponent {
     private calculateLeft;
     private calculateTop;
     private findTransformedAncestor;
+    scrollToTarget(targetId: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipContainerComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TooltipContainerComponent, "symphiq-tooltip-container", never, {}, {}, never, never, true, never>;
 }
@@ -1689,7 +2341,6 @@ declare class TooltipDirective implements OnDestroy {
     onMouseEnter(event: MouseEvent): void;
     onMouseMove(event: MouseEvent): void;
     onMouseLeave(): void;
-    onMouseEnterAgain(): void;
     onFocus(): void;
     onBlur(): void;
     private scheduleShow;
@@ -1701,8 +2352,266 @@ declare class TooltipDirective implements OnDestroy {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TooltipDirective, "[libSymphiqTooltip]", never, { "symphiqTooltip": { "alias": "libSymphiqTooltip"; "required": false; "isSignal": true; }; "tooltipType": { "alias": "tooltipType"; "required": false; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; "tooltipDelay": { "alias": "tooltipDelay"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
+declare class ShadowElevationDirective implements OnInit, OnDestroy {
+    private el;
+    private renderer;
+    private scrollDepthService;
+    private platformId;
+    scrollContainer?: HTMLElement | 'window';
+    shadowOffset: number;
+    private subscription?;
+    private containerId;
+    private currentShadowClass;
+    private currentBorderClass;
+    private currentBackgroundClass;
+    private intersectionObserver?;
+    private isVisible;
+    constructor(el: ElementRef<HTMLElement>, renderer: Renderer2, scrollDepthService: ScrollDepthService, platformId: Object);
+    ngOnInit(): void;
+    private setupIntersectionObserver;
+    private updateShadow;
+    private getShadowClasses;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShadowElevationDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ShadowElevationDirective, "[symphiqShadowElevation]", never, { "scrollContainer": { "alias": "symphiqShadowElevation"; "required": false; }; "shadowOffset": { "alias": "shadowOffset"; "required": false; }; }, {}, never, never, true, never>;
+}
+type AnimationType = 'fade-in' | 'slide-up' | 'slide-left' | 'slide-right' | 'zoom-in' | 'none';
+declare class ViewportAnimationDirective implements OnInit, OnDestroy {
+    private el;
+    private renderer;
+    symphiqViewportAnimation: AnimationType;
+    animationDelay: number;
+    animationDuration: number;
+    staggerIndex: number;
+    staggerDelay: number;
+    threshold: number;
+    rootMargin: string;
+    once: boolean;
+    private observer?;
+    private hasAnimated;
+    constructor(el: ElementRef, renderer: Renderer2);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private setupInitialState;
+    private setupObserver;
+    private animateIn;
+    private animateOut;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ViewportAnimationDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ViewportAnimationDirective, "[symphiqViewportAnimation]", never, { "symphiqViewportAnimation": { "alias": "symphiqViewportAnimation"; "required": false; }; "animationDelay": { "alias": "animationDelay"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; "staggerIndex": { "alias": "staggerIndex"; "required": false; }; "staggerDelay": { "alias": "staggerDelay"; "required": false; }; "threshold": { "alias": "threshold"; "required": false; }; "rootMargin": { "alias": "rootMargin"; "required": false; }; "once": { "alias": "once"; "required": false; }; }, {}, never, never, true, never>;
+}
+type BadgeType = 'primary' | 'success' | 'warning' | 'info' | 'premium' | 'default' | 'danger' | 'neutral';
+declare class FocusAreaDetailCardComponent {
+    item?: ProfileItemInterface;
+    viewMode: ViewModeEnum;
+    set forceExpanded(value: boolean);
+    animationIndex: number;
+    protected IconSourceEnum: typeof IconSourceEnum;
+    protected isExpanded: _angular_core.WritableSignal<boolean>;
+    private _forceExpanded;
+    private _hasAnimated;
+    private modalService;
+    private profileContextService;
+    protected isDark: _angular_core.Signal<boolean>;
+    protected isActuallyExpanded: _angular_core.Signal<boolean>;
+    protected forceExpandedValue: _angular_core.Signal<boolean>;
+    protected shouldAnimateExpand: _angular_core.Signal<boolean>;
+    protected iconSize: _angular_core.Signal<"w-6 h-6" | "w-7 h-7">;
+    protected relatedRecommendations: _angular_core.Signal<_jebgem_model.ProfileAnalysisRecommendationInterface[]>;
+    protected statusLabel: _angular_core.Signal<string>;
+    protected statusBadgeType: _angular_core.Signal<BadgeType>;
+    protected statusIcon: _angular_core.Signal<IconObjectInterface$1>;
+    protected insightsIcon: _angular_core.Signal<IconObjectInterface$1>;
+    protected recommendationsIcon: _angular_core.Signal<IconObjectInterface$1>;
+    protected relatedIcon: _angular_core.Signal<IconObjectInterface$1>;
+    protected cardClasses: _angular_core.Signal<string>;
+    protected iconClasses: _angular_core.Signal<string>;
+    protected labelClasses: _angular_core.Signal<string>;
+    protected descriptionClasses: _angular_core.Signal<"text-sm text-slate-400 mt-1 leading-relaxed" | "text-sm text-slate-600 mt-1 leading-relaxed">;
+    protected metaLabelClasses: _angular_core.Signal<"text-xs font-medium text-slate-400 uppercase tracking-wide" | "text-xs font-medium text-slate-600 uppercase tracking-wide">;
+    protected toolChipClasses: _angular_core.Signal<"px-2.5 py-1 rounded-md bg-emerald-500/10 text-emerald-300 text-xs border border-emerald-500/30" | "px-2.5 py-1 rounded-md bg-emerald-50 text-emerald-700 text-xs border border-emerald-200">;
+    protected expandedSectionClasses: _angular_core.Signal<"p-4 rounded-lg bg-slate-700/30 border border-slate-600/30" | "p-4 rounded-lg bg-slate-50 border border-slate-200">;
+    protected expandedIconClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600">;
+    protected expandedTitleClasses: _angular_core.Signal<"text-sm font-semibold text-white" | "text-sm font-semibold text-slate-900">;
+    protected insightItemClasses: _angular_core.Signal<"text-sm text-slate-300 leading-relaxed flex" | "text-sm text-slate-600 leading-relaxed flex">;
+    protected expandButtonClasses: _angular_core.Signal<"text-sm font-medium text-blue-400" | "text-sm font-medium text-blue-600">;
+    protected chevronClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600">;
+    protected toggleExpanded(): void;
+    protected openCompetitiveGapModal(): void;
+    onExpandItem(event: CustomEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FocusAreaDetailCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FocusAreaDetailCardComponent, "symphiq-focus-area-detail-card", never, { "item": { "alias": "item"; "required": false; }; "viewMode": { "alias": "viewMode"; "required": false; }; "forceExpanded": { "alias": "forceExpanded"; "required": false; }; "animationIndex": { "alias": "animationIndex"; "required": false; }; }, {}, never, never, true, never>;
+}
+interface CompetitorContext {
+    geographic?: ProfileItemInterface[];
+    price?: ProfileItemInterface[];
+    seasonal?: ProfileItemInterface[];
+    audience?: ProfileItemInterface[];
+    product?: ProfileItemInterface[];
+    focusAreas?: ProfileItemInterface[];
+}
+declare class CompetitorAnalysisCardComponent {
+    item?: ProfileItemInterface;
+    viewMode: ViewModeEnum;
+    set forceExpanded(value: boolean);
+    animationIndex: number;
+    protected IconSourceEnum: typeof IconSourceEnum;
+    protected isExpanded: _angular_core.WritableSignal<boolean>;
+    private _forceExpanded;
+    private _hasAnimated;
+    private modalService;
+    private profileContextService;
+    private navigationService;
+    protected isDark: _angular_core.Signal<boolean>;
+    protected isActuallyExpanded: _angular_core.Signal<boolean>;
+    protected forceExpandedValue: _angular_core.Signal<boolean>;
+    protected shouldAnimateExpand: _angular_core.Signal<boolean>;
+    protected iconSize: _angular_core.Signal<"w-6 h-6" | "w-7 h-7">;
+    protected hasCompanyInfo: _angular_core.Signal<boolean>;
+    protected competitorContext: _angular_core.Signal<CompetitorContext | undefined>;
+    protected hasAnyContext: _angular_core.Signal<boolean>;
+    protected threatLevelLabel: _angular_core.Signal<string>;
+    protected threatLevelBadgeType: _angular_core.Signal<BadgeType>;
+    protected threatLevelIcon: _angular_core.Signal<IconObjectInterface$1>;
+    protected getStrengthArea(strength: any): string;
+    protected getStrengthText(strength: any): string;
+    protected getWeaknessArea(weakness: any): string;
+    protected getWeaknessText(weakness: any): string;
+    protected websiteIcon: _angular_core.Signal<IconObjectInterface$1>;
+    protected strategyIcon: _angular_core.Signal<IconObjectInterface$1>;
+    protected strengthIcon: _angular_core.Signal<IconObjectInterface$1>;
+    protected weaknessIcon: _angular_core.Signal<IconObjectInterface$1>;
+    protected advantageIcon: _angular_core.Signal<IconObjectInterface$1>;
+    protected vulnerabilityIcon: _angular_core.Signal<IconObjectInterface$1>;
+    protected relatedIcon: _angular_core.Signal<IconObjectInterface$1>;
+    protected contextIcon: _angular_core.Signal<IconObjectInterface$1>;
+    protected cardClasses: _angular_core.Signal<string>;
+    protected iconClasses: _angular_core.Signal<string>;
+    protected labelClasses: _angular_core.Signal<string>;
+    protected descriptionClasses: _angular_core.Signal<"text-sm text-slate-400 mt-1 leading-relaxed" | "text-sm text-slate-600 mt-1 leading-relaxed">;
+    protected infoBoxClasses: _angular_core.Signal<"p-2.5 rounded-lg bg-slate-700/30 border border-slate-600/30" | "p-2.5 rounded-lg bg-slate-50 border border-slate-200">;
+    protected infoLabelClasses: _angular_core.Signal<"text-xs text-slate-400 mb-0.5" | "text-xs text-slate-600 mb-0.5">;
+    protected infoValueClasses: _angular_core.Signal<"text-sm font-semibold text-white" | "text-sm font-semibold text-slate-900">;
+    protected linkClasses: _angular_core.Signal<"text-sm text-blue-400 hover:text-blue-300 underline transition-colors" | "text-sm text-blue-600 hover:text-blue-700 underline transition-colors">;
+    protected listItemClasses: _angular_core.Signal<"text-sm text-slate-200 leading-relaxed flex items-start" | "text-sm text-slate-600 leading-relaxed flex items-start">;
+    protected expandedSectionClasses: _angular_core.Signal<"p-4 rounded-lg bg-slate-700/30 border border-slate-600/30" | "p-4 rounded-lg bg-slate-50 border border-slate-200">;
+    protected expandedIconClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600">;
+    protected expandedTitleClasses: _angular_core.Signal<"text-sm font-semibold text-white" | "text-sm font-semibold text-slate-900">;
+    protected expandedTextClasses: _angular_core.Signal<"text-sm text-slate-300 leading-relaxed" | "text-sm text-slate-600 leading-relaxed">;
+    protected expandButtonClasses: _angular_core.Signal<"text-sm font-medium text-blue-400" | "text-sm font-medium text-blue-600">;
+    protected chevronClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600">;
+    protected toggleExpanded(): void;
+    protected navigateToItem(item: ProfileItemInterface): void;
+    onExpandItem(event: CustomEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CompetitorAnalysisCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CompetitorAnalysisCardComponent, "symphiq-competitor-analysis-card", never, { "item": { "alias": "item"; "required": false; }; "viewMode": { "alias": "viewMode"; "required": false; }; "forceExpanded": { "alias": "forceExpanded"; "required": false; }; "animationIndex": { "alias": "animationIndex"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class OpportunityHighlightBannerComponent {
+    title: string;
+    message?: string;
+    isDark: boolean;
+    bannerClick: EventEmitter<void>;
+    protected iconSource: IconSourceEnum;
+    protected bannerClasses: _angular_core.Signal<"bg-gradient-to-r from-amber-500/10 to-orange-500/10 border-l-amber-500 border-r border-t border-b border-amber-500/30" | "bg-gradient-to-r from-amber-50 to-orange-50 border-l-amber-500 border-r border-t border-b border-amber-200">;
+    protected iconContainerClasses: _angular_core.Signal<"bg-amber-500/20 text-amber-400" | "bg-amber-100 text-amber-600">;
+    protected titleClasses: _angular_core.Signal<"text-amber-300" | "text-amber-900">;
+    protected badgeClasses: _angular_core.Signal<"bg-amber-500/30 text-amber-300" | "bg-amber-200 text-amber-800">;
+    protected messageClasses: _angular_core.Signal<"text-amber-700" | "text-amber-400/90">;
+    protected chevronClasses: _angular_core.Signal<"text-amber-600" | "text-amber-400">;
+    handleClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OpportunityHighlightBannerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OpportunityHighlightBannerComponent, "symphiq-opportunity-highlight-banner", never, { "title": { "alias": "title"; "required": false; }; "message": { "alias": "message"; "required": false; }; "isDark": { "alias": "isDark"; "required": false; }; }, { "bannerClick": "bannerClick"; }, never, never, true, never>;
+}
+declare class SkeletonCardBaseComponent {
+    viewMode: ViewModeEnum;
+    protected getCardClasses(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonCardBaseComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonCardBaseComponent, "symphiq-skeleton-card-base", never, { "viewMode": { "alias": "viewMode"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+declare class SkeletonBarComponent {
+    viewMode: ViewModeEnum;
+    width: string;
+    height: string;
+    protected getClasses(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonBarComponent, "symphiq-skeleton-bar", never, { "viewMode": { "alias": "viewMode"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class SkeletonCircleComponent {
+    viewMode: ViewModeEnum;
+    size: string;
+    protected getClasses(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonCircleComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonCircleComponent, "symphiq-skeleton-circle", never, { "viewMode": { "alias": "viewMode"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class SkeletonCustomerSegmentCardComponent {
+    viewMode: ViewModeEnum;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonCustomerSegmentCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonCustomerSegmentCardComponent, "symphiq-skeleton-customer-segment-card", never, { "viewMode": { "alias": "viewMode"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class SkeletonProductCategoryCardComponent {
+    viewMode: ViewModeEnum;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonProductCategoryCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonProductCategoryCardComponent, "symphiq-skeleton-product-category-card", never, { "viewMode": { "alias": "viewMode"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class SkeletonGenericCardComponent {
+    viewMode: ViewModeEnum;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonGenericCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonGenericCardComponent, "symphiq-skeleton-generic-card", never, { "viewMode": { "alias": "viewMode"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class SkeletonRegionCardComponent {
+    viewMode: ViewModeEnum;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonRegionCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonRegionCardComponent, "symphiq-skeleton-region-card", never, { "viewMode": { "alias": "viewMode"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class SkeletonSeasonCardComponent {
+    viewMode: ViewModeEnum;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonSeasonCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonSeasonCardComponent, "symphiq-skeleton-season-card", never, { "viewMode": { "alias": "viewMode"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class SkeletonPriceTierCardComponent {
+    viewMode: ViewModeEnum;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonPriceTierCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonPriceTierCardComponent, "symphiq-skeleton-price-tier-card", never, { "viewMode": { "alias": "viewMode"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class SkeletonFocusAreaCardComponent {
+    viewMode: ViewModeEnum;
+    protected isDark: _angular_core.Signal<boolean>;
+    protected iconSkeletonClasses: _angular_core.Signal<"w-12 h-12 bg-slate-700" | "w-12 h-12 bg-slate-200">;
+    protected titleSkeletonClasses: _angular_core.Signal<"bg-slate-200" | "bg-slate-700">;
+    protected textSkeletonClasses: _angular_core.Signal<"bg-slate-200" | "bg-slate-700">;
+    protected badgeSkeletonClasses: _angular_core.Signal<"bg-slate-200" | "bg-slate-700">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonFocusAreaCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonFocusAreaCardComponent, "symphiq-skeleton-focus-area-card", never, { "viewMode": { "alias": "viewMode"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class SkeletonCompetitorCardComponent {
+    viewMode: ViewModeEnum;
+    protected isDark: _angular_core.Signal<boolean>;
+    protected iconSkeletonClasses: _angular_core.Signal<"w-12 h-12 bg-slate-700" | "w-12 h-12 bg-slate-200">;
+    protected titleSkeletonClasses: _angular_core.Signal<"bg-slate-200" | "bg-slate-700">;
+    protected textSkeletonClasses: _angular_core.Signal<"bg-slate-200" | "bg-slate-700">;
+    protected boxSkeletonClasses: _angular_core.Signal<"bg-slate-200" | "bg-slate-700">;
+    protected badgeSkeletonClasses: _angular_core.Signal<"bg-slate-200" | "bg-slate-700">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonCompetitorCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonCompetitorCardComponent, "symphiq-skeleton-competitor-card", never, { "viewMode": { "alias": "viewMode"; "required": false; }; }, {}, never, never, true, never>;
+}
 declare const FUNNEL_ANALYSIS: FunnelAnalysisInterface;
+declare const BUSINESS_PROFILE: ProfileInterface;
+declare const RCC_BUSINESS_PROFILE: ProfileInterface;
+declare const HAMMETON_BUSINESS_PROFILE: ProfileInterface;
 /**
  * Shared Theme Color Utilities
  *
@@ -1812,6 +2721,23 @@ declare function getStatusDotClasses(status: string, viewMode: ViewModeEnum): st
  */
 declare function getTrendClasses(trendPercent: number, viewMode: ViewModeEnum): string;
-export { AreaChartComponent, BarChartComponent, BreakdownSectionComponent, ChartContainerComponent, ChartThemeService, CompetitivePositioningSummaryComponent, FUNNEL_ANALYSIS, FunnelOrderService, InsightCardComponent, LineChartComponent, MetricCardComponent, MetricFormatterService, MobileBottomNavComponent, MobileFABComponent, ModalComponent, ModalService, OverallAssessmentComponent, PieChartComponent, SkeletonLoaderComponent, SymphiqFunnelAnalysisDashboardComponent, SymphiqFunnelAnalysisPreviewComponent, TooltipContainerComponent, TooltipDataService, TooltipDirective, TooltipService, ViewModeService, getBadgeLabelClasses, getButtonClasses, getCompetitiveBadgeClasses, getContainerClasses, getFooterClasses, getGradeBadgeClasses, getHeaderClasses, getInsightsBadgeClasses, getInsightsCardClasses, getMetricLabelClasses, getMetricMiniCardClasses, getMetricValueClasses, getNarrativeTextClasses, getRevenueCardClasses, getRevenueIconClasses, getStatusBadgeClasses, getStatusDotClasses, getStatusIconClasses, getStatusSummaryClasses, getSubtitleClasses, getTitleClasses, getTrendClasses, getTrendIconClasses, getTrendValueClasses, isLightMode };
-export type { ChartThemeColors, FunnelMetricOrder, GestureDetail, LayoutMode, Metric, ModalState, NavSection, ScrollBaseCustomEvent, ScrollBaseDetail, ScrollCustomEvent, ScrollDetail, SemanticColors, ThemeColorContext, ThemeMode, TooltipPosition, TooltipState, TooltipType, ViewMode, ViewportBounds };
+/**
+ * Utility for generating consistent colors for dynamic category badges
+ */
+interface CategoryColorPalette {
+    light: string;
+    dark: string;
+}
+/**
+ * Gets a consistent color palette for a given category
+ * Same category will always return the same color
+ */
+declare function getCategoryColor(category: string): CategoryColorPalette;
+/**
+ * Gets the appropriate color classes for a category badge
+ */
+declare function getCategoryBadgeClasses(category: string, isDark: boolean): string;
+export { AreaChartComponent, BUSINESS_PROFILE, BarChartComponent, BreakdownSectionComponent, BusinessAnalysisModalComponent, BusinessProfileSearchService, ChartContainerComponent, ChartThemeService, CircularProgressComponent, CompetitivePositioningSummaryComponent, CompetitorAnalysisCardComponent, FUNNEL_ANALYSIS, FloatingBackButtonComponent, FloatingTocComponent, FocusAreaDetailCardComponent, FunnelOrderService, HAMMETON_BUSINESS_PROFILE, HeaderScrollService, HierarchyDisplayComponent, HorizontalBarComponent, IconService, InsightCardComponent, LineChartComponent, MetricCardComponent, MetricFormatterService, MobileBottomNavComponent, MobileFABComponent, ModalComponent, ModalService, NapkinVisualPlaceholderComponent, NavigationStateService, OpportunityHighlightBannerComponent, OverallAssessmentComponent, PieChartComponent, ProfileItemCardComponent, ProfileSectionComponent, ProfileSubsectionComponent, RCC_BUSINESS_PROFILE, ScrollDepthService, ScrollProgressBarComponent, SearchButtonComponent, SearchModalComponent, SectionDividerComponent, SectionNavigationComponent, ShadowElevationDirective, SkeletonBarComponent, SkeletonCardBaseComponent, SkeletonCircleComponent, SkeletonCompetitorCardComponent, SkeletonCustomerSegmentCardComponent, SkeletonFocusAreaCardComponent, SkeletonGenericCardComponent, SkeletonLoaderComponent, SkeletonPriceTierCardComponent, SkeletonProductCategoryCardComponent, SkeletonRegionCardComponent, SkeletonSeasonCardComponent, SymphiqBusinessAnalysisDashboardComponent, SymphiqFunnelAnalysisDashboardComponent, SymphiqFunnelAnalysisPreviewComponent, SymphiqIconComponent, TooltipContainerComponent, TooltipDataService, TooltipDirective, TooltipService, ViewModeService, ViewportAnimationDirective, VisualizationContainerComponent, getBadgeLabelClasses, getButtonClasses, getCategoryBadgeClasses, getCategoryColor, getCompetitiveBadgeClasses, getContainerClasses, getFooterClasses, getGradeBadgeClasses, getHeaderClasses, getInsightsBadgeClasses, getInsightsCardClasses, getMetricLabelClasses, getMetricMiniCardClasses, getMetricValueClasses, getNarrativeTextClasses, getRevenueCardClasses, getRevenueIconClasses, getStatusBadgeClasses, getStatusDotClasses, getStatusIconClasses, getStatusSummaryClasses, getSubtitleClasses, getTitleClasses, getTrendClasses, getTrendIconClasses, getTrendValueClasses, isLightMode };
+export type { AnimationType, BusinessSearchResult, CategoryColorPalette, ChartThemeColors, FunnelMetricOrder, HeaderScrollConfig, LayoutMode, Metric, ModalState, NavSection, NavigationState, ScrollBaseCustomEvent, ScrollBaseDetail, ScrollCustomEvent, ScrollDepthInfo, ScrollDetail, SemanticColors, ShadowLevel, ThemeColorContext, ThemeMode, TooltipPosition, TooltipState, TooltipType, ViewMode, ViewportBounds, VisualizationData, VisualizationType };
 //# sourceMappingURL=index.d.ts.map