@passui/react 0.1.47 → 0.2.0

package/dist/kbd.js

@@ -0,0 +1,86 @@
+import { cx } from "./lib/cx.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/components/kbd.tsx
+/**
+* Modifier names that read differently per platform: Apple shows its symbol,
+* everyone else the word. Both are rendered and CSS picks one from `data-os`
+* (set before first paint), so server and client markup always agree.
+*/
+const keys = {
+	mod: {
+		apple: "⌘",
+		other: "Ctrl"
+	},
+	cmd: {
+		apple: "⌘",
+		other: "Win"
+	},
+	ctrl: {
+		apple: "⌃",
+		other: "Ctrl"
+	},
+	alt: {
+		apple: "⌥",
+		other: "Alt"
+	},
+	option: {
+		apple: "⌥",
+		other: "Alt"
+	},
+	shift: {
+		apple: "⇧",
+		other: "Shift"
+	},
+	enter: {
+		apple: "↩",
+		other: "Enter"
+	},
+	backspace: {
+		apple: "⌫",
+		other: "Backspace"
+	},
+	delete: {
+		apple: "⌦",
+		other: "Del"
+	},
+	esc: {
+		apple: "⎋",
+		other: "Esc"
+	},
+	tab: {
+		apple: "⇥",
+		other: "Tab"
+	}
+};
+const showApple = "hidden [:root[data-os=macos]_&]:inline [:root[data-os=ios]_&]:inline";
+const showOther = "[:root[data-os=macos]_&]:hidden [:root[data-os=ios]_&]:hidden";
+function renderKey(child) {
+	if (typeof child !== "string") return child;
+	const key = keys[child.toLowerCase()];
+	if (!key) return child;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: showApple,
+		children: key.apple
+	}), /* @__PURE__ */ jsx("span", {
+		className: showOther,
+		children: key.other
+	})] });
+}
+/** A keyboard key cap. Pass `Mod`, `Alt`, `Shift` and friends and the platform's own symbol shows. */
+function Kbd({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd",
+		className: cx("pointer-events-none inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded-md bg-fill px-1.5 font-sans text-caption2 font-medium text-label-secondary shadow-[inset_0_-1px_0_var(--color-separator)]", className),
+		...props,
+		children: Array.isArray(children) ? children.map(renderKey) : renderKey(children)
+	});
+}
+function KbdGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "kbd-group",
+		className: cx("inline-flex items-center gap-1", className),
+		...props
+	});
+}
+export { Kbd, KbdGroup };

package/dist/label.d.ts

@@ -0,0 +1,3 @@
+import { ComponentProps } from "react";
+/** A native label. Pair it with a control through `htmlFor`. */
+export declare function Label({ className, ...props }: ComponentProps<"label">): import("react").JSX.Element;

package/dist/label.js

@@ -0,0 +1,12 @@
+import { cx } from "./lib/cx.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/label.tsx
+/** A native label. Pair it with a control through `htmlFor`. */
+function Label({ className, ...props }) {
+	return /* @__PURE__ */ jsx("label", {
+		"data-slot": "label",
+		className: cx("flex select-none items-center gap-2 text-footnote font-medium leading-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+		...props
+	});
+}
+export { Label };

package/dist/labeled-content.d.ts

@@ -0,0 +1,24 @@
+import { HTMLAttributes, ReactNode } from "react";
+export type LabeledContentSize = "sm" | "md" | "lg";
+export interface LabeledContentProps extends HTMLAttributes<HTMLDivElement> {
+  /** The visible name of the row. */
+  label: ReactNode;
+  /** Supporting text directly below the label. */
+  description?: ReactNode;
+  /** A glyph in a soft tile before the label, like a Settings row. */
+  icon?: ReactNode;
+  /** The row's control or value. */
+  children: ReactNode;
+  /** Places the control below the label at every width. @default false */
+  stacked?: boolean;
+  /** Places a wide control below its label on phones. @default false */
+  wide?: boolean;
+  /** Row padding density. @default "md" */
+  size?: LabeledContentSize;
+}
+/**
+ * A row: a label, an optional description, and its control at the trailing
+ * end, as SwiftUI's `LabeledContent`. Wide controls move under the label
+ * when there is no room beside it, rather than squeezing.
+ */
+export declare function LabeledContent({ label, description, icon, children, stacked, wide, size, className, ...props }: LabeledContentProps): import("react").JSX.Element;

package/dist/labeled-content.js

@@ -0,0 +1,41 @@
+import { cx } from "./lib/cx.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/labeled-content.tsx
+const padding = {
+	sm: "px-3 py-1.5",
+	md: "px-4 py-2",
+	lg: "px-5 py-3"
+};
+/**
+* A row: a label, an optional description, and its control at the trailing
+* end, as SwiftUI's `LabeledContent`. Wide controls move under the label
+* when there is no room beside it, rather than squeezing.
+*/
+function LabeledContent({ label, description, icon, children, stacked, wide, size = "md", className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "labeled-content",
+		className: cx("flex min-h-11 flex-wrap gap-x-4 gap-y-2", padding[size], stacked ? "flex-col items-stretch" : cx("items-center justify-between", wide && "max-sm:flex-col max-sm:items-stretch max-sm:gap-2"), className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx("flex min-w-0 flex-1 items-center gap-3 break-normal", !stacked && "basis-36", wide && "max-sm:basis-auto"),
+			children: [icon ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "bg-fill text-label-secondary flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg]:size-4",
+				children: icon
+			}) : null, /* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-col gap-0",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-subheadline text-label leading-tight",
+					children: label
+				}), description ? /* @__PURE__ */ jsx("span", {
+					className: "text-footnote text-label-secondary leading-snug",
+					children: description
+				}) : null]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: cx("ms-auto flex max-w-full min-w-0 shrink-0 justify-end [&>*]:max-w-full", stacked && "w-full", wide && "max-sm:w-full"),
+			children
+		})]
+	});
+}
+export { LabeledContent };

package/dist/{types/src/lib/language.d.ts → language.d.ts}

@@ -1,4 +1,4 @@
 /** A language's name in itself, capitalized: "Français", "中文". */
 export declare function getNativeLanguageName(tag: string): string;
 /** A language's name as read in `displayLocale`: "French" in English. */
-export declare function getLocalizedLanguageName(tag: string, displayLocale: string): string;
+export declare function getLocalizedLanguageName(tag: string, displayLocale: string): string;

package/dist/language.js

@@ -0,0 +1,11 @@
+// src/lib/language.ts
+/** A language's name in itself, capitalized: "Français", "中文". */
+function getNativeLanguageName(tag) {
+	const name = new Intl.DisplayNames([tag], { type: "language" }).of(tag);
+	return name ? name.charAt(0).toUpperCase() + name.slice(1) : tag;
+}
+/** A language's name as read in `displayLocale`: "French" in English. */
+function getLocalizedLanguageName(tag, displayLocale) {
+	return new Intl.DisplayNames([displayLocale], { type: "language" }).of(tag) ?? tag;
+}
+export { getLocalizedLanguageName, getNativeLanguageName };

package/dist/layout.d.ts

@@ -0,0 +1,24 @@
+import { PropsWithChildren, ReactNode } from "react";
+type LayoutProps = PropsWithChildren<{
+  heading: ReactNode;
+  className?: string;
+}>;
+type HeadingProps = {
+  /** The page title. Any node. */
+  title: ReactNode;
+  /** Sits directly under the title with no gap. Any node. */
+  description?: ReactNode;
+  /** Trailing control beside the title, such as a button or badge. */
+  action?: ReactNode;
+  size?: keyof typeof titleSizes;
+};
+declare const titleSizes: {
+  readonly default: "text-large-title leading-large-title";
+  readonly compact: "text-title leading-title font-semibold tracking-tight";
+};
+export declare function Layout({ heading, className, children }: LayoutProps): import("react").JSX.Element;
+export declare namespace Layout {
+  export { Heading };
+}
+declare function Heading({ title, description, action, size }: HeadingProps): import("react").JSX.Element;
+export {};

package/dist/layout.js

@@ -0,0 +1,36 @@
+import { cx } from "./lib/cx.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/layout.tsx
+const titleSizes = {
+	default: "text-large-title leading-large-title",
+	compact: "text-title leading-title font-semibold tracking-tight"
+};
+function Layout({ heading, className, children }) {
+	return /* @__PURE__ */ jsxs("article", {
+		"data-slot": "layout",
+		className: cx("container mx-auto flex flex-col", "w-full gap-0 py-12 md:max-w-3xl", className),
+		children: [heading, /* @__PURE__ */ jsx("div", {
+			className: "mt-8 flex flex-col gap-6",
+			children
+		})]
+	});
+}
+function Heading({ title, description, action, size = "default" }) {
+	const centered = size === "compact";
+	return /* @__PURE__ */ jsxs("header", {
+		"data-slot": "layout-heading",
+		className: cx("flex flex-col gap-0", centered && "items-center text-center"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx("flex flex-wrap items-center gap-3", centered && "justify-center"),
+			children: [/* @__PURE__ */ jsx("h1", {
+				className: cx("m-0 min-w-0 wrap-anywhere", titleSizes[size]),
+				children: title
+			}), action]
+		}), description ? /* @__PURE__ */ jsx("div", {
+			className: cx("text-subheadline text-label-secondary m-0 max-w-prose leading-snug", centered && "text-center"),
+			children: description
+		}) : null]
+	});
+}
+Layout.Heading = Heading;
+export { Layout };

package/dist/{types/src/lib → lib}/anchored-placement.d.ts

@@ -1,33 +1,33 @@
 export interface AnchoredPlacement {
-    left: number;
-    width: number;
-    top?: number;
-    bottom?: number;
-    /** Opens upward, so motion should grow from the bottom edge. */
-    above: boolean;
-    /**
-     * Set when the chosen side has less room than the panel needs: the
-     * panel scrolls inside this height instead of crossing the edge.
-     */
-    maxHeight?: number;
+  left: number;
+  width: number;
+  top?: number;
+  bottom?: number;
+  /** Opens upward, so motion should grow from the bottom edge. */
+  above: boolean;
+  /**
+   * Set when the chosen side has less room than the panel needs: the
+   * panel scrolls inside this height instead of crossing the edge.
+   */
+  maxHeight?: number;
 }
 /** The measurements placement decides on, so the math stays testable. */
 export interface PlacementFrame {
-    anchor: {
-        top: number;
-        bottom: number;
-        left: number;
-    };
-    viewport: {
-        width: number;
-        height: number;
-    };
-    edges: {
-        top: number;
-        right: number;
-        bottom: number;
-        left: number;
-    };
+  anchor: {
+    top: number;
+    bottom: number;
+    left: number;
+  };
+  viewport: {
+    width: number;
+    height: number;
+  };
+  edges: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+  };
 }
 /**
  * Places a panel of `width` under its anchor, or above it when there's
@@ -36,4 +36,4 @@ export interface PlacementFrame {
  */
 export declare function placeInViewport({ anchor, viewport, edges }: PlacementFrame, width: number, needed: number, gap?: number, overlap?: boolean): AnchoredPlacement;
 /** `placeInViewport` from live DOM measurements. */
-export declare function placeAnchored(anchor: HTMLElement, width: number, needed: number, gap?: number, overlap?: boolean): AnchoredPlacement;
+export declare function placeAnchored(anchor: HTMLElement, width: number, needed: number, gap?: number, overlap?: boolean): AnchoredPlacement;

package/dist/lib/anchored-placement.js

@@ -0,0 +1,42 @@
+import { screenEdges } from "./screen-edges.js";
+// src/lib/anchored-placement.ts
+/**
+* Places a panel of `width` under its anchor, or above it when there's
+* less than `needed` height below and more room above, kept inside the
+* screen's safe edges.
+*/
+function placeInViewport({ anchor, viewport, edges }, width, needed, gap = 6, overlap = false) {
+	if (overlap) gap = anchor.top - anchor.bottom;
+	const fitted = Math.min(width, viewport.width - edges.left - edges.right);
+	const left = Math.min(Math.max(edges.left, anchor.left), viewport.width - fitted - edges.right);
+	const roomBelow = viewport.height - anchor.bottom - gap - edges.bottom;
+	const roomAbove = anchor.top - gap - edges.top;
+	const above = roomBelow < needed && roomAbove > roomBelow;
+	const room = above ? roomAbove : roomBelow;
+	const placement = {
+		left,
+		width: fitted,
+		above,
+		...above ? { bottom: viewport.height - anchor.top + gap } : { top: anchor.bottom + gap }
+	};
+	if (room < needed) placement.maxHeight = room;
+	return placement;
+}
+/** `placeInViewport` from live DOM measurements. */
+function placeAnchored(anchor, width, needed, gap = 6, overlap = false) {
+	const rect = anchor.getBoundingClientRect();
+	const viewport = window.visualViewport;
+	return placeInViewport({
+		anchor: {
+			top: rect.top,
+			bottom: rect.bottom,
+			left: rect.left
+		},
+		viewport: {
+			width: viewport?.width ?? window.innerWidth,
+			height: viewport?.height ?? window.innerHeight
+		},
+		edges: screenEdges()
+	}, width, needed, gap, overlap);
+}
+export { placeAnchored, placeInViewport };

package/dist/lib/calendar-month.js

@@ -0,0 +1,90 @@
+// src/lib/calendar-month.ts
+/** Reads `YYYY-MM-DD`; null for anything else, or a date that doesn't exist. */
+function parseDay(value) {
+	const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+	if (!match) return null;
+	const [year, month, day] = [
+		Number(match[1]),
+		Number(match[2]),
+		Number(match[3])
+	];
+	const date = new Date(Date.UTC(year, month - 1, day));
+	return date.getUTCFullYear() === year && date.getUTCMonth() === month - 1 && date.getUTCDate() === day ? {
+		year,
+		month,
+		day
+	} : null;
+}
+function formatDay({ year, month, day }) {
+	const pad = (value, width) => String(value).padStart(width, "0");
+	return `${pad(year, 4)}-${pad(month, 2)}-${pad(day, 2)}`;
+}
+/** Moves by whole days, across months and years. */
+function addDays(day, count) {
+	const date = new Date(Date.UTC(day.year, day.month - 1, day.day + count));
+	return {
+		year: date.getUTCFullYear(),
+		month: date.getUTCMonth() + 1,
+		day: date.getUTCDate()
+	};
+}
+/** Moves by months, keeping the day where the month allows (31 Jan + 1 is 28 or 29 Feb). */
+function addMonths(day, count) {
+	const first = new Date(Date.UTC(day.year, day.month - 1 + count, 1));
+	const year = first.getUTCFullYear();
+	const month = first.getUTCMonth() + 1;
+	const last = new Date(Date.UTC(year, month, 0)).getUTCDate();
+	return {
+		year,
+		month,
+		day: Math.min(day.day, last)
+	};
+}
+/**
+* The first day of the week where `locale` is used, 1 (Monday) to 7
+* (Sunday), from the browser where it knows, else Monday except in the
+* places that start on Sunday.
+*/
+function firstWeekday(locale) {
+	try {
+		const info = new Intl.Locale(locale);
+		const first = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay;
+		if (first) return first;
+		const region = info.maximize().region ?? "";
+		return [
+			"US",
+			"CA",
+			"JP",
+			"KR",
+			"TW",
+			"BR",
+			"MX",
+			"IL",
+			"PH",
+			"IN"
+		].includes(region) ? 7 : 1;
+	} catch {
+		return 1;
+	}
+}
+/** Six weeks covering `year`/`month`, starting on `firstDay` (1 to 7). */
+function monthGrid(year, month, firstDay) {
+	const lead = ((new Date(Date.UTC(year, month - 1, 1)).getUTCDay() || 7) - firstDay + 7) % 7;
+	const start = addDays({
+		year,
+		month,
+		day: 1
+	}, -lead);
+	return Array.from({ length: 42 }, (_, index) => {
+		const day = addDays(start, index);
+		return {
+			...day,
+			inMonth: day.month === month && day.year === year
+		};
+	});
+}
+/** Whether `value` (`YYYY-MM-DD`) lies within the optional bounds. */
+function withinBounds(value, min, max) {
+	return (!min || value >= min) && (!max || value <= max);
+}
+export { addDays, addMonths, firstWeekday, formatDay, monthGrid, parseDay, withinBounds };

package/dist/lib/cx.js

@@ -0,0 +1,6 @@
+// src/lib/cx.ts
+/** Joins class names, skipping falsy values. Later classes do not override earlier ones. */
+function cx(...parts) {
+	return parts.filter(Boolean).join(" ");
+}
+export { cx };

package/dist/lib/drawer.math.js

@@ -0,0 +1,29 @@
+import { pageScale } from "@passui/tokens/motion";
+// src/lib/drawer.math.ts
+const clamp01 = (value) => Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 0;
+/**
+* Page scale for a drawer that is `openness` open (0 closed, 1 fully open).
+* Fully open the page ends `topOffset` px below the top of the screen:
+* scale = (width - topOffset) / width, eased back to 1 as the drawer closes.
+*/
+function pageTransformAt(openness, viewportWidth) {
+	const o = clamp01(openness);
+	const width = Math.max(viewportWidth, 1);
+	return {
+		scale: 1 - (1 - Math.max(0, (width - pageScale.topOffset) / width)) * o,
+		radius: pageScale.radius * o,
+		translateY: pageScale.topOffset / 2 * o
+	};
+}
+/** With nested drawers the page stays as scaled as the most open one. */
+function frontOpenness(layers) {
+	let max = 0;
+	for (const value of layers) max = Math.max(max, clamp01(value));
+	return max;
+}
+/** The tallest numeric snap point (a fraction of the viewport), or null if none. */
+function tallestSnapPoint(snapPoints) {
+	const numbers = (snapPoints ?? []).filter((point) => typeof point === "number");
+	return numbers.length > 0 ? Math.max(...numbers) : null;
+}
+export { clamp01, frontOpenness, pageTransformAt, tallestSnapPoint };

package/dist/lib/floating-layers.d.ts

@@ -0,0 +1,3 @@
+export declare const FLOATING_LAYER = "data-floating-layer";
+/** Portals retain the ownership of the control that opened them. */
+export declare function registerFloatingLayer(layer: Element, anchor: Element): () => void;

package/dist/lib/floating-layers.js

@@ -0,0 +1,25 @@
+// src/lib/floating-layers.ts
+const FLOATING_LAYER = "data-floating-layer";
+const anchors = /* @__PURE__ */ new WeakMap();
+/** Portals retain the ownership of the control that opened them. */
+function registerFloatingLayer(layer, anchor) {
+	anchors.set(layer, anchor);
+	return () => anchors.delete(layer);
+}
+function ownsFloatingLayer(container, target) {
+	let layer = target?.closest(`[${FLOATING_LAYER}]`);
+	const visited = /* @__PURE__ */ new Set();
+	while (layer && !visited.has(layer)) {
+		visited.add(layer);
+		const anchor = anchors.get(layer);
+		if (!anchor) return false;
+		if (container.contains(anchor)) return true;
+		layer = anchor.closest(`[${FLOATING_LAYER}]`);
+	}
+	return false;
+}
+/** An element belongs to a surface either directly or through a portaled child layer. */
+function belongsToFloatingSurface(surface, target) {
+	return Boolean(target && (surface.contains(target) || ownsFloatingLayer(surface, target)));
+}
+export { FLOATING_LAYER, belongsToFloatingSurface, ownsFloatingLayer, registerFloatingLayer };

package/dist/{types/src/lib → lib}/haptics.d.ts

@@ -5,4 +5,4 @@ export type HapticKind = "selection" | "light" | "medium" | "heavy" | "success"
  * device (system haptics, a vibration, or nothing) and whether it's on.
  */
 export declare function setHapticPlayer(next: (kind: HapticKind) => void): void;
-export declare function haptic(kind: HapticKind): void;
+export declare function haptic(kind: HapticKind): void;

package/dist/lib/haptics.js

@@ -0,0 +1,13 @@
+// src/lib/haptics.ts
+let player = () => {};
+/**
+* Components only ask for feedback; the app decides how it plays on this
+* device (system haptics, a vibration, or nothing) and whether it's on.
+*/
+function setHapticPlayer(next) {
+	player = next;
+}
+function haptic(kind) {
+	player(kind);
+}
+export { haptic, setHapticPlayer };

package/dist/lib/liquid-step.js

@@ -0,0 +1,33 @@
+import { clampRange } from "./range-value.js";
+// src/lib/liquid-step.ts
+/** Bencho's frame-normalized liquid spring. See THIRD_PARTY_NOTICES.md. */
+function stepLiquid(state, target, viscosity, dt) {
+	const soft = clampRange(viscosity, 0, 100) / 100;
+	target = clampRange(target, 0, 100);
+	dt = clampRange(dt, 0, 2.5);
+	if (soft === 0) return {
+		fill: target,
+		velocity: 0
+	};
+	const stiff = .34 - soft * .29;
+	const damp = .74 + soft * .22;
+	let velocity = (state.velocity + (target - state.fill) * stiff * dt) * damp ** dt;
+	let fill = state.fill + velocity * dt;
+	if (fill > 100) {
+		fill = 100;
+		velocity = -velocity * .42;
+	}
+	if (fill < 0) {
+		fill = 0;
+		velocity = -velocity * .42;
+	}
+	if (Math.abs(target - fill) < .02 && Math.abs(velocity) < .02) return {
+		fill: target,
+		velocity: 0
+	};
+	return {
+		fill,
+		velocity
+	};
+}
+export { stepLiquid };

package/dist/lib/page-scale.js

@@ -0,0 +1,58 @@
+import { frontOpenness, pageTransformAt } from "./drawer.math.js";
+import { useLayoutEffect } from "react";
+// src/lib/page-scale.ts
+/** Open drawers and how open each is. The page follows the most open one. */
+const layers = /* @__PURE__ */ new Map();
+let dragging = /* @__PURE__ */ new Set();
+function apply() {
+	const page = document.querySelector("[data-passui-page]");
+	if (!page) return;
+	if (layers.size === 0) {
+		for (const name of [
+			"scale",
+			"radius",
+			"y"
+		]) page.style.removeProperty(`--passui-page-${name}`);
+		page.removeAttribute("data-passui-page-active");
+		page.removeAttribute("data-passui-page-dragging");
+		return;
+	}
+	const t = pageTransformAt(frontOpenness(layers.values()), window.innerWidth);
+	page.style.setProperty("--passui-page-scale", String(t.scale));
+	page.style.setProperty("--passui-page-radius", `${t.radius}px`);
+	page.style.setProperty("--passui-page-y", `${t.translateY}px`);
+	page.setAttribute("data-passui-page-active", "");
+	if (dragging.size > 0) page.setAttribute("data-passui-page-dragging", "");
+	else page.removeAttribute("data-passui-page-dragging");
+}
+/**
+* Opt in page scaling for one drawer layer. Does nothing unless the app root
+* carries `data-passui-page`. Pass `active` while the drawer is mounted and
+* `openness` from 0 to 1, so the page eases back as the drawer leaves.
+*/
+function usePageScale(id, active, openness, swiping) {
+	useLayoutEffect(() => {
+		if (!active) {
+			layers.delete(id);
+			dragging.delete(id);
+			apply();
+			return;
+		}
+		layers.set(id, openness);
+		dragging = new Set(dragging);
+		if (swiping) dragging.add(id);
+		else dragging.delete(id);
+		apply();
+	}, [
+		id,
+		active,
+		openness,
+		swiping
+	]);
+	useLayoutEffect(() => () => {
+		layers.delete(id);
+		dragging.delete(id);
+		apply();
+	}, [id]);
+}
+export { usePageScale };

package/dist/lib/portal.js

@@ -0,0 +1,12 @@
+import { useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
+// src/lib/portal.tsx
+const subscribe = () => () => {};
+/**
+* Renders children into `document.body`. The server and the first hydration
+* pass render nothing, so overlays never cause an id or markup mismatch.
+*/
+function Portal({ children, container }) {
+	return useSyncExternalStore(subscribe, () => true, () => false) ? createPortal(children, container ?? document.body) : null;
+}
+export { Portal };