@lepid-labs/ui-react 1.0.1 → 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/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/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 })] }));
+}

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/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/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,9 +1,17 @@
 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";
@@ -16,3 +24,9 @@ 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,9 +1,17 @@
 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";
@@ -16,3 +24,8 @@ 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/table-state.d.ts

@@ -0,0 +1,28 @@
+/** Descendants that own their own click/keys; a row never double-fires for them. */
+export declare const ROW_NESTED_CONTROLS = "a[href], button, input, select, textarea, summary, label, [role=\"button\"], [role=\"link\"], [contenteditable=\"true\"]";
+export interface TableOptions {
+    /** Rows are clickable: pointer cursor, focus ring, selected state. */
+    interactive?: boolean;
+    className?: string;
+}
+/** Class list for the `<table>`. */
+export declare function tableAttrs({ interactive, className }: TableOptions): {
+    className: string;
+};
+export interface TableRowOptions {
+    /** The row has an activation handler, so it joins the tab order. */
+    activatable?: boolean;
+    /** Selected state; omitted leaves aria-selected off entirely. */
+    selected?: boolean;
+}
+export interface TableRowAttrs {
+    tabIndex?: 0;
+    "aria-selected"?: boolean;
+}
+/** Focus and selection ARIA for a body row. */
+export declare function tableRowAttrs({ activatable, selected }: TableRowOptions): TableRowAttrs;
+/** Enter or Space on the focused row itself (not a control inside it) activates it. */
+export declare function isRowActivationKey(key: string, fromRow: boolean): boolean;
+/** A click activates the row unless it landed on a nested control (`hit` is the
+ *  closest ROW_NESTED_CONTROLS match inside the row) or finished a text selection. */
+export declare function isRowActivationClick(hitNestedControl: boolean, selectedText: string): boolean;

package/dist/table-state.js

@@ -0,0 +1,29 @@
+// Pure attribute and activation logic behind Table / TableRow, 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).
+/** Descendants that own their own click/keys; a row never double-fires for them. */
+export const ROW_NESTED_CONTROLS = 'a[href], button, input, select, textarea, summary, label, [role="button"], [role="link"], [contenteditable="true"]';
+/** Class list for the `<table>`. */
+export function tableAttrs({ interactive, className }) {
+    return {
+        className: ["ld-table", interactive && "ld-table--interactive", className].filter(Boolean).join(" "),
+    };
+}
+/** Focus and selection ARIA for a body row. */
+export function tableRowAttrs({ activatable, selected }) {
+    const attrs = {};
+    if (activatable)
+        attrs.tabIndex = 0;
+    if (selected !== undefined)
+        attrs["aria-selected"] = selected;
+    return attrs;
+}
+/** Enter or Space on the focused row itself (not a control inside it) activates it. */
+export function isRowActivationKey(key, fromRow) {
+    return fromRow && (key === "Enter" || key === " ");
+}
+/** A click activates the row unless it landed on a nested control (`hit` is the
+ *  closest ROW_NESTED_CONTROLS match inside the row) or finished a text selection. */
+export function isRowActivationClick(hitNestedControl, selectedText) {
+    return !hitNestedControl && selectedText === "";
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lepid-labs/ui-react",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Shared React components styled by @lepid-labs/styles themes.",
   "license": "MIT",
   "repository": {