@-reddacted-/react-ui 0.1.0 → 0.2.1

package/dist/components/Button.d.ts

@@ -0,0 +1,9 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+export type ButtonVariant = "primary" | "secondary" | "ghost";
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: ButtonVariant;
+    children: ReactNode;
+};
+export declare function Button({ variant, style, disabled, children, ...props }: ButtonProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3E,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAA;AAE7D,KAAK,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC3D,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,wBAAgB,MAAM,CAAC,EAAE,OAAmB,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,+BAe/F"}

package/dist/components/Button.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Button({ variant = "primary", style, disabled, children, ...props }) {
+    return (_jsx("button", { disabled: disabled, style: {
+            ...baseStyle,
+            ...variantStyles[variant],
+            ...(disabled ? disabledStyle : undefined),
+            ...style,
+        }, ...props, children: children }));
+}
+const baseStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "0.5rem",
+    padding: "0.5rem 1rem",
+    borderRadius: "6px",
+    fontSize: "0.875rem",
+    fontWeight: 500,
+    cursor: "pointer",
+    border: "1px solid transparent",
+    lineHeight: 1,
+    whiteSpace: "nowrap",
+};
+const disabledStyle = {
+    opacity: 0.4,
+    cursor: "not-allowed",
+};
+const variantStyles = {
+    primary: {
+        backgroundColor: "var(--color-primary)",
+        color: "var(--color-on-primary)",
+        borderColor: "var(--color-primary)",
+    },
+    secondary: {
+        backgroundColor: "transparent",
+        color: "var(--color-primary)",
+        borderColor: "var(--color-primary)",
+    },
+    ghost: {
+        backgroundColor: "transparent",
+        color: "var(--color-text-muted)",
+        borderColor: "transparent",
+    },
+};

package/dist/components/ColorField.d.ts

@@ -0,0 +1,9 @@
+type ColorFieldProps = {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    randomLabel?: string;
+};
+export declare function ColorField({ label, value, onChange, randomLabel }: ColorFieldProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ColorField.d.ts.map

package/dist/components/ColorField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorField.d.ts","sourceRoot":"","sources":["../../src/components/ColorField.tsx"],"names":[],"mappings":"AAKA,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,WAA4B,EAAE,EAAE,eAAe,+BAanG"}

package/dist/components/ColorField.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ColorPicker from "./ColorPicker.js";
+import { Button } from "./Button.js";
+import { randomHex } from "../theme/clipboard.js";
+export function ColorField({ label, value, onChange, randomLabel = "Random color" }) {
+    return (_jsxs("div", { style: rowStyle, children: [_jsx("label", { style: labelStyle, children: label }), _jsxs("div", { style: controlsStyle, children: [_jsx("code", { style: hexStyle, children: value }), _jsx(ColorPicker, { value: value, onChange: onChange, ariaLabel: label }), _jsx(Button, { variant: "ghost", onClick: () => onChange(randomHex()), style: randomBtnStyle, title: randomLabel, children: "\u21BB" })] })] }));
+}
+const rowStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "1rem",
+    padding: "0.5rem 0",
+    borderBottom: "1px solid var(--color-border)",
+};
+const labelStyle = {
+    fontSize: "0.875rem",
+    color: "var(--color-text)",
+    minWidth: "140px",
+};
+const controlsStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+};
+const hexStyle = {
+    fontSize: "0.8125rem",
+    fontFamily: "monospace",
+    color: "var(--color-text-muted)",
+};
+const randomBtnStyle = {
+    fontSize: "1rem",
+    padding: "0.375rem 0.5rem",
+};

package/dist/components/ColorPicker.d.ts

@@ -0,0 +1,11 @@
+import type { CSSProperties } from "react";
+type ColorPickerProps = {
+    value: string;
+    onChange: (value: string) => void;
+    className?: string;
+    style?: CSSProperties;
+    ariaLabel?: string;
+};
+export default function ColorPicker({ value, onChange, className, style, ariaLabel }: ColorPickerProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ColorPicker.d.ts.map

package/dist/components/ColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../src/components/ColorPicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,aAAa,EAAE,MAAM,OAAO,CAAA;AAIvD,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAID,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BA6FrG"}

package/dist/components/ColorPicker.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { HexColorPicker } from "react-colorful";
+import { isHexColor } from "../theme/clipboard.js";
+const safe = (value) => (isHexColor(value) ? value : "#000000");
+export default function ColorPicker({ value, onChange, className, style, ariaLabel }) {
+    const [open, setOpen] = useState(false);
+    const [inputValue, setInputValue] = useState(value);
+    const [pos, setPos] = useState({ top: 0, left: 0 });
+    const [positioned, setPositioned] = useState(false);
+    const [hovered, setHovered] = useState(false);
+    const swatchRef = useRef(null);
+    const popoverRef = useRef(null);
+    useEffect(() => {
+        setInputValue(value);
+    }, [value]);
+    useLayoutEffect(() => {
+        if (!open || !popoverRef.current || !swatchRef.current) {
+            setPositioned(false);
+            return;
+        }
+        const pr = popoverRef.current.getBoundingClientRect();
+        const sr = swatchRef.current.getBoundingClientRect();
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const gap = 6;
+        const top = sr.bottom + gap + pr.height > vh ? Math.max(4, sr.top - pr.height - gap) : sr.bottom + gap;
+        const left = sr.left + pr.width > vw ? Math.max(4, vw - pr.width - 8) : sr.left;
+        setPos({ top, left });
+        setPositioned(true);
+    }, [open]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const handleMouseDown = (e) => {
+            if (!popoverRef.current?.contains(e.target) && !swatchRef.current?.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleMouseDown);
+        return () => document.removeEventListener("mousedown", handleMouseDown);
+    }, [open]);
+    const toggle = () => {
+        if (!open)
+            setInputValue(value);
+        setOpen(o => !o);
+    };
+    const handleHexInput = (e) => {
+        const raw = e.target.value;
+        const next = raw.startsWith("#") || raw === "" ? raw : `#${raw}`;
+        setInputValue(next);
+        if (isHexColor(next))
+            onChange(next);
+    };
+    return (_jsxs("div", { className: className, style: { ...wrapperStyle, ...style }, children: [_jsx("button", { ref: swatchRef, type: "button", style: {
+                    ...swatchStyle,
+                    background: safe(value),
+                    borderColor: hovered ? "var(--color-primary)" : "var(--color-border)",
+                }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onClick: toggle, "aria-label": ariaLabel ?? `Color: ${value}` }), open && (_jsxs("div", { ref: popoverRef, style: {
+                    ...popoverStyle,
+                    top: pos.top,
+                    left: pos.left,
+                    visibility: positioned ? "visible" : "hidden",
+                }, onMouseDown: e => e.stopPropagation(), children: [_jsx(HexColorPicker, { color: safe(value), onChange: onChange }), _jsx("input", { type: "text", value: inputValue, onChange: handleHexInput, maxLength: 7, spellCheck: false, style: hexInputStyle })] }))] }));
+}
+const wrapperStyle = {
+    position: "relative",
+    display: "inline-flex",
+};
+const swatchStyle = {
+    width: "32px",
+    height: "32px",
+    borderRadius: "6px",
+    border: "2px solid var(--color-border)",
+    cursor: "pointer",
+    padding: 0,
+    flexShrink: 0,
+    transition: "border-color 0.2s",
+};
+const popoverStyle = {
+    position: "fixed",
+    zIndex: 9999,
+    backgroundColor: "var(--color-surface)",
+    border: "1px solid var(--color-border)",
+    borderRadius: "8px",
+    padding: "10px",
+    boxShadow: "0 4px 20px color-mix(in srgb, var(--color-text) 25%, transparent)",
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+};
+const hexInputStyle = {
+    width: "100%",
+    background: "transparent",
+    border: "1px solid var(--color-border)",
+    borderRadius: "4px",
+    color: "var(--color-text)",
+    fontSize: "0.85rem",
+    fontFamily: "monospace",
+    padding: "4px 8px",
+    boxSizing: "border-box",
+    textAlign: "center",
+};

package/dist/components/ConfirmDeleteButton.d.ts

@@ -0,0 +1,13 @@
+import type { CSSProperties } from "react";
+type Props = {
+    onConfirm: () => void;
+    label?: string;
+    confirmLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+    /** Delay in ms before the confirm state auto-resets (default: 10000) */
+    resetDelay?: number;
+};
+export default function ConfirmDeleteButton({ onConfirm, label, confirmLabel, className, style, resetDelay, }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ConfirmDeleteButton.d.ts.map

package/dist/components/ConfirmDeleteButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDeleteButton.d.ts","sourceRoot":"","sources":["../../src/components/ConfirmDeleteButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAG1C,KAAK,KAAK,GAAG;IACX,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,SAAS,EACT,KAAgB,EAChB,YAA8B,EAC9B,SAAS,EACT,KAAK,EACL,UAAmB,GACpB,EAAE,KAAK,+BAgCP"}

package/dist/components/ConfirmDeleteButton.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Button } from "./Button.js";
+export default function ConfirmDeleteButton({ onConfirm, label = "Delete", confirmLabel = "Are you sure?", className, style, resetDelay = 10000, }) {
+    const [confirming, setConfirming] = useState(false);
+    useEffect(() => {
+        if (!confirming)
+            return;
+        const timer = setTimeout(() => setConfirming(false), resetDelay);
+        return () => clearTimeout(timer);
+    }, [confirming, resetDelay]);
+    const handleClick = () => {
+        if (!confirming) {
+            setConfirming(true);
+            return;
+        }
+        onConfirm();
+    };
+    return (_jsx(Button, { variant: "ghost", onClick: handleClick, className: className, style: {
+            color: "var(--color-danger)",
+            borderColor: "var(--color-danger)",
+            backgroundColor: confirming ? "var(--color-danger-soft)" : "transparent",
+            ...style,
+        }, children: confirming ? confirmLabel : label }));
+}

package/dist/components/Modal.d.ts

@@ -0,0 +1,25 @@
+import type { CSSProperties, ReactNode } from "react";
+export declare function openModal(id: string): void;
+export declare function closeModal(id: string): void;
+type ModalProps = {
+    id: string;
+    /** Controlled mode: the parent owns visibility and the bus is ignored. */
+    open?: boolean;
+    /** Called instead of closeModal(id) when the parent owns visibility. */
+    onClose?: () => void;
+    width?: string | number;
+    height?: string | number;
+    children: ReactNode;
+    /** Renders the framed header with a close button. Omit for a bare card. */
+    title?: string;
+    footer?: ReactNode;
+    closeLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+    preventClose?: boolean;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+};
+export default function Modal({ id, open, onClose, width, height, children, title, footer, closeLabel, className, style, preventClose, ariaLabelledBy, ariaDescribedBy, }: ModalProps): import("react").ReactPortal | null;
+export {};
+//# sourceMappingURL=Modal.d.ts.map

package/dist/components/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAgBrD,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,QAGnC;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,QAEpC;AAID,KAAK,UAAU,GAAG;IAChB,EAAE,EAAE,MAAM,CAAA;IACV,0EAA0E;IAC1E,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,QAAQ,EAAE,SAAS,CAAA;IACnB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,EAAE,EACF,IAAI,EACJ,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAQ,EACR,KAAK,EACL,MAAM,EACN,UAAoB,EACpB,SAAS,EACT,KAAK,EACL,YAAoB,EACpB,cAAc,EACd,eAAe,GAChB,EAAE,UAAU,sCAkMZ"}

package/dist/components/Modal.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+const listeners = new Map();
+function on(event, cb) {
+    if (!listeners.has(event))
+        listeners.set(event, new Set());
+    listeners.get(event).add(cb);
+    return () => listeners.get(event).delete(cb);
+}
+function emit(event, payload) {
+    listeners.get(event)?.forEach(cb => cb(payload));
+}
+export function openModal(id) {
+    emit("modal:closeAll");
+    emit("modal:open", id);
+}
+export function closeModal(id) {
+    emit("modal:close", id);
+}
+const FOCUSABLE = `a[href], button, textarea, input, select, [tabindex]:not([tabindex="-1"])`;
+export default function Modal({ id, open, onClose, width, height, children, title, footer, closeLabel = "Close", className, style, preventClose = false, ariaLabelledBy, ariaDescribedBy, }) {
+    const [busOpen, setBusOpen] = useState(false);
+    const contentRef = useRef(null);
+    const lastFocusedEl = useRef(null);
+    const portalTarget = useRef(null);
+    const controlled = open !== undefined;
+    const isOpen = controlled ? open : busOpen;
+    const dismiss = onClose ?? (() => closeModal(id));
+    // Gardée dans un ref : la fonction est recréée à chaque rendu et ne doit pas
+    // relancer le verrou de défilement ni le placement du focus.
+    const dismissRef = useRef(dismiss);
+    dismissRef.current = dismiss;
+    useEffect(() => {
+        if (controlled)
+            return;
+        const setIsOpen = setBusOpen;
+        const offOpen = on("modal:open", (targetId) => {
+            if (targetId === id) {
+                lastFocusedEl.current = document.activeElement ?? null;
+                setIsOpen(true);
+            }
+        });
+        const offClose = on("modal:close", (targetId) => {
+            if (targetId === id)
+                setIsOpen(false);
+        });
+        const offCloseAll = on("modal:closeAll", () => setIsOpen(false));
+        return () => {
+            offOpen();
+            offClose();
+            offCloseAll();
+        };
+    }, [id, controlled]);
+    useEffect(() => {
+        let el = document.getElementById("__modal-root__");
+        if (!el) {
+            el = document.createElement("div");
+            el.id = "__modal-root__";
+            document.body.appendChild(el);
+        }
+        portalTarget.current = el;
+    }, []);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const prevOverflow = document.body.style.overflow;
+        const prevPadRight = document.body.style.paddingRight;
+        const scrollbarW = window.innerWidth - document.documentElement.clientWidth;
+        if (scrollbarW > 0)
+            document.body.style.paddingRight = `${scrollbarW}px`;
+        document.body.style.overflow = "hidden";
+        const to = setTimeout(() => {
+            const container = contentRef.current;
+            if (!container)
+                return;
+            const focusables = container.querySelectorAll(FOCUSABLE);
+            (focusables[0] ?? container).focus();
+        }, 0);
+        const onKeyDown = (e) => {
+            if (e.key === "Escape" && !preventClose) {
+                dismissRef.current();
+                return;
+            }
+            if (e.key !== "Tab")
+                return;
+            const container = contentRef.current;
+            if (!container)
+                return;
+            const focusables = Array.from(container.querySelectorAll(FOCUSABLE)).filter(el => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden"));
+            if (focusables.length === 0)
+                return;
+            const first = focusables[0];
+            const last = focusables[focusables.length - 1];
+            const active = document.activeElement;
+            if (e.shiftKey) {
+                if (active === first || !container.contains(active)) {
+                    last.focus();
+                    e.preventDefault();
+                }
+            }
+            else {
+                if (active === last || !container.contains(active)) {
+                    first.focus();
+                    e.preventDefault();
+                }
+            }
+        };
+        const onFocusIn = (e) => {
+            const container = contentRef.current;
+            if (!container)
+                return;
+            if (!container.contains(e.target))
+                container.focus();
+        };
+        document.addEventListener("keydown", onKeyDown);
+        document.addEventListener("focusin", onFocusIn);
+        return () => {
+            document.body.style.overflow = prevOverflow;
+            document.body.style.paddingRight = prevPadRight;
+            clearTimeout(to);
+            document.removeEventListener("keydown", onKeyDown);
+            document.removeEventListener("focusin", onFocusIn);
+            lastFocusedEl.current?.focus?.();
+            lastFocusedEl.current = null;
+        };
+    }, [isOpen, preventClose]);
+    if (!isOpen || !portalTarget.current)
+        return null;
+    const w = typeof width === "number" ? `${width}px` : (width ?? "min(540px, 95vw)");
+    const h = typeof height === "number" ? `${height}px` : height;
+    const prefersReducedMotion = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches;
+    const scrimStyle = {
+        position: "fixed",
+        inset: 0,
+        zIndex: 9999,
+        display: "grid",
+        placeItems: "center",
+        padding: "1rem",
+        backdropFilter: "brightness(0.45) blur(2px)",
+        WebkitBackdropFilter: "brightness(0.45) blur(2px)",
+        animation: prefersReducedMotion ? "none" : "modalFade 150ms ease-out",
+    };
+    const cardStyle = {
+        width: w,
+        height: h,
+        maxWidth: "95vw",
+        maxHeight: "85vh",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        outline: "none",
+        backgroundColor: "var(--color-surface)",
+        border: "1px solid var(--color-border)",
+        borderRadius: "12px",
+        animation: prefersReducedMotion ? "none" : "modalPop 160ms ease-out",
+    };
+    const keyframes = (_jsx("style", { children: `
+      @keyframes modalFade { from { opacity: 0 } to { opacity: 1 } }
+      @keyframes modalPop {
+        from { opacity: 0; transform: translateY(4px) scale(0.98) }
+        to { opacity: 1; transform: translateY(0) scale(1) }
+      }
+    ` }));
+    const framed = title !== undefined || footer !== undefined;
+    return createPortal(_jsxs(_Fragment, { children: [keyframes, _jsx("div", { style: scrimStyle, onMouseDown: e => {
+                    if (!preventClose && e.target === e.currentTarget)
+                        dismissRef.current();
+                }, children: _jsxs("div", { ref: contentRef, role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, tabIndex: -1, className: className, style: { ...cardStyle, ...style }, onMouseDown: e => e.stopPropagation(), children: [title !== undefined && (_jsxs("div", { style: headerStyle, children: [_jsx("span", { style: titleStyle, children: title }), _jsx("button", { type: "button", style: closeStyle, onClick: dismiss, "aria-label": closeLabel, children: "\u2715" })] })), _jsx("div", { style: framed ? bodyStyle : bareBodyStyle, children: children }), footer && _jsx("div", { style: footerStyle, children: footer })] }) })] }), portalTarget.current);
+}
+const headerStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "1rem 1.25rem",
+    borderBottom: "1px solid var(--color-border)",
+};
+const titleStyle = { fontSize: "0.95rem", fontWeight: 600, color: "var(--color-text)" };
+const closeStyle = {
+    border: "none",
+    background: "none",
+    cursor: "pointer",
+    color: "var(--color-text-muted)",
+    fontSize: "0.95rem",
+    lineHeight: 1,
+};
+const bodyStyle = { padding: "1.25rem", overflowY: "auto", flex: 1 };
+const bareBodyStyle = { overflowY: "auto", flex: 1 };
+const footerStyle = {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: "0.75rem",
+    padding: "1rem 1.25rem",
+    borderTop: "1px solid var(--color-border)",
+};

package/dist/components/NavBar.d.ts

@@ -0,0 +1,20 @@
+import type { ElementType, ReactNode } from "react";
+export type NavLink = {
+    label: string;
+    to: string;
+};
+type NavBarProps = {
+    brand: string;
+    links?: NavLink[];
+    /** Rendered on the right of the links: sign out, theme select, whatever the page adds. */
+    actions?: ReactNode;
+    /**
+     * Link component to render with. Defaults to a plain anchor so the bar works
+     * without a router; pass a router Link to keep client-side navigation.
+     */
+    linkAs?: ElementType;
+    homeTo?: string;
+};
+export declare function NavBar({ brand, links, actions, linkAs, homeTo }: NavBarProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=NavBar.d.ts.map

package/dist/components/NavBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBar.d.ts","sourceRoot":"","sources":["../../src/components/NavBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAElE,MAAM,MAAM,OAAO,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAA;AAEnD,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,OAAO,EAAE,CAAA;IACjB,0FAA0F;IAC1F,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,KAAU,EAAE,OAAO,EAAE,MAAM,EAAE,MAAY,EAAE,EAAE,WAAW,+BAmBvF"}

package/dist/components/NavBar.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function NavBar({ brand, links = [], actions, linkAs, homeTo = "/" }) {
+    const Link = linkAs ?? "a";
+    const linkProps = (to) => (linkAs ? { to } : { href: to });
+    return (_jsxs("nav", { style: navStyle, children: [_jsx(Link, { ...linkProps(homeTo), style: brandStyle, children: brand }), _jsxs("div", { style: rightStyle, children: [links.map(link => (_jsx(Link, { ...linkProps(link.to), style: linkStyle, children: link.label }, link.to))), actions] })] }));
+}
+const navStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "0 1.5rem",
+    height: "56px",
+    borderBottom: "1px solid var(--color-border)",
+    backgroundColor: "var(--color-surface)",
+};
+const brandStyle = {
+    fontWeight: 600,
+    fontSize: "1rem",
+    color: "var(--color-text)",
+    textDecoration: "none",
+};
+const rightStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: "1.25rem",
+};
+const linkStyle = {
+    color: "var(--color-text-muted)",
+    textDecoration: "none",
+    fontSize: "0.875rem",
+};

package/dist/components/PageStatus.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+export type LoadStatus = "loading" | "ready" | "error";
+export declare function PageMessage({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function LoadingMessage({ label }: {
+    label?: string;
+}): import("react").JSX.Element;
+type ErrorMessageProps = {
+    onRetry?: () => void;
+    label?: string;
+    retryLabel?: string;
+};
+export declare function ErrorMessage({ onRetry, label, retryLabel, }: ErrorMessageProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=PageStatus.d.ts.map

package/dist/components/PageStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageStatus.d.ts","sourceRoot":"","sources":["../../src/components/PageStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAGrD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;AAEtD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAEhE;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAoB,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAQ1E;AAED,KAAK,iBAAiB,GAAG;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,KAAiF,EACjF,UAAwB,GACzB,EAAE,iBAAiB,+BAenB"}

package/dist/components/PageStatus.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "./Button.js";
+export function PageMessage({ children }) {
+    return _jsx("div", { style: containerStyle, children: children });
+}
+export function LoadingMessage({ label = "Loading..." }) {
+    return (_jsx(PageMessage, { children: _jsx("p", { style: mutedStyle, role: "status", children: label }) }));
+}
+export function ErrorMessage({ onRetry, label = "The content could not be loaded. Check your connection, then try again.", retryLabel = "Try again", }) {
+    return (_jsx(PageMessage, { children: _jsxs("div", { style: stackStyle, children: [_jsx("p", { style: mutedStyle, role: "alert", children: label }), onRetry && (_jsx(Button, { variant: "secondary", onClick: onRetry, children: retryLabel }))] }) }));
+}
+const containerStyle = {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "2rem",
+    backgroundColor: "var(--color-bg)",
+};
+const stackStyle = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "1rem",
+    textAlign: "center",
+};
+const mutedStyle = {
+    margin: 0,
+    fontSize: "0.9375rem",
+    color: "var(--color-text-muted)",
+};

package/dist/index.d.ts

@@ -1,4 +1,20 @@
-export { default as Modal, openModal, closeModal } from "./Modal";
-export { default as ColorPicker } from "./ColorPicker";
-export { default as ConfirmDeleteButton } from "./ConfirmDeleteButton";
+export { default as Modal, openModal, closeModal } from "./components/Modal.js";
+export { default as ColorPicker } from "./components/ColorPicker.js";
+export { default as ConfirmDeleteButton } from "./components/ConfirmDeleteButton.js";
+export { ColorField } from "./components/ColorField.js";
+export { Button, type ButtonVariant } from "./components/Button.js";
+export { NavBar, type NavLink } from "./components/NavBar.js";
+export { PageMessage, LoadingMessage, ErrorMessage, type LoadStatus } from "./components/PageStatus.js";
+export { ThemeProvider, useTheme } from "./theme/ThemeProvider.js";
+export { ThemeSelect } from "./theme/ThemeSelect.js";
+export { defaultPalette, themeVariableGroups, themeVariableKeys, type ThemeVariableGroup } from "./theme/palette.js";
+export { createLocalThemeStore, createHttpThemeStore, type ThemeStore } from "./theme/store.js";
+export { serializeColors, parseColors, isHexColor, randomHex } from "./theme/clipboard.js";
+export type { ThemeColors, ThemeDefinition, ThemeCatalog, ThemeDraft } from "./theme/types.js";
+export { PopupProvider } from "./popup/PopupProvider.js";
+export { PopupHost } from "./popup/PopupHost.js";
+export { createInterceptedFetch, type InterceptorHandlers } from "./popup/fetchInterceptor.js";
+export { createErrorRules, defaultMessages, type ErrorRules, type ErrorRulesOptions, type PopupMessages, } from "./popup/errorRules.js";
+export { fetchJson } from "./net/fetchJson.js";
+export { useDocumentTitle } from "./net/useDocumentTitle.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAC/E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,qCAAqC,CAAA;AACpF,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACnE,OAAO,EAAE,MAAM,EAAE,KAAK,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,KAAK,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAEvG,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AACpD,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AACpH,OAAO,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC/F,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAC1F,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAE9F,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAChD,OAAO,EAAE,sBAAsB,EAAE,KAAK,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAC9F,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,KAAK,aAAa,GACnB,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA"}