@scalewing/react 1.41.0 → 1.44.0

package/dist/components/DocumentViewer.js

@@ -0,0 +1,72 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState, } from 'react';
+import { Button } from './Button.js';
+import { Spinner } from './Spinner.js';
+import { Text } from './Text.js';
+import { assertDocumentViewer, shownPage, } from './document-viewer/document-viewer-labels.js';
+import { pageBoxStyle } from './document-viewer/page-box.js';
+import { useErrorReport } from './document-viewer/use-error-report.js';
+import { usePageRender } from './document-viewer/use-page-render.js';
+import { usePdfDocument } from './document-viewer/use-pdf-document.js';
+import { usePinchZoom } from './document-viewer/use-pinch-zoom.js';
+import { useZoom } from './document-viewer/use-zoom.js';
+import { zoomForKey } from './document-viewer/zoom.js';
+import { useElementWidth } from './use-element-width.js';
+/**
+ * A PDF drawn one page at a time from its bytes with PDF.js, fitted to the
+ * width it is given, with previous and next steps and "Page n of m" in a
+ * polite live region. Two fingers, or `+`, `-` and `0` on the focused
+ * page, zoom it. The page's text sits over the drawing, transparent, so it
+ * can be read by assistive technology and selected. It opens nothing from
+ * the network beyond the worker, and has no download or print of its own.
+ */
+export function DocumentViewer({ data, workerSrc, label, labels, page: pageProp, onPageChange, failedAction, onLoad, onError, }) {
+    assertDocumentViewer({ label, labels, workerSrc });
+    const statusId = useId();
+    // The viewer's own page belongs to its bytes: new bytes start at page 1.
+    const [own, setOwn] = useState({ data, page: 1 });
+    const ownPage = own.data === data ? own.page : 1;
+    const canvas = useRef(null);
+    const text = useRef(null);
+    const opened = usePdfDocument(data, workerSrc, { onLoad, onError });
+    const reportError = useErrorReport(onError);
+    const document = opened.status === 'ready' ? opened.document : null;
+    const pageCount = document?.pageCount ?? 0;
+    const page = shownPage(pageProp ?? ownPage, pageCount);
+    const { box: stage, page: sheet, zoom, drawnZoom, zoomTo, } = useZoom(`${page}`);
+    const fitWidth = useElementWidth(stage, 0, { content: true });
+    usePinchZoom(stage, zoom, zoomTo);
+    const drawn = usePageRender({
+        document,
+        page,
+        width: Math.round(fitWidth * drawnZoom),
+        canvas,
+        text,
+        onError: reportError,
+    });
+    // A page that cannot be drawn keeps the steps, so another can be read.
+    const failed = opened.status === 'failed' || drawn.state === 'failed';
+    const open = document !== null;
+    function go(target) {
+        if (target < 1 || target > pageCount || target === page)
+            return;
+        setOwn({ data, page: target });
+        onPageChange?.(target);
+    }
+    function onKeyDown(event) {
+        if (event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const next = zoomForKey(event.key, zoom);
+        if (next === null)
+            return;
+        event.preventDefault();
+        zoomTo(next);
+    }
+    const step = (direction) => {
+        const target = direction === 'previous' ? page - 1 : page + 1;
+        const off = target < 1 || target > pageCount;
+        return (_jsx(Button, { "aria-disabled": off || undefined, "aria-label": labels[direction], className: "sw-document-viewer-step", disabledAppearance: "neutral", onPress: () => go(target), variant: "neutral", children: _jsx("span", { "aria-hidden": "true", className: `sw-pagination-glyph sw-pagination-glyph-${direction}` }) }));
+    };
+    return (_jsxs("section", { "aria-label": label, className: "sw-document-viewer", children: [_jsxs("div", { "aria-labelledby": open && !failed ? statusId : undefined, className: "sw-document-viewer-stage", onKeyDown: open && !failed ? onKeyDown : undefined, ref: stage, role: open && !failed ? 'group' : undefined, tabIndex: open && !failed ? 0 : undefined, children: [failed ? (_jsxs("div", { className: "sw-document-viewer-message", role: "alert", children: [_jsx(Text, { as: "p", variant: "title", children: labels.failed }), labels.failedDetail ? (_jsx(Text, { as: "p", children: labels.failedDetail })) : null, failedAction ? (_jsx("div", { className: "sw-document-viewer-actions", children: failedAction })) : null] })) : null, opened.status === 'loading' ? (_jsxs("div", { className: "sw-document-viewer-message", children: [_jsx(Spinner, { label: labels.loading }), _jsx(Text, { "aria-hidden": true, as: "p", children: labels.loading })] })) : null, open ? (_jsxs("div", { className: "sw-document-viewer-page", "data-zoomed": zoom > 1 || undefined, hidden: failed, ref: sheet, style: pageBoxStyle(fitWidth * zoom, drawn.aspect), children: [_jsx("canvas", { "aria-hidden": "true", ref: canvas }), _jsx("div", { className: "sw-document-viewer-text", ref: text })] })) : null] }), open ? (_jsxs("div", { className: "sw-document-viewer-bar", children: [pageCount > 1 ? step('previous') : null, _jsx("span", { "aria-atomic": "true", "aria-live": "polite", className: "sw-document-viewer-status", id: statusId, children: labels.page(page, pageCount) }), pageCount > 1 ? step('next') : null] })) : null] }));
+}

package/dist/components/FileField.d.ts

@@ -0,0 +1,55 @@
+import { type ReactNode } from 'react';
+/** The chosen file as the field shows it: its name and a line about it. */
+export type FileFieldValue = {
+    name: string;
+    /** A muted line under the name, such as "4 pages · 1.6 MB". */
+    detail?: string;
+    /**
+     * The address of a small image of a chosen photo, such as an object URL
+     * the consumer made from the `File` (and revokes): drawn as a thumbnail
+     * before the name in place of `icon`, hidden from assistive technology,
+     * so the name says which file it is.
+     */
+    preview?: string;
+};
+export type FileFieldProps = {
+    /** The field's label, drawn above it as Field's, and part of its button's name. */
+    label: string;
+    labelVisuallyHidden?: boolean;
+    /** A muted hint under the field, such as "Up to 25 MB". */
+    description?: string;
+    /** Replaces the hint with an error, in a polite live region. */
+    error?: string;
+    /**
+     * The file types the picker offers, as the native `accept` attribute
+     * (".pdf,application/pdf"). A dropped file is not filtered by it: check
+     * what `onChange` receives and say why in `error`.
+     */
+    accept?: string;
+    /** The chosen file to show, or nothing chosen (`null` or left out). */
+    value?: FileFieldValue | null;
+    /** Called with the file the person chose or dropped. Nothing is uploaded. */
+    onChange: (file: File) => void;
+    /** The empty field's words, such as "Choose a PDF". */
+    chooseLabel: string;
+    /** The button beside a chosen file, such as "Choose another". */
+    changeLabel: string;
+    /** Muted words after `chooseLabel` for a fine pointer, such as "or drop it here". */
+    dropLabel?: string;
+    /**
+     * A consumer mark before the chosen file's name (Lucide), hidden from
+     * assistive technology; not drawn when `value.preview` is set.
+     */
+    icon?: ReactNode;
+    disabled?: boolean;
+    /** Prefixes the ids the field gives its parts (its button is `${id}-button`). */
+    id?: string;
+};
+/**
+ * One file chosen by a press or dropped on the field: empty, a wide zone
+ * that opens the system picker; chosen, the file's name and detail (after
+ * a thumbnail for a photo with a `preview`) with a button to choose
+ * another. It hands the `File` to the consumer and shows what the
+ * consumer passes back as `value`; it never reads or uploads it.
+ */
+export declare function FileField({ label, labelVisuallyHidden, description, error, accept, value, onChange, chooseLabel, changeLabel, dropLabel, icon, disabled, id, }: FileFieldProps): import("react").JSX.Element;

package/dist/components/FileField.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useRef } from 'react';
+import { cx } from '../class-names.js';
+import { tabStop } from '../tab-stop.js';
+import { Button } from './Button.js';
+import { FieldErrorRegion } from './FieldErrorRegion.js';
+import { FieldLabelText } from './FieldLabelText.js';
+import { assertFileField } from './file-field/file-field-checks.js';
+import { useFileDrop } from './file-field/use-file-drop.js';
+import { useSwapFocus } from './file-field/use-swap-focus.js';
+import { Stack } from './Stack.js';
+/** Whether the consumer passed a mark to draw (not empty JSX). */
+function hasMark(icon) {
+    return (icon !== undefined &&
+        icon !== null &&
+        icon !== '' &&
+        typeof icon !== 'boolean');
+}
+/** Before a chosen file's name: its photo's thumbnail, else the consumer's mark. */
+function ChosenMark({ icon, preview }) {
+    if (preview !== undefined)
+        return _jsx("img", { alt: "", className: "sw-file-field-preview", src: preview });
+    if (!hasMark(icon))
+        return null;
+    return (_jsx("span", { "aria-hidden": "true", className: "sw-file-field-icon", children: icon }));
+}
+/**
+ * One file chosen by a press or dropped on the field: empty, a wide zone
+ * that opens the system picker; chosen, the file's name and detail (after
+ * a thumbnail for a photo with a `preview`) with a button to choose
+ * another. It hands the `File` to the consumer and shows what the
+ * consumer passes back as `value`; it never reads or uploads it.
+ */
+export function FileField({ label, labelVisuallyHidden = false, description, error, accept, value = null, onChange, chooseLabel, changeLabel, dropLabel, icon, disabled = false, id, }) {
+    assertFileField({ label, chooseLabel, changeLabel, dropLabel, value });
+    const ownId = useId();
+    const baseId = id ?? ownId;
+    const inputRef = useRef(null);
+    const buttonRef = useRef(null);
+    const chosen = value !== null;
+    const drop = useFileDrop({ disabled, onFile: onChange });
+    const focusHandlers = useSwapFocus(buttonRef, chosen);
+    function onInput(event) {
+        const file = event.currentTarget.files?.[0];
+        // Cleared, so choosing the same file again is a change too.
+        event.currentTarget.value = '';
+        if (file)
+            onChange(file);
+    }
+    const ids = {
+        label: `${baseId}-label`,
+        button: `${baseId}-button`,
+        name: `${baseId}-name`,
+        detail: `${baseId}-detail`,
+        hint: `${baseId}-hint`,
+        error: `${baseId}-error`,
+    };
+    // The error is in the button's description and the polite region; the
+    // button role takes no aria-invalid.
+    const naming = {
+        'aria-labelledby': `${ids.label} ${ids.button}`,
+        'aria-describedby': [
+            chosen && ids.name,
+            chosen && value.detail && ids.detail,
+            description && !error && ids.hint,
+            error && ids.error,
+        ]
+            .filter(Boolean)
+            .join(' ') || undefined,
+        id: ids.button,
+    };
+    const open = () => inputRef.current?.click();
+    return (_jsxs(Stack, { className: cx('sw-field', 'sw-file-field', error && 'sw-field-invalid'), gap: labelVisuallyHidden ? 0 : 1, children: [_jsx("span", { id: ids.label, children: _jsx(FieldLabelText, { label: label, visuallyHidden: labelVisuallyHidden }) }), _jsxs("div", { className: cx('sw-file-field-frame', chosen ? 'sw-file-field-chosen' : 'sw-file-field-empty', drop.dragging && 'sw-file-field-dragging', disabled && 'sw-file-field-disabled'), ...drop.handlers, ...focusHandlers, children: [_jsx("input", { accept: accept, "aria-label": label, disabled: disabled, hidden: true, onChange: onInput, ref: inputRef, tabIndex: -1, type: "file" }), chosen ? (_jsxs(_Fragment, { children: [_jsx(ChosenMark, { icon: icon, preview: value.preview }), _jsxs("span", { className: "sw-file-field-file", children: [_jsx("span", { className: "sw-file-field-name", id: ids.name, children: value.name }), value.detail ? (_jsx("span", { className: "sw-file-field-detail", id: ids.detail, children: value.detail })) : null] }), _jsx(Button, { ...naming, disabled: disabled, disabledAppearance: "neutral", onPress: open, ref: buttonRef, variant: "neutral", children: changeLabel })] })) : (_jsxs("button", { ...naming, className: "sw-file-field-zone", disabled: disabled, onClick: open, ref: buttonRef, tabIndex: tabStop, type: "button", children: [_jsx("span", { className: "sw-file-field-choose", children: chooseLabel }), dropLabel ? ' ' : null, dropLabel ? (_jsx("span", { className: "sw-file-field-drop", children: dropLabel })) : null] }))] }), description && !error ? (_jsx("span", { className: "sw-field-description", id: ids.hint, children: description })) : null, _jsx(FieldErrorRegion, { className: "sw-field-error", id: ids.error, message: error })] }));
+}

package/dist/components/FilterChips.d.ts

@@ -1,5 +1,5 @@
 import { type FilterChipsProps } from './filter-chips/options.js';
-export { filterChipCountAppearances, filterChipsOverflows, type FilterChipCountAppearance, type FilterChipOption, type FilterChipsOverflow, type FilterChipsProps, } from './filter-chips/options.js';
+export { filterChipCountAppearances, filterChipsOverflows, filterChipTones, type FilterChipCountAppearance, type FilterChipOption, type FilterChipsOverflow, type FilterChipsProps, type FilterChipTone, } from './filter-chips/options.js';
 /**
  * A labelled row of chips: one choice (radios), or several at once
  * (`multiple`, checkboxes), each chip optionally counted.

package/dist/components/FilterChips.js

@@ -7,7 +7,7 @@ import { FieldErrorRegion } from './FieldErrorRegion.js';
 import { showsRequiredMark } from './FieldLabelText.js';
 import { FilterChip } from './filter-chips/FilterChip.js';
 import { assertFilterChips } from './filter-chips/validate.js';
-export { filterChipCountAppearances, filterChipsOverflows, } from './filter-chips/options.js';
+export { filterChipCountAppearances, filterChipsOverflows, filterChipTones, } from './filter-chips/options.js';
 /** The values a change leaves on, in the options' order. */
 function toggled(options, chosen, value, checked) {
     return options

package/dist/components/FilterChipsRow.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+import { type FilterChipsOverflow } from './filter-chips/options.js';
+export type FilterChipsRowProps = {
+    /** The row's chip groups, each a `FilterChips` with its own name. */
+    children: ReactNode;
+    /**
+     * A group set apart at the row's end, such as one toggle of another kind
+     * after the filters ("Missing a translation"); on its own line's end when
+     * the row wraps.
+     */
+    end?: ReactNode;
+    /**
+     * `wrap` (the default): the groups wrap onto more lines. `scroll`: every
+     * group's chips stay on one row that scrolls sideways together inside
+     * the row's own box, never the page; a group's own `overflow` gives way.
+     */
+    overflow?: FilterChipsOverflow;
+};
+/**
+ * Several chip groups on one row: the groups keep their own names and
+ * choices (a radio group and a checkbox, say), and the row lays them out
+ * together, wrapping or scrolling as one, with an optional group at its end.
+ */
+export declare function FilterChipsRow({ children, end, overflow, }: FilterChipsRowProps): import("react").JSX.Element;

package/dist/components/FilterChipsRow.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../class-names.js';
+import { hasSlot } from './slot.js';
+import { filterChipsOverflows, } from './filter-chips/options.js';
+/**
+ * Several chip groups on one row: the groups keep their own names and
+ * choices (a radio group and a checkbox, say), and the row lays them out
+ * together, wrapping or scrolling as one, with an optional group at its end.
+ */
+export function FilterChipsRow({ children, end, overflow = 'wrap', }) {
+    if (!filterChipsOverflows.includes(overflow))
+        throw new RangeError(`Unknown FilterChipsRow overflow: ${String(overflow)}`);
+    return (_jsxs("div", { className: cx('sw-filter-chips-row', overflow === 'scroll' && 'sw-filter-chips-row-scroll'), children: [children, hasSlot(end) ? (_jsx("div", { className: "sw-filter-chips-row-end", children: end })) : null] }));
+}

package/dist/components/ListRow.d.ts

@@ -44,6 +44,33 @@ export type ListRowProps = {
     tone?: ListRowTone;
     /** `plain` sets the title at the body weight, for a list of plain statements. */
     titleAppearance?: ListRowTitleAppearance;
+    /**
+     * Marks the row as new for the person, such as a document they have not
+     * opened: an accent dot after the title, read as `unreadLabel`.
+     */
+    unread?: boolean;
+    /**
+     * What the dot means in the consumer's words ("New"), read after the
+     * title (in a pressable row's name). Required while `unread`.
+     */
+    unreadLabel?: string;
+    /**
+     * A short status before the accessory, such as a `Badge` ("Only in
+     * English"); a pressable row is described by it.
+     */
+    tag?: ReactNode;
+    /**
+     * A control after the row and outside its press area, such as an
+     * `ActionMenu` of the row's own actions. It needs its own name.
+     */
+    action?: ReactNode;
+    /**
+     * Keeps the title and the detail on one line each, cut with "…" where
+     * they do not fit, for a long list read at a glance; the full words stay
+     * in the row's name and description, and in a `title` tooltip. The
+     * value, its detail and the tag keep their words whole.
+     */
+    truncate?: boolean;
     /** `none` hides the chevron of a pressable row that acts in place. */
     accessory?: 'chevron' | 'none';
     /**
@@ -55,6 +82,8 @@ export type ListRowProps = {
 /**
  * One row of a `ListGroup`: it opens something (`onPress` or `href`, with
  * a chevron, the whole row pressing), picks one option in place
- * (`selected`), or only states something (neither).
+ * (`selected`), or only states something (neither). `unread` marks it new,
+ * `tag` adds a status before its end, `action` a control beside it, and
+ * `truncate` keeps its title and detail to one line each.
  */
-export declare function ListRow({ title, detail, value, valueDetail, valueTone, valueBadge, leading, onPress, href, selected, disabled, tone, titleAppearance, accessory, 'aria-label': ariaLabel, }: ListRowProps): import("react").JSX.Element;
+export declare function ListRow({ title, detail, value, valueDetail, valueTone, valueBadge, leading, onPress, href, selected, disabled, tone, titleAppearance, accessory, unread, unreadLabel, tag, action, truncate, 'aria-label': ariaLabel, }: ListRowProps): import("react").JSX.Element;

package/dist/components/ListRow.js

@@ -1,22 +1,21 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useId } from 'react';
+import { useId } from 'react';
 import { cx } from '../class-names.js';
 import { assertListRow, listRowAccessory, } from '../list-options.js';
 import { tabStop } from '../tab-stop.js';
 import { plainPress } from './link-press.js';
 import { ListRowContent } from './list/ListRowContent.js';
-import { ListRowContainer } from './list/list-row-container.js';
-function ids(...parts) {
-    const joined = parts.filter(Boolean).join(' ');
-    return joined === '' ? undefined : joined;
-}
+import { ListRowItem } from './list/ListRowItem.js';
+import { rowNaming } from './list/row-naming.js';
 /**
  * One row of a `ListGroup`: it opens something (`onPress` or `href`, with
  * a chevron, the whole row pressing), picks one option in place
- * (`selected`), or only states something (neither).
+ * (`selected`), or only states something (neither). `unread` marks it new,
+ * `tag` adds a status before its end, `action` a control beside it, and
+ * `truncate` keeps its title and detail to one line each.
  */
-export function ListRow({ title, detail, value, valueDetail, valueTone, valueBadge, leading, onPress, href, selected, disabled = false, tone = 'default', titleAppearance = 'strong', accessory = 'chevron', 'aria-label': ariaLabel, }) {
+export function ListRow({ title, detail, value, valueDetail, valueTone, valueBadge, leading, onPress, href, selected, disabled = false, tone = 'default', titleAppearance = 'strong', accessory = 'chevron', unread = false, unreadLabel, tag, action, truncate = false, 'aria-label': ariaLabel, }) {
     const pressable = onPress !== undefined || href !== undefined;
     assertListRow({
         title,
@@ -29,19 +28,21 @@ export function ListRow({ title, detail, value, valueDetail, valueTone, valueBad
         valueBadge,
         selected,
         pressable,
+        unread,
+        unreadLabel,
     });
-    const container = useContext(ListRowContainer);
     const id = useId();
     const kind = listRowAccessory({ pressable, selected, accessory });
-    const content = (_jsx(ListRowContent, { accessory: kind, detail: detail, id: id, leading: leading, title: title, titleAppearance: titleAppearance, tone: tone, value: value, valueBadge: valueBadge, valueDetail: valueDetail, valueTone: valueTone }));
-    const className = cx('sw-list-row', pressable && 'sw-list-row-pressable', disabled && 'sw-list-row-disabled');
-    const naming = {
+    const content = (_jsx(ListRowContent, { accessory: kind, detail: detail, id: id, leading: leading, tag: tag, title: title, titleAppearance: titleAppearance, tone: tone, truncate: truncate, unreadLabel: unread ? unreadLabel : undefined, value: value, valueBadge: valueBadge, valueDetail: valueDetail, valueTone: valueTone }));
+    const className = cx('sw-list-row', pressable && 'sw-list-row-pressable', disabled && 'sw-list-row-disabled', truncate && 'sw-list-row-truncate');
+    const naming = rowNaming(id, {
         'aria-label': ariaLabel,
-        'aria-labelledby': ariaLabel
-            ? undefined
-            : ids(`${id}-title`, value !== undefined && `${id}-value`),
-        'aria-describedby': ids(Boolean(detail) && `${id}-detail`, Boolean(valueDetail) && `${id}-value-detail`),
-    };
+        value,
+        detail,
+        valueDetail,
+        unread,
+        tag,
+    });
     let row;
     if (href !== undefined)
         row = (_jsx("a", { ...naming, "aria-current": selected ? 'true' : undefined, "aria-disabled": disabled || undefined, className: className, href: disabled ? undefined : href, onClick: onPress && !disabled
@@ -56,5 +57,5 @@ export function ListRow({ title, detail, value, valueDetail, valueTone, valueBad
         row = (_jsx("button", { ...naming, "aria-pressed": selected, className: className, disabled: disabled, onClick: onPress, tabIndex: tabStop, type: "button", children: content }));
     else
         row = (_jsx("div", { "aria-label": ariaLabel, className: className, role: ariaLabel ? 'group' : undefined, children: content }));
-    return container === 'li' ? (_jsx("li", { className: "sw-list-item", children: row })) : (_jsx("div", { className: "sw-list-item", children: row }));
+    return _jsx(ListRowItem, { action: action, children: row });
 }

package/dist/components/MarkdownView.d.ts

@@ -0,0 +1,39 @@
+import { type MarkdownHeading, type MarkdownOmission, type MarkdownOmissionCounts } from './markdown/markdown-model.js';
+import { type MarkdownOptions } from './markdown/markdown-options.js';
+export type { MarkdownHeading, MarkdownImage, MarkdownImageResolver, MarkdownOmission, MarkdownOmissionCounts, MarkdownOmissionKind, } from './markdown/markdown-model.js';
+export { markdownOmissionKinds } from './markdown/markdown-model.js';
+export type { MarkdownOptions } from './markdown/markdown-options.js';
+export type MarkdownViewProps = MarkdownOptions & {
+    /** The Markdown, as written or pasted. */
+    source: string;
+    /**
+     * Hidden words after every link, which opens in a new tab, such as
+     * "(opens in a new tab)".
+     */
+    newTabLabel: string;
+};
+/** What `inspectMarkdown` finds. */
+export type MarkdownInspection = {
+    /** The headings, with the ids the view gives them. */
+    headings: MarkdownHeading[];
+    /** The first 100 things left out, in order. */
+    omissions: MarkdownOmission[];
+    /** How many of each kind were left out, past the first 100 too. */
+    omissionCounts: MarkdownOmissionCounts;
+};
+/**
+ * What a source's view shows in its headings (for an "On this page" list,
+ * with the ids the view gives them) and what it leaves out (for an editor
+ * to say so before saving). Pure; pass the same options as the view, which
+ * it refuses the same way.
+ */
+export declare function inspectMarkdown(source: string, options?: MarkdownOptions): MarkdownInspection;
+/**
+ * Markdown drawn in Scalewing's type as React elements, never as HTML:
+ * paragraphs, headings (`#` drawn at the page's second level, an `h2`),
+ * lists, bold, italic, links (http, https and mailto only, in a new tab),
+ * block quotes as a highlighted box, line breaks and `photo:` images with
+ * their captions. Raw HTML, tables, other images and other link schemes
+ * are left out (a link's words stay); `inspectMarkdown` lists them.
+ */
+export declare function MarkdownView(props: MarkdownViewProps): import("react").JSX.Element;

package/dist/components/MarkdownView.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { readMarkdown } from './markdown/read-markdown.js';
+import { renderBlocks } from './markdown/render-markdown.js';
+export { markdownOmissionKinds } from './markdown/markdown-model.js';
+/**
+ * What a source's view shows in its headings (for an "On this page" list,
+ * with the ids the view gives them) and what it leaves out (for an editor
+ * to say so before saving). Pure; pass the same options as the view, which
+ * it refuses the same way.
+ */
+export function inspectMarkdown(source, options = {}) {
+    const { headings, omissions, omissionCounts } = readMarkdown(source, options, 'inspectMarkdown');
+    return { headings, omissions, omissionCounts };
+}
+/**
+ * Markdown drawn in Scalewing's type as React elements, never as HTML:
+ * paragraphs, headings (`#` drawn at the page's second level, an `h2`),
+ * lists, bold, italic, links (http, https and mailto only, in a new tab),
+ * block quotes as a highlighted box, line breaks and `photo:` images with
+ * their captions. Raw HTML, tables, other images and other link schemes
+ * are left out (a link's words stay); `inspectMarkdown` lists them.
+ */
+export function MarkdownView(props) {
+    const { source, resolveImage, idPrefix, newTabLabel } = props;
+    if (typeof newTabLabel !== 'string' || newTabLabel.trim() === '')
+        throw new RangeError('MarkdownView newTabLabel must be non-empty text');
+    const reading = useMemo(() => readMarkdown(source, { resolveImage, idPrefix }, 'MarkdownView'), [source, resolveImage, idPrefix]);
+    return (_jsx("div", { className: "sw-markdown", children: renderBlocks(reading.blocks, { newTabLabel }) }));
+}

package/dist/components/NavCount.d.ts

@@ -1,3 +1,6 @@
+/** The pill's colours: `danger` for work waiting, `accent` for news. */
+export declare const navCountTones: readonly ["danger", "accent"];
+export type NavCountTone = (typeof navCountTones)[number];
 export type NavCountProps = {
     /**
      * How many things wait behind the destination, such as tasks to do: a
@@ -11,11 +14,21 @@ export type NavCountProps = {
      * pill then hidden from assistive technology.
      */
     countLabel?: string;
+    /**
+     * The pill's colour. `danger` (the default) is work waiting there, such
+     * as tasks to do; `accent` is news, such as what was added since the
+     * person last looked, where nothing is overdue. Give an accent count a
+     * `countLabel` ("3 new"), so its words, not its colour, say it is news.
+     * Place either tone on a neutral or ghost destination: a filled one of
+     * the same colour would hide it.
+     */
+    tone?: NavCountTone;
 };
 /**
  * A count after a Nav destination's words, placed inside its link or
  * Button: `<a href="/tasks">Tasks<NavCount count={8} /></a>`. It is the
  * pill SectionNav's item count draws, and it is part of the destination's
- * accessible name, as there.
+ * accessible name, as there. `tone="accent"` draws it in the accent colour,
+ * for news rather than work.
  */
-export declare function NavCount({ count, countLabel }: NavCountProps): import("react").JSX.Element | null;
+export declare function NavCount({ count, countLabel, tone, }: NavCountProps): import("react").JSX.Element | null;

package/dist/components/NavCount.js

@@ -1,23 +1,33 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/** Fails closed on a count that is not a whole number or an empty label. */
-function assertNavCount({ count, countLabel }) {
+import { cx } from '../class-names.js';
+import { isOneOf } from '../is-one-of.js';
+/** The pill's colours: `danger` for work waiting, `accent` for news. */
+export const navCountTones = ['danger', 'accent'];
+/**
+ * Fails closed on a count that is not a whole number, an empty label or an
+ * unknown tone.
+ */
+function assertNavCount({ count, countLabel, tone }) {
     if (!Number.isInteger(count) || count < 0)
         throw new RangeError(`NavCount count must be a whole number from 0: ${String(count)}`);
     if (countLabel !== undefined &&
         (typeof countLabel !== 'string' || !countLabel.trim()))
         throw new RangeError('NavCount countLabel must be non-empty text');
+    if (tone !== undefined && !isOneOf(navCountTones, tone))
+        throw new RangeError(`Unknown NavCount tone: ${String(tone)}`);
 }
 /**
  * A count after a Nav destination's words, placed inside its link or
  * Button: `<a href="/tasks">Tasks<NavCount count={8} /></a>`. It is the
  * pill SectionNav's item count draws, and it is part of the destination's
- * accessible name, as there.
+ * accessible name, as there. `tone="accent"` draws it in the accent colour,
+ * for news rather than work.
  */
-export function NavCount({ count, countLabel }) {
-    assertNavCount({ count, countLabel });
+export function NavCount({ count, countLabel, tone = 'danger', }) {
+    assertNavCount({ count, countLabel, tone });
     if (count === 0)
         return null;
     // The space is its own text node, so every browser and the name's
     // computation keep it between the words and the count.
-    return (_jsxs(_Fragment, { children: [' ', countLabel ? _jsx("span", { className: "sw-sr-only", children: countLabel }) : null, _jsx("span", { "aria-hidden": countLabel ? true : undefined, className: "sw-nav-count", children: count })] }));
+    return (_jsxs(_Fragment, { children: [' ', countLabel ? _jsx("span", { className: "sw-sr-only", children: countLabel }) : null, _jsx("span", { "aria-hidden": countLabel ? true : undefined, className: cx('sw-nav-count', tone === 'accent' && 'sw-nav-count-accent'), children: count })] }));
 }

package/dist/components/action-menu/assert-action-menu.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+import { type ActionMenuTriggerAppearance } from '../../css/css-action-menu-trigger.js';
+import { type ActionMenuItem } from '../ActionMenu.js';
+/**
+ * Fails closed on a menu it cannot draw: an item's blank detail or
+ * detailLang (or a detailLang with no detail), an unknown trigger
+ * appearance, or an icon trigger with no glyph.
+ */
+export declare function assertActionMenu({ items, trigger, triggerAppearance, }: {
+    items: readonly ActionMenuItem[];
+    trigger: ReactNode;
+    triggerAppearance: ActionMenuTriggerAppearance;
+}): void;

package/dist/components/action-menu/assert-action-menu.js

@@ -0,0 +1,21 @@
+import { actionMenuTriggerAppearances, } from '../../css/css-action-menu-trigger.js';
+import { hasSlot } from '../slot.js';
+/** Whether an icon trigger has a glyph to draw (blank words are none). */
+function hasGlyph(trigger) {
+    return (hasSlot(trigger) && !(typeof trigger === 'string' && trigger.trim() === ''));
+}
+/**
+ * Fails closed on a menu it cannot draw: an item's blank detail or
+ * detailLang (or a detailLang with no detail), an unknown trigger
+ * appearance, or an icon trigger with no glyph.
+ */
+export function assertActionMenu({ items, trigger, triggerAppearance, }) {
+    if (items.some((item) => (item.detail !== undefined && !item.detail.trim()) ||
+        (item.detailLang !== undefined &&
+            (!item.detailLang.trim() || item.detail === undefined))))
+        throw new RangeError('ActionMenu item detail and detailLang must not be blank; detailLang needs a detail');
+    if (!actionMenuTriggerAppearances.includes(triggerAppearance))
+        throw new RangeError(`Unknown ActionMenu triggerAppearance: ${String(triggerAppearance)}`);
+    if (triggerAppearance === 'icon' && !hasGlyph(trigger))
+        throw new RangeError('An icon ActionMenu trigger needs its glyph');
+}

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

@@ -1,6 +1,6 @@
 'use client';
-import { useLayoutEffect, useState } from 'react';
 import { chartFallbackWidth } from '../../chart-metrics.js';
+import { useElementWidth } from '../use-element-width.js';
 /**
  * Follows the width a chart is given, so its drawing is laid out in its
  * own pixels: on mount, before the first paint, and whenever its box
@@ -8,27 +8,5 @@ import { chartFallbackWidth } from '../../chart-metrics.js';
  * no ResizeObserver measures on window resizes instead.
  */
 export function useChartWidth(ref) {
-    const [width, setWidth] = useState(chartFallbackWidth);
-    // Before paint, so a phone never shows the wide layout first.
-    useLayoutEffect(() => {
-        const box = ref.current;
-        if (!box)
-            return;
-        function measure() {
-            if (!box)
-                return;
-            const next = Math.round(box.getBoundingClientRect().width);
-            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]);
-    return width;
+    return useElementWidth(ref, chartFallbackWidth);
 }

package/dist/components/description-list-layout.d.ts

@@ -0,0 +1,10 @@
+/**
+ * How a DescriptionList lays out its rows: `columns` (the default), the
+ * terms in a start column and the details beside them, each term over its
+ * detail below `md`; `spread`, each row's term at its start and its detail
+ * at its end, side by side at every width.
+ */
+export declare const descriptionListLayouts: readonly ["columns", "spread"];
+export type DescriptionListLayout = (typeof descriptionListLayouts)[number];
+/** Fails closed on a layout the list cannot draw. */
+export declare function assertDescriptionListLayout(layout: unknown): void;

package/dist/components/description-list-layout.js

@@ -0,0 +1,13 @@
+import { isOneOf } from '../is-one-of.js';
+/**
+ * How a DescriptionList lays out its rows: `columns` (the default), the
+ * terms in a start column and the details beside them, each term over its
+ * detail below `md`; `spread`, each row's term at its start and its detail
+ * at its end, side by side at every width.
+ */
+export const descriptionListLayouts = ['columns', 'spread'];
+/** Fails closed on a layout the list cannot draw. */
+export function assertDescriptionListLayout(layout) {
+    if (!isOneOf(descriptionListLayouts, layout))
+        throw new RangeError(`Unknown DescriptionList layout: ${String(layout)}`);
+}