@puzzle-ui/ui 0.0.0-stage → 0.2.0

package/dist/components/overlays/notification/notification.css

@@ -0,0 +1,172 @@
+.puzzle-notification-viewport {
+  z-index: var(--puzzle-z-index-toast, 600);
+  gap: var(--puzzle-space-3, .75rem);
+  pointer-events: none;
+  width: min(26rem, 100vw - 2rem);
+  max-height: calc(100dvh - 2rem);
+  padding: 0;
+  padding-bottom: env(safe-area-inset-bottom, 0);
+  flex-direction: column;
+  display: flex;
+  position: fixed;
+  overflow: auto;
+}
+
+.puzzle-notification-viewport--top-left {
+  top: calc(1rem + env(safe-area-inset-top, 0px));
+  left: 1rem;
+}
+
+.puzzle-notification-viewport--top-center {
+  top: calc(1rem + env(safe-area-inset-top, 0px));
+  left: 50%;
+  translate: -50%;
+}
+
+.puzzle-notification-viewport--top-right {
+  top: calc(1rem + env(safe-area-inset-top, 0px));
+  right: 1rem;
+}
+
+.puzzle-notification-viewport--bottom-left {
+  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
+  left: 1rem;
+}
+
+.puzzle-notification-viewport--bottom-center {
+  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
+  left: 50%;
+  translate: -50%;
+}
+
+.puzzle-notification-viewport--bottom-right {
+  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
+  right: 1rem;
+}
+
+.puzzle-notification {
+  align-items: flex-start;
+  gap: var(--puzzle-space-3, .75rem);
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--puzzle-space-4, 1rem);
+  color: var(--puzzle-color-text, #171717);
+  background: var(--puzzle-color-surface, #fff);
+  border: 1px solid var(--puzzle-color-border, #e5e0d6);
+  border-radius: var(--puzzle-radius-lg, .75rem);
+  box-shadow: var(--puzzle-elevation-8, 0 8px 24px #00000024);
+  pointer-events: auto;
+  overflow-wrap: anywhere;
+  animation: .18s ease-out both puzzle-notification-enter;
+  display: flex;
+}
+
+.puzzle-notification__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--puzzle-notification-accent);
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  margin-top: .125rem;
+  display: inline-flex;
+}
+
+.puzzle-notification__icon svg, .puzzle-notification__close svg {
+  width: 100%;
+  height: 100%;
+}
+
+.puzzle-notification--success {
+  --puzzle-notification-accent: var(--puzzle-color-success, #15803d);
+}
+
+.puzzle-notification--info {
+  --puzzle-notification-accent: var(--puzzle-color-info, #2563eb);
+}
+
+.puzzle-notification--warning {
+  --puzzle-notification-accent: var(--puzzle-color-warning, #b45309);
+}
+
+.puzzle-notification--error {
+  --puzzle-notification-accent: var(--puzzle-color-danger, #dc2626);
+}
+
+.puzzle-notification__content {
+  flex: auto;
+  min-width: 0;
+}
+
+.puzzle-notification__title {
+  font-weight: var(--puzzle-font-weight-semibold, 600);
+  line-height: var(--puzzle-font-line-height-normal, 1.5);
+}
+
+.puzzle-notification__description {
+  margin-top: var(--puzzle-space-1, .25rem);
+  color: var(--puzzle-color-text-muted, #666);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  line-height: var(--puzzle-font-line-height-normal, 1.5);
+}
+
+.puzzle-notification__action {
+  margin-top: var(--puzzle-space-2, .5rem);
+  color: var(--puzzle-notification-accent);
+  font: inherit;
+  font-weight: var(--puzzle-font-weight-medium, 500);
+  cursor: pointer;
+  background: none;
+  border: 0;
+  padding: 0;
+}
+
+.puzzle-notification__close {
+  border-radius: var(--puzzle-radius-sm, .25rem);
+  width: 1.5rem;
+  height: 1.5rem;
+  color: var(--puzzle-color-text-muted, #666);
+  cursor: pointer;
+  background: none;
+  border: 0;
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  margin: -.125rem -.125rem 0 0;
+  padding: .25rem;
+  display: inline-flex;
+}
+
+.puzzle-notification__close:hover {
+  color: var(--puzzle-color-text, #171717);
+  background: var(--puzzle-color-surface-sunken, #f1eee6);
+}
+
+.puzzle-notification__action:focus-visible, .puzzle-notification__close:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+@keyframes puzzle-notification-enter {
+  from {
+    opacity: 0;
+    translate: 0 .5rem;
+  }
+
+  to {
+    opacity: 1;
+    translate: 0;
+  }
+}
+
+@media (width <= 480px) {
+  .puzzle-notification-viewport {
+    width: calc(100vw - 2rem);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-notification {
+    animation: none;
+  }
+}

package/dist/components/overlays/notification/notification.types.d.cts

@@ -0,0 +1,41 @@
+import { ReactNode } from "react";
+type NotificationSeverity = "success" | "info" | "warning" | "error";
+type NotificationPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+type NotificationAction = {
+  label: string;
+  onClick: () => void;
+};
+type NotificationOptions = {
+  /** Optional unique ID. Reusing an ID replaces the existing notification. */
+  id?: string;
+  severity?: NotificationSeverity;
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Duration in milliseconds. Set to 0 to disable auto-dismiss. */
+  duration?: number;
+  action?: NotificationAction;
+  closable?: boolean;
+};
+type NotificationInput = string | NotificationOptions;
+type NotificationItem = NotificationOptions & {
+  id: string;
+  severity: NotificationSeverity;
+  closable: boolean;
+};
+type NotificationProviderProps = {
+  children: ReactNode;
+  position?: NotificationPosition;
+  maxNotifications?: number;
+  defaultDuration?: number;
+  label?: string;
+};
+type NotificationContextValue = {
+  show: (notification: NotificationInput) => string;
+  success: (message: string, options?: Omit<NotificationOptions, "severity" | "title" | "description">) => string;
+  info: (message: string, options?: Omit<NotificationOptions, "severity" | "title" | "description">) => string;
+  warning: (message: string, options?: Omit<NotificationOptions, "severity" | "title" | "description">) => string;
+  error: (message: string, options?: Omit<NotificationOptions, "severity" | "title" | "description">) => string;
+  dismiss: (id: string) => void;
+  dismissAll: () => void;
+};
+export type { NotificationAction, NotificationContextValue, NotificationInput, NotificationItem, NotificationOptions, NotificationPosition, NotificationProviderProps, NotificationSeverity };

package/dist/components/overlays/notification/notification.types.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from "react";
+type NotificationSeverity = "success" | "info" | "warning" | "error";
+type NotificationPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+type NotificationAction = {
+  label: string;
+  onClick: () => void;
+};
+type NotificationOptions = {
+  /** Optional unique ID. Reusing an ID replaces the existing notification. */
+  id?: string;
+  severity?: NotificationSeverity;
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Duration in milliseconds. Set to 0 to disable auto-dismiss. */
+  duration?: number;
+  action?: NotificationAction;
+  closable?: boolean;
+};
+type NotificationInput = string | NotificationOptions;
+type NotificationItem = NotificationOptions & {
+  id: string;
+  severity: NotificationSeverity;
+  closable: boolean;
+};
+type NotificationProviderProps = {
+  children: ReactNode;
+  position?: NotificationPosition;
+  maxNotifications?: number;
+  defaultDuration?: number;
+  label?: string;
+};
+type NotificationContextValue = {
+  show: (notification: NotificationInput) => string;
+  success: (message: string, options?: Omit<NotificationOptions, "severity" | "title" | "description">) => string;
+  info: (message: string, options?: Omit<NotificationOptions, "severity" | "title" | "description">) => string;
+  warning: (message: string, options?: Omit<NotificationOptions, "severity" | "title" | "description">) => string;
+  error: (message: string, options?: Omit<NotificationOptions, "severity" | "title" | "description">) => string;
+  dismiss: (id: string) => void;
+  dismissAll: () => void;
+};
+export type { NotificationAction, NotificationContextValue, NotificationInput, NotificationItem, NotificationOptions, NotificationPosition, NotificationProviderProps, NotificationSeverity };

package/dist/components/overlays/notification/notification.utils.cjs

@@ -0,0 +1,23 @@
+// src/components/overlays/notification/notification.utils.ts
+let notificationId = 0;
+const createNotificationId = () => {
+	notificationId += 1;
+	return `puzzle-notification-${notificationId}`;
+};
+const normalizeNotification = (input, severity = "info", defaults) => {
+	const options = typeof input === "string" ? {
+		title: input,
+		severity
+	} : input;
+	return {
+		...options,
+		id: options.id ?? createNotificationId(),
+		severity: options.severity ?? severity,
+		closable: options.closable ?? true,
+		duration: options.duration ?? defaults?.duration
+	};
+};
+exports.createNotificationId = createNotificationId;
+exports.normalizeNotification = normalizeNotification;
+
+//# sourceMappingURL=notification.utils.cjs.map

package/dist/components/overlays/notification/notification.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification.utils.cjs","names":[],"sources":["../../../../src/components/overlays/notification/notification.utils.ts"],"sourcesContent":["import type {\n  NotificationInput,\n  NotificationItem,\n  NotificationOptions,\n  NotificationSeverity,\n} from \"./notification.types\";\n\nlet notificationId = 0;\n\nconst createNotificationId = (): string => {\n  notificationId += 1;\n\n  return `puzzle-notification-${notificationId}`;\n};\n\nconst normalizeNotification = (\n  input: NotificationInput,\n  severity: NotificationSeverity = \"info\",\n  defaults?: Pick<NotificationOptions, \"duration\">,\n): NotificationItem => {\n  const options: NotificationOptions =\n    typeof input === \"string\" ? { title: input, severity } : input;\n\n  return {\n    ...options,\n    id: options.id ?? createNotificationId(),\n    severity: options.severity ?? severity,\n    closable: options.closable ?? true,\n    duration: options.duration ?? defaults?.duration,\n  };\n};\n\nexport { createNotificationId, normalizeNotification };\n"],"mappings":";AAOA,IAAI,iBAAiB;AAErB,MAAM,6BAAqC;CACzC,kBAAkB;CAElB,OAAO,uBAAuB;AAChC;AAEA,MAAM,yBACJ,OACA,WAAiC,QACjC,aACqB;CACrB,MAAM,UACJ,OAAO,UAAU,WAAW;EAAE,OAAO;EAAO;CAAS,IAAI;CAE3D,OAAO;EACL,GAAG;EACH,IAAI,QAAQ,MAAM,qBAAqB;EACvC,UAAU,QAAQ,YAAY;EAC9B,UAAU,QAAQ,YAAY;EAC9B,UAAU,QAAQ,YAAY,UAAU;CAC1C;AACF"}

package/dist/components/overlays/notification/notification.utils.js

@@ -0,0 +1,22 @@
+// src/components/overlays/notification/notification.utils.ts
+let notificationId = 0;
+const createNotificationId = () => {
+	notificationId += 1;
+	return `puzzle-notification-${notificationId}`;
+};
+const normalizeNotification = (input, severity = "info", defaults) => {
+	const options = typeof input === "string" ? {
+		title: input,
+		severity
+	} : input;
+	return {
+		...options,
+		id: options.id ?? createNotificationId(),
+		severity: options.severity ?? severity,
+		closable: options.closable ?? true,
+		duration: options.duration ?? defaults?.duration
+	};
+};
+export { createNotificationId, normalizeNotification };
+
+//# sourceMappingURL=notification.utils.js.map

package/dist/components/overlays/notification/notification.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification.utils.js","names":[],"sources":["../../../../src/components/overlays/notification/notification.utils.ts"],"sourcesContent":["import type {\n  NotificationInput,\n  NotificationItem,\n  NotificationOptions,\n  NotificationSeverity,\n} from \"./notification.types\";\n\nlet notificationId = 0;\n\nconst createNotificationId = (): string => {\n  notificationId += 1;\n\n  return `puzzle-notification-${notificationId}`;\n};\n\nconst normalizeNotification = (\n  input: NotificationInput,\n  severity: NotificationSeverity = \"info\",\n  defaults?: Pick<NotificationOptions, \"duration\">,\n): NotificationItem => {\n  const options: NotificationOptions =\n    typeof input === \"string\" ? { title: input, severity } : input;\n\n  return {\n    ...options,\n    id: options.id ?? createNotificationId(),\n    severity: options.severity ?? severity,\n    closable: options.closable ?? true,\n    duration: options.duration ?? defaults?.duration,\n  };\n};\n\nexport { createNotificationId, normalizeNotification };\n"],"mappings":";AAOA,IAAI,iBAAiB;AAErB,MAAM,6BAAqC;CACzC,kBAAkB;CAElB,OAAO,uBAAuB;AAChC;AAEA,MAAM,yBACJ,OACA,WAAiC,QACjC,aACqB;CACrB,MAAM,UACJ,OAAO,UAAU,WAAW;EAAE,OAAO;EAAO;CAAS,IAAI;CAE3D,OAAO;EACL,GAAG;EACH,IAAI,QAAQ,MAAM,qBAAqB;EACvC,UAAU,QAAQ,YAAY;EAC9B,UAAU,QAAQ,YAAY;EAC9B,UAAU,QAAQ,YAAY,UAAU;CAC1C;AACF"}

package/dist/components/overlays/notification/use-notification.cjs

@@ -0,0 +1,12 @@
+"use client";
+const require_notification_provider = require("./notification-provider.cjs");
+let react = require("react");
+// src/components/overlays/notification/use-notification.ts
+const useNotification = () => {
+	const context = (0, react.useContext)(require_notification_provider.NotificationContext);
+	if (!context) throw new Error("useNotification must be used within a NotificationProvider.");
+	return context;
+};
+exports.useNotification = useNotification;
+
+//# sourceMappingURL=use-notification.cjs.map

package/dist/components/overlays/notification/use-notification.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-notification.cjs","names":["useContext","NotificationContext"],"sources":["../../../../src/components/overlays/notification/use-notification.ts"],"sourcesContent":["\"use client\";\n\nimport { useContext } from \"react\";\nimport { NotificationContext } from \"./notification-provider\";\n\nconst useNotification = () => {\n  const context = useContext(NotificationContext);\n\n  if (!context) {\n    throw new Error(\n      \"useNotification must be used within a NotificationProvider.\",\n    );\n  }\n\n  return context;\n};\n\nexport { useNotification };\n"],"mappings":";;;;AAKA,MAAM,wBAAwB;CAC5B,MAAM,WAAA,GAAUA,MAAAA,WAAAA,CAAWC,8BAAAA,mBAAmB;CAE9C,IAAI,CAAC,SACH,MAAM,IAAI,MACR,6DACF;CAGF,OAAO;AACT"}

package/dist/components/overlays/notification/use-notification.d.cts

@@ -0,0 +1,3 @@
+import { NotificationContextValue } from "./notification.types.cjs";
+declare const useNotification: () => NotificationContextValue;
+export { useNotification };

package/dist/components/overlays/notification/use-notification.d.ts

@@ -0,0 +1,3 @@
+import { NotificationContextValue } from "./notification.types.js";
+declare const useNotification: () => NotificationContextValue;
+export { useNotification };

package/dist/components/overlays/notification/use-notification.js

@@ -0,0 +1,12 @@
+"use client";
+import { NotificationContext } from "./notification-provider.js";
+import { useContext } from "react";
+// src/components/overlays/notification/use-notification.ts
+const useNotification = () => {
+	const context = useContext(NotificationContext);
+	if (!context) throw new Error("useNotification must be used within a NotificationProvider.");
+	return context;
+};
+export { useNotification };
+
+//# sourceMappingURL=use-notification.js.map

package/dist/components/overlays/notification/use-notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-notification.js","names":[],"sources":["../../../../src/components/overlays/notification/use-notification.ts"],"sourcesContent":["\"use client\";\n\nimport { useContext } from \"react\";\nimport { NotificationContext } from \"./notification-provider\";\n\nconst useNotification = () => {\n  const context = useContext(NotificationContext);\n\n  if (!context) {\n    throw new Error(\n      \"useNotification must be used within a NotificationProvider.\",\n    );\n  }\n\n  return context;\n};\n\nexport { useNotification };\n"],"mappings":";;;;AAKA,MAAM,wBAAwB;CAC5B,MAAM,UAAU,WAAW,mBAAmB;CAE9C,IAAI,CAAC,SACH,MAAM,IAAI,MACR,6DACF;CAGF,OAAO;AACT"}

package/dist/components/overlays/overlay-stack/index.cjs

@@ -0,0 +1,195 @@
+let react = require("react");
+// src/components/overlays/overlay-stack/index.ts
+const OverlayPriorityContext = (0, react.createContext)(0);
+const overlayStacks = /* @__PURE__ */ new WeakMap();
+const FOCUSABLE_SELECTOR = [
+	"a[href]",
+	"area[href]",
+	"button:not([disabled])",
+	"input:not([disabled]):not([type='hidden'])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"iframe",
+	"object",
+	"embed",
+	"[contenteditable='true']",
+	"[tabindex]:not([tabindex='-1'])"
+].join(",");
+const focusElement = (element) => {
+	if (!element?.isConnected) return;
+	try {
+		element.focus({ preventScroll: true });
+	} catch {
+		element.focus();
+	}
+};
+const getFocusableElements = (container) => {
+	return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((element) => {
+		if (element.hidden || element.closest("[hidden], [inert], [aria-hidden='true']") || element.getAttribute("aria-disabled") === "true") return false;
+		const style = element.ownerDocument.defaultView?.getComputedStyle(element);
+		return style?.display !== "none" && style?.visibility !== "hidden";
+	});
+};
+const getTopOverlay = (entries) => {
+	return entries.reduce((top, entry) => {
+		if (!top || entry.priority > top.priority || entry.priority === top.priority && entry.order > top.order) return entry;
+		return top;
+	}, void 0);
+};
+const focusInitial = (entry) => {
+	const content = entry.getContent?.();
+	if (!content) return;
+	const autofocus = content.querySelector("[autofocus]");
+	const focusable = getFocusableElements(content);
+	const target = autofocus ?? focusable[0] ?? content;
+	if (target === content && !content.hasAttribute("tabindex")) content.setAttribute("tabindex", "-1");
+	focusElement(target);
+};
+const restoreInertSnapshots = (stack) => {
+	for (const [element, snapshot] of stack.inertSnapshots) {
+		element.inert = snapshot.inert;
+		if (snapshot.ariaHidden === null) element.removeAttribute("aria-hidden");
+		else element.setAttribute("aria-hidden", snapshot.ariaHidden);
+	}
+	stack.inertSnapshots.clear();
+};
+const getBodyBranch = (element, body) => {
+	let current = element;
+	while (current?.parentElement && current.parentElement !== body) current = current.parentElement;
+	return current?.parentElement === body ? current : null;
+};
+const syncModalIsolation = (stack) => {
+	restoreInertSnapshots(stack);
+	const top = getTopOverlay(stack.entries);
+	if (!top?.modal) return;
+	const content = top.getContent?.();
+	const layer = top.getLayer?.() ?? content;
+	if (!content || !layer) return;
+	const body = content.ownerDocument.body;
+	const activeBranch = getBodyBranch(layer, body);
+	if (!activeBranch) return;
+	for (const child of Array.from(body.children)) {
+		if (!(child instanceof content.ownerDocument.defaultView.HTMLElement)) continue;
+		if (child === activeBranch || child.contains(activeBranch)) continue;
+		stack.inertSnapshots.set(child, {
+			inert: child.inert,
+			ariaHidden: child.getAttribute("aria-hidden")
+		});
+		child.inert = true;
+		child.setAttribute("aria-hidden", "true");
+	}
+};
+const createOverlayStack = (ownerDocument) => {
+	const stack = {
+		entries: [],
+		nextOrder: 0,
+		inertSnapshots: /* @__PURE__ */ new Map(),
+		syncIsolation: () => {
+			syncModalIsolation(stack);
+		},
+		handleKeyDown: (event) => {
+			const top = getTopOverlay(stack.entries);
+			if (!top) return;
+			if (event.key === "Escape" && !event.defaultPrevented) {
+				event.preventDefault();
+				event.stopPropagation();
+				top.onEscape();
+				return;
+			}
+			if (event.key !== "Tab" || !top.modal) return;
+			const content = top.getContent?.();
+			if (!content) return;
+			const focusable = getFocusableElements(content);
+			const first = focusable[0];
+			const last = focusable[focusable.length - 1];
+			const active = ownerDocument.activeElement;
+			if (!first || !last) {
+				event.preventDefault();
+				focusElement(content);
+				return;
+			}
+			if (event.shiftKey) {
+				if (active === first || !content.contains(active)) {
+					event.preventDefault();
+					focusElement(last);
+				}
+				return;
+			}
+			if (active === last || !content.contains(active)) {
+				event.preventDefault();
+				focusElement(first);
+			}
+		},
+		handleFocusIn: (event) => {
+			const top = getTopOverlay(stack.entries);
+			if (!top?.modal) return;
+			const content = top.getContent?.();
+			if (!content) return;
+			const target = event.target;
+			if (target instanceof ownerDocument.defaultView.HTMLElement) {
+				if (content.contains(target)) {
+					top.lastFocused = target;
+					return;
+				}
+			}
+			const lastFocused = top.lastFocused;
+			focusElement(lastFocused?.isConnected && content.contains(lastFocused) ? lastFocused : getFocusableElements(content)[0] ?? content);
+		}
+	};
+	ownerDocument.addEventListener("keydown", stack.handleKeyDown, true);
+	ownerDocument.addEventListener("focusin", stack.handleFocusIn, true);
+	return stack;
+};
+const registerOverlay = (ownerDocument, onEscape, priority = 0, options = {}) => {
+	const stack = overlayStacks.get(ownerDocument) ?? createOverlayStack(ownerDocument);
+	overlayStacks.set(ownerDocument, stack);
+	const activeElement = ownerDocument.activeElement;
+	const entry = {
+		onEscape,
+		priority,
+		order: stack.nextOrder++,
+		modal: options.modal ?? false,
+		getContent: options.getContent,
+		getLayer: options.getLayer,
+		previousFocus: activeElement instanceof ownerDocument.defaultView.HTMLElement ? activeElement : null,
+		lastFocused: null
+	};
+	stack.entries.push(entry);
+	stack.syncIsolation();
+	if (entry.modal) focusInitial(entry);
+	const unregister = (() => {
+		const index = stack.entries.indexOf(entry);
+		if (index === -1) return;
+		const wasTop = getTopOverlay(stack.entries) === entry;
+		stack.entries.splice(index, 1);
+		stack.syncIsolation();
+		if (stack.entries.length === 0) {
+			ownerDocument.removeEventListener("keydown", stack.handleKeyDown, true);
+			ownerDocument.removeEventListener("focusin", stack.handleFocusIn, true);
+			overlayStacks.delete(ownerDocument);
+		}
+		if (!wasTop || !entry.modal) return;
+		Promise.resolve().then(() => {
+			const nextTop = getTopOverlay(stack.entries);
+			if (nextTop?.modal) {
+				const content = nextTop.getContent?.();
+				if (content && !content.contains(ownerDocument.activeElement)) focusInitial(nextTop);
+				return;
+			}
+			if (entry.previousFocus?.isConnected) focusElement(entry.previousFocus);
+		});
+	});
+	unregister.isTop = () => {
+		return getTopOverlay(stack.entries) === entry;
+	};
+	return unregister;
+};
+const OverlayStackProvider = ({ priority, children }) => {
+	return (0, react.createElement)(OverlayPriorityContext.Provider, { value: priority }, children);
+};
+const useOverlayPriority = () => (0, react.useContext)(OverlayPriorityContext);
+exports.OverlayStackProvider = OverlayStackProvider;
+exports.registerOverlay = registerOverlay;
+exports.useOverlayPriority = useOverlayPriority;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/overlays/overlay-stack/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["createContext","createElement","useContext"],"sources":["../../../../src/components/overlays/overlay-stack/index.ts"],"sourcesContent":["import {\n  createContext,\n  createElement,\n  useContext,\n  type PropsWithChildren,\n} from \"react\";\n\ntype OverlayRegistrationOptions = {\n  modal?: boolean;\n  getContent?: () => HTMLElement | null;\n  getLayer?: () => HTMLElement | null;\n};\n\ntype OverlayEntry = {\n  onEscape: () => void;\n  priority: number;\n  order: number;\n  modal: boolean;\n  getContent?: () => HTMLElement | null;\n  getLayer?: () => HTMLElement | null;\n  previousFocus: HTMLElement | null;\n  lastFocused: HTMLElement | null;\n};\n\ntype InertSnapshot = {\n  inert: boolean;\n  ariaHidden: string | null;\n};\n\ntype OverlayStack = {\n  entries: OverlayEntry[];\n  nextOrder: number;\n  inertSnapshots: Map<HTMLElement, InertSnapshot>;\n  handleKeyDown: (event: KeyboardEvent) => void;\n  handleFocusIn: (event: FocusEvent) => void;\n  syncIsolation: () => void;\n};\n\ntype OverlayRegistration = (() => void) & {\n  isTop: () => boolean;\n};\n\ntype OverlayStackProviderProps = PropsWithChildren<{\n  priority: number;\n}>;\n\nconst OverlayPriorityContext = createContext(0);\n\nconst overlayStacks = new WeakMap<Document, OverlayStack>();\n\nconst FOCUSABLE_SELECTOR = [\n  \"a[href]\",\n  \"area[href]\",\n  \"button:not([disabled])\",\n  \"input:not([disabled]):not([type='hidden'])\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"iframe\",\n  \"object\",\n  \"embed\",\n  \"[contenteditable='true']\",\n  \"[tabindex]:not([tabindex='-1'])\",\n].join(\",\");\n\nconst focusElement = (element: HTMLElement | null) => {\n  if (!element?.isConnected) {\n    return;\n  }\n\n  try {\n    element.focus({ preventScroll: true });\n  } catch {\n    element.focus();\n  }\n};\n\nconst getFocusableElements = (container: HTMLElement) => {\n  return Array.from(\n    container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n  ).filter((element) => {\n    if (\n      element.hidden ||\n      element.closest(\"[hidden], [inert], [aria-hidden='true']\") ||\n      element.getAttribute(\"aria-disabled\") === \"true\"\n    ) {\n      return false;\n    }\n\n    const style = element.ownerDocument.defaultView?.getComputedStyle(element);\n\n    return style?.display !== \"none\" && style?.visibility !== \"hidden\";\n  });\n};\n\nconst getTopOverlay = (entries: OverlayEntry[]) => {\n  return entries.reduce<OverlayEntry | undefined>((top, entry) => {\n    if (\n      !top ||\n      entry.priority > top.priority ||\n      (entry.priority === top.priority && entry.order > top.order)\n    ) {\n      return entry;\n    }\n\n    return top;\n  }, undefined);\n};\n\nconst focusInitial = (entry: OverlayEntry) => {\n  const content = entry.getContent?.();\n\n  if (!content) {\n    return;\n  }\n\n  const autofocus = content.querySelector<HTMLElement>(\"[autofocus]\");\n\n  const focusable = getFocusableElements(content);\n\n  const target = autofocus ?? focusable[0] ?? content;\n\n  if (target === content && !content.hasAttribute(\"tabindex\")) {\n    content.setAttribute(\"tabindex\", \"-1\");\n  }\n\n  focusElement(target);\n};\n\nconst restoreInertSnapshots = (stack: OverlayStack) => {\n  for (const [element, snapshot] of stack.inertSnapshots) {\n    element.inert = snapshot.inert;\n\n    if (snapshot.ariaHidden === null) {\n      element.removeAttribute(\"aria-hidden\");\n    } else {\n      element.setAttribute(\"aria-hidden\", snapshot.ariaHidden);\n    }\n  }\n\n  stack.inertSnapshots.clear();\n};\n\nconst getBodyBranch = (\n  element: HTMLElement,\n  body: HTMLElement,\n): HTMLElement | null => {\n  let current: HTMLElement | null = element;\n\n  while (current?.parentElement && current.parentElement !== body) {\n    current = current.parentElement;\n  }\n\n  return current?.parentElement === body ? current : null;\n};\n\nconst syncModalIsolation = (stack: OverlayStack) => {\n  restoreInertSnapshots(stack);\n\n  const top = getTopOverlay(stack.entries);\n\n  // A non-modal overlay above a modal must remain interactive.\n  if (!top?.modal) {\n    return;\n  }\n\n  const content = top.getContent?.();\n  const layer = top.getLayer?.() ?? content;\n\n  if (!content || !layer) {\n    return;\n  }\n\n  const body = content.ownerDocument.body;\n  const activeBranch = getBodyBranch(layer, body);\n\n  if (!activeBranch) {\n    return;\n  }\n\n  for (const child of Array.from(body.children)) {\n    if (!(child instanceof content.ownerDocument.defaultView!.HTMLElement)) {\n      continue;\n    }\n\n    if (child === activeBranch || child.contains(activeBranch)) {\n      continue;\n    }\n\n    stack.inertSnapshots.set(child, {\n      inert: child.inert,\n      ariaHidden: child.getAttribute(\"aria-hidden\"),\n    });\n\n    child.inert = true;\n    child.setAttribute(\"aria-hidden\", \"true\");\n  }\n};\n\nconst createOverlayStack = (ownerDocument: Document): OverlayStack => {\n  const stack: OverlayStack = {\n    entries: [],\n    nextOrder: 0,\n    inertSnapshots: new Map(),\n\n    syncIsolation: () => {\n      syncModalIsolation(stack);\n    },\n\n    handleKeyDown: (event) => {\n      const top = getTopOverlay(stack.entries);\n\n      if (!top) {\n        return;\n      }\n\n      if (event.key === \"Escape\" && !event.defaultPrevented) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        top.onEscape();\n        return;\n      }\n\n      // Only the topmost modal controls Tab navigation.\n      if (event.key !== \"Tab\" || !top.modal) {\n        return;\n      }\n\n      const content = top.getContent?.();\n\n      if (!content) {\n        return;\n      }\n\n      const focusable = getFocusableElements(content);\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      const active = ownerDocument.activeElement;\n\n      if (!first || !last) {\n        event.preventDefault();\n        focusElement(content);\n        return;\n      }\n\n      if (event.shiftKey) {\n        if (active === first || !content.contains(active)) {\n          event.preventDefault();\n          focusElement(last);\n        }\n\n        return;\n      }\n\n      if (active === last || !content.contains(active)) {\n        event.preventDefault();\n        focusElement(first);\n      }\n    },\n\n    handleFocusIn: (event) => {\n      const top = getTopOverlay(stack.entries);\n\n      if (!top?.modal) {\n        return;\n      }\n\n      const content = top.getContent?.();\n\n      if (!content) {\n        return;\n      }\n\n      const target = event.target;\n\n      if (target instanceof ownerDocument.defaultView!.HTMLElement) {\n        if (content.contains(target)) {\n          top.lastFocused = target;\n          return;\n        }\n      }\n\n      const lastFocused = top.lastFocused;\n\n      focusElement(\n        lastFocused?.isConnected && content.contains(lastFocused)\n          ? lastFocused\n          : (getFocusableElements(content)[0] ?? content),\n      );\n    },\n  };\n\n  ownerDocument.addEventListener(\"keydown\", stack.handleKeyDown, true);\n\n  ownerDocument.addEventListener(\"focusin\", stack.handleFocusIn, true);\n\n  return stack;\n};\n\nconst registerOverlay = (\n  ownerDocument: Document,\n  onEscape: () => void,\n  priority = 0,\n  options: OverlayRegistrationOptions = {},\n): OverlayRegistration => {\n  const stack =\n    overlayStacks.get(ownerDocument) ?? createOverlayStack(ownerDocument);\n\n  overlayStacks.set(ownerDocument, stack);\n\n  const activeElement = ownerDocument.activeElement;\n\n  const entry: OverlayEntry = {\n    onEscape,\n    priority,\n    order: stack.nextOrder++,\n    modal: options.modal ?? false,\n    getContent: options.getContent,\n    getLayer: options.getLayer,\n    previousFocus:\n      activeElement instanceof ownerDocument.defaultView!.HTMLElement\n        ? activeElement\n        : null,\n    lastFocused: null,\n  };\n\n  stack.entries.push(entry);\n  stack.syncIsolation();\n\n  if (entry.modal) {\n    focusInitial(entry);\n  }\n\n  const unregister = (() => {\n    const index = stack.entries.indexOf(entry);\n\n    if (index === -1) {\n      return;\n    }\n\n    const wasTop = getTopOverlay(stack.entries) === entry;\n\n    stack.entries.splice(index, 1);\n    stack.syncIsolation();\n\n    if (stack.entries.length === 0) {\n      ownerDocument.removeEventListener(\"keydown\", stack.handleKeyDown, true);\n\n      ownerDocument.removeEventListener(\"focusin\", stack.handleFocusIn, true);\n\n      overlayStacks.delete(ownerDocument);\n    }\n\n    if (!wasTop || !entry.modal) {\n      return;\n    }\n\n    Promise.resolve().then(() => {\n      const nextTop = getTopOverlay(stack.entries);\n\n      // Als een overlay boven de gesloten overlay actief blijft,\n      // moet focus binnen die overlay blijven.\n      if (nextTop?.modal) {\n        const content = nextTop.getContent?.();\n\n        if (content && !content.contains(ownerDocument.activeElement)) {\n          focusInitial(nextTop);\n        }\n\n        return;\n      }\n\n      // Herstel focus alleen als er geen modal overlay meer actief is.\n      if (entry.previousFocus?.isConnected) {\n        focusElement(entry.previousFocus);\n      }\n    });\n  }) as OverlayRegistration;\n\n  unregister.isTop = () => {\n    return getTopOverlay(stack.entries) === entry;\n  };\n\n  return unregister;\n};\n\nconst OverlayStackProvider = ({\n  priority,\n  children,\n}: OverlayStackProviderProps) => {\n  return createElement(\n    OverlayPriorityContext.Provider,\n    { value: priority },\n    children,\n  );\n};\n\nconst useOverlayPriority = () => useContext(OverlayPriorityContext);\n\nexport { OverlayStackProvider, registerOverlay, useOverlayPriority };\n\nexport type { OverlayRegistration, OverlayRegistrationOptions };\n"],"mappings":"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"}