@hackcove/ui-react 0.0.0-stage → 0.8.1

package/dist/OutlineRegion.d.ts

@@ -0,0 +1,43 @@
+import type { HTMLAttributes, ImgHTMLAttributes, ReactElement, ReactNode } from "react";
+import type { Unstyled } from "./props.js";
+/** A box in a picture's own units (an image's pixels): its top-left corner and its size. */
+export type RegionRect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/**
+ * An accent outline over one area of a picture, such as a screenshot's ignored or flagged region.
+ * `rect` is in the picture's own units and `within` is the picture's full size in the same units;
+ * the box is placed in percent of them, so it sits right at any scale. Put it in a `RegionFrame`,
+ * over the picture. `label` is a small tag in its top-left
+ * corner; `hatched` stripes the inside, for an area that is left out. It takes no pointer events,
+ * so it never blocks the picture or a layer drawn over it.
+ */
+export declare function OutlineRegion({ rect, within, label, hatched, ...rest }: {
+    /** The area, in the picture's own units. */
+    rect: RegionRect;
+    /** The picture's full size, in the same units as `rect`. */
+    within: {
+        width: number;
+        height: number;
+    };
+    /** A short tag in the top-left corner: where the area came from, or what it is. */
+    label?: ReactNode;
+    /** Stripes the inside, for an area left out (ignored, masked). */
+    hatched?: boolean | undefined;
+} & Unstyled<Omit<HTMLAttributes<HTMLDivElement>, "children">>): ReactElement;
+/**
+ * A picture drawn full width with a hairline edge, and `children` laid over it: the
+ * `OutlineRegion`s that mark its areas. Every other prop goes to the `<img>` (`onLoad`, `loading`,
+ * `data-*`), so the app can read the picture's own size for `within`.
+ */
+export declare function RegionFrame({ src, alt, children, ...rest }: {
+    /** The picture. */
+    src: string;
+    /** What the picture shows; `""` for one that only decorates. */
+    alt: string;
+    /** The `OutlineRegion`s over the picture. */
+    children?: ReactNode;
+} & Unstyled<Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "children">>): ReactElement;

package/dist/OutlineRegion.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Thin accent stripes, drawn in the box's own colour, for an area that is left out. */
+const HATCH = "absolute inset-0 opacity-40 bg-[repeating-linear-gradient(45deg,currentColor_0_1px,transparent_1px_6px)]";
+/**
+ * An accent outline over one area of a picture, such as a screenshot's ignored or flagged region.
+ * `rect` is in the picture's own units and `within` is the picture's full size in the same units;
+ * the box is placed in percent of them, so it sits right at any scale. Put it in a `RegionFrame`,
+ * over the picture. `label` is a small tag in its top-left
+ * corner; `hatched` stripes the inside, for an area that is left out. It takes no pointer events,
+ * so it never blocks the picture or a layer drawn over it.
+ */
+export function OutlineRegion({ rect, within, label, hatched = false, ...rest }) {
+    return (_jsxs("div", { ...rest, className: "pointer-events-none absolute border-2 border-violet-600 text-violet-600", style: {
+            left: `${(rect.x / within.width) * 100}%`,
+            top: `${(rect.y / within.height) * 100}%`,
+            width: `${(rect.width / within.width) * 100}%`,
+            height: `${(rect.height / within.height) * 100}%`,
+        }, children: [hatched && _jsx("span", { "aria-hidden": "true", className: HATCH }), label != null && (_jsx("span", { className: "absolute top-0 left-0 bg-violet-600 px-1 text-xs leading-tight text-violet-50", children: label }))] }));
+}
+/**
+ * A picture drawn full width with a hairline edge, and `children` laid over it: the
+ * `OutlineRegion`s that mark its areas. Every other prop goes to the `<img>` (`onLoad`, `loading`,
+ * `data-*`), so the app can read the picture's own size for `within`.
+ */
+export function RegionFrame({ src, alt, children, ...rest }) {
+    return (_jsxs("div", { className: "relative border border-slate-200", children: [_jsx("img", { ...rest, src: src, alt: alt, className: "block w-full" }), children] }));
+}

package/dist/PageFade.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+import type { Unstyled } from "./props.js";
+/**
+ * The page's content area, named for the View Transitions API so a route change cross-fades it
+ * while the frame around it (header, footer) stays put. Wrap what changes between pages, once per
+ * page: two on one page need a different `name` each, or the browser skips the transition.
+ * The fade runs only when the navigation is wrapped in a view transition: `startPageTransition`,
+ * or a router's own option (TanStack Router `viewTransition`, React Router's `viewTransition` prop,
+ * Astro's `ClientRouter`). Otherwise, or where the browser has no View Transitions, it renders
+ * and behaves as a plain `<div>`. A `view-transition-name` makes the div a stacking context, so a
+ * dropdown inside it cannot rise above a sticky header outside it: portal overlays to the body. Under `prefers-reduced-motion: reduce` this content swaps with no fade; a router's own
+ * transition of the rest of the page is the router's to quiet.
+ */
+export declare function PageFade({ name, children, ...rest }: {
+    /** The view-transition name, a CSS identifier (letters, digits, `-`, `_`). */
+    name?: string;
+    children: ReactNode;
+} & Unstyled<HTMLAttributes<HTMLDivElement>>): ReactElement;
+/**
+ * Run `update` inside a view transition, so a `PageFade` cross-fades. `update` is a synchronous
+ * state change, flushed at once as the browser needs the new DOM; for a router's navigation, which
+ * is async, use the router's own view-transition option instead. Where the browser has
+ * no View Transitions, or the user prefers reduced motion, `update` just runs. Call it from an event
+ * handler, not during render.
+ */
+export declare function startPageTransition(update: () => void): void;

package/dist/PageFade.js

@@ -0,0 +1,39 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { flushSync } from "react-dom";
+const DEFAULT_NAME = "hc-page";
+// The one place the View Transitions pseudo-elements can be styled: a stylesheet, as Tailwind
+// classes cannot reach `::view-transition-*`. The browser's own cross-fade does the fading; this
+// names the element and, under reduced motion, switches the animations off so the content swaps.
+// No colour in it. Where the API is missing the rules are never matched.
+const css = (name) => `[data-page-fade="${name}"]{view-transition-name:${name}}
+@media (prefers-reduced-motion:reduce){::view-transition-group(${name}),::view-transition-old(${name}),::view-transition-new(${name}){animation:none}}`;
+/**
+ * The page's content area, named for the View Transitions API so a route change cross-fades it
+ * while the frame around it (header, footer) stays put. Wrap what changes between pages, once per
+ * page: two on one page need a different `name` each, or the browser skips the transition.
+ * The fade runs only when the navigation is wrapped in a view transition: `startPageTransition`,
+ * or a router's own option (TanStack Router `viewTransition`, React Router's `viewTransition` prop,
+ * Astro's `ClientRouter`). Otherwise, or where the browser has no View Transitions, it renders
+ * and behaves as a plain `<div>`. A `view-transition-name` makes the div a stacking context, so a
+ * dropdown inside it cannot rise above a sticky header outside it: portal overlays to the body. Under `prefers-reduced-motion: reduce` this content swaps with no fade; a router's own
+ * transition of the rest of the page is the router's to quiet.
+ */
+export function PageFade({ name = DEFAULT_NAME, children, ...rest }) {
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: css(name) }), _jsx("div", { ...rest, "data-page-fade": name, children: children })] }));
+}
+/**
+ * Run `update` inside a view transition, so a `PageFade` cross-fades. `update` is a synchronous
+ * state change, flushed at once as the browser needs the new DOM; for a router's navigation, which
+ * is async, use the router's own view-transition option instead. Where the browser has
+ * no View Transitions, or the user prefers reduced motion, `update` just runs. Call it from an event
+ * handler, not during render.
+ */
+export function startPageTransition(update) {
+    const reduce = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+    if (reduce || typeof document.startViewTransition !== "function") {
+        update();
+        return;
+    }
+    // A skipped transition (a second one starting, a hidden tab) rejects `ready`; the update still ran.
+    document.startViewTransition(() => flushSync(update)).ready.catch(() => { });
+}

package/dist/PageHeader.d.ts

@@ -0,0 +1,24 @@
+import type { ReactElement, ReactNode } from "react";
+import type { Passthrough } from "./props.js";
+export type PageHeaderProps = {
+    /** A `Breadcrumbs` above the title. */
+    breadcrumbs?: ReactNode;
+    /** The page's `h1`. */
+    title: ReactNode;
+    /** A muted line under the title. */
+    subtitle?: ReactNode;
+    /** Right of the title on `sm` and up, below it on a phone. */
+    actions?: ReactNode;
+    /** A `Tabs variant="pill"` (or similar) under the title. */
+    tabs?: ReactNode;
+};
+/** The header block without its bottom margin; PageHeader adds the margin (a `Stack` child drops it). */
+export declare function PageHeaderContent({ breadcrumbs, title, subtitle, actions, tabs, className, ...rest }: PageHeaderProps & Passthrough & {
+    className?: string;
+}): ReactElement;
+/**
+ * The top of a page: breadcrumbs, title, subtitle, actions and tabs. Its fixed bottom margin puts
+ * every page's first block at the same y; as a direct child of a `Stack` it has none, so the Stack's
+ * gap is the only space under it.
+ */
+export declare function PageHeader(props: PageHeaderProps & Passthrough): ReactElement;

package/dist/PageHeader.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HeaderText, PageHeading } from "./typography.js";
+/** The header block without its bottom margin; PageHeader adds the margin (a `Stack` child drops it). */
+export function PageHeaderContent({ breadcrumbs, title, subtitle, actions, tabs, className, ...rest }) {
+    return (_jsxs("div", { ...rest, "data-page-header": "", className: className, children: [breadcrumbs && _jsx("div", { className: "mb-2", children: breadcrumbs }), _jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(PageHeading, { children: title }), subtitle && (_jsx("div", { className: "mt-1", children: _jsx(HeaderText, { children: subtitle }) }))] }), actions && _jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions })] }), tabs && _jsx("div", { className: "mt-4", children: tabs })] }));
+}
+/**
+ * The top of a page: breadcrumbs, title, subtitle, actions and tabs. Its fixed bottom margin puts
+ * every page's first block at the same y; as a direct child of a `Stack` it has none, so the Stack's
+ * gap is the only space under it.
+ */
+export function PageHeader(props) {
+    return _jsx(PageHeaderContent, { ...props, className: "mb-8" });
+}

package/dist/PageLayouts.d.ts

@@ -0,0 +1,130 @@
+import { type ComponentPropsWithoutRef, type ReactElement, type ReactNode } from "react";
+import { type PageHeaderProps } from "./PageHeader.js";
+import { type StackGap } from "./Stack.js";
+import type { Passthrough, Unstyled } from "./props.js";
+/** A list page: header, an optional `filters` slot, then the list, or `empty` when `isEmpty`. */
+export declare function ListLayout({ filters, empty, isEmpty, children, breadcrumbs, title, subtitle, actions, tabs, ...rest }: PageHeaderProps & {
+    /** A row between the header and the list, e.g. a `FilterGroup` or a `SearchInput`. */
+    filters?: ReactNode;
+    /** Shown in place of `children` when `isEmpty`. */
+    empty?: ReactNode;
+    /** Show `empty` instead of `children`. */
+    isEmpty?: boolean;
+    children?: ReactNode;
+} & Passthrough): ReactElement;
+/** A detail page: header, then `children` (two thirds from `lg`) beside `aside` (one third), which stacks below on a smaller screen. */
+export declare function DetailLayout({ aside, children, breadcrumbs, title, subtitle, actions, tabs, ...rest }: PageHeaderProps & {
+    /** The side column: one third from `lg`, below `children` on a smaller screen. */
+    aside: ReactNode;
+    children: ReactNode;
+} & Passthrough): ReactElement;
+/** A form page: header (no header `actions`), then a `max-w-3xl` column that starts at the Container's left edge (it is not re-centred), with an `actions` row at the end. Other props go on the `<form>`. */
+export declare function FormLayout({ actions, children, breadcrumbs, title, subtitle, tabs, ...form }: Omit<PageHeaderProps, "actions"> & {
+    /** The row at the end of the form: its submit and cancel buttons. */
+    actions?: ReactNode;
+    children: ReactNode;
+} & Unstyled<Omit<ComponentPropsWithoutRef<"form">, "title">>): ReactElement;
+/**
+ * A text page: header, then `children` stacked `gap` apart (`md` by default), all in one `narrow`
+ * (`max-w-3xl`) reading column that starts at the Container's left edge (it is not re-centred, so
+ * the title does not jump). Unlike `FormLayout` the header sits inside the column, so its `actions`
+ * stay beside the text instead of at the Container's far edge.
+ */
+export declare function ProseLayout({ gap, children, breadcrumbs, title, subtitle, actions, tabs, ...rest }: PageHeaderProps & {
+    /**
+     * The space between blocks: `xs` gap-2, `sm` gap-4, `md` gap-6, `lg` gap-8, `xl` gap-12 (gap-16 from `sm`).
+     * @default md
+     */
+    gap?: StackGap | undefined;
+    children?: ReactNode;
+} & Passthrough): ReactElement;
+declare const COLUMNS: {
+    readonly 2: "lg:grid-cols-2";
+    readonly 3: "lg:grid-cols-3";
+    readonly 4: "lg:grid-cols-4";
+};
+/** `columns="auto"` fits as many cards per row as the width allows, none narrower than this. */
+declare const AUTO_MIN_WIDTH: {
+    readonly sm: "grid-cols-[repeat(auto-fill,minmax(12rem,1fr))]";
+    readonly md: "grid-cols-[repeat(auto-fill,minmax(17rem,1fr))]";
+};
+type CardGridProps = ({
+    /**
+     * Cards per row from `lg` (one on a phone, two from `sm`), or `auto` for as many as fit.
+     * @default 3
+     */
+    columns?: keyof typeof COLUMNS | undefined;
+    /** With `columns="auto"`, the narrowest a card gets: `md` 17rem or `sm` 12rem. */
+    minWidth?: undefined;
+} | {
+    /**
+     * Cards per row from `lg` (one on a phone, two from `sm`), or `auto` for as many as fit.
+     * @default 3
+     */
+    columns: "auto";
+    /**
+     * With `columns="auto"`, the narrowest a card gets: `md` 17rem or `sm` 12rem.
+     * @default md
+     */
+    minWidth?: keyof typeof AUTO_MIN_WIDTH | undefined;
+}) & {
+    /** `start` keeps each card its own height; the default stretches every card to the tallest in its row. */
+    align?: "stretch" | "start" | undefined;
+    /** `ul` makes the grid a list: each child is wrapped in an `<li>`. Default `div`. */
+    as?: "div" | "ul" | undefined;
+    children: ReactNode;
+} & Passthrough;
+/**
+ * A responsive grid of tiles: one column on a phone, two from `sm`, `columns` from `lg`.
+ * `columns="auto"` instead fits as many per row as the width allows, each at least `minWidth` wide:
+ * `md` (17rem, the default) or `sm` (12rem). `align="start"` keeps each card its own height
+ * instead of stretching it to the tallest in its row. `as="ul"` makes it a list of cards for a
+ * screen reader: the grid is a `<ul>` and each child is wrapped in an `<li>`, still stretched.
+ */
+export declare function CardGrid({ columns, minWidth, align, as: Tag, children, ...rest }: CardGridProps): ReactElement;
+/**
+ * A `rail` of links beside the `children` canvas, in the Container the shell already gives every
+ * page (a plain `<AppShell>`, no `bleed`): the rail starts at the header logo's x and the canvas
+ * ends at the header's right edge. The rail has no background and no border, so it is a list of
+ * links on the page; a `Tabs variant="pill" orientation="vertical"` is its content. From `md` it is `w-56` with
+ * the canvas filling the rest; below `md` it stacks above the canvas. A long rail sets `railLabel`:
+ * below `md` it then folds behind a disclosure of that name, closed, so the page comes first on a
+ * phone, and from `md` it is the same rail. Upgrading from 0.2: the rail no longer has a fill, a
+ * border or a fixed height, and it no longer sits beside the canvas on a phone.
+ */
+export declare function SidebarLayout({ rail, railLabel, children, ...rest }: {
+    /** The links beside the canvas, usually a `Tabs variant="pill" orientation="vertical"`. */
+    rail: ReactNode;
+    /** Folds the rail behind a disclosure with this name below `md` (a long rail). Left out, the rail is always open. */
+    railLabel?: string | undefined;
+    children: ReactNode;
+} & Passthrough): ReactElement;
+/**
+ * Edge-to-edge `children` with an optional right `panel` (`lg:w-72`) that stacks below on a smaller
+ * screen. Render it in `<AppShell bleed>`. It deliberately breaks the shared left edge: a viewer
+ * that needs the whole width has no Container of its own, so `children` start at the viewport's
+ * left edge. `padded` gives them the Container's padding instead (`px-4`, `sm:px-6`, `py-8`), for
+ * a page of ordinary content beside a full-height `panel`. A `bar` is a `StickyBar` above both: the
+ * full width, on the surface with a bottom line, sticking under AppShell's header as the page scrolls.
+ */
+export declare function FullBleedLayout({ bar, panel, padded, children, ...rest }: {
+    /** A full-width row above `children` and `panel` that sticks under the header, e.g. a viewer's title and actions. `padded` does not pad it. */
+    bar?: ReactNode;
+    /** A side column on the right (`lg:w-72`) on a tinted surface; below `lg` it stacks under `children`. */
+    panel?: ReactNode;
+    /**
+     * Pads `children` as the Container pads every other page. Off, they run to the viewport's edges.
+     * A notice in the column is a plain `Callout` in a `Stack`, never a `Callout banner`.
+     */
+    padded?: boolean | undefined;
+    children: ReactNode;
+} & Passthrough): ReactElement;
+/** A narrow card (`max-w-md`) centred in the Container at a fixed offset from the top, for sign-in, landing, not-found and error pages. The one layout that does not share the left edge. */
+export declare function CenteredLayout({ title, subtitle, children, ...rest }: {
+    /** The card's `h1`. */
+    title: ReactNode;
+    /** A muted line under the title. */
+    subtitle?: ReactNode;
+    children?: ReactNode;
+} & Passthrough): ReactElement;
+export {};

package/dist/PageLayouts.js

@@ -0,0 +1,86 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, } from "react";
+import { Card } from "./Card.js";
+import { cx, focusRing } from "./cx.js";
+import { PageHeader, PageHeaderContent } from "./PageHeader.js";
+import { STACK_WIDTH, Stack } from "./Stack.js";
+import { StickyBar } from "./StickyBar.js";
+// Compositions of the layout foundation. None sets a page width or outer padding of its own; the
+// ones that narrow their content do it inside the Container they are rendered in.
+/** A list page: header, an optional `filters` slot, then the list, or `empty` when `isEmpty`. */
+export function ListLayout({ filters, empty, isEmpty = false, children, breadcrumbs, title, subtitle, actions, tabs, ...rest }) {
+    return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { breadcrumbs: breadcrumbs, title: title, subtitle: subtitle, actions: actions, tabs: tabs }), _jsxs(Stack, { ...rest, children: [filters, isEmpty ? empty : children] })] }));
+}
+/** A detail page: header, then `children` (two thirds from `lg`) beside `aside` (one third), which stacks below on a smaller screen. */
+export function DetailLayout({ aside, children, breadcrumbs, title, subtitle, actions, tabs, ...rest }) {
+    return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { breadcrumbs: breadcrumbs, title: title, subtitle: subtitle, actions: actions, tabs: tabs }), _jsxs("div", { ...rest, className: "grid gap-6 lg:grid-cols-3", children: [_jsx("div", { className: "min-w-0 lg:col-span-2", children: _jsx(Stack, { children: children }) }), _jsx("aside", { className: "min-w-0", children: _jsx(Stack, { children: aside }) })] })] }));
+}
+/** A form page: header (no header `actions`), then a `max-w-3xl` column that starts at the Container's left edge (it is not re-centred), with an `actions` row at the end. Other props go on the `<form>`. */
+export function FormLayout({ actions, children, breadcrumbs, title, subtitle, tabs, ...form }) {
+    return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { breadcrumbs: breadcrumbs, title: title, subtitle: subtitle, tabs: tabs }), _jsx("form", { ...form, className: "max-w-3xl", children: _jsxs(Stack, { children: [children, actions && _jsx("div", { className: "flex flex-wrap items-center gap-2", children: actions })] }) })] }));
+}
+/**
+ * A text page: header, then `children` stacked `gap` apart (`md` by default), all in one `narrow`
+ * (`max-w-3xl`) reading column that starts at the Container's left edge (it is not re-centred, so
+ * the title does not jump). Unlike `FormLayout` the header sits inside the column, so its `actions`
+ * stay beside the text instead of at the Container's far edge.
+ */
+export function ProseLayout({ gap = "md", children, breadcrumbs, title, subtitle, actions, tabs, ...rest }) {
+    return (_jsxs("div", { ...rest, className: STACK_WIDTH.narrow, children: [_jsx(PageHeader, { breadcrumbs: breadcrumbs, title: title, subtitle: subtitle, actions: actions, tabs: tabs }), _jsx(Stack, { gap: gap, children: children })] }));
+}
+const COLUMNS = {
+    2: "lg:grid-cols-2",
+    3: "lg:grid-cols-3",
+    4: "lg:grid-cols-4",
+};
+/** `columns="auto"` fits as many cards per row as the width allows, none narrower than this. */
+const AUTO_MIN_WIDTH = {
+    sm: "grid-cols-[repeat(auto-fill,minmax(12rem,1fr))]",
+    md: "grid-cols-[repeat(auto-fill,minmax(17rem,1fr))]",
+};
+/**
+ * A responsive grid of tiles: one column on a phone, two from `sm`, `columns` from `lg`.
+ * `columns="auto"` instead fits as many per row as the width allows, each at least `minWidth` wide:
+ * `md` (17rem, the default) or `sm` (12rem). `align="start"` keeps each card its own height
+ * instead of stretching it to the tallest in its row. `as="ul"` makes it a list of cards for a
+ * screen reader: the grid is a `<ul>` and each child is wrapped in an `<li>`, still stretched.
+ */
+export function CardGrid({ columns = 3, minWidth = "md", align = "stretch", as: Tag = "div", children, ...rest }) {
+    return (_jsx(Tag, { ...rest, ...(Tag === "ul" ? { role: "list" } : {}), className: cx("grid gap-4", columns === "auto"
+            ? AUTO_MIN_WIDTH[minWidth]
+            : cx("grid-cols-1 sm:grid-cols-2", COLUMNS[columns]), align === "start" && "items-start"), children: Tag === "ul"
+            ? Children.toArray(children).map((child, index) => (_jsx("li", { className: "grid", children: child }, isValidElement(child) ? child.key : index)))
+            : children }));
+}
+/**
+ * A `rail` of links beside the `children` canvas, in the Container the shell already gives every
+ * page (a plain `<AppShell>`, no `bleed`): the rail starts at the header logo's x and the canvas
+ * ends at the header's right edge. The rail has no background and no border, so it is a list of
+ * links on the page; a `Tabs variant="pill" orientation="vertical"` is its content. From `md` it is `w-56` with
+ * the canvas filling the rest; below `md` it stacks above the canvas. A long rail sets `railLabel`:
+ * below `md` it then folds behind a disclosure of that name, closed, so the page comes first on a
+ * phone, and from `md` it is the same rail. Upgrading from 0.2: the rail no longer has a fill, a
+ * border or a fixed height, and it no longer sits beside the canvas on a phone.
+ */
+export function SidebarLayout({ rail, railLabel, children, ...rest }) {
+    return (_jsxs("div", { ...rest, className: "flex flex-col gap-8 md:flex-row md:gap-10", children: [_jsx("aside", { className: "w-full shrink-0 md:w-56", children: railLabel === undefined ? (rail) : (_jsxs("details", { className: "group md:[&::details-content]:[content-visibility:visible]", children: [_jsxs("summary", { className: cx("flex cursor-pointer list-none items-center justify-between rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 select-none hover:bg-slate-50 md:hidden [&::-webkit-details-marker]:hidden", focusRing), children: [railLabel, _jsx("svg", { viewBox: "0 0 20 20", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: "shrink-0 text-slate-500 group-open:rotate-180", children: _jsx("path", { d: "M5 8l5 5 5-5" }) })] }), _jsx("div", { className: "mt-2 md:mt-0", children: rail })] })) }), _jsx("div", { className: "min-w-0 flex-1", children: children })] }));
+}
+/**
+ * Edge-to-edge `children` with an optional right `panel` (`lg:w-72`) that stacks below on a smaller
+ * screen. Render it in `<AppShell bleed>`. It deliberately breaks the shared left edge: a viewer
+ * that needs the whole width has no Container of its own, so `children` start at the viewport's
+ * left edge. `padded` gives them the Container's padding instead (`px-4`, `sm:px-6`, `py-8`), for
+ * a page of ordinary content beside a full-height `panel`. A `bar` is a `StickyBar` above both: the
+ * full width, on the surface with a bottom line, sticking under AppShell's header as the page scrolls.
+ */
+export function FullBleedLayout({ bar, panel, padded = false, children, ...rest }) {
+    const row = (_jsxs(_Fragment, { children: [_jsx("div", { className: cx("min-w-0 flex-1", padded && "px-4 py-8 sm:px-6"), children: children }), panel && (_jsx("aside", { className: "w-full shrink-0 border-t border-slate-200 bg-slate-50 p-4 lg:w-72 lg:border-t-0 lg:border-l", children: panel }))] }));
+    if (!bar) {
+        return (_jsx("div", { ...rest, className: "flex min-h-0 flex-1 flex-col lg:flex-row", children: row }));
+    }
+    return (_jsxs("div", { ...rest, className: "flex min-h-0 flex-1 flex-col", children: [_jsx(StickyBar, { children: bar }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col lg:flex-row", children: row })] }));
+}
+/** A narrow card (`max-w-md`) centred in the Container at a fixed offset from the top, for sign-in, landing, not-found and error pages. The one layout that does not share the left edge. */
+export function CenteredLayout({ title, subtitle, children, ...rest }) {
+    return (_jsx("div", { ...rest, className: "mx-auto w-full max-w-md pt-16", children: _jsx(Card, { as: "div", children: _jsxs(Stack, { children: [_jsx(PageHeaderContent, { title: title, subtitle: subtitle }), children] }) }) }));
+}

package/dist/Pill.d.ts

@@ -0,0 +1,53 @@
+import type { MouseEventHandler, ReactElement, ReactNode } from "react";
+import { type LinkRender } from "./link.js";
+import type { Passthrough } from "./props.js";
+export type PillTone = "slate" | "amber" | "emerald" | "blue" | "red" | "violet" | "sky";
+type PillBase = {
+    children: ReactNode;
+    /**
+     * The tint: `slate`, `amber`, `emerald`, `blue`, `red`, `violet` or `sky`.
+     * @default slate
+     */
+    tone?: PillTone;
+    /** A leading dot in the pill's own text colour. */
+    dot?: boolean;
+    /** A full pill shape in place of the rounded-md corners. */
+    round?: boolean;
+    /** The tooltip on hover, for a pill whose text is short or cut off: the full status, a date. */
+    title?: string | undefined;
+};
+type PillProps = PillBase & Passthrough & ({
+    href?: undefined;
+    render?: undefined;
+    external?: undefined;
+    onClick?: undefined;
+} | {
+    /** A Pill that is a button: runs `onClick`. Defaults to `type="button"`. */
+    onClick: MouseEventHandler<HTMLButtonElement>;
+    href?: undefined;
+    render?: undefined;
+    external?: undefined;
+} | ({
+    onClick?: undefined;
+    /** Opens in a new tab: adds `target="_blank"` and `rel="noreferrer"`. */
+    external?: boolean | undefined;
+} & ({
+    /** Makes the pill a link to this URL. */
+    href: string;
+    /** Draws the link with the app's own router `<Link>`: `(p) => <Link to="/flakes" {...p} />`. */
+    render?: LinkRender | undefined;
+} | {
+    /** Makes the pill a link to this URL. */
+    href?: string | undefined;
+    /** Draws the link with the app's own router `<Link>`: `(p) => <Link to="/flakes" {...p} />`. */
+    render: LinkRender;
+})));
+/**
+ * A small tinted label; `dot` adds a leading dot in the pill's own text colour, `round` swaps the
+ * rounded-md corners for a full pill shape. `href` makes it a link (a plain `<a>`, or with `render`
+ * the app's own router `<Link>`: `render={(p) => <Link to="/flakes" {...p} />}`; `external` opens a
+ * new tab) and `onClick` makes it a button, each with a hover dim and the focus ring. `title` is
+ * the native tooltip.
+ */
+export declare function Pill({ children, tone, dot, round, href, render, external, onClick, ...rest }: PillProps): ReactElement;
+export {};

package/dist/Pill.js

@@ -0,0 +1,34 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+import { renderLink } from "./link.js";
+const PILL_TONES = {
+    slate: "bg-slate-100 text-slate-600",
+    amber: "bg-amber-50 text-amber-700",
+    emerald: "bg-emerald-50 text-emerald-700",
+    blue: "bg-blue-50 text-blue-700",
+    red: "bg-red-50 text-red-900",
+    violet: "bg-violet-50 text-violet-700",
+    sky: "bg-sky-50 text-sky-700",
+};
+function pillClass({ tone, round, dot }, interactive) {
+    return cx(round ? "rounded-full" : "rounded-md", "px-1.5 py-0.5 text-xs font-medium", PILL_TONES[tone], dot && "inline-flex items-center gap-1", interactive && cx("transition hover:opacity-80", focusRing));
+}
+/**
+ * A small tinted label; `dot` adds a leading dot in the pill's own text colour, `round` swaps the
+ * rounded-md corners for a full pill shape. `href` makes it a link (a plain `<a>`, or with `render`
+ * the app's own router `<Link>`: `render={(p) => <Link to="/flakes" {...p} />}`; `external` opens a
+ * new tab) and `onClick` makes it a button, each with a hover dim and the focus ring. `title` is
+ * the native tooltip.
+ */
+export function Pill({ children, tone = "slate", dot = false, round = false, href, render, external = false, onClick, ...rest }) {
+    const isLink = href !== undefined || render !== undefined;
+    const className = pillClass({ tone, round, dot }, isLink || onClick !== undefined);
+    const content = (_jsxs(_Fragment, { children: [dot && _jsx("span", { "aria-hidden": "true", className: "h-1.5 w-1.5 rounded-full bg-current" }), children] }));
+    if (isLink) {
+        return renderLink({ ...rest, href, render, external, className, children: content });
+    }
+    if (onClick) {
+        return (_jsx("button", { type: "button", ...rest, onClick: onClick, className: cx(className, "cursor-pointer"), children: content }));
+    }
+    return (_jsx("span", { ...rest, className: className, children: content }));
+}

package/dist/ProgressBar.d.ts

@@ -0,0 +1,32 @@
+import type { ReactElement } from "react";
+import type { Passthrough } from "./props.js";
+import type { Size } from "./size.js";
+/** The colour of a bar's fill. */
+export type BarTone = "accent" | "positive" | "warn" | "negative";
+/** 6px, 8px or 12px tall. */
+export type BarSize = Size;
+export declare const BAR_FILL: Record<BarTone, string>;
+export declare const BAR_TRACK: Record<BarSize, string>;
+/** `part` as a percent of `whole`, held to 0–100; 0 when either is not positive. */
+export declare function sharePercent(part: number, whole: number): number;
+/** The share as a whole percent for a screen reader: never 0 or 100 unless it truly is. */
+export declare function announcedPercent(part: number, whole: number): number;
+/**
+ * A thin horizontal bar with a filled share, for progress toward a total. `value` is held to
+ * 0–`max`. `label` names what it measures, for a screen reader, which also hears the percentage.
+ */
+export declare function ProgressBar({ value, max, label, tone, size, ...rest }: {
+    /** How far along, held to 0–`max`. */
+    value: number;
+    /** Defaults to 100. */
+    max?: number;
+    /** What the bar measures, for a screen reader, which also hears the percentage. */
+    label: string;
+    /** Defaults to "accent". */
+    tone?: BarTone;
+    /**
+     * The bar's height: `sm` 6px, `md` 8px, `lg` 12px.
+     * @default md
+     */
+    size?: BarSize;
+} & Passthrough): ReactElement;

package/dist/ProgressBar.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+export const BAR_FILL = {
+    accent: "bg-violet-600",
+    positive: "bg-emerald-600",
+    warn: "bg-amber-600",
+    negative: "bg-red-600",
+};
+export const BAR_TRACK = {
+    sm: "h-1.5",
+    md: "h-2",
+    lg: "h-3",
+};
+/** `part` as a percent of `whole`, held to 0–100; 0 when either is not positive. */
+export function sharePercent(part, whole) {
+    if (!(whole > 0) || !(part > 0))
+        return 0;
+    return Math.min(100, (part / whole) * 100);
+}
+/** The share as a whole percent for a screen reader: never 0 or 100 unless it truly is. */
+export function announcedPercent(part, whole) {
+    const share = sharePercent(part, whole);
+    return share <= 0 || share >= 100 ? share : Math.min(99, Math.max(1, Math.round(share)));
+}
+/**
+ * A thin horizontal bar with a filled share, for progress toward a total. `value` is held to
+ * 0–`max`. `label` names what it measures, for a screen reader, which also hears the percentage.
+ */
+export function ProgressBar({ value, max = 100, label, tone = "accent", size = "md", ...rest }) {
+    const share = sharePercent(value, max);
+    return (_jsx("div", { ...rest, role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": announcedPercent(value, max), className: cx("overflow-hidden rounded-full bg-slate-100", BAR_TRACK[size]), children: _jsx("div", { className: cx("h-full", BAR_FILL[tone]), style: { width: `${share}%` } }) }));
+}

package/dist/RadioGroup.d.ts

@@ -0,0 +1,48 @@
+import { type AriaAttributes, type ReactElement, type ReactNode } from "react";
+import { type RadioGroupProps as AriaRadioGroupProps } from "react-aria-components";
+import type { DataAttributes } from "./link.js";
+import type { Size } from "./size.js";
+/**
+ * A named group of radios, one chosen. The `label` names the group; an `error` is a red line under
+ * it with `role="alert"` and marks the group invalid. Give it `value` and `onChange`, or
+ * `defaultValue` and let it keep the choice. `name` posts the choice in a form.
+ * The arrow keys move between the radios and choose, and the group is one tab stop. `size` sizes
+ * every radio in the group, the same scale as a `Checkbox`.
+ */
+export declare function RadioGroup({ label, error, size, children, ...rest }: {
+    /** The group's visible name, above the options. */
+    label: ReactNode;
+    /** Shown under the options in red with `role="alert"`; marks the group invalid. Like `Field`'s `error`. */
+    error?: ReactNode;
+    /** The `value` of the chosen radio. */
+    value?: string;
+    /** The `value` chosen to begin with, when the group keeps its own choice. */
+    defaultValue?: string;
+    /** Called with the chosen radio's `value`. */
+    onChange?: (value: string) => void;
+    /** The form field the choice posts under. */
+    name?: string;
+    /** Disables every radio. */
+    isDisabled?: boolean;
+    /** Marks the choice required: the group is `aria-required`, and a form will not submit with no option chosen. */
+    isRequired?: boolean;
+    /**
+     * The size of every radio in the group: `sm` is `text-xs` and a smaller circle, `lg` `text-base`
+     * and a larger one.
+     * @default md
+     */
+    size?: Size;
+    /** The `Radio`s. */
+    children: ReactNode;
+} & DataAttributes & Pick<AriaRadioGroupProps, "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-details">): ReactElement;
+/** One option of a `RadioGroup`: a `label` and, under it, an optional `description`. Click the label or the circle. */
+export declare function Radio({ label, description, value, isDisabled, "aria-describedby": describedBy, ...rest }: {
+    /** The text beside the circle. */
+    label: ReactNode;
+    /** A muted line under the label that says more. It is the radio's `aria-describedby`. */
+    description?: ReactNode;
+    /** What the group's `value` becomes when this one is chosen. */
+    value: string;
+    /** Disables this radio alone. */
+    isDisabled?: boolean;
+} & DataAttributes & Pick<AriaAttributes, "aria-describedby">): ReactElement;