@scalewing/react 1.40.0 → 1.42.0

package/dist/components/markdown/markdown-text.js

@@ -0,0 +1,86 @@
+import { maxExcerpt } from './markdown-limits.js';
+/** Left-out text as an omission quotes it: trimmed, at most `maxExcerpt`. */
+export function excerpt(text) {
+    const trimmed = text.trim();
+    return trimmed.length > maxExcerpt
+        ? `${trimmed.slice(0, maxExcerpt - 1)}…`
+        : trimmed;
+}
+/** A run's words without its marks. */
+export function plainText(inlines) {
+    return inlines
+        .map((inline) => {
+        if (inline.kind === 'text')
+            return inline.value;
+        if (inline.kind === 'break')
+            return ' ';
+        return plainText(inline.children);
+    })
+        .join('');
+}
+/**
+ * The words of `tokens` (block tokens, or one block's inline children),
+ * in order, at any depth: a flat walk, so no nesting overflows the stack.
+ * Raw HTML, tables and images are never words: each is noted as left out.
+ */
+export function tokenText(context, tokens) {
+    const words = [];
+    let table = null;
+    for (const token of tokens) {
+        if (table !== null) {
+            if (token.type === 'table_close' && token.level === table.level)
+                table = null;
+            continue;
+        }
+        switch (token.type) {
+            case 'table_open':
+                context.omitBlock('table', token);
+                table = token;
+                break;
+            case 'html_block':
+            case 'html_inline':
+                context.omit('html', token.content);
+                break;
+            case 'image':
+                context.omit('image', `![${token.content}](${token.attrGet('src') ?? ''})`);
+                break;
+            case 'inline':
+                words.push(tokenText(context, token.children ?? []));
+                break;
+            case 'text':
+            case 'code_inline':
+            case 'code_block':
+            case 'fence':
+                words.push(token.content);
+                break;
+            case 'softbreak':
+            case 'hardbreak':
+                words.push(' ');
+                break;
+            default:
+                break;
+        }
+    }
+    return words.join(' ').replace(/\s+/g, ' ').trim();
+}
+/** Code shown as plain lines, a break between each. */
+export function lines(value) {
+    return value
+        .replace(/\n$/, '')
+        .split('\n')
+        .flatMap((line, index) => {
+        const text = { kind: 'text', value: line };
+        return index === 0 ? [text] : [{ kind: 'break' }, text];
+    });
+}
+/** Drops the spaces an image left at a paragraph part's edges. */
+export function trimEdges(inlines) {
+    const result = [...inlines];
+    const first = result[0];
+    if (first?.kind === 'text')
+        result[0] = { kind: 'text', value: first.value.trimStart() };
+    const last = result[result.length - 1];
+    if (last?.kind === 'text')
+        result[result.length - 1] = { kind: 'text', value: last.value.trimEnd() };
+    return result;
+}

package/dist/components/markdown/parse-markdown.d.ts

@@ -0,0 +1,4 @@
+import { type Token } from 'markdown-it';
+export type { Token };
+/** The block tokens of `source`; inline tokens are each block's `children`. */
+export declare function parseMarkdown(source: string): Token[];

package/dist/components/markdown/parse-markdown.js

@@ -0,0 +1,21 @@
+import MarkdownIt from 'markdown-it';
+import { maxParseNesting } from './markdown-limits.js';
+/*
+ * CommonMark with GFM tables (recognised only so they are left out whole)
+ * and raw HTML read as HTML tokens (so they are left out, never shown as
+ * text), as a token stream. Its renderer is never called: nothing here
+ * makes HTML. Every link is read as a link (the view decides on its
+ * address); links are never found in bare text.
+ */
+// `maxNesting` is read by markdown-it's parsers; its types leave it out.
+const options = {
+    html: true,
+    linkify: false,
+    maxNesting: maxParseNesting,
+};
+const parser = new MarkdownIt('commonmark', options).enable('table');
+parser.validateLink = () => true;
+/** The block tokens of `source`; inline tokens are each block's `children`. */
+export function parseMarkdown(source) {
+    return parser.parse(source, {});
+}

package/dist/components/markdown/read-blocks.d.ts

@@ -0,0 +1,8 @@
+import { type MarkdownBlock } from './markdown-model.js';
+import { type Token } from './parse-markdown.js';
+import { type ReadingContext } from './reading-context.js';
+/**
+ * Block tokens as the view draws them; `depth` counts the quotes and
+ * lists around. Past `maxNesting`, a quote or list is its words.
+ */
+export declare function readBlocks(context: ReadingContext, tokens: readonly Token[], depth?: number): MarkdownBlock[];

package/dist/components/markdown/read-blocks.js

@@ -0,0 +1,168 @@
+import { maxNesting } from './markdown-limits.js';
+import { isSafeImageSrc, photoId } from './markdown-rules.js';
+import { lines, plainText, tokenText, trimEdges } from './markdown-text.js';
+import { attr, readInlines } from './read-inlines.js';
+/** The index of the token that closes the one at `index` (or `index`). */
+function closeOf(tokens, index) {
+    const open = tokens[index];
+    if (open.nesting !== 1)
+        return index;
+    for (let at = index + 1; at < tokens.length; at += 1) {
+        const token = tokens[at];
+        if (token.nesting === -1 && token.level === open.level)
+            return at;
+    }
+    return tokens.length - 1;
+}
+/** Each part of `tokens` opened by a token of `type`, without its own open and close. */
+function partsOf(tokens, type) {
+    const parts = [];
+    for (let at = 0; at < tokens.length; at += 1) {
+        if (tokens[at].type !== type)
+            continue;
+        const end = closeOf(tokens, at);
+        parts.push(tokens.slice(at + 1, end));
+        at = end;
+    }
+    return parts;
+}
+/**
+ * Block tokens as the view draws them; `depth` counts the quotes and
+ * lists around. Past `maxNesting`, a quote or list is its words.
+ */
+export function readBlocks(context, tokens, depth = 0) {
+    const blocks = [];
+    for (let at = 0; at < tokens.length; at += 1) {
+        const token = tokens[at];
+        const end = closeOf(tokens, at);
+        const inner = tokens.slice(at + 1, end);
+        at = end;
+        switch (token.type) {
+            case 'paragraph_open':
+                blocks.push(...readParagraph(context, inner[0]?.children ?? []));
+                break;
+            case 'heading_open': {
+                const children = readInlines(context, inner[0]?.children ?? []);
+                const text = plainText(children).trim();
+                const level = Math.min(Number(token.tag.slice(1)), 3);
+                const id = context.ids.take(text);
+                context.headings.push({ id, level, text });
+                blocks.push({ kind: 'heading', level, id, children });
+                break;
+            }
+            case 'bullet_list_open':
+            case 'ordered_list_open':
+            case 'blockquote_open': {
+                if (depth >= maxNesting) {
+                    context.omitBlock('limit', token);
+                    const text = tokenText(context, inner);
+                    if (text)
+                        blocks.push({
+                            kind: 'paragraph',
+                            children: [{ kind: 'text', value: text }],
+                        });
+                    break;
+                }
+                if (token.type === 'blockquote_open') {
+                    blocks.push({
+                        kind: 'quote',
+                        children: readBlocks(context, inner, depth + 1),
+                    });
+                    break;
+                }
+                const ordered = token.type === 'ordered_list_open';
+                blocks.push({
+                    kind: 'list',
+                    ordered,
+                    start: ordered ? Number(attr(token, 'start') ?? 1) : null,
+                    // A tight list's paragraphs are hidden: only their words show.
+                    tight: inner.every((child) => child.type !== 'paragraph_open' ||
+                        child.level !== token.level + 2 ||
+                        child.hidden),
+                    items: partsOf(inner, 'list_item_open').map((item) => readBlocks(context, item, depth + 1)),
+                });
+                break;
+            }
+            case 'code_block':
+            case 'fence':
+                context.omitBlock('code', token);
+                // An empty block draws nothing.
+                if (token.content.trim() !== '')
+                    blocks.push({ kind: 'paragraph', children: lines(token.content) });
+                break;
+            case 'hr':
+                blocks.push({ kind: 'rule' });
+                break;
+            case 'html_block':
+                context.omit('html', token.content);
+                break;
+            case 'table_open':
+                context.omitBlock('table', token);
+                break;
+            default:
+                // Nothing else is parsed at this level.
+                break;
+        }
+    }
+    return blocks;
+}
+/**
+ * A `photo:` the consumer resolves to a safe address, with words for it
+ * (its `alt`, or the caption): anything else is left out.
+ */
+function readFigure(context, image) {
+    const src = attr(image, 'src') ?? '';
+    const caption = plainText(readInlines(context, image.children ?? [])).trim();
+    const id = photoId(src);
+    const photo = id === null ? null : (context.options.resolveImage?.(id) ?? null);
+    // The caption names a photo without its own words, so it is never
+    // announced as decorative (screen readers then also read the caption).
+    const alt = (typeof photo?.alt === 'string' ? photo.alt.trim() : '') || caption;
+    if (!photo || !isSafeImageSrc(photo.src) || alt === '') {
+        context.omit('image', `![${image.content}](${src})`);
+        return null;
+    }
+    return { kind: 'figure', src: photo.src, alt, caption };
+}
+/**
+ * A paragraph, split around the photos in it (outside links and marks),
+ * which are figures of their own; an image left out leaves the paragraph
+ * whole, one space where it was.
+ */
+function readParagraph(context, children) {
+    const blocks = [];
+    let run = [];
+    let level = 0;
+    let dropped = false;
+    const flush = () => {
+        const inlines = readInlines(context, run);
+        if (plainText(inlines).trim() !== '')
+            blocks.push({ kind: 'paragraph', children: trimEdges(inlines) });
+        run = [];
+    };
+    for (const child of children) {
+        if (child.type === 'image' && level === 0) {
+            const figure = readFigure(context, child);
+            if (figure) {
+                flush();
+                blocks.push(figure);
+                dropped = false;
+            }
+            else
+                dropped = true;
+            continue;
+        }
+        level += child.nesting;
+        const before = run[run.length - 1];
+        if (dropped &&
+            child.type === 'text' &&
+            before?.type === 'text' &&
+            /\s$/.test(before.content))
+            run.push({ ...child, content: child.content.trimStart() });
+        else
+            run.push(child);
+        dropped = false;
+    }
+    flush();
+    return blocks;
+}

package/dist/components/markdown/read-inlines.d.ts

@@ -0,0 +1,12 @@
+import { type MarkdownInline } from './markdown-model.js';
+import { type Token } from './parse-markdown.js';
+import { type ReadingContext } from './reading-context.js';
+/** A token's attribute, read without its methods (tokens may be copies). */
+export declare function attr(token: Token, name: string): string | null;
+/**
+ * One block's inline tokens as the view's inlines: text, breaks, bold,
+ * italic and links. A link's address must pass `safeLinkHref`, or its
+ * words stay as text; raw HTML and images here are left out; code is its
+ * words; marks nested past `maxNesting` are their words.
+ */
+export declare function readInlines(context: ReadingContext, tokens: readonly Token[]): MarkdownInline[];

package/dist/components/markdown/read-inlines.js

@@ -0,0 +1,126 @@
+import { maxExcerpt, maxNesting } from './markdown-limits.js';
+import { safeLinkHref } from './markdown-rules.js';
+import { plainText } from './markdown-text.js';
+/** A token's attribute, read without its methods (tokens may be copies). */
+export function attr(token, name) {
+    return token.attrs?.find(([key]) => key === name)?.[1] ?? null;
+}
+function close(context, frame, parent) {
+    if (frame.kind === 'root')
+        return;
+    if (frame.kind !== 'link') {
+        parent.children.push({ kind: frame.kind, children: frame.children });
+        return;
+    }
+    const href = safeLinkHref(frame.href ?? '');
+    if (href !== null) {
+        parent.children.push({ kind: 'link', href, children: frame.children });
+        return;
+    }
+    context.omit('link', `[${plainText(frame.children)}](${frame.href ?? ''})`);
+    // Links never hold links, so each word moves up once.
+    for (const child of frame.children)
+        parent.children.push(child);
+}
+/**
+ * One block's inline tokens as the view's inlines: text, breaks, bold,
+ * italic and links. A link's address must pass `safeLinkHref`, or its
+ * words stay as text; raw HTML and images here are left out; code is its
+ * words; marks nested past `maxNesting` are their words.
+ */
+export function readInlines(context, tokens) {
+    const root = { kind: 'root', href: null, children: [] };
+    const stack = [root];
+    // Marks past `maxNesting` open no frame: their words go straight into
+    // the deepest drawn one, so each word is placed once at any depth.
+    let flat = 0;
+    let flatWords = '';
+    // Links never hold links: the open one's address, quoted when it shuts.
+    const flatLinks = [];
+    const quote = (text) => {
+        if (flatWords.length < maxExcerpt)
+            flatWords += text;
+    };
+    const open = (kind, href) => {
+        if (flat > 0 || stack.length > maxNesting) {
+            flat += 1;
+            // A link this deep is drawn as its words; the run's one omission
+            // quotes it as `[words](address)`.
+            flatLinks.push(kind === 'link' ? (href ?? '') : null);
+            if (kind === 'link')
+                quote('[');
+            return;
+        }
+        stack.push({ kind, href, children: [] });
+    };
+    const shut = () => {
+        if (flat > 0) {
+            flat -= 1;
+            const link = flatLinks.pop();
+            if (link !== null && link !== undefined)
+                quote(`](${link})`);
+            if (flat === 0) {
+                context.omit('limit', flatWords);
+                flatWords = '';
+            }
+            return;
+        }
+        if (stack.length > 1)
+            close(context, stack.pop(), stack[stack.length - 1]);
+    };
+    const words = (value) => {
+        stack[stack.length - 1].children.push({ kind: 'text', value });
+        if (flat > 0)
+            quote(value);
+    };
+    for (const token of tokens) {
+        const top = stack[stack.length - 1];
+        switch (token.type) {
+            case 'text':
+            case 'text_special':
+                words(token.content);
+                break;
+            case 'softbreak':
+                words('\n');
+                break;
+            case 'hardbreak':
+                top.children.push({ kind: 'break' });
+                break;
+            case 'code_inline':
+                context.omit('code', `\`${token.content}\``);
+                words(token.content);
+                break;
+            case 'html_inline':
+                context.omit('html', token.content);
+                break;
+            case 'image':
+                // An image in a link, a mark or a heading: never drawn there.
+                context.omit('image', `![${token.content}](${attr(token, 'src') ?? ''})`);
+                break;
+            case 'strong_open':
+                open('strong', null);
+                break;
+            case 'em_open':
+                open('emphasis', null);
+                break;
+            case 'link_open':
+                open('link', attr(token, 'href'));
+                break;
+            case 'strong_close':
+            case 'em_close':
+            case 'link_close':
+                shut();
+                break;
+            default:
+                // Nothing else is parsed (no strikethrough, no footnotes); any
+                // other token's words, if it has them, stay as text.
+                if (token.content)
+                    words(token.content);
+        }
+    }
+    while (flat > 0)
+        shut();
+    while (stack.length > 1)
+        close(context, stack.pop(), stack[stack.length - 1]);
+    return root.children;
+}

package/dist/components/markdown/read-markdown.d.ts

@@ -0,0 +1,9 @@
+import { type MarkdownReading } from './markdown-model.js';
+import { type MarkdownOptions } from './markdown-options.js';
+/**
+ * Reads Markdown into what `MarkdownView` draws: its blocks, its headings
+ * (with the ids the view gives them) and what it leaves out. Pure: the
+ * same source and options always give the same reading. Refuses a source
+ * that is not text and options the view refuses.
+ */
+export declare function readMarkdown(source: string, options?: MarkdownOptions, owner?: string): MarkdownReading;

package/dist/components/markdown/read-markdown.js

@@ -0,0 +1,27 @@
+import { maxParseNesting } from './markdown-limits.js';
+import { assertMarkdownInput, } from './markdown-options.js';
+import { parseMarkdown } from './parse-markdown.js';
+import { readBlocks } from './read-blocks.js';
+import { ReadingContext } from './reading-context.js';
+/**
+ * Reads Markdown into what `MarkdownView` draws: its blocks, its headings
+ * (with the ids the view gives them) and what it leaves out. Pure: the
+ * same source and options always give the same reading. Refuses a source
+ * that is not text and options the view refuses.
+ */
+export function readMarkdown(source, options = {}, owner = 'readMarkdown') {
+    assertMarkdownInput(owner, source, options);
+    const tokens = parseMarkdown(source);
+    const context = new ReadingContext(source, options);
+    // The parser stops reading a block nested deeper than it reads.
+    const cut = tokens.find((token) => token.level >= maxParseNesting - 1);
+    if (cut)
+        context.omitBlock('limit', cut);
+    const blocks = readBlocks(context, tokens);
+    return {
+        blocks,
+        headings: context.headings,
+        omissions: context.omissions,
+        omissionCounts: context.omissionCounts,
+    };
+}

package/dist/components/markdown/reading-context.d.ts

@@ -0,0 +1,18 @@
+import { type MarkdownHeading, type MarkdownOmission, type MarkdownOmissionCounts, type MarkdownOmissionKind } from './markdown-model.js';
+import { type MarkdownOptions } from './markdown-options.js';
+import { HeadingIds } from './markdown-rules.js';
+import { type Token } from './parse-markdown.js';
+/** One document's reading so far: its headings and what it left out. */
+export declare class ReadingContext {
+    readonly options: MarkdownOptions;
+    readonly headings: MarkdownHeading[];
+    readonly omissions: MarkdownOmission[];
+    readonly omissionCounts: MarkdownOmissionCounts;
+    readonly ids: HeadingIds;
+    private readonly lines;
+    constructor(source: string, options: MarkdownOptions);
+    /** Notes something left out, by its words. */
+    omit(kind: MarkdownOmissionKind, text: string): void;
+    /** Notes a block left out, by the source lines it came from. */
+    omitBlock(kind: MarkdownOmissionKind, token: Token): void;
+}

package/dist/components/markdown/reading-context.js

@@ -0,0 +1,35 @@
+import { maxOmissionsListed } from './markdown-limits.js';
+import { HeadingIds } from './markdown-rules.js';
+import { excerpt } from './markdown-text.js';
+/** One document's reading so far: its headings and what it left out. */
+export class ReadingContext {
+    options;
+    headings = [];
+    omissions = [];
+    omissionCounts = {
+        html: 0,
+        table: 0,
+        image: 0,
+        link: 0,
+        code: 0,
+        limit: 0,
+    };
+    ids;
+    lines;
+    constructor(source, options) {
+        this.options = options;
+        this.ids = new HeadingIds(options.idPrefix ?? '');
+        this.lines = source.split(/\r\n?|\n/);
+    }
+    /** Notes something left out, by its words. */
+    omit(kind, text) {
+        this.omissionCounts[kind] += 1;
+        if (this.omissions.length < maxOmissionsListed)
+            this.omissions.push({ kind, source: excerpt(text) });
+    }
+    /** Notes a block left out, by the source lines it came from. */
+    omitBlock(kind, token) {
+        const [start, end] = token.map ?? [0, 0];
+        this.omit(kind, this.lines.slice(start, end).join('\n'));
+    }
+}

package/dist/components/markdown/render-markdown.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react';
+import { type MarkdownBlock, type MarkdownInline } from './markdown-model.js';
+/** What every drawn link carries besides its own words. */
+export type LinkOptions = {
+    newTabLabel: string;
+};
+/** Draws a run of text as React elements: never HTML from a string. */
+export declare function renderInlines(inlines: readonly MarkdownInline[], links: LinkOptions): ReactNode[];
+/** Draws blocks in order. */
+export declare function renderBlocks(blocks: readonly MarkdownBlock[], links: LinkOptions): ReactNode[];

package/dist/components/markdown/render-markdown.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Separator } from '../Separator.js';
+const headingElements = { 1: 'h2', 2: 'h3', 3: 'h4' };
+/** Draws a run of text as React elements: never HTML from a string. */
+export function renderInlines(inlines, links) {
+    return inlines.map((inline, index) => {
+        switch (inline.kind) {
+            case 'text':
+                return inline.value;
+            case 'break':
+                return _jsx("br", {}, index);
+            case 'strong':
+                return (_jsx("strong", { children: renderInlines(inline.children, links) }, index));
+            case 'emphasis':
+                return _jsx("em", { children: renderInlines(inline.children, links) }, index);
+            case 'link':
+                return (_jsxs("a", { className: "sw-markdown-link", href: inline.href, rel: "noopener noreferrer", 
+                    // Safari leaves a link out of the Tab order without one.
+                    tabIndex: 0, target: "_blank", children: [renderInlines(inline.children, links), _jsxs("span", { className: "sw-sr-only", children: [" ", links.newTabLabel] })] }, index));
+        }
+    });
+}
+/** Draws a list item: a tight list's paragraphs are its words alone. */
+function renderItem(blocks, tight, links) {
+    if (!tight)
+        return renderBlocks(blocks, links);
+    return blocks.map((block, index) => block.kind === 'paragraph' ? (_jsx("span", { className: "sw-markdown-item-text", children: renderInlines(block.children, links) }, index)) : (renderBlock(block, index, links)));
+}
+function renderBlock(block, key, links) {
+    switch (block.kind) {
+        case 'paragraph':
+            return (_jsx("p", { className: "sw-markdown-paragraph", children: renderInlines(block.children, links) }, key));
+        case 'heading': {
+            const Heading = headingElements[block.level];
+            return (_jsx(Heading, { className: `sw-markdown-heading sw-markdown-heading-${block.level}`, id: block.id, children: renderInlines(block.children, links) }, key));
+        }
+        case 'list': {
+            const items = block.items.map((item, index) => (_jsx("li", { children: renderItem(item, block.tight, links) }, index)));
+            return block.ordered ? (_jsx("ol", { className: "sw-markdown-list", start: block.start === null || block.start === 1 ? undefined : block.start, children: items }, key)) : (_jsx("ul", { className: "sw-markdown-list", children: items }, key));
+        }
+        case 'quote':
+            return (_jsx("blockquote", { className: "sw-markdown-quote", children: renderBlocks(block.children, links) }, key));
+        case 'figure':
+            return (_jsxs("figure", { className: "sw-markdown-figure", children: [_jsx("img", { alt: block.alt, className: "sw-markdown-image", src: block.src }), block.caption ? (_jsx("figcaption", { className: "sw-markdown-caption", children: block.caption })) : null] }, key));
+        case 'rule':
+            return _jsx(Separator, {}, key);
+    }
+}
+/** Draws blocks in order. */
+export function renderBlocks(blocks, links) {
+    return blocks.map((block, index) => renderBlock(block, index, links));
+}

package/dist/components/use-element-width.d.ts

@@ -0,0 +1,11 @@
+import { type RefObject } from 'react';
+/**
+ * Follows the width an element is given, in whole CSS pixels: on mount,
+ * before the first paint, and whenever its box changes size. Before that,
+ * and on the server, it reports `fallback`; a browser with no
+ * ResizeObserver measures on window resizes instead. `content` measures
+ * the content box (inside the padding) rather than the border box.
+ */
+export declare function useElementWidth(ref: RefObject<HTMLElement | null>, fallback: number, { content }?: {
+    content?: boolean;
+}): number;

package/dist/components/use-element-width.js

@@ -0,0 +1,38 @@
+'use client';
+import { useLayoutEffect, useState } from 'react';
+/**
+ * Follows the width an element is given, in whole CSS pixels: on mount,
+ * before the first paint, and whenever its box changes size. Before that,
+ * and on the server, it reports `fallback`; a browser with no
+ * ResizeObserver measures on window resizes instead. `content` measures
+ * the content box (inside the padding) rather than the border box.
+ */
+export function useElementWidth(ref, fallback, { content = false } = {}) {
+    const [width, setWidth] = useState(fallback);
+    useLayoutEffect(() => {
+        const box = ref.current;
+        if (!box)
+            return;
+        function measure() {
+            if (!box)
+                return;
+            const style = getComputedStyle(box);
+            const padding = content
+                ? (parseFloat(style.paddingLeft) || 0) +
+                    (parseFloat(style.paddingRight) || 0)
+                : 0;
+            const next = Math.round(box.getBoundingClientRect().width - padding);
+            if (next > 0)
+                setWidth(next);
+        }
+        measure();
+        if (typeof ResizeObserver === 'undefined') {
+            window.addEventListener('resize', measure);
+            return () => window.removeEventListener('resize', measure);
+        }
+        const observer = new ResizeObserver(measure);
+        observer.observe(box);
+        return () => observer.disconnect();
+    }, [ref, content]);
+    return width;
+}

package/dist/css/chart-tones.d.ts

@@ -46,6 +46,8 @@ export declare const dangerFillShare = 0.4;
 export declare const chartFillMixes: Record<ChartFillTone, ChartColorMix>;
 /** Each stroke tone's colour: a semantic colour, or muted for neutral. */
 export declare const chartStrokeColors: Record<ChartStrokeTone, ChartColorSource>;
+/** A stroke tone's colour as CSS, such as a line's or a bar's. */
+export declare function chartStroke(tone: ChartStrokeTone): string;
 /**
  * How much of a line's stroke the area under it takes, over transparency:
  * a quiet tint behind the line, decorative (the line carries the values).