dashtaste 0.0.0-stage → 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Felix Fang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,130 @@
-# Temporary Holding Version
+# dashtaste
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Two style-pack skills for coding agents, plus a `dashtaste check` CLI for chart configs and rendered dashboards.
+
+| Before                              | After                             |
+| ----------------------------------- | --------------------------------- |
+| ![Before](gallery/store-before.png) | ![After](gallery/store-after.png) |
+
+## Install the skill
+
+Choose a pack for the dashboard's audience:
+
+```sh
+npx skills add FelixFangX/dashtaste --skill dashtaste-global
+npx skills add FelixFangX/dashtaste --skill dashtaste-cn
+```
+
+For manual installation, copy the folder from [skills/](skills/) into your agent's skills directory. Ask the agent to follow the selected skill when building or reviewing a dashboard.
+
+## Check
+
+```sh
+npx dashtaste check dashboard.json --pack cn
+npx dashtaste check http://localhost:5173 --pack global
+npx dashtaste check dashboard.json --pack cn --format json
+npx dashtaste check dashboard.json --pack cn --disable DT003,DT005
+```
+
+Requires Node 20.19 or newer. Checking a URL or HTML file also needs a local Chromium (set `CHROME_PATH`) and the optional `playwright-core` dependency; JSON configs need neither.
+
+To run from a checkout instead, use pnpm:
+
+```sh
+pnpm install
+pnpm build
+node dist/cli.js check gallery/pages/store/before.html --pack cn --only DT003,DT005,DT010
+```
+
+Actual output from that three-rule gallery check:
+
+```text
+gallery/pages/store/before.html
+  warn  DT003  charts[0].series[1]  smooth line  → use straight segments: smooth: false
+  warn  DT005  charts[1].series[0]  pie slices  → use horizontal bars or combine small parts into Other
+  error  DT010  charts[0].yAxis[0]  bar baseline  → set min: 0 and scale: false
+1 error, 2 warnings · score 84/100
+```
+
+Exit codes: `0` passes, `1` means errors or warnings above the limit, and `2` means invalid input or unavailable extraction. Warnings have no limit by default; use `--max-warnings 0` to require none. Use `--mode dark` for dark pages. JSON output includes findings, paths, fixes, and scores. Every rule can be disabled with `--disable` and comma-separated IDs.
+
+Scores start at 100, subtract 10 per error, 3 per warning, and 1 per informational finding, with a floor of zero. See [usage](docs/usage.md) for all flags and input shapes.
+
+## Packs
+
+| Choice        | global                           | cn                                                        |
+| ------------- | -------------------------------- | --------------------------------------------------------- |
+| Deltas        | Green up, red down; arrows       | Red up, green down; arrows                                |
+| Units         | K / M / B                        | wan / yi (10⁴ / 10⁸)                                      |
+| KPI layout    | One strip with dividers          | Flat cards; period-over-period and year-over-year rows    |
+| Legend        | Omit for one series              | Omit for one series; direct category labels work for pies |
+| Pie           | At most five slices; prefer bars | At most five slices; rose charts allow eight              |
+| Dark / screen | Paper and ink dark tokens        | Navy panels; 1920×1080 screen composition                 |
+
+Both packs specify spacing, typography, chart defaults, and number formatting. Layout still needs human review.
+
+## Rules
+
+[Reasons, triggers, and fixes](docs/rules.md) for every rule:
+
+| ID    | Name                 |
+| ----- | -------------------- |
+| DT001 | default-palette      |
+| DT002 | rainbow-palette      |
+| DT003 | smooth-line          |
+| DT004 | symbols-everywhere   |
+| DT005 | pie-slices           |
+| DT006 | pie-overuse          |
+| DT007 | three-d              |
+| DT008 | dual-axis            |
+| DT009 | missing-unit         |
+| DT010 | bar-baseline         |
+| DT011 | raw-large-numbers    |
+| DT012 | unit-system          |
+| DT013 | delta-convention     |
+| DT014 | delta-colour-only    |
+| DT015 | low-contrast-text    |
+| DT016 | thin-line-contrast   |
+| DT017 | gradient-decoration  |
+| DT018 | glow                 |
+| DT019 | kpi-overload         |
+| DT020 | kpi-rainbow          |
+| DT021 | emoji-icons          |
+| DT022 | cjk-min-size         |
+| DT023 | legend-single-series |
+
+## Gallery
+
+All data is fictional and seeded in [gallery/data.mjs](gallery/data.mjs). Each pair shares the same data. Before pages use common unguided defaults; after pages apply their pack. These are style checks, not a usability benchmark.
+
+| Dashboard | Pack, mode         | Before                                              | After                              |
+| --------- | ------------------ | --------------------------------------------------- | ---------------------------------- |
+| saas      | global, light      | [32 errors, 50 warnings](gallery/saas-before.png)   | [clean](gallery/saas-after.png)    |
+| finance   | global, dark       | [7 errors, 40 warnings](gallery/finance-before.png) | [clean](gallery/finance-after.png) |
+| store     | cn, light          | [41 errors, 61 warnings](gallery/store-before.png)  | [clean](gallery/store-after.png)   |
+| live      | cn, dark 1920×1080 | [32 errors, 76 warnings](gallery/live-before.png)   | [clean](gallery/live-after.png)    |
+
+The live page renders at 1920×1080; the others at 1440×900.
+
+```sh
+pnpm gallery
+```
+
+This builds the CLI, copies local ECharts into the ignored `gallery/vendor/` folder, renders eight PNGs, and writes [results.json](gallery/results.json). No CDN or network fonts are used. Set `CHROME_PATH` to your local Chromium executable; the default is `/usr/bin/google-chrome`. The browser test extracts each live page again instead of trusting saved scores.
+
+Comparison captions: “Default” / “Dashtaste” (global and cn; the cn caption for “Default” is written in Chinese). Wide images preserve full board height and use measured column boundaries.
+
+- saas: [wide](gallery/compare/saas-wide.png) · [tall](gallery/compare/saas-tall.png)
+- finance: [wide](gallery/compare/finance-wide.png) · [tall](gallery/compare/finance-tall.png)
+- store: [wide](gallery/compare/store-wide.png) · [tall](gallery/compare/store-tall.png)
+- live: [wide](gallery/compare/live-wide.png) · [tall](gallery/compare/live-tall.png)
+
+## Status
+
+Early (0.x). Expect rule changes between minor versions.
+
+ECharts only for now. Vega-Lite and Recharts are planned. HTML mode needs a local Chromium. Rules are opinions with reasons; every rule can be disabled.
+
+## License
+
+[MIT](LICENSE).

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli.js

@@ -0,0 +1,124 @@
+#!/usr/bin/env node
+import { readFile } from 'node:fs/promises';
+import { check, summarize, score } from './engine.js';
+import { rules } from './rules/index.js';
+import { getTokens } from './packs/index.js';
+import { extractPage } from './extract.js';
+const version = '0.0.1';
+const help = {
+    main: 'Usage: dashtaste <check|rules|tokens> --help',
+    check: 'Usage: dashtaste check <file|url...> [--pack global|cn] [--mode light|dark] [--format text|json] [--max-warnings N] [--disable DT001,...] [--only DT001,...] [--background #hex]\nCheck options, option arrays, or page facts. Exit: 0 pass, 1 findings exceed limit, 2 invalid input. Set NO_COLOR to disable ANSI colour; CHROME_PATH selects the browser.',
+    rules: 'Usage: dashtaste rules [--pack global|cn] [--format text|json]\nList rule metadata in rule order.',
+    tokens: 'Usage: dashtaste tokens --pack global|cn [--mode light|dark] [--format json|css]\nPrint exact pack tokens.',
+};
+function parseArgs(command, args) {
+    const flags = {}, inputs = [];
+    const allowed = {
+        check: ['pack', 'mode', 'format', 'max-warnings', 'disable', 'only', 'background'],
+        rules: ['pack', 'format'],
+        tokens: ['pack', 'mode', 'format'],
+    };
+    if (!command || !allowed[command])
+        throw new Error('usage: dashtaste check <file|url...> | rules | tokens --pack global|cn');
+    for (let i = 0; i < args.length; i++) {
+        if (args[i].startsWith('--')) {
+            const key = args[i].slice(2);
+            if (!allowed[command].includes(key) || !args[i + 1] || args[i + 1].startsWith('--'))
+                throw new Error(`invalid option: ${args[i]}`);
+            flags[key] = args[++i];
+        }
+        else
+            inputs.push(args[i]);
+    }
+    return { flags, inputs };
+}
+async function main() {
+    const [command, ...args] = process.argv.slice(2);
+    if (command === '--help' || (command && args.includes('--help'))) {
+        console.log(help[command] ?? help.main);
+        return;
+    }
+    const { flags, inputs } = parseArgs(command, args);
+    const pack = (flags.pack ?? 'global'), mode = (flags.mode ?? 'light'), format = flags.format ?? (command === 'tokens' ? 'json' : 'text');
+    if (!['global', 'cn'].includes(pack))
+        throw new Error('pack must be global or cn');
+    if (!['light', 'dark'].includes(mode))
+        throw new Error('mode must be light or dark');
+    if (!(command === 'tokens' ? ['json', 'css'] : ['json', 'text']).includes(format))
+        throw new Error('invalid output format');
+    if (command !== 'check' && inputs.length)
+        throw new Error('unexpected input');
+    if (command === 'tokens') {
+        if (!flags.pack)
+            throw new Error('tokens requires --pack');
+        const t = getTokens(pack, mode);
+        console.log(format === 'json'
+            ? JSON.stringify(t, null, 2)
+            : `:root {\n${Object.entries(t)
+                .flatMap(([k, v]) => Array.isArray(v)
+                ? v.map((x, i) => `  --dt-${k}-${i + 1}: ${x};`)
+                : [`  --dt-${k}: ${v};`])
+                .join('\n')}\n}`);
+        return;
+    }
+    if (command === 'rules') {
+        const selected = rules.filter((r) => !flags.pack || r.packs.includes(pack));
+        console.log(format === 'json'
+            ? JSON.stringify(selected.map(({ check, ...r }) => r), null, 2)
+            : selected.map((r) => `${r.id}  ${r.severity}  ${r.name}  ${r.description}`).join('\n'));
+        return;
+    }
+    if (!inputs.length)
+        throw new Error('check requires at least one input');
+    const max = flags['max-warnings'] === undefined ? Infinity : Number(flags['max-warnings']);
+    if (max < 0 || (!Number.isInteger(max) && max !== Infinity) || flags['max-warnings'] === '')
+        throw new Error('max-warnings must be a non-negative integer');
+    const ids = (key) => {
+        if (!flags[key])
+            return undefined;
+        const values = flags[key].split(',');
+        if (values.some((id) => !rules.some((r) => r.id === id)))
+            throw new Error(`unknown rule in --${key}`);
+        return values;
+    };
+    const disable = ids('disable'), only = ids('only');
+    if (flags.background && !/^#(?:[\da-f]{3}|[\da-f]{6})$/i.test(flags.background))
+        throw new Error('background must be a hex colour');
+    const results = [];
+    for (const input of inputs) {
+        let data;
+        if (/^https?:\/\//i.test(input) || /\.html?$/i.test(input))
+            data = await extractPage(input);
+        else {
+            try {
+                data = JSON.parse(await readFile(input, 'utf8'));
+            }
+            catch (error) {
+                throw new Error(`cannot read JSON input ${input}: ${error.message}`);
+            }
+        }
+        const findings = check(data, { pack, mode, disable, only, background: flags.background });
+        results.push({ input, findings, score: score(findings) });
+    }
+    const summary = summarize(results.flatMap((r) => r.findings));
+    if (format === 'json')
+        console.log(JSON.stringify({ version, pack, inputs: results, summary }, null, 2));
+    else {
+        const tty = process.stdout.isTTY && process.env.NO_COLOR === undefined;
+        for (const result of results) {
+            console.log(result.input);
+            for (const f of result.findings) {
+                const label = tty
+                    ? `\x1b[${f.severity === 'error' ? 31 : f.severity === 'warn' ? 33 : 36}m${f.severity}\x1b[0m`
+                    : f.severity;
+                console.log(`  ${label}  ${f.ruleId}  ${f.path}  ${f.message}  → ${f.fix.replace('<pack>', pack)}`);
+            }
+        }
+        console.log(`${summary.errors} error${summary.errors === 1 ? '' : 's'}, ${summary.warnings} warning${summary.warnings === 1 ? '' : 's'} · score ${summary.score}/100`);
+    }
+    process.exitCode = summary.errors > 0 || summary.warnings > max ? 1 : 0;
+}
+main().catch((error) => {
+    console.error(`dashtaste: ${error.message}`);
+    process.exitCode = 2;
+});

package/dist/color.d.ts

@@ -0,0 +1,4 @@
+export declare function rgb(color: string): number[] | undefined;
+export declare const linear: (v: number) => number;
+export declare function contrast(a: string, b: string): number;
+export declare function hueBucket(c: string): number | undefined;

package/dist/color.js

@@ -0,0 +1,43 @@
+const named = {
+    black: '#000000',
+    white: '#FFFFFF',
+    red: '#FF0000',
+    green: '#008000',
+    blue: '#0000FF',
+    gray: '#808080',
+    grey: '#808080',
+    yellow: '#FFFF00',
+    orange: '#FFA500',
+    purple: '#800080',
+    cyan: '#00FFFF',
+    magenta: '#FF00FF',
+};
+export function rgb(color) {
+    const normalized = color.trim().toLowerCase();
+    const h = (named[normalized] ?? normalized).replace(/^#/, '');
+    if (/^[\da-f]{3}$/i.test(h))
+        return [...h].map((c) => parseInt(c + c, 16) / 255);
+    if (/^[\da-f]{6}$/i.test(h))
+        return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16) / 255);
+    const m = normalized.match(/^rgba?\(\s*([\d.]+)[, ]+([\d.]+)[, ]+([\d.]+)/i);
+    return m ? m.slice(1, 4).map((v) => Number(v) / 255) : undefined;
+}
+export const linear = (v) => (v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4);
+export function contrast(a, b) {
+    const lum = (c) => {
+        const r = rgb(c);
+        return r ? r.map(linear).reduce((s, v, i) => s + v * [0.2126, 0.7152, 0.0722][i], 0) : NaN;
+    };
+    const x = lum(a), y = lum(b);
+    return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
+}
+export function hueBucket(c) {
+    const r = rgb(c);
+    if (!r)
+        return;
+    const max = Math.max(...r), min = Math.min(...r), d = max - min;
+    if (max === 0 || d / max < 0.45)
+        return;
+    const h = max === r[0] ? (r[1] - r[2]) / d : max === r[1] ? 2 + (r[2] - r[0]) / d : 4 + (r[0] - r[1]) / d;
+    return Math.floor(((h * 60 + 360) % 360) / 60);
+}

package/dist/engine.d.ts

@@ -0,0 +1,11 @@
+import type { CheckOptions, Finding, PageFacts } from './types.js';
+export declare function normalizeInput(input: unknown): PageFacts;
+export declare function check(input: unknown, options?: CheckOptions): Finding[];
+/** Score = 100 - 10 * errors - 3 * warnings - info, floored at zero. */
+export declare function score(findings: Finding[]): number;
+export declare function summarize(findings: Finding[]): {
+    errors: number;
+    warnings: number;
+    info: number;
+    score: number;
+};

package/dist/engine.js

@@ -0,0 +1,39 @@
+import { rules } from './rules/index.js';
+export function normalizeInput(input) {
+    const isObject = (v) => !!v && typeof v === 'object' && !Array.isArray(v);
+    if (Array.isArray(input)) {
+        if (!input.every(isObject))
+            throw new Error('expected option objects');
+        return { charts: input.map((option) => ({ option })) };
+    }
+    if (!isObject(input))
+        throw new Error('expected an option object, option array, or charts envelope');
+    if ('charts' in input) {
+        if (!Array.isArray(input.charts) ||
+            !input.charts.every((c) => isObject(c) && isObject(c.option)))
+            throw new Error('charts must contain option objects');
+        return input;
+    }
+    return { charts: [{ option: input }] };
+}
+export function check(input, options = {}) {
+    const facts = normalizeInput(input);
+    const settings = { ...options, pack: options.pack ?? 'global', mode: options.mode ?? 'light' };
+    return rules
+        .filter((r) => r.packs.includes(settings.pack) &&
+        !options.disable?.includes(r.id) &&
+        (!options.only || options.only.includes(r.id)))
+        .flatMap((r) => r.check(facts, settings));
+}
+/** Score = 100 - 10 * errors - 3 * warnings - info, floored at zero. */
+export function score(findings) {
+    return Math.max(0, 100 - findings.reduce((sum, f) => sum + { error: 10, warn: 3, info: 1 }[f.severity], 0));
+}
+export function summarize(findings) {
+    return {
+        errors: findings.filter((f) => f.severity === 'error').length,
+        warnings: findings.filter((f) => f.severity === 'warn').length,
+        info: findings.filter((f) => f.severity === 'info').length,
+        score: score(findings),
+    };
+}

package/dist/extract-in-page.d.ts

@@ -0,0 +1,3 @@
+import type { PageFacts } from './types.js';
+/** Runs in the page without closures over the host process. */
+export declare function extractInPage(): PageFacts;

package/dist/extract-in-page.js

@@ -0,0 +1,149 @@
+/** Runs in the page without closures over the host process. */
+export function extractInPage() {
+    const facts = {
+        charts: [],
+        texts: [],
+        gradients: [],
+        shadows: [],
+        kpis: [],
+        deltas: [],
+        emojis: [],
+    };
+    const selector = (el) => {
+        if (el.id)
+            return `#${CSS.escape(el.id)}`;
+        const parts = [];
+        let node = el;
+        while (node && node !== document.documentElement) {
+            const parent = node.parentElement;
+            parts.unshift(`${node.tagName.toLowerCase()}:nth-child(${parent ? [...parent.children].indexOf(node) + 1 : 1})`);
+            node = parent;
+        }
+        return parts.join(' > ');
+    };
+    // Composite transparent ancestor backgrounds over the browser canvas.
+    const compositeBackground = (el) => {
+        const layers = [];
+        let node = el;
+        while (node) {
+            const c = getComputedStyle(node)
+                .backgroundColor.match(/[\d.]+/g)
+                ?.map(Number);
+            if (c) {
+                layers.push([c[0], c[1], c[2], c[3] ?? 1]);
+                if ((c[3] ?? 1) >= 1)
+                    break;
+            }
+            node = node.parentElement;
+        }
+        let out = [255, 255, 255];
+        for (const l of layers.reverse())
+            out = out.map((v, i) => l[i] * l[3] + v * (1 - l[3]));
+        return `rgb(${out.map(Math.round).join(', ')})`;
+    };
+    const ownText = (el) => [...el.childNodes]
+        .filter((n) => n.nodeType === Node.TEXT_NODE)
+        .map((n) => n.textContent ?? '')
+        .join(' ')
+        .trim();
+    for (const el of document.querySelectorAll('*')) {
+        const style = getComputedStyle(el);
+        if (['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEMPLATE'].includes(el.tagName) ||
+            style.display === 'none' ||
+            style.visibility === 'hidden' ||
+            Number(style.opacity) === 0 ||
+            !el.getClientRects().length)
+            continue;
+        const path = selector(el), text = ownText(el), fontSize = parseFloat(style.fontSize);
+        // Text facts carry computed foreground, composited background, and size.
+        if (text)
+            facts.texts.push({
+                selector: path,
+                text,
+                color: style.color,
+                background: compositeBackground(el),
+                fontSize,
+                fontWeight: style.fontWeight === 'bold' ? 700 : parseInt(style.fontWeight) || 400,
+                fontVariantNumeric: style.fontVariantNumeric,
+                fontFeatureSettings: style.fontFeatureSettings,
+            });
+        // Decoration facts include CSS gradients and shadows.
+        if (/gradient\(/.test(style.backgroundImage))
+            facts.gradients.push({ selector: path, background: style.backgroundImage });
+        if (style.boxShadow !== 'none' || style.textShadow !== 'none')
+            facts.shadows.push({
+                selector: path,
+                boxShadow: style.boxShadow,
+                textShadow: style.textShadow,
+            });
+        // KPI and delta facts support explicit data attributes and visible-value heuristics.
+        if (el.hasAttribute('data-kpi') ||
+            (fontSize >= 22 &&
+                !el.closest('[data-ranking]') &&
+                /^[\s+−\-\d,.%KMB万亿¥$€]+$/.test(text) &&
+                /\d/.test(text)))
+            facts.kpis.push({
+                selector: path,
+                text: text || el.textContent?.trim() || '',
+                color: style.color,
+                background: compositeBackground(el),
+                fontSize,
+                fontVariantNumeric: style.fontVariantNumeric,
+                fontFeatureSettings: style.fontFeatureSettings,
+            });
+        if (el.hasAttribute('data-delta') || /[▲▼↑↓]|[+\-]\s*\d+(?:\.\d+)?%/.test(text)) {
+            const direction = el.getAttribute('data-direction');
+            const polarity = el.closest('[data-polarity]')?.getAttribute('data-polarity');
+            facts.deltas.push({
+                selector: path,
+                text: text || el.textContent?.trim() || '',
+                color: style.color,
+                ...(polarity === 'higher-is-better' || polarity === 'lower-is-better' ? { polarity } : {}),
+                ...(['up', 'down', 'flat'].includes(direction ?? '')
+                    ? { direction: direction }
+                    : {}),
+            });
+        }
+        // Emoji facts are limited to headings, labels, KPIs, and rankings.
+        if (/\p{Extended_Pictographic}/u.test(text) &&
+            el.closest('h1,h2,h3,h4,h5,h6,label,[data-kpi-label],[data-ranking],[data-kpi]'))
+            facts.emojis.push({ selector: path, text });
+    }
+    // Chart facts preserve the live ECharts option for each mounted chart.
+    const echarts = window.echarts;
+    if (echarts)
+        for (const el of document.querySelectorAll('[_echarts_instance_]')) {
+            const instance = echarts.getInstanceByDom(el);
+            if (instance) {
+                // Browser transports discard functions. Preserve formatter presence without executing
+                // user callbacks or sending executable code across the extraction boundary.
+                const option = JSON.parse(JSON.stringify(instance.getOption(), (_key, value) => typeof value === 'function' ? '[function]' : value));
+                for (const type of ['xAxis', 'yAxis']) {
+                    const axes = option[type];
+                    if (Array.isArray(axes))
+                        axes.forEach((axis, index) => {
+                            axis.renderedTickLabels =
+                                instance
+                                    .getModel?.()
+                                    .getComponent(type, index)
+                                    ?.axis?.getViewLabels()
+                                    .map((label) => label.formattedLabel) ?? [];
+                        });
+                }
+                // ECharts 6 returns singleton components as arrays, including tooltip.
+                if (Array.isArray(option.tooltip))
+                    option.tooltip = option.tooltip[0];
+                facts.charts.push({ id: el.id || selector(el), option });
+            }
+        }
+    // Page facts provide the background and optional delta convention.
+    facts.page = {
+        background: compositeBackground(document.body),
+        ...(document.documentElement.dataset.deltaColors === 'red-up' ||
+            document.documentElement.dataset.deltaColors === 'green-up' ||
+            document.documentElement.dataset.deltaColors === 'by-polarity'
+            ? { deltaColors: document.documentElement.dataset.deltaColors }
+            : {}),
+    };
+    return facts;
+}

package/dist/extract.d.ts

@@ -0,0 +1,3 @@
+import type { PageFacts } from './types.js';
+export { extractInPage } from './extract-in-page.js';
+export declare function extractPage(input: string): Promise<PageFacts>;

package/dist/extract.js

@@ -0,0 +1,39 @@
+import { existsSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { extractInPage } from './extract-in-page.js';
+export { extractInPage } from './extract-in-page.js';
+export async function extractPage(input) {
+    let chromium;
+    try {
+        ({ chromium } = await import('playwright-core'));
+    }
+    catch {
+        throw new Error('HTML mode requires playwright-core and a browser; set CHROME_PATH to Chromium');
+    }
+    const executablePath = process.env.CHROME_PATH ||
+        (existsSync('/usr/bin/google-chrome') ? '/usr/bin/google-chrome' : undefined);
+    let browser;
+    try {
+        browser = await chromium.launch({
+            headless: true,
+            executablePath,
+            args: /^https?:\/\//i.test(input) ? [] : ['--allow-file-access-from-files'],
+        });
+    }
+    catch {
+        throw new Error('browser unavailable; set CHROME_PATH to a Chromium executable');
+    }
+    try {
+        const page = await browser.newPage();
+        await page.goto(/^https?:\/\//i.test(input) ? input : pathToFileURL(resolve(input)).href, {
+            waitUntil: 'networkidle',
+            timeout: 30000,
+        });
+        await page.waitForTimeout(500);
+        return await page.evaluate(extractInPage);
+    }
+    finally {
+        await browser.close();
+    }
+}

package/dist/format.d.ts

@@ -0,0 +1,18 @@
+import { type Polarity, type PackName, type DeltaColors, type Mode } from './packs/index.js';
+export declare function formatCompact(value: number, pack: PackName, options?: {
+    minimumFractionDigits?: number;
+    compactFrom?: number;
+}): string;
+export declare function formatPercent(value: number, digits?: number): string;
+export declare function formatDelta(current: number, previous: number, pack: PackName, options?: {
+    label?: string;
+    polarity?: Polarity;
+    deltaColors?: DeltaColors;
+    mode?: Mode;
+}): {
+    readonly text: string;
+    readonly direction: "flat" | "up" | "down" | "invalid";
+    readonly color: string;
+};
+/** Uses local calendar fields; no locale-dependent date ordering. */
+export declare function formatDate(value: Date | string | number, pack?: PackName): string;