nexus-shared 1.1.21 → 3.0.0

package/dist/Components/Layouts/PopupDock.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+/** A minimized window as the dock shows it. */
+export interface DockedWindow {
+    id: string;
+    title: ReactNode;
+    /** Plain text of the title, for the tooltip. */
+    label?: string;
+    /** The window's icon; a window icon when left out. */
+    icon?: ReactNode;
+    /** Brings the window back. */
+    restore: () => void;
+    /** Asks the window to close; without it the bar has no close button. */
+    close?: () => void;
+}
+/** Puts a minimized window on the dock, or updates the one with its id in place. Newest last. */
+export declare function dockWindow(entry: DockedWindow): void;
+/** Takes a window off the dock. */
+export declare function undockWindow(id: string): void;
+/** Whether a dock is on the page, so a window can be minimized and still be found. */
+export declare function useDockReady(): boolean;
+/** The minimized popups, at the bottom right of the page. Rendered by `<PopupHost />`; render it yourself only without a host. */
+export declare function PopupDock(): import("react").JSX.Element | null;

package/dist/Components/Layouts/PopupDock.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { iconAppWindow, iconChevronDown, iconChevronUp, iconX, InlineIcon } from "nexus-icons";
+import { useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+const EMPTY = [];
+let windows = [];
+let docks = 0;
+const listeners = new Set();
+function emit() {
+    for (const listener of listeners)
+        listener();
+}
+function subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+const getWindows = () => windows;
+const getServerWindows = () => EMPTY;
+const getReady = () => docks > 0;
+const getServerReady = () => false;
+/** Puts a minimized window on the dock, or updates the one with its id in place. Newest last. */
+export function dockWindow(entry) {
+    const index = windows.findIndex(item => item.id === entry.id);
+    windows = index < 0 ? [...windows, entry] : windows.map(item => (item.id === entry.id ? entry : item));
+    emit();
+}
+/** Takes a window off the dock. */
+export function undockWindow(id) {
+    if (!windows.some(item => item.id === id))
+        return;
+    windows = windows.filter(item => item.id !== id);
+    emit();
+}
+/** Whether a dock is on the page, so a window can be minimized and still be found. */
+export function useDockReady() {
+    return useSyncExternalStore(subscribe, getReady, getServerReady);
+}
+/** The minimized popups, at the bottom right of the page. Rendered by `<PopupHost />`; render it yourself only without a host. */
+export function PopupDock() {
+    const list = useSyncExternalStore(subscribe, getWindows, getServerWindows);
+    const [expanded, setExpanded] = useState(false);
+    const rootRef = useRef(null);
+    const toggleRef = useRef(null);
+    const id = useId();
+    const stacked = list.length > 1;
+    const open = expanded && stacked;
+    useEffect(() => {
+        docks++;
+        emit();
+        return () => {
+            docks--;
+            emit();
+        };
+    }, []);
+    // Its height, for what else sits at the bottom right: toasts there stack above the dock (--nx-dock-space).
+    const hasWindows = list.length > 0;
+    useLayoutEffect(() => {
+        const root = rootRef.current;
+        if (!hasWindows || !root)
+            return;
+        const style = document.documentElement.style;
+        const observer = new ResizeObserver(() => style.setProperty("--nx-dock-space", `${Math.ceil(root.offsetHeight) + 8}px`));
+        observer.observe(root);
+        return () => {
+            observer.disconnect();
+            style.removeProperty("--nx-dock-space");
+        };
+    }, [hasWindows]);
+    // A list of one closes by itself, so the next stack starts closed.
+    useEffect(() => {
+        if (!stacked)
+            setExpanded(false);
+    }, [stacked]);
+    // An open list closes on Esc, or on a press anywhere else.
+    useEffect(() => {
+        if (!open)
+            return;
+        function onKeyDown(event) {
+            if (event.key !== "Escape" || event.defaultPrevented)
+                return;
+            const inside = rootRef.current?.contains(document.activeElement) ?? false;
+            setExpanded(false);
+            if (inside)
+                toggleRef.current?.focus();
+        }
+        function onPointerDown(event) {
+            if (!(event.target instanceof Node) || !rootRef.current?.contains(event.target))
+                setExpanded(false);
+        }
+        document.addEventListener("keydown", onKeyDown);
+        document.addEventListener("pointerdown", onPointerDown, true);
+        return () => {
+            document.removeEventListener("keydown", onKeyDown);
+            document.removeEventListener("pointerdown", onPointerDown, true);
+        };
+    }, [open]);
+    if (list.length === 0)
+        return null;
+    const shown = open ? list : list.slice(-1);
+    const depth = open ? 0 : Math.min(list.length - 1, 2);
+    const listId = `${id}-list`;
+    // The cards peeking out behind the newest bar open the list too.
+    function onListClick(event) {
+        if (event.target === event.currentTarget && depth > 0)
+            setExpanded(true);
+    }
+    return (_jsxs("section", { ref: rootRef, className: cx("nx-dock", stacked && "nx-dock--stacked", open && "nx-dock--open"), "aria-label": "Minimized windows", children: [stacked && (_jsxs("button", { ref: toggleRef, type: "button", className: "nx-dock__toggle", "aria-label": `${list.length} minimized windows`, "aria-expanded": open, "aria-controls": listId, title: open ? "Show only the newest" : "Show all minimized windows", onClick: () => setExpanded(!open), children: [_jsx("span", { className: "nx-dock__count", children: list.length }), _jsx("span", { children: "minimized" }), _jsx(InlineIcon, { icon: open ? iconChevronDown : iconChevronUp })] })), _jsx("ul", { id: listId, className: "nx-dock__list", "data-depth": depth || undefined, onClick: onListClick, children: shown.map(item => (_jsx(DockBar, { item: item, onRestore: () => setExpanded(false) }, item.id))) })] }));
+}
+// A restored window closes the list, as a taskbar's previews close after a pick.
+function DockBar({ item, onRestore }) {
+    const id = useId();
+    const titleId = `${id}-title`;
+    const closeId = `${id}-close`;
+    return (_jsxs("li", { className: "nx-dock__item", children: [_jsxs("button", { type: "button", className: "nx-dock__window", title: item.label ? `Restore: ${item.label}` : "Restore", onClick: () => {
+                    onRestore();
+                    item.restore();
+                }, children: [_jsx("span", { className: "nx-dock__icon", "aria-hidden": "true", children: item.icon ?? _jsx(InlineIcon, { icon: iconAppWindow }) }), _jsx("span", { className: "nx-visually-hidden", children: "Restore " }), _jsx("span", { id: titleId, className: "nx-dock__title", children: item.title }), _jsx(InlineIcon, { className: "nx-dock__restore", icon: iconChevronUp })] }), item.close && (_jsxs("button", { type: "button", className: "nx-dock__close", "aria-labelledby": `${closeId} ${titleId}`, title: "Close", onClick: item.close, children: [_jsx("span", { id: closeId, hidden: true, children: "Close" }), _jsx(InlineIcon, { icon: iconX })] }))] }));
+}

package/dist/Components/Layouts/PopupHost.d.ts

@@ -0,0 +1,56 @@
+import { type ReactNode } from "react";
+import { type PopupCloseReason, type PopupProps, type PopupWindowState } from "./Popup.tsx";
+export interface PopupHandle {
+    readonly id: string;
+    /** Closes the popup. */
+    close: (reason?: PopupCloseReason) => void;
+    /** Changes the title, content, footer, or any other option while the popup is open. */
+    update: (changes: Partial<OpenPopupOptions>) => void;
+    /** Puts the popup aside as a bar at the bottom right; the page can be used again. */
+    minimize: () => void;
+    /** Makes the popup fill the window. */
+    maximize: () => void;
+    /** Brings a minimized popup back as it was (maximized or not), or a maximized one back to its size. */
+    restore: () => void;
+    /** The window state now: `normal`, `maximized`, or `minimized`. */
+    readonly windowState: PopupWindowState;
+    /**
+     * Resolves with the reason once the popup has closed: after its exit animation, when the dialog is no longer modal and
+     * focus is back on the page, so the code that follows can move focus or remove what the popup was about.
+     */
+    readonly closed: Promise<PopupCloseReason>;
+}
+export interface OpenPopupOptions extends Omit<PopupProps, "open" | "onClose" | "onClosed" | "children" | "footer" | "windowState"> {
+    /** The body. A function receives the handle, so buttons inside can close the popup. */
+    content?: ReactNode | ((popup: PopupHandle) => ReactNode);
+    /** The footer, right-aligned buttons. A function receives the handle. */
+    footer?: ReactNode | ((popup: PopupHandle) => ReactNode);
+    /** When the popup closes, with the reason. */
+    onClose?: (reason: PopupCloseReason) => void;
+    /**
+     * Asked when the user closes the popup (its close button, Esc, the backdrop, or its bar on the dock): return `false`,
+     * or a promise of it, to keep it open, such as after asking "Discard your changes?". Closing from code does not ask.
+     */
+    beforeClose?: (reason: PopupCloseReason) => boolean | Promise<boolean>;
+    /**
+     * One popup per key: opening a key whose popup is still open (or minimized) never opens a second one. By `reopen`,
+     * that popup closes (with the reason `replaced`) and a fresh one opens (`replace`, the default: `booking-new` for an
+     * Add form), or it comes back as it was and its handle is returned (`restore`: `booking-edit-2048`). Rules set with
+     * `definePopupRules` apply by key.
+     */
+    key?: string;
+}
+/**
+ * Opens a popup from code and returns its handle. Needs one `<PopupHost />` on the page. With a `key`, the rules set
+ * for it (`definePopupRules`) apply under the options, and a popup with the same key still open is replaced or
+ * restored (`reopen`).
+ *
+ * @example
+ * const popup = openPopup({ title: "Room 204", content: <RoomDetails id={204} />, footer: p => <Button onClick={() => p.close()}>Close</Button> });
+ * await popup.closed;
+ */
+export declare function openPopup(given: OpenPopupOptions): PopupHandle;
+/** Closes every popup opened from code, minimized ones too. */
+export declare function closeAllPopups(): void;
+/** Shows the popups opened with `openPopup`, the message boxes, and the dock of minimized popups. Put one in the root layout. */
+export declare function PopupHost(): import("react").JSX.Element;

package/dist/Components/Layouts/PopupHost.js

@@ -0,0 +1,163 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useSyncExternalStore } from "react";
+import { Popup } from "./Popup.js";
+import { HostedPopupContext } from "./PopupContext.js";
+import { PopupDock } from "./PopupDock.js";
+import { withPopupRule } from "./PopupRules.js";
+const EMPTY = [];
+let entries = [];
+let counter = 0;
+let hosts = 0;
+let warned = false;
+const listeners = new Set();
+function emit() {
+    for (const listener of listeners)
+        listener();
+}
+function subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+const getSnapshot = () => entries;
+const getServerSnapshot = () => EMPTY;
+const findEntry = (id) => entries.find(candidate => candidate.id === id);
+// The popups a host has rendered. One closed before that (closed or replaced in the same task that opened it) never
+// showed, so nothing will animate it out.
+const rendered = new Set();
+function closeEntry(id, reason) {
+    const entry = findEntry(id);
+    if (!entry || !entry.open)
+        return;
+    entries = entries.map(candidate => (candidate.id === id ? { ...candidate, open: false, reason } : candidate));
+    emit();
+    entry.options.onClose?.(reason);
+    // Without a host, or before it has rendered the popup, nothing animates it out, so it is closed now.
+    if (hosts === 0 || !rendered.has(id))
+        removeEntry(id);
+}
+// The user asked to close: the popup's `beforeClose` may keep it open. One question at a time per popup.
+const asking = new Set();
+function requestClose(id, reason) {
+    const guard = findEntry(id)?.options.beforeClose;
+    // "code": the browser closed the dialog itself (a form with method="dialog"); there is nothing left to keep open.
+    if (!guard || reason === "code") {
+        closeEntry(id, reason);
+        return;
+    }
+    if (asking.has(id))
+        return;
+    asking.add(id);
+    void Promise.resolve()
+        .then(() => guard(reason))
+        .then(close => {
+        if (close !== false)
+            closeEntry(id, reason);
+    }, () => undefined)
+        .finally(() => asking.delete(id));
+}
+function removeEntry(id) {
+    const entry = findEntry(id);
+    rendered.delete(id);
+    entries = entries.filter(candidate => candidate.id !== id);
+    emit();
+    entry?.resolve(entry.reason ?? "code");
+}
+function setWindowState(id, state) {
+    const entry = findEntry(id);
+    if (!entry || !entry.open || entry.windowState === state)
+        return;
+    const restoreTo = entry.windowState === "minimized" ? entry.restoreTo : entry.windowState;
+    entries = entries.map(candidate => (candidate.id === id ? { ...candidate, windowState: state, restoreTo } : candidate));
+    emit();
+    entry.options.onWindowStateChange?.(state);
+}
+function restoreEntry(id) {
+    const entry = findEntry(id);
+    if (!entry)
+        return;
+    if (entry.windowState === "minimized")
+        setWindowState(id, entry.restoreTo);
+    else if (entry.windowState === "maximized")
+        setWindowState(id, "normal");
+}
+/**
+ * Opens a popup from code and returns its handle. Needs one `<PopupHost />` on the page. With a `key`, the rules set
+ * for it (`definePopupRules`) apply under the options, and a popup with the same key still open is replaced or
+ * restored (`reopen`).
+ *
+ * @example
+ * const popup = openPopup({ title: "Room 204", content: <RoomDetails id={204} />, footer: p => <Button onClick={() => p.close()}>Close</Button> });
+ * await popup.closed;
+ */
+export function openPopup(given) {
+    const options = withPopupRule(given);
+    if (options.key !== undefined) {
+        const existing = entries.find(candidate => candidate.open && candidate.options.key === options.key);
+        if (existing && options.reopen === "restore") {
+            if (existing.windowState === "minimized")
+                restoreEntry(existing.id);
+            return existing.handle;
+        }
+        if (existing)
+            closeEntry(existing.id, "replaced");
+    }
+    const id = `nx-popup-${++counter}`;
+    let resolve = () => undefined;
+    const closed = new Promise(done => {
+        resolve = done;
+    });
+    const handle = {
+        id,
+        close: (reason = "code") => closeEntry(id, reason),
+        update: changes => {
+            entries = entries.map(candidate => (candidate.id === id ? { ...candidate, options: { ...candidate.options, ...changes } } : candidate));
+            emit();
+        },
+        minimize: () => setWindowState(id, "minimized"),
+        maximize: () => setWindowState(id, "maximized"),
+        restore: () => restoreEntry(id),
+        get windowState() {
+            return findEntry(id)?.windowState ?? "normal";
+        },
+        closed,
+    };
+    const initial = options.defaultWindowState ?? "normal";
+    entries = [...entries, { id, options, open: true, windowState: initial, restoreTo: initial, handle, resolve }];
+    if (hosts === 0 && !warned && typeof window !== "undefined") {
+        warned = true;
+        console.warn("openPopup(): no <PopupHost /> is mounted, so popups cannot show. Add one to the root layout.");
+    }
+    emit();
+    return handle;
+}
+/** Closes every popup opened from code, minimized ones too. */
+export function closeAllPopups() {
+    for (const entry of entries)
+        closeEntry(entry.id, "code");
+}
+/** Shows the popups opened with `openPopup`, the message boxes, and the dock of minimized popups. Put one in the root layout. */
+export function PopupHost() {
+    const list = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+    useEffect(() => {
+        hosts++;
+        return () => {
+            hosts--;
+            // Popups that were closing when the last host went away will never finish their animation.
+            if (hosts === 0)
+                for (const entry of entries)
+                    if (!entry.open)
+                        removeEntry(entry.id);
+        };
+    }, []);
+    useLayoutEffect(() => {
+        for (const entry of list)
+            rendered.add(entry.id);
+    });
+    return (_jsxs(HostedPopupContext, { value: true, children: [list.map(entry => {
+                const { content, footer, onClose: _onClose, beforeClose: _beforeClose, onWindowStateChange: _onWindowStateChange, key: _key, ...rest } = entry.options;
+                return (_jsx(Popup, { ...rest, open: entry.open, windowState: entry.windowState, onWindowStateChange: state => setWindowState(entry.id, state), footer: typeof footer === "function" ? footer(entry.handle) : footer, onClose: reason => requestClose(entry.id, reason), onClosed: () => removeEntry(entry.id), children: typeof content === "function" ? content(entry.handle) : content }, entry.id));
+            }), _jsx(PopupDock, {})] }));
+}

package/dist/Components/Layouts/PopupRules.d.ts

@@ -0,0 +1,30 @@
+import type { PopupProps } from "./Popup.tsx";
+/**
+ * What a popup's rule may set: `reopen` (`replace` or `restore`), the window buttons and moving (`minimizable`,
+ * `maximizable`, `movable`), how it closes (`closable`, `closeOnEscape`, `closeOnBackdrop`), its `size`, and its
+ * `defaultWindowState`.
+ */
+export type PopupRule = Pick<PopupProps, "reopen" | "minimizable" | "maximizable" | "movable" | "closable" | "closeOnEscape" | "closeOnBackdrop" | "size" | "defaultWindowState">;
+/**
+ * Sets rules for popups by key. A name is a key (`booking-new`), or a pattern ending in `*` for every key that starts
+ * with the rest (`booking-edit-*`; `*` alone matches every key). Every rule that matches a key applies, the more
+ * specific over the less: an exact key over a pattern, a longer pattern over a shorter one. Options given to
+ * `openPopup` win over all of them. Setting a name again replaces its rule. Call it in a client module, where the app
+ * starts or beside the code that opens the popups. Returns a function that removes these rules.
+ *
+ * @example
+ * definePopupRules({
+ *   "booking-new": { reopen: "replace" },                       // Add: a fresh form every time
+ *   "booking-edit-*": { reopen: "restore" },                    // Edit: back as it was, with what was typed
+ *   "night-report": { minimizable: false, maximizable: false, movable: false },
+ * });
+ */
+export declare function definePopupRules(next: Record<string, PopupRule>): () => void;
+/** Removes every rule. */
+export declare function clearPopupRules(): void;
+/** The rule for a key: every matching rule merged, the more specific over the less. Undefined when none matches. */
+export declare function popupRuleFor(key: string | undefined): PopupRule | undefined;
+/** A popup's options over its key's rule: what the options leave out, or set to undefined, comes from the rule. */
+export declare function withPopupRule<T extends {
+    key?: string;
+}>(options: T): T & PopupRule;

package/dist/Components/Layouts/PopupRules.js

@@ -0,0 +1,63 @@
+const rules = new Map();
+/**
+ * Sets rules for popups by key. A name is a key (`booking-new`), or a pattern ending in `*` for every key that starts
+ * with the rest (`booking-edit-*`; `*` alone matches every key). Every rule that matches a key applies, the more
+ * specific over the less: an exact key over a pattern, a longer pattern over a shorter one. Options given to
+ * `openPopup` win over all of them. Setting a name again replaces its rule. Call it in a client module, where the app
+ * starts or beside the code that opens the popups. Returns a function that removes these rules.
+ *
+ * @example
+ * definePopupRules({
+ *   "booking-new": { reopen: "replace" },                       // Add: a fresh form every time
+ *   "booking-edit-*": { reopen: "restore" },                    // Edit: back as it was, with what was typed
+ *   "night-report": { minimizable: false, maximizable: false, movable: false },
+ * });
+ */
+export function definePopupRules(next) {
+    const added = Object.entries(next);
+    for (const [name, rule] of added)
+        rules.set(name, rule);
+    return () => {
+        for (const [name, rule] of added)
+            if (rules.get(name) === rule)
+                rules.delete(name);
+    };
+}
+/** Removes every rule. */
+export function clearPopupRules() {
+    rules.clear();
+}
+/** How closely a rule's name matches a key: -1 when it does not; an exact key beats any pattern. */
+function specificity(name, key) {
+    if (name === key)
+        return Number.MAX_SAFE_INTEGER;
+    if (!name.endsWith("*"))
+        return -1;
+    const prefix = name.slice(0, -1);
+    return key.startsWith(prefix) ? prefix.length : -1;
+}
+/** The rule for a key: every matching rule merged, the more specific over the less. Undefined when none matches. */
+export function popupRuleFor(key) {
+    if (key === undefined || rules.size === 0)
+        return undefined;
+    const matches = [...rules]
+        .map(([name, rule]) => ({ rule, rank: specificity(name, key) }))
+        .filter(match => match.rank >= 0)
+        .sort((a, b) => a.rank - b.rank);
+    if (matches.length === 0)
+        return undefined;
+    return matches.reduce((merged, match) => withDefined(merged, match.rule), {});
+}
+/** A popup's options over its key's rule: what the options leave out, or set to undefined, comes from the rule. */
+export function withPopupRule(options) {
+    const rule = popupRuleFor(options.key);
+    return rule ? withDefined(rule, options) : options;
+}
+// `{ ...base, ...over }`, except that an undefined value in `over` does not hide the one in `base`.
+function withDefined(base, over) {
+    const result = { ...base };
+    for (const [name, value] of Object.entries(over))
+        if (value !== undefined)
+            result[name] = value;
+    return result;
+}

package/dist/Components/Layouts/ThemePicker.d.ts

@@ -0,0 +1,13 @@
+import { type ThemeOption } from "../../Interfaces/ThemeInterfaces.ts";
+export interface ThemePickerProps {
+    /** Themes to offer. Default: every built-in theme. */
+    themes?: readonly ThemeOption[];
+    /** Show the Light / Dark / System choice. Default `true`. */
+    showMode?: boolean;
+    className?: string;
+}
+/**
+ * Light / Dark / System, and a card per theme with a live preview of its colors.
+ * The choice applies at once and is saved in the browser.
+ */
+export declare function ThemePicker({ themes, showMode, className }: ThemePickerProps): import("react").JSX.Element;

package/dist/Components/Layouts/ThemePicker.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { iconCheck, iconDeviceDesktop, iconMoon, iconSun, InlineIcon } from "nexus-icons";
+import { useId } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { NEXUS_THEMES } from "../../Interfaces/ThemeInterfaces.js";
+import { useTheme } from "../../Services/ThemeService.js";
+import { TabButtons } from "../Documents/TabButtons.js";
+const MODES = [
+    { value: "light", label: "Light", icon: _jsx(InlineIcon, { icon: iconSun }) },
+    { value: "dark", label: "Dark", icon: _jsx(InlineIcon, { icon: iconMoon }) },
+    { value: "system", label: "System", icon: _jsx(InlineIcon, { icon: iconDeviceDesktop }), title: "Follow the operating system" },
+];
+/**
+ * Light / Dark / System, and a card per theme with a live preview of its colors.
+ * The choice applies at once and is saved in the browser.
+ */
+export function ThemePicker({ themes = NEXUS_THEMES, showMode = true, className }) {
+    const { theme, mode, setTheme, setMode } = useTheme();
+    const name = useId();
+    return (_jsxs("div", { className: cx("nx-theme-picker", className), children: [showMode && (_jsxs("div", { className: "nx-theme-picker__group", children: [_jsx("p", { id: `${name}-mode`, className: "nx-theme-picker__legend", children: "Mode" }), _jsx(TabButtons, { "aria-labelledby": `${name}-mode`, name: `${name}-mode`, options: MODES, value: mode, onChange: setMode, block: true })] })), _jsxs("fieldset", { className: "nx-theme-picker__group", children: [_jsx("legend", { className: "nx-theme-picker__legend", children: "Theme" }), _jsx("div", { className: "nx-theme-picker__grid", children: themes.map(option => (_jsxs("label", { className: "nx-theme-option", title: option.description, children: [_jsx("input", { type: "radio", className: "nx-visually-hidden", name: `${name}-theme`, value: option.id, checked: theme === option.id, onChange: () => setTheme(option.id) }), _jsx("span", { className: "nx-theme-option__preview", "data-nx-theme": option.id, "aria-hidden": "true", children: _jsxs("span", { className: "nx-theme-option__window", children: [_jsx("span", { className: "nx-theme-option__line" }), _jsx("span", { className: "nx-theme-option__line nx-theme-option__line--muted" }), _jsxs("span", { className: "nx-theme-option__swatches", children: [_jsx("span", { className: "nx-theme-option__pill" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--success" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--warning" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--danger" })] })] }) }), _jsxs("span", { className: "nx-theme-option__name", children: [option.name, _jsx(InlineIcon, { icon: iconCheck, className: "nx-theme-option__check" })] })] }, option.id))) })] })] }));
+}

package/dist/Components/Layouts/ThemeScript.d.ts

@@ -0,0 +1,14 @@
+import { type ThemeScriptOptions } from "../../Helpers/ThemeHelpers.ts";
+export interface ThemeScriptProps extends ThemeScriptOptions {
+    /** Content Security Policy nonce, when the app uses one. */
+    nonce?: string;
+}
+/**
+ * Applies the saved theme and mode before the first paint. Render it in `<head>` of the root layout,
+ * and put `suppressHydrationWarning` on `<html>`, because the script sets attributes there.
+ *
+ * @example
+ * <html lang="en" suppressHydrationWarning>
+ *   <head><ThemeScript /></head>
+ */
+export declare function ThemeScript({ nonce, ...options }: ThemeScriptProps): import("react").JSX.Element;

package/dist/Components/Layouts/ThemeScript.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { themeScript } from "../../Helpers/ThemeHelpers.js";
+/**
+ * Applies the saved theme and mode before the first paint. Render it in `<head>` of the root layout,
+ * and put `suppressHydrationWarning` on `<html>`, because the script sets attributes there.
+ *
+ * @example
+ * <html lang="en" suppressHydrationWarning>
+ *   <head><ThemeScript /></head>
+ */
+export function ThemeScript({ nonce, ...options }) {
+    return _jsx("script", { nonce: nonce, dangerouslySetInnerHTML: { __html: themeScript(options) } });
+}

package/dist/Components/Layouts/ThemeSwitcher.d.ts

@@ -0,0 +1,13 @@
+import { type ButtonVariant } from "../Documents/Button.tsx";
+import { type ThemePickerProps } from "./ThemePicker.tsx";
+export interface ThemeSwitcherProps extends ThemePickerProps {
+    /** Name of the button for screen readers, also shown as its tooltip. Default "Theme". */
+    label?: string;
+    /** Default `ghost`. */
+    variant?: ButtonVariant;
+}
+/**
+ * A palette button that opens the theme picker below it, with the panel's arrow on the button. The panel is a native
+ * popover: it closes with Esc or a click outside, and needs no library.
+ */
+export declare function ThemeSwitcher({ label, variant, className, ...pickerProps }: ThemeSwitcherProps): import("react").JSX.Element;

package/dist/Components/Layouts/ThemeSwitcher.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { iconPalette, InlineIcon } from "nexus-icons";
+import { useId, useLayoutEffect, useRef, useState } from "react";
+import { followAnchor, isPopoverOpen, placeUnderAnchor } from "../../Helpers/PopoverHelpers.js";
+import { Button } from "../Documents/Button.js";
+import { ThemePicker } from "./ThemePicker.js";
+/**
+ * A palette button that opens the theme picker below it, with the panel's arrow on the button. The panel is a native
+ * popover: it closes with Esc or a click outside, and needs no library.
+ */
+export function ThemeSwitcher({ label = "Theme", variant = "ghost", className, ...pickerProps }) {
+    const panelId = useId();
+    const buttonRef = useRef(null);
+    const panelRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    // Set on pointer down while the panel is open: that press closes it (light dismiss), and its click must not reopen it.
+    const dismissingRef = useRef(false);
+    // The panel is shown from here rather than by the button's popovertarget, because it can be measured only once it is
+    // shown: placing it needs its size. It opens under the button, lined up with its right edge and inside the window.
+    useLayoutEffect(() => {
+        const panel = panelRef.current;
+        const button = buttonRef.current;
+        if (!open || !panel || !button)
+            return;
+        const place = () => placeUnderAnchor(panel, button.getBoundingClientRect(), { align: "end" });
+        place();
+        return followAnchor(place);
+    }, [open]);
+    // Opening sets the state in the click itself, so the panel is placed before the frame it first paints in; closing
+    // can also come from Esc or a click outside, which only the event reports.
+    function onToggle(event) {
+        if (event.newState === "closed")
+            setOpen(false);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, variant: variant, className: className, "aria-label": label, title: label, "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": panelId, icon: _jsx(InlineIcon, { icon: iconPalette }), onPointerDown: () => {
+                    dismissingRef.current = isPopoverOpen(panelRef.current);
+                }, onClick: () => {
+                    const panel = panelRef.current;
+                    if (dismissingRef.current)
+                        dismissingRef.current = false;
+                    else if (isPopoverOpen(panel))
+                        panel?.hidePopover();
+                    else if (panel && typeof panel.showPopover === "function") {
+                        panel.showPopover();
+                        setOpen(true);
+                    }
+                } }), _jsx("div", { ref: panelRef, id: panelId, popover: "auto", role: "dialog", "aria-label": label, className: "nx-popover nx-theme-switcher__panel", onToggle: onToggle, children: _jsx(ThemePicker, { ...pickerProps }) })] }));
+}