@nibapp/ui 0.0.0-stage → 0.1.0

package/dist/components/meta-line.d.ts

@@ -0,0 +1,28 @@
+import { type ComponentProps, type ReactNode } from "react";
+/** What a whole line does when pressed (the turn's line opens its receipt). */
+export interface MetaLineAction {
+    /** What pressing it does ("Open the receipt"): the tooltip's last line and the button's description. */
+    readonly label: string;
+    readonly onClick: () => void;
+}
+export interface MetaLineProps extends Omit<ComponentProps<"span">, "children"> {
+    /** The facts, most important first: each child is one whole item. */
+    readonly children?: ReactNode;
+    /** The "·" between items; without it the caller spaces them (a `gap-x-*`), e.g. items with their own marks. */
+    readonly separated?: boolean;
+    /**
+     * The line is a button: pressing it does `action`, and its tooltip lists every item, the ones a
+     * narrow line drops too, then the action. Its items are text then (no controls inside a button).
+     */
+    readonly action?: MetaLineAction | undefined;
+}
+/**
+ * A line of facts ("Converged in 42s · 6 tools · $0.42 · ↓ 3.1k tokens") that never breaks inside a
+ * fact. Each child is one whole item, kept on one line, with a quiet "·" before every item but the
+ * first. When the line is too narrow, the items at its end wrap onto a second line that is clipped,
+ * so the line keeps its first facts whole and drops the last: put children in priority order. The
+ * first item truncates only when even it doesn't fit. CSS only (a one-line-high wrapping row with
+ * its overflow hidden): no measuring, no layout motion. Dropped items stay in the DOM, so a screen
+ * reader still reads the whole line; with an `action`, the tooltip shows them to the pointer too.
+ */
+export declare function MetaLine({ separated, action, className, children, ...props }: MetaLineProps): import("react").JSX.Element;

package/dist/components/meta-line.js

@@ -0,0 +1,36 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, Fragment, isValidElement, useId } from "react";
+import { cn } from "../lib/cn.js";
+import { Tooltip } from "./tooltip.js";
+/**
+ * A line of facts ("Converged in 42s · 6 tools · $0.42 · ↓ 3.1k tokens") that never breaks inside a
+ * fact. Each child is one whole item, kept on one line, with a quiet "·" before every item but the
+ * first. When the line is too narrow, the items at its end wrap onto a second line that is clipped,
+ * so the line keeps its first facts whole and drops the last: put children in priority order. The
+ * first item truncates only when even it doesn't fit. CSS only (a one-line-high wrapping row with
+ * its overflow hidden): no measuring, no layout motion. Dropped items stay in the DOM, so a screen
+ * reader still reads the whole line; with an `action`, the tooltip shows them to the pointer too.
+ */
+export function MetaLine({ separated = true, action, className, children, ...props }) {
+    const items = Children.toArray(children);
+    const classes = cn("flex h-lh min-w-0 flex-wrap items-center overflow-hidden", "*:shrink-0 *:whitespace-nowrap", 
+    // Alone on its line, the first item shrinks to it (no max-width here: a caller's own cap holds).
+    "[&>*:first-child]:min-w-0 [&>*:first-child]:shrink [&>*:first-child]:truncate", className);
+    const line = separated
+        ? items.map((item, index) => index === 0 ? (item) : (_jsxs("span", { children: [_jsx("span", { "aria-hidden": true, className: "whitespace-pre", children: " · " }), item] }, keyOf(item))))
+        : children;
+    if (action === undefined) {
+        return (_jsx("span", { "data-slot": "meta-line", className: classes, ...props, children: line }));
+    }
+    return _jsx(MetaLineButton, { action: action, items: items, className: classes, line: line });
+}
+function MetaLineButton({ action, items, className, line, }) {
+    const descriptionId = useId();
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { content: _jsxs("span", { className: "flex flex-col gap-0.5", children: [_jsx("span", { children: items.map((item, index) => (_jsxs(Fragment, { children: [index > 0 && " · ", item] }, keyOf(item)))) }), _jsx("span", { className: "opacity-70", children: action.label })] }), children: _jsx("button", { type: "button", "data-slot": "meta-line", "aria-describedby": descriptionId, onClick: action.onClick, className: cn(className, "rounded-xs text-start outline-none hover:text-fg focus-visible:ring-focus"), children: line }) }), _jsx("span", { id: descriptionId, hidden: true, children: action.label })] }));
+}
+function keyOf(item) {
+    if (isValidElement(item))
+        return item.key;
+    return typeof item === "string" ? item : null;
+}

package/dist/components/money-input.d.ts

@@ -0,0 +1,23 @@
+import { type AmountBounds } from "../lib/number-format.js";
+import { type InputProps } from "./input.js";
+export interface MoneyInputProps extends Omit<InputProps, "leading" | "trailing" | "type" | "min" | "max" | "step" | "value" | "defaultValue">, AmountBounds {
+    /** The text, when the caller keeps it (a slider writes into the field); otherwise the field keeps its own. */
+    readonly value?: string | undefined;
+    /** The amount the field starts with, written in the person's locale ("12.5", "12,5"); empty for `null`. */
+    readonly defaultAmount?: number | null | undefined;
+    /**
+     * On every edit, the amount typed in the person's locale within the bounds: the number, `null` for an
+     * empty field that `allowEmpty`, `undefined` for anything else.
+     */
+    readonly onAmountChange?: ((amount: number | null | undefined) => void) | undefined;
+    /** The ISO 4217 currency the amount is in ("EUR"); the provider's when left out. */
+    readonly currency?: string | undefined;
+}
+/**
+ * An amount field: its currency's symbol (`currency`, else the provider's) on the side the person's
+ * locale writes it ("$ 12.50", "12,50 €"), and the amount read in that locale (`parseAmount`: its digits, group and decimal
+ * marks) within `min`, `max`, `step` (1 for whole units) and `nonZero`, reported by `onAmountChange`.
+ * Text that isn't such an amount marks the field invalid unless `invalid` says otherwise. Whole
+ * non-negative steps get the numeric keyboard, everything else the decimal one.
+ */
+export declare function MoneyInput({ min, max, step, nonZero, allowEmpty, defaultAmount, onAmountChange, value, onValueChange, invalid, inputMode, currency, ...props }: MoneyInputProps): import("react").JSX.Element;

package/dist/components/money-input.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useFormatters } from "../i18n/provider.js";
+import { readAmount } from "../lib/number-format.js";
+import { Input } from "./input.js";
+/** An amount as the field shows it: the locale's digits and decimal mark, no grouping, nothing for none. */
+function amountText(amount, formatters) {
+    return amount === null || amount === undefined || !Number.isFinite(amount)
+        ? ""
+        : formatters.number(amount, { useGrouping: false, maximumFractionDigits: 20 });
+}
+/**
+ * An amount field: its currency's symbol (`currency`, else the provider's) on the side the person's
+ * locale writes it ("$ 12.50", "12,50 €"), and the amount read in that locale (`parseAmount`: its digits, group and decimal
+ * marks) within `min`, `max`, `step` (1 for whole units) and `nonZero`, reported by `onAmountChange`.
+ * Text that isn't such an amount marks the field invalid unless `invalid` says otherwise. Whole
+ * non-negative steps get the numeric keyboard, everything else the decimal one.
+ */
+export function MoneyInput({ min, max, step, nonZero, allowEmpty, defaultAmount, onAmountChange, value, onValueChange, invalid, inputMode, currency, ...props }) {
+    const formatters = useFormatters();
+    const [own, setOwn] = useState(() => amountText(defaultAmount, formatters));
+    const text = value ?? own;
+    const bounds = { min, max, step, nonZero, allowEmpty };
+    const { symbol, leading } = formatters.currencySymbol(currency);
+    const affix = (_jsx("span", { "aria-hidden": true, className: "text-fg-subtle", children: symbol }));
+    const whole = step !== undefined && Number.isInteger(step) && min !== undefined && min >= 0;
+    return (_jsx(Input, { inputMode: inputMode ?? (whole ? "numeric" : "decimal"), value: text, invalid: invalid ?? (text.trim() !== "" && readAmount(text, formatters.locale, bounds) === undefined), onValueChange: (next, details) => {
+            if (value === undefined)
+                setOwn(next);
+            onValueChange?.(next, details);
+            onAmountChange?.(readAmount(next, formatters.locale, bounds));
+        }, ...props, ...(leading ? { leading: affix } : { trailing: affix }) }));
+}

package/dist/components/native-select.d.ts

@@ -0,0 +1,120 @@
+import { type ComponentProps, type ReactNode, type Ref } from "react";
+import { type VariantProps } from "../lib/cn.js";
+declare const nativeSelectStyles: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+            select: string;
+            adornment: string;
+        };
+        md: {
+            root: string;
+            select: string;
+            adornment: string;
+        };
+        lg: {
+            root: string;
+            select: string;
+            adornment: string;
+        };
+    };
+    block: {
+        true: {
+            root: string;
+        };
+    };
+    leading: {
+        true: {};
+        false: {};
+    };
+}, {
+    root: string[];
+    select: string[];
+    adornment: string;
+    chevron: string[];
+}, undefined, {
+    size: {
+        sm: {
+            root: string;
+            select: string;
+            adornment: string;
+        };
+        md: {
+            root: string;
+            select: string;
+            adornment: string;
+        };
+        lg: {
+            root: string;
+            select: string;
+            adornment: string;
+        };
+    };
+    block: {
+        true: {
+            root: string;
+        };
+    };
+    leading: {
+        true: {};
+        false: {};
+    };
+}, {
+    root: string[];
+    select: string[];
+    adornment: string;
+    chevron: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            root: string;
+            select: string;
+            adornment: string;
+        };
+        md: {
+            root: string;
+            select: string;
+            adornment: string;
+        };
+        lg: {
+            root: string;
+            select: string;
+            adornment: string;
+        };
+    };
+    block: {
+        true: {
+            root: string;
+        };
+    };
+    leading: {
+        true: {};
+        false: {};
+    };
+}, {
+    root: string[];
+    select: string[];
+    adornment: string;
+    chevron: string[];
+}>>;
+export interface NativeSelectProps extends Omit<ComponentProps<"select">, "ref" | "size" | "multiple" | "value" | "defaultValue" | "className">, Omit<VariantProps<typeof nativeSelectStyles>, "leading"> {
+    readonly ref?: Ref<HTMLSelectElement>;
+    readonly value?: string;
+    readonly defaultValue?: string;
+    /** Fires with the chosen option's value. */
+    readonly onValueChange?: (value: string) => void;
+    /** Icon before the value (a globe for a language). */
+    readonly leading?: ReactNode;
+    /** Marks the field invalid outside of a <Field> (inside one, Field drives it). */
+    readonly invalid?: boolean;
+    /** Classes for the frame (width, margins…). */
+    readonly className?: string | undefined;
+}
+/**
+ * A select that is the platform's own: `<option>` children, the native keyboard and the phone's own
+ * picker, in the kit's field look (the Select trigger's chrome, chevron and sizes). Use it where the
+ * native list matters more than a styled one: a language switcher, a long list on the web for phones.
+ * Works inside <Field> for its label, description and validation.
+ */
+export declare function NativeSelect({ ref, size, block, leading, invalid, value, defaultValue, onValueChange, disabled, id, name, autoFocus, className, children, ...rest }: NativeSelectProps): import("react").JSX.Element;
+export {};

package/dist/components/native-select.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field as BaseField } from "@base-ui/react/field";
+import { ChevronsUpDown } from "lucide-react";
+import { useCallback } from "react";
+import { tv } from "../lib/cn.js";
+import { givenControlProps } from "../lib/control-props.js";
+import { fieldChrome } from "./input.js";
+const nativeSelectStyles = tv({
+    slots: {
+        // The frame wears the field's chrome; the select fills it, so a press anywhere on it opens the list.
+        root: [
+            "group/native-select relative inline-flex min-w-0 shrink-0 items-center",
+            fieldChrome,
+            "has-[select:focus]:border-border-strong has-[select:focus-visible]:ring-3",
+            "has-[select:disabled]:pointer-events-none has-[select:disabled]:opacity-45",
+        ],
+        select: [
+            "h-full w-full min-w-0 cursor-default appearance-none truncate bg-transparent text-fg outline-none",
+            // iOS zooms into a field whose text is under 16 px, and a finger needs 44 px: the select grows
+            // past the frame on touch screens, centred, so its picker opens from the whole hit area.
+            "pointer-coarse:h-11 pointer-coarse:text-[1rem]",
+        ],
+        adornment: "pointer-events-none absolute flex items-center text-fg-subtle [&_svg]:shrink-0",
+        chevron: [
+            "size-3.5 text-fg-subtle transition-colors duration-(--duration-fast)",
+            "group-hover/native-select:text-fg-muted group-has-[select:focus]/native-select:text-fg-muted",
+        ],
+    },
+    variants: {
+        size: {
+            sm: {
+                root: "h-7 rounded-md text-sm",
+                select: "ps-2 pe-6.5",
+                adornment: "[&_svg:not([class*='size-'])]:size-3.5",
+            },
+            md: {
+                root: "h-8 rounded-lg text-base",
+                select: "ps-2.5 pe-7.5",
+                adornment: "[&_svg:not([class*='size-'])]:size-4",
+            },
+            lg: {
+                root: "h-10 rounded-xl text-md",
+                select: "ps-3 pe-8.5",
+                adornment: "[&_svg:not([class*='size-'])]:size-4",
+            },
+        },
+        block: { true: { root: "flex w-full" } },
+        leading: { true: {}, false: {} },
+    },
+    compoundVariants: [
+        { size: "sm", leading: true, class: { select: "ps-7" } },
+        { size: "md", leading: true, class: { select: "ps-8.5" } },
+        { size: "lg", leading: true, class: { select: "ps-9.5" } },
+    ],
+    defaultVariants: { size: "md", leading: false },
+});
+const SIDE = {
+    sm: { start: "start-2", end: "end-1.5" },
+    md: { start: "start-2.5", end: "end-2" },
+    lg: { start: "start-3", end: "end-2.5" },
+};
+/**
+ * A select that is the platform's own: `<option>` children, the native keyboard and the phone's own
+ * picker, in the kit's field look (the Select trigger's chrome, chevron and sizes). Use it where the
+ * native list matters more than a styled one: a language switcher, a long list on the web for phones.
+ * Works inside <Field> for its label, description and validation.
+ */
+export function NativeSelect({ ref, size, block, leading, invalid, value, defaultValue, onValueChange, disabled, id, name, autoFocus, className, children, ...rest }) {
+    const resolvedSize = size ?? "md";
+    const styles = nativeSelectStyles({ size: resolvedSize, block, leading: leading !== undefined });
+    const side = SIDE[resolvedSize];
+    const setRef = useCallback((node) => {
+        const select = node instanceof HTMLSelectElement ? node : null;
+        if (typeof ref === "function")
+            ref(select);
+        else if (ref)
+            ref.current = select;
+    }, [ref]);
+    return (_jsxs("span", { "data-slot": "native-select", className: styles.root({ className }), children: [leading !== undefined && (_jsx("span", { "aria-hidden": true, className: styles.adornment({ className: side.start }), children: leading })), _jsx(BaseField.Control, { ref: setRef, ...givenControlProps({ value, defaultValue, disabled, id, name, autoFocus }), ...(onValueChange === undefined ? {} : { onValueChange: (next) => onValueChange(next) }), 
+                // Element form, as Textarea: Base UI merges its control props into the select, and the
+                // element's own props win, so `aria-invalid` is set only when given: an undefined one would
+                // hide a <Field>'s.
+                render: _jsx("select", { ...rest, ...(invalid === true ? { "aria-invalid": true } : {}), "data-slot": "native-select-control", className: styles.select(), children: children }) }), _jsx("span", { "aria-hidden": true, className: styles.adornment({ className: side.end }), children: _jsx(ChevronsUpDown, { className: styles.chevron() }) })] }));
+}

package/dist/components/page-trail.d.ts

@@ -0,0 +1,30 @@
+import { type ComponentProps, type ReactElement, type ReactNode } from "react";
+/** A place above the page: its name, and the link back to it. */
+export interface PageTrailPlace {
+    readonly label: string;
+    /** The link back as the host's router renders it (`<Link to="/projects" />`); it takes the label. */
+    readonly render?: ReactElement;
+    /** A plain link back, where there is no router. */
+    readonly href?: string;
+}
+export interface PageTrailProps extends Omit<ComponentProps<"nav">, "children"> {
+    /** The places this page sits in, outermost first; each is a link back. */
+    readonly places: readonly PageTrailPlace[];
+    /**
+     * This page: its name (the page's heading), or a control that names it (a team switch). Absent
+     * when the page's own content names it (an artifact's toolbar): the trail is then the way back
+     * alone ("‹ Artifacts").
+     */
+    readonly children?: ReactNode;
+}
+/**
+ * Where a page sits, in the title bar of a page inside a place ("Races › Fix the login bug"): the
+ * places above it as links back, then the page's own name as its heading. The way back is in sight
+ * and says where it goes, so nothing depends on Back or a gesture.
+ *
+ * It is a size container. In a narrow title bar the page's name matters most: the places fold first,
+ * into one back arrow to the nearest place (named by its tooltip and accessible name), and only then
+ * does the name truncate (its whole text in a tooltip). A place's name is never cut, and no "›" is
+ * left bare.
+ */
+export declare function PageTrail({ places, children, className, ...props }: PageTrailProps): import("react").JSX.Element;

package/dist/components/page-trail.js

@@ -0,0 +1,43 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Fragment } from "react";
+import { useUiStrings } from "../i18n/provider.js";
+import { cn } from "../lib/cn.js";
+import { buttonStyles } from "./button.js";
+import { Tooltip } from "./tooltip.js";
+/**
+ * Where a page sits, in the title bar of a page inside a place ("Races › Fix the login bug"): the
+ * places above it as links back, then the page's own name as its heading. The way back is in sight
+ * and says where it goes, so nothing depends on Back or a gesture.
+ *
+ * It is a size container. In a narrow title bar the page's name matters most: the places fold first,
+ * into one back arrow to the nearest place (named by its tooltip and accessible name), and only then
+ * does the name truncate (its whole text in a tooltip). A place's name is never cut, and no "›" is
+ * left bare.
+ */
+export function PageTrail({ places, children, className, ...props }) {
+    const t = useUiStrings().primitives;
+    const named = children !== undefined && children !== null;
+    const nearest = places.length - 1;
+    return (_jsx("nav", { "data-slot": "page-trail", "aria-label": t.trail, className: cn("@container/trail min-w-0 flex-1", className), ...props, children: _jsxs("ol", { className: "flex min-w-0 items-center gap-1 text-sm", children: [places.map((place, index) => (_jsxs(Fragment, { children: [_jsx("li", { className: index === nearest ? "flex shrink-0" : "hidden shrink-0 @[24rem]/trail:flex", children: _jsx(TrailLink, { place: place, arrow: index === nearest ? (named ? "narrow" : "always") : "never" }) }), (index < nearest || named) && (_jsx("li", { "aria-hidden": true, className: "hidden shrink-0 @[24rem]/trail:flex", children: _jsx(ChevronRight, { className: "size-3 text-fg-faint rtl:-scale-x-100" }) }))] }, place.label))), named && (_jsx("li", { "aria-current": "page", className: "flex min-w-0", children: typeof children === "string" ? (_jsx(Tooltip, { content: children, children: _jsx("h1", { className: "truncate font-medium text-fg", children: children }) })) : (children) }))] }) }));
+}
+/**
+ * A place's link. With a page name after it, it reads as the place's name and folds to a back arrow in a
+ * narrow title bar; alone, it is the back arrow and the name ("‹ Artifacts").
+ */
+function TrailLink({ place, arrow, }) {
+    const link = useRender({
+        defaultTagName: "a",
+        render: place.render,
+        props: {
+            ...(place.href === undefined ? {} : { href: place.href }),
+            "data-slot": "page-trail-link",
+            "aria-label": place.label,
+            className: buttonStyles({ variant: "quiet", size: "xs" }),
+            children: (_jsxs(_Fragment, { children: [arrow !== "never" && (_jsx(ChevronLeft, { "aria-hidden": true, className: arrow === "narrow" ? "rtl:-scale-x-100 @[24rem]/trail:hidden" : "rtl:-scale-x-100" })), _jsx("span", { className: arrow === "narrow" ? "hidden @[24rem]/trail:inline" : undefined, children: place.label })] })),
+        },
+    });
+    return _jsx(Tooltip, { content: place.label, children: link });
+}

package/dist/components/page.d.ts

@@ -0,0 +1,80 @@
+import type { ComponentProps, ReactNode } from "react";
+import { type VariantProps } from "../lib/cn.js";
+/**
+ * Page layout. A page picks one width; the gutter follows the
+ * page's own width (a container query), not the window's, because the sidebar and panes change the
+ * room a page has. Screens never set their own `max-w-*`, `mx-auto` or page padding.
+ */
+declare const pageColumnStyles: import("tailwind-variants").TVReturnType<{
+    width: {
+        reading: "max-w-reading";
+        form: "max-w-form";
+        page: "max-w-page";
+        wide: "max-w-wide";
+        full: "";
+    };
+}, undefined, string[], {
+    width: {
+        reading: "max-w-reading";
+        form: "max-w-form";
+        page: "max-w-page";
+        wide: "max-w-wide";
+        full: "";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    width: {
+        reading: "max-w-reading";
+        form: "max-w-form";
+        page: "max-w-page";
+        wide: "max-w-wide";
+        full: "";
+    };
+}, undefined>>;
+export type PageWidth = NonNullable<VariantProps<typeof pageColumnStyles>["width"]>;
+/** The column's classes, for pages whose column is split (a sticky toolbar over a scrolling grid). */
+export declare function pageColumn(width?: PageWidth, className?: string): string;
+/**
+ * A full-bleed strip inside a page column (a horizontal shelf): it reaches the page's edges and pads
+ * its content back to the gutter, so the first card lines up with the text above it.
+ */
+export declare function pageBleed(className?: string): string;
+/** A column with the page rhythm — `Page`'s own column, for pages that draw their own region or animate it. */
+export declare function pageBody(width?: PageWidth, className?: string): string;
+/**
+ * The page region: the `page` size container (so the gutter can follow it) and, by default, the
+ * scroll container. Put `pageColumn()` columns inside it when the page splits into bands.
+ */
+export declare function PageRegion({ scroll, className, ...props }: ComponentProps<"div"> & {
+    /** Scroll the page's content (default). Off when a child owns scrolling. */
+    readonly scroll?: boolean;
+}): import("react").JSX.Element;
+export interface PageProps extends ComponentProps<"div"> {
+    /** Content width (§1.3). */
+    readonly width?: PageWidth;
+    /** Scroll the page (default). */
+    readonly scroll?: boolean;
+    /** Classes for the inner column (gap, extra padding). */
+    readonly columnClassName?: string;
+}
+/**
+ * A whole page: the region plus one centred column with the standard rhythm — 16/24/32 px top padding
+ * by page width, 32 px between the heading and the first section, 64 px of run-out at the bottom.
+ */
+export declare function Page({ width, scroll, className, columnClassName, children, ...props }: PageProps): import("react").JSX.Element;
+export interface PageHeadingProps extends Omit<ComponentProps<"div">, "title"> {
+    readonly title: ReactNode;
+    readonly description?: ReactNode;
+    /** Right-aligned actions; they wrap under the title when the page is narrow. */
+    readonly actions?: ReactNode;
+}
+/** Page title block: a 20 px semibold title, a muted description, actions on the right. */
+export declare function PageHeading({ title, description, actions, className, ...props }: PageHeadingProps): import("react").JSX.Element;
+export interface PageSectionProps extends Omit<ComponentProps<"section">, "title"> {
+    readonly title?: ReactNode;
+    readonly description?: ReactNode;
+    /** A trailing control on the title row (a link, a small button). */
+    readonly action?: ReactNode;
+}
+/** A titled group of content. Sections sit 32 px apart in a `Page`; title to content is 10 px. */
+export declare function PageSection({ title, description, action, className, children, ...props }: PageSectionProps): import("react").JSX.Element;
+export {};

package/dist/components/page.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, tv } from "../lib/cn.js";
+/**
+ * Page layout. A page picks one width; the gutter follows the
+ * page's own width (a container query), not the window's, because the sidebar and panes change the
+ * room a page has. Screens never set their own `max-w-*`, `mx-auto` or page padding.
+ */
+const pageColumnStyles = tv({
+    base: ["mx-auto w-full min-w-0", "px-4 @page-md/page:px-6 @page-lg/page:px-8"],
+    variants: {
+        width: {
+            reading: "max-w-reading",
+            form: "max-w-form",
+            page: "max-w-page",
+            wide: "max-w-wide",
+            full: "",
+        },
+    },
+    defaultVariants: { width: "page" },
+});
+/** The column's classes, for pages whose column is split (a sticky toolbar over a scrolling grid). */
+export function pageColumn(width = "page", className) {
+    return pageColumnStyles({ width, className });
+}
+/**
+ * A full-bleed strip inside a page column (a horizontal shelf): it reaches the page's edges and pads
+ * its content back to the gutter, so the first card lines up with the text above it.
+ */
+export function pageBleed(className) {
+    return cn("-mx-4 px-4 scroll-px-4", "@page-md/page:-mx-6 @page-md/page:px-6 @page-md/page:scroll-px-6", "@page-lg/page:-mx-8 @page-lg/page:px-8 @page-lg/page:scroll-px-8", className);
+}
+/** The standard page rhythm: 16/24/32 px top padding by page width, 32 px between blocks, 64 px run-out. */
+const RHYTHM = "flex flex-col gap-8 pt-4 pb-16 @page-md/page:pt-6 @page-lg/page:pt-8";
+/** A column with the page rhythm — `Page`'s own column, for pages that draw their own region or animate it. */
+export function pageBody(width = "page", className) {
+    return pageColumnStyles({ width, className: cn(RHYTHM, className) });
+}
+/**
+ * The page region: the `page` size container (so the gutter can follow it) and, by default, the
+ * scroll container. Put `pageColumn()` columns inside it when the page splits into bands.
+ */
+export function PageRegion({ scroll = true, className, ...props }) {
+    return (_jsx("div", { "data-slot": "page", className: cn("@container/page flex min-h-0 w-full min-w-0 flex-1 flex-col", scroll && "overflow-y-auto overscroll-contain", className), ...props }));
+}
+/**
+ * A whole page: the region plus one centred column with the standard rhythm — 16/24/32 px top padding
+ * by page width, 32 px between the heading and the first section, 64 px of run-out at the bottom.
+ */
+export function Page({ width = "page", scroll = true, className, columnClassName, children, ...props }) {
+    return (_jsx(PageRegion, { scroll: scroll, className: className, ...props, children: _jsx("div", { "data-slot": "page-column", className: pageBody(width, columnClassName), children: children }) }));
+}
+/** Page title block: a 20 px semibold title, a muted description, actions on the right. */
+export function PageHeading({ title, description, actions, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "page-heading", className: cn("flex flex-wrap items-end justify-between gap-x-6 gap-y-3", className), ...props, children: [_jsxs("div", { className: "flex min-w-0 max-w-form flex-1 basis-80 flex-col gap-1", children: [_jsx("h1", { className: "text-xl font-semibold tracking-tight text-balance text-fg", children: title }), description !== undefined && _jsx("p", { className: "text-base text-pretty text-fg-muted", children: description })] }), actions !== undefined && (_jsx("div", { "data-slot": "page-actions", className: "flex shrink-0 flex-wrap items-center gap-2", children: actions }))] }));
+}
+/** A titled group of content. Sections sit 32 px apart in a `Page`; title to content is 10 px. */
+export function PageSection({ title, description, action, className, children, ...props }) {
+    const head = title !== undefined || description !== undefined || action !== undefined;
+    return (_jsxs("section", { "data-slot": "page-section", className: cn("flex min-w-0 flex-col gap-2.5", className), ...props, children: [head && (_jsxs("div", { className: "flex items-end justify-between gap-4", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [title !== undefined && _jsx("h2", { className: "text-sm font-medium text-fg", children: title }), description !== undefined && _jsx("p", { className: "text-sm text-pretty text-fg-subtle", children: description })] }), action !== undefined && _jsx("div", { className: "flex shrink-0 items-center gap-2", children: action })] })), children] }));
+}

package/dist/components/path-text.d.ts

@@ -0,0 +1,8 @@
+/**
+ * `src/lib/` dim + `app.ts` bright; the directory gives way first when space runs out. A path reads
+ * left to right in every language, so it is laid out left to right (the directory before the name).
+ */
+export declare function PathText({ path, className }: {
+    path: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/path-text.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { splitPath } from "../lib/path.js";
+/**
+ * `src/lib/` dim + `app.ts` bright; the directory gives way first when space runs out. A path reads
+ * left to right in every language, so it is laid out left to right (the directory before the name).
+ */
+export function PathText({ path, className }) {
+    const [dir, name] = splitPath(path);
+    return (_jsxs("span", { dir: "ltr", className: cn("flex min-w-0 items-baseline font-mono text-xs", className), title: path, children: [dir !== "" && _jsx("span", { className: "min-w-0 truncate text-fg-subtle", children: dir }), _jsx("span", { className: "max-w-full shrink-0 truncate text-fg", children: name })] }));
+}

package/dist/components/percent-input.d.ts

@@ -0,0 +1,20 @@
+import { type InputProps } from "./input.js";
+export interface PercentInputProps extends Omit<InputProps, "leading" | "trailing" | "type" | "min" | "max" | "step" | "value" | "defaultValue" | "inputMode"> {
+    /** The whole percent the field starts with, 0–100 ("12" for 12%); empty for `null`. */
+    readonly defaultPercent?: number | null | undefined;
+    /** Zero isn't a percent here: only 1–100 are. */
+    readonly nonZero?: boolean | undefined;
+    /** An empty field is `null` ("no limit", "the default"); otherwise it isn't a percent. */
+    readonly allowEmpty?: boolean | undefined;
+    /**
+     * On every edit, the whole percent typed in the person's locale, 0–100: the number, `null` for an
+     * empty field that `allowEmpty`, `undefined` for anything else.
+     */
+    readonly onPercentChange?: ((percent: number | null | undefined) => void) | undefined;
+}
+/**
+ * A whole-percent field (0–100): the number read in the person's locale (its digits), the locale's
+ * percent sign on the side it writes it, and `onPercentChange` with what was typed. Text that isn't
+ * such a percent marks the field invalid unless `invalid` says otherwise.
+ */
+export declare function PercentInput({ defaultPercent, nonZero, allowEmpty, onPercentChange, invalid, onValueChange, ...props }: PercentInputProps): import("react").JSX.Element;

package/dist/components/percent-input.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useFormatters } from "../i18n/provider.js";
+import { readAmount } from "../lib/number-format.js";
+import { Input } from "./input.js";
+/** The locale's percent sign and whether it comes before the number ("%12") or after it ("12 %"). */
+function percentSign(locale) {
+    const parts = new Intl.NumberFormat(locale, { style: "percent" }).formatToParts(0.5);
+    const sign = parts.findIndex((part) => part.type === "percentSign");
+    const integer = parts.findIndex((part) => part.type === "integer");
+    return { sign: parts[sign]?.value ?? "%", leading: sign !== -1 && sign < integer };
+}
+/**
+ * A whole-percent field (0–100): the number read in the person's locale (its digits), the locale's
+ * percent sign on the side it writes it, and `onPercentChange` with what was typed. Text that isn't
+ * such a percent marks the field invalid unless `invalid` says otherwise.
+ */
+export function PercentInput({ defaultPercent, nonZero, allowEmpty, onPercentChange, invalid, onValueChange, ...props }) {
+    const formatters = useFormatters();
+    const [text, setText] = useState(() => defaultPercent === null || defaultPercent === undefined
+        ? ""
+        : formatters.number(defaultPercent, { useGrouping: false, maximumFractionDigits: 0 }));
+    const bounds = { min: 0, max: 100, step: 1, nonZero, allowEmpty };
+    const { sign, leading } = percentSign(formatters.locale);
+    const affix = (_jsx("span", { "aria-hidden": true, className: "text-fg-subtle", children: sign }));
+    return (_jsx(Input, { inputMode: "numeric", value: text, invalid: invalid ?? (text.trim() !== "" && readAmount(text, formatters.locale, bounds) === undefined), onValueChange: (next, details) => {
+            setText(next);
+            onValueChange?.(next, details);
+            onPercentChange?.(readAmount(next, formatters.locale, bounds));
+        }, ...props, ...(leading ? { leading: affix } : { trailing: affix }) }));
+}