@abuzareal/contour-ui 0.4.0 → 0.6.0

package/dist/hooks/useLayerDismiss.js

@@ -0,0 +1,48 @@
+"use client";
+import { useContext, useState, useLayoutEffect, useRef, } from "react";
+import { LayerParent, registerLayer, refreshLayerStack, } from "../lib/layers.js";
+export default function useLayerDismiss(container, active, onDismiss, options = {}) {
+    const [id] = useState(() => Symbol("contour-layer"));
+    const parent = useContext(LayerParent);
+    const latest = useRef({ onDismiss, options });
+    const registration = useRef(undefined);
+    // Reconcile each commit so owner-document moves rebind listeners, without reordering on updates.
+    useLayoutEffect(() => {
+        latest.current = { onDismiss, options };
+        const doc = active ? container.current?.ownerDocument : undefined;
+        if (registration.current &&
+            (registration.current.doc !== doc ||
+                registration.current.parent !== parent)) {
+            registration.current.dispose();
+            registration.current = undefined;
+        }
+        if (!doc)
+            return;
+        if (registration.current) {
+            refreshLayerStack(doc);
+            return;
+        }
+        registration.current = {
+            doc,
+            parent,
+            dispose: registerLayer(doc, {
+                id,
+                parent,
+                elements: () => [
+                    container.current,
+                    ...(latest.current.options.branches ?? []).map((ref) => ref.current),
+                ],
+                floating: () => latest.current.options.layerElement?.current ?? null,
+                dismiss: (reason, event) => latest.current.onDismiss(reason, event),
+                get outside() {
+                    return latest.current.options.outside !== false;
+                },
+            }),
+        };
+    });
+    useLayoutEffect(() => () => {
+        registration.current?.dispose();
+        registration.current = undefined;
+    }, []);
+    return id;
+}

package/dist/hooks/useMobileMenu.d.ts

@@ -1,3 +1,2 @@
-/** 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 | null>, toggleButton: RefObject<HTMLButtonElement | null>): readonly [boolean, import("react").Dispatch<import("react").SetStateAction<boolean>>];

package/dist/hooks/useMobileMenu.js

@@ -1,35 +1,30 @@
 "use client";
 /** Open state for the mobile menu, closing on Escape, outside pointer, or desktop resize. */
+import useDismiss from "./useDismiss.js";
 import { useEffect, useState } from "react";
 const desktopQuery = "(min-width: 768px)";
 export default function useMobileMenu(container, toggleButton) {
     const [open, setOpen] = useState(false);
+    useDismiss(container, open, (reason) => {
+        setOpen(false);
+        if (reason === "escape" && toggleButton.current?.isConnected)
+            toggleButton.current.focus();
+    }, { branches: [toggleButton] });
     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 view = container.current?.ownerDocument.defaultView;
+        if (!view)
+            return;
+        const desktop = view.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];
 }

package/dist/hooks/usePanelFocus.d.ts

@@ -0,0 +1,10 @@
+import { type RefObject } from "react";
+export type PanelFocusOptions = {
+    initialFocus?: RefObject<HTMLElement | null> | false;
+    onOpenAutoFocus?: (event: Event) => void;
+    onCloseAutoFocus?: (event: Event) => void;
+};
+/** Reconcile actual node/document moves without treating new callback props as a close. */
+export default function usePanelFocus(open: boolean, trigger: RefObject<HTMLElement | null>, panel: RefObject<HTMLElement | null>, reason: RefObject<{
+    value: string | undefined;
+}>, options: PanelFocusOptions, anchorElement?: HTMLElement | null, layer?: symbol): void;

package/dist/hooks/usePanelFocus.js

@@ -0,0 +1,60 @@
+"use client";
+import { layerOwnsFocus, isTopLayer } from "../lib/layers.js";
+import { useLayoutEffect, useRef } from "react";
+/** Reconcile actual node/document moves without treating new callback props as a close. */
+export default function usePanelFocus(open, trigger, panel, reason, options, anchorElement, layer) {
+    const policy = useRef(options);
+    const registration = useRef(undefined);
+    useLayoutEffect(() => {
+        policy.current = options;
+        const node = open && anchorElement ? panel.current : null;
+        const old = registration.current;
+        if (old && (!node || old.node !== node || old.doc !== node.ownerDocument)) {
+            old.dispose(!open);
+            registration.current = undefined;
+        }
+        if (!node || registration.current)
+            return;
+        const doc = node.ownerDocument, returnTarget = trigger.current, returnReason = reason.current;
+        const owns = () => node.contains(doc.activeElement) ||
+            (layer !== undefined && layerOwnsFocus(doc, layer));
+        let ownedFocus = owns();
+        const observeFocus = () => {
+            ownedFocus = owns();
+        };
+        doc.addEventListener("focusin", observeFocus);
+        const EventType = doc.defaultView?.Event ?? Event;
+        const event = new EventType("contour-open-auto-focus", {
+            cancelable: true,
+        });
+        policy.current.onOpenAutoFocus?.(event);
+        if (!event.defaultPrevented &&
+            (layer === undefined || isTopLayer(doc, layer)) &&
+            policy.current.initialFocus !== false)
+            (policy.current.initialFocus?.current ?? node).focus();
+        ownedFocus = owns();
+        const currentPolicy = policy;
+        registration.current = {
+            node,
+            doc,
+            dispose(returnFocus) {
+                doc.removeEventListener("focusin", observeFocus);
+                if (!returnFocus)
+                    return;
+                const closeEvent = new EventType("contour-close-auto-focus", {
+                    cancelable: true,
+                });
+                currentPolicy.current.onCloseAutoFocus?.(closeEvent);
+                if (returnReason?.value !== "outside" &&
+                    !closeEvent.defaultPrevented &&
+                    returnTarget?.isConnected &&
+                    (returnReason?.value === "escape" || ownedFocus))
+                    returnTarget.focus();
+            },
+        };
+    });
+    useLayoutEffect(() => () => {
+        registration.current?.dispose(true);
+        registration.current = undefined;
+    }, []);
+}

package/dist/hooks/useTheme.d.ts

@@ -2,4 +2,5 @@ export type Theme = "light" | "dark";
 export default function useTheme(animate?: boolean): {
     theme: Theme;
     toggle: (origin: HTMLElement) => void;
+    canToggle: boolean;
 };

package/dist/hooks/useTheme.js

@@ -1,6 +1,7 @@
 "use client";
 /** Light/dark theme state: persisted choice, system fallback, and the animated switch. */
-import { useCallback, useEffect, useSyncExternalStore } from "react";
+import { useCallback, useContext, useEffect, useSyncExternalStore, } from "react";
+import { ThemeScopeContext } from "../lib/themeScope.js";
 import { flushSync } from "react-dom";
 import { readStorage, storageKeys, writeStorage } from "../lib/storage.js";
 import { themeColors } from "../lib/themeBootstrap.js";
@@ -63,8 +64,12 @@ function subscribe(onChange) {
     };
 }
 export default function useTheme(animate = true) {
-    const theme = useSyncExternalStore(subscribe, readTheme, () => "light");
+    const scope = useContext(ThemeScopeContext);
+    const scopedSubscribe = useCallback((listener) => (scope ? () => { } : subscribe(listener)), [scope]);
+    const theme = useSyncExternalStore(scopedSubscribe, readTheme, () => "light");
     useEffect(() => {
+        if (scope)
+            return;
         const media = window.matchMedia("(prefers-color-scheme: dark)");
         const followSystem = () => {
             if (readStorage("local", storageKeys.theme) !== null)
@@ -74,8 +79,12 @@ export default function useTheme(animate = true) {
         };
         media.addEventListener("change", followSystem);
         return () => media.removeEventListener("change", followSystem);
-    }, []);
+    }, [scope]);
     const toggle = useCallback((origin) => {
+        if (scope) {
+            scope.onThemeChange?.(scope.theme === "dark" ? "light" : "dark");
+            return;
+        }
         const next = readTheme() === "dark" ? "light" : "dark";
         writeStorage("local", storageKeys.theme, next);
         const commit = () => {
@@ -94,6 +103,10 @@ export default function useTheme(animate = true) {
             return;
         }
         animateReveal(document.startViewTransition(commit), origin);
-    }, [animate]);
-    return { theme, toggle };
+    }, [animate, scope]);
+    return {
+        theme: scope?.theme ?? theme,
+        toggle,
+        canToggle: scope ? !!scope.onThemeChange : true,
+    };
 }

package/dist/index.d.ts

@@ -127,3 +127,10 @@ export * from "./lib/motion.js";
 export type { Section } from "./types.js";
 export { default as SceneBoundary } from "./components/hero/SceneBoundary.js";
 export { safeHref } from "./lib/safeHref.js";
+export { default as ThemeScope } from "./components/ui/ThemeScope.js";
+export type * from "./components/ui/ThemeScope.js";
+export type { FloatingOptions } from "./hooks/useFloatingPanel.js";
+export type { PanelFocusOptions } from "./hooks/usePanelFocus.js";
+export type { DismissReason } from "./lib/layers.js";
+export { default as Table, type TableProps } from "./components/ui/Table.js";
+export { default as Combobox, type ComboboxProps, type ComboboxOption, } from "./components/ui/Combobox.js";

package/dist/index.js

@@ -66,3 +66,6 @@ export * from "./lib/a11y.js";
 export * from "./lib/motion.js";
 export { default as SceneBoundary } from "./components/hero/SceneBoundary.js";
 export { safeHref } from "./lib/safeHref.js";
+export { default as ThemeScope } from "./components/ui/ThemeScope.js";
+export { default as Table } from "./components/ui/Table.js";
+export { default as Combobox, } from "./components/ui/Combobox.js";

package/dist/kit/data-display.css

@@ -277,12 +277,18 @@
 }
 
 .data-table {
+  color: var(--fg);
   width: 100%;
   min-width: 560px;
   border-collapse: collapse;
   font-size: 14px;
 }
 
+.data-table caption {
+  color: inherit;
+  text-align: left;
+}
+
 .data-table th {
   padding: 14px 16px 14px 0;
   border-bottom: 1px solid var(--line);

package/dist/kit/forms.css

@@ -272,7 +272,7 @@ textarea {
 .switch-thumb {
   position: absolute;
   top: 3px;
-  left: 3px;
+  inset-inline-start: 3px;
   width: 16px;
   height: 16px;
   border-radius: 50%;
@@ -287,7 +287,7 @@ textarea {
 
 .switch-track[aria-checked="true"] .switch-thumb {
   background: var(--ink);
-  transform: translateX(20px);
+  inset-inline-start: 23px;
 }
 
 .switch-track:disabled {
@@ -361,3 +361,46 @@ textarea {
   outline: 2px solid var(--fg);
   outline-offset: 6px;
 }
+
+:dir(rtl) .slider input[type="range"]::-webkit-slider-runnable-track,
+:dir(rtl) .slider input[type="range"]::-moz-range-track {
+  background: linear-gradient(
+    to left,
+    var(--fg) var(--progress),
+    var(--line-strong) var(--progress)
+  );
+}
+
+/* Combobox uses the same native field frame; the popup is an allowed-value list. */
+.combobox { min-width: 0; }
+.combobox-control { display: flex; align-items: center; gap: 8px; }
+.combobox-control input { min-width: 0; flex: 1; }
+.combobox-trigger, .combobox-retry {
+  border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer;
+}
+.combobox-trigger { display: grid; place-items: center; min-width: 36px; min-height: 36px; flex: none; }
+.combobox-trigger:disabled { cursor: default; opacity: .45; }
+.combobox-positioner { z-index: 30; }
+.combobox-popup {
+  width: var(--anchor-width, 16rem);
+  max-width: var(--available-width, calc(100vw - 16px));
+  max-height: min(320px, var(--available-height, 320px));
+  overflow: auto; overscroll-behavior: contain;
+  border: 1px solid var(--line); border-radius: var(--radius-sm);
+  background: var(--bg); color: var(--fg); padding: 4px;
+  box-shadow: 0 8px 28px rgb(0 0 0 / .12);
+}
+.combobox-list { outline: none; }
+.combobox-option { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; overflow-wrap: anywhere; cursor: default; }
+.combobox-option[data-highlighted] { background: var(--invert-bg); color: var(--invert-fg); outline: 2px solid currentColor; outline-offset: -2px; }
+.combobox-option[data-disabled] { opacity: .45; }
+.combobox-status { padding: 12px; font-size: 14px; }
+.combobox-retry { padding: 10px 12px; text-decoration: underline; }
+.combobox-trigger:focus-visible, .combobox-retry:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+@media (forced-colors: active) {
+  .combobox-popup { border-color: CanvasText; background: Canvas; color: CanvasText; }
+  .combobox-option[data-highlighted] { background: Highlight; color: HighlightText; }
+  .combobox-option[data-disabled] { color: GrayText; opacity: 1; }
+}
+/* Keep the live region mounted without a blank row when there is no message. */
+.combobox-status:empty { padding: 0; }

package/dist/kit/navigation.css

@@ -260,3 +260,7 @@
     min-width: 14px;
   }
 }
+
+:dir(rtl) .pagination-step svg {
+  transform: scaleX(-1);
+}

package/dist/kit/overlays.css

@@ -10,10 +10,12 @@
   z-index: 40;
   width: max-content;
   max-width: 220px;
+  overflow: auto;
+  overflow-wrap: anywhere;
   padding: 6px 10px;
-  background: var(--ink);
-  color: var(--paper);
-  pointer-events: none;
+  background: var(--invert-bg);
+  color: var(--invert-fg);
+  pointer-events: auto;
   opacity: 0;
   visibility: hidden;
   transition:
@@ -230,7 +232,9 @@
   position: absolute;
   top: calc(100% + 8px);
   z-index: 30;
-  min-width: 220px;
+  min-width: min(220px, calc(100vw - 16px));
+  overflow: auto;
+  overflow-wrap: anywhere;
   padding: 6px;
   border: 1px solid var(--line);
   background: var(--surface);

package/dist/lib/classNames.d.ts

@@ -1,5 +1,7 @@
 /** Builds a className string from optional parts, skipping falsy values. */
 export declare const cx: (...parts: (string | false | null | undefined)[]) => string;
+/** Prefixed hooks alongside compatibility classes; never use this for IDs or ARIA references. */
+export declare const ccx: (...parts: (string | false | null | undefined)[]) => string;
 export type ButtonVariant = "primary" | "accent" | "secondary" | "ghost" | "danger";
 export type ButtonSize = "sm" | "md" | "lg";
 /** Button classes, shared so anchors can look like buttons without duplicating styles. */

package/dist/lib/classNames.js

@@ -1,4 +1,19 @@
+import { componentClasses } from "./componentClasses.js";
 /** Builds a className string from optional parts, skipping falsy values. */
 export const cx = (...parts) => parts.filter(Boolean).join(" ");
+/** Prefixed hooks alongside compatibility classes; never use this for IDs or ARIA references. */
+export const ccx = (...parts) => {
+    const names = cx(...parts)
+        .split(/\s+/)
+        .filter(Boolean);
+    return [
+        ...new Set([
+            ...names,
+            ...names
+                .filter((name) => componentClasses.has(name))
+                .map((name) => `contour-${name}`),
+        ]),
+    ].join(" ");
+};
 /** Button classes, shared so anchors can look like buttons without duplicating styles. */
-export const buttonClassName = (variant = "primary", size = "md", className) => cx("button", `button-${variant}`, `button-${size}`, className);
+export const buttonClassName = (variant = "primary", size = "md", className) => ccx("button", `button-${variant}`, `button-${size}`, className);

package/dist/lib/componentClasses.d.ts

@@ -0,0 +1 @@
+export declare const componentClasses: Set<string>;

package/dist/lib/componentClasses.js

@@ -0,0 +1,2 @@
+// Generated compatibility aliases; unknown consumer classes pass through unchanged.
+export const componentClasses = new Set(["alert", "alert-accent", "alert-action", "alert-banner", "alert-body", "alert-content", "alert-danger", "alert-dismiss", "alert-icon", "alert-info", "alert-success", "alert-title", "alert-warning", "avatar", "avatar-group", "avatar-initials", "avatar-lg", "avatar-sm", "avatar-status", "avatar-status-away", "avatar-status-online", "avatar-xl", "badge", "badge-danger", "badge-dot", "badge-info", "badge-invert", "badge-neutral", "badge-success", "badge-warning", "brand", "breadcrumbs", "button", "button-accent", "button-danger", "button-ghost", "button-icon", "button-lg", "button-secondary", "button-sm", "card", "card-acid", "card-body", "card-footer", "card-icon", "card-ink", "card-interactive", "card-title", "card-top", "choice", "choice-box", "choice-control", "choice-description", "choice-error", "choice-input", "choice-invalid", "choice-label", "choice-radio", "choice-text", "combobox", "combobox-control", "combobox-list", "combobox-option", "combobox-popup", "combobox-positioner", "combobox-retry", "combobox-status", "combobox-trigger", "count-up", "css", "data-table", "data-table-idle", "depth-button", "depth-button-face", "dialog", "dialog-body", "dialog-close", "dialog-description", "dialog-footer", "dialog-header", "dialog-left", "dialog-panel", "dialog-right", "disclosure", "disclosure-icon", "divider", "divider-labelled", "empty-state", "empty-state-icon", "field", "field-chevron", "field-control", "field-counter", "field-disabled", "field-error", "field-footer", "field-icon", "field-invalid", "field-label", "field-required", "field-select", "field-trailing", "flip-back", "flip-card", "flip-face", "flip-front", "flip-stage", "flip-toggle", "hero-letter", "icon-button", "icon-button-accent", "icon-button-lg", "icon-button-sm", "icon-button-solid", "icon-button-spin", "inline-link", "is-flipped", "is-open", "is-visible", "kbd", "magnetic", "marquee", "marquee-inner", "marquee-track", "menu", "menu-chevron", "menu-end", "menu-item", "menu-item-danger", "menu-list", "menu-start", "menu-trigger", "mono", "opening-sequence", "page-width", "pagination", "pagination-gap", "pagination-page", "pagination-step", "popover", "popover-end", "popover-panel", "popover-start", "popover-title", "progress", "progress-accent", "progress-danger", "progress-fill", "progress-header", "progress-indeterminate", "progress-success", "progress-track", "radio-group", "radio-group-inline", "reveal", "scroll-progress", "sculpture-canvas", "section-label", "segmented", "segmented-option", "site-shell", "skeleton", "skeleton-block", "skeleton-circle", "skeleton-line", "skip-link", "slider", "slider-header", "spinner", "stage-canvas", "stat", "stat-suffix", "stepper", "stepper-complete", "stepper-current", "stepper-description", "stepper-label", "stepper-marker", "stepper-step", "stepper-text", "stepper-upcoming", "switch", "switch-thumb", "switch-track", "table-scroll", "tabs", "tabs-list", "tabs-panel", "tabs-tab", "tag", "tag-removable", "tag-remove", "text-link", "theme-fading", "theme-icon-moon", "theme-icon-sun", "theme-toggle", "tilt-card", "tilt-glare", "tilt-stage", "timeline", "timeline-body", "timeline-current", "timeline-date", "timeline-entry", "timeline-title", "toast", "toast-bar", "toast-close", "toast-content", "toast-danger", "toast-info", "toast-success", "toast-viewport", "toast-warning", "tooltip", "tooltip-anchor", "tooltip-bottom", "tooltip-left", "tooltip-right", "tooltip-top", "ts", "type-line", "type-run", "visually-hidden"]);

package/dist/lib/keyboard.d.ts

@@ -4,5 +4,5 @@ type Orientation = "horizontal" | "vertical";
  * Returns the index to move to for an arrow, Home, or End key press,
  * wrapping at both ends, or null when the key is not a navigation key.
  */
-export declare function nextIndexForKey(key: string, current: number, count: number, orientation?: Orientation): number | null;
+export declare function nextIndexForKey(key: string, current: number, count: number, orientation?: Orientation, direction?: "ltr" | "rtl"): number | null;
 export {};

package/dist/lib/keyboard.js

@@ -6,10 +6,13 @@ const keysFor = (orientation) => orientation === "horizontal"
  * Returns the index to move to for an arrow, Home, or End key press,
  * wrapping at both ends, or null when the key is not a navigation key.
  */
-export function nextIndexForKey(key, current, count, orientation = "horizontal") {
+export function nextIndexForKey(key, current, count, orientation = "horizontal", direction = "ltr") {
     if (count <= 0)
         return null;
-    const { previous, next } = keysFor(orientation);
+    const keys = keysFor(orientation);
+    const { previous, next } = orientation === "horizontal" && direction === "rtl"
+        ? { previous: keys.next, next: keys.previous }
+        : keys;
     if (key === next)
         return (current + 1) % count;
     if (key === previous)

package/dist/lib/layers.d.ts

@@ -0,0 +1,18 @@
+export type DismissReason = "escape" | "outside";
+export declare const LayerVisibility: import("react").Context<boolean>;
+export declare const LayerParent: import("react").Context<symbol | undefined>;
+type Layer = {
+    id: symbol;
+    parent?: symbol;
+    elements: () => (HTMLElement | null)[];
+    dismiss: (reason: DismissReason, event: KeyboardEvent | PointerEvent) => void;
+    outside: boolean;
+    floating?: () => HTMLElement | null;
+};
+export declare function layerOwnsFocus(doc: Document, id: symbol): boolean;
+/** Paint order follows dismissal order, including later-opened siblings and portaled children. */
+export declare function refreshLayerStack(doc: Document): void;
+export declare function isTopLayer(doc: Document, id: symbol): boolean;
+/** One bubble listener per owner document. Never stop propagation or cascade a dismissal. */
+export declare function registerLayer(doc: Document, layer: Layer): () => void;
+export {};

package/dist/lib/layers.js

@@ -0,0 +1,128 @@
+import { createContext } from "react";
+export const LayerVisibility = createContext(true);
+export const LayerParent = createContext(undefined);
+const documents = new WeakMap();
+function descendant(layer, ancestor, layers) {
+    let parent = layer.parent;
+    const visited = new Set();
+    while (parent && !visited.has(parent)) {
+        if (parent === ancestor.id)
+            return true;
+        visited.add(parent);
+        parent = layers.find((entry) => entry.id === parent)?.parent;
+    }
+    return false;
+}
+function topLayer(layers) {
+    return [...layers]
+        .reverse()
+        .find((layer) => !layers.some((entry) => entry !== layer &&
+        (descendant(entry, layer, layers) ||
+            layer
+                .elements()
+                .some((root) => entry
+                .elements()
+                .some((child) => root && child && root !== child && root.contains(child))))));
+}
+export function layerOwnsFocus(doc, id) {
+    const layers = documents.get(doc)?.layers ?? [];
+    const owner = layers.find((layer) => layer.id === id);
+    return (!!owner &&
+        layers.some((layer) => (layer === owner || descendant(layer, owner, layers)) &&
+            layer
+                .elements()
+                .some((element) => element?.contains(doc.activeElement))));
+}
+/** Paint order follows dismissal order, including later-opened siblings and portaled children. */
+export function refreshLayerStack(doc) {
+    const registry = documents.get(doc);
+    if (!registry)
+        return;
+    const remaining = [...registry.layers];
+    const ordered = [];
+    while (remaining.length) {
+        const top = topLayer(remaining);
+        if (!top)
+            break;
+        ordered.unshift(top);
+        remaining.splice(remaining.indexOf(top), 1);
+    }
+    const active = new Set();
+    ordered.forEach((layer, index) => {
+        const panel = layer.floating?.();
+        if (panel) {
+            active.add(panel);
+            if (!registry.zStyles.has(panel))
+                registry.zStyles.set(panel, {
+                    value: panel.style.getPropertyValue("z-index"),
+                    priority: panel.style.getPropertyPriority("z-index"),
+                });
+            const value = `calc(var(--contour-z-overlay, 30) + ${index})`;
+            if (panel.style.zIndex !== value)
+                panel.style.zIndex = value;
+        }
+    });
+    for (const [element, old] of registry.zStyles)
+        if (!active.has(element)) {
+            if (old.value)
+                element.style.setProperty("z-index", old.value, old.priority);
+            else
+                element.style.removeProperty("z-index");
+            registry.zStyles.delete(element);
+        }
+}
+export function isTopLayer(doc, id) {
+    return topLayer(documents.get(doc)?.layers ?? [])?.id === id;
+}
+/** One bubble listener per owner document. Never stop propagation or cascade a dismissal. */
+export function registerLayer(doc, layer) {
+    let registry = documents.get(doc);
+    if (!registry) {
+        const layers = [];
+        const keydown = (event) => {
+            if (event.key !== "Escape" || event.defaultPrevented)
+                return;
+            const top = topLayer(layers);
+            if (!top)
+                return;
+            top.dismiss("escape", event);
+            // Suppress native modal cancellation after dispatching the chosen layer.
+            event.preventDefault();
+        };
+        const pointerdown = (event) => {
+            if (event.defaultPrevented || event.button > 0)
+                return;
+            const top = topLayer(layers);
+            if (!top?.outside)
+                return;
+            const path = event.composedPath();
+            if (top.elements().some((element) => element && path.includes(element)))
+                return;
+            top.dismiss("outside", event);
+        };
+        doc.addEventListener("keydown", keydown);
+        doc.addEventListener("pointerdown", pointerdown);
+        registry = {
+            layers,
+            zStyles: new Map(),
+            dispose: () => {
+                doc.removeEventListener("keydown", keydown);
+                doc.removeEventListener("pointerdown", pointerdown);
+            },
+        };
+        documents.set(doc, registry);
+    }
+    registry.layers.push(layer);
+    refreshLayerStack(doc);
+    const owned = registry;
+    return () => {
+        const index = owned.layers.indexOf(layer);
+        if (index !== -1)
+            owned.layers.splice(index, 1);
+        refreshLayerStack(doc);
+        if (owned.layers.length === 0) {
+            owned.dispose();
+            documents.delete(doc);
+        }
+    };
+}

package/dist/lib/themeScope.d.ts

@@ -0,0 +1,5 @@
+import type { Theme } from "../hooks/useTheme.js";
+export declare const ThemeScopeContext: import("react").Context<{
+    theme: Theme;
+    onThemeChange?: (theme: Theme) => void;
+} | null>;

package/dist/lib/themeScope.js

@@ -0,0 +1,3 @@
+"use client";
+import { createContext } from "react";
+export const ThemeScopeContext = createContext(null);

package/dist/minimal-reset.css

@@ -0,0 +1,6 @@
+/* Optional global normalization. Page layout, colors and typography belong to the application. */
+*, ::before, ::after { box-sizing: border-box; }
+html { -webkit-text-size-adjust: 100%; }
+body { margin: 0; }
+button, input, select, textarea { font: inherit; }
+[hidden]:where(:not([hidden="until-found"])) { display: none; }

package/dist/navigation.css

@@ -0,0 +1,5 @@
+@import "./scoped/tokens.css";
+@import "./scoped/base.css";
+@import "./scoped/utilities.css";
+@import "./scoped/ui.css";
+@import "./scoped/kit/navigation.css";

package/dist/overlays.css

@@ -0,0 +1,5 @@
+@import "./scoped/tokens.css";
+@import "./scoped/base.css";
+@import "./scoped/utilities.css";
+@import "./scoped/ui.css";
+@import "./scoped/kit/overlays.css";