@nanisoft/prism-ui 0.13.0 → 0.16.0

package/dist/blocks/dashboard-01/dashboard-01.d.ts

@@ -0,0 +1,247 @@
+import type { ReactNode } from 'react';
+import { type HeadingLevel } from '../../components/ui/section.js';
+/**
+ * How much of the six-track panel grid one panel takes.
+ *
+ * Three names rather than a number, and the arithmetic is the argument. A
+ * `colSpan: number` prop hands this Block a grid instead of a panel: it would have
+ * to reproduce an arrangement exactly, including the arrangements nobody can lay
+ * out, because a span of 7 in a six-track grid type-checks, renders, and produces a
+ * composition no reader can reason about. A third, a half and the whole are the
+ * three relationships a set of panels can have to each other, and they add up to
+ * compositions by arithmetic the caller never performs: two halves side by side, a
+ * full width under a row of thirds, two thirds above a row of halves.
+ */
+export type Dashboard01Span = 'full' | 'half' | 'third';
+/**
+ * One figure at the top of an overview, and the four optional things a figure
+ * comes with.
+ *
+ * `label` and `value` are the two that make a figure a figure. The rest are
+ * annotation, and a metric with no annotation renders the two it has rather than a
+ * card with a line of empty space where the annotation would have been, which is
+ * the rule every optional field on this type follows.
+ *
+ * `deltaFormat` is here for the reason `Metric` refuses to guess: a delta of `0.12`
+ * is twelve percent, twelve cents or twelve milliseconds, and a Component that
+ * attached a percent sign to it would be claiming a caller's units. The cost of the
+ * refusal is that a caller who passes a fraction and no formatter gets `0.12`
+ * printed, which is honest and almost never what was wanted, so the formatter is a
+ * prop here and the alternative was a Block guessing on every consumer's behalf.
+ */
+export type Dashboard01Metric = {
+    /** What the figure measures, read under the figure rather than above it. */
+    label: string;
+    /** The figure itself, in the caller's own units and the caller's own formatting. */
+    value: ReactNode;
+    /**
+     * The change against the previous reading, where the sign is the direction.
+     *
+     * A `number` and not an object with a `direction`, for the reason `Metric` states
+     * in full: a number has exactly one sign, and a shape with both lets a caller put
+     * a rising mark on a falling reading.
+     */
+    delta?: number;
+    /** The words for the delta, given the number. See the note on this type. */
+    deltaFormat?: (value: number) => string;
+    /** The line under the label: the period, the source, the caveat that matters. */
+    hint?: ReactNode;
+    /** The readings behind the figure, drawn small beside it. See `sparklineLabel`. */
+    sparkline?: number[];
+    /**
+     * The name of the series the sparkline draws, and the only thing a screen reader
+     * reads before the numbers.
+     *
+     * Required whenever `sparkline` is set, and the pair is checked together rather
+     * than left to the Component. `Sparkline` needs a name for the same reason `Chart`
+     * does: two sparklines in a row of four are two pictures a reader cannot tell
+     * apart, and a picture with no name is not announced and not linkable. Requiring
+     * it at the Block's own boundary rather than letting the Component throw means the
+     * diagnostic names the field the caller has to add.
+     */
+    sparklineLabel?: string;
+    /** Where the figure is kept. Its presence makes the tile carry a link. */
+    href?: string;
+    /**
+     * The words on the link, and required whenever `href` is.
+     *
+     * A link whose only words are the figure itself tells a reader nothing about what
+     * following it does, and the same rule holds in every Block in this package that
+     * draws a link.
+     */
+    hrefLabel?: string;
+};
+/**
+ * One panel in the grid: an identifier, how much width it takes, and the caller's
+ * own content.
+ *
+ * `children` is required and `title` is not, and that is deliberate. A panel with
+ * no title is a list, a queue, or a run console: all three are panels and none of
+ * them is a titled region, and a heading invented for them would be a claim about
+ * somebody else's product. A panel with a title is a titled region, and then the
+ * outline says so.
+ */
+export type Dashboard01Panel = {
+    /** A key unique within the set, carried on the markup as `data-panel`. */
+    id: string;
+    /** The panel's title, drawn as a heading one step below the section. */
+    title?: ReactNode;
+    /** How much of the grid the panel takes. See `Dashboard01Span`. */
+    span?: Dashboard01Span;
+    /**
+     * The controls that act on the whole panel rather than on one row of it: a
+     * filter, a refresh, a link to the whole set.
+     *
+     * A slot and not a set of named controls, because which controls a panel has is
+     * the consumer's fact. A panel that drew a search box and a sort would be a panel
+     * that assumed the list it holds is searchable and sortable.
+     */
+    toolbar?: ReactNode;
+    /**
+     * The band under the panel's content, for the actions that belong to the whole
+     * panel: load more, or the line saying how much of the set is shown.
+     *
+     * Distinct from `toolbar` because a header acts on the panel and a footer ends it.
+     * Merging them would put a control that has to stay reachable in a band a reader
+     * has to scroll to reach.
+     */
+    footer?: ReactNode;
+    /** The panel's content. The caller's own list, table, figure or console. */
+    children: ReactNode;
+};
+/**
+ * The props a Dashboard01 takes. Every string is a prop and the Block ships none.
+ */
+export type Dashboard01Props = {
+    /** Optional label above the section title. See the No-Default-Eyebrow Rule. */
+    eyebrow?: string;
+    /** The section title. Omit it for a dashboard composed under its own heading. */
+    title?: string;
+    /** One or two sentences under the title. */
+    description?: string;
+    /**
+     * The page header above everything, usually the caller's own `PageHeader01`.
+     *
+     * A slot, and not a set of title, breadcrumb and action props, for the reason
+     * `AppShell01` gives for its top bar: the header of a product screen is a
+     * composition the product has already made, with its own trail and its own
+     * actions, and a Block that redrew the parts of it would be a second implementation
+     * of an Item that is already in this package.
+     */
+    header?: ReactNode;
+    /**
+     * The figures along the top, in the order a reader should meet them.
+     *
+     * Order is the caller's because it is a claim about what matters first. A row
+     * that sorted itself by size or by name would be making that claim on the
+     * caller's behalf, and on a dashboard the claim is the whole point.
+     */
+    metrics?: Dashboard01Metric[];
+    /** The panels, in the order a reader should meet them. See `Dashboard01Panel`. */
+    panels?: Dashboard01Panel[];
+    /**
+     * The narrow column at the right-hand edge of the screen, above `lg`.
+     *
+     * A slot, and the reasoning is the Block's own JSDoc rather than a line here. The
+     * short version: the right column of a dashboard is a queue, a watchlist or a set
+     * of links in any given product, and a Block cannot know which.
+     */
+    rail?: ReactNode;
+    /**
+     * What stands in for the whole body when there is no metric, no panel and no rail.
+     *
+     * A `ReactNode` and not a string, because the sentence a reader reaches an empty
+     * overview with is the one sentence on the surface nobody can write for them: it
+     * says what should have been there, and only the caller knows.
+     */
+    empty?: ReactNode;
+    /** Heading level for the section title. See `HeadingLevel`. */
+    headingLevel?: HeadingLevel;
+    /**
+     * Layout only, exactly as on every Block. Changing a Prism-owned visual property
+     * from here is prohibited.
+     */
+    className?: string;
+};
+/**
+ * An overview screen composed entirely of slots: a caller own header, a row of
+ * figures, a grid of panels, and an optional narrow column at the right.
+ *
+ * **The composition is the whole design, and the reason is that an overview's shape
+ * is a fact about the product rather than about the design system.** A pipeline
+ * wants the run queue wide and the ledger beside it. An estate wants capacity wide
+ * and a watchlist down the side. A trading floor wants a watchlist wide and the
+ * queue beside it. Four NaniSoft products want four arrangements, and every one of
+ * them is right for its own screen. A Block that picked one would be a template, and
+ * a template carries an opinion about hierarchy that every consumer inherits: the
+ * consumer who wants the argument on the right has three answers, restyle a
+ * catalogue item, wrap it, or accept a page whose most important panel is the one
+ * Prism happened to put first. So `panels` is a list with a width on each entry and
+ * this Block's only remaining opinion is the six-track grid they are placed on.
+ *
+ * **The figures are `Metric` and `Sparkline`, and a dashboard that hand-drew its own
+ * metric row would be a second implementation of a Component whose whole argument is
+ * that the direction is derived rather than declared.** `Metric`'s delta is a
+ * `number` and the sign is the direction, so a rising mark cannot be drawn on a
+ * falling reading; a Block that took `{ value, direction }` could, and the mistake
+ * would be invisible in review and visible to every reader of that dashboard. It
+ * also puts the label under the value, which is the arrangement a dashboard row
+ * wants, because a row is scanned by its figures and settled by its names. And
+ * `Sparkline` draws the numbers behind its shape as a table in the document, so a
+ * metric row of six costs six tables in the accessibility tree rather than six
+ * pictures nobody can query. The cost is stated rather than implied: a sparkline
+ * needs a name and a series that is not flat, and a caller who passes an empty array
+ * or a series of one repeated value gets `Sparkline`'s own refusal, which is the
+ * right place for it.
+ *
+ * **The panels are `Card` and not `ListPanel`, and the reason is what a panel
+ * usually holds.** `ListPanel` exists for a long list, and its reason is stated in
+ * its own JSDoc: a panel that grows to the length of its list is a frame around a
+ * page. A dashboard panel is bounded by what fits above the fold, not by a number of
+ * rows, so the bound is the caller's own composition and the scroll is the caller's
+ * own choice. What a dashboard panel does need is a title that is a heading, and
+ * `ListPanel` draws its title as a `span` because four panels in a grid are four
+ * titles under one section heading; a dashboard is exactly that case, and this
+ * Block wants the outline, so it takes the `Card` whose title is a real element. The
+ * price is that a panel of four hundred rows grows until the caller wraps it in
+ * something bounded, which is a decision about the data and therefore theirs.
+ *
+ * **The rail is a slot and not a property of a row, and the reason is that the
+ * right-hand column is three different things in three different products.** In a
+ * pipeline it is the run queue. In an estate manager it is a watchlist of the nodes
+ * that are degraded. In a consumer product it is a set of links. None of them is a
+ * property of a metric or a panel, and a Block that drew it would be drawing one of
+ * the three for all of them. So it is a column and the caller fills it, and the
+ * column is narrow because a rail that competes with the panels has stopped being a
+ * rail.
+ *
+ * **The measurement that sets the widths, stated as arithmetic rather than taste.**
+ * The container is `Section`'s, which is a 72rem measure with 2rem of padding at
+ * each edge, so 68rem of content. With a rail the main column takes three of four
+ * tracks, which is about 50rem, and the rail takes the fourth, which is about 17rem.
+ * A `third` panel inside that main column is then about 16rem and a `half` is about
+ * 24rem, against 22rem and 33rem in a dashboard with no rail. That is the cost of
+ * the rail and it is real: a `third` panel beside a rail is tight, and a product
+ * whose dashboard is mostly rail wants a `Page` rather than this Block. The layout
+ * is `lg` and up in both cases, because a phone has one column and a rail beside
+ * panels is two things a 360 pixel screen cannot show.
+ *
+ * **A panel title is a heading one step below the section, and the level is derived
+ * rather than written.** The panels are a set of titled regions, so the outline
+ * says so, and a Block embedded one level deeper carries its outline with it
+ * instead of announcing six siblings of the section that introduces them. A panel
+ * with no title draws no heading at all, which is a list and is a valid panel.
+ *
+ * **An overview with nothing in it renders `empty` and no grid.** The rule is
+ * `FactList`'s: a frame around nothing is a gap the reader looks through, and a
+ * six-track grid with no panels in it is a gap six tracks wide. The alternative was
+ * to draw the grid regardless so the page does not reflow when the first panel
+ * arrives, and the cost of that is a dashboard whose first paint is an empty box.
+ *
+ * It is a server Component: no hook, no state, no client code and no motion. A
+ * caller that wants a control in a panel composes it in the panel's own slot, which
+ * is the arrangement a `ReactNode` exists for.
+ */
+export declare function Dashboard01({ eyebrow, title, description, header, metrics, panels, rail, empty, headingLevel, className, }: Dashboard01Props): import("react").JSX.Element;
+export default Dashboard01;
+//# sourceMappingURL=dashboard-01.d.ts.map

package/dist/blocks/dashboard-01/dashboard-01.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-01.d.ts","sourceRoot":"","sources":["../../../src/blocks/dashboard-01/dashboard-01.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAWtC,OAAO,EAIL,KAAK,YAAY,EAClB,MAAM,6BAA6B,CAAA;AAIpC;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;AAEvD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAA;IACb,oFAAoF;IACpF,KAAK,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4EAA4E;IAC5E,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC,iFAAiF;IACjF,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,0EAA0E;IAC1E,EAAE,EAAE,MAAM,CAAA;IACV,wEAAwE;IACxE,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,mEAAmE;IACnE,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,4EAA4E;IAC5E,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC7B,kFAAkF;IAClF,MAAM,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC3B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA+CD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,WAAW,EACX,MAAM,EACN,OAAY,EACZ,MAAW,EACX,IAAI,EACJ,KAAK,EACL,YAAmB,EACnB,SAAS,GACV,EAAE,gBAAgB,+BA+KlB;AAED,eAAe,WAAW,CAAA"}

package/dist/blocks/dashboard-01/dashboard-01.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, CardFooter, CardHeader, CardTitle, } from '../../components/ui/card.js';
+import { CtaLink } from '../../components/ui/cta-link.js';
+import { Metric } from '../../components/ui/metric.js';
+import { Section, SectionHeading, childLevel, } from '../../components/ui/section.js';
+import { Sparkline } from '../../components/ui/sparkline.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * What each named span takes of the six tracks, at the breakpoint the grid appears.
+ *
+ * A map of machine values rather than three conditional class strings, so the
+ * relationship between a span name and a track count is one table a reader can
+ * check in one place. Every value is a `col-span` utility and nothing else, and
+ * `className` being layout only is the reason the grid placement lives here rather
+ * than on the caller.
+ */
+const SPAN = {
+    third: 'lg:col-span-2',
+    half: 'lg:col-span-3',
+    full: 'lg:col-span-6',
+};
+/**
+ * The refusals, as checks, so a tile that would render a control nobody can name is
+ * a diagnostic in a console rather than a rendered link.
+ *
+ * The pair rule is the same one `Changelog01` and `ContentGrid01` make: a link whose
+ * only words are the figure's own value tells a reader nothing about what following
+ * it does, and an accessible name that is an address is punctuation rather than a
+ * name. The sparkline's label is checked here rather than left to the Component
+ * because the Component's own message names a Component's field, and a caller who
+ * wired a dashboard up would rather be told which of their own props to add.
+ */
+function assertMetrics(metrics) {
+    for (const metric of metrics) {
+        if ((metric.href === undefined) !== (metric.hrefLabel === undefined)) {
+            throw new Error(`Dashboard01: the metric "${metric.label}" declares one of href and hrefLabel without the other, so the ` +
+                'tile would carry a link with no words on it, or a name with no link beside it. Pass the words that say ' +
+                'what following it does, or omit the href.');
+        }
+        if (metric.sparkline !== undefined && metric.sparklineLabel === undefined) {
+            throw new Error(`Dashboard01: the metric "${metric.label}" passes a sparkline with no sparklineLabel, so the figure would ` +
+                'be a picture with no name, which a screen reader cannot announce and two sparklines in one row cannot be ' +
+                'told apart. Pass the series name in the words the product uses.');
+        }
+    }
+}
+/**
+ * An overview screen composed entirely of slots: a caller own header, a row of
+ * figures, a grid of panels, and an optional narrow column at the right.
+ *
+ * **The composition is the whole design, and the reason is that an overview's shape
+ * is a fact about the product rather than about the design system.** A pipeline
+ * wants the run queue wide and the ledger beside it. An estate wants capacity wide
+ * and a watchlist down the side. A trading floor wants a watchlist wide and the
+ * queue beside it. Four NaniSoft products want four arrangements, and every one of
+ * them is right for its own screen. A Block that picked one would be a template, and
+ * a template carries an opinion about hierarchy that every consumer inherits: the
+ * consumer who wants the argument on the right has three answers, restyle a
+ * catalogue item, wrap it, or accept a page whose most important panel is the one
+ * Prism happened to put first. So `panels` is a list with a width on each entry and
+ * this Block's only remaining opinion is the six-track grid they are placed on.
+ *
+ * **The figures are `Metric` and `Sparkline`, and a dashboard that hand-drew its own
+ * metric row would be a second implementation of a Component whose whole argument is
+ * that the direction is derived rather than declared.** `Metric`'s delta is a
+ * `number` and the sign is the direction, so a rising mark cannot be drawn on a
+ * falling reading; a Block that took `{ value, direction }` could, and the mistake
+ * would be invisible in review and visible to every reader of that dashboard. It
+ * also puts the label under the value, which is the arrangement a dashboard row
+ * wants, because a row is scanned by its figures and settled by its names. And
+ * `Sparkline` draws the numbers behind its shape as a table in the document, so a
+ * metric row of six costs six tables in the accessibility tree rather than six
+ * pictures nobody can query. The cost is stated rather than implied: a sparkline
+ * needs a name and a series that is not flat, and a caller who passes an empty array
+ * or a series of one repeated value gets `Sparkline`'s own refusal, which is the
+ * right place for it.
+ *
+ * **The panels are `Card` and not `ListPanel`, and the reason is what a panel
+ * usually holds.** `ListPanel` exists for a long list, and its reason is stated in
+ * its own JSDoc: a panel that grows to the length of its list is a frame around a
+ * page. A dashboard panel is bounded by what fits above the fold, not by a number of
+ * rows, so the bound is the caller's own composition and the scroll is the caller's
+ * own choice. What a dashboard panel does need is a title that is a heading, and
+ * `ListPanel` draws its title as a `span` because four panels in a grid are four
+ * titles under one section heading; a dashboard is exactly that case, and this
+ * Block wants the outline, so it takes the `Card` whose title is a real element. The
+ * price is that a panel of four hundred rows grows until the caller wraps it in
+ * something bounded, which is a decision about the data and therefore theirs.
+ *
+ * **The rail is a slot and not a property of a row, and the reason is that the
+ * right-hand column is three different things in three different products.** In a
+ * pipeline it is the run queue. In an estate manager it is a watchlist of the nodes
+ * that are degraded. In a consumer product it is a set of links. None of them is a
+ * property of a metric or a panel, and a Block that drew it would be drawing one of
+ * the three for all of them. So it is a column and the caller fills it, and the
+ * column is narrow because a rail that competes with the panels has stopped being a
+ * rail.
+ *
+ * **The measurement that sets the widths, stated as arithmetic rather than taste.**
+ * The container is `Section`'s, which is a 72rem measure with 2rem of padding at
+ * each edge, so 68rem of content. With a rail the main column takes three of four
+ * tracks, which is about 50rem, and the rail takes the fourth, which is about 17rem.
+ * A `third` panel inside that main column is then about 16rem and a `half` is about
+ * 24rem, against 22rem and 33rem in a dashboard with no rail. That is the cost of
+ * the rail and it is real: a `third` panel beside a rail is tight, and a product
+ * whose dashboard is mostly rail wants a `Page` rather than this Block. The layout
+ * is `lg` and up in both cases, because a phone has one column and a rail beside
+ * panels is two things a 360 pixel screen cannot show.
+ *
+ * **A panel title is a heading one step below the section, and the level is derived
+ * rather than written.** The panels are a set of titled regions, so the outline
+ * says so, and a Block embedded one level deeper carries its outline with it
+ * instead of announcing six siblings of the section that introduces them. A panel
+ * with no title draws no heading at all, which is a list and is a valid panel.
+ *
+ * **An overview with nothing in it renders `empty` and no grid.** The rule is
+ * `FactList`'s: a frame around nothing is a gap the reader looks through, and a
+ * six-track grid with no panels in it is a gap six tracks wide. The alternative was
+ * to draw the grid regardless so the page does not reflow when the first panel
+ * arrives, and the cost of that is a dashboard whose first paint is an empty box.
+ *
+ * It is a server Component: no hook, no state, no client code and no motion. A
+ * caller that wants a control in a panel composes it in the panel's own slot, which
+ * is the arrangement a `ReactNode` exists for.
+ */
+export function Dashboard01({ eyebrow, title, description, header, metrics = [], panels = [], rail, empty, headingLevel = 'h2', className, }) {
+    // A panel's title is a heading one step below the section that introduces the set,
+    // so a Block embedded one level deeper carries its outline with it.
+    const PanelTitle = childLevel(headingLevel);
+    if (metrics.length > 0)
+        assertMetrics(metrics);
+    const hasRail = rail !== undefined && rail !== null && rail !== false;
+    const hasLead = header !== undefined || title !== undefined;
+    const hasBody = metrics.length > 0 || panels.length > 0 || hasRail;
+    return (_jsxs(Section, { "data-slot": "dashboard-01", className: className, children: [_jsxs("div", { "data-slot": "dashboard-01-lead", className: "flex flex-col gap-8", children: [header === undefined ? null : (_jsx("div", { "data-slot": "dashboard-01-header", children: header })), title === undefined ? null : (_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description }))] }), _jsxs("div", { "data-slot": "dashboard-01-body", className: cn('flex flex-col gap-8', 
+                // The gap between the header and the body is a fact about whether the lead
+                // drew anything, so it arrives with that fact rather than as a margin on
+                // two of the three possible children.
+                hasLead ? 'mt-8' : null, hasRail ? 'lg:grid lg:grid-cols-4 lg:items-start lg:gap-6' : null), children: [_jsxs("div", { "data-slot": "dashboard-01-main", className: cn('flex min-w-0 flex-col gap-6', hasRail ? 'lg:col-span-3' : null), children: [metrics.length > 0 ? (_jsx("div", { "data-slot": "dashboard-01-metrics", className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-4", children: metrics.map((metric) => (_jsxs(Card, { "data-slot": "dashboard-01-metric", "data-metric": metric.label, className: "gap-4 py-5", children: [_jsxs(CardContent, { className: "flex flex-col gap-3", children: [_jsx(Metric, { value: metric.value, label: metric.label, delta: metric.delta, deltaFormat: metric.deltaFormat, hint: metric.hint }), metric.sparkline === undefined ? null : (_jsx("div", { "data-slot": "dashboard-01-sparkline", className: "flex", children: _jsx(Sparkline, { values: metric.sparkline, label: metric.sparklineLabel, className: "ms-auto" }) }))] }), metric.href === undefined ? null : (_jsx(CardFooter, { "data-slot": "dashboard-01-metric-link", className: "justify-end", children: _jsx(CtaLink, { href: metric.href, variant: "ghost", size: "sm", children: metric.hrefLabel }) }))] }, metric.label))) })) : null, panels.length > 0 ? (_jsx("div", { "data-slot": "dashboard-01-panels", className: "grid gap-4 lg:grid-cols-6", children: panels.map((panel) => (_jsx("div", { "data-slot": "dashboard-01-panel", "data-panel": panel.id, className: SPAN[panel.span ?? 'full'], children: _jsxs(Card, { className: "h-full gap-4 py-5", children: [panel.title === undefined && panel.toolbar === undefined ? null : (_jsxs(CardHeader, { className: "grid-cols-[minmax(0,1fr)_auto] gap-x-3", children: [panel.title === undefined ? null : (_jsx(CardTitle, { as: PanelTitle, className: "text-base", children: panel.title })), panel.toolbar === undefined ? null : (_jsx("div", { "data-slot": "dashboard-01-panel-toolbar", className: "flex min-w-0 items-center gap-2", children: panel.toolbar }))] })), _jsx(CardContent, { children: panel.children }), panel.footer === undefined ? null : (_jsx(CardFooter, { "data-slot": "dashboard-01-panel-footer", children: panel.footer }))] }) }, panel.id))) })) : null, hasBody ? null : _jsx("div", { "data-slot": "dashboard-01-empty", children: empty })] }), hasRail ? (_jsx("div", { "data-slot": "dashboard-01-rail", className: "flex min-w-0 flex-col gap-4 lg:col-span-1", children: rail })) : null] })] }));
+}
+export default Dashboard01;

package/dist/blocks/dashboard-01/index.d.ts

@@ -0,0 +1,3 @@
+export { Dashboard01, default } from './dashboard-01.js';
+export type { Dashboard01Metric, Dashboard01Panel, Dashboard01Props, Dashboard01Span, } from './dashboard-01.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/dashboard-01/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/dashboard-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAIrD,YAAY,EACV,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,GAChB,MAAM,gBAAgB,CAAA"}

package/dist/blocks/dashboard-01/index.js

@@ -0,0 +1 @@
+export { Dashboard01, default } from './dashboard-01.js';

package/dist/blocks/data-table-01/data-table.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import { type HeadingLevel } from '../../components/ui/section.js';
 /** One row of data. Identity comes from `getRowId`, not from the shape. */
 export type DataTableRow = Record<string, unknown>;
 export type DataTableColumn = {
@@ -64,6 +65,26 @@ export type DataTable01Props = {
     getRowId: (row: DataTableRow) => string;
     /** Names the table for assistive technology when no heading does. */
     caption?: ReactNode;
+    /**
+     * Heading level for the table's own heading. @defaultValue 'h2'
+     *
+     * A prop for the reason every Block's is: the surrounding document decides where
+     * this lands in the outline, not the Block. The heading was a hard-coded `<h2>`,
+     * and this is a Block that a product puts inside a settings page or a drawer as
+     * readily as it puts at the top of a page, where a fixed level makes the table a
+     * sibling of the section it belongs to.
+     *
+     * It decides the size as well as the tag, because the Block asks
+     * `headingSizeClass` for it rather than naming a step. It wrote `text-lg` here,
+     * so a table composed as a page's `h2` and one composed as an `h3` drew their
+     * titles at the same size, which is the one-size defect inside a single Block:
+     * forwarding the level changed nothing a reader could see. The other two halves
+     * of the heading come with it, because the ladder states weight, tracking and
+     * balance as one package and `SectionHeading` carries all three at every rung: a
+     * title that moved from 18 pixels to 36 is worse unwrapped than the 18 pixel one
+     * it replaced.
+     */
+    headingLevel?: HeadingLevel;
     /** Adds the selection column and the selection summary. */
     selectable?: boolean;
     selectedIds?: string[];
@@ -97,6 +118,6 @@ export type DataTable01Props = {
  * and the selection are the consumer's state, so a server-rendered page and a
  * client data layer can each drive it. Every label is a prop.
  */
-export declare function DataTable01({ title, description, columns, rows, getRowId, caption, selectable, selectedIds, defaultSelectedIds, onSelectedIdsChange, searchValue, onSearchChange, filters, filterValues, onFilterChange, page: pageProp, defaultPage, pageCount, onPageChange, rowActions, toolbarActions, emptyMessage, labels, }: DataTable01Props): import("react").JSX.Element;
+export declare function DataTable01({ title, description, columns, rows, getRowId, caption, selectable, selectedIds, defaultSelectedIds, onSelectedIdsChange, searchValue, onSearchChange, filters, filterValues, onFilterChange, page: pageProp, defaultPage, pageCount, onPageChange, rowActions, toolbarActions, emptyMessage, labels, headingLevel, }: DataTable01Props): import("react").JSX.Element;
 export default DataTable01;
 //# sourceMappingURL=data-table.d.ts.map

package/dist/blocks/data-table-01/data-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../src/blocks/data-table-01/data-table.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../src/blocks/data-table-01/data-table.tsx"],"names":[],"mappings":"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"}

package/dist/blocks/data-table-01/data-table.js

@@ -1,13 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, ListFilter, MoreHorizontal, Search } from 'lucide-react';
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import { Button } from '../../components/ui/button.js';
 import { Checkbox } from '../../components/ui/checkbox.js';
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from '../../components/ui/dropdown-menu.js';
 import { Input } from '../../components/ui/input.js';
 import { Pagination, PaginationContent, PaginationItem } from '../../components/ui/pagination.js';
 import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover.js';
+import { headingSizeClass } from '../../components/ui/section.js';
 import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, } from '../../components/ui/table.js';
 /** The page numbers to show, with `ellipsis` where a run is held back. */
 function pageWindow(page, pageCount) {
@@ -29,7 +30,7 @@ function pageWindow(page, pageCount) {
 function RowMenu({ actions, label }) {
     if (!actions.length)
         return null;
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { "aria-label": label, className: "size-8 p-0", children: _jsx(MoreHorizontal, { className: "size-4" }) }), _jsx(DropdownMenuContent, { align: "end", children: actions.map((action, index) => (
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { "aria-label": label, className: "size-8 p-0 pointer-coarse:size-11", children: _jsx(MoreHorizontal, { className: "size-4" }) }), _jsx(DropdownMenuContent, { align: "end", children: actions.map((action, index) => (
                 // Positional: an action label is display content and two may repeat.
                 _jsx(DropdownMenuItem, { variant: action.variant, onClick: action.onSelect, children: action.label }, index))) })] }));
 }
@@ -42,7 +43,10 @@ function RowMenu({ actions, label }) {
  * and the selection are the consumer's state, so a server-rendered page and a
  * client data layer can each drive it. Every label is a prop.
  */
-export function DataTable01({ title, description, columns, rows, getRowId, caption, selectable = false, selectedIds, defaultSelectedIds, onSelectedIdsChange, searchValue, onSearchChange, filters, filterValues, onFilterChange, page: pageProp, defaultPage = 1, pageCount, onPageChange, rowActions, toolbarActions, emptyMessage, labels, }) {
+export function DataTable01({ title, description, columns, rows, getRowId, caption, selectable = false, selectedIds, defaultSelectedIds, onSelectedIdsChange, searchValue, onSearchChange, filters, filterValues, onFilterChange, page: pageProp, defaultPage = 1, pageCount, onPageChange, rowActions, toolbarActions, emptyMessage, labels, headingLevel = 'h2', }) {
+    const Heading = headingLevel;
+    // The handle the table names itself from; see the note on the table.
+    const headingId = useId();
     const [internalSelected, setInternalSelected] = useState(defaultSelectedIds ?? []);
     const [internalPage, setInternalPage] = useState(defaultPage);
     const [internalSearch, setInternalSearch] = useState('');
@@ -103,10 +107,10 @@ export function DataTable01({ title, description, columns, rows, getRowId, capti
         setHiddenColumns((previous) => visible ? previous.filter((item) => item !== id) : [...previous, id]);
     }
     const activeFilterCount = Object.values(activeFilters).filter(Boolean).length;
-    return (_jsxs("div", { className: "flex flex-col gap-4", children: [title || description ? (_jsxs("div", { className: "flex flex-col gap-1", children: [title ? _jsx("h2", { className: "text-lg font-semibold tracking-tight", children: title }) : null, description ? (_jsx("p", { className: "text-muted-foreground text-sm", children: description })) : null] })) : null, _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2" }), _jsx(Input, { value: search, onChange: (event) => changeSearch(event.target.value), placeholder: labels.search, "aria-label": labels.search, className: "h-9 w-56 pl-8" })] }), filters?.length ? (_jsxs(Popover, { children: [_jsxs(PopoverTrigger, { children: [_jsx(ListFilter, { className: "size-4" }), labels.filters, activeFilterCount > 0 ? (_jsx("span", { className: "bg-primary text-primary-foreground rounded-full px-1.5 text-xs", children: activeFilterCount })) : null] }), _jsxs(PopoverContent, { align: "start", className: "flex w-64 flex-col gap-4", children: [filters.map((filter) => (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-sm font-medium", children: filter.label }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: filter.options.map((option) => {
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [title || description ? (_jsxs("div", { className: "flex flex-col gap-1", children: [title ? (_jsx(Heading, { id: headingId, className: `font-semibold tracking-tight text-balance ${headingSizeClass(headingLevel)}`, children: title })) : null, description ? (_jsx("p", { className: "text-muted-foreground text-sm", children: description })) : null] })) : null, _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2" }), _jsx(Input, { value: search, onChange: (event) => changeSearch(event.target.value), placeholder: labels.search, "aria-label": labels.search, className: "h-9 w-56 pl-8" })] }), filters?.length ? (_jsxs(Popover, { children: [_jsxs(PopoverTrigger, { children: [_jsx(ListFilter, { className: "size-4" }), labels.filters, activeFilterCount > 0 ? (_jsx("span", { className: "bg-primary text-primary-foreground rounded-full px-1.5 text-xs", children: activeFilterCount })) : null] }), _jsxs(PopoverContent, { align: "start", className: "flex w-64 flex-col gap-4", children: [filters.map((filter) => (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-sm font-medium", children: filter.label }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: filter.options.map((option) => {
                                                             const active = activeFilters[filter.id] === option.value;
                                                             return (_jsx(Button, { type: "button", size: "sm", variant: active ? 'default' : 'outline', onClick: () => changeFilter(filter.id, active ? undefined : option.value), children: option.label }, option.value));
-                                                        }) })] }, filter.id))), _jsx(Button, { type: "button", variant: "ghost", size: "sm", disabled: activeFilterCount === 0, onClick: resetFilters, children: labels.reset })] })] })) : null] }), _jsxs("div", { className: "flex items-center gap-2", children: [toolbarActions, _jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { children: [labels.viewColumns, _jsx(ChevronDown, { className: "size-4" })] }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuLabel, { children: labels.columns }), _jsx(DropdownMenuSeparator, {}), columns.map((column) => (_jsx(DropdownMenuCheckboxItem, { checked: !hiddenColumns.includes(column.id), closeOnClick: false, onCheckedChange: (checked) => toggleColumn(column.id, checked), children: column.label ?? column.id }, column.id)))] })] })] })] }), _jsx("div", { className: "border-border overflow-hidden rounded-xl border", children: _jsxs(Table, { children: [caption ? _jsx(TableCaption, { children: caption }) : null, _jsx(TableHeader, { children: _jsxs(TableRow, { children: [selectable ? (_jsx(TableHead, { className: "w-10", children: _jsx(Checkbox, { checked: allSelected, indeterminate: !allSelected && someSelected, onCheckedChange: toggleAll, "aria-label": labels.selectAll }) })) : null, visibleColumns.map((column) => (_jsx(TableHead, { className: column.className, children: column.header }, column.id))), hasRowActions ? (_jsx(TableHead, { className: "w-10", children: _jsx("span", { className: "sr-only", children: labels.rowActions }) })) : null] }) }), _jsx(TableBody, { children: rows.length ? (rows.map((row) => {
+                                                        }) })] }, filter.id))), _jsx(Button, { type: "button", variant: "ghost", size: "sm", disabled: activeFilterCount === 0, onClick: resetFilters, children: labels.reset })] })] })) : null] }), _jsxs("div", { className: "flex items-center gap-2", children: [toolbarActions, _jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { children: [labels.viewColumns, _jsx(ChevronDown, { className: "size-4" })] }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuLabel, { children: labels.columns }), _jsx(DropdownMenuSeparator, {}), columns.map((column) => (_jsx(DropdownMenuCheckboxItem, { checked: !hiddenColumns.includes(column.id), closeOnClick: false, onCheckedChange: (checked) => toggleColumn(column.id, checked), children: column.label ?? column.id }, column.id)))] })] })] })] }), _jsx("div", { className: "border-border overflow-hidden rounded-xl border", children: _jsxs(Table, { "aria-labelledby": caption === undefined && title ? headingId : undefined, children: [caption ? _jsx(TableCaption, { children: caption }) : null, _jsx(TableHeader, { children: _jsxs(TableRow, { children: [selectable ? (_jsx(TableHead, { className: "w-10", children: _jsx(Checkbox, { checked: allSelected, indeterminate: !allSelected && someSelected, onCheckedChange: toggleAll, "aria-label": labels.selectAll }) })) : null, visibleColumns.map((column) => (_jsx(TableHead, { className: column.className, children: column.header }, column.id))), hasRowActions ? (_jsx(TableHead, { className: "w-10", children: _jsx("span", { className: "sr-only", children: labels.rowActions }) })) : null] }) }), _jsx(TableBody, { children: rows.length ? (rows.map((row) => {
                                 const id = getRowId(row);
                                 const isSelected = selected.includes(id);
                                 const actions = rowActions?.(row) ?? [];