@paro.io/expert-shared-components 1.14.43 → 1.14.46

package/lib/tax-axis/components/clientReport/ImplementationRoadmap.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImplementationRoadmap = ImplementationRoadmap;
+const react_1 = __importDefault(require("react"));
+const data_1 = require("../../lib/data");
+const SectionOpener_1 = require("./SectionOpener");
+const QuarterlyCashChart_1 = require("./QuarterlyCashChart");
+const ImplementationTimelineChart_1 = require("./ImplementationTimelineChart");
+function ImplementationRoadmap({ eligible, computed, top3, nowCount, nowMidK, bucketDefs, bucketTotals, activeBuckets, palette, }) {
+    const card = {
+        background: palette.white,
+        border: "1px solid " + palette.gray200,
+        borderRadius: 12,
+        padding: "24px 28px",
+        marginBottom: 16,
+        boxShadow: "0 1px 3px rgba(0,0,0,0.04)",
+    };
+    const stSavings = (s) => {
+        var _a, _b;
+        const c = computed.get(s.rank);
+        const lo = Math.round(((_a = c === null || c === void 0 ? void 0 : c.lo) !== null && _a !== void 0 ? _a : s.lo) / 100) * 100;
+        const hi = Math.round(((_b = c === null || c === void 0 ? void 0 : c.hi) !== null && _b !== void 0 ? _b : s.hi) / 100) * 100;
+        return "$" + (lo / 1000).toFixed(1) + "K\u2013$" + (hi / 1000).toFixed(1) + "K";
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(SectionOpener_1.SectionOpener, { number: "03", eyebrow: "IMPLEMENTATION ROADMAP", headline: "Most savings can be locked in within the current quarter.", bullets: [
+                nowCount + " eligible strategies can be initiated this week, representing roughly $" + nowMidK + "K of the midpoint savings estimate.",
+                "Time-sensitive elections and filings have firm deadlines noted in each strategy detail above.",
+                "Year-end planning items will be reviewed in a coordinated session before December 31.",
+            ], palette: palette }),
+        react_1.default.createElement(QuarterlyCashChart_1.QuarterlyCashChart, { eligible: eligible, computed: computed, palette: palette }),
+        react_1.default.createElement(ImplementationTimelineChart_1.ImplementationTimelineChart, { top3: top3, computed: computed, palette: palette }),
+        react_1.default.createElement("div", { style: { marginBottom: 28 } }, activeBuckets.map(b => {
+            const bt = bucketTotals[b.key];
+            const midK = Math.round((bt.lo + bt.hi) / 2 / 1000);
+            return (react_1.default.createElement("div", { key: b.key, className: "bucket-card", style: Object.assign(Object.assign({}, card), { marginBottom: 16 }) },
+                react_1.default.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 14, paddingBottom: 10, borderBottom: "1px solid " + palette.gray100 } },
+                    react_1.default.createElement("div", { style: { display: "flex", alignItems: "baseline", gap: 12 } },
+                        react_1.default.createElement("div", { style: { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.1em", color: b.color, fontFamily: palette.mono } }, b.label),
+                        react_1.default.createElement("div", { style: { fontSize: 11, color: palette.gray400, fontFamily: palette.mono } }, bt.strategies.length + " " + (bt.strategies.length === 1 ? "strategy" : "strategies"))),
+                    react_1.default.createElement("div", { style: { fontSize: 13, fontWeight: 700, color: palette.teal, fontFamily: palette.mono } }, "~$" + midK + "K midpoint")),
+                bt.strategies.map(s => (react_1.default.createElement("div", { key: s.rank, style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", padding: "10px 0", borderBottom: "1px solid " + palette.gray100 } },
+                    react_1.default.createElement("div", { style: { flex: 1 } },
+                        react_1.default.createElement("div", { style: { fontSize: 14, fontWeight: 600, color: palette.gray800, fontFamily: palette.head } }, s.name),
+                        react_1.default.createElement("div", { style: { fontSize: 12, color: palette.gray500, marginTop: 2, fontFamily: palette.body } }, data_1.NEXT_STEPS[s.rank] || "Discuss with your preparer.")),
+                    react_1.default.createElement("div", { style: { fontSize: 13, fontWeight: 700, color: palette.teal, fontFamily: palette.mono, flexShrink: 0, marginLeft: 12 } }, stSavings(s)))))));
+        }))));
+}

package/lib/tax-axis/components/clientReport/ImplementationTimelineChart.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { Strategy, ComputedMap } from "../../lib/types";
+import type { Palette } from "./palette";
+interface ImplementationTimelineChartProps {
+    top3: Strategy[];
+    computed: ComputedMap;
+    palette: Palette;
+}
+export declare function ImplementationTimelineChart({ top3, computed, palette }: ImplementationTimelineChartProps): React.JSX.Element;
+export {};

package/lib/tax-axis/components/clientReport/ImplementationTimelineChart.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImplementationTimelineChart = ImplementationTimelineChart;
+const react_1 = __importDefault(require("react"));
+function ImplementationTimelineChart({ top3, computed, palette }) {
+    const W = 640, H = Math.max(180, 60 + top3.length * 44);
+    const padL = 180, padR = 80, padT = 44, padB = 24;
+    const plotW = W - padL - padR, plotH = H - padT - padB;
+    const BUCKET_RANGE = { now: [0, 2], "30d": [0, 4], "90d": [2, 12], filing: [36, 52] };
+    const weekScale = (w) => padL + (w / 52) * plotW;
+    const qDividers = [13, 26, 39];
+    const qLabels = ["Q1", "Q2", "Q3", "Q4"];
+    return (react_1.default.createElement("div", { className: "chart-block", style: { background: palette.white, border: "1px solid " + palette.gray200, borderRadius: 10, padding: "24px 28px", marginBottom: 24 } },
+        react_1.default.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 18 } },
+            react_1.default.createElement("div", { style: { fontSize: 10, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.15em", color: palette.gray400, fontFamily: palette.mono } }, "IMPLEMENTATION TIMELINE"),
+            react_1.default.createElement("div", { style: { fontSize: 11, fontWeight: 700, color: palette.teal, fontFamily: palette.mono } }, "top " + top3.length + " priorities")),
+        react_1.default.createElement("svg", { viewBox: "0 0 " + W + " " + H, style: { width: "100%", height: "auto", display: "block" } },
+            [0, 1, 2, 3].map(qi => {
+                const x1 = weekScale(qi * 13);
+                const x2 = weekScale((qi + 1) * 13);
+                return react_1.default.createElement("rect", { key: qi, x: x1, y: padT - 12, width: x2 - x1, height: plotH + 16, fill: qi % 2 === 0 ? palette.gray50 : palette.white });
+            }),
+            qLabels.map((q, qi) => {
+                const cx = weekScale(qi * 13 + 6.5);
+                return react_1.default.createElement("text", { key: q, x: cx, y: padT - 18, fontSize: "10", fontWeight: "700", fill: palette.gray400, fontFamily: palette.mono, textAnchor: "middle" },
+                    q,
+                    " 2026");
+            }),
+            qDividers.map(w => (react_1.default.createElement("line", { key: w, x1: weekScale(w), y1: padT - 12, x2: weekScale(w), y2: padT + plotH + 4, stroke: palette.gray200, strokeWidth: "1", strokeDasharray: "2,3" }))),
+            top3.map((s, i) => {
+                var _a, _b;
+                const c = computed.get(s.rank);
+                const mid = Math.round((((_a = c === null || c === void 0 ? void 0 : c.lo) !== null && _a !== void 0 ? _a : s.lo) + ((_b = c === null || c === void 0 ? void 0 : c.hi) !== null && _b !== void 0 ? _b : s.hi)) / 2 / 1000);
+                const range = BUCKET_RANGE[s.timelineBucket || "30d"] || [0, 4];
+                const x1 = weekScale(range[0]);
+                const x2 = weekScale(range[1]);
+                const y = padT + i * 44 + 12;
+                const barH = 20;
+                const truncatedName = s.name.length > 22 ? s.name.slice(0, 21) + "\u2026" : s.name;
+                return (react_1.default.createElement("g", { key: s.rank },
+                    react_1.default.createElement("text", { x: padL - 12, y: y + barH / 2 + 4, fontSize: "12", fill: palette.gray700, fontFamily: palette.body, fontWeight: "600", textAnchor: "end" }, truncatedName),
+                    react_1.default.createElement("rect", { x: x1, y: y, width: Math.max(x2 - x1, 16), height: barH, fill: palette.teal, rx: "3" }),
+                    react_1.default.createElement("text", { x: Math.max(x2, x1 + 24) + 8, y: y + barH / 2 + 4, fontSize: "11", fill: palette.gray600, fontFamily: palette.mono }, "$" + mid + "K")));
+            })),
+        react_1.default.createElement("div", { style: { fontSize: 10, color: palette.gray500, fontFamily: palette.body, lineHeight: 1.6, marginTop: 14, paddingTop: 12, borderTop: "1px solid " + palette.gray100 } }, "Bar position reflects the strategy's earliest implementation window. Each bar's dollar value is the mid-point estimate for that strategy alone, before interaction adjustment.")));
+}

package/lib/tax-axis/components/clientReport/Methodology.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { ClientProfile, Strategy } from "../../lib/types";
+import type { Palette } from "./palette";
+interface MethodologyProps {
+    profile: ClientProfile;
+    eligible: Strategy[];
+    palette: Palette;
+}
+export declare function Methodology({ profile, eligible, palette }: MethodologyProps): React.JSX.Element;
+export {};

package/lib/tax-axis/components/clientReport/Methodology.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Methodology = Methodology;
+const react_1 = __importDefault(require("react"));
+const data_1 = require("../../lib/data");
+const SectionOpener_1 = require("./SectionOpener");
+function Methodology({ profile, eligible, palette }) {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(SectionOpener_1.SectionOpener, { number: "04", eyebrow: "METHODOLOGY", headline: "How TaxAxis arrives at these numbers.", bullets: [
+                "25 federal strategies evaluated against your profile via deterministic, rule-based computation at temperature zero \u2014 every recommendation traces to a specific IRC section, revenue ruling, or OBBBA provision.",
+                "Confidence bands reflect data quality: \u00B130% on single-year data, narrowing to \u00B115% with multi-year history.",
+                "Aggregate savings on the cover chart are adjusted by an interaction-discount factor reflecting strategy stacking, marginal-rate exhaustion, and \u00A76694 reasonableness.",
+            ], palette: palette }),
+        react_1.default.createElement("div", { style: { marginBottom: 28 } },
+            react_1.default.createElement("div", { style: { fontSize: 10, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.12em", color: palette.gray400, fontFamily: palette.mono, marginBottom: 8 } }, "EVAL PIPELINE"),
+            react_1.default.createElement("div", { style: { fontSize: 13, color: palette.gray700, lineHeight: 1.8, fontFamily: palette.body } }, "TaxAxis evaluates 25 federal tax strategies against each client profile. The computation is entirely deterministic and rule-based, operating at temperature zero \u2014 no generative model is involved at any stage. Each strategy passes through a three-phase pipeline: an eligibility filter removes strategies that do not apply to the entity type, industry, or fact pattern, then the computation engine calculates savings ranges against IRC-cited rules using the client's actual financial data. Every recommendation is reviewed by a qualified tax professional before the report is issued.")),
+        react_1.default.createElement("div", { style: { marginBottom: 28 } },
+            react_1.default.createElement("div", { style: { fontSize: 10, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.12em", color: palette.gray400, fontFamily: palette.mono, marginBottom: 8 } }, "CONFIDENCE BANDS"),
+            react_1.default.createElement("div", { style: { fontSize: 13, color: palette.gray700, lineHeight: 1.8, fontFamily: palette.body, marginBottom: 12 } }, "Savings ranges reflect data quality. Clients who provide multiple years of financial history receive tighter bands of \u00B115%, because multi-year data reveals trends and reduces estimation variance. Single-year data widens the bands to \u00B130%. Within each band, the low estimate uses conservative inputs at the minimum applicable rate, while the high estimate uses full applicable inputs at the client's marginal rate."),
+            react_1.default.createElement("div", { style: { fontSize: 13, color: palette.gray700, lineHeight: 1.8, fontFamily: palette.body } }, "Aggregate savings on the cover and in the quarterly cash-flow chart are further adjusted by a 25% interaction-discount factor. This factor accounts for four compounding effects: strategy stacking, where multiple deductions compete for the same dollar of income; marginal-rate exhaustion, where successive deductions push taxable income into lower brackets; ordering effects, where the sequence in which strategies are applied changes their individual value; and \u00A76694 reasonableness, which constrains aggressive combinations to positions that meet the substantial-authority standard. The same factor and rationale apply to both the cover ETR chart and the QuarterlyCashChart.")),
+        react_1.default.createElement("div", { style: { marginBottom: 28 } },
+            react_1.default.createElement("div", { style: { fontSize: 10, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.12em", color: palette.gray400, fontFamily: palette.mono, marginBottom: 8 } }, "SOURCES"),
+            react_1.default.createElement("ol", { style: { paddingLeft: 24, fontSize: 12, color: palette.gray700, lineHeight: 1.7, fontFamily: palette.body, margin: 0 } }, [...new Set(eligible.map(s => s.code))].sort((a, b) => a.localeCompare(b)).map(code => (react_1.default.createElement("li", { key: code, className: "source-entry", style: { marginBottom: 6 } },
+                react_1.default.createElement("span", { style: { fontFamily: palette.mono, fontWeight: 700 } }, code),
+                " \u2014 ",
+                data_1.SOURCE_DESC[code] || "See IRC reference for details"))))),
+        react_1.default.createElement("div", { className: "report-meta", style: { marginBottom: 28 } },
+            react_1.default.createElement("div", { style: { fontSize: 10, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.12em", color: palette.gray400, fontFamily: palette.mono, marginBottom: 8 } }, "REPORT METADATA"),
+            react_1.default.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: 12 } }, [
+                { k: "Framework", v: "25 federal strategies, 50 states + DC" },
+                { k: "Data Source", v: (profile.taxDataYears || "1 year") + " of financial data" },
+                { k: "Authority", v: "IRC, Rev. Proc. 2025-32, OBBBA" },
+                { k: "Confidence", v: profile.taxDataYears === "1 year" ? "\u00B130% (single-year data)" : "\u00B115% (multi-year data)" },
+            ].map(({ k, v }) => (react_1.default.createElement("div", { key: k, style: { padding: "8px 12px", background: palette.gray50, borderRadius: 6 } },
+                react_1.default.createElement("div", { style: { fontSize: 10, fontWeight: 600, textTransform: "uppercase", letterSpacing: ".5px", color: palette.gray400, marginBottom: 2, fontFamily: palette.mono } }, k),
+                react_1.default.createElement("div", { style: { fontSize: 11, color: palette.gray700, fontFamily: palette.body } }, v))))))));
+}

package/lib/tax-axis/components/clientReport/QuarterlyCashChart.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { Strategy, ComputedMap } from "../../lib/types";
+import type { Palette } from "./palette";
+interface QuarterlyCashChartProps {
+    eligible: Strategy[];
+    computed: ComputedMap;
+    palette: Palette;
+}
+export declare function QuarterlyCashChart({ eligible, computed, palette }: QuarterlyCashChartProps): React.JSX.Element;
+export {};

package/lib/tax-axis/components/clientReport/QuarterlyCashChart.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuarterlyCashChart = QuarterlyCashChart;
+const react_1 = __importDefault(require("react"));
+function QuarterlyCashChart({ eligible, computed, palette }) {
+    const W = 600, H = 240;
+    const padL = 56, padR = 24, padT = 32, padB = 52;
+    const plotW = W - padL - padR, plotH = H - padT - padB;
+    const BUCKET_TO_Q = { now: 0, "30d": 0, "90d": 1, filing: 3 };
+    const quarters = [0, 0, 0, 0];
+    eligible.forEach(s => {
+        var _a, _b;
+        const c = computed.get(s.rank);
+        const mid = (((_a = c === null || c === void 0 ? void 0 : c.lo) !== null && _a !== void 0 ? _a : s.lo) + ((_b = c === null || c === void 0 ? void 0 : c.hi) !== null && _b !== void 0 ? _b : s.hi)) / 2;
+        const qi = BUCKET_TO_Q[s.timelineBucket || ""];
+        if (qi !== undefined)
+            quarters[qi] += mid;
+    });
+    const INTERACTION_DISCOUNT = 0.25;
+    const quartersDiscounted = quarters.map(v => v * INTERACTION_DISCOUNT);
+    const maxVal = Math.max(...quartersDiscounted, 1);
+    const yScale = (v) => padT + plotH - (v / maxVal) * plotH;
+    const barW = Math.min(72, (plotW - 60) / 4);
+    const slot = plotW / 4;
+    const labels = ["Q1 2026", "Q2 2026", "Q3 2026", "Q4 2026"];
+    const sublabels = ["Now / 30 days", "Within 90 days", "Mid-year", "At filing"];
+    const tickStep = maxVal > 200000 ? 100000 : maxVal > 100000 ? 50000 : 25000;
+    const yTicks = [];
+    for (let v = 0; v <= maxVal * 1.05; v += tickStep)
+        yTicks.push(v);
+    return (react_1.default.createElement("div", { className: "chart-block", style: { background: palette.white, border: "1px solid " + palette.gray200, borderRadius: 10, padding: "24px 28px", marginBottom: 24 } },
+        react_1.default.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 18 } },
+            react_1.default.createElement("div", { style: { fontSize: 10, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.15em", color: palette.gray400, fontFamily: palette.mono } }, "QUARTERLY CASH IMPACT"),
+            react_1.default.createElement("div", { style: { fontSize: 11, fontWeight: 700, color: palette.teal, fontFamily: palette.mono } }, "realized savings, by quarter")),
+        react_1.default.createElement("svg", { viewBox: "0 0 " + W + " " + H, style: { width: "100%", height: "auto", display: "block" } },
+            yTicks.map(t => (react_1.default.createElement("g", { key: t },
+                react_1.default.createElement("line", { x1: padL, y1: yScale(t), x2: W - padR, y2: yScale(t), stroke: palette.gray100, strokeWidth: "1" }),
+                react_1.default.createElement("text", { x: padL - 10, y: yScale(t) + 4, fontSize: "10", fill: palette.gray400, fontFamily: palette.mono, textAnchor: "end" }, "$" + Math.round(t / 1000) + "K")))),
+            react_1.default.createElement("line", { x1: padL, y1: padT + plotH, x2: W - padR, y2: padT + plotH, stroke: palette.gray300, strokeWidth: "1" }),
+            quartersDiscounted.map((v, i) => {
+                const cx = padL + slot * i + slot / 2;
+                const x = cx - barW / 2;
+                const y = v > 0 ? yScale(v) : padT + plotH;
+                const h = v > 0 ? padT + plotH - y : 0;
+                const color = i === 3 ? palette.gray400 : palette.teal;
+                return (react_1.default.createElement("g", { key: i },
+                    react_1.default.createElement("rect", { x: x, y: y, width: barW, height: h, fill: color, rx: "2" }),
+                    v > 0 && react_1.default.createElement("text", { x: cx, y: y - 8, fontSize: "12", fontWeight: "700", fill: i === 3 ? palette.gray700 : palette.teal, fontFamily: palette.mono, textAnchor: "middle" }, "$" + Math.round(v / 1000) + "K"),
+                    react_1.default.createElement("text", { x: cx, y: padT + plotH + 22, fontSize: "11", fill: palette.gray600, fontFamily: palette.body, textAnchor: "middle", fontWeight: "600" }, labels[i]),
+                    react_1.default.createElement("text", { x: cx, y: padT + plotH + 38, fontSize: "9", fill: palette.gray400, fontFamily: palette.body, textAnchor: "middle" }, sublabels[i])));
+            })),
+        react_1.default.createElement("div", { style: { fontSize: 10, color: palette.gray500, fontFamily: palette.body, lineHeight: 1.6, marginTop: 14, paddingTop: 12, borderTop: "1px solid " + palette.gray100 } }, "Cash impact reflects realized savings after the same 25\u201340% interaction adjustment applied on the cover. Q1 includes immediate-action and 30-day items; Q4 captures year-end planning and filing-time elections.")));
+}

package/lib/tax-axis/components/clientReport/RecommendedStrategies.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { ClientProfile, Strategy, ComputedMap } from "../../lib/types";
+import type { Palette } from "./palette";
+interface RecommendedStrategiesProps {
+    profile: ClientProfile;
+    eligible: Strategy[];
+    computed: ComputedMap;
+    top3: Strategy[];
+    hasOBBBA: boolean;
+    palette: Palette;
+}
+export declare function RecommendedStrategies({ profile, eligible, computed, top3, hasOBBBA, palette }: RecommendedStrategiesProps): React.JSX.Element;
+export {};

package/lib/tax-axis/components/clientReport/RecommendedStrategies.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RecommendedStrategies = RecommendedStrategies;
+const react_1 = __importDefault(require("react"));
+const data_1 = require("../../lib/data");
+const SectionOpener_1 = require("./SectionOpener");
+const SavingsStackChart_1 = require("./SavingsStackChart");
+const StrategyCard_1 = require("./StrategyCard");
+function RecommendedStrategies({ profile, eligible, computed, top3, hasOBBBA, palette }) {
+    const top3Ranks = new Set(top3.map(s => s.rank));
+    const interactingPairs = data_1.INTERACTION_PAIRS.filter(([a, b]) => top3Ranks.has(a) && top3Ranks.has(b));
+    const hasInteractions = interactingPairs.length > 0;
+    const interactionMap = {};
+    interactingPairs.forEach(([a, b]) => { interactionMap[a] = b; interactionMap[b] = a; });
+    const stSavings = (s) => {
+        var _a, _b;
+        const c = computed.get(s.rank);
+        const lo = Math.round(((_a = c === null || c === void 0 ? void 0 : c.lo) !== null && _a !== void 0 ? _a : s.lo) / 100) * 100;
+        const hi = Math.round(((_b = c === null || c === void 0 ? void 0 : c.hi) !== null && _b !== void 0 ? _b : s.hi) / 100) * 100;
+        return "$" + (lo / 1000).toFixed(1) + "K\u2013$" + (hi / 1000).toFixed(1) + "K";
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(SectionOpener_1.SectionOpener, { number: "02", eyebrow: "RECOMMENDED STRATEGIES", headline: "Three priorities to discuss first.", bullets: [
+                "The " + top3.length + " strategies highlighted below are ranked by combined impact score \u2014 weighting dollar value, audit posture, and implementation effort.",
+                "Each strategy below is anchored to a specific IRC section and explains the math, the audit posture, and the implementation path.",
+                hasOBBBA
+                    ? "One or more recommendations rely on OBBBA provisions enacted July 2025 with limited IRS guidance \u2014 flagged where applicable."
+                    : "All recommendations rely on settled IRS guidance, published rulings, or controlling case law.",
+            ], palette: palette }),
+        react_1.default.createElement(SavingsStackChart_1.SavingsStackChart, { eligible: eligible, computed: computed, palette: palette }),
+        react_1.default.createElement("div", { style: { marginBottom: 28 } }, top3.map((s, i) => {
+            const rank = i + 1;
+            const interactsWith = interactionMap[s.rank];
+            const interactsIdx = interactsWith ? top3.findIndex(t => t.rank === interactsWith) + 1 : 0;
+            return (react_1.default.createElement(StrategyCard_1.StrategyCard, { key: s.rank, strategy: s, rank: rank, profile: profile, computed: computed, palette: palette, nextStepText: data_1.NEXT_STEPS[s.rank] || NARRATIVE_FALLBACK_NEXT(s), interactsWith: interactsWith, interactsIdx: interactsIdx, stSavings: stSavings(s) }));
+        })),
+        hasInteractions && (react_1.default.createElement("div", { style: { background: palette.orangePale, borderLeft: "3px solid " + palette.orange, borderRadius: "0 8px 8px 0", padding: "16px 20px", marginBottom: 24 } },
+            react_1.default.createElement("div", { style: { fontSize: 13, fontWeight: 700, color: palette.gray800, fontFamily: palette.head, marginBottom: 6 } }, "Strategy Interactions"),
+            interactingPairs.map(([a, b], pi) => {
+                const idxA = top3.findIndex(t => t.rank === a) + 1;
+                const idxB = top3.findIndex(t => t.rank === b) + 1;
+                return (react_1.default.createElement("p", { key: pi, style: { fontSize: 12, color: palette.gray700, lineHeight: 1.7, fontFamily: palette.body, marginBottom: 4 } }, "Strategies #" + idxA + " and #" + idxB + " affect each other. Your preparer has accounted for this \u2014 the combined savings may be less than the sum of individual estimates."));
+            })))));
+}
+// Inline fallback for next-steps text when NARRATIVE_FALLBACK is needed
+function NARRATIVE_FALLBACK_NEXT(s) {
+    return "Discuss with your preparer to implement " + s.name + ".";
+}

package/lib/tax-axis/components/clientReport/SavingsStackChart.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { Strategy, ComputedMap } from "../../lib/types";
+import type { Palette } from "./palette";
+interface SavingsStackChartProps {
+    eligible: Strategy[];
+    computed: ComputedMap;
+    palette: Palette;
+}
+export declare function SavingsStackChart({ eligible, computed, palette }: SavingsStackChartProps): React.JSX.Element | null;
+export {};

package/lib/tax-axis/components/clientReport/SavingsStackChart.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SavingsStackChart = SavingsStackChart;
+const react_1 = __importDefault(require("react"));
+const CAT_LABELS = {
+    depreciation: "Depreciation & Cost Recovery",
+    retirement: "Retirement & Benefits",
+    credits: "Tax Credits",
+    obbba_new: "OBBBA Provisions",
+    entity: "Entity & Compensation",
+    deductions: "Deductions & Timing",
+    state: "State & Local",
+    income: "Income Timing",
+    benefits: "Employee Benefits",
+    accounting: "Accounting Methods",
+    investment: "Investment Strategies",
+};
+function SavingsStackChart({ eligible, computed, palette }) {
+    const CAT_COLORS = {
+        depreciation: palette.teal,
+        retirement: "#1A6B6C",
+        credits: palette.orange,
+        obbba_new: "#A1E5E6",
+        entity: palette.green,
+        deductions: "#5A8F90",
+        state: "#C97515",
+        income: "#3D7374",
+        benefits: "#0F6E56",
+        accounting: "#8FA8A9",
+        investment: "#D4922F",
+    };
+    const byCat = {};
+    eligible.forEach(s => {
+        var _a, _b;
+        const c = computed.get(s.rank);
+        const mid = (((_a = c === null || c === void 0 ? void 0 : c.lo) !== null && _a !== void 0 ? _a : s.lo) + ((_b = c === null || c === void 0 ? void 0 : c.hi) !== null && _b !== void 0 ? _b : s.hi)) / 2;
+        const cat = s.cat || "deductions";
+        byCat[cat] = (byCat[cat] || 0) + mid;
+    });
+    const total = Object.values(byCat).reduce((a, b) => a + b, 0);
+    const sorted = Object.entries(byCat).sort((a, b) => b[1] - a[1]);
+    if (total <= 0)
+        return null;
+    return (react_1.default.createElement("div", { className: "chart-block", style: { background: palette.white, border: "1px solid " + palette.gray200, borderRadius: 10, padding: "24px 28px", marginBottom: 24 } },
+        react_1.default.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 18 } },
+            react_1.default.createElement("div", { style: { fontSize: 10, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.15em", color: palette.gray400, fontFamily: palette.mono } }, "SAVINGS BY CATEGORY"),
+            react_1.default.createElement("div", { style: { fontSize: 11, fontWeight: 700, color: palette.teal, fontFamily: palette.mono } }, "$" + Math.round(total / 1000) + "K aggregate midpoint")),
+        react_1.default.createElement("div", { style: { display: "flex", height: 32, borderRadius: 6, overflow: "hidden", border: "1px solid " + palette.gray200, marginBottom: 18 } }, sorted.map(([cat, val]) => {
+            const pct = val / total * 100;
+            const color = CAT_COLORS[cat] || palette.gray500;
+            return (react_1.default.createElement("div", { key: cat, style: { width: pct + "%", background: color, display: "flex", alignItems: "center", justifyContent: "center", minWidth: 0 }, title: (CAT_LABELS[cat] || cat) + ": " + Math.round(val / 1000) + "K" }, pct >= 8 && react_1.default.createElement("span", { style: { fontSize: 10, fontWeight: 700, color: palette.white, fontFamily: palette.mono } },
+                Math.round(pct),
+                "%")));
+        })),
+        react_1.default.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px 24px" } }, sorted.map(([cat, val]) => {
+            const color = CAT_COLORS[cat] || palette.gray500;
+            const label = CAT_LABELS[cat] || cat;
+            return (react_1.default.createElement("div", { key: cat, style: { display: "flex", alignItems: "center", gap: 10, fontSize: 12, fontFamily: palette.body } },
+                react_1.default.createElement("div", { style: { width: 10, height: 10, borderRadius: 2, background: color, flexShrink: 0 } }),
+                react_1.default.createElement("div", { style: { flex: 1, color: palette.gray700, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, label),
+                react_1.default.createElement("div", { style: { color: palette.gray500, fontFamily: palette.mono, fontSize: 11 } }, "$" + Math.round(val / 1000) + "K")));
+        }))));
+}

package/lib/tax-axis/components/clientReport/SectionOpener.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { Palette } from "./palette";
+interface SectionOpenerProps {
+    number: string;
+    eyebrow: string;
+    headline: string;
+    bullets?: string[];
+    palette: Palette;
+}
+export declare function SectionOpener({ number, eyebrow, headline, bullets, palette }: SectionOpenerProps): React.JSX.Element;
+export {};

package/lib/tax-axis/components/clientReport/SectionOpener.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionOpener = SectionOpener;
+const react_1 = __importDefault(require("react"));
+function SectionOpener({ number, eyebrow, headline, bullets, palette }) {
+    return (react_1.default.createElement("div", { className: "section-opener", style: { pageBreakBefore: "always", breakBefore: "page", marginBottom: 32, paddingTop: 8 } },
+        react_1.default.createElement("div", { style: { display: "flex", alignItems: "baseline", gap: 12, marginBottom: 18 } },
+            react_1.default.createElement("span", { style: { fontSize: 13, fontWeight: 700, color: palette.teal, fontFamily: palette.mono, letterSpacing: "0.05em" } }, number),
+            react_1.default.createElement("span", { style: { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.16em", color: palette.gray500, fontFamily: palette.body } }, eyebrow)),
+        react_1.default.createElement("h2", { style: { fontSize: 38, fontWeight: 700, color: palette.gray900, fontFamily: palette.head, lineHeight: 1.15, letterSpacing: "-0.01em", marginBottom: 24, maxWidth: "92%" } }, headline),
+        react_1.default.createElement("div", { style: { height: 3, background: palette.teal, width: 64, marginBottom: 24 } }),
+        bullets && bullets.length > 0 && (react_1.default.createElement("div", { style: { borderLeft: "2px solid " + palette.gray200, paddingLeft: 20, marginBottom: 8 } },
+            react_1.default.createElement("div", { style: { fontSize: 10, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.15em", color: palette.gray400, marginBottom: 12, fontFamily: palette.mono } }, "AT A GLANCE"),
+            bullets.map((b, i) => (react_1.default.createElement("div", { key: i, style: { display: "flex", gap: 10, marginBottom: i < bullets.length - 1 ? 10 : 0, alignItems: "flex-start" } },
+                react_1.default.createElement("div", { style: { width: 5, height: 5, borderRadius: "50%", background: palette.teal, marginTop: 8, flexShrink: 0 } }),
+                react_1.default.createElement("div", { style: { fontSize: 14, color: palette.gray700, lineHeight: 1.6, fontFamily: palette.body } }, b))))))));
+}

package/lib/tax-axis/components/clientReport/Sidebar.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { Palette } from "./palette";
+interface SidebarProps {
+    ircCode: string;
+    palette: Palette;
+}
+export declare function Sidebar({ ircCode, palette }: SidebarProps): React.JSX.Element | null;
+export {};

package/lib/tax-axis/components/clientReport/Sidebar.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sidebar = Sidebar;
+const react_1 = __importDefault(require("react"));
+const data_1 = require("../../lib/data");
+function Sidebar({ ircCode, palette }) {
+    const entry = data_1.SIDEBAR_LOOKUP[ircCode];
+    if (!entry)
+        return null;
+    return (react_1.default.createElement("aside", { style: {
+            float: "right",
+            width: 180,
+            margin: "4px 0 12px 20px",
+            padding: "14px 16px",
+            background: "#f7f5ee",
+            borderLeft: "2px solid " + palette.teal,
+            borderRadius: 0,
+            fontFamily: palette.body,
+        } },
+        react_1.default.createElement("div", { style: {
+                fontFamily: palette.mono,
+                fontSize: 10,
+                fontWeight: 500,
+                letterSpacing: "0.08em",
+                textTransform: "uppercase",
+                color: palette.teal,
+                marginBottom: 6,
+            } }, entry.title),
+        react_1.default.createElement("div", { style: {
+                fontSize: 11,
+                lineHeight: 1.55,
+                color: palette.gray800,
+            } }, entry.body)));
+}

package/lib/tax-axis/components/clientReport/StrategyCard.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import type { ClientProfile, Strategy, ComputedMap } from "../../lib/types";
+import type { Palette } from "./palette";
+interface StrategyCardProps {
+    strategy: Strategy;
+    rank: number;
+    profile: ClientProfile;
+    computed: ComputedMap;
+    palette: Palette;
+    nextStepText: string;
+    interactsWith?: number;
+    interactsIdx: number;
+    stSavings: string;
+}
+export declare function StrategyCard({ strategy: s, rank, profile, computed, palette, nextStepText, interactsWith, interactsIdx, stSavings, }: StrategyCardProps): React.JSX.Element;
+export {};

package/lib/tax-axis/components/clientReport/StrategyCard.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StrategyCard = StrategyCard;
+const react_1 = __importDefault(require("react"));
+const data_1 = require("../../lib/data");
+const Sidebar_1 = require("./Sidebar");
+const applyFootnotes_1 = require("./applyFootnotes");
+const FootnoteBlock_1 = require("./FootnoteBlock");
+function StrategyCard({ strategy: s, rank, profile, computed, palette, nextStepText, interactsWith, interactsIdx, stSavings, }) {
+    const card = {
+        background: palette.white,
+        border: "1px solid " + palette.gray200,
+        borderRadius: 12,
+        padding: "24px 28px",
+        marginBottom: 16,
+        boxShadow: "0 1px 3px rgba(0,0,0,0.04)",
+    };
+    const pct = s.score;
+    const narr = data_1.STRATEGY_NARRATIVE[s.rank];
+    const c = computed.get(s.rank);
+    const whyText = narr ? narr.whyMatters(profile) : data_1.NARRATIVE_FALLBACK.whyMatters(s);
+    const breakdownText = narr ? narr.breakdown(profile, c) : data_1.NARRATIVE_FALLBACK.breakdown(s, c);
+    const specialistText = (narr === null || narr === void 0 ? void 0 : narr.whySpecialist) || data_1.NARRATIVE_FALLBACK.whySpecialist(s);
+    const nextText = narr ? narr.nextSteps : nextStepText;
+    const footnotes = data_1.FOOTNOTE_DATA[s.rank] || [];
+    const fnCounter = { next: 0, assigned: [], cardKey: s.rank };
+    return (react_1.default.createElement("div", { className: "strategy-card", style: Object.assign(Object.assign({}, card), { padding: 0, overflow: "hidden", marginBottom: 20 }) },
+        react_1.default.createElement("div", { style: { padding: "24px 28px 20px" } },
+            react_1.default.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 16 } },
+                react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 14 } },
+                    react_1.default.createElement("div", { style: { width: 36, height: 36, borderRadius: "50%", background: "linear-gradient(135deg," + palette.teal + ",#1A6B6C)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 15, fontWeight: 700, color: palette.white, fontFamily: palette.body, flexShrink: 0 } }, rank),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("div", { style: { fontSize: 18, fontWeight: 700, color: palette.gray900, fontFamily: palette.head } }, s.name),
+                        react_1.default.createElement("div", { style: { fontSize: 12, color: palette.gray500, fontFamily: palette.mono, marginTop: 3 } }, s.code + " \u00B7 " + s.timeline))),
+                react_1.default.createElement("div", { style: { textAlign: "right", flexShrink: 0 } },
+                    react_1.default.createElement("div", { style: { fontSize: 20, fontWeight: 800, color: palette.teal, fontFamily: palette.head } }, stSavings),
+                    react_1.default.createElement("div", { style: { fontSize: 10, color: palette.gray400, fontFamily: palette.body } }, "est. annual savings"))),
+            react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 20 } },
+                react_1.default.createElement("div", { style: { flex: 1, height: 4, background: palette.gray100, borderRadius: 2, overflow: "hidden" } },
+                    react_1.default.createElement("div", { style: { width: pct + "%", height: "100%", borderRadius: 2, background: "linear-gradient(90deg," + palette.teal + "," + palette.tealLt + ")" } })),
+                react_1.default.createElement("span", { style: { fontSize: 10, fontWeight: 600, color: palette.teal, fontFamily: palette.mono } },
+                    pct,
+                    "/100")),
+            react_1.default.createElement(Sidebar_1.Sidebar, { ircCode: s.code, palette: palette }),
+            react_1.default.createElement("div", { style: { marginBottom: 12 } },
+                react_1.default.createElement("div", { style: { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.1em", color: palette.gray400, marginBottom: 8, fontFamily: palette.mono } }, "WHY THIS MATTERS"),
+                react_1.default.createElement("p", { style: { fontSize: 13, color: palette.gray700, lineHeight: 1.75, fontFamily: palette.body } }, (0, applyFootnotes_1.applyFootnotes)(whyText, footnotes, fnCounter, palette))),
+            react_1.default.createElement("div", { style: { marginBottom: 12 } },
+                react_1.default.createElement("div", { style: { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.1em", color: palette.gray400, marginBottom: 8, fontFamily: palette.mono } }, "HOW SAVINGS BREAK DOWN"),
+                react_1.default.createElement("p", { style: { fontSize: 13, color: palette.gray700, lineHeight: 1.75, fontFamily: palette.body } }, (0, applyFootnotes_1.applyFootnotes)(breakdownText, footnotes, fnCounter, palette))),
+            react_1.default.createElement("div", { style: { marginBottom: 12, borderLeft: "3px solid " + palette.orange, padding: "0 0 0 16px" } },
+                react_1.default.createElement("div", { style: { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.1em", color: palette.orange, marginBottom: 8, fontFamily: palette.mono } }, "WHY YOU NEED A SPECIALIST"),
+                react_1.default.createElement("p", { style: { fontSize: 13, color: palette.gray700, lineHeight: 1.75, fontFamily: palette.body } }, (0, applyFootnotes_1.applyFootnotes)(specialistText, footnotes, fnCounter, palette))),
+            react_1.default.createElement("div", { className: "card-footer" },
+                react_1.default.createElement("div", { style: { background: palette.tealPale, borderRadius: 8, padding: "12px 16px" } },
+                    react_1.default.createElement("div", { style: { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.1em", color: palette.green, marginBottom: 6, fontFamily: palette.mono } }, "WHAT WE'D DO NEXT"),
+                    react_1.default.createElement("p", { style: { fontSize: 13, color: palette.gray700, lineHeight: 1.7, fontFamily: palette.body } }, (0, applyFootnotes_1.applyFootnotes)(nextText, footnotes, fnCounter, palette))),
+                react_1.default.createElement(FootnoteBlock_1.FootnoteBlock, { assigned: fnCounter.assigned, palette: palette }))),
+        interactsWith !== undefined && interactsIdx > 0 && (react_1.default.createElement("div", { style: { padding: "10px 28px", background: palette.orangePale, borderTop: "1px solid rgba(251,154,29,0.2)", fontSize: 12, color: palette.gray700, fontFamily: palette.body } }, "Note: This strategy interacts with Strategy #" + interactsIdx + ". Combined savings may differ from the sum of individual estimates."))));
+}

package/lib/tax-axis/components/clientReport/TaxAxisClientReport.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { ClientProfile } from "../../lib/types";
+import type { TaxAxisScreenProps } from "../../lib/types";
+export interface TaxAxisClientReportProps extends TaxAxisScreenProps {
+    profile: ClientProfile;
+    onBack: () => void;
+    onNavigatePreparer?: () => void;
+}
+export declare function TaxAxisClientReport({ profile, onBack, onNavigatePreparer }: TaxAxisClientReportProps): React.JSX.Element;