tempest-react-sdk 0.27.0 → 0.28.1

package/bin/lib/doctor/doctor.e2e.test.mjs

@@ -155,6 +155,51 @@ describe("tempest doctor — generic findings still surface", () => {
     });
 });
 
+describe("tempest doctor — stylesheets", () => {
+    beforeEach(thirdPartyApp);
+
+    it("says nothing about CSS in a project with no stylesheet", () => {
+        expect(doctor().out).not.toContain("Stylesheets");
+    });
+
+    it("reports a clean sheet as clean", () => {
+        write("src/app.css", ".a {\n    color: red;\n}\n");
+        const { out, code } = doctor();
+        expect(out).toContain("Stylesheets");
+        expect(out).toContain("no CSS problems found");
+        expect(code).toBe(0);
+    });
+
+    it("fails the audit on CSS the browser cannot parse", () => {
+        write("src/app.css", ".a {\n    color: red;\n");
+        const { out, code } = doctor();
+        expect(out).toContain("src/app.css:1");
+        expect(out).toContain("never closed");
+        expect(code).toBe(1);
+    });
+
+    it("warns without failing on CSS that is valid but wrong", () => {
+        write("src/app.css", ".a {\n    bacground-color: red;\n}\n");
+        const { out, code } = doctor();
+        expect(out).toContain("did you mean `background-color`");
+        expect(code).toBe(0);
+    });
+
+    it("points at the fix command when something is auto-fixable", () => {
+        write("src/app.css", ".a {\n    color: red;\n    color: red;\n}\n");
+        const { out } = doctor();
+        expect(out).toMatch(/finding\(s\) are auto-fixable/);
+    });
+
+    it("suggests one global class over repeated local copies", () => {
+        const row = ".row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n";
+        write("src/A.module.css", row);
+        write("src/B.module.css", row);
+        write("src/C.module.css", row);
+        expect(doctor().out).toContain("one global class beats");
+    });
+});
+
 describe("tempest doctor — a project that does use the SDK", () => {
     beforeEach(() => {
         thirdPartyApp();

package/bin/tempest.mjs

@@ -14,6 +14,7 @@ import { fileURLToPath } from "node:url";
 import { aliasImports } from "./lib/alias/index.mjs";
 import { loadTypeScript } from "./lib/alias/typescript.mjs";
 import { readTsconfig } from "./lib/alias/tsconfig.mjs";
+import { analyzeCss, applyCssFixes } from "./lib/css/index.mjs";
 import { checkLucide } from "./lib/doctor/lucide.mjs";
 import { generateRegistry, loadIconTables } from "./lib/icons/generate.mjs";
 import { generate } from "./lib/openapi/generate.mjs";
@@ -250,6 +251,74 @@ const STATEFUL_DEPS = [
     "react-router-dom",
 ];
 
+/**
+ * Doctor rows for the CSS analysis.
+ *
+ * Findings are capped per severity because a report nobody reads to the end is a
+ * report that hides its own first line. The cap is stated, and the pointer to the
+ * uncapped list (`tempest fix --dry-run`) goes with it — a silent truncation
+ * would read as "that is all of them".
+ *
+ * @param {number} [limit] - Findings shown per severity.
+ * @returns {Array<[status: string, label: string, detail?: string]>} Check rows.
+ */
+function cssChecks(limit = 6) {
+    let analysis;
+    try {
+        analysis = analyzeCss({ root: ROOT, targets: ["."], selfDir: SELF_DIR });
+    } catch (err) {
+        return [["warn", "CSS analysis failed", String(err?.message ?? err)]];
+    }
+    if (analysis.stats.files === 0) return [];
+
+    const rows = [["section", "Stylesheets"]];
+    rows.push([
+        "info",
+        `${analysis.stats.files} stylesheet(s) · ${analysis.stats.rules} rules · ${analysis.stats.declarations} declarations`,
+        analysis.tokens.source ? "" : "SDK token table not found — token checks skipped",
+    ]);
+    if (analysis.truncated) {
+        rows.push([
+            "info",
+            "file cap reached",
+            "only the first 600 stylesheets were analyzed — narrow the run with `tempest fix <path> --dry-run`",
+        ]);
+    }
+
+    const status = { error: "fail", warn: "warn", info: "info" };
+    let hidden = 0;
+    for (const severity of ["error", "warn", "info"]) {
+        const group = analysis.findings.filter((f) => f.severity === severity);
+        for (const f of group.slice(0, limit)) {
+            rows.push([status[severity], `${f.file}:${f.line}`, f.message]);
+        }
+        hidden += Math.max(0, group.length - limit);
+    }
+    if (hidden > 0) {
+        rows.push([
+            "info",
+            `${hidden} more CSS finding(s) not shown`,
+            "run `tempest fix --dry-run` for the full list",
+        ]);
+    }
+    if (analysis.findings.length === 0) {
+        rows.push(["ok", "no CSS problems found"]);
+    } else {
+        const fixable = analysis.findings.filter((f) => f.fixable).length;
+        if (fixable > 0) {
+            rows.push([
+                "info",
+                `${fixable} finding(s) are auto-fixable`,
+                "run `tempest fix` — it removes only what is provably dead",
+            ]);
+        }
+    }
+    for (const skip of analysis.skipped.slice(0, 3)) {
+        rows.push(["info", `skipped ${skip.file}`, skip.reason]);
+    }
+    return rows;
+}
+
 function doctor() {
     const checks = [];
     const pkg = readJSON(join(ROOT, "package.json"));
@@ -581,6 +650,9 @@ function doctor() {
         ]);
     }
 
+    // ── Stylesheets ───────────────────────────────────────────────────────────
+    checks.push(...cssChecks());
+
     // ── Tooling ────────────────────────────────────────────────────────────────
     checks.push(["section", "Tooling"]);
     checks.push(
@@ -742,7 +814,7 @@ function lint(args) {
 }
 
 /** Flags `fix` owns itself; anything else is rejected rather than forwarded. */
-const FIX_FLAGS = new Set(["--no-alias", "--dry-run"]);
+const FIX_FLAGS = new Set(["--no-alias", "--no-css", "--dry-run"]);
 
 /**
  * Print the alias pass result.
@@ -785,6 +857,91 @@ function reportAlias(result, dryRun) {
     );
 }
 
+/** Prefix for a finding line: red for a browser-visible defect, yellow otherwise. */
+function severityMark(severity) {
+    if (severity === "error") return `${c.red}✗${c.reset}`;
+    return severity === "warn" ? `${c.yellow}!${c.reset}` : `${c.cyan}i${c.reset}`;
+}
+
+/**
+ * The CSS pass of `fix`: report what the analysis found, then remove the subset
+ * that is provably dead.
+ *
+ * Findings that need a human are printed in full here rather than capped, because
+ * `--dry-run` is the review surface — `doctor` is the summary, this is the list
+ * you read before letting the tool write. Only the advisory (`info`) tail is
+ * capped, since "this could be a token" scales with the size of the project.
+ *
+ * @param {object} params
+ * @param {string[]} params.targets - Positional paths from the command line.
+ * @param {boolean} params.dryRun
+ * @returns {number} Exit status contribution.
+ */
+function cssPass({ targets, dryRun }) {
+    console.log(
+        `${c.dim}→ css (dedupe declarations · drop dead rules)${dryRun ? " [dry-run]" : ""}${c.reset}`,
+    );
+    let analysis;
+    try {
+        analysis = analyzeCss({ root: ROOT, targets, selfDir: SELF_DIR });
+    } catch (err) {
+        console.log(
+            `  ${c.red}✗ analysis failed${c.reset} ${c.dim}${err?.message ?? err}${c.reset}`,
+        );
+        return 1;
+    }
+    if (analysis.stats.files === 0) {
+        console.log(`  ${c.dim}no stylesheets found${c.reset}`);
+        return 0;
+    }
+
+    const manual = analysis.findings.filter((f) => !f.fixable);
+    const infoLimit = 10;
+    let shownInfo = 0;
+    let hiddenInfo = 0;
+    for (const f of manual) {
+        if (f.severity === "info") {
+            if (shownInfo >= infoLimit) {
+                hiddenInfo += 1;
+                continue;
+            }
+            shownInfo += 1;
+        }
+        console.log(
+            `  [${severityMark(f.severity)}] ${f.file}:${f.line} ${c.dim}${f.message}${c.reset}`,
+        );
+    }
+    if (hiddenInfo > 0) {
+        console.log(`  ${c.dim}…+${hiddenInfo} more suggestion(s)${c.reset}`);
+    }
+
+    const result = applyCssFixes({ analysis, dryRun });
+    for (const file of result.files) {
+        console.log(`  ${file.file} ${c.dim}${file.changes.length}${c.reset}`);
+        for (const change of file.changes) {
+            console.log(`    ${c.dim}${change.line}:${c.reset} ${change.message}`);
+        }
+    }
+    for (const err of result.errors) {
+        console.log(`  ${c.red}✗ ${err.file}${c.reset} ${c.dim}${err.message}${c.reset}`);
+    }
+
+    if (result.total === 0) {
+        console.log(`  ${c.dim}nothing to remove${c.reset}`);
+    } else {
+        const verb = dryRun ? "would remove" : "removed";
+        console.log(
+            `  ${c.green}✓${c.reset} ${verb} ${result.total} dead declaration(s)/rule(s) in ${result.files.length} file(s)`,
+        );
+    }
+    if (analysis.counts.error > 0) {
+        console.log(
+            `  ${c.red}✗ ${analysis.counts.error} CSS syntax error(s)${c.reset} ${c.dim}— those files were not touched; fix them and run again${c.reset}`,
+        );
+    }
+    return result.errors.length || analysis.counts.error ? 1 : 0;
+}
+
 function fix(args) {
     const { flags, paths } = splitArgs(args);
     const unknown = flags.filter((f) => !FIX_FLAGS.has(f));
@@ -804,7 +961,10 @@ function fix(args) {
         reportAlias(result, dryRun);
         aliasStatus = result.status === "error" ? 1 : 0;
     }
-    if (dryRun) return aliasStatus;
+
+    const cssStatus = flags.includes("--no-css") ? 0 : cssPass({ targets, dryRun });
+
+    if (dryRun) return aliasStatus || cssStatus;
 
     console.log(`${c.dim}→ eslint --fix (sort imports · drop unused · tidy whitespace)${c.reset}`);
     const eslintStatus = run(requireBin("eslint"), [...targets, "--fix"]);
@@ -816,7 +976,7 @@ function fix(args) {
     } else {
         console.log(`${c.yellow}! prettier not installed — skipping format pass${c.reset}`);
     }
-    return aliasStatus || eslintStatus || prettierStatus;
+    return aliasStatus || cssStatus || eslintStatus || prettierStatus;
 }
 
 function format(args) {
@@ -952,8 +1112,8 @@ ${c.bold}Usage${c.reset}
 ${c.bold}Commands${c.reset}
   ${c.bold}doctor${c.reset}            Health-check the current project
   ${c.bold}lint${c.reset} [paths]      Run ESLint (report only)
-  ${c.bold}fix${c.reset} [paths]       Alias imports (../ → @/) + ESLint --fix (sort imports, remove
-                    unused, tidy whitespace) + Prettier
+  ${c.bold}fix${c.reset} [paths]       Alias imports (../ → @/) + CSS dead-code removal + ESLint --fix
+                    (sort imports, remove unused, tidy whitespace) + Prettier
   ${c.bold}format${c.reset} [paths]    Prettier --write
   ${c.bold}gen api${c.reset} <src>    Generate Zod schemas + types + service classes from an OpenAPI spec
                     (e.g. tempest gen api http://127.0.0.1:8000/openapi.json --out src/api)
@@ -961,8 +1121,10 @@ ${c.bold}Commands${c.reset}
                     (e.g. tempest gen icons --out src/icons.generated.ts --dir src)
 
 ${c.bold}fix options${c.reset}
-  --dry-run         List the imports that would be rewritten; write nothing
-  --no-alias        Skip the alias pass (ESLint + Prettier only)
+  --dry-run         List every CSS finding and the imports that would be rewritten;
+                    write nothing
+  --no-alias        Skip the alias pass
+  --no-css          Skip the CSS pass (analysis and dead-code removal)
 
 ${c.bold}Options${c.reset}
   -h, --help        Show this help

package/dist/charts/scales.cjs

@@ -0,0 +1,2 @@
+var e=7,t=9,n=3;function r(e){return`var(--tempest-chart-${e})`}function i(e,t,n){if(!Number.isFinite(e))return 0;let r=Math.min(t,n),i=Math.max(t,n);return i===r?.5:Math.min(1,Math.max(0,(e-r)/(i-r)))}function a(e,t){return Math.min(t,Math.max(1,Math.round(e*(t-1))+1))}function o(e){let{min:t,max:n,ordinal:o=!1}=e,s=o?3:1,c=7-s+1;return e=>r(`sequential-${s+a(i(e,t,n),c)-1}`)}function s(e){let{min:t,max:n,center:i=0}=e,o=Math.abs(i-Math.min(t,n)),s=Math.abs(Math.max(t,n)-i);return e=>r(!Number.isFinite(e)||e===i?`diverging-5`:e<i?o===0?`diverging-5`:`diverging-${5-a(Math.min(1,(i-e)/o),4)}`:s===0?`diverging-5`:`diverging-${5+a(Math.min(1,(e-i)/s),4)}`)}function c(e){let t=e===`sequential`?7:9;return Array.from({length:t},(t,n)=>r(`${e}-${n+1}`))}exports.DIVERGING_STEP_COUNT=t,exports.ORDINAL_START_STEP=n,exports.SEQUENTIAL_STEP_COUNT=e,exports.divergingScale=s,exports.scaleSteps=c,exports.sequentialScale=o;
+//# sourceMappingURL=scales.cjs.map

package/dist/charts/scales.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"scales.cjs","names":[],"sources":["../../src/charts/scales.ts"],"sourcesContent":["/** How many steps the sequential token scale has. */\nexport const SEQUENTIAL_STEP_COUNT = 7;\n\n/** How many steps the diverging token scale has, midpoint included. */\nexport const DIVERGING_STEP_COUNT = 9;\n\n/**\n * First sequential step that clears 2:1 against the chart surface.\n *\n * A sequential scale may let its near-zero end recede into the surface — on a\n * heatmap that is exactly what \"almost nothing\" should look like. An **ordinal**\n * scale may not: every step is a discrete mark someone has to see. Starting an\n * ordinal ramp here is the difference.\n */\nexport const ORDINAL_START_STEP = 3;\n\n/** A `var(--tempest-chart-…)` reference, so the value follows the active theme. */\nexport type ChartColorToken = string;\n\n/** Reference a token by name rather than interpolating the string at each call site. */\nfunction token(name: string): ChartColorToken {\n    return `var(--tempest-chart-${name})`;\n}\n\n/**\n * Clamp `value` into `0…1` against a domain, tolerating a reversed or empty one.\n *\n * A zero-width domain (every datum equal) would otherwise divide by zero and paint\n * the whole chart `NaN`; it resolves to the middle of the scale instead, which is\n * the honest reading of \"no variation\".\n */\nfunction normalize(value: number, min: number, max: number): number {\n    if (!Number.isFinite(value)) return 0;\n    const lo = Math.min(min, max);\n    const hi = Math.max(min, max);\n    if (hi === lo) return 0.5;\n    return Math.min(1, Math.max(0, (value - lo) / (hi - lo)));\n}\n\n/** Map a `0…1` position onto `1…steps`, inclusive. */\nfunction stepOf(t: number, steps: number): number {\n    return Math.min(steps, Math.max(1, Math.round(t * (steps - 1)) + 1));\n}\n\nexport interface SequentialScaleOptions {\n    /** Lowest value in the data. */\n    min: number;\n    /** Highest value in the data. */\n    max: number;\n    /**\n     * Keep every step visible against the surface, for discrete ordered marks.\n     *\n     * Off by default: a heatmap *wants* its near-zero cells to recede. Turn it on\n     * for tiers, funnel stages or anything where each step is its own mark.\n     */\n    ordinal?: boolean;\n}\n\n/**\n * Build a magnitude scale over the sequential tokens.\n *\n * Returns `var(--tempest-chart-sequential-N)` rather than a hex string, so a\n * heatmap painted once follows the theme — including dark mode, whose steps are\n * chosen for the dark surface rather than flipped.\n *\n * @example\n * const color = sequentialScale({ min: 0, max: 250 });\n * <rect fill={color(value)} />\n *\n * @param options - The data domain, and whether every step must stay visible.\n * @returns A function from value to a CSS colour reference.\n */\nexport function sequentialScale(\n    options: SequentialScaleOptions,\n): (value: number) => ChartColorToken {\n    const { min, max, ordinal = false } = options;\n    const first = ordinal ? ORDINAL_START_STEP : 1;\n    const span = SEQUENTIAL_STEP_COUNT - first + 1;\n    return (value) => token(`sequential-${first + stepOf(normalize(value, min, max), span) - 1}`);\n}\n\nexport interface DivergingScaleOptions {\n    /** Lowest value in the data. */\n    min: number;\n    /** Highest value in the data. */\n    max: number;\n    /**\n     * The value that means \"no deviation\". Default `0`.\n     *\n     * It is a parameter because the interesting midpoint is often not zero — a\n     * budget variance diverges around the target, not around nothing.\n     */\n    center?: number;\n}\n\n/**\n * Build a polarity scale over the diverging tokens.\n *\n * Each arm is scaled against its **own** distance from the centre, so an asymmetric\n * domain (say −5…+80) still uses the full cool arm for its small negatives. Scaling\n * both arms by the wider one — the easy mistake — would collapse every negative\n * into the step next to the midpoint and hide the sign entirely.\n *\n * @example\n * const color = divergingScale({ min: -12, max: 40 });   // centre 0\n * const budget = divergingScale({ min: 80, max: 130, center: 100 });\n *\n * @param options - The data domain and the neutral centre.\n * @returns A function from value to a CSS colour reference.\n */\nexport function divergingScale(options: DivergingScaleOptions): (value: number) => ChartColorToken {\n    const { min, max, center = 0 } = options;\n    const mid = Math.ceil(DIVERGING_STEP_COUNT / 2);\n    const armSteps = mid - 1;\n    const coolSpan = Math.abs(center - Math.min(min, max));\n    const warmSpan = Math.abs(Math.max(min, max) - center);\n\n    return (value) => {\n        if (!Number.isFinite(value) || value === center) return token(`diverging-${mid}`);\n        if (value < center) {\n            if (coolSpan === 0) return token(`diverging-${mid}`);\n            const t = Math.min(1, (center - value) / coolSpan);\n            // Step 1 is the cool extreme, so a bigger deviation walks toward it.\n            return token(`diverging-${mid - stepOf(t, armSteps)}`);\n        }\n        if (warmSpan === 0) return token(`diverging-${mid}`);\n        const t = Math.min(1, (value - center) / warmSpan);\n        return token(`diverging-${mid + stepOf(t, armSteps)}`);\n    };\n}\n\n/**\n * Every step of a token scale, in order — for rendering a legend.\n *\n * A continuous scale needs a legend showing the ramp with its end labels; without\n * one the reader has no way to turn a colour back into a number.\n *\n * @param kind - Which scale.\n * @returns The token references, lightest/coolest first.\n */\nexport function scaleSteps(kind: \"sequential\" | \"diverging\"): ChartColorToken[] {\n    const count = kind === \"sequential\" ? SEQUENTIAL_STEP_COUNT : DIVERGING_STEP_COUNT;\n    return Array.from({ length: count }, (_, i) => token(`${kind}-${i + 1}`));\n}\n"],"mappings":"AACA,IAAa,EAAwB,EAGxB,EAAuB,EAUvB,EAAqB,EAMlC,SAAS,EAAM,EAA+B,CAC1C,MAAO,uBAAuB,EAAK,EACvC,CASA,SAAS,EAAU,EAAe,EAAa,EAAqB,CAChE,GAAI,CAAC,OAAO,SAAS,CAAK,EAAG,MAAO,GACpC,IAAM,EAAK,KAAK,IAAI,EAAK,CAAG,EACtB,EAAK,KAAK,IAAI,EAAK,CAAG,EAE5B,OADI,IAAO,EAAW,GACf,KAAK,IAAI,EAAG,KAAK,IAAI,GAAI,EAAQ,IAAO,EAAK,EAAG,CAAC,CAC5D,CAGA,SAAS,EAAO,EAAW,EAAuB,CAC9C,OAAO,KAAK,IAAI,EAAO,KAAK,IAAI,EAAG,KAAK,MAAM,GAAK,EAAQ,EAAE,EAAI,CAAC,CAAC,CACvE,CA8BA,SAAgB,EACZ,EACkC,CAClC,GAAM,CAAE,MAAK,MAAK,UAAU,IAAU,EAChC,EAAQ,EAAA,EAA+B,EACvC,EAAA,EAA+B,EAAQ,EAC7C,MAAQ,IAAU,EAAM,cAAc,EAAQ,EAAO,EAAU,EAAO,EAAK,CAAG,EAAG,CAAI,EAAI,GAAG,CAChG,CA+BA,SAAgB,EAAe,EAAoE,CAC/F,GAAM,CAAE,MAAK,MAAK,SAAS,GAAM,EAG3B,EAAW,KAAK,IAAI,EAAS,KAAK,IAAI,EAAK,CAAG,CAAC,EAC/C,EAAW,KAAK,IAAI,KAAK,IAAI,EAAK,CAAG,EAAI,CAAM,EAErD,MAAQ,IACoD,EAApD,CAAC,OAAO,SAAS,CAAK,GAAK,IAAU,EAAqB,cAC1D,EAAQ,EACJ,IAAa,EAAgB,cAGpB,aAAa,EAAM,EAFtB,KAAK,IAAI,GAAI,EAAS,GAAS,CAEF,EAAG,CAAQ,IAElD,IAAa,EAAgB,cAEpB,aAAa,EAAM,EADtB,KAAK,IAAI,GAAI,EAAQ,GAAU,CACF,EAAG,CAAQ,GAT8B,CAWxF,CAWA,SAAgB,EAAW,EAAqD,CAC5E,IAAM,EAAQ,IAAS,aAAA,EAAA,EACvB,OAAO,MAAM,KAAK,CAAE,OAAQ,CAAM,GAAI,EAAG,IAAM,EAAM,GAAG,EAAK,GAAG,EAAI,GAAG,CAAC,CAC5E"}

package/dist/charts/scales.js

@@ -0,0 +1,29 @@
+//#region src/charts/scales.ts
+var e = 7, t = 9, n = 3;
+function r(e) {
+	return `var(--tempest-chart-${e})`;
+}
+function i(e, t, n) {
+	if (!Number.isFinite(e)) return 0;
+	let r = Math.min(t, n), i = Math.max(t, n);
+	return i === r ? .5 : Math.min(1, Math.max(0, (e - r) / (i - r)));
+}
+function a(e, t) {
+	return Math.min(t, Math.max(1, Math.round(e * (t - 1)) + 1));
+}
+function o(e) {
+	let { min: t, max: n, ordinal: o = !1 } = e, s = o ? 3 : 1, c = 7 - s + 1;
+	return (e) => r(`sequential-${s + a(i(e, t, n), c) - 1}`);
+}
+function s(e) {
+	let { min: t, max: n, center: i = 0 } = e, o = Math.abs(i - Math.min(t, n)), s = Math.abs(Math.max(t, n) - i);
+	return (e) => r(!Number.isFinite(e) || e === i ? "diverging-5" : e < i ? o === 0 ? "diverging-5" : `diverging-${5 - a(Math.min(1, (i - e) / o), 4)}` : s === 0 ? "diverging-5" : `diverging-${5 + a(Math.min(1, (e - i) / s), 4)}`);
+}
+function c(e) {
+	let t = e === "sequential" ? 7 : 9;
+	return Array.from({ length: t }, (t, n) => r(`${e}-${n + 1}`));
+}
+//#endregion
+export { t as DIVERGING_STEP_COUNT, n as ORDINAL_START_STEP, e as SEQUENTIAL_STEP_COUNT, s as divergingScale, c as scaleSteps, o as sequentialScale };
+
+//# sourceMappingURL=scales.js.map

package/dist/charts/scales.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scales.js","names":[],"sources":["../../src/charts/scales.ts"],"sourcesContent":["/** How many steps the sequential token scale has. */\nexport const SEQUENTIAL_STEP_COUNT = 7;\n\n/** How many steps the diverging token scale has, midpoint included. */\nexport const DIVERGING_STEP_COUNT = 9;\n\n/**\n * First sequential step that clears 2:1 against the chart surface.\n *\n * A sequential scale may let its near-zero end recede into the surface — on a\n * heatmap that is exactly what \"almost nothing\" should look like. An **ordinal**\n * scale may not: every step is a discrete mark someone has to see. Starting an\n * ordinal ramp here is the difference.\n */\nexport const ORDINAL_START_STEP = 3;\n\n/** A `var(--tempest-chart-…)` reference, so the value follows the active theme. */\nexport type ChartColorToken = string;\n\n/** Reference a token by name rather than interpolating the string at each call site. */\nfunction token(name: string): ChartColorToken {\n    return `var(--tempest-chart-${name})`;\n}\n\n/**\n * Clamp `value` into `0…1` against a domain, tolerating a reversed or empty one.\n *\n * A zero-width domain (every datum equal) would otherwise divide by zero and paint\n * the whole chart `NaN`; it resolves to the middle of the scale instead, which is\n * the honest reading of \"no variation\".\n */\nfunction normalize(value: number, min: number, max: number): number {\n    if (!Number.isFinite(value)) return 0;\n    const lo = Math.min(min, max);\n    const hi = Math.max(min, max);\n    if (hi === lo) return 0.5;\n    return Math.min(1, Math.max(0, (value - lo) / (hi - lo)));\n}\n\n/** Map a `0…1` position onto `1…steps`, inclusive. */\nfunction stepOf(t: number, steps: number): number {\n    return Math.min(steps, Math.max(1, Math.round(t * (steps - 1)) + 1));\n}\n\nexport interface SequentialScaleOptions {\n    /** Lowest value in the data. */\n    min: number;\n    /** Highest value in the data. */\n    max: number;\n    /**\n     * Keep every step visible against the surface, for discrete ordered marks.\n     *\n     * Off by default: a heatmap *wants* its near-zero cells to recede. Turn it on\n     * for tiers, funnel stages or anything where each step is its own mark.\n     */\n    ordinal?: boolean;\n}\n\n/**\n * Build a magnitude scale over the sequential tokens.\n *\n * Returns `var(--tempest-chart-sequential-N)` rather than a hex string, so a\n * heatmap painted once follows the theme — including dark mode, whose steps are\n * chosen for the dark surface rather than flipped.\n *\n * @example\n * const color = sequentialScale({ min: 0, max: 250 });\n * <rect fill={color(value)} />\n *\n * @param options - The data domain, and whether every step must stay visible.\n * @returns A function from value to a CSS colour reference.\n */\nexport function sequentialScale(\n    options: SequentialScaleOptions,\n): (value: number) => ChartColorToken {\n    const { min, max, ordinal = false } = options;\n    const first = ordinal ? ORDINAL_START_STEP : 1;\n    const span = SEQUENTIAL_STEP_COUNT - first + 1;\n    return (value) => token(`sequential-${first + stepOf(normalize(value, min, max), span) - 1}`);\n}\n\nexport interface DivergingScaleOptions {\n    /** Lowest value in the data. */\n    min: number;\n    /** Highest value in the data. */\n    max: number;\n    /**\n     * The value that means \"no deviation\". Default `0`.\n     *\n     * It is a parameter because the interesting midpoint is often not zero — a\n     * budget variance diverges around the target, not around nothing.\n     */\n    center?: number;\n}\n\n/**\n * Build a polarity scale over the diverging tokens.\n *\n * Each arm is scaled against its **own** distance from the centre, so an asymmetric\n * domain (say −5…+80) still uses the full cool arm for its small negatives. Scaling\n * both arms by the wider one — the easy mistake — would collapse every negative\n * into the step next to the midpoint and hide the sign entirely.\n *\n * @example\n * const color = divergingScale({ min: -12, max: 40 });   // centre 0\n * const budget = divergingScale({ min: 80, max: 130, center: 100 });\n *\n * @param options - The data domain and the neutral centre.\n * @returns A function from value to a CSS colour reference.\n */\nexport function divergingScale(options: DivergingScaleOptions): (value: number) => ChartColorToken {\n    const { min, max, center = 0 } = options;\n    const mid = Math.ceil(DIVERGING_STEP_COUNT / 2);\n    const armSteps = mid - 1;\n    const coolSpan = Math.abs(center - Math.min(min, max));\n    const warmSpan = Math.abs(Math.max(min, max) - center);\n\n    return (value) => {\n        if (!Number.isFinite(value) || value === center) return token(`diverging-${mid}`);\n        if (value < center) {\n            if (coolSpan === 0) return token(`diverging-${mid}`);\n            const t = Math.min(1, (center - value) / coolSpan);\n            // Step 1 is the cool extreme, so a bigger deviation walks toward it.\n            return token(`diverging-${mid - stepOf(t, armSteps)}`);\n        }\n        if (warmSpan === 0) return token(`diverging-${mid}`);\n        const t = Math.min(1, (value - center) / warmSpan);\n        return token(`diverging-${mid + stepOf(t, armSteps)}`);\n    };\n}\n\n/**\n * Every step of a token scale, in order — for rendering a legend.\n *\n * A continuous scale needs a legend showing the ramp with its end labels; without\n * one the reader has no way to turn a colour back into a number.\n *\n * @param kind - Which scale.\n * @returns The token references, lightest/coolest first.\n */\nexport function scaleSteps(kind: \"sequential\" | \"diverging\"): ChartColorToken[] {\n    const count = kind === \"sequential\" ? SEQUENTIAL_STEP_COUNT : DIVERGING_STEP_COUNT;\n    return Array.from({ length: count }, (_, i) => token(`${kind}-${i + 1}`));\n}\n"],"mappings":";AACA,IAAa,IAAwB,GAGxB,IAAuB,GAUvB,IAAqB;AAMlC,SAAS,EAAM,GAA+B;CAC1C,OAAO,uBAAuB,EAAK;AACvC;AASA,SAAS,EAAU,GAAe,GAAa,GAAqB;CAChE,IAAI,CAAC,OAAO,SAAS,CAAK,GAAG,OAAO;CACpC,IAAM,IAAK,KAAK,IAAI,GAAK,CAAG,GACtB,IAAK,KAAK,IAAI,GAAK,CAAG;CAE5B,OADI,MAAO,IAAW,KACf,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,IAAQ,MAAO,IAAK,EAAG,CAAC;AAC5D;AAGA,SAAS,EAAO,GAAW,GAAuB;CAC9C,OAAO,KAAK,IAAI,GAAO,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,IAAQ,EAAE,IAAI,CAAC,CAAC;AACvE;AA8BA,SAAgB,EACZ,GACkC;CAClC,IAAM,EAAE,QAAK,QAAK,aAAU,OAAU,GAChC,IAAQ,IAAA,IAA+B,GACvC,IAAA,IAA+B,IAAQ;CAC7C,QAAQ,MAAU,EAAM,cAAc,IAAQ,EAAO,EAAU,GAAO,GAAK,CAAG,GAAG,CAAI,IAAI,GAAG;AAChG;AA+BA,SAAgB,EAAe,GAAoE;CAC/F,IAAM,EAAE,QAAK,QAAK,YAAS,MAAM,GAG3B,IAAW,KAAK,IAAI,IAAS,KAAK,IAAI,GAAK,CAAG,CAAC,GAC/C,IAAW,KAAK,IAAI,KAAK,IAAI,GAAK,CAAG,IAAI,CAAM;CAErD,QAAQ,MACoD,EAApD,CAAC,OAAO,SAAS,CAAK,KAAK,MAAU,IAAqB,gBAC1D,IAAQ,IACJ,MAAa,IAAgB,gBAGpB,aAAa,IAAM,EAFtB,KAAK,IAAI,IAAI,IAAS,KAAS,CAEF,GAAG,CAAQ,MAElD,MAAa,IAAgB,gBAEpB,aAAa,IAAM,EADtB,KAAK,IAAI,IAAI,IAAQ,KAAU,CACF,GAAG,CAAQ,GAT8B;AAWxF;AAWA,SAAgB,EAAW,GAAqD;CAC5E,IAAM,IAAQ,MAAS,eAAA,IAAA;CACvB,OAAO,MAAM,KAAK,EAAE,QAAQ,EAAM,IAAI,GAAG,MAAM,EAAM,GAAG,EAAK,GAAG,IAAI,GAAG,CAAC;AAC5E"}

package/dist/charts.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./charts/palette.cjs"),t=require("./charts/use-chart-colors.cjs"),n=require("./charts/AreaChart.cjs"),r=require("./charts/BarChart.cjs"),i=require("./charts/LineChart.cjs"),a=require("./charts/PieChart.cjs"),o=require("./charts/RadarChart.cjs");exports.AreaChart=n.AreaChart,exports.BarChart=r.BarChart,exports.CHART_COLOR_TOKEN_COUNT=e.CHART_COLOR_TOKEN_COUNT,exports.DEFAULT_CHART_COLORS=e.DEFAULT_CHART_COLORS,exports.LineChart=i.LineChart,exports.PieChart=a.PieChart,exports.RadarChart=o.RadarChart,exports.resolveChartChrome=e.resolveChartChrome,exports.resolveChartColors=e.resolveChartColors,exports.useChartColors=t.useChartColors;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./charts/scales.cjs"),t=require("./charts/palette.cjs"),n=require("./charts/use-chart-colors.cjs"),r=require("./charts/AreaChart.cjs"),i=require("./charts/BarChart.cjs"),a=require("./charts/LineChart.cjs"),o=require("./charts/PieChart.cjs"),s=require("./charts/RadarChart.cjs");exports.AreaChart=r.AreaChart,exports.BarChart=i.BarChart,exports.CHART_COLOR_TOKEN_COUNT=t.CHART_COLOR_TOKEN_COUNT,exports.DEFAULT_CHART_COLORS=t.DEFAULT_CHART_COLORS,exports.DIVERGING_STEP_COUNT=e.DIVERGING_STEP_COUNT,exports.LineChart=a.LineChart,exports.ORDINAL_START_STEP=e.ORDINAL_START_STEP,exports.PieChart=o.PieChart,exports.RadarChart=s.RadarChart,exports.SEQUENTIAL_STEP_COUNT=e.SEQUENTIAL_STEP_COUNT,exports.divergingScale=e.divergingScale,exports.resolveChartChrome=t.resolveChartChrome,exports.resolveChartColors=t.resolveChartColors,exports.scaleSteps=e.scaleSteps,exports.sequentialScale=e.sequentialScale,exports.useChartColors=n.useChartColors;

package/dist/charts.d.ts

@@ -60,6 +60,9 @@ export declare interface CartesianChartProps {
 /** How many `--tempest-chart-N` tokens the SDK ships. */
 export declare const CHART_COLOR_TOKEN_COUNT = 8;
 
+/** A `var(--tempest-chart-…)` reference, so the value follows the active theme. */
+export declare type ChartColorToken = string;
+
 /**
  * Tabular data consumed by every chart: an array of rows, where each row maps a
  * column key to a string (label) or number (value).
@@ -77,6 +80,40 @@ export declare type ChartData = Array<Record<string, string | number>>;
  */
 export declare const DEFAULT_CHART_COLORS: string[];
 
+/** How many steps the diverging token scale has, midpoint included. */
+export declare const DIVERGING_STEP_COUNT = 9;
+
+/**
+ * Build a polarity scale over the diverging tokens.
+ *
+ * Each arm is scaled against its **own** distance from the centre, so an asymmetric
+ * domain (say −5…+80) still uses the full cool arm for its small negatives. Scaling
+ * both arms by the wider one — the easy mistake — would collapse every negative
+ * into the step next to the midpoint and hide the sign entirely.
+ *
+ * @example
+ * const color = divergingScale({ min: -12, max: 40 });   // centre 0
+ * const budget = divergingScale({ min: 80, max: 130, center: 100 });
+ *
+ * @param options - The data domain and the neutral centre.
+ * @returns A function from value to a CSS colour reference.
+ */
+export declare function divergingScale(options: DivergingScaleOptions): (value: number) => ChartColorToken;
+
+export declare interface DivergingScaleOptions {
+    /** Lowest value in the data. */
+    min: number;
+    /** Highest value in the data. */
+    max: number;
+    /**
+     * The value that means "no deviation". Default `0`.
+     *
+     * It is a parameter because the interesting midpoint is often not zero — a
+     * budget variance diverges around the target, not around nothing.
+     */
+    center?: number;
+}
+
 /**
  * LineChart — themed wrapper over recharts `LineChart`.
  *
@@ -88,6 +125,16 @@ export declare const DEFAULT_CHART_COLORS: string[];
  */
 export declare function LineChart({ data, index, categories, colors, height, width, showLegend, showGrid, showTooltip, valueFormatter, className, }: CartesianChartProps): JSX.Element;
 
+/**
+ * First sequential step that clears 2:1 against the chart surface.
+ *
+ * A sequential scale may let its near-zero end recede into the surface — on a
+ * heatmap that is exactly what "almost nothing" should look like. An **ordinal**
+ * scale may not: every step is a discrete mark someone has to see. Starting an
+ * ordinal ramp here is the difference.
+ */
+export declare const ORDINAL_START_STEP = 3;
+
 /**
  * PieChart — themed wrapper over recharts `PieChart`.
  *
@@ -165,6 +212,50 @@ export declare function resolveChartChrome(part: "grid" | "axis", element?: Elem
  */
 export declare function resolveChartColors(element?: Element | null): string[];
 
+/**
+ * Every step of a token scale, in order — for rendering a legend.
+ *
+ * A continuous scale needs a legend showing the ramp with its end labels; without
+ * one the reader has no way to turn a colour back into a number.
+ *
+ * @param kind - Which scale.
+ * @returns The token references, lightest/coolest first.
+ */
+export declare function scaleSteps(kind: "sequential" | "diverging"): ChartColorToken[];
+
+/** How many steps the sequential token scale has. */
+export declare const SEQUENTIAL_STEP_COUNT = 7;
+
+/**
+ * Build a magnitude scale over the sequential tokens.
+ *
+ * Returns `var(--tempest-chart-sequential-N)` rather than a hex string, so a
+ * heatmap painted once follows the theme — including dark mode, whose steps are
+ * chosen for the dark surface rather than flipped.
+ *
+ * @example
+ * const color = sequentialScale({ min: 0, max: 250 });
+ * <rect fill={color(value)} />
+ *
+ * @param options - The data domain, and whether every step must stay visible.
+ * @returns A function from value to a CSS colour reference.
+ */
+export declare function sequentialScale(options: SequentialScaleOptions): (value: number) => ChartColorToken;
+
+export declare interface SequentialScaleOptions {
+    /** Lowest value in the data. */
+    min: number;
+    /** Highest value in the data. */
+    max: number;
+    /**
+     * Keep every step visible against the surface, for discrete ordered marks.
+     *
+     * Off by default: a heatmap *wants* its near-zero cells to recede. Turn it on
+     * for tiers, funnel stages or anything where each step is its own mark.
+     */
+    ordinal?: boolean;
+}
+
 /**
  * Theme-aware series colors for a chart.
  *

package/dist/charts.js

@@ -1,8 +1,9 @@
-import { CHART_COLOR_TOKEN_COUNT as e, DEFAULT_CHART_COLORS as t, resolveChartChrome as n, resolveChartColors as r } from "./charts/palette.js";
-import { useChartColors as i } from "./charts/use-chart-colors.js";
-import { AreaChart as a } from "./charts/AreaChart.js";
-import { BarChart as o } from "./charts/BarChart.js";
-import { LineChart as s } from "./charts/LineChart.js";
-import { PieChart as c } from "./charts/PieChart.js";
-import { RadarChart as l } from "./charts/RadarChart.js";
-export { a as AreaChart, o as BarChart, e as CHART_COLOR_TOKEN_COUNT, t as DEFAULT_CHART_COLORS, s as LineChart, c as PieChart, l as RadarChart, n as resolveChartChrome, r as resolveChartColors, i as useChartColors };
+import { DIVERGING_STEP_COUNT as e, ORDINAL_START_STEP as t, SEQUENTIAL_STEP_COUNT as n, divergingScale as r, scaleSteps as i, sequentialScale as a } from "./charts/scales.js";
+import { CHART_COLOR_TOKEN_COUNT as o, DEFAULT_CHART_COLORS as s, resolveChartChrome as c, resolveChartColors as l } from "./charts/palette.js";
+import { useChartColors as u } from "./charts/use-chart-colors.js";
+import { AreaChart as d } from "./charts/AreaChart.js";
+import { BarChart as f } from "./charts/BarChart.js";
+import { LineChart as p } from "./charts/LineChart.js";
+import { PieChart as m } from "./charts/PieChart.js";
+import { RadarChart as h } from "./charts/RadarChart.js";
+export { d as AreaChart, f as BarChart, o as CHART_COLOR_TOKEN_COUNT, s as DEFAULT_CHART_COLORS, e as DIVERGING_STEP_COUNT, p as LineChart, t as ORDINAL_START_STEP, m as PieChart, h as RadarChart, n as SEQUENTIAL_STEP_COUNT, r as divergingScale, c as resolveChartChrome, l as resolveChartColors, i as scaleSteps, a as sequentialScale, u as useChartColors };

package/dist/components/BottomNavigation/BottomNavigation.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNavigation.module.cjs","names":[],"sources":["../../../src/components/BottomNavigation/BottomNavigation.module.css"],"sourcesContent":[".bar {\n    display: flex;\n    width: 100%;\n    background: var(--tempest-surface);\n    border-top: 1px solid var(--tempest-border);\n    padding-bottom: env(safe-area-inset-bottom, 0);\n    font-family: var(--tempest-font-sans);\n}\n\n.item {\n    flex: 1 1 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 2px;\n    padding: 8px 4px;\n    background: none;\n    border: 0;\n    cursor: pointer;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-2xs);\n    transition: color var(--tempest-duration-fast, 120ms) var(--tempest-ease-out, ease-out);\n    min-height: 56px;\n}\n\n.item:hover {\n    color: var(--tempest-text);\n}\n\n.item.active {\n    color: var(--tempest-primary);\n}\n\n.item:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.iconWrap {\n    position: relative;\n    display: inline-flex;\n}\n\n.icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n    font-size: 20px;\n}\n\n.badge {\n    position: absolute;\n    top: -4px;\n    right: -8px;\n    min-width: 14px;\n    height: 14px;\n    padding: 0 4px;\n    border-radius: var(--tempest-radius-full);\n    background: var(--tempest-danger-solid);\n    color: var(--tempest-danger-on);\n    font-size: 10px;\n    line-height: 14px;\n    text-align: center;\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.label {\n    line-height: 1;\n}\n"],"mappings":""}
+{"version":3,"file":"BottomNavigation.module.cjs","names":[],"sources":["../../../src/components/BottomNavigation/BottomNavigation.module.css"],"sourcesContent":[".bar {\n    display: flex;\n    width: 100%;\n    background: var(--tempest-surface);\n    border-top: 1px solid var(--tempest-border);\n    padding-bottom: env(safe-area-inset-bottom, 0);\n    font-family: var(--tempest-font-sans);\n}\n\n.item {\n    flex: 1 1 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 2px;\n    padding: 8px 4px;\n    background: none;\n    border: 0;\n    cursor: pointer;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-2xs);\n    transition: color var(--tempest-duration-fast, 120ms) var(--tempest-ease-out, ease-out);\n    min-height: 56px;\n}\n\n.item:hover {\n    color: var(--tempest-text);\n}\n\n.item.active {\n    color: var(--tempest-primary);\n}\n\n.item:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.iconWrap {\n    position: relative;\n    display: inline-flex;\n}\n\n.icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n    font-size: 20px;\n}\n\n.badge {\n    position: absolute;\n    top: -4px;\n    right: -8px;\n    min-width: 14px;\n    height: 14px;\n    padding: 0 4px;\n    border-radius: var(--tempest-radius-full);\n    background: var(--tempest-danger-solid);\n    color: var(--tempest-danger-on, #fff);\n    font-size: 10px;\n    line-height: 14px;\n    text-align: center;\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.label {\n    line-height: 1;\n}\n"],"mappings":""}

package/dist/components/BottomNavigation/BottomNavigation.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNavigation.module.js","names":[],"sources":["../../../src/components/BottomNavigation/BottomNavigation.module.css"],"sourcesContent":[".bar {\n    display: flex;\n    width: 100%;\n    background: var(--tempest-surface);\n    border-top: 1px solid var(--tempest-border);\n    padding-bottom: env(safe-area-inset-bottom, 0);\n    font-family: var(--tempest-font-sans);\n}\n\n.item {\n    flex: 1 1 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 2px;\n    padding: 8px 4px;\n    background: none;\n    border: 0;\n    cursor: pointer;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-2xs);\n    transition: color var(--tempest-duration-fast, 120ms) var(--tempest-ease-out, ease-out);\n    min-height: 56px;\n}\n\n.item:hover {\n    color: var(--tempest-text);\n}\n\n.item.active {\n    color: var(--tempest-primary);\n}\n\n.item:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.iconWrap {\n    position: relative;\n    display: inline-flex;\n}\n\n.icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n    font-size: 20px;\n}\n\n.badge {\n    position: absolute;\n    top: -4px;\n    right: -8px;\n    min-width: 14px;\n    height: 14px;\n    padding: 0 4px;\n    border-radius: var(--tempest-radius-full);\n    background: var(--tempest-danger-solid);\n    color: var(--tempest-danger-on);\n    font-size: 10px;\n    line-height: 14px;\n    text-align: center;\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.label {\n    line-height: 1;\n}\n"],"mappings":""}
+{"version":3,"file":"BottomNavigation.module.js","names":[],"sources":["../../../src/components/BottomNavigation/BottomNavigation.module.css"],"sourcesContent":[".bar {\n    display: flex;\n    width: 100%;\n    background: var(--tempest-surface);\n    border-top: 1px solid var(--tempest-border);\n    padding-bottom: env(safe-area-inset-bottom, 0);\n    font-family: var(--tempest-font-sans);\n}\n\n.item {\n    flex: 1 1 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 2px;\n    padding: 8px 4px;\n    background: none;\n    border: 0;\n    cursor: pointer;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-2xs);\n    transition: color var(--tempest-duration-fast, 120ms) var(--tempest-ease-out, ease-out);\n    min-height: 56px;\n}\n\n.item:hover {\n    color: var(--tempest-text);\n}\n\n.item.active {\n    color: var(--tempest-primary);\n}\n\n.item:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.iconWrap {\n    position: relative;\n    display: inline-flex;\n}\n\n.icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n    font-size: 20px;\n}\n\n.badge {\n    position: absolute;\n    top: -4px;\n    right: -8px;\n    min-width: 14px;\n    height: 14px;\n    padding: 0 4px;\n    border-radius: var(--tempest-radius-full);\n    background: var(--tempest-danger-solid);\n    color: var(--tempest-danger-on, #fff);\n    font-size: 10px;\n    line-height: 14px;\n    text-align: center;\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.label {\n    line-height: 1;\n}\n"],"mappings":""}

package/dist/components/Carousel/Carousel.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.module.cjs","names":[],"sources":["../../../src/components/Carousel/Carousel.module.css"],"sourcesContent":[".root {\n    position: relative;\n    width: 100%;\n    font-family: var(--tempest-font-sans);\n}\n\n.root:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n}\n\n.viewport {\n    overflow: hidden;\n    border-radius: var(--tempest-radius-lg);\n}\n\n.track {\n    display: flex;\n    transition: transform var(--tempest-duration-normal) var(--tempest-ease-out);\n}\n\n.slide {\n    flex: 0 0 100%;\n    min-width: 0;\n}\n\n.arrow {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    background-color: var(--tempest-bg);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-full);\n    box-shadow: var(--tempest-shadow-md);\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-xl);\n    line-height: 1;\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .arrow:hover:not(:disabled) {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.arrow:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n}\n\n.arrow:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.prev {\n    left: var(--tempest-space-2);\n}\n\n.next {\n    right: var(--tempest-space-2);\n}\n\n.dots {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    margin-top: var(--tempest-space-3);\n}\n\n.dot {\n    width: 0.5rem;\n    height: 0.5rem;\n    padding: 0;\n    background-color: var(--tempest-border);\n    border: none;\n    border-radius: var(--tempest-radius-full);\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n.dotActive {\n    background-color: var(--tempest-primary);\n}\n\n.dot:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .track {\n        transition: none;\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"Carousel.module.cjs","names":[],"sources":["../../../src/components/Carousel/Carousel.module.css"],"sourcesContent":[".root {\n    position: relative;\n    width: 100%;\n    font-family: var(--tempest-font-sans);\n}\n\n.root:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n}\n\n.viewport {\n    overflow: hidden;\n    border-radius: var(--tempest-radius-lg);\n}\n\n.track {\n    display: flex;\n    transition: transform var(--tempest-duration-base) var(--tempest-ease-out);\n}\n\n.slide {\n    flex: 0 0 100%;\n    min-width: 0;\n}\n\n.arrow {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    background-color: var(--tempest-bg);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-full);\n    box-shadow: var(--tempest-shadow-md);\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-xl);\n    line-height: 1;\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .arrow:hover:not(:disabled) {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.arrow:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n}\n\n.arrow:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.prev {\n    left: var(--tempest-space-2);\n}\n\n.next {\n    right: var(--tempest-space-2);\n}\n\n.dots {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    margin-top: var(--tempest-space-3);\n}\n\n.dot {\n    width: 0.5rem;\n    height: 0.5rem;\n    padding: 0;\n    background-color: var(--tempest-border);\n    border: none;\n    border-radius: var(--tempest-radius-full);\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n.dotActive {\n    background-color: var(--tempest-primary);\n}\n\n.dot:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .track {\n        transition: none;\n    }\n}\n"],"mappings":""}

package/dist/components/Carousel/Carousel.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.module.js","names":[],"sources":["../../../src/components/Carousel/Carousel.module.css"],"sourcesContent":[".root {\n    position: relative;\n    width: 100%;\n    font-family: var(--tempest-font-sans);\n}\n\n.root:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n}\n\n.viewport {\n    overflow: hidden;\n    border-radius: var(--tempest-radius-lg);\n}\n\n.track {\n    display: flex;\n    transition: transform var(--tempest-duration-normal) var(--tempest-ease-out);\n}\n\n.slide {\n    flex: 0 0 100%;\n    min-width: 0;\n}\n\n.arrow {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    background-color: var(--tempest-bg);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-full);\n    box-shadow: var(--tempest-shadow-md);\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-xl);\n    line-height: 1;\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .arrow:hover:not(:disabled) {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.arrow:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n}\n\n.arrow:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.prev {\n    left: var(--tempest-space-2);\n}\n\n.next {\n    right: var(--tempest-space-2);\n}\n\n.dots {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    margin-top: var(--tempest-space-3);\n}\n\n.dot {\n    width: 0.5rem;\n    height: 0.5rem;\n    padding: 0;\n    background-color: var(--tempest-border);\n    border: none;\n    border-radius: var(--tempest-radius-full);\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n.dotActive {\n    background-color: var(--tempest-primary);\n}\n\n.dot:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .track {\n        transition: none;\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"Carousel.module.js","names":[],"sources":["../../../src/components/Carousel/Carousel.module.css"],"sourcesContent":[".root {\n    position: relative;\n    width: 100%;\n    font-family: var(--tempest-font-sans);\n}\n\n.root:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n}\n\n.viewport {\n    overflow: hidden;\n    border-radius: var(--tempest-radius-lg);\n}\n\n.track {\n    display: flex;\n    transition: transform var(--tempest-duration-base) var(--tempest-ease-out);\n}\n\n.slide {\n    flex: 0 0 100%;\n    min-width: 0;\n}\n\n.arrow {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    background-color: var(--tempest-bg);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-full);\n    box-shadow: var(--tempest-shadow-md);\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-xl);\n    line-height: 1;\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .arrow:hover:not(:disabled) {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.arrow:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n}\n\n.arrow:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.prev {\n    left: var(--tempest-space-2);\n}\n\n.next {\n    right: var(--tempest-space-2);\n}\n\n.dots {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    margin-top: var(--tempest-space-3);\n}\n\n.dot {\n    width: 0.5rem;\n    height: 0.5rem;\n    padding: 0;\n    background-color: var(--tempest-border);\n    border: none;\n    border-radius: var(--tempest-radius-full);\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n.dotActive {\n    background-color: var(--tempest-primary);\n}\n\n.dot:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .track {\n        transition: none;\n    }\n}\n"],"mappings":""}

package/dist/components/CodeBlock/CodeBlock.cjs

@@ -0,0 +1,3 @@
+const e=require("../../utils/cn.cjs"),t=require("../CopyButton/CopyButton.cjs"),n=require("./tokenize.cjs"),r=require("./CodeBlock.module.cjs");let i=require("react"),a=require("react/jsx-runtime");function o({code:o,language:s,filename:c,showLineNumbers:l=!1,highlightLines:u,copyable:d=!0,maxHeight:f,wrap:p=!1,label:m,className:h,...g}){let _=(0,i.useMemo)(()=>o.replace(/^\n+/,``).replace(/\s+$/,``),[o]),v=(0,i.useMemo)(()=>n.tokenizeLines(_,s),[_,s]),y=n.resolveLanguage(s),b=(0,i.useMemo)(()=>new Set(u??[]),[u]),x=m??(c&&typeof c==`string`?`Código: ${c}`:`Bloco de código${y===`plain`?``:` em ${y}`}`),S=!!c||d;return(0,a.jsxs)(`div`,{className:e.cn(r.default.wrapper,h),...g,children:[S&&(0,a.jsxs)(`div`,{className:r.default.header,children:[(0,a.jsx)(`span`,{className:r.default.filename,children:c??(y===`plain`?``:y)}),d&&(0,a.jsx)(t.CopyButton,{value:_,className:r.default.copy})]}),(0,a.jsx)(`pre`,{className:e.cn(r.default.pre,p&&r.default.wrap),style:{maxHeight:f},tabIndex:0,role:`group`,"aria-label":x,children:(0,a.jsx)(`code`,{className:r.default.code,"data-language":y,children:v.map((t,n)=>(0,a.jsxs)(i.Fragment,{children:[(0,a.jsxs)(`span`,{className:e.cn(r.default.line,b.has(n+1)&&r.default.marked),children:[l&&(0,a.jsx)(`span`,{className:r.default.lineNumber,"aria-hidden":`true`,children:n+1}),(0,a.jsx)(`span`,{className:r.default.lineContent,children:t.map((e,t)=>(0,a.jsx)(`span`,{className:r.default[e.kind],"data-token":e.kind,children:e.value},t))})]}),n<v.length-1?`
+`:null]},n))})})]})}exports.CodeBlock=o;
+//# sourceMappingURL=CodeBlock.cjs.map

package/dist/components/CodeBlock/CodeBlock.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.cjs","names":[],"sources":["../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import { Fragment, useMemo } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nimport { CopyButton } from \"../CopyButton\";\nimport { resolveLanguage, tokenizeLines } from \"./tokenize\";\nimport styles from \"./CodeBlock.module.css\";\n\nexport interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** The source to display. Leading and trailing blank lines are trimmed. */\n    code: string;\n    /** Grammar name or alias (`ts`, `bash`, `json`…). Unknown values render plain. */\n    language?: string;\n    /** Shown in the header, usually a file path. */\n    filename?: ReactNode;\n    /** Number the lines. Default `false`. */\n    showLineNumbers?: boolean;\n    /** 1-based line numbers to mark as the point of the snippet. */\n    highlightLines?: readonly number[];\n    /** Offer a copy button. Default `true`. */\n    copyable?: boolean;\n    /** Cap the height in px or any CSS length; the body scrolls past it. */\n    maxHeight?: number | string;\n    /** Wrap long lines instead of scrolling sideways. Default `false`. */\n    wrap?: boolean;\n    /**\n     * Accessible name for the code region. Defaults to naming the language, and\n     * to the filename when there is one.\n     */\n    label?: string;\n}\n\n/**\n * A read-only code sample: syntax colours, optional line numbers, copy button.\n *\n * The `<pre>` is always focusable. A code block is scrollable and holds nothing\n * focusable inside, so without a tab stop a keyboard user can see there is more\n * code past the edge and has no way to reach it. It is the one scroll container\n * where the stop is unconditional rather than measured — a code sample is\n * expected to be reachable, read and selected on its own.\n *\n * Colours come from an approximate scanner, not a parser — see {@link tokenize}.\n *\n * @example\n * <CodeBlock code={snippet} language=\"ts\" filename=\"src/main.ts\" showLineNumbers />\n * <CodeBlock code={log} language=\"bash\" maxHeight={280} />\n */\nexport function CodeBlock({\n    code,\n    language,\n    filename,\n    showLineNumbers = false,\n    highlightLines,\n    copyable = true,\n    maxHeight,\n    wrap = false,\n    label,\n    className,\n    ...rest\n}: CodeBlockProps) {\n    const trimmed = useMemo(() => code.replace(/^\\n+/, \"\").replace(/\\s+$/, \"\"), [code]);\n    const lines = useMemo(() => tokenizeLines(trimmed, language), [trimmed, language]);\n    const resolved = resolveLanguage(language);\n    const marked = useMemo(() => new Set(highlightLines ?? []), [highlightLines]);\n\n    const name =\n        label ??\n        (filename && typeof filename === \"string\"\n            ? `Código: ${filename}`\n            : `Bloco de código${resolved === \"plain\" ? \"\" : ` em ${resolved}`}`);\n\n    const hasHeader = Boolean(filename) || copyable;\n\n    return (\n        <div className={cn(styles.wrapper, className)} {...rest}>\n            {hasHeader && (\n                <div className={styles.header}>\n                    <span className={styles.filename}>\n                        {filename ?? (resolved === \"plain\" ? \"\" : resolved)}\n                    </span>\n                    {copyable && <CopyButton value={trimmed} className={styles.copy} />}\n                </div>\n            )}\n\n            <pre\n                className={cn(styles.pre, wrap && styles.wrap)}\n                style={{ maxHeight }}\n                tabIndex={0}\n                role=\"group\"\n                aria-label={name}\n            >\n                <code className={styles.code} data-language={resolved}>\n                    {lines.map((tokens, index) => (\n                        <Fragment key={index}>\n                            <span\n                                className={cn(styles.line, marked.has(index + 1) && styles.marked)}\n                            >\n                                {showLineNumbers && (\n                                    /*\n                                     * The number is decoration: it must not land in the\n                                     * clipboard when the reader selects the snippet, and a\n                                     * screen reader announcing \"one const two import\" adds\n                                     * nothing. `user-select: none` in CSS plus this.\n                                     */\n                                    <span className={styles.lineNumber} aria-hidden=\"true\">\n                                        {index + 1}\n                                    </span>\n                                )}\n                                <span className={styles.lineContent}>\n                                    {tokens.map((token, tokenIndex) => (\n                                        <span\n                                            key={tokenIndex}\n                                            className={styles[token.kind]}\n                                            data-token={token.kind}\n                                        >\n                                            {token.value}\n                                        </span>\n                                    ))}\n                                </span>\n                            </span>\n                            {/*\n                             * A real newline character, and outside the line box.\n                             * It has to be real so that selecting the snippet by\n                             * hand and copying yields the source instead of one\n                             * run-together line. It has to be outside because the\n                             * line is an inline-block: a newline within one is\n                             * consumed inside that box, and every line ends up\n                             * side by side on a single row. The last one is\n                             * dropped so the block does not end in blank space.\n                             */}\n                            {index < lines.length - 1 ? \"\\n\" : null}\n                        </Fragment>\n                    ))}\n                </code>\n            </pre>\n        </div>\n    );\n}\n"],"mappings":"sMAgDA,SAAgB,EAAU,CACtB,OACA,WACA,WACA,kBAAkB,GAClB,iBACA,WAAW,GACX,YACA,OAAO,GACP,QACA,YACA,GAAG,GACY,CACf,IAAM,GAAA,EAAA,EAAA,QAAA,KAAwB,EAAK,QAAQ,OAAQ,EAAE,CAAC,CAAC,QAAQ,OAAQ,EAAE,EAAG,CAAC,CAAI,CAAC,EAC5E,GAAA,EAAA,EAAA,QAAA,KAAsB,EAAA,cAAc,EAAS,CAAQ,EAAG,CAAC,EAAS,CAAQ,CAAC,EAC3E,EAAW,EAAA,gBAAgB,CAAQ,EACnC,GAAA,EAAA,EAAA,QAAA,KAAuB,IAAI,IAAI,GAAkB,CAAC,CAAC,EAAG,CAAC,CAAc,CAAC,EAEtE,EACF,IACC,GAAY,OAAO,GAAa,SAC3B,WAAW,IACX,kBAAkB,IAAa,QAAU,GAAK,OAAO,OAEzD,EAAY,EAAQ,GAAa,EAEvC,OACI,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,QAAS,CAAS,EAAG,GAAI,WAAnD,CACK,IACG,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,gBAAvB,EACI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBACnB,IAAa,IAAa,QAAU,GAAK,EACxC,CAAA,EACL,IAAY,EAAA,EAAA,IAAA,CAAC,EAAA,WAAD,CAAY,MAAO,EAAS,UAAW,EAAA,QAAO,IAAO,CAAA,CACjE,KAGT,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,UAAW,EAAA,GAAG,EAAA,QAAO,IAAK,GAAQ,EAAA,QAAO,IAAI,EAC7C,MAAO,CAAE,WAAU,EACnB,SAAU,EACV,KAAK,QACL,aAAY,YAEZ,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,KAAM,gBAAe,WACxC,EAAM,KAAK,EAAQ,KAChB,EAAA,EAAA,KAAA,CAAC,EAAA,SAAD,CAAA,SAAA,EACI,EAAA,EAAA,KAAA,CAAC,OAAD,CACI,UAAW,EAAA,GAAG,EAAA,QAAO,KAAM,EAAO,IAAI,EAAQ,CAAC,GAAK,EAAA,QAAO,MAAM,WADrE,CAGK,IAOG,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,WAAY,cAAY,gBAC3C,EAAQ,CACP,CAAA,GAEV,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,qBACnB,EAAO,KAAK,EAAO,KAChB,EAAA,EAAA,IAAA,CAAC,OAAD,CAEI,UAAW,EAAA,QAAO,EAAM,MACxB,aAAY,EAAM,cAEjB,EAAM,KACL,EALG,CAKH,CACT,CACC,CAAA,CACJ,IAWL,EAAQ,EAAM,OAAS,EAAI;EAAO,IAC7B,CAAA,EAtCK,CAsCL,CACb,CACC,CAAA,CACL,CAAA,CACJ,GAEb"}

package/dist/components/CodeBlock/CodeBlock.js

@@ -0,0 +1,53 @@
+import { cn as e } from "../../utils/cn.js";
+import { CopyButton as t } from "../CopyButton/CopyButton.js";
+import { resolveLanguage as n, tokenizeLines as r } from "./tokenize.js";
+import i from "./CodeBlock.module.js";
+import { Fragment as a, useMemo as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/CodeBlock/CodeBlock.tsx
+function l({ code: l, language: u, filename: d, showLineNumbers: f = !1, highlightLines: p, copyable: m = !0, maxHeight: h, wrap: g = !1, label: _, className: v, ...y }) {
+	let b = o(() => l.replace(/^\n+/, "").replace(/\s+$/, ""), [l]), x = o(() => r(b, u), [b, u]), S = n(u), C = o(() => new Set(p ?? []), [p]), w = _ ?? (d && typeof d == "string" ? `Código: ${d}` : `Bloco de código${S === "plain" ? "" : ` em ${S}`}`), T = !!d || m;
+	return /* @__PURE__ */ c("div", {
+		className: e(i.wrapper, v),
+		...y,
+		children: [T && /* @__PURE__ */ c("div", {
+			className: i.header,
+			children: [/* @__PURE__ */ s("span", {
+				className: i.filename,
+				children: d ?? (S === "plain" ? "" : S)
+			}), m && /* @__PURE__ */ s(t, {
+				value: b,
+				className: i.copy
+			})]
+		}), /* @__PURE__ */ s("pre", {
+			className: e(i.pre, g && i.wrap),
+			style: { maxHeight: h },
+			tabIndex: 0,
+			role: "group",
+			"aria-label": w,
+			children: /* @__PURE__ */ s("code", {
+				className: i.code,
+				"data-language": S,
+				children: x.map((t, n) => /* @__PURE__ */ c(a, { children: [/* @__PURE__ */ c("span", {
+					className: e(i.line, C.has(n + 1) && i.marked),
+					children: [f && /* @__PURE__ */ s("span", {
+						className: i.lineNumber,
+						"aria-hidden": "true",
+						children: n + 1
+					}), /* @__PURE__ */ s("span", {
+						className: i.lineContent,
+						children: t.map((e, t) => /* @__PURE__ */ s("span", {
+							className: i[e.kind],
+							"data-token": e.kind,
+							children: e.value
+						}, t))
+					})]
+				}), n < x.length - 1 ? "\n" : null] }, n))
+			})
+		})]
+	});
+}
+//#endregion
+export { l as CodeBlock };
+
+//# sourceMappingURL=CodeBlock.js.map