@hackcove/ui 0.2.2 → 0.2.4

package/dist/DateField.js

@@ -0,0 +1,77 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CalendarDate as CalendarDateClass, DateFormatter, } from "@internationalized/date";
+import { useContext, useEffect } from "react";
+import { DateField as AriaDateField, DateFieldStateContext, DateInput, DateSegment, FieldError, I18nProvider, Label, Text, } from "react-aria-components";
+import { cx, focusRing } from "./cx.js";
+import { toISODate } from "./isoDate.js";
+import { ShownInput, useShownDate } from "./shownDate.js";
+/** Fixed, whatever the browser's locale: DD/MM/YYYY and Monday-first weeks. */
+export const LOCALE = "en-GB";
+const MONTHS = new DateFormatter(LOCALE, { month: "long", timeZone: "UTC" });
+export const MONTH_OPTIONS = Array.from({ length: 12 }, (_, i) => ({
+    month: i + 1,
+    name: MONTHS.format(new Date(Date.UTC(2000, i, 1))),
+}));
+function readSegments(segments) {
+    const editable = segments.filter((segment) => segment.isEditable);
+    const blank = editable.filter((segment) => segment.isPlaceholder).length;
+    const none = { typed: "", impossible: null, partial: blank > 0 && blank < editable.length };
+    if (editable.length === 0 || blank > 0)
+        return none;
+    const part = (type) => editable.find((s) => s.type === type)?.value ?? 0;
+    const [day, month, year] = [part("day"), part("month"), part("year")];
+    if (day < 1 || month < 1 || year < 1)
+        return none;
+    const first = new CalendarDateClass(year, month, 1);
+    const days = first.calendar.getDaysInMonth(first);
+    if (day <= days)
+        return { ...none, typed: toISODate(first.set({ day })) };
+    return {
+        ...none,
+        impossible: `${MONTH_OPTIONS[month - 1]?.name ?? ""} ${year} has ${days} days.`,
+    };
+}
+/** One segment. The day segment also reports what the segments show to the field. */
+export function FieldSegment({ segment, onRead, }) {
+    const state = useContext(DateFieldStateContext);
+    const { typed, impossible, partial } = readSegments(state?.segments ?? []);
+    useEffect(() => onRead?.({ typed, impossible, partial }), [typed, impossible, partial, onRead]);
+    return (_jsx(DateSegment, { segment: segment, className: ({ isFocused, isPlaceholder, isInvalid, type }) => {
+            if (type === "literal")
+                return "text-slate-400";
+            let tone = "text-slate-900";
+            if (isFocused)
+                tone = "bg-violet-50 text-violet-600";
+            else if (isPlaceholder)
+                tone = "text-slate-400";
+            else if (isInvalid)
+                tone = "text-red-700";
+            return cx("rounded px-0.5 tabular-nums outline-none", tone);
+        }, children: ({ isPlaceholder, placeholder, text }) => (isPlaceholder ? placeholder.toUpperCase() : text) }));
+}
+export function frameClass({ isInvalid, isFocusWithin, isDisabled, }) {
+    let tone = "border-slate-300 bg-white text-slate-900 hover:border-violet-400";
+    if (isInvalid)
+        tone = "border-red-200 bg-red-50 text-red-700";
+    else if (isFocusWithin)
+        tone = "border-violet-600 bg-white text-slate-900";
+    return cx("flex w-full items-center rounded-lg border py-2 pl-2.5 text-sm transition", tone, isDisabled && "opacity-50");
+}
+/** The label, the description or the error line: the shared outside of both components. */
+export function Notes({ description, errorMessage, impossible, isInvalid, }) {
+    return (_jsxs(_Fragment, { children: [!isInvalid && description ? (_jsx(Text, { slot: "description", className: "text-xs text-slate-500", children: description })) : null, _jsx(FieldError, { className: "text-xs text-red-700", children: ({ validationErrors }) => errorMessage ?? impossible ?? validationErrors.join(" ") })] }));
+}
+export const labelClass = "text-sm font-medium text-slate-700";
+export const iconButtonClass = `inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-slate-500 transition hover:bg-slate-100 disabled:opacity-50 ${focusRing}`;
+/** A segmented DD / MM / YYYY date input. Values are `CalendarDate`s; `name` posts it as `YYYY-MM-DD`. */
+export function DateField({ label, description, errorMessage, className, value, defaultValue, onChange, name, ...rest }) {
+    const { inner, setInner, shown, impossible, onRead, validate, leaving, onBlurCapture, onLeft } = useShownDate({
+        value,
+        defaultValue,
+        onChange,
+        minValue: rest.minValue,
+        maxValue: rest.maxValue,
+        isRequired: rest.isRequired,
+    });
+    return (_jsx(I18nProvider, { locale: LOCALE, children: _jsx(AriaDateField, { ...rest, value: inner, onChange: setInner, validate: validate, ...(impossible ? { isInvalid: true } : {}), isReadOnly: leaving, onBlur: onLeft, granularity: "day", shouldForceLeadingZeros: true, className: cx("flex flex-col gap-1.5", className), children: ({ isInvalid }) => (_jsxs(_Fragment, { children: [label ? _jsx(Label, { className: labelClass, children: label }) : null, _jsx("div", { className: "contents", onBlurCapture: onBlurCapture, children: _jsx(DateInput, { className: (state) => cx(frameClass(state), "pr-2.5"), children: (segment) => (_jsx(FieldSegment, { segment: segment, ...(segment.type === "day" ? { onRead } : {}) })) }) }), _jsx(ShownInput, { name: name, shown: shown, isDisabled: rest.isDisabled }), _jsx(Notes, { description: description, errorMessage: errorMessage, impossible: impossible, isInvalid: isInvalid })] })) }) }));
+}

package/dist/DatePicker.d.ts

@@ -0,0 +1,8 @@
+import { type ReactElement } from "react";
+import { type DateFieldProps } from "./DateField.js";
+export type DatePickerProps = DateFieldProps & {
+    /** Open the calendar on mount. */
+    defaultOpen?: boolean;
+};
+/** A `DateField` with a calendar button that opens a month view in a popover. */
+export declare function DatePicker({ label, description, errorMessage, className, value, defaultValue, onChange, name, ...rest }: DatePickerProps): ReactElement;

package/dist/DatePicker.js

@@ -0,0 +1,27 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Button, DatePicker as AriaDatePicker, DateFieldContext, DateInput, Group, I18nProvider, Label, } from "react-aria-components";
+import { cx } from "./cx.js";
+import { CalendarPopover, calendarIcon } from "./DateCalendar.js";
+import { FieldSegment, LOCALE, Notes, frameClass, iconButtonClass, labelClass, } from "./DateField.js";
+import { ShownInput, useShownDate } from "./shownDate.js";
+/**
+ * The picker's input, read-only while `leaving`. Only the field: a read-only picker would also
+ * disable the calendar button that focus may be moving to.
+ */
+function PickerInput({ leaving, onLeft, children, }) {
+    const field = useContext(DateFieldContext);
+    return (_jsx(DateFieldContext.Provider, { value: { ...field, isReadOnly: leaving, onBlur: onLeft }, children: children }));
+}
+/** A `DateField` with a calendar button that opens a month view in a popover. */
+export function DatePicker({ label, description, errorMessage, className, value, defaultValue, onChange, name, ...rest }) {
+    const { inner, setInner, shown, impossible, onRead, validate, leaving, onBlurCapture, onLeft } = useShownDate({
+        value,
+        defaultValue,
+        onChange,
+        minValue: rest.minValue,
+        maxValue: rest.maxValue,
+        isRequired: rest.isRequired,
+    });
+    return (_jsx(I18nProvider, { locale: LOCALE, children: _jsx(AriaDatePicker, { ...rest, value: inner, onChange: setInner, validate: validate, ...(impossible ? { isInvalid: true } : {}), granularity: "day", shouldForceLeadingZeros: true, className: cx("flex flex-col gap-1.5", className), children: ({ isInvalid }) => (_jsxs(_Fragment, { children: [label ? _jsx(Label, { className: labelClass, children: label }) : null, _jsxs(Group, { className: (state) => cx(frameClass(state), "gap-1 pr-1"), children: [_jsx("div", { className: "contents", onBlurCapture: onBlurCapture, children: _jsx(PickerInput, { leaving: leaving, onLeft: onLeft, children: _jsx(DateInput, { className: "flex flex-1", children: (segment) => (_jsx(FieldSegment, { segment: segment, ...(segment.type === "day" ? { onRead } : {}) })) }) }) }), _jsx(Button, { className: iconButtonClass, children: calendarIcon })] }), _jsx(ShownInput, { name: name, shown: shown, isDisabled: rest.isDisabled }), _jsx(Notes, { description: description, errorMessage: errorMessage, impossible: impossible, isInvalid: isInvalid }), _jsx(CalendarPopover, {})] })) }) }));
+}

package/dist/Divider.d.ts

@@ -0,0 +1,3 @@
+import type { HTMLAttributes, ReactElement } from "react";
+/** A hairline rule in the theme's line colour: between a heading and its content, or above a footer. Spacing is the caller's, on `className`. */
+export declare function Divider({ className, ...rest }: Omit<HTMLAttributes<HTMLHRElement>, "children">): ReactElement;

package/dist/Divider.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/** A hairline rule in the theme's line colour: between a heading and its content, or above a footer. Spacing is the caller's, on `className`. */
+export function Divider({ className, ...rest }) {
+    return _jsx("hr", { className: cx("border-t border-slate-200/70", className), ...rest });
+}

package/dist/InlineLinks.d.ts

@@ -0,0 +1,11 @@
+import { type ReactElement, type ReactNode } from "react";
+export type InlineLinksSeparator = "·" | "•" | "none";
+/**
+ * A wrapping row of links, small text, joined by a separator. The separator is `aria-hidden` and
+ * leads each link but the first, held to its link so a wrap never leaves one at a line's end.
+ */
+export declare function InlineLinks({ separator, className, children, }: {
+    separator?: InlineLinksSeparator;
+    className?: string;
+    children: ReactNode;
+}): ReactElement;

package/dist/InlineLinks.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children } from "react";
+import { cx } from "./cx.js";
+import { Caption } from "./typography.js";
+/**
+ * A wrapping row of links, small text, joined by a separator. The separator is `aria-hidden` and
+ * leads each link but the first, held to its link so a wrap never leaves one at a line's end.
+ */
+export function InlineLinks({ separator = "·", className, children, }) {
+    return (_jsx("div", { className: cx("flex flex-wrap items-center gap-x-3 gap-y-1 text-sm", className), children: Children.toArray(children).map((child, index) => (_jsxs("span", { className: "inline-flex items-center gap-x-3 whitespace-nowrap", children: [index > 0 && separator !== "none" && _jsx(Caption, { "aria-hidden": "true", children: separator }), child] }, index))) }));
+}

package/dist/Markdown.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// A minimal, SAFE markdown renderer for the standup (headings / bullets / bold). No
+// A minimal, SAFE markdown renderer (headings / bullets / bold). No
 // dangerouslySetInnerHTML — text is rendered as React nodes, so it can't inject HTML.
 function inline(text) {
     return text.split(/(\*\*[^*]+\*\*)/g).map((p, i) => p.startsWith("**") && p.endsWith("**") ? (_jsx("strong", { className: "font-semibold text-slate-900", children: p.slice(2, -2) }, i)) : (_jsx("span", { children: p }, i)));

package/dist/PageHeader.d.ts

@@ -0,0 +1,19 @@
+import type { ReactElement, ReactNode } from "react";
+export type PageHeaderProps = {
+    /** A `Breadcrumbs` above the title. */
+    breadcrumbs?: ReactNode;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    /** Right of the title on `sm` and up, below it on a phone. */
+    actions?: ReactNode;
+    /** A `NavTabs` (or similar) under the title. */
+    tabs?: ReactNode;
+};
+/** The header block without its bottom margin; PageHeader adds the margin, PageTitle does not. */
+export declare function PageHeaderContent({ breadcrumbs, title, subtitle, actions, tabs, className, }: PageHeaderProps & {
+    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. */
+export declare function PageHeader({ className, ...props }: PageHeaderProps & {
+    className?: string;
+}): ReactElement;

package/dist/PageHeader.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+import { PageHeading, Subtitle } from "./typography.js";
+/** The header block without its bottom margin; PageHeader adds the margin, PageTitle does not. */
+export function PageHeaderContent({ breadcrumbs, title, subtitle, actions, tabs, className, }) {
+    return (_jsxs("div", { 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(Subtitle, { className: "mt-1", 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. */
+export function PageHeader({ className, ...props }) {
+    return _jsx(PageHeaderContent, { ...props, className: cx("mb-8", className) });
+}

package/dist/PageLayouts.d.ts

@@ -0,0 +1,73 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+import { type PageHeaderProps } from "./PageHeader.js";
+import { type StackGap } from "./Stack.js";
+/** A list page: header, an optional `filters` slot, then the list, or `empty` when `isEmpty`. */
+export declare function ListLayout({ filters, empty, isEmpty, children, ...header }: PageHeaderProps & {
+    filters?: ReactNode;
+    /** Shown in place of `children` when `isEmpty`. */
+    empty?: ReactNode;
+    isEmpty?: boolean;
+    children?: ReactNode;
+}): 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, ...header }: PageHeaderProps & {
+    aside: ReactNode;
+    children: ReactNode;
+}): 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, className, ...form }: Omit<PageHeaderProps, "actions"> & {
+    actions?: ReactNode;
+    children: ReactNode;
+} & 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. `className` goes on the column.
+ */
+export declare function ProseLayout({ gap, className, children, ...header }: PageHeaderProps & {
+    gap?: StackGap | undefined;
+    className?: string;
+    children?: ReactNode;
+}): ReactElement;
+declare const COLUMNS: {
+    readonly 2: "lg:grid-cols-2";
+    readonly 3: "lg:grid-cols-3";
+    readonly 4: "lg:grid-cols-4";
+};
+/** A responsive grid of tiles: one column on a phone, two from `sm`, `columns` from `lg`. */
+export declare function CardGrid({ columns, className, children, }: {
+    columns?: keyof typeof COLUMNS;
+    className?: string;
+    children: ReactNode;
+}): ReactElement;
+/**
+ * A full-height `rail` beside the `children` canvas. Render it in `<AppShell bleed>`: it fills what
+ * the shell's flex column leaves under the header, so no header height is written down. The rail is
+ * `md:w-60` and stacks above the canvas below `md`; the canvas keeps the Container's padding.
+ *
+ * It deliberately breaks the shared left edge from `md` up: a full-height rail needs the viewport's
+ * left edge, so the rail starts at x=0 and the canvas at the rail's width plus the Container's
+ * padding (264 at 1280), not at the header logo's x. Below `md` every layout agrees.
+ */
+export declare function SidebarLayout({ rail, children, }: {
+    rail: ReactNode;
+    children: ReactNode;
+}): 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 and add their own padding.
+ */
+export declare function FullBleedLayout({ panel, children, }: {
+    panel?: ReactNode;
+    children: ReactNode;
+}): 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, }: {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    children?: ReactNode;
+}): ReactElement;
+export {};

package/dist/PageLayouts.js

@@ -0,0 +1,63 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from "./ui.js";
+import { Container } from "./Container.js";
+import { cx } from "./cx.js";
+import { PageHeader, PageHeaderContent } from "./PageHeader.js";
+import { STACK_WIDTH, Stack } from "./Stack.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, ...header }) {
+    return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { ...header }), _jsxs(Stack, { 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, ...header }) {
+    return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { ...header }), _jsxs("div", { className: "grid gap-6 lg:grid-cols-3", children: [_jsx(Stack, { className: "min-w-0 lg:col-span-2", 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, className, ...form }) {
+    return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { breadcrumbs: breadcrumbs, title: title, subtitle: subtitle, tabs: tabs }), _jsx("form", { className: cx("max-w-3xl", className), ...form, 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. `className` goes on the column.
+ */
+export function ProseLayout({ gap, className, children, ...header }) {
+    return (_jsxs("div", { className: cx(STACK_WIDTH.narrow, className), children: [_jsx(PageHeader, { ...header }), _jsx(Stack, { gap: gap, children: children })] }));
+}
+const COLUMNS = {
+    2: "lg:grid-cols-2",
+    3: "lg:grid-cols-3",
+    4: "lg:grid-cols-4",
+};
+/** A responsive grid of tiles: one column on a phone, two from `sm`, `columns` from `lg`. */
+export function CardGrid({ columns = 3, className, children, }) {
+    return (_jsx("div", { className: cx("grid grid-cols-1 gap-4 sm:grid-cols-2", COLUMNS[columns], className), children: children }));
+}
+/**
+ * A full-height `rail` beside the `children` canvas. Render it in `<AppShell bleed>`: it fills what
+ * the shell's flex column leaves under the header, so no header height is written down. The rail is
+ * `md:w-60` and stacks above the canvas below `md`; the canvas keeps the Container's padding.
+ *
+ * It deliberately breaks the shared left edge from `md` up: a full-height rail needs the viewport's
+ * left edge, so the rail starts at x=0 and the canvas at the rail's width plus the Container's
+ * padding (264 at 1280), not at the header logo's x. Below `md` every layout agrees.
+ */
+export function SidebarLayout({ rail, children, }) {
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col md:flex-row", children: [_jsx("aside", { className: "w-full shrink-0 border-b border-slate-200 bg-slate-50 p-4 md:w-60 md:border-r md:border-b-0", children: rail }), _jsx("div", { className: "min-w-0 flex-1", children: _jsx(Container, { className: "py-8", 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 and add their own padding.
+ */
+export function FullBleedLayout({ panel, children, }) {
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col lg:flex-row", children: [_jsx("div", { className: "min-w-0 flex-1", 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 }))] }));
+}
+/** 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, }) {
+    return (_jsx("div", { 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/Stack.d.ts

@@ -0,0 +1,30 @@
+import { type ReactElement, type ReactNode } from "react";
+export type StackGap = "xs" | "sm" | "md" | "lg";
+export type StackWidth = "narrow" | "default" | "wide" | "full";
+/** `default` adds nothing: the Stack is as wide as its parent. */
+export declare const STACK_WIDTH: Record<StackWidth, string | undefined>;
+/**
+ * A vertical column of blocks a fixed `gap` apart: `xs` between lines of text (a heading and the
+ * line under it), `sm` inside a group, `md` (default) between blocks, `lg` between groups.
+ *
+ * `width` caps the column: `narrow` is a reading measure (`max-w-3xl`), `wide` is `max-w-5xl`, `full`
+ * is the parent's whole width and `default` sets nothing. A capped Stack starts at its parent's left
+ * edge (it is never re-centred), so its first line lines up with every other block on the page.
+ */
+export declare function Stack({ gap, width, as: Tag, className, children, ...rest }: {
+    gap?: StackGap | undefined;
+    width?: StackWidth | undefined;
+    as?: "div" | "section";
+    className?: string | undefined;
+    children?: ReactNode;
+    "aria-labelledby"?: string | undefined;
+}): ReactElement;
+/** A `<section>` Stack with an optional `SectionHeading` title (which names it) and `actions` beside it. */
+export declare function Section({ title, actions, gap, width, className, children, }: {
+    title?: ReactNode;
+    actions?: ReactNode;
+    gap?: StackGap | undefined;
+    width?: StackWidth | undefined;
+    className?: string;
+    children?: ReactNode;
+}): ReactElement;

package/dist/Stack.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cx } from "./cx.js";
+import { SectionHeading } from "./typography.js";
+const GAP = { xs: "gap-2", sm: "gap-4", md: "gap-6", lg: "gap-8" };
+/** `default` adds nothing: the Stack is as wide as its parent. */
+export const STACK_WIDTH = {
+    narrow: "max-w-3xl",
+    default: undefined,
+    wide: "max-w-5xl",
+    full: "w-full",
+};
+/**
+ * A vertical column of blocks a fixed `gap` apart: `xs` between lines of text (a heading and the
+ * line under it), `sm` inside a group, `md` (default) between blocks, `lg` between groups.
+ *
+ * `width` caps the column: `narrow` is a reading measure (`max-w-3xl`), `wide` is `max-w-5xl`, `full`
+ * is the parent's whole width and `default` sets nothing. A capped Stack starts at its parent's left
+ * edge (it is never re-centred), so its first line lines up with every other block on the page.
+ */
+export function Stack({ gap = "md", width = "default", as: Tag = "div", className, children, ...rest }) {
+    return (_jsx(Tag, { className: cx("flex flex-col", GAP[gap], STACK_WIDTH[width], className), ...rest, children: children }));
+}
+/** A `<section>` Stack with an optional `SectionHeading` title (which names it) and `actions` beside it. */
+export function Section({ title, actions, gap = "sm", width, className, children, }) {
+    const titleId = useId();
+    return (_jsxs(Stack, { as: "section", gap: gap, width: width, className: className, "aria-labelledby": title ? titleId : undefined, children: [(title || actions) && (_jsxs("div", { className: "flex items-center justify-between gap-4", children: [title && _jsx(SectionHeading, { id: titleId, children: title }), actions && _jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })] })), children] }));
+}

package/dist/TextLink.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+/** The classes of an inline text link, for a router's own <Link> that should look like one. */
+export declare const linkClass: string;
+type TextLinkProps = {
+    /** Opens in a new tab: adds `target="_blank"` and `rel="noreferrer"`. */
+    external?: boolean | undefined;
+} & ComponentPropsWithoutRef<"a"> & {
+    href: string;
+};
+/** An inline text link in the accent colour. Every anchor prop goes on the `<a>`. */
+export declare function TextLink({ external, className, children, ...rest }: TextLinkProps): ReactElement;
+export {};

package/dist/TextLink.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+/** The classes of an inline text link, for a router's own <Link> that should look like one. */
+export const linkClass = cx("rounded font-medium text-violet-600 underline-offset-2 transition-colors hover:text-violet-700", focusRing);
+/** An inline text link in the accent colour. Every anchor prop goes on the `<a>`. */
+export function TextLink({ external = false, className, children, ...rest }) {
+    return (_jsx("a", { className: cx(linkClass, className), ...(external ? { target: "_blank", rel: "noreferrer" } : {}), ...rest, children: children }));
+}

package/dist/Video.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement, VideoHTMLAttributes } from "react";
+/**
+ * A `<video>` with controls, full width and rounded; it loads metadata only, so the page does not
+ * pull the file until it is played. `src` is the app's own video; `captions` is a WebVTT file,
+ * offered as the default track. `children` is the fallback for a browser that cannot play it.
+ */
+export declare function Video({ src, captions, className, children, ...rest }: {
+    src: string;
+    captions?: string | undefined;
+} & Omit<VideoHTMLAttributes<HTMLVideoElement>, "src" | "controls">): ReactElement;

package/dist/Video.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/**
+ * A `<video>` with controls, full width and rounded; it loads metadata only, so the page does not
+ * pull the file until it is played. `src` is the app's own video; `captions` is a WebVTT file,
+ * offered as the default track. `children` is the fallback for a browser that cannot play it.
+ */
+export function Video({ src, captions, className, children, ...rest }) {
+    return (_jsxs("video", { controls: true, preload: "metadata", src: src, className: cx("w-full rounded-lg", className), ...rest, children: [captions && _jsx("track", { kind: "captions", src: captions, default: true }), children] }));
+}

package/dist/colourScheme.d.ts

@@ -0,0 +1,12 @@
+export type ColourScheme = "light" | "dark";
+/** Put `scheme` on `root` (the `<html>` element by default): the `dark` class, and `color-scheme` so native controls and scrollbars follow. */
+export declare function applyColourScheme(scheme: ColourScheme, root?: HTMLElement): void;
+/** The stored choice, else the system preference. `fallback` (default `"light"`) is for when neither is available: server rendering, or storage that throws with no `matchMedia`. */
+export declare function readColourScheme(fallback?: ColourScheme): ColourScheme;
+/** Remember `scheme` for the next visit. A storage error is swallowed, so private mode does not crash. */
+export declare function storeColourScheme(scheme: ColourScheme): void;
+/**
+ * JavaScript to inline in `<head>`, before first paint: applies the stored scheme, else the
+ * system one, to `<html>` as `applyColourScheme` does. Without it a light user sees a dark flash.
+ */
+export declare const colourSchemeScript: string;

package/dist/colourScheme.js

@@ -0,0 +1,40 @@
+const STORAGE_KEY = "hackcove:colour-scheme";
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+const isScheme = (value) => value === "light" || value === "dark";
+/** Put `scheme` on `root` (the `<html>` element by default): the `dark` class, and `color-scheme` so native controls and scrollbars follow. */
+export function applyColourScheme(scheme, root = document.documentElement) {
+    root.classList.toggle("dark", scheme === "dark");
+    root.style.colorScheme = scheme;
+}
+function storedScheme() {
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        return isScheme(stored) ? stored : undefined;
+    }
+    catch {
+        return undefined; // storage blocked: private mode, or no window at all
+    }
+}
+function systemScheme() {
+    if (typeof matchMedia !== "function")
+        return undefined;
+    return matchMedia(DARK_QUERY).matches ? "dark" : "light";
+}
+/** The stored choice, else the system preference. `fallback` (default `"light"`) is for when neither is available: server rendering, or storage that throws with no `matchMedia`. */
+export function readColourScheme(fallback = "light") {
+    return storedScheme() ?? systemScheme() ?? fallback;
+}
+/** Remember `scheme` for the next visit. A storage error is swallowed, so private mode does not crash. */
+export function storeColourScheme(scheme) {
+    try {
+        localStorage.setItem(STORAGE_KEY, scheme);
+    }
+    catch {
+        // Not remembered; the page still switches for this visit.
+    }
+}
+/**
+ * JavaScript to inline in `<head>`, before first paint: applies the stored scheme, else the
+ * system one, to `<html>` as `applyColourScheme` does. Without it a light user sees a dark flash.
+ */
+export const colourSchemeScript = `(function(){var r=document.documentElement,s;try{s=localStorage.getItem(${JSON.stringify(STORAGE_KEY)})}catch(e){}if(s!=="light"&&s!=="dark")s=typeof matchMedia==="function"?matchMedia(${JSON.stringify(DARK_QUERY)}).matches?"dark":"light":null;if(s){r.classList.toggle("dark",s==="dark");r.style.colorScheme=s}})()`;

package/dist/index.d.ts

@@ -1,11 +1,21 @@
 export { Card, EpicHeader, Empty, PageTitle, Pill, groupByEpic } from "./ui.js";
 export { Markdown } from "./Markdown.js";
+export { AppShell, appShellRootClass } from "./AppShell.js";
+export { Container } from "./Container.js";
+export { PageHeader, type PageHeaderProps } from "./PageHeader.js";
+export { CardGrid, CenteredLayout, DetailLayout, FormLayout, FullBleedLayout, ListLayout, ProseLayout, SidebarLayout, } from "./PageLayouts.js";
+export { Section, Stack, type StackGap, type StackWidth } from "./Stack.js";
 export { Button, buttonClass, type ButtonVariant } from "./Button.js";
 export { Avatar, avatarColourClass, initialsOf, type AvatarSize } from "./Avatar.js";
 export { Breadcrumbs, crumbLinkClass } from "./Breadcrumbs.js";
+export { BulletList } from "./BulletList.js";
 export { Callout, type CalloutTone } from "./Callout.js";
+export { Code } from "./Code.js";
+export { Divider } from "./Divider.js";
 export { Dialog, type DialogProps } from "./Dialog.js";
 export { IconButton } from "./IconButton.js";
+export { ColourSchemeToggle } from "./ColourSchemeToggle.js";
+export { applyColourScheme, colourSchemeScript, readColourScheme, storeColourScheme, type ColourScheme, } from "./colourScheme.js";
 export { NavTabs, navTabClass, type NavTab } from "./NavTabs.js";
 export { ToggleChip } from "./ToggleChip.js";
 export { FilterGroup } from "./FilterGroup.js";
@@ -15,8 +25,15 @@ export { CopyLine } from "./CopyLine.js";
 export { Field } from "./Field.js";
 export { FieldDialog, type FieldDialogProps } from "./FieldDialog.js";
 export { Input } from "./Input.js";
+export { InlineLinks, type InlineLinksSeparator } from "./InlineLinks.js";
 export { Kbd } from "./Kbd.js";
 export { KeyValue, KeyValueList } from "./KeyValueList.js";
 export { Select } from "./Select.js";
 export { Textarea } from "./Textarea.js";
-export { Body, BodyStrong, Caption, Display, Lead, ModalHeading, Overline, PageHeading, SectionHeading, SubsectionHeading, Subtitle, type TypographyColor, type TypographyProps, } from "./typography.js";
+export { Video } from "./Video.js";
+export { linkClass, TextLink } from "./TextLink.js";
+export { Body, BodyStrong, Caption, Display, Lead, ModalHeading, Overline, PageHeading, SectionHeading, SubsectionHeading, type SubsectionHeadingSize, Subtitle, type TypographyColor, type TypographyProps, } from "./typography.js";
+export { DateField, type DateFieldProps } from "./DateField.js";
+export { DatePicker, type DatePickerProps } from "./DatePicker.js";
+export { fromISODate, toISODate } from "./isoDate.js";
+export type { CalendarDate } from "@internationalized/date";

package/dist/index.js

@@ -1,11 +1,21 @@
 export { Card, EpicHeader, Empty, PageTitle, Pill, groupByEpic } from "./ui.js";
 export { Markdown } from "./Markdown.js";
+export { AppShell, appShellRootClass } from "./AppShell.js";
+export { Container } from "./Container.js";
+export { PageHeader } from "./PageHeader.js";
+export { CardGrid, CenteredLayout, DetailLayout, FormLayout, FullBleedLayout, ListLayout, ProseLayout, SidebarLayout, } from "./PageLayouts.js";
+export { Section, Stack } from "./Stack.js";
 export { Button, buttonClass } from "./Button.js";
 export { Avatar, avatarColourClass, initialsOf } from "./Avatar.js";
 export { Breadcrumbs, crumbLinkClass } from "./Breadcrumbs.js";
+export { BulletList } from "./BulletList.js";
 export { Callout } from "./Callout.js";
+export { Code } from "./Code.js";
+export { Divider } from "./Divider.js";
 export { Dialog } from "./Dialog.js";
 export { IconButton } from "./IconButton.js";
+export { ColourSchemeToggle } from "./ColourSchemeToggle.js";
+export { applyColourScheme, colourSchemeScript, readColourScheme, storeColourScheme, } from "./colourScheme.js";
 export { NavTabs, navTabClass } from "./NavTabs.js";
 export { ToggleChip } from "./ToggleChip.js";
 export { FilterGroup } from "./FilterGroup.js";
@@ -15,8 +25,14 @@ export { CopyLine } from "./CopyLine.js";
 export { Field } from "./Field.js";
 export { FieldDialog } from "./FieldDialog.js";
 export { Input } from "./Input.js";
+export { InlineLinks } from "./InlineLinks.js";
 export { Kbd } from "./Kbd.js";
 export { KeyValue, KeyValueList } from "./KeyValueList.js";
 export { Select } from "./Select.js";
 export { Textarea } from "./Textarea.js";
+export { Video } from "./Video.js";
+export { linkClass, TextLink } from "./TextLink.js";
 export { Body, BodyStrong, Caption, Display, Lead, ModalHeading, Overline, PageHeading, SectionHeading, SubsectionHeading, Subtitle, } from "./typography.js";
+export { DateField } from "./DateField.js";
+export { DatePicker } from "./DatePicker.js";
+export { fromISODate, toISODate } from "./isoDate.js";

package/dist/isoDate.d.ts

@@ -0,0 +1,5 @@
+import { CalendarDate } from "@internationalized/date";
+/** `"1990-05-17"` for `CalendarDate(1990, 5, 17)`; `""` for no date, so it drops into a form field. */
+export declare function toISODate(date: CalendarDate | null | undefined): string;
+/** The `CalendarDate` of a `"YYYY-MM-DD"` string; `null` for an empty, malformed or impossible one. */
+export declare function fromISODate(iso: string | null | undefined): CalendarDate | null;

package/dist/isoDate.js

@@ -0,0 +1,16 @@
+import { CalendarDate } from "@internationalized/date";
+const ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
+/** `"1990-05-17"` for `CalendarDate(1990, 5, 17)`; `""` for no date, so it drops into a form field. */
+export function toISODate(date) {
+    return date ? date.toString() : "";
+}
+/** The `CalendarDate` of a `"YYYY-MM-DD"` string; `null` for an empty, malformed or impossible one. */
+export function fromISODate(iso) {
+    const match = ISO_DATE.exec(iso ?? "");
+    if (!match)
+        return null;
+    const [year, month, day] = [Number(match[1]), Number(match[2]), Number(match[3])];
+    const date = new CalendarDate(year, month, day);
+    // CalendarDate constrains 1990-02-31 to 1990-02-28; a string that does not survive is impossible.
+    return date.toString() === iso ? date : null;
+}