@abuzareal/contour-ui 0.1.0

package/dist/components/ui/Skeleton.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "../../lib/classNames.js";
+export default function Skeleton({ shape = "line", width, height, }) {
+    return (_jsx("span", { "aria-hidden": "true", className: cx("skeleton", `skeleton-${shape}`), style: { width, height } }));
+}

package/dist/components/ui/Slider.d.ts

@@ -0,0 +1,12 @@
+export type SliderProps = {
+    label: string;
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Formats the readout, e.g. (value) => `${value}%`. */
+    format?: (value: number) => string;
+    disabled?: boolean;
+};
+export default function Slider({ label, value, onChange, min, max, step, format, disabled, }: SliderProps): import("react").JSX.Element;

package/dist/components/ui/Slider.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Range slider with a filled acid track and a live value readout. */
+import { useId } from "react";
+export default function Slider({ label, value, onChange, min = 0, max = 100, step = 1, format = String, disabled, }) {
+    const id = useId();
+    const progress = max > min
+        ? Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100))
+        : 0;
+    return (_jsxs("div", { className: "slider", children: [_jsxs("div", { className: "slider-header mono", children: [_jsx("label", { htmlFor: id, className: "field-label", children: label }), _jsx("output", { htmlFor: id, children: format(value) })] }), _jsx("input", { id: id, type: "range", min: min, max: max, step: step, value: value, disabled: disabled, "aria-valuetext": format(value), style: { "--progress": `${progress}%` }, onChange: (event) => onChange(Number(event.target.value)) })] }));
+}

package/dist/components/ui/SocialIcons.d.ts

@@ -0,0 +1,6 @@
+/** Brand marks for social profiles (Lucide no longer ships brand icons). */
+export type SocialIconProps = {
+    size?: number;
+};
+export declare function GitHubIcon({ size }: SocialIconProps): import("react").JSX.Element;
+export declare function LinkedInIcon({ size }: SocialIconProps): import("react").JSX.Element;

package/dist/components/ui/SocialIcons.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function GitHubIcon({ size = 17 }) {
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { fill: "currentColor", d: "M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.3-3.1-.2-.4-.6-1.6 0-3.2 0 0 1-.3 3.4 1.2a11.5 11.5 0 0 1 6 0C17.3 4.7 18.3 5 18.3 5c.7 1.6.2 2.9.1 3.2.8.8 1.3 1.9 1.3 3.2 0 4.6-2.8 5.6-5.5 5.9.5.4.9 1.1.9 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3" }) }));
+}
+export function LinkedInIcon({ size = 17 }) {
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { fill: "currentColor", d: "M20.4 20.5h-3.6v-5.6c0-1.3 0-3-1.8-3s-2.1 1.4-2.1 2.9v5.7H9.3V9h3.4v1.6c.5-.9 1.6-1.8 3.4-1.8 3.6 0 4.3 2.4 4.3 5.5zM5.3 7.4a2.1 2.1 0 1 1 0-4.2 2.1 2.1 0 0 1 0 4.2M7.1 20.5H3.5V9h3.6zM22.2 0H1.8C.8 0 0 .8 0 1.7v20.6c0 .9.8 1.7 1.8 1.7h20.4c1 0 1.8-.8 1.8-1.7V1.7C24 .8 23.2 0 22.2 0" }) }));
+}

package/dist/components/ui/Spinner.d.ts

@@ -0,0 +1,6 @@
+export type SpinnerProps = {
+    size?: "sm" | "md" | "lg";
+    label?: string;
+    className?: string;
+};
+export default function Spinner({ size, label, className, }: SpinnerProps): import("react").JSX.Element;

package/dist/components/ui/Spinner.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Brand asterisk that spins as a loading indicator; announces its label to assistive tech. */
+import { Asterisk } from "lucide-react";
+import { cx } from "../../lib/classNames.js";
+const iconSizes = { sm: 16, md: 24, lg: 40 };
+export default function Spinner({ size = "md", label = "Loading", className, }) {
+    return (_jsxs("span", { role: "status", className: cx("spinner", `spinner-${size}`, className), children: [_jsx(Asterisk, { size: iconSizes[size], strokeWidth: 1.6, "aria-hidden": "true" }), _jsx("span", { className: "visually-hidden", children: label })] }));
+}

package/dist/components/ui/Stat.d.ts

@@ -0,0 +1,8 @@
+/** Headline number with an olive suffix and a mono caption, as in the About facts. */
+import type { ReactNode } from "react";
+export type StatProps = {
+    value: ReactNode;
+    label: string;
+    suffix?: string;
+};
+export default function Stat({ value, label, suffix }: StatProps): import("react").JSX.Element;

package/dist/components/ui/Stat.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Stat({ value, label, suffix }) {
+    return (_jsxs("div", { className: "stat", children: [_jsxs("strong", { children: [value, suffix && _jsx("span", { className: "stat-suffix", children: suffix })] }), _jsx("span", { className: "mono", children: label })] }));
+}

package/dist/components/ui/Stepper.d.ts

@@ -0,0 +1,10 @@
+export type StepperProps = {
+    steps: {
+        label: string;
+        description?: string;
+    }[];
+    /** Zero-based index of the step in progress. */
+    current: number;
+    label?: string;
+};
+export default function Stepper({ steps, current, label, }: StepperProps): import("react").JSX.Element;

package/dist/components/ui/Stepper.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Numbered progress steps joined by a rule; completed steps show a check. */
+import { Check } from "lucide-react";
+import { cx } from "../../lib/classNames.js";
+import { formatIndex } from "../../lib/format.js";
+export default function Stepper({ steps, current, label = "Progress", }) {
+    return (_jsx("ol", { className: "stepper", "aria-label": label, children: steps.map((step, index) => {
+            const state = index < current
+                ? "complete"
+                : index === current
+                    ? "current"
+                    : "upcoming";
+            return (_jsxs("li", { className: cx("stepper-step", `stepper-${state}`), "aria-current": state === "current" ? "step" : undefined, children: [_jsx("span", { className: "stepper-marker mono", "aria-hidden": "true", children: state === "complete" ? (_jsx(Check, { size: 14, strokeWidth: 2.5 })) : (formatIndex(index + 1)) }), _jsxs("span", { className: "stepper-text", children: [_jsx("span", { className: "stepper-label", children: step.label }), step.description && (_jsx("span", { className: "stepper-description mono", children: step.description })), _jsxs("span", { className: "visually-hidden", children: ["(", state, ")"] })] })] }, step.label));
+        }) }));
+}

package/dist/components/ui/Switch.d.ts

@@ -0,0 +1,8 @@
+export type SwitchProps = {
+    label: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    description?: string;
+    disabled?: boolean;
+};
+export default function Switch({ label, checked, onChange, description, disabled, }: SwitchProps): import("react").JSX.Element;

package/dist/components/ui/Switch.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** On/off switch (role="switch") with a pill track that fills acid when on. */
+import { useId } from "react";
+export default function Switch({ label, checked, onChange, description, disabled, }) {
+    const id = useId();
+    return (_jsxs("div", { className: "switch", children: [_jsx("button", { id: id, type: "button", role: "switch", "aria-checked": checked, "aria-describedby": description ? `${id}-description` : undefined, disabled: disabled, className: "switch-track", onClick: () => onChange(!checked), children: _jsx("span", { className: "switch-thumb" }) }), _jsxs("label", { htmlFor: id, className: "choice-text", children: [_jsx("span", { className: "choice-label", children: label }), description && (_jsx("span", { id: `${id}-description`, className: "choice-description", children: description }))] })] }));
+}

package/dist/components/ui/Tabs.d.ts

@@ -0,0 +1,13 @@
+/** Tabs with a sliding underline indicator, arrow-key navigation, and linked panels. */
+import { type ReactNode } from "react";
+export type TabItem = {
+    id: string;
+    label: string;
+    content: ReactNode;
+};
+export type TabsProps = {
+    label: string;
+    tabs: TabItem[];
+    defaultTabId?: string;
+};
+export default function Tabs({ label, tabs, defaultTabId }: TabsProps): import("react").JSX.Element;

package/dist/components/ui/Tabs.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Tabs with a sliding underline indicator, arrow-key navigation, and linked panels. */
+import { useId, useLayoutEffect, useRef, useState, } from "react";
+import { nextIndexForKey } from "../../lib/keyboard.js";
+export default function Tabs({ label, tabs, defaultTabId }) {
+    const baseId = useId();
+    const [activeId, setActiveId] = useState(defaultTabId ?? tabs[0]?.id ?? "");
+    const [indicator, setIndicator] = useState({ left: 0, width: 0 });
+    const tabRefs = useRef([]);
+    const activeIndex = Math.max(0, tabs.findIndex((tab) => tab.id === activeId));
+    const selectedId = tabs[activeIndex]?.id;
+    useLayoutEffect(() => {
+        const measure = () => {
+            const tab = tabRefs.current[activeIndex];
+            if (tab)
+                setIndicator({ left: tab.offsetLeft, width: tab.offsetWidth });
+        };
+        measure();
+        window.addEventListener("resize", measure);
+        return () => window.removeEventListener("resize", measure);
+    }, [activeIndex]);
+    const select = (index) => {
+        setActiveId(tabs[index].id);
+        tabRefs.current[index]?.focus();
+    };
+    return (_jsxs("div", { className: "tabs", children: [_jsx("div", { className: "tabs-list", role: "tablist", "aria-label": label, style: {
+                    "--indicator-left": `${indicator.left}px`,
+                    "--indicator-width": `${indicator.width}px`,
+                }, children: tabs.map((tab, index) => {
+                    const selected = tab.id === selectedId;
+                    return (_jsx("button", { ref: (element) => {
+                            tabRefs.current[index] = element;
+                        }, id: `${baseId}-tab-${tab.id}`, type: "button", role: "tab", "aria-selected": selected, "aria-controls": `${baseId}-panel-${tab.id}`, tabIndex: selected ? 0 : -1, className: "tabs-tab", onClick: () => setActiveId(tab.id), onKeyDown: (event) => {
+                            const next = nextIndexForKey(event.key, index, tabs.length);
+                            if (next === null)
+                                return;
+                            event.preventDefault();
+                            select(next);
+                        }, children: tab.label }, tab.id));
+                }) }), tabs.map((tab) => (_jsx("div", { id: `${baseId}-panel-${tab.id}`, role: "tabpanel", "aria-labelledby": `${baseId}-tab-${tab.id}`, hidden: tab.id !== selectedId, tabIndex: 0, className: "tabs-panel", children: tab.content }, tab.id)))] }));
+}

package/dist/components/ui/Tag.d.ts

@@ -0,0 +1,5 @@
+export type TagProps = {
+    children: string;
+    onRemove?: () => void;
+};
+export default function Tag({ children, onRemove }: TagProps): import("react").JSX.Element;

package/dist/components/ui/Tag.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Mono "+ tag" label (as in project notes); becomes a removable chip when given onRemove. */
+import { X } from "lucide-react";
+export default function Tag({ children, onRemove }) {
+    if (!onRemove)
+        return _jsx("span", { className: "tag mono", children: children });
+    return (_jsxs("span", { className: "tag tag-removable mono", children: [children, _jsx("button", { type: "button", className: "tag-remove", "aria-label": `Remove ${children}`, onClick: onRemove, children: _jsx(X, { size: 12 }) })] }));
+}

package/dist/components/ui/TextArea.d.ts

@@ -0,0 +1,10 @@
+/** Multi-line text input with optional auto-resize and character counter. */
+import { type TextareaHTMLAttributes } from "react";
+export type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "id"> & {
+    label: string;
+    hint?: string;
+    error?: string;
+    /** Grows with its content instead of scrolling. */
+    autoResize?: boolean;
+};
+export default function TextArea({ label, hint, error, autoResize, maxLength, onChange, rows, ...rest }: TextAreaProps): import("react").JSX.Element;

package/dist/components/ui/TextArea.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Multi-line text input with optional auto-resize and character counter. */
+import { useId, useLayoutEffect, useRef, useState, } from "react";
+import { fieldDescribedBy } from "../../lib/a11y.js";
+import Field from "./Field.js";
+export default function TextArea({ label, hint, error, autoResize = false, maxLength, onChange, rows = 3, ...rest }) {
+    const id = useId();
+    const ref = useRef(null);
+    const [length, setLength] = useState(String(rest.value ?? rest.defaultValue ?? "").length);
+    const fitContent = () => {
+        const element = ref.current;
+        if (!autoResize || !element)
+            return;
+        element.style.height = "auto";
+        element.style.height = `${element.scrollHeight}px`;
+    };
+    useLayoutEffect(fitContent);
+    return (_jsx(Field, { id: id, label: label, hint: hint, error: error, required: rest.required, disabled: rest.disabled, counter: maxLength ? `${length}/${maxLength}` : undefined, children: _jsx("div", { className: "field-control", children: _jsx("textarea", { ...rest, ref: ref, id: id, rows: rows, maxLength: maxLength, "data-auto-resize": autoResize || undefined, "aria-invalid": error ? true : undefined, "aria-describedby": fieldDescribedBy(id, hint, error), onChange: (event) => {
+                    setLength(event.target.value.length);
+                    fitContent();
+                    onChange?.(event);
+                } }) }) }));
+}

package/dist/components/ui/TextField.d.ts

@@ -0,0 +1,12 @@
+/** Single-line text input with underline styling, optional icon/adornment, and character counter. */
+import { type InputHTMLAttributes, type ReactNode } from "react";
+export type TextFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, "id"> & {
+    label: string;
+    hint?: string;
+    error?: string;
+    hideLabel?: boolean;
+    leadingIcon?: ReactNode;
+    /** Content after the input, e.g. a unit or an icon button. */
+    trailing?: ReactNode;
+};
+export default function TextField({ label, hint, error, hideLabel, leadingIcon, trailing, maxLength, onChange, ...rest }: TextFieldProps): import("react").JSX.Element;

package/dist/components/ui/TextField.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Single-line text input with underline styling, optional icon/adornment, and character counter. */
+import { useId, useState, } from "react";
+import { fieldDescribedBy } from "../../lib/a11y.js";
+import Field from "./Field.js";
+export default function TextField({ label, hint, error, hideLabel, leadingIcon, trailing, maxLength, onChange, ...rest }) {
+    const id = useId();
+    const [length, setLength] = useState(String(rest.value ?? rest.defaultValue ?? "").length);
+    return (_jsx(Field, { id: id, label: label, hint: hint, error: error, required: rest.required, hideLabel: hideLabel, disabled: rest.disabled, counter: maxLength ? `${length}/${maxLength}` : undefined, children: _jsxs("div", { className: "field-control", children: [leadingIcon && _jsx("span", { className: "field-icon", children: leadingIcon }), _jsx("input", { ...rest, id: id, maxLength: maxLength, "aria-invalid": error ? true : undefined, "aria-describedby": fieldDescribedBy(id, hint, error), onChange: (event) => {
+                        setLength(event.target.value.length);
+                        onChange?.(event);
+                    } }), trailing && _jsx("span", { className: "field-trailing", children: trailing })] }) }));
+}

package/dist/components/ui/ThemeToggle.d.ts

@@ -0,0 +1,5 @@
+export type ThemeToggleProps = {
+    /** When false the theme switches instantly instead of animating. */
+    animate: boolean;
+};
+export default function ThemeToggle({ animate }: ThemeToggleProps): import("react").JSX.Element;

package/dist/components/ui/ThemeToggle.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Header button that switches between the light and dark themes. */
+import { Moon, Sun } from "lucide-react";
+import useTheme from "../../hooks/useTheme.js";
+export default function ThemeToggle({ animate }) {
+    const { theme, toggle } = useTheme(animate);
+    const dark = theme === "dark";
+    return (_jsxs("button", { className: "theme-toggle", "aria-label": "Dark theme", "aria-pressed": dark, title: dark ? "Switch to light theme" : "Switch to dark theme", onClick: (event) => toggle(event.currentTarget), children: [_jsx(Moon, { className: "theme-icon-moon", size: 16, "aria-hidden": "true" }), _jsx(Sun, { className: "theme-icon-sun", size: 17, "aria-hidden": "true" })] }));
+}

package/dist/components/ui/TiltCard.d.ts

@@ -0,0 +1,8 @@
+/** Card that tilts in 3D toward a fine pointer with a moving glare highlight. */
+import { type ReactNode } from "react";
+export type TiltCardProps = {
+    children: ReactNode;
+    /** Maximum rotation in degrees. */
+    maxTilt?: number;
+};
+export default function TiltCard({ children, maxTilt }: TiltCardProps): import("react").JSX.Element;

package/dist/components/ui/TiltCard.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Card that tilts in 3D toward a fine pointer with a moving glare highlight. */
+import { useRef } from "react";
+import { motionDisabledFor } from "../../lib/motion.js";
+export default function TiltCard({ children, maxTilt = 12 }) {
+    const ref = useRef(null);
+    return (_jsx("div", { className: "tilt-stage", children: _jsxs("div", { ref: ref, className: "tilt-card", onPointerMove: (event) => {
+                const element = ref.current;
+                if (!element ||
+                    event.pointerType !== "mouse" ||
+                    motionDisabledFor(element))
+                    return;
+                const bounds = element.getBoundingClientRect();
+                const x = (event.clientX - bounds.left) / bounds.width;
+                const y = (event.clientY - bounds.top) / bounds.height;
+                element.style.setProperty("--tilt-x", `${(0.5 - y) * maxTilt * 2}deg`);
+                element.style.setProperty("--tilt-y", `${(x - 0.5) * maxTilt * 2}deg`);
+                element.style.setProperty("--glare-x", `${x * 100}%`);
+                element.style.setProperty("--glare-y", `${y * 100}%`);
+            }, onPointerLeave: () => {
+                ["--tilt-x", "--tilt-y", "--glare-x", "--glare-y"].forEach((name) => ref.current?.style.removeProperty(name));
+            }, children: [children, _jsx("span", { className: "tilt-glare", "aria-hidden": "true" })] }) }));
+}

package/dist/components/ui/Timeline.d.ts

@@ -0,0 +1,9 @@
+export type TimelineProps = {
+    entries: {
+        date: string;
+        title: string;
+        body?: string;
+        current?: boolean;
+    }[];
+};
+export default function Timeline({ entries }: TimelineProps): import("react").JSX.Element;

package/dist/components/ui/Timeline.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Vertical timeline of dated entries joined by a rule, with an acid marker for the current one. */
+import { cx } from "../../lib/classNames.js";
+export default function Timeline({ entries }) {
+    return (_jsx("ol", { className: "timeline", children: entries.map((entry) => (_jsxs("li", { className: cx("timeline-entry", entry.current && "timeline-current"), children: [_jsx("span", { className: "timeline-date mono", children: entry.date }), _jsx("span", { className: "timeline-title", children: entry.title }), entry.body && _jsx("span", { className: "timeline-body", children: entry.body })] }, `${entry.date}-${entry.title}`))) }));
+}

package/dist/components/ui/ToastProvider.d.ts

@@ -0,0 +1,5 @@
+/** Renders queued toasts in a polite live region; each auto-dismisses unless hovered or focused. */
+import { type ReactNode } from "react";
+export default function ToastProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/ui/ToastProvider.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Renders queued toasts in a polite live region; each auto-dismisses unless hovered or focused. */
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { X } from "lucide-react";
+import { ToastContext, } from "../../hooks/useToast.js";
+import { cx } from "../../lib/classNames.js";
+const autoDismissAfter = 5000;
+function Toast({ toast, onDismiss, }) {
+    const [paused, setPaused] = useState(false);
+    useEffect(() => {
+        if (paused)
+            return;
+        const timer = window.setTimeout(() => onDismiss(toast.id), autoDismissAfter);
+        return () => window.clearTimeout(timer);
+    }, [paused, toast.id, onDismiss]);
+    return (_jsxs("li", { className: cx("toast", `toast-${toast.tone ?? "neutral"}`), onPointerEnter: () => setPaused(true), onPointerLeave: () => setPaused(false), onFocus: () => setPaused(true), onBlur: () => setPaused(false), children: [_jsx("span", { className: "toast-bar", "aria-hidden": "true" }), _jsxs("div", { className: "toast-content", children: [_jsx("strong", { children: toast.title }), toast.message && _jsx("p", { children: toast.message })] }), _jsx("button", { type: "button", className: "toast-close", "aria-label": "Dismiss notification", onClick: () => onDismiss(toast.id), children: _jsx(X, { size: 15 }) })] }));
+}
+export default function ToastProvider({ children }) {
+    const [toasts, setToasts] = useState([]);
+    const nextId = useRef(0);
+    const dismiss = useCallback((id) => setToasts((current) => current.filter((toast) => toast.id !== id)), []);
+    const value = useMemo(() => ({
+        show: (toast) => setToasts((current) => [
+            ...current.slice(-2),
+            { ...toast, id: (nextId.current += 1) },
+        ]),
+    }), []);
+    return (_jsxs(ToastContext.Provider, { value: value, children: [children, _jsx("ol", { className: "toast-viewport", "aria-live": "polite", "aria-label": "Notifications", children: toasts.map((toast) => (_jsx(Toast, { toast: toast, onDismiss: dismiss }, toast.id))) })] }));
+}

package/dist/components/ui/Tooltip.d.ts

@@ -0,0 +1,11 @@
+/** Ink tooltip shown on hover or focus, dismissible with Escape, described via aria-describedby. */
+import { type ReactElement } from "react";
+export type TooltipProps = {
+    content: string;
+    /** A single focusable element, e.g. a button. */
+    children: ReactElement<{
+        "aria-describedby"?: string;
+    }>;
+    placement?: "top" | "bottom" | "left" | "right";
+};
+export default function Tooltip({ content, children, placement, }: TooltipProps): import("react").JSX.Element;

package/dist/components/ui/Tooltip.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Ink tooltip shown on hover or focus, dismissible with Escape, described via aria-describedby. */
+import { cloneElement, useId, useState } from "react";
+import { cx } from "../../lib/classNames.js";
+export default function Tooltip({ content, children, placement = "top", }) {
+    const id = useId();
+    const [open, setOpen] = useState(false);
+    return (_jsxs("span", { className: "tooltip-anchor", onPointerEnter: () => setOpen(true), onPointerLeave: () => setOpen(false), onFocus: () => setOpen(true), onBlur: () => setOpen(false), onKeyDown: (event) => {
+            if (event.key === "Escape")
+                setOpen(false);
+        }, children: [cloneElement(children, {
+                "aria-describedby": [children.props["aria-describedby"], id]
+                    .filter(Boolean)
+                    .join(" "),
+            }), _jsx("span", { id: id, role: "tooltip", className: cx("tooltip mono", `tooltip-${placement}`, open && "is-open"), children: content })] }));
+}

package/dist/fonts.css

@@ -0,0 +1,3 @@
+@import "@fontsource-variable/dm-sans/wght.css";
+@import "@fontsource-variable/space-grotesk/wght.css";
+@import "@fontsource/dm-mono/400.css";

package/dist/hooks/useClipboardCopy.d.ts

@@ -0,0 +1,5 @@
+export type CopyStatus = "idle" | "copying" | "copied" | "error";
+export default function useClipboardCopy(text: string): {
+    status: CopyStatus;
+    copy: () => Promise<void>;
+};

package/dist/hooks/useClipboardCopy.js

@@ -0,0 +1,21 @@
+/** Copies text to the clipboard and reports the outcome, resetting after a few seconds. */
+import { useCallback, useEffect, useRef, useState } from "react";
+const resetDelay = 4000;
+export default function useClipboardCopy(text) {
+    const [status, setStatus] = useState("idle");
+    const resetTimer = useRef();
+    useEffect(() => () => clearTimeout(resetTimer.current), []);
+    const copy = useCallback(async () => {
+        clearTimeout(resetTimer.current);
+        setStatus("copying");
+        try {
+            await navigator.clipboard.writeText(text);
+            setStatus("copied");
+        }
+        catch {
+            setStatus("error");
+        }
+        resetTimer.current = setTimeout(() => setStatus("idle"), resetDelay);
+    }, [text]);
+    return { status, copy };
+}

package/dist/hooks/useDismiss.d.ts

@@ -0,0 +1,3 @@
+/** Calls onDismiss on Escape or a pointer press outside the container while `active`. */
+import { type RefObject } from "react";
+export default function useDismiss(container: RefObject<HTMLElement>, active: boolean, onDismiss: (reason: "escape" | "outside") => void): void;

package/dist/hooks/useDismiss.js

@@ -0,0 +1,22 @@
+/** Calls onDismiss on Escape or a pointer press outside the container while `active`. */
+import { useEffect } from "react";
+export default function useDismiss(container, active, onDismiss) {
+    useEffect(() => {
+        if (!active)
+            return;
+        const onKeyDown = (event) => {
+            if (event.key === "Escape")
+                onDismiss("escape");
+        };
+        const onPointerDown = (event) => {
+            if (!container.current?.contains(event.target))
+                onDismiss("outside");
+        };
+        document.addEventListener("keydown", onKeyDown);
+        document.addEventListener("pointerdown", onPointerDown);
+        return () => {
+            document.removeEventListener("keydown", onKeyDown);
+            document.removeEventListener("pointerdown", onPointerDown);
+        };
+    }, [container, active, onDismiss]);
+}

package/dist/hooks/useHeaderScroll.d.ts

@@ -0,0 +1,7 @@
+/** Derives header state from scroll position: scrolled, over a dark area, and the active section. */
+import { type RefObject } from "react";
+export default function useHeaderScroll(header: RefObject<HTMLElement>): {
+    scrolled: boolean;
+    overDark: boolean;
+    activeId: string;
+};

package/dist/hooks/useHeaderScroll.js

@@ -0,0 +1,40 @@
+/** Derives header state from scroll position: scrolled, over a dark area, and the active section. */
+import { useEffect, useState } from "react";
+/** Fraction of the viewport height at which a section becomes "current". */
+const activationLine = 0.35;
+export default function useHeaderScroll(header) {
+    const [scrolled, setScrolled] = useState(false);
+    const [overDark, setOverDark] = useState(false);
+    const [activeId, setActiveId] = useState("");
+    useEffect(() => {
+        const sections = [
+            ...document.querySelectorAll("main section[id]"),
+        ];
+        const darkAreas = [
+            ...document.querySelectorAll("[data-header-theme='dark']"),
+        ];
+        const update = () => {
+            setScrolled(window.scrollY > 20);
+            const headerBottom = header.current?.offsetHeight ?? 0;
+            setOverDark(darkAreas.some((area) => {
+                const bounds = area.getBoundingClientRect();
+                return bounds.top <= headerBottom && bounds.bottom > headerBottom;
+            }));
+            const line = window.innerHeight * activationLine;
+            let current = "";
+            sections.forEach((section) => {
+                if (section.getBoundingClientRect().top <= line)
+                    current = section.id;
+            });
+            setActiveId(current);
+        };
+        update();
+        window.addEventListener("scroll", update, { passive: true });
+        window.addEventListener("resize", update);
+        return () => {
+            window.removeEventListener("scroll", update);
+            window.removeEventListener("resize", update);
+        };
+    }, [header]);
+    return { scrolled, overDark, activeId };
+}

package/dist/hooks/useIdleTrigger.d.ts

@@ -0,0 +1 @@
+export default function useIdleTrigger(enabled: boolean): boolean;

package/dist/hooks/useIdleTrigger.js

@@ -0,0 +1,19 @@
+/** Becomes true once the browser is idle after `enabled` turns on; used to defer heavy work. */
+import { useEffect, useState } from "react";
+const idleTimeout = 1200;
+const fallbackDelay = 300;
+export default function useIdleTrigger(enabled) {
+    const [triggered, setTriggered] = useState(false);
+    useEffect(() => {
+        if (!enabled || triggered)
+            return;
+        const trigger = () => setTriggered(true);
+        if ("requestIdleCallback" in window) {
+            const id = window.requestIdleCallback(trigger, { timeout: idleTimeout });
+            return () => window.cancelIdleCallback(id);
+        }
+        const id = setTimeout(trigger, fallbackDelay);
+        return () => clearTimeout(id);
+    }, [enabled, triggered]);
+    return triggered;
+}

package/dist/hooks/useInitialHashScroll.d.ts

@@ -0,0 +1 @@
+export default function useInitialHashScroll(): void;

package/dist/hooks/useInitialHashScroll.js

@@ -0,0 +1,28 @@
+/** Scrolls to the URL fragment after first render; the section does not exist yet when the browser first tries. */
+import { useEffect } from "react";
+const userScrollEvents = ["wheel", "touchstart", "keydown"];
+export default function useInitialHashScroll() {
+    useEffect(() => {
+        let id;
+        try {
+            id = decodeURIComponent(window.location.hash.slice(1));
+        }
+        catch {
+            return;
+        }
+        const target = id ? document.getElementById(id) : null;
+        if (!target)
+            return;
+        // Scroll now, then once more after web fonts settle, unless the visitor has scrolled.
+        let userScrolled = false;
+        const markScrolled = () => (userScrolled = true);
+        const align = () => {
+            if (!userScrolled)
+                target.scrollIntoView({ block: "start" });
+        };
+        align();
+        userScrollEvents.forEach((event) => window.addEventListener(event, markScrolled, { passive: true }));
+        document.fonts.ready.then(align);
+        return () => userScrollEvents.forEach((event) => window.removeEventListener(event, markScrolled));
+    }, []);
+}

package/dist/hooks/useMobileMenu.d.ts

@@ -0,0 +1,3 @@
+/** Open state for the mobile menu, closing on Escape, outside pointer, or desktop resize. */
+import { type RefObject } from "react";
+export default function useMobileMenu(container: RefObject<HTMLElement>, toggleButton: RefObject<HTMLButtonElement>): readonly [boolean, import("react").Dispatch<import("react").SetStateAction<boolean>>];

package/dist/hooks/useMobileMenu.js

@@ -0,0 +1,34 @@
+/** Open state for the mobile menu, closing on Escape, outside pointer, or desktop resize. */
+import { useEffect, useState } from "react";
+const desktopQuery = "(min-width: 768px)";
+export default function useMobileMenu(container, toggleButton) {
+    const [open, setOpen] = useState(false);
+    useEffect(() => {
+        if (!open)
+            return;
+        const closeOnEscape = (event) => {
+            if (event.key !== "Escape")
+                return;
+            setOpen(false);
+            toggleButton.current?.focus();
+        };
+        const closeOnOutsidePointer = (event) => {
+            if (!container.current?.contains(event.target))
+                setOpen(false);
+        };
+        const desktop = window.matchMedia(desktopQuery);
+        const closeOnDesktop = () => {
+            if (desktop.matches)
+                setOpen(false);
+        };
+        document.addEventListener("keydown", closeOnEscape);
+        document.addEventListener("pointerdown", closeOnOutsidePointer);
+        desktop.addEventListener("change", closeOnDesktop);
+        return () => {
+            document.removeEventListener("keydown", closeOnEscape);
+            document.removeEventListener("pointerdown", closeOnOutsidePointer);
+            desktop.removeEventListener("change", closeOnDesktop);
+        };
+    }, [open, container, toggleButton]);
+    return [open, setOpen];
+}