@lepid-labs/ui-react 1.0.0 → 1.0.2

package/dist/StatusCard.d.ts

@@ -0,0 +1,42 @@
+import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import { type StatusTone } from "./status-card.js";
+export interface StatusCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "prefix"> {
+    title: ReactNode;
+    /** Renders the title as a link. */
+    href?: string;
+    /** Open `href` in a new tab (adds the noopener/noreferrer rel). */
+    external?: boolean;
+    /** Faint lead-in before the title — an owner, group, or namespace. */
+    prefix?: ReactNode;
+    /** Colors the left status edge. */
+    tone?: StatusTone;
+    /** Outline + glow ring calling for action; `true` means warning. */
+    attention?: boolean | StatusTone;
+    /** Bump (e.g. `Date.now()`) whenever the card's data changes to replay the flash. */
+    changedAt?: number;
+    /** Faint icon in the top-left corner (a lock, a pin). */
+    watermark?: ReactNode;
+    /** Right side of the head: badges, icon links. */
+    meta?: ReactNode;
+    /** Faint trailing text after `meta` — typically a relative time. */
+    note?: ReactNode;
+}
+export declare function StatusCard({ title, href, external, prefix, tone, attention, changedAt, watermark, meta, note, className, children, ...rest }: StatusCardProps): import("react").JSX.Element;
+/** `<ul>` of rows — the card's list body. */
+export declare function StatusCardRows({ className, ...rest }: HTMLAttributes<HTMLUListElement>): import("react").JSX.Element;
+export interface StatusCardRowProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "prefix"> {
+    /** Narrow right-aligned lead column — an id, a number. */
+    leading?: ReactNode;
+    /** Compact trailing cluster — badges, counts, icons. */
+    trailing?: ReactNode;
+    external?: boolean;
+}
+/** One row: `<li>` wrapping an `<a>` when `href` is set, else a `<div>`. */
+export declare function StatusCardRow({ leading, trailing, external, href, className, children, ...rest }: StatusCardRowProps): import("react").JSX.Element;
+export interface StatusCardFooterProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    external?: boolean;
+}
+/** Faint footer line — an overflow link ("4 more…") or a plain summary. */
+export declare function StatusCardFooter({ external, href, className, ...rest }: StatusCardFooterProps): import("react").JSX.Element;
+/** Empty-state line under the head ("No open issues"). */
+export declare function StatusCardEmpty({ className, ...rest }: HTMLAttributes<HTMLParagraphElement>): import("react").JSX.Element;

package/dist/StatusCard.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cx } from "./cx.js";
+import { replayFlash, statusCardAttrs } from "./status-card.js";
+export function StatusCard({ title, href, external, prefix, tone, attention, changedAt, watermark, meta, note, className, children, ...rest }) {
+    const root = useRef(null);
+    useEffect(() => {
+        if (changedAt && root.current)
+            replayFlash(root.current);
+    }, [changedAt]);
+    const heading = (_jsxs(_Fragment, { children: [prefix !== undefined && _jsx("span", { className: "ld-status-card__prefix", children: prefix }), title] }));
+    return (_jsxs("div", { ref: root, ...statusCardAttrs(tone, attention, className), ...rest, children: [watermark !== undefined && (_jsx("span", { className: "ld-status-card__watermark", "aria-hidden": "true", children: watermark })), _jsxs("div", { className: "ld-status-card__head", children: [href ? (_jsx("a", { className: "ld-status-card__title", href: href, ...linkTarget(external), children: heading })) : (_jsx("span", { className: "ld-status-card__title", children: heading })), (meta !== undefined || note !== undefined) && (_jsxs("div", { className: "ld-status-card__meta", children: [meta, note !== undefined && _jsx("span", { className: "ld-status-card__note", children: note })] }))] }), children] }));
+}
+/** `<ul>` of rows — the card's list body. */
+export function StatusCardRows({ className, ...rest }) {
+    return _jsx("ul", { className: cx("ld-status-card__rows", className), ...rest });
+}
+/** One row: `<li>` wrapping an `<a>` when `href` is set, else a `<div>`. */
+export function StatusCardRow({ leading, trailing, external, href, className, children, ...rest }) {
+    const body = (_jsxs(_Fragment, { children: [leading !== undefined && _jsx("span", { className: "ld-status-card__row-lead", children: leading }), _jsx("span", { className: "ld-status-card__row-main", children: children }), trailing !== undefined && _jsx("span", { className: "ld-status-card__row-trail", children: trailing })] }));
+    const cls = cx("ld-status-card__row", className);
+    return (_jsx("li", { children: href ? (_jsx("a", { className: cls, href: href, ...linkTarget(external), ...rest, children: body })) : (_jsx("div", { className: cls, ...rest, children: body })) }));
+}
+/** Faint footer line — an overflow link ("4 more…") or a plain summary. */
+export function StatusCardFooter({ external, href, className, ...rest }) {
+    const cls = cx("ld-status-card__footer", className);
+    return href ? (_jsx("a", { className: cls, href: href, ...linkTarget(external), ...rest })) : (_jsx("div", { className: cls, ...rest }));
+}
+/** Empty-state line under the head ("No open issues"). */
+export function StatusCardEmpty({ className, ...rest }) {
+    return _jsx("p", { className: cx("ld-status-card__empty", className), ...rest });
+}
+function linkTarget(external) {
+    return external ? { target: "_blank", rel: "noopener noreferrer" } : {};
+}

package/dist/Stepper.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface StepItem {
+    id: string;
+    label: ReactNode;
+    /** Icon inside the node. Defaults to a check mark once complete, else the step number. */
+    icon?: ReactNode;
+}
+export interface StepperProps extends HTMLAttributes<HTMLOListElement> {
+    steps: StepItem[];
+    /** Index of the step in progress. Earlier steps are complete, later ones upcoming;
+     *  pass `steps.length` when everything is done. */
+    current: number;
+    /** Extra class for every step `<li>`. */
+    stepClassName?: string;
+}
+/** Horizontal milestone rail: labelled step nodes on a progress track. The
+ *  theme CSS fills the rail up to the current node from the state modifiers,
+ *  so `current` is the only piece of state. */
+export declare function Stepper({ steps, current, stepClassName, className, ...rest }: StepperProps): import("react").JSX.Element;

package/dist/Stepper.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+import { stepAttrs, stepState } from "./stepper-state.js";
+/** Horizontal milestone rail: labelled step nodes on a progress track. The
+ *  theme CSS fills the rail up to the current node from the state modifiers,
+ *  so `current` is the only piece of state. */
+export function Stepper({ steps, current, stepClassName, className, ...rest }) {
+    return (_jsx("ol", { className: cx("ld-stepper", className), ...rest, children: steps.map((step, index) => (_jsxs("li", { ...stepAttrs(index, current, stepClassName), children: [_jsx("span", { className: "ld-stepper__node", "aria-hidden": "true", children: step.icon ?? (stepState(index, current) === "complete" ? _jsx(CheckIcon, {}) : index + 1) }), _jsx("span", { className: "ld-stepper__label", children: step.label })] }, step.id))) }));
+}
+function CheckIcon() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M3 8.5l3 3 7-7" }) }));
+}

package/dist/Table.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes, KeyboardEvent, MouseEvent, TableHTMLAttributes } from "react";
+export type TableProps = TableHTMLAttributes<HTMLTableElement> & {
+    /** Clickable rows: pointer cursor, focus ring, selected state. Maps to .ld-table--interactive. */
+    interactive?: boolean;
+};
+/** Styled `<table>`. Compose with native thead/tbody/th/td; use TableRow for clickable body rows. */
+export declare function Table({ interactive, className, ...rest }: TableProps): import("react").JSX.Element;
+export type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
+    /** Row activation from a click or Enter/Space. Makes the row focusable. Clicks on
+     *  nested controls (links, buttons, inputs) and text selections don't activate. */
+    onActivate?: (event: MouseEvent<HTMLTableRowElement> | KeyboardEvent<HTMLTableRowElement>) => void;
+    /** Lit selected state (`aria-selected`). Omit for rows that can't be selected. */
+    selected?: boolean;
+};
+/** Body row. With `onActivate` it is keyboard-operable; pair it with `<Table interactive>`
+ *  so the theme shows the pointer and focus ring. */
+export declare function TableRow({ onActivate, selected, onClick, onKeyDown, ...rest }: TableRowProps): import("react").JSX.Element;

package/dist/Table.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isRowActivationClick, isRowActivationKey, ROW_NESTED_CONTROLS, tableAttrs, tableRowAttrs } from "./table-state.js";
+/** Styled `<table>`. Compose with native thead/tbody/th/td; use TableRow for clickable body rows. */
+export function Table({ interactive, className, ...rest }) {
+    return _jsx("table", { ...tableAttrs({ interactive, className }), ...rest });
+}
+/** Body row. With `onActivate` it is keyboard-operable; pair it with `<Table interactive>`
+ *  so the theme shows the pointer and focus ring. */
+export function TableRow({ onActivate, selected, onClick, onKeyDown, ...rest }) {
+    if (!onActivate)
+        return _jsx("tr", { ...tableRowAttrs({ selected }), onClick: onClick, onKeyDown: onKeyDown, ...rest });
+    function handleClick(e) {
+        onClick?.(e);
+        if (e.defaultPrevented)
+            return;
+        const hit = e.target.closest(ROW_NESTED_CONTROLS);
+        const nested = hit !== null && hit !== e.currentTarget && e.currentTarget.contains(hit);
+        if (isRowActivationClick(nested, window.getSelection()?.toString() ?? ""))
+            onActivate(e);
+    }
+    function handleKeyDown(e) {
+        onKeyDown?.(e);
+        if (e.defaultPrevented || !isRowActivationKey(e.key, e.target === e.currentTarget))
+            return;
+        e.preventDefault(); // Space would scroll the page
+        onActivate(e);
+    }
+    return (_jsx("tr", { ...tableRowAttrs({ activatable: true, selected }), onClick: handleClick, onKeyDown: handleKeyDown, ...rest }));
+}

package/dist/Tabs.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { cx } from "./cx.js";
+import { useSlideDir } from "./useSlideDir.js";
 export function Tabs({ items, active, defaultActive, onChange }) {
     const [internal, setInternal] = useState(defaultActive ?? items[0]?.id);
     const current = active ?? internal;
@@ -9,5 +10,7 @@ export function Tabs({ items, active, defaultActive, onChange }) {
         onChange?.(id);
     };
     const activeItem = items.find((t) => t.id === current);
-    return (_jsxs("div", { children: [_jsx("div", { role: "tablist", className: "ld-tabs", children: items.map((t) => (_jsx("button", { role: "tab", type: "button", "aria-selected": t.id === current, className: cx("ld-tab", t.id === current && "ld-tab--active"), onClick: () => select(t.id), children: t.label }, t.id))) }), _jsx("div", { role: "tabpanel", className: "ld-tabpanel", children: activeItem?.content })] }));
+    // data-ld-dir for the theme's sliding underline: which edge leads
+    const tablist = useSlideDir('[aria-selected="true"]');
+    return (_jsxs("div", { children: [_jsx("div", { ref: tablist, role: "tablist", className: "ld-tabs", children: items.map((t) => (_jsx("button", { role: "tab", type: "button", "aria-selected": t.id === current, className: cx("ld-tab", t.id === current && "ld-tab--active"), onClick: () => select(t.id), children: t.label }, t.id))) }), _jsx("div", { role: "tabpanel", className: "ld-tabpanel", children: activeItem?.content })] }));
 }

package/dist/button-group.d.ts

@@ -0,0 +1,7 @@
+export interface ButtonGroupAttrs {
+    className: string;
+    role: "group";
+}
+/** Root class list and role for the group track. `block` stretches it to the
+ *  row with equal-width segments. */
+export declare function buttonGroupAttrs(block?: boolean, className?: string): ButtonGroupAttrs;

package/dist/button-group.js

@@ -0,0 +1,11 @@
+// Pure attribute logic behind ButtonGroup, kept DOM-free so it can be tested
+// under node:test without a renderer (so it imports nothing — Node runs the
+// .ts source and cannot resolve the .js specifiers the build uses).
+/** Root class list and role for the group track. `block` stretches it to the
+ *  row with equal-width segments. */
+export function buttonGroupAttrs(block, className) {
+    return {
+        className: ["ld-btn-group", block && "ld-btn-group--block", className].filter(Boolean).join(" "),
+        role: "group",
+    };
+}

package/dist/copy-state.d.ts

@@ -0,0 +1,14 @@
+/** How long the copied / failed state holds before the control reverts. */
+export declare const COPIED_MS = 1500;
+export type CopyStatus = "idle" | "copied" | "failed";
+/** The slice of `navigator.clipboard` the copy control needs. */
+export interface ClipboardLike {
+    writeText(text: string): Promise<void>;
+}
+/** Write `text` to the clipboard. Never throws: a missing clipboard (insecure
+ *  context, old browser) or a rejected write (permission denied) is "failed". */
+export declare function copyText(text: string, clipboard?: ClipboardLike | undefined): Promise<"copied" | "failed">;
+/** Value for the button's `data-ld-copy` hook; absent while idle. */
+export declare function copyDataAttr(status: CopyStatus): "copied" | "failed" | undefined;
+/** Text for the polite live region; empty while idle so nothing is announced. */
+export declare function copyAnnouncement(status: CopyStatus): string;

package/dist/copy-state.js

@@ -0,0 +1,31 @@
+// Pure copy logic behind CodeBlock, kept DOM-free so it can be tested under
+// node:test without a renderer (so it imports nothing — Node runs the .ts
+// source and cannot resolve the .js specifiers the build uses).
+/** How long the copied / failed state holds before the control reverts. */
+export const COPIED_MS = 1500;
+/** Write `text` to the clipboard. Never throws: a missing clipboard (insecure
+ *  context, old browser) or a rejected write (permission denied) is "failed". */
+export async function copyText(text, clipboard = globalThis.navigator
+    ?.clipboard) {
+    if (!clipboard)
+        return "failed";
+    try {
+        await clipboard.writeText(text);
+        return "copied";
+    }
+    catch {
+        return "failed";
+    }
+}
+/** Value for the button's `data-ld-copy` hook; absent while idle. */
+export function copyDataAttr(status) {
+    return status === "idle" ? undefined : status;
+}
+/** Text for the polite live region; empty while idle so nothing is announced. */
+export function copyAnnouncement(status) {
+    if (status === "copied")
+        return "Copied to clipboard";
+    if (status === "failed")
+        return "Copy failed";
+    return "";
+}

package/dist/feedback.d.ts

@@ -2,8 +2,12 @@ import type { HTMLAttributes, ReactNode } from "react";
 export type SemanticVariant = "info" | "success" | "warning" | "danger";
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     variant?: SemanticVariant | "primary";
+    /** `sm` is the 9px dashboard pill used in StatusCard meta rows. */
+    size?: "sm";
+    /** Solid warning fill with a breathing glow — the one call to action. */
+    pulse?: boolean;
 }
-export declare function Badge({ variant, className, ...rest }: BadgeProps): import("react").JSX.Element;
+export declare function Badge({ variant, size, pulse, className, ...rest }: BadgeProps): import("react").JSX.Element;
 export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     variant?: SemanticVariant;
     title?: ReactNode;

package/dist/feedback.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from "./cx.js";
-export function Badge({ variant, className, ...rest }) {
-    return _jsx("span", { className: cx("ld-badge", variant && `ld-badge--${variant}`, className), ...rest });
+export function Badge({ variant, size, pulse, className, ...rest }) {
+    return (_jsx("span", { className: cx("ld-badge", variant && `ld-badge--${variant}`, size && `ld-badge--${size}`, pulse && "ld-badge--pulse", className), ...rest }));
 }
 export function Alert({ variant = "info", title, className, children, ...rest }) {
     return (_jsxs("div", { role: "alert", className: cx("ld-alert", `ld-alert--${variant}`, className), ...rest, children: [title !== undefined && _jsx("span", { className: "ld-alert__title", children: title }), children] }));

package/dist/hold.d.ts

@@ -0,0 +1,31 @@
+/** Hold-to-confirm state machine, framework-free so it can be unit-tested
+ * without a DOM. HoldButton drives it from pointer/keyboard events. */
+export type HoldState = "idle" | "holding" | "fired";
+export interface HoldOptions {
+    /** Commitment window in ms, resolved at the moment a hold starts. */
+    duration: () => number;
+    /** Called with progress in [0, 1] on every frame, and with 0 on reset. */
+    onProgress: (progress: number) => void;
+    /** Fires exactly once per completed hold. */
+    onConfirm: () => void;
+    onStateChange?: (state: HoldState) => void;
+    /** How long the "fired" state lingers before returning to idle (ms). */
+    firedFor?: number;
+    now?: () => number;
+    requestFrame?: (cb: () => void) => number;
+    cancelFrame?: (id: number) => void;
+    setTimer?: (cb: () => void, ms: number) => number;
+    clearTimer?: (id: number) => void;
+}
+export interface HoldController {
+    readonly state: HoldState;
+    /** Begin a hold. Ignored unless idle. */
+    start(): void;
+    /** Abort an in-progress hold without firing. Ignored unless holding. */
+    cancel(): void;
+    /** Skip the hold and fire immediately (keyboard-tap escape hatch). */
+    fire(): void;
+    /** Cancel everything and drop pending timers. */
+    dispose(): void;
+}
+export declare function createHoldController(opts: HoldOptions): HoldController;

package/dist/hold.js

@@ -0,0 +1,82 @@
+/** Hold-to-confirm state machine, framework-free so it can be unit-tested
+ * without a DOM. HoldButton drives it from pointer/keyboard events. */
+export function createHoldController(opts) {
+    const now = opts.now ?? (() => performance.now());
+    const requestFrame = opts.requestFrame ?? ((cb) => requestAnimationFrame(cb));
+    const cancelFrame = opts.cancelFrame ?? ((id) => cancelAnimationFrame(id));
+    const setTimer = opts.setTimer ?? ((cb, ms) => setTimeout(cb, ms));
+    const clearTimer = opts.clearTimer ?? ((id) => clearTimeout(id));
+    const firedFor = opts.firedFor ?? 600;
+    let state = "idle";
+    let startedAt = 0;
+    let duration = 0;
+    let frame;
+    let timer;
+    const setState = (next) => {
+        if (state === next)
+            return;
+        state = next;
+        opts.onStateChange?.(next);
+    };
+    const stopFrame = () => {
+        if (frame !== undefined)
+            cancelFrame(frame);
+        frame = undefined;
+    };
+    const fire = () => {
+        stopFrame();
+        setState("fired");
+        opts.onProgress(1);
+        opts.onConfirm();
+        timer = setTimer(() => {
+            timer = undefined;
+            setState("idle");
+            opts.onProgress(0);
+        }, firedFor);
+    };
+    const tick = () => {
+        frame = undefined;
+        if (state !== "holding")
+            return;
+        const elapsed = now() - startedAt;
+        if (elapsed >= duration) {
+            fire();
+            return;
+        }
+        opts.onProgress(Math.max(0, elapsed / duration));
+        frame = requestFrame(tick);
+    };
+    return {
+        get state() {
+            return state;
+        },
+        start() {
+            if (state !== "idle")
+                return;
+            duration = Math.max(0, opts.duration());
+            startedAt = now();
+            setState("holding");
+            opts.onProgress(0);
+            frame = requestFrame(tick);
+        },
+        cancel() {
+            if (state !== "holding")
+                return;
+            stopFrame();
+            setState("idle");
+            opts.onProgress(0);
+        },
+        fire() {
+            if (state === "fired")
+                return;
+            fire();
+        },
+        dispose() {
+            stopFrame();
+            if (timer !== undefined)
+                clearTimer(timer);
+            timer = undefined;
+            state = "idle";
+        },
+    };
+}

package/dist/icon-button.d.ts

@@ -0,0 +1,23 @@
+export interface IconButtonOptions {
+    /** Accessible name; also the hover tooltip unless `title` is given. */
+    label: string;
+    /** Lit state. On a link it also sets `aria-current="page"`. */
+    active?: boolean;
+    /** "danger" tints the glyph red on hover. */
+    variant?: "default" | "danger";
+    /** Explicit tooltip; overrides the one derived from `label`. */
+    title?: string;
+    /** The rendered element is a native `<button>` (not `<a>` / a router Link). */
+    isButton?: boolean;
+    className?: string;
+}
+export interface IconButtonAttrs {
+    className: string;
+    "aria-label": string;
+    title: string;
+    type?: "button";
+    "aria-current"?: "page";
+}
+/** Class list and ARIA for an icon-only control. A native button defaults to
+ *  `type="button"` so it never submits a surrounding form. */
+export declare function iconButtonAttrs({ label, active, variant, title, isButton, className, }: IconButtonOptions): IconButtonAttrs;

package/dist/icon-button.js

@@ -0,0 +1,24 @@
+// Pure attribute logic behind IconButton, kept DOM-free so it can be tested
+// under node:test without a renderer (so it imports nothing — Node runs the
+// .ts source and cannot resolve the .js specifiers the build uses).
+/** Class list and ARIA for an icon-only control. A native button defaults to
+ *  `type="button"` so it never submits a surrounding form. */
+export function iconButtonAttrs({ label, active, variant = "default", title, isButton = true, className, }) {
+    const attrs = {
+        className: [
+            "ld-icon-btn",
+            active && "ld-icon-btn--active",
+            variant === "danger" && "ld-icon-btn--danger",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "),
+        "aria-label": label,
+        title: title ?? label,
+    };
+    if (isButton)
+        attrs.type = "button";
+    else if (active)
+        attrs["aria-current"] = "page";
+    return attrs;
+}

package/dist/index.d.ts

@@ -1,8 +1,32 @@
 export { Button, type ButtonProps } from "./Button.js";
+export { ButtonGroup, type ButtonGroupProps } from "./ButtonGroup.js";
+export { buttonGroupAttrs } from "./button-group.js";
+export { IconButton, type IconButtonProps } from "./IconButton.js";
+export { iconButtonAttrs, type IconButtonOptions } from "./icon-button.js";
+export { HoldButton, type HoldButtonProps } from "./HoldButton.js";
+export { createHoldController, type HoldController, type HoldOptions, type HoldState } from "./hold.js";
 export { Card, type CardProps } from "./Card.js";
+export { Table, TableRow, type TableProps, type TableRowProps } from "./Table.js";
+export { tableAttrs, tableRowAttrs, isRowActivationKey, isRowActivationClick, ROW_NESTED_CONTROLS, type TableOptions, type TableRowOptions, } from "./table-state.js";
+export { LogBlock, type LogBlockProps } from "./LogBlock.js";
+export { logAttrs, isPinnedToBottom, LOG_PIN_TOLERANCE, type LogOptions } from "./log-state.js";
+export { CodeBlock, type CodeBlockProps } from "./CodeBlock.js";
+export { copyText, copyDataAttr, copyAnnouncement, COPIED_MS, type CopyStatus, type ClipboardLike, } from "./copy-state.js";
+export { StatusCard, StatusCardRows, StatusCardRow, StatusCardFooter, StatusCardEmpty, type StatusCardProps, type StatusCardRowProps, type StatusCardFooterProps, } from "./StatusCard.js";
+export { attentionTone, statusCardAttrs, type StatusTone } from "./status-card.js";
+export { Stepper, type StepperProps, type StepItem } from "./Stepper.js";
+export { stepAttrs, stepState, type StepState } from "./stepper-state.js";
 export { NavLink, type NavLinkProps } from "./NavLink.js";
 export { Input, Textarea, Select, Label, Field, Checkbox, Radio, Switch, type InputProps, type TextareaProps, type SelectProps, type LabelProps, } from "./form.js";
 export { Badge, Alert, Progress, Spinner, type BadgeProps, type AlertProps, type ProgressProps, type SemanticVariant, } from "./feedback.js";
 export { Dialog, type DialogProps } from "./Dialog.js";
 export { Tabs, type TabsProps, type TabItem } from "./Tabs.js";
+export { slideDir, type SlideDir } from "./slide-dir.js";
+export { useSlideDir } from "./useSlideDir.js";
 export { cx } from "./cx.js";
+export { AppShell, useShell, useShellNarrow, type AppShellProps, type ShellContextValue } from "./AppShell.js";
+export { AppHeader, ShellToggle, TopNav, TopNavItem, type AppHeaderProps, type ShellToggleProps, type TopNavProps, type TopNavItemProps } from "./AppHeader.js";
+export { SideNav, SideNavSection, SideNavItem, type SideNavProps, type SideNavSectionProps, type SideNavItemProps, } from "./SideNav.js";
+export { Page, PageHeader, Grid, Split, AsideLayout, Center, type PageProps, type PageHeaderProps, type GridProps, type SplitProps, type AsideLayoutProps, type CenterProps, } from "./Page.js";
+export { navExpanded, shellAttrs, toggleNav, SHELL_NARROW_QUERY, type ShellNavState } from "./shell-state.js";
+export type { PolyProps } from "./poly.js";

package/dist/index.js

@@ -1,8 +1,31 @@
 export { Button } from "./Button.js";
+export { ButtonGroup } from "./ButtonGroup.js";
+export { buttonGroupAttrs } from "./button-group.js";
+export { IconButton } from "./IconButton.js";
+export { iconButtonAttrs } from "./icon-button.js";
+export { HoldButton } from "./HoldButton.js";
+export { createHoldController } from "./hold.js";
 export { Card } from "./Card.js";
+export { Table, TableRow } from "./Table.js";
+export { tableAttrs, tableRowAttrs, isRowActivationKey, isRowActivationClick, ROW_NESTED_CONTROLS, } from "./table-state.js";
+export { LogBlock } from "./LogBlock.js";
+export { logAttrs, isPinnedToBottom, LOG_PIN_TOLERANCE } from "./log-state.js";
+export { CodeBlock } from "./CodeBlock.js";
+export { copyText, copyDataAttr, copyAnnouncement, COPIED_MS, } from "./copy-state.js";
+export { StatusCard, StatusCardRows, StatusCardRow, StatusCardFooter, StatusCardEmpty, } from "./StatusCard.js";
+export { attentionTone, statusCardAttrs } from "./status-card.js";
+export { Stepper } from "./Stepper.js";
+export { stepAttrs, stepState } from "./stepper-state.js";
 export { NavLink } from "./NavLink.js";
 export { Input, Textarea, Select, Label, Field, Checkbox, Radio, Switch, } from "./form.js";
 export { Badge, Alert, Progress, Spinner, } from "./feedback.js";
 export { Dialog } from "./Dialog.js";
 export { Tabs } from "./Tabs.js";
+export { slideDir } from "./slide-dir.js";
+export { useSlideDir } from "./useSlideDir.js";
 export { cx } from "./cx.js";
+export { AppShell, useShell, useShellNarrow } from "./AppShell.js";
+export { AppHeader, ShellToggle, TopNav, TopNavItem } from "./AppHeader.js";
+export { SideNav, SideNavSection, SideNavItem, } from "./SideNav.js";
+export { Page, PageHeader, Grid, Split, AsideLayout, Center, } from "./Page.js";
+export { navExpanded, shellAttrs, toggleNav, SHELL_NARROW_QUERY } from "./shell-state.js";

package/dist/log-state.d.ts

@@ -0,0 +1,20 @@
+/** How close to the bottom (px) still counts as "reading the tail". */
+export declare const LOG_PIN_TOLERANCE = 8;
+export interface LogOptions {
+    /** Cap on the block's height (number = px); sets --ld-log-max-height. */
+    maxHeight?: number | string;
+    /** Announce appended lines to assistive tech (role="log"). Default true. */
+    live?: boolean;
+    className?: string;
+}
+export interface LogAttrs {
+    className: string;
+    role?: "log";
+    style?: Record<string, string>;
+}
+/** Class list, live-region role, and height variable for the `<pre>`. */
+export declare function logAttrs({ maxHeight, live, className }: LogOptions): LogAttrs;
+/** True when the viewport sits at (or within tolerance of) the bottom — the
+ *  reader is following the tail, so new output should keep it there. Content
+ *  that doesn't overflow is always pinned. */
+export declare function isPinnedToBottom(scrollTop: number, scrollHeight: number, clientHeight: number, tolerance?: number): boolean;

package/dist/log-state.js

@@ -0,0 +1,21 @@
+// Pure attribute and follow logic behind LogBlock, kept DOM-free so it can be
+// tested under node:test without a renderer (so it imports nothing — Node runs
+// the .ts source and cannot resolve .js specifiers).
+/** How close to the bottom (px) still counts as "reading the tail". */
+export const LOG_PIN_TOLERANCE = 8;
+/** Class list, live-region role, and height variable for the `<pre>`. */
+export function logAttrs({ maxHeight, live = true, className }) {
+    const attrs = { className: ["ld-pre", "ld-pre--log", className].filter(Boolean).join(" ") };
+    if (live)
+        attrs.role = "log";
+    if (maxHeight !== undefined) {
+        attrs.style = { "--ld-log-max-height": typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight };
+    }
+    return attrs;
+}
+/** True when the viewport sits at (or within tolerance of) the bottom — the
+ *  reader is following the tail, so new output should keep it there. Content
+ *  that doesn't overflow is always pinned. */
+export function isPinnedToBottom(scrollTop, scrollHeight, clientHeight, tolerance = LOG_PIN_TOLERANCE) {
+    return scrollHeight - clientHeight - scrollTop <= tolerance;
+}

package/dist/poly.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithoutRef, ElementType } from "react";
+/** Props of a component that renders `as` (default `<a>`) — pass a router's
+ *  Link to keep client-side navigation. Own props win over the element's. */
+export type PolyProps<E extends ElementType, Own> = Own & {
+    as?: E;
+} & Omit<ComponentPropsWithoutRef<E>, keyof Own | "as">;

package/dist/poly.js

@@ -0,0 +1 @@
+export {};

package/dist/shell-state.d.ts

@@ -0,0 +1,22 @@
+/** Below this width the side nav leaves the grid and becomes a drawer. The
+ *  theme CSS hard-codes the same 48rem (media queries cannot read tokens). */
+export declare const SHELL_NARROW_QUERY = "(max-width: 48rem)";
+export interface ShellNavState {
+    /** Wide viewports: the nav is an icon-only rail. Kept across resizes. */
+    collapsed: boolean;
+    /** Narrow viewports: the drawer is open. Ignored by the CSS when wide. */
+    open: boolean;
+}
+/** The one toggle button means "collapse the rail" when wide and "open the
+ *  drawer" when narrow; each state survives the other viewport untouched. */
+export declare function toggleNav(state: ShellNavState, narrow: boolean): ShellNavState;
+/** Whether the nav is visibly expanded, for the toggle's aria-expanded. */
+export declare function navExpanded(state: ShellNavState, narrow: boolean): boolean;
+export interface ShellAttrs {
+    className: string;
+    "data-ld-nav-collapsed"?: "";
+    "data-ld-nav-open"?: "";
+}
+/** Class list and state attributes for the `.ld-shell` root. The theme CSS
+ *  reads only these two presence attributes, so plain HTML can set them too. */
+export declare function shellAttrs(state: ShellNavState, className?: string): ShellAttrs;

package/dist/shell-state.js

@@ -0,0 +1,25 @@
+// Pure state logic behind AppShell, kept DOM-free so it can be tested under
+// node:test without a renderer (so it imports nothing — Node runs the .ts
+// source and cannot resolve the .js specifiers the build uses).
+/** Below this width the side nav leaves the grid and becomes a drawer. The
+ *  theme CSS hard-codes the same 48rem (media queries cannot read tokens). */
+export const SHELL_NARROW_QUERY = "(max-width: 48rem)";
+/** The one toggle button means "collapse the rail" when wide and "open the
+ *  drawer" when narrow; each state survives the other viewport untouched. */
+export function toggleNav(state, narrow) {
+    return narrow ? { ...state, open: !state.open } : { ...state, collapsed: !state.collapsed };
+}
+/** Whether the nav is visibly expanded, for the toggle's aria-expanded. */
+export function navExpanded(state, narrow) {
+    return narrow ? state.open : !state.collapsed;
+}
+/** Class list and state attributes for the `.ld-shell` root. The theme CSS
+ *  reads only these two presence attributes, so plain HTML can set them too. */
+export function shellAttrs(state, className) {
+    const attrs = { className: ["ld-shell", className].filter(Boolean).join(" ") };
+    if (state.collapsed)
+        attrs["data-ld-nav-collapsed"] = "";
+    if (state.open)
+        attrs["data-ld-nav-open"] = "";
+    return attrs;
+}

package/dist/slide-dir.d.ts

@@ -0,0 +1,5 @@
+export type SlideDir = "forward" | "back";
+/** Which way the active item moved between two child indexes. `undefined` when
+ *  there is no travel to describe — nothing was active before or after (-1),
+ *  or the index did not change — so the caller leaves the last direction alone. */
+export declare function slideDir(prev: number, next: number): SlideDir | undefined;

package/dist/slide-dir.js

@@ -0,0 +1,12 @@
+// Pure direction logic behind the sliding indicator (Tabs underline,
+// ButtonGroup pill), kept DOM-free so it can be tested under node:test without
+// a renderer (so it imports nothing — Node runs the .ts source and cannot
+// resolve the .js specifiers the build uses).
+/** Which way the active item moved between two child indexes. `undefined` when
+ *  there is no travel to describe — nothing was active before or after (-1),
+ *  or the index did not change — so the caller leaves the last direction alone. */
+export function slideDir(prev, next) {
+    if (prev < 0 || next < 0 || prev === next)
+        return undefined;
+    return next > prev ? "forward" : "back";
+}