@lepid-labs/ui-react 1.0.0 → 1.0.2

package/dist/AppHeader.d.ts

@@ -0,0 +1,36 @@
+import type { ElementType, HTMLAttributes, ReactNode } from "react";
+import type { PolyProps } from "./poly.js";
+export interface AppHeaderProps extends HTMLAttributes<HTMLElement> {
+    /** Logo mark and/or app name. */
+    brand?: ReactNode;
+    /** Makes the brand a link (usually home). */
+    brandHref?: string;
+    /** Usually a `TopNav`. */
+    nav?: ReactNode;
+    /** Right-aligned: search, theme switcher, account menu. */
+    actions?: ReactNode;
+    /** Accessible name of the side-nav toggle. */
+    toggleLabel?: string;
+}
+/** The shell's sticky top bar. Inside an `AppShell` with a side nav it leads
+ *  with the toggle that collapses the rail (wide) or opens the drawer (narrow). */
+export declare function AppHeader({ brand, brandHref, nav, actions, toggleLabel, className, children, ...rest }: AppHeaderProps): import("react").JSX.Element;
+export interface ShellToggleProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick"> {
+    label?: string;
+}
+/** The side-nav toggle: collapses the rail (wide) or opens the drawer
+ *  (narrow). `AppHeader` renders one; place it yourself (e.g. in the
+ *  `SideNav` footer) in a shell without a header. Renders nothing outside an
+ *  `AppShell` with a nav. */
+export declare function ShellToggle({ label, className, children, ...rest }: ShellToggleProps): import("react").JSX.Element | null;
+export type TopNavProps = HTMLAttributes<HTMLElement>;
+/** Horizontal page links for the header; scrolls sideways when narrow. */
+export declare function TopNav({ className, ...rest }: TopNavProps): import("react").JSX.Element;
+export type TopNavItemProps<E extends ElementType = "a"> = PolyProps<E, {
+    active?: boolean;
+    className?: string;
+    children?: ReactNode;
+}>;
+/** A header link. `active` sets `aria-current="page"` (router links that set
+ *  it themselves light up the same way). */
+export declare function TopNavItem<E extends ElementType = "a">({ as, active, className, ...rest }: TopNavItemProps<E>): import("react").JSX.Element;

package/dist/AppHeader.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useShell } from "./AppShell.js";
+import { cx } from "./cx.js";
+/** The shell's sticky top bar. Inside an `AppShell` with a side nav it leads
+ *  with the toggle that collapses the rail (wide) or opens the drawer (narrow). */
+export function AppHeader({ brand, brandHref, nav, actions, toggleLabel = "Toggle navigation", className, children, ...rest }) {
+    return (_jsxs("header", { className: cx("ld-shell__header", className), ...rest, children: [_jsx(ShellToggle, { label: toggleLabel }), brand != null &&
+                (brandHref ? (_jsx("a", { className: "ld-shell__brand", href: brandHref, children: brand })) : (_jsx("span", { className: "ld-shell__brand", children: brand }))), nav, children, actions != null && _jsx("div", { className: "ld-shell__actions", children: actions })] }));
+}
+/** The side-nav toggle: collapses the rail (wide) or opens the drawer
+ *  (narrow). `AppHeader` renders one; place it yourself (e.g. in the
+ *  `SideNav` footer) in a shell without a header. Renders nothing outside an
+ *  `AppShell` with a nav. */
+export function ShellToggle({ label = "Toggle navigation", className, children, ...rest }) {
+    const shell = useShell();
+    if (!shell?.hasNav)
+        return null;
+    return (_jsx("button", { type: "button", className: cx("ld-shell__toggle", className), "aria-label": label, "aria-controls": shell.navId, "aria-expanded": shell.expanded, onClick: shell.toggleNav, ...rest, children: children ?? _jsx(MenuIcon, {}) }));
+}
+/** Horizontal page links for the header; scrolls sideways when narrow. */
+export function TopNav({ className, ...rest }) {
+    return _jsx("nav", { className: cx("ld-topnav", className), ...rest });
+}
+/** A header link. `active` sets `aria-current="page"` (router links that set
+ *  it themselves light up the same way). */
+export function TopNavItem({ as, active, className, ...rest }) {
+    const Tag = as ?? "a";
+    return (_jsx(Tag, { className: cx("ld-topnav__item", className), ...(active ? { "aria-current": "page" } : {}), ...rest }));
+}
+function MenuIcon() {
+    return (_jsx("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "M3 5.5h14M3 10h14M3 14.5h14" }) }));
+}

package/dist/AppShell.d.ts

@@ -0,0 +1,41 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface ShellContextValue {
+    /** The shell has a side nav (so the header shows the toggle). */
+    hasNav: boolean;
+    /** The viewport is below the 48rem breakpoint (drawer / tab bar mode). */
+    narrow: boolean;
+    /** Wide viewports: the nav is an icon rail. */
+    collapsed: boolean;
+    /** The nav is visibly expanded on the current viewport. */
+    expanded: boolean;
+    navId: string;
+    toggleNav: () => void;
+    closeNav: () => void;
+}
+/** The enclosing AppShell's nav state, or null outside one. */
+export declare function useShell(): ShellContextValue | null;
+/** True below the shell breakpoint; false during SSR. */
+export declare function useShellNarrow(): boolean;
+export interface AppShellProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Usually an `AppHeader`. Leave out for a shell without a top bar. */
+    header?: ReactNode;
+    /** Usually a `SideNav`. Leave out for a shell without a left-hand nav. */
+    nav?: ReactNode;
+    footer?: ReactNode;
+    /** Page content, rendered inside `<main>`. */
+    children?: ReactNode;
+    /** Below 48rem the nav becomes a slide-in drawer or a bottom tab bar. The
+     *  drawer opens from the header's toggle, so the default is "drawer" with a
+     *  header and "tabbar" without one. */
+    mobileNav?: "drawer" | "tabbar";
+    /** Controlled icon-rail state for wide viewports. */
+    navCollapsed?: boolean;
+    defaultNavCollapsed?: boolean;
+    onNavCollapsedChange?: (collapsed: boolean) => void;
+    /** Text of the skip link to main content; `false` drops it. */
+    skipLink?: ReactNode | false;
+}
+/** Application frame: optional sticky header, optional left-hand nav (icon
+ *  rail when collapsed, drawer or tab bar on narrow screens), main, optional
+ *  footer. Paints the theme's page background. */
+export declare function AppShell({ header, nav, footer, children, mobileNav, navCollapsed, defaultNavCollapsed, onNavCollapsedChange, skipLink, className, ...rest }: AppShellProps): import("react").JSX.Element;

package/dist/AppShell.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useId, useState, useSyncExternalStore, } from "react";
+import { navExpanded, shellAttrs, SHELL_NARROW_QUERY, toggleNav } from "./shell-state.js";
+const ShellContext = createContext(null);
+/** The enclosing AppShell's nav state, or null outside one. */
+export function useShell() {
+    return useContext(ShellContext);
+}
+const subscribeNarrow = (onChange) => {
+    const mq = window.matchMedia(SHELL_NARROW_QUERY);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+};
+/** True below the shell breakpoint; false during SSR. */
+export function useShellNarrow() {
+    return useSyncExternalStore(subscribeNarrow, () => window.matchMedia(SHELL_NARROW_QUERY).matches, () => false);
+}
+/** Application frame: optional sticky header, optional left-hand nav (icon
+ *  rail when collapsed, drawer or tab bar on narrow screens), main, optional
+ *  footer. Paints the theme's page background. */
+export function AppShell({ header, nav, footer, children, mobileNav = header == null ? "tabbar" : "drawer", navCollapsed, defaultNavCollapsed = false, onNavCollapsedChange, skipLink = "Skip to content", className, ...rest }) {
+    const narrow = useShellNarrow();
+    const [innerCollapsed, setInnerCollapsed] = useState(defaultNavCollapsed);
+    const [open, setOpen] = useState(false);
+    const collapsed = navCollapsed ?? innerCollapsed;
+    const state = { collapsed, open: open && narrow };
+    const navId = useId();
+    const mainId = useId();
+    const toggle = useCallback(() => {
+        const next = toggleNav({ collapsed, open }, narrow);
+        if (next.open !== open)
+            setOpen(next.open);
+        if (next.collapsed !== collapsed) {
+            if (navCollapsed === undefined)
+                setInnerCollapsed(next.collapsed);
+            onNavCollapsedChange?.(next.collapsed);
+        }
+    }, [collapsed, open, narrow, navCollapsed, onNavCollapsedChange]);
+    const close = useCallback(() => setOpen(false), []);
+    useEffect(() => {
+        if (!state.open)
+            return;
+        const onKey = (e) => e.key === "Escape" && setOpen(false);
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [state.open]);
+    // Following a link out of the drawer closes it.
+    const onNavClick = (e) => {
+        if (narrow && e.target.closest("a"))
+            setOpen(false);
+    };
+    const ctx = {
+        hasNav: nav != null,
+        narrow,
+        collapsed,
+        expanded: navExpanded(state, narrow),
+        navId,
+        toggleNav: toggle,
+        closeNav: close,
+    };
+    const modifiers = [mobileNav === "tabbar" && "ld-shell--tabbar", className];
+    const attrs = shellAttrs(state, modifiers.filter(Boolean).join(" "));
+    return (_jsx(ShellContext.Provider, { value: ctx, children: _jsxs("div", { ...attrs, ...rest, children: [skipLink !== false && (_jsx("a", { className: "ld-shell__skip", href: `#${mainId}`, children: skipLink })), header, nav != null && (_jsxs(_Fragment, { children: [_jsx("aside", { className: "ld-shell__nav", id: navId, onClick: onNavClick, children: nav }), _jsx("div", { className: "ld-shell__scrim", "aria-hidden": "true", onClick: close })] })), _jsx("main", { className: "ld-shell__main", id: mainId, tabIndex: -1, children: children }), footer != null && _jsx("footer", { className: "ld-shell__footer", children: footer })] }) }));
+}

package/dist/ButtonGroup.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from "react";
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Stretch to the full row with equal-width segments. Maps to .ld-btn-group--block. */
+    block?: boolean;
+}
+/** One long track with `Button`s lined up inside it. The theme strips the
+ *  segments' own chrome, so children are plain `Button`s; name the group with
+ *  `aria-label`. For a toggle / segmented control set `aria-pressed` on each
+ *  `Button` — the theme lights the pressed segment from that attribute, and
+ *  which one is pressed stays the caller's state. With a single pressed segment
+ *  the theme slides one pill between segments; the group stamps `data-ld-dir`
+ *  so the pill's leading edge reaches the new segment first. */
+export declare function ButtonGroup({ block, className, ...rest }: ButtonGroupProps): import("react").JSX.Element;

package/dist/ButtonGroup.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { buttonGroupAttrs } from "./button-group.js";
+import { useSlideDir } from "./useSlideDir.js";
+/** One long track with `Button`s lined up inside it. The theme strips the
+ *  segments' own chrome, so children are plain `Button`s; name the group with
+ *  `aria-label`. For a toggle / segmented control set `aria-pressed` on each
+ *  `Button` — the theme lights the pressed segment from that attribute, and
+ *  which one is pressed stays the caller's state. With a single pressed segment
+ *  the theme slides one pill between segments; the group stamps `data-ld-dir`
+ *  so the pill's leading edge reaches the new segment first. */
+export function ButtonGroup({ block, className, ...rest }) {
+    const ref = useSlideDir('.ld-btn--active, [aria-pressed="true"]');
+    return _jsx("div", { ...buttonGroupAttrs(block, className), ...rest, ref: ref });
+}

package/dist/CodeBlock.d.ts

@@ -0,0 +1,11 @@
+import { type HTMLAttributes } from "react";
+export type CodeBlockProps = HTMLAttributes<HTMLPreElement> & {
+    /** Accessible name and tooltip of the copy button. Default "Copy code". */
+    copyLabel?: string;
+    /** Class for the `.ld-pre-wrap` wrapper (`className` goes on the `<pre>`). */
+    wrapClassName?: string;
+};
+/** `.ld-pre` with a copy-to-clipboard control in its top-right corner. Copies
+ *  the block's text content; for ~1.5s the button shows a check (or a danger
+ *  tint on failure) and a polite live region announces the result. */
+export declare function CodeBlock({ copyLabel, wrapClassName, className, children, ...rest }: CodeBlockProps): import("react").JSX.Element;

package/dist/CodeBlock.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { IconButton } from "./IconButton.js";
+import { COPIED_MS, copyAnnouncement, copyDataAttr, copyText } from "./copy-state.js";
+import { cx } from "./cx.js";
+const glyph = {
+    viewBox: "0 0 20 20",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.6,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+};
+/** `.ld-pre` with a copy-to-clipboard control in its top-right corner. Copies
+ *  the block's text content; for ~1.5s the button shows a check (or a danger
+ *  tint on failure) and a polite live region announces the result. */
+export function CodeBlock({ copyLabel = "Copy code", wrapClassName, className, children, ...rest }) {
+    const pre = useRef(null);
+    const timer = useRef(undefined);
+    const [status, setStatus] = useState("idle");
+    useEffect(() => () => clearTimeout(timer.current), []);
+    async function copy() {
+        const result = await copyText(pre.current?.textContent ?? "");
+        clearTimeout(timer.current);
+        setStatus(result);
+        timer.current = setTimeout(() => setStatus("idle"), COPIED_MS);
+    }
+    return (_jsxs("div", { className: cx("ld-pre-wrap", wrapClassName), children: [_jsx("pre", { ref: pre, className: cx("ld-pre", className), ...rest, children: children }), _jsxs(IconButton, { label: copyLabel, className: "ld-pre-copy", "data-ld-copy": copyDataAttr(status), onClick: copy, children: [_jsxs("svg", { className: "ld-pre-copy__icon", ...glyph, children: [_jsx("rect", { x: "7", y: "7", width: "10", height: "10", rx: "1.5" }), _jsx("path", { d: "M13 4.5V4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h.5" })] }), _jsx("svg", { className: "ld-pre-copy__check", ...glyph, children: _jsx("path", { d: "m4 10.5 4 4 8-9" }) })] }), _jsx("span", { className: "ld-pre-copy-status", "aria-live": "polite", children: copyAnnouncement(status) })] }));
+}

package/dist/HoldButton.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import type { ButtonProps } from "./Button.js";
+export interface HoldButtonProps extends Omit<ButtonProps, "onClick"> {
+    /** Commitment window in ms. Defaults to the theme's --ld-hold-duration (300 ms). */
+    duration?: number;
+    /** Fires once when the hold completes. */
+    onConfirm: () => void;
+    /** Optional secondary text under the label (announced via aria-describedby). */
+    hint?: ReactNode;
+    /** Show the live percentage. Default true. */
+    showMeter?: boolean;
+    /** Content of the circular well the ring wraps — usually an icon. */
+    icon?: ReactNode;
+    /** Keyboard escape hatch: a plain Space/Enter tap fires immediately instead
+     * of requiring a held key. Pair with a confirm dialog in onConfirm. */
+    confirmOnKeyboardTap?: boolean;
+    /** Announced to assistive tech once the hold fires. Default "Confirmed". */
+    confirmedLabel?: string;
+}
+/** Hold-to-confirm button: the ring around the icon fills over the commitment
+ * window and the action fires only when it completes. Releasing early cancels.
+ * Renders .ld-btn.ld-btn--hold with the ring/body/meter subparts. */
+export declare function HoldButton({ duration, onConfirm, hint, showMeter, icon, confirmOnKeyboardTap, confirmedLabel, variant, size, className, style, children, disabled, onPointerDown, onPointerUp, onPointerCancel, onLostPointerCapture, onKeyDown, onKeyUp, onBlur, ...rest }: HoldButtonProps): import("react").JSX.Element;

package/dist/HoldButton.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { cx } from "./cx.js";
+import { createHoldController } from "./hold.js";
+const SR_ONLY = {
+    position: "absolute",
+    width: 1,
+    height: 1,
+    margin: -1,
+    padding: 0,
+    overflow: "hidden",
+    clip: "rect(0 0 0 0)",
+    whiteSpace: "nowrap",
+    border: 0,
+};
+const HOLD_KEYS = new Set([" ", "Enter"]);
+/** Parse a CSS <time> ("300ms" | "0.3s") into ms; undefined if unparseable. */
+function parseCssTime(raw) {
+    const m = raw.trim().match(/^([\d.]+)\s*(ms|s)$/);
+    if (!m)
+        return undefined;
+    const n = Number(m[1]);
+    return m[2] === "s" ? n * 1000 : n;
+}
+/** Hold-to-confirm button: the ring around the icon fills over the commitment
+ * window and the action fires only when it completes. Releasing early cancels.
+ * Renders .ld-btn.ld-btn--hold with the ring/body/meter subparts. */
+export function HoldButton({ duration, onConfirm, hint, showMeter = true, icon, confirmOnKeyboardTap = false, confirmedLabel = "Confirmed", variant = "default", size = "md", className, style, children, disabled, onPointerDown, onPointerUp, onPointerCancel, onLostPointerCapture, onKeyDown, onKeyUp, onBlur, ...rest }) {
+    const ref = useRef(null);
+    const ctl = useRef(null);
+    const latest = useRef({ duration, onConfirm });
+    latest.current = { duration, onConfirm };
+    const hintId = useId();
+    const [progress, setProgress] = useState(0);
+    const [state, setState] = useState("idle");
+    useEffect(() => {
+        const c = createHoldController({
+            duration: () => {
+                const explicit = latest.current.duration;
+                if (explicit !== undefined)
+                    return explicit;
+                const el = ref.current;
+                const fromTheme = el && parseCssTime(getComputedStyle(el).getPropertyValue("--ld-hold-duration"));
+                return fromTheme ?? 300;
+            },
+            onProgress: setProgress,
+            onConfirm: () => latest.current.onConfirm(),
+            onStateChange: setState,
+        });
+        ctl.current = c;
+        return () => c.dispose();
+    }, []);
+    const start = useCallback(() => {
+        if (!disabled)
+            ctl.current?.start();
+    }, [disabled]);
+    const cancel = useCallback(() => ctl.current?.cancel(), []);
+    const handlePointerDown = (e) => {
+        onPointerDown?.(e);
+        if (e.defaultPrevented || e.button !== 0 || !e.isPrimary)
+            return;
+        e.currentTarget.setPointerCapture(e.pointerId);
+        start();
+    };
+    const handlePointerUp = (e) => {
+        onPointerUp?.(e);
+        cancel();
+    };
+    const handlePointerCancel = (e) => {
+        onPointerCancel?.(e);
+        cancel();
+    };
+    const handleLostCapture = (e) => {
+        onLostPointerCapture?.(e);
+        cancel();
+    };
+    const handleKeyDown = (e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented)
+            return;
+        if (e.key === "Escape") {
+            cancel();
+            return;
+        }
+        if (!HOLD_KEYS.has(e.key))
+            return;
+        e.preventDefault(); // suppress the native click that Space/Enter would synthesize
+        if (e.repeat)
+            return;
+        if (confirmOnKeyboardTap) {
+            if (!disabled)
+                ctl.current?.fire();
+        }
+        else {
+            start();
+        }
+    };
+    const handleKeyUp = (e) => {
+        onKeyUp?.(e);
+        if (HOLD_KEYS.has(e.key)) {
+            e.preventDefault();
+            cancel();
+        }
+    };
+    const handleBlur = (e) => {
+        onBlur?.(e);
+        cancel();
+    };
+    const percent = Math.round(progress * 100);
+    const classes = cx("ld-btn", "ld-btn--hold", variant !== "default" && `ld-btn--${variant}`, size === "sm" && "ld-btn--sm", className);
+    return (_jsxs("button", { ref: ref, type: "button", className: classes, style: { ...style, "--ld-hold": progress }, "data-ld-hold": state === "idle" ? undefined : state, "aria-describedby": hint !== undefined ? hintId : undefined, disabled: disabled, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerCancel: handlePointerCancel, onLostPointerCapture: handleLostCapture, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onBlur: handleBlur, ...rest, children: [_jsx("span", { className: "ld-btn__ring", "aria-hidden": "true", children: icon }), _jsxs("span", { className: "ld-btn__body", children: [_jsx("span", { className: "ld-btn__label", children: children }), hint !== undefined && (_jsx("span", { className: "ld-btn__hint", id: hintId, children: hint }))] }), showMeter && (_jsxs("span", { className: "ld-btn__meter", "aria-hidden": "true", children: [percent, "%"] })), _jsx("span", { style: SR_ONLY, "aria-live": "polite", children: state === "fired" ? confirmedLabel : "" })] }));
+}

package/dist/IconButton.d.ts

@@ -0,0 +1,18 @@
+import type { ElementType, ReactNode } from "react";
+import type { PolyProps } from "./poly.js";
+export type IconButtonProps<E extends ElementType = "button"> = PolyProps<E, {
+    /** Accessible name (`aria-label`), and the tooltip unless `title` is set. Required: the control has no text. */
+    label: string;
+    /** Lit state. Maps to .ld-icon-btn--active; on a link also `aria-current="page"`.
+     *  For a toggle button pass `aria-pressed` instead — the theme lights that too. */
+    active?: boolean;
+    /** "danger" tints the glyph red on hover. Maps to .ld-icon-btn--danger. */
+    variant?: "default" | "danger";
+    title?: string;
+    className?: string;
+    /** The icon (an inline `<svg>`; the theme sizes it to 1.25em). */
+    children?: ReactNode;
+}>;
+/** Chromeless square icon-only control. Renders a `<button type="button">`,
+ *  or `as` — `"a"` or a router Link — for navigation. */
+export declare function IconButton<E extends ElementType = "button">({ as, label, active, variant, title, className, ...rest }: IconButtonProps<E>): import("react").JSX.Element;

package/dist/IconButton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { iconButtonAttrs } from "./icon-button.js";
+/** Chromeless square icon-only control. Renders a `<button type="button">`,
+ *  or `as` — `"a"` or a router Link — for navigation. */
+export function IconButton({ as, label, active, variant, title, className, ...rest }) {
+    const Tag = as ?? "button";
+    const attrs = iconButtonAttrs({ label, active, variant, title, isButton: Tag === "button", className });
+    return _jsx(Tag, { ...attrs, ...rest });
+}

package/dist/LogBlock.d.ts

@@ -0,0 +1,22 @@
+import { type HTMLAttributes } from "react";
+export type LogBlockProps = HTMLAttributes<HTMLPreElement> & {
+    /** Keep the view on the newest line as content grows — but only while the
+     *  reader is already at the bottom; scrolling up pauses it. */
+    follow?: boolean;
+    /** Height cap (number = px). Defaults to the theme's 420px. */
+    maxHeight?: number | string;
+    /** Announce appended lines to assistive tech (role="log"). Turn off for very
+     *  chatty streams. Default true. */
+    live?: boolean;
+};
+/** Terminal/log `<pre>`: bounded, scrolling, wrapped mono output (.ld-pre--log). */
+export declare const LogBlock: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLPreElement> & {
+    /** Keep the view on the newest line as content grows — but only while the
+     *  reader is already at the bottom; scrolling up pauses it. */
+    follow?: boolean;
+    /** Height cap (number = px). Defaults to the theme's 420px. */
+    maxHeight?: number | string;
+    /** Announce appended lines to assistive tech (role="log"). Turn off for very
+     *  chatty streams. Default true. */
+    live?: boolean;
+} & import("react").RefAttributes<HTMLPreElement>>;

package/dist/LogBlock.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useLayoutEffect, useRef } from "react";
+import { isPinnedToBottom, logAttrs } from "./log-state.js";
+function setRef(ref, value) {
+    if (typeof ref === "function")
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
+/** Terminal/log `<pre>`: bounded, scrolling, wrapped mono output (.ld-pre--log). */
+export const LogBlock = forwardRef(function LogBlock({ follow, maxHeight, live, className, style, onScroll, children, ...rest }, ref) {
+    const el = useRef(null);
+    const pinned = useRef(true);
+    const attrs = logAttrs({ maxHeight, live, className });
+    const attach = useCallback((node) => {
+        el.current = node;
+        setRef(ref, node);
+    }, [ref]);
+    function handleScroll(e) {
+        const t = e.currentTarget;
+        pinned.current = isPinnedToBottom(t.scrollTop, t.scrollHeight, t.clientHeight);
+        onScroll?.(e);
+    }
+    useLayoutEffect(() => {
+        const node = el.current;
+        if (follow && node && pinned.current)
+            node.scrollTop = node.scrollHeight;
+    }, [follow, children]);
+    return (_jsx("pre", { ref: attach, ...attrs, style: { ...attrs.style, ...style }, onScroll: handleScroll, ...rest, children: children }));
+});

package/dist/Page.d.ts

@@ -0,0 +1,51 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    title: ReactNode;
+    /** Small line above the title: a section name or breadcrumb. */
+    eyebrow?: ReactNode;
+    subtitle?: ReactNode;
+    /** Right-aligned buttons. */
+    actions?: ReactNode;
+}
+export declare function PageHeader({ title, eyebrow, subtitle, actions, className, ...rest }: PageHeaderProps): import("react").JSX.Element;
+export interface PageProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Column width: narrow 48rem (chat, prose, forms), default 72rem, wide 96rem, full. */
+    width?: "narrow" | "default" | "wide" | "full";
+    /** Renders a `PageHeader` when set. */
+    title?: ReactNode;
+    eyebrow?: ReactNode;
+    subtitle?: ReactNode;
+    actions?: ReactNode;
+}
+/** A centered page column inside `AppShell`'s main. */
+export declare function Page({ width, title, eyebrow, subtitle, actions, className, children, ...rest }: PageProps): import("react").JSX.Element;
+export interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    /** Smallest column width before the grid drops a column (default 18rem). */
+    min?: string;
+}
+/** Dashboard grid: as many equal columns of at least `min` as fit. */
+export declare function Grid({ min, className, style, ...rest }: GridProps): import("react").JSX.Element;
+export interface SplitProps extends HTMLAttributes<HTMLDivElement> {
+    /** The master pane. `children` is the detail. */
+    list: ReactNode;
+    /** Preferred list width (default 20rem). The panes stack once the detail would drop below 60%. */
+    listWidth?: string;
+}
+/** List + detail. */
+export declare function Split({ list, listWidth, className, style, children, ...rest }: SplitProps): import("react").JSX.Element;
+export interface AsideLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    /** Sticky side column: table of contents, related items, filters. */
+    aside: ReactNode;
+    /** Preferred aside width (default 16rem). */
+    asideWidth?: string;
+    /** Accessible name for the aside landmark. */
+    asideLabel?: string;
+}
+/** Content with a sticky right-hand aside; stacks when narrow. */
+export declare function AsideLayout({ aside, asideWidth, asideLabel, className, style, children, ...rest }: AsideLayoutProps): import("react").JSX.Element;
+export interface CenterProps extends HTMLAttributes<HTMLDivElement> {
+    /** Width of the centered column (default 26rem). */
+    maxWidth?: string;
+}
+/** One narrow column centered in the remaining height: sign in, empty states. */
+export declare function Center({ maxWidth, className, style, ...rest }: CenterProps): import("react").JSX.Element;

package/dist/Page.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/** Sets layout custom properties alongside any caller style. */
+function vars(style, entries) {
+    const set = Object.entries(entries).filter(([, v]) => v !== undefined);
+    return set.length ? { ...Object.fromEntries(set), ...style } : style;
+}
+export function PageHeader({ title, eyebrow, subtitle, actions, className, ...rest }) {
+    return (_jsxs("header", { className: cx("ld-page__header", className), ...rest, children: [_jsxs("div", { className: "ld-page__heading", children: [eyebrow != null && _jsx("p", { className: "ld-page__eyebrow", children: eyebrow }), _jsx("h1", { className: "ld-page__title", children: title }), subtitle != null && _jsx("p", { className: "ld-page__subtitle", children: subtitle })] }), actions != null && _jsx("div", { className: "ld-page__actions", children: actions })] }));
+}
+/** A centered page column inside `AppShell`'s main. */
+export function Page({ width = "default", title, eyebrow, subtitle, actions, className, children, ...rest }) {
+    return (_jsxs("div", { className: cx("ld-page", width !== "default" && `ld-page--${width}`, className), ...rest, children: [title != null && _jsx(PageHeader, { title: title, eyebrow: eyebrow, subtitle: subtitle, actions: actions }), children] }));
+}
+/** Dashboard grid: as many equal columns of at least `min` as fit. */
+export function Grid({ min, className, style, ...rest }) {
+    return _jsx("div", { className: cx("ld-grid", className), style: vars(style, { "--ld-grid-min": min }), ...rest });
+}
+/** List + detail. */
+export function Split({ list, listWidth, className, style, children, ...rest }) {
+    return (_jsxs("div", { className: cx("ld-split", className), style: vars(style, { "--ld-split-list": listWidth }), ...rest, children: [_jsx("div", { className: "ld-split__list", children: list }), _jsx("div", { className: "ld-split__detail", children: children })] }));
+}
+/** Content with a sticky right-hand aside; stacks when narrow. */
+export function AsideLayout({ aside, asideWidth, asideLabel, className, style, children, ...rest }) {
+    return (_jsxs("div", { className: cx("ld-aside-layout", className), style: vars(style, { "--ld-aside-w": asideWidth }), ...rest, children: [_jsx("div", { className: "ld-aside-layout__main", children: children }), _jsx("aside", { className: "ld-aside-layout__aside", "aria-label": asideLabel, children: aside })] }));
+}
+/** One narrow column centered in the remaining height: sign in, empty states. */
+export function Center({ maxWidth, className, style, ...rest }) {
+    return _jsx("div", { className: cx("ld-center", className), style: vars(style, { "--ld-center-max": maxWidth }), ...rest });
+}

package/dist/SideNav.d.ts

@@ -0,0 +1,27 @@
+import { type ElementType, type HTMLAttributes, type ReactNode } from "react";
+import type { PolyProps } from "./poly.js";
+export interface SideNavProps extends HTMLAttributes<HTMLElement> {
+    /** Pinned to the bottom of the nav: settings, account, version. */
+    footer?: ReactNode;
+}
+/** The left-hand nav: `SideNavSection`s of `SideNavItem`s. Pass it as
+ *  `AppShell`'s `nav`. Give it an `aria-label` ("Main"). */
+export declare function SideNav({ footer, className, children, ...rest }: SideNavProps): import("react").JSX.Element;
+export interface SideNavSectionProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Group heading; hidden on the collapsed rail (a rule separates groups). */
+    title?: ReactNode;
+}
+export declare function SideNavSection({ title, className, children, ...rest }: SideNavSectionProps): import("react").JSX.Element;
+export type SideNavItemProps<E extends ElementType = "a"> = PolyProps<E, {
+    /** Shown alone on the collapsed rail and the tab bar — give every item one there. */
+    icon?: ReactNode;
+    /** Trailing count or status, e.g. `<Badge size="sm">3</Badge>`. */
+    badge?: ReactNode;
+    /** Sets `aria-current="page"`. */
+    active?: boolean;
+    className?: string;
+    children?: ReactNode;
+}>;
+/** One nav destination. Renders an `<a>`, or `as` (a router Link). On the
+ *  collapsed rail a string label doubles as the hover tooltip. */
+export declare function SideNavItem<E extends ElementType = "a">({ as, icon, badge, active, className, children, ...rest }: SideNavItemProps<E>): import("react").JSX.Element;

package/dist/SideNav.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { useShell } from "./AppShell.js";
+import { cx } from "./cx.js";
+/** The left-hand nav: `SideNavSection`s of `SideNavItem`s. Pass it as
+ *  `AppShell`'s `nav`. Give it an `aria-label` ("Main"). */
+export function SideNav({ footer, className, children, ...rest }) {
+    return (_jsxs("nav", { className: cx("ld-sidenav", className), ...rest, children: [children, footer != null && _jsx("div", { className: "ld-sidenav__footer", children: footer })] }));
+}
+export function SideNavSection({ title, className, children, ...rest }) {
+    const headingId = useId();
+    return (_jsxs("div", { className: cx("ld-sidenav__section", className), role: "group", "aria-labelledby": title != null ? headingId : undefined, ...rest, children: [title != null && (_jsx("div", { className: "ld-sidenav__heading", id: headingId, children: title })), children] }));
+}
+/** One nav destination. Renders an `<a>`, or `as` (a router Link). On the
+ *  collapsed rail a string label doubles as the hover tooltip. */
+export function SideNavItem({ as, icon, badge, active, className, children, ...rest }) {
+    const shell = useShell();
+    const Tag = as ?? "a";
+    const tooltip = shell?.collapsed && !shell.narrow && typeof children === "string" ? children : undefined;
+    return (_jsxs(Tag, { className: cx("ld-sidenav__item", className), title: tooltip, ...(active ? { "aria-current": "page" } : {}), ...rest, children: [icon != null && (_jsx("span", { className: "ld-sidenav__icon", "aria-hidden": "true", children: icon })), _jsx("span", { className: "ld-sidenav__label", children: children }), badge != null && _jsx("span", { className: "ld-sidenav__badge", children: badge })] }));
+}