@lablup/ui-common 0.2.0-alpha.15 → 0.2.0-alpha.16

package/dist/forks/Drawer/Drawer.js

@@ -3,92 +3,74 @@ import { ModalPortalContext as e } from "../../components/Modal/modalStack.js";
 import { compiledStyles as t } from "../compiled.js";
 import { dynamicStyles as n, styles as r } from "./Drawer.styles.js";
 import { useDrawerDialogPresence as i } from "./useDrawerDialogPresence.js";
-import { useCallback as a, useEffect as o, useId as ee, useRef as s, useState as c } from "react";
-import { overlayPaddingReset as te } from "@astryxdesign/core/Layout";
-import { useScrollLock as ne } from "@astryxdesign/core/hooks";
-import { LayerDepthProvider as l, useLayerDismissal as u } from "@astryxdesign/core/Layer";
-import { composeEventHandlers as d, mergeProps as f, mergeRefs as p, themeProps as m } from "@astryxdesign/core/utils";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import { Icon as _ } from "@astryxdesign/core/Icon";
-import { IconButton as v } from "@astryxdesign/core/IconButton";
+import { useCallback as a, useEffect as o, useRef as s, useState as c } from "react";
+import { overlayPaddingReset as l } from "@astryxdesign/core/Layout";
+import { useFocusTrap as u, useMergedRefs as d, useScrollLock as f } from "@astryxdesign/core/hooks";
+import { LayerDepthProvider as p, useLayerDismissal as m } from "@astryxdesign/core/Layer";
+import { composeEventHandlers as h, mergeProps as g, themeProps as _ } from "@astryxdesign/core/utils";
+import { jsx as v } from "react/jsx-runtime";
 import * as y from "@stylexjs/stylex";
 //#region src/forks/Drawer/Drawer.tsx
-var b = 1e3, x = [], S = 0;
-function re(e, t) {
-	return x.push({
-		id: e,
-		close: t
-	}), S += 1, b + S - 1;
-}
-function C(e) {
-	let t = x.findIndex((t) => t.id === e);
-	t !== -1 && x.splice(t, 1), x.length === 0 && (S = 0);
-}
-var w = 56, T = "100dvw", E = t(r), D = n, O = "x1iyjqo2 x2lwn1j xh8yej3 x1odjw0f x6ikm8r xish69e xx69xxh x1a148e8 x1a2a7pz", k = "x10l6tqk xctzyg x72tfeb x78zum5 xzye2dw x1vjfegm";
-function A({ isOpen: t, onOpenChange: n, side: r = "end", width: x = 400, isFullWidthOnMobile: S = !1, label: A, hasScrim: j = !0, hasCloseButton: M = !0, children: N, xstyle: P, className: F, style: I, onClick: L, onKeyDown: R, ref: ie, ...z }) {
-	let B = s(null), V = ee(), H = s(n);
-	o(() => {
-		H.current = n;
-	}, [n]);
-	let [U, W] = c(b), [G, K] = c(t);
-	t && !G && K(!0), i({
-		dialogRef: B,
+var b = 56, x = "100dvw", S = t(r), ee = n, C = "x1iyjqo2 x2lwn1j xh8yej3 x1odjw0f x6ikm8r xish69e xx69xxh x1a148e8 x1a2a7pz";
+function w({ isOpen: t, onOpenChange: n, side: r = "end", width: w = 400, isFullWidthOnMobile: T = !1, label: E, hasScrim: D = !0, purpose: O = "info", children: k, xstyle: A, className: j, style: M, onClick: N, onKeyDown: P, ref: F, ...I }) {
+	let L = s(null), { containerRef: R } = u({ isActive: t && D }), te = d(F, L, R), z = O !== "required", B = O === "info", [V, H] = c(t);
+	t && !V && H(!0), i({
+		dialogRef: L,
 		isOpen: t,
-		isModal: j,
-		setIsRendered: K
+		isModal: D,
+		setIsRendered: H
 	});
-	let [q, J] = c(null);
+	let [U, W] = c(null);
 	o(() => {
-		J(t && j ? B.current : null);
-	}, [t, j]), o(() => {
-		if (!t) return;
-		let e = re(V, () => H.current(!1));
-		return W(e), () => C(V);
-	}, [t, V]), ne(t && j);
-	let { shouldDismissOnCloseRequest: Y } = u({
-		isActive: t,
-		escapeBehavior: "close",
-		onDismiss: () => H.current(!1)
-	}), ae = a((e) => {
-		e.preventDefault(), Y() && n(!1);
-	}, [n, Y]), oe = a((e) => {
-		e.target === e.currentTarget && j && n(!1);
-	}, [j, n]), X = typeof x == "number" ? `${x}px` : x, se = S ? T : `min(${X}, calc(100dvw - ${w}px))`, Z = s(r);
+		W(t ? L.current : null);
+	}, [t]);
+	let G = a(() => {
+		n(!1);
+	}, [n]), { shouldDismissOnCloseRequest: K } = m({
+		isActive: V,
+		escapeBehavior: z ? "close" : "block",
+		onDismiss: G,
+		getContainer: () => L.current
+	});
+	f(t && D);
+	let q = a((e) => {
+		e.preventDefault(), K() && z && G();
+	}, [
+		z,
+		G,
+		K
+	]), J = a((e) => {
+		e.target === e.currentTarget && D && B && n(!1);
+	}, [
+		B,
+		D,
+		n
+	]), Y = typeof w == "number" ? `${w}px` : w, X = T ? x : `min(${Y}, calc(100dvw - ${b}px))`, Z = s(r);
 	t && (Z.current = r);
-	let Q = t ? r : Z.current, ce = Q === "start" ? E.start : E.end, le = Q === "start" ? E.startOpen : E.endOpen, { open: ue, ...$ } = z;
-	return /* @__PURE__ */ g("dialog", {
-		ref: p(ie, B),
-		...f(m("drawer", { side: Q }), y.props(E.dialog, te.reset, ce, D.inlineSize(X, se), G && E.rendered, t && le, j ? E.scrim : D.stackZ(U), j && t && E.scrimOpen, P), F, I),
+	let Q = t ? r : Z.current, ne = Q === "start" ? S.start : S.end, re = Q === "start" ? S.startOpen : S.endOpen, { open: ie, ...$ } = I;
+	return /* @__PURE__ */ v("dialog", {
+		ref: te,
+		...g(_("drawer", { side: Q }), y.props(S.dialog, l.reset, ne, ee.inlineSize(Y, X), V && S.rendered, t && re, D && S.scrim, D && t && S.scrimOpen, A), j, M),
 		...$,
-		"aria-label": A,
-		"aria-modal": $["aria-modal"] ?? (j ? "true" : void 0),
-		onClick: d(L, oe),
-		onKeyDown: R,
-		onCancel: ae,
-		children: [/* @__PURE__ */ h("div", {
+		popover: D ? void 0 : "manual",
+		"aria-label": E,
+		"aria-modal": $["aria-modal"] ?? (D ? "true" : void 0),
+		...O === "required" && D ? { role: "alertdialog" } : void 0,
+		onClick: h(N, J),
+		onKeyDown: P,
+		onCancel: q,
+		children: /* @__PURE__ */ v(p, { children: /* @__PURE__ */ v("div", {
 			tabIndex: -1,
-			className: O,
-			children: /* @__PURE__ */ h(l, { children: /* @__PURE__ */ h(e, {
-				value: q,
-				children: N
-			}) })
-		}), M && /* @__PURE__ */ h("div", {
-			className: k,
-			children: /* @__PURE__ */ h(v, {
-				icon: /* @__PURE__ */ h(_, {
-					icon: "close",
-					size: "sm",
-					color: "inherit"
-				}),
-				label: "Close",
-				variant: "ghost",
-				onClick: () => n(!1)
+			className: C,
+			children: /* @__PURE__ */ v(e, {
+				value: U,
+				children: k
 			})
-		})]
+		}) })
 	});
 }
-A.displayName = "Drawer";
+w.displayName = "Drawer";
 //#endregion
-export { A as Drawer };
+export { w as Drawer };
 
 //# sourceMappingURL=Drawer.js.map

package/dist/forks/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","names":[],"sources":["../../../src/forks/Drawer/Drawer.tsx"],"sourcesContent":["// Copyright (c) Meta Platforms, Inc. and affiliates.\n// Modifications copyright (c) Lablup Inc.\n//\n// Forked from @astryxdesign/lab 0.6.2-canary.c9fb1ad, src/Drawer/Drawer.tsx\n// (MIT; see NOTICE). Provenance and the drift guard: src/forks/provenance.json.\n\n\"use client\";\n\n/**\n * Drawer, ui-common's copy of Astryx lab's, with three changes (not upstream):\n *\n * - **Escape goes through core's layer-dismissal stack.** Lab's drawer runs\n *   its own element-level Escape handler, which claims the press before the\n *   stack's document listener sees it, so an Escape in a popover, selector or\n *   modal opened inside the drawer closed the drawer too (or, for a portalled\n *   modal, neither). The drawer now registers with `useLayerDismissal` the way\n *   core's `Dialog` does and wraps its content in `LayerDepthProvider`: one\n *   press closes exactly the top-most layer, nested drawers close top-first,\n *   an IME Escape closes nothing, and the native `cancel` answers only while\n *   this drawer is on top. A non-modal drawer therefore closes on Escape\n *   wherever focus is, as core's non-modal popovers do, not only while focus\n *   is inside it.\n * - **`aria-modal` passes through.** A scrimless drawer is non-modal, but a\n *   consumer that restores modality by hand (its own mask and focus trap) can\n *   now say so; the default is unchanged.\n * - **ui-common's `Modal` opens above it.** A scrimmed drawer is a modal\n *   `<dialog>`, which makes everything outside it inert, so a `Modal`\n *   portalled to the body sat behind the drawer, unreachable. The drawer\n *   provides its dialog through `ModalPortalContext` while it is open and\n *   modal, and a `Modal` inside renders there, in the top layer\n *   (modalStack.ts). Core's `Dialog` needs none of this: it is top layer\n *   itself, and ui-common's `Modal` is not.\n *\n * Everything else is upstream's. Its style namespaces are Astryx's compiled\n * output (src/forks/compiled.ts). The LIFO drawer registry is module-level,\n * so this copy stacks with other drawers from this copy only; lab's own\n * `Drawer` is not exported by ui-common. Escape no longer consults it: it\n * only assigns non-modal z-indexes.\n *\n * Delete this fork, and its exports.exclude.json entry, once lab ships the\n * first two and `Modal` no longer needs the third\n * (CONTRIBUTING, \"Forks of Astryx components\").\n */\n\n/*\n * Upstream's file notes, kept:\n *\n * Overlay panel for inspectors and detail views — the \"click a table row,\n * see its details\" pattern. Slides in from the inline start or end edge and\n * floats above the page content: unlike a docked panel it never reflows the\n * layout underneath, it overlays it (with or without a scrim).\n *\n * Inline axis only (start/end). Block-axis sheets are BottomSheet's job;\n * a drawer is always a full-height side panel.\n *\n * Sizing is viewport-aware: `width` is the desktop budget, and below\n * the mobile breakpoint it preserves a 56px reveal of the page behind, capped\n * by the requested width (or fills the viewport with `isFullWidthOnMobile`).\n *\n * Uses the native `<dialog>` element (same precedent as Dialog/MobileNav):\n * - `showModal()` when `hasScrim` (default) — top-layer rendering, focus\n *   trapping, `::backdrop`, no z-index management.\n * - `show()` when `hasScrim={false}` — non-modal overlay; the page behind\n *   stays interactive (e.g. master-detail inspectors).\n *\n * Entry animation uses `@starting-style`; exit slides out before\n * `dialog.close()` releases the top layer and restores focus to the element\n * that opened the drawer. React owns `display` for both legs rather than a\n * discrete `display` transition, so the panel stops painting in the same\n * commit as `close()`.\n *\n * Sibling drawers coordinate through a module-level LIFO registry: Escape\n * closes only the top (last-opened) drawer, and non-modal drawers stack\n * last-opened-on-top via registry-assigned z-indexes.\n */\n\nimport { useCallback, useEffect, useId, useRef, useState, type ReactNode } from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { StyleXStyles } from \"@stylexjs/stylex\";\nimport type { BaseProps } from \"@astryxdesign/core\";\nimport { Icon } from \"@astryxdesign/core/Icon\";\nimport { IconButton } from \"@astryxdesign/core/IconButton\";\nimport { LayerDepthProvider, useLayerDismissal } from \"@astryxdesign/core/Layer\";\nimport { useScrollLock } from \"@astryxdesign/core/hooks\";\nimport {\n  composeEventHandlers,\n  mergeProps,\n  mergeRefs,\n  themeProps,\n} from \"@astryxdesign/core/utils\";\nimport { overlayPaddingReset } from \"@astryxdesign/core/Layout\";\n\nimport { compiledStyles } from \"../compiled\";\nimport * as compiled from \"./Drawer.styles\";\nimport { ModalPortalContext } from \"../../components/Modal/modalStack\";\nimport { useDrawerDialogPresence } from \"./useDrawerDialogPresence\";\n\n// =============================================================================\n// LIFO stacking registry (internal)\n// =============================================================================\n\n// Module-level registry of currently open drawers, in open order (last entry\n// is the top of the stack). SSR-safe: only mutated inside effects.\n// ui-common: Escape no longer consults it (core's layer stack orders that);\n// non-modal (show()) drawers get incrementing z-indexes so the\n// last-opened one paints on top; modal drawers rely on the native top\n// layer's chronological stacking instead.\ntype DrawerRegistryEntry = { id: string; close: () => void };\n\n// Without the top layer (hasScrim={false} uses show(), not showModal())\n// the panel needs explicit stacking. No z-index token exists in the theme;\n// 1000 matches the app-level drawer convention.\nconst NON_MODAL_BASE_Z = 1000;\n\nconst openDrawerStack: DrawerRegistryEntry[] = [];\nlet registrationCounter = 0;\n\nfunction registerDrawer(id: string, close: () => void): number {\n  openDrawerStack.push({ id, close });\n  registrationCounter += 1;\n  return NON_MODAL_BASE_Z + registrationCounter - 1;\n}\n\nfunction unregisterDrawer(id: string): void {\n  const index = openDrawerStack.findIndex((entry) => entry.id === id);\n  if (index !== -1) {\n    openDrawerStack.splice(index, 1);\n  }\n  if (openDrawerStack.length === 0) {\n    registrationCounter = 0;\n  }\n}\n\n// =============================================================================\n// Styles\n// =============================================================================\n\n// Material's established mobile drawer pattern leaves a 56dp reveal. Using\n// the same value in CSS pixels gives the overlay a stable visual relationship\n// to the page behind while the requested width remains an upper bound.\nconst MOBILE_PAGE_REVEAL = 56;\nconst MOBILE_WIDTH_FULL = \"100dvw\";\n\n// @astryxdesign/lab dist/Drawer/Drawer.js `styles` and `dynamicStyles`.\nconst styles = compiledStyles(compiled.styles);\nconst dynamicStyles = compiled.dynamicStyles as {\n  inlineSize: (desktopWidth: string, mobileWidth: string) => StyleXStyles;\n  stackZ: (z: number) => StyleXStyles;\n};\n\n// Upstream's `content` and `controls` styles, which its compiler folded into\n// these class lists (dist/Drawer/Drawer.js).\nconst CONTENT_CLASS_NAME =\n  \"x1iyjqo2 x2lwn1j xh8yej3 x1odjw0f x6ikm8r xish69e xx69xxh x1a148e8 x1a2a7pz\";\nconst CONTROLS_CLASS_NAME = \"x10l6tqk xctzyg x72tfeb x78zum5 xzye2dw x1vjfegm\";\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface DrawerProps extends BaseProps<HTMLDialogElement> {\n  /** Ref forwarded to the root <dialog> element */\n  ref?: React.Ref<HTMLDialogElement>;\n\n  /**\n   * Whether the drawer is open. Fully controlled — pair with `onOpenChange`.\n   */\n  isOpen: boolean;\n\n  /**\n   * Called when the drawer requests an open-state change. Escape, scrim\n   * click, and the built-in close button call it with `false`. The caller owns\n   * the open state. When sibling drawers are open, Escape only closes the top\n   * (last-opened) drawer.\n   */\n  onOpenChange: (isOpen: boolean) => void;\n\n  /**\n   * Which edge the drawer slides from.\n   * - `'end'` — inline-end edge (right in LTR) — the inspector convention\n   * - `'start'` — inline-start edge (left in LTR)\n   * @default 'end'\n   */\n  side?: \"start\" | \"end\";\n\n  /**\n   * Desktop width budget. A number is pixels; a string is any CSS length\n   * (`'50%'`, `'32rem'`). Below the mobile breakpoint (640px), this\n   * remains the maximum while the drawer preserves a 56px reveal of the page\n   * behind — see `isFullWidthOnMobile`.\n   * @default 400\n   */\n  width?: number | string;\n\n  /**\n   * Whether the drawer covers the full viewport width on mobile\n   * (below 640px) instead of preserving the default 56px reveal of the page\n   * behind. The reveal makes the drawer read as an overlay rather than a\n   * navigation.\n   * @default false\n   */\n  isFullWidthOnMobile?: boolean;\n\n  /**\n   * Accessible label for the drawer (required — the drawer has no\n   * built-in heading to derive a name from).\n   */\n  label: string;\n\n  /**\n   * Whether to render a modal scrim behind the drawer.\n   * - `true` (default) — `showModal()`: top layer, focus trap, body scroll\n   *   lock, click-outside-to-close.\n   * - `false` — `show()`: non-modal overlay; the page behind stays\n   *   interactive. Escape still closes it (ui-common: wherever focus is, as\n   *   the top-most layer).\n   * @default true\n   */\n  hasScrim?: boolean;\n\n  /**\n   * Whether to render the built-in close button in the top-trailing\n   * corner. Enabled by default for both modal and non-modal drawers so every\n   * overlay has an obvious dismissal affordance.\n   * @default true\n   */\n  hasCloseButton?: boolean;\n\n  /**\n   * Drawer content. Rendered inside a full-height scrollable area.\n   * Focus the element with `data-autofocus` on open, if present.\n   */\n  children: ReactNode;\n\n  /**\n   * Test ID for the root element.\n   */\n  \"data-testid\"?: string;\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * An overlay panel for inspectors and detail views.\n *\n * Slides in from the logical start or end edge and floats above the page\n * using the native `<dialog>` element: modal with a scrim by default, or a\n * non-modal overlay with `hasScrim={false}` that leaves the page behind\n * interactive. `width` is the desktop budget; below 640px the panel preserves\n * a 56px page reveal without exceeding that budget (or fills the viewport\n * with `isFullWidthOnMobile`). Escape\n * closes the top-most open drawer; focus returns to the element that\n * opened it.\n *\n * @example\n * ```\n * const [selected, setSelected] = useState(null);\n * <Drawer\n *   isOpen={selected != null}\n *   onOpenChange={isOpen => !isOpen && setSelected(null)}\n *   label={`Details: ${selected?.name}`}>\n *   <HostDetails host={selected} />\n * </Drawer>\n * ```\n */\nexport function Drawer({\n  isOpen,\n  onOpenChange,\n  side = \"end\",\n  width = 400,\n  isFullWidthOnMobile = false,\n  label,\n  hasScrim = true,\n  hasCloseButton = true,\n  children,\n  xstyle,\n  className,\n  style,\n  onClick: onClickProp,\n  onKeyDown: onKeyDownProp,\n  ref,\n  ...props\n}: DrawerProps) {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  // Registry identity + latest onOpenChange (stable across re-renders so the\n  // registration effect doesn't churn on every onOpenChange identity change).\n  const drawerId = useId();\n  const onOpenChangeRef = useRef(onOpenChange);\n  useEffect(() => {\n    onOpenChangeRef.current = onOpenChange;\n  }, [onOpenChange]);\n  // z-index assigned by the registry on open (non-modal stacking only).\n  const [stackZ, setStackZ] = useState(NON_MODAL_BASE_Z);\n  // Whether the panel paints: true while open and for the whole slide-out.\n  const [isRendered, setIsRendered] = useState(isOpen);\n\n  // Adjusted during render, not in an effect: the panel has to be rendered in\n  // the same commit that targets the open transform, or @starting-style has\n  // nothing to animate from.\n  if (isOpen && !isRendered) {\n    setIsRendered(true);\n  }\n\n  useDrawerDialogPresence({\n    dialogRef,\n    isOpen,\n    isModal: hasScrim,\n    setIsRendered,\n  });\n\n  // ui-common: the dialog a Modal inside renders into, set only once\n  // showModal() has run (the effect above), so the Modal's popover enters the\n  // top layer after the dialog and paints above it.\n  const [modalHost, setModalHost] = useState<HTMLDialogElement | null>(null);\n  useEffect(() => {\n    setModalHost(isOpen && hasScrim ? dialogRef.current : null);\n  }, [isOpen, hasScrim]);\n\n  // LIFO registry membership: register on open, unregister on close or\n  // unmount. The returned z-index stacks non-modal siblings in open order.\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n    const z = registerDrawer(drawerId, () => onOpenChangeRef.current(false));\n    setStackZ(z);\n    return () => unregisterDrawer(drawerId);\n  }, [isOpen, drawerId]);\n\n  // Lock body scroll while a modal drawer is open (iOS Safari workaround).\n  useScrollLock(isOpen && hasScrim);\n\n  // ui-common: Escape goes through core's shared layer-dismissal stack, as in\n  // core's Dialog. The stack owns the one Escape listener and hands each press\n  // to the top-most layer, so a popover or modal opened inside this drawer\n  // closes first, and nested drawers peel off top-first.\n  const { shouldDismissOnCloseRequest } = useLayerDismissal({\n    isActive: isOpen,\n    escapeBehavior: \"close\",\n    onDismiss: () => onOpenChangeRef.current(false),\n  });\n\n  // Native cancel event (a close request the stack never saw a press for) —\n  // prevent the browser from closing the dialog directly, then answer it by\n  // the stack's rules: only the top-most layer, never mid-composition.\n  const handleCancel = useCallback(\n    (event: React.SyntheticEvent<HTMLDialogElement>) => {\n      event.preventDefault();\n      if (shouldDismissOnCloseRequest()) {\n        onOpenChange(false);\n      }\n    },\n    [onOpenChange, shouldDismissOnCloseRequest],\n  );\n\n  // Clicks on the ::backdrop target the <dialog> element itself; clicks on\n  // drawer content always target a child (the content area fills the panel).\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDialogElement>) => {\n      if (event.target === event.currentTarget && hasScrim) {\n        onOpenChange(false);\n      }\n    },\n    [hasScrim, onOpenChange],\n  );\n\n  const widthValue = typeof width === \"number\" ? `${width}px` : width;\n  const mobileWidth = isFullWidthOnMobile\n    ? MOBILE_WIDTH_FULL\n    : `min(${widthValue}, calc(100dvw - ${MOBILE_PAGE_REVEAL}px))`;\n\n  // The side the panel is ANCHORED to, which is the side it must slide back\n  // out to. Latched at open, because a consumer commonly derives `side` from\n  // the same state that drives `isOpen` (`side={selected?.side ?? 'end'}`):\n  // that state clears on close, so the live prop flips mid-exit and the panel\n  // teleports to the other edge and slides out the wrong way. Children stay\n  // mounted for the exit for the same reason; so does the anchor.\n  const exitSideRef = useRef(side);\n  if (isOpen) {\n    exitSideRef.current = side;\n  }\n  const anchoredSide = isOpen ? side : exitSideRef.current;\n\n  const sideStyle = anchoredSide === \"start\" ? styles.start : styles.end;\n  const sideOpenStyle = anchoredSide === \"start\" ? styles.startOpen : styles.endOpen;\n\n  // Filter out native `open` to prevent InvalidStateError when passed\n  const { open: _open, ...safeProps } = props as Record<string, unknown>;\n\n  return (\n    <dialog\n      ref={mergeRefs(ref, dialogRef)}\n      {...mergeProps(\n        themeProps(\"drawer\", { side: anchoredSide }),\n        stylex.props(\n          styles.dialog,\n          overlayPaddingReset.reset,\n          sideStyle,\n          dynamicStyles.inlineSize(widthValue, mobileWidth),\n          isRendered && styles.rendered,\n          isOpen && sideOpenStyle,\n          hasScrim ? styles.scrim : dynamicStyles.stackZ(stackZ),\n          hasScrim && isOpen && styles.scrimOpen,\n          xstyle,\n        ),\n        className,\n        style,\n      )}\n      {...safeProps}\n      aria-label={label}\n      // ui-common: scrimless by itself is non-modal, but a consumer that\n      // restores the modality by hand (a portal supplying its own mask and\n      // focus trap) must be able to say so.\n      aria-modal={\n        (safeProps[\"aria-modal\"] as React.AriaAttributes[\"aria-modal\"]) ??\n        (hasScrim ? \"true\" : undefined)\n      }\n      onClick={composeEventHandlers(onClickProp, handleClick)}\n      onKeyDown={onKeyDownProp}\n      onCancel={handleCancel}\n    >\n      {/* Scrollable content area — tabIndex so the dialog's focusing steps\n          land on the panel body rather than the first button inside. */}\n      <div tabIndex={-1} className={CONTENT_CLASS_NAME}>\n        <LayerDepthProvider>\n          <ModalPortalContext value={modalHost}>{children}</ModalPortalContext>\n        </LayerDepthProvider>\n      </div>\n      {hasCloseButton && (\n        <div className={CONTROLS_CLASS_NAME}>\n          <IconButton\n            icon={<Icon icon=\"close\" size=\"sm\" color=\"inherit\" />}\n            label=\"Close\"\n            variant=\"ghost\"\n            onClick={() => onOpenChange(false)}\n          />\n        </div>\n      )}\n    </dialog>\n  );\n}\n\nDrawer.displayName = \"Drawer\";\n"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","names":[],"sources":["../../../src/forks/Drawer/Drawer.tsx"],"sourcesContent":["// Copyright (c) Meta Platforms, Inc. and affiliates.\n// Modifications copyright (c) Lablup Inc.\n//\n// Forked from @astryxdesign/lab 0.6.5-canary.8701623, src/Drawer/Drawer.tsx\n// (MIT; see NOTICE). Provenance and the drift guard: src/forks/provenance.json.\n\n\"use client\";\n\n/**\n * Drawer, ui-common's copy of Astryx lab's, with two changes (not upstream):\n *\n * - **`aria-modal` passes through.** A scrimless drawer is non-modal, but a\n *   consumer that restores modality by hand (its own mask and focus trap) can\n *   now say so; the default is unchanged.\n * - **ui-common's `Modal` opens above it.** The drawer is top layer either\n *   way: a modal `<dialog>` with a scrim (which also inerts everything\n *   outside it), a manual popover without. A `Modal` portalled to the body\n *   sat behind it, unreachable. The drawer provides its dialog through\n *   `ModalPortalContext` while it is open, and a `Modal` inside renders\n *   there and enters the top layer after it (modalStack.ts). Core's\n *   `Dialog` needs none of this: it is top layer itself, and ui-common's\n *   `Modal` is not.\n *\n * Escape routing is upstream's since lab 0.6.5: the drawer registers with\n * core's layer-dismissal stack, so a popover, selector or modal opened inside\n * it closes first and nested drawers close top-first. Everything else is\n * upstream's too. Its style namespaces are Astryx's compiled output\n * (src/forks/compiled.ts).\n *\n * Delete this fork, and its exports.exclude.json entry, once lab passes\n * `aria-modal` through and `Modal` no longer needs the portal host\n * (CONTRIBUTING, \"Forks of Astryx components\").\n */\n\n/*\n * Upstream's file notes, kept:\n *\n * Overlay panel for inspectors and detail views — the \"click a table row,\n * see its details\" pattern. Slides in from the inline start or end edge and\n * floats above the page content: unlike a docked panel it never reflows the\n * layout underneath, it overlays it (with or without a scrim).\n *\n * Inline axis only (start/end). Block-axis sheets are BottomSheet's job;\n * a drawer is always a full-height side panel.\n *\n * Sizing is viewport-aware: `width` is the desktop budget, and below\n * the mobile breakpoint it preserves a 56px reveal of the page behind, capped\n * by the requested width (or fills the viewport with `isFullWidthOnMobile`).\n *\n * Uses the native `<dialog>` element (same precedent as Dialog/MobileNav):\n * - `showModal()` when `hasScrim` (default) — top-layer rendering, focus\n *   trapping, `::backdrop`, no z-index management.\n * - `showPopover()` when `hasScrim={false}` — non-modal top-layer overlay;\n *   the page behind stays interactive (e.g. master-detail inspectors).\n *\n * Entry animation uses `@starting-style`; exit slides out before the active\n * modal-dialog or manual-popover host releases the top layer and focus returns\n * to the element that opened the drawer. React owns `display` for both legs\n * rather than a discrete `display` transition, so the panel stops painting in\n * the same commit as the host closes — see the `rendered` style for why.\n *\n * Sibling drawers use the shared layer dismissal stack for topmost-only Escape\n * handling and the browser top layer's chronological paint order.\n *\n * Dismissal follows Dialog: `purpose` decides whether Escape and a scrim click\n * request close, and Drawer renders no close button of its own. Compose\n * `DrawerHeader` with `onOpenChange` for a visible close action, as with\n * `DialogHeader`.\n *\n */\n\nimport { useCallback, useEffect, useRef, useState, type ReactNode } from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { StyleXStyles } from \"@stylexjs/stylex\";\nimport type { BaseProps } from \"@astryxdesign/core\";\nimport type { DialogPurpose } from \"@astryxdesign/core/Dialog\";\nimport { useFocusTrap, useMergedRefs, useScrollLock } from \"@astryxdesign/core/hooks\";\nimport { LayerDepthProvider, useLayerDismissal } from \"@astryxdesign/core/Layer\";\nimport { composeEventHandlers, mergeProps, themeProps } from \"@astryxdesign/core/utils\";\nimport { overlayPaddingReset } from \"@astryxdesign/core/Layout\";\n\nimport { compiledStyles } from \"../compiled\";\nimport * as compiled from \"./Drawer.styles\";\nimport { ModalPortalContext } from \"../../components/Modal/modalStack\";\nimport { useDrawerDialogPresence } from \"./useDrawerDialogPresence\";\n\n// =============================================================================\n// Styles\n// =============================================================================\n\n// Material's established mobile drawer pattern leaves a 56dp reveal. Using\n// the same value in CSS pixels gives the overlay a stable visual relationship\n// to the page behind while the requested width remains an upper bound.\nconst MOBILE_PAGE_REVEAL = 56;\nconst MOBILE_WIDTH_FULL = \"100dvw\";\n\n// @astryxdesign/lab dist/Drawer/Drawer.js `styles` and `dynamicStyles`.\nconst styles = compiledStyles(compiled.styles);\nconst dynamicStyles = compiled.dynamicStyles as {\n  inlineSize: (desktopWidth: string, mobileWidth: string) => StyleXStyles;\n};\n\n// Upstream's `content` style, which its compiler folded into this class list\n// (dist/Drawer/Drawer.js).\nconst CONTENT_CLASS_NAME =\n  \"x1iyjqo2 x2lwn1j xh8yej3 x1odjw0f x6ikm8r xish69e xx69xxh x1a148e8 x1a2a7pz\";\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface DrawerProps extends BaseProps<HTMLDialogElement> {\n  /** Ref forwarded to the root <dialog> element */\n  ref?: React.Ref<HTMLDialogElement>;\n\n  /**\n   * Whether the drawer is open. Fully controlled — pair with `onOpenChange`.\n   */\n  isOpen: boolean;\n\n  /**\n   * Called when the drawer requests an open-state change. Escape and a scrim\n   * click call it with `false` as `purpose` allows; a `DrawerHeader` close\n   * button calls it when you pass the same callback to the header. The caller\n   * owns the open state. When sibling drawers are open, Escape only closes the\n   * top (last-opened) drawer.\n   */\n  onOpenChange: (isOpen: boolean) => void;\n\n  /**\n   * Which edge the drawer slides from.\n   * - `'end'` — inline-end edge (right in LTR) — the inspector convention\n   * - `'start'` — inline-start edge (left in LTR)\n   * @default 'end'\n   */\n  side?: \"start\" | \"end\";\n\n  /**\n   * Desktop width budget. A number is pixels; a string is any CSS length\n   * (`'50%'`, `'32rem'`). Below the mobile breakpoint (640px), this\n   * remains the maximum while the drawer preserves a 56px reveal of the page\n   * behind — see `isFullWidthOnMobile`.\n   * @default 400\n   */\n  width?: number | string;\n\n  /**\n   * Whether the drawer covers the full viewport width on mobile\n   * (below 640px) instead of preserving the default 56px reveal of the page\n   * behind. The reveal makes the drawer read as an overlay rather than a\n   * navigation.\n   * @default false\n   */\n  isFullWidthOnMobile?: boolean;\n\n  /**\n   * Accessible label for the drawer (required — the drawer has no\n   * built-in heading to derive a name from).\n   */\n  label: string;\n\n  /**\n   * Whether to render a modal scrim behind the drawer.\n   * - `true` (default) — `showModal()`: top layer, focus trap, body scroll\n   *   lock, click-outside-to-close.\n   * - `false` — `showPopover()`: non-modal top-layer overlay; the page behind\n   *   stays interactive. Escape still closes through the shared layer stack.\n   * @default true\n   */\n  hasScrim?: boolean;\n\n  /**\n   * Configures how the drawer enables dismissals, matching Dialog.\n   * - required: Disables Escape and scrim click (for mandatory flows); a\n   *   modal required drawer is exposed as an `alertdialog`\n   * - form: Prevents scrim click, allows the Escape key\n   * - info: Allows Escape and scrim click\n   *\n   * A non-modal drawer has no scrim, so `form` and `info` behave the same.\n   * @default 'info'\n   */\n  purpose?: DialogPurpose;\n\n  /**\n   * Drawer content. Rendered inside a full-height scrollable area.\n   * Focus the element with `data-autofocus` on open, if present.\n   */\n  children: ReactNode;\n\n  /**\n   * Test ID for the root element.\n   */\n  \"data-testid\"?: string;\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * An overlay panel for inspectors and detail views.\n *\n * Slides in from the logical start or end edge and floats above the page\n * using the native `<dialog>` element: modal with a scrim by default, or a\n * non-modal overlay with `hasScrim={false}` that leaves the page behind\n * interactive. `width` is the desktop budget; below 640px the panel preserves\n * a 56px page reveal without exceeding that budget (or fills the viewport\n * with `isFullWidthOnMobile`). Escape\n * closes the top-most open drawer; focus returns to the element that\n * opened it.\n *\n * Dismissal matches Dialog: `purpose` decides whether Escape and a scrim click\n * close the drawer, and `DrawerHeader` renders a close button when given\n * `onOpenChange`.\n *\n * @example\n * ```\n * const [selected, setSelected] = useState(null);\n * const handleOpenChange = isOpen => !isOpen && setSelected(null);\n * <Drawer\n *   isOpen={selected != null}\n *   onOpenChange={handleOpenChange}\n *   label={`Details: ${selected?.name}`}>\n *   <DrawerHeader title={selected?.name} onOpenChange={handleOpenChange} />\n *   <HostDetails host={selected} />\n * </Drawer>\n * ```\n */\nexport function Drawer({\n  isOpen,\n  onOpenChange,\n  side = \"end\",\n  width = 400,\n  isFullWidthOnMobile = false,\n  label,\n  hasScrim = true,\n  purpose = \"info\",\n  children,\n  xstyle,\n  className,\n  style,\n  onClick: onClickProp,\n  onKeyDown: onKeyDownProp,\n  ref,\n  ...props\n}: DrawerProps) {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const { containerRef: focusTrapRef } = useFocusTrap<HTMLDialogElement>({\n    isActive: isOpen && hasScrim,\n  });\n  const mergedDialogRef = useMergedRefs(ref, dialogRef, focusTrapRef);\n  // Derive dismissal behavior from purpose, as Dialog does.\n  const allowEscape = purpose !== \"required\";\n  const allowScrimClick = purpose === \"info\";\n  // Whether the panel paints: true while open and for the whole slide-out.\n  const [isRendered, setIsRendered] = useState(isOpen);\n\n  // Adjusted during render, not in an effect: the panel has to be rendered in\n  // the same commit that targets the open transform, or @starting-style has\n  // nothing to animate from.\n  if (isOpen && !isRendered) {\n    setIsRendered(true);\n  }\n\n  useDrawerDialogPresence({\n    dialogRef,\n    isOpen,\n    isModal: hasScrim,\n    setIsRendered,\n  });\n\n  // ui-common: the dialog a Modal inside renders into, set only once\n  // showModal() / showPopover() has run (the effect above), so the Modal's\n  // popover enters the top layer after the dialog and paints above it. Both\n  // hosts are top layer, so a body-portalled Modal would sit behind either.\n  const [modalHost, setModalHost] = useState<HTMLDialogElement | null>(null);\n  useEffect(() => {\n    setModalHost(isOpen ? dialogRef.current : null);\n  }, [isOpen]);\n\n  const handleDismiss = useCallback(() => {\n    onOpenChange(false);\n  }, [onOpenChange]);\n\n  // The shared stack owns Escape delivery across every overlay family. The\n  // provider below gives layers opened from Drawer content a greater logical\n  // depth even when they render elsewhere in the DOM or browser top layer.\n  const { shouldDismissOnCloseRequest } = useLayerDismissal({\n    // The native host stays present through the slide-out. Keep this entry on\n    // the stack until the same commit that hides the host, so a second Escape\n    // cannot fall through to a lower layer during the exit animation.\n    isActive: isRendered,\n    // A `required` drawer consumes Escape without closing, so the press cannot\n    // fall through and dismiss a layer behind it either.\n    escapeBehavior: allowEscape ? \"close\" : \"block\",\n    onDismiss: handleDismiss,\n    getContainer: () => dialogRef.current,\n  });\n\n  // Lock body scroll while a modal drawer is open (iOS Safari workaround).\n  useScrollLock(isOpen && hasScrim);\n\n  // A modal dialog's native cancel event is a platform close request (for\n  // example Android Back). Keep controlled state authoritative and apply the\n  // same top-most/IME rules as the shared Escape listener.\n  const handleCancel = useCallback(\n    (event: React.SyntheticEvent<HTMLDialogElement>) => {\n      event.preventDefault();\n      if (shouldDismissOnCloseRequest() && allowEscape) {\n        handleDismiss();\n      }\n    },\n    [allowEscape, handleDismiss, shouldDismissOnCloseRequest],\n  );\n\n  // Clicks on the ::backdrop target the <dialog> element itself; clicks on\n  // drawer content always target a child (the content area fills the panel).\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDialogElement>) => {\n      if (event.target === event.currentTarget && hasScrim && allowScrimClick) {\n        onOpenChange(false);\n      }\n    },\n    [allowScrimClick, hasScrim, onOpenChange],\n  );\n\n  const widthValue = typeof width === \"number\" ? `${width}px` : width;\n  const mobileWidth = isFullWidthOnMobile\n    ? MOBILE_WIDTH_FULL\n    : `min(${widthValue}, calc(100dvw - ${MOBILE_PAGE_REVEAL}px))`;\n\n  // The side the panel is ANCHORED to, which is the side it must slide back\n  // out to. Latched at open, because a consumer commonly derives `side` from\n  // the same state that drives `isOpen` (`side={selected?.side ?? 'end'}`):\n  // that state clears on close, so the live prop flips mid-exit and the panel\n  // teleports to the other edge and slides out the wrong way. Children stay\n  // mounted for the exit for the same reason; so does the anchor.\n  const exitSideRef = useRef(side);\n  if (isOpen) {\n    exitSideRef.current = side;\n  }\n  const anchoredSide = isOpen ? side : exitSideRef.current;\n\n  const sideStyle = anchoredSide === \"start\" ? styles.start : styles.end;\n  const sideOpenStyle = anchoredSide === \"start\" ? styles.startOpen : styles.endOpen;\n\n  // Filter out native `open` to prevent InvalidStateError when passed\n  const { open: _open, ...safeProps } = props as Record<string, unknown>;\n\n  return (\n    <dialog\n      ref={mergedDialogRef}\n      {...mergeProps(\n        themeProps(\"drawer\", { side: anchoredSide }),\n        stylex.props(\n          styles.dialog,\n          overlayPaddingReset.reset,\n          sideStyle,\n          dynamicStyles.inlineSize(widthValue, mobileWidth),\n          isRendered && styles.rendered,\n          isOpen && sideOpenStyle,\n          hasScrim && styles.scrim,\n          hasScrim && isOpen && styles.scrimOpen,\n          xstyle,\n        ),\n        className,\n        style,\n      )}\n      {...safeProps}\n      popover={hasScrim ? undefined : \"manual\"}\n      aria-label={label}\n      // ui-common: scrimless by itself is non-modal, but a consumer that\n      // restores the modality by hand (a portal supplying its own mask and\n      // focus trap) must be able to say so.\n      aria-modal={\n        (safeProps[\"aria-modal\"] as React.AriaAttributes[\"aria-modal\"]) ??\n        (hasScrim ? \"true\" : undefined)\n      }\n      {...(purpose === \"required\" && hasScrim ? { role: \"alertdialog\" } : undefined)}\n      onClick={composeEventHandlers(onClickProp, handleClick)}\n      onKeyDown={onKeyDownProp}\n      onCancel={handleCancel}\n    >\n      <LayerDepthProvider>\n        {/* Scrollable content area — tabIndex so the dialog's focusing steps\n            land on the panel body rather than the first button inside. */}\n        <div tabIndex={-1} className={CONTENT_CLASS_NAME}>\n          <ModalPortalContext value={modalHost}>{children}</ModalPortalContext>\n        </div>\n      </LayerDepthProvider>\n    </dialog>\n  );\n}\n\nDrawer.displayName = \"Drawer\";\n"],"mappings":";;;;;;;;;;;;;AA6FA,IAAM,IAAqB,IACrB,IAAoB,UAGpB,IAAS,EAAe,CAAe,GACvC,KAAgB,GAMhB,IACJ;AA2HF,SAAgB,EAAO,EACrB,WACA,iBACA,UAAO,OACP,WAAQ,KACR,yBAAsB,IACtB,UACA,cAAW,IACX,aAAU,QACV,aACA,WACA,cACA,UACA,SAAS,GACT,WAAW,GACX,QACA,GAAG,KACW;CACd,IAAM,IAAY,EAA0B,IAAI,GAC1C,EAAE,cAAc,MAAiB,EAAgC,EACrE,UAAU,KAAU,EACtB,CAAC,GACK,KAAkB,EAAc,GAAK,GAAW,CAAY,GAE5D,IAAc,MAAY,YAC1B,IAAkB,MAAY,QAE9B,CAAC,GAAY,KAAiB,EAAS,CAAM;CASnD,AAJI,KAAU,CAAC,KACb,EAAc,EAAI,GAGpB,EAAwB;EACtB;EACA;EACA,SAAS;EACT;CACF,CAAC;CAMD,IAAM,CAAC,GAAW,KAAgB,EAAmC,IAAI;CACzE,QAAgB;EACd,EAAa,IAAS,EAAU,UAAU,IAAI;CAChD,GAAG,CAAC,CAAM,CAAC;CAEX,IAAM,IAAgB,QAAkB;EACtC,EAAa,EAAK;CACpB,GAAG,CAAC,CAAY,CAAC,GAKX,EAAE,mCAAgC,EAAkB;EAIxD,UAAU;EAGV,gBAAgB,IAAc,UAAU;EACxC,WAAW;EACX,oBAAoB,EAAU;CAChC,CAAC;CAGD,EAAc,KAAU,CAAQ;CAKhC,IAAM,IAAe,GAClB,MAAmD;EAElD,AADA,EAAM,eAAe,GACjB,EAA4B,KAAK,KACnC,EAAc;CAElB,GACA;EAAC;EAAa;EAAe;CAA2B,CAC1D,GAIM,IAAc,GACjB,MAA+C;EAC9C,AAAI,EAAM,WAAW,EAAM,iBAAiB,KAAY,KACtD,EAAa,EAAK;CAEtB,GACA;EAAC;EAAiB;EAAU;CAAY,CAC1C,GAEM,IAAa,OAAO,KAAU,WAAW,GAAG,EAAM,MAAM,GACxD,IAAc,IAChB,IACA,OAAO,EAAW,kBAAkB,EAAmB,OAQrD,IAAc,EAAO,CAAI;CAC/B,AAAI,MACF,EAAY,UAAU;CAExB,IAAM,IAAe,IAAS,IAAO,EAAY,SAE3C,KAAY,MAAiB,UAAU,EAAO,QAAQ,EAAO,KAC7D,KAAgB,MAAiB,UAAU,EAAO,YAAY,EAAO,SAGrE,EAAE,MAAM,IAAO,GAAG,MAAc;CAEtC,OACE,kBAAC,UAAD;EACE,KAAK;EACL,GAAI,EACF,EAAW,UAAU,EAAE,MAAM,EAAa,CAAC,GAC3C,EAAO,MACL,EAAO,QACP,EAAoB,OACpB,IACA,GAAc,WAAW,GAAY,CAAW,GAChD,KAAc,EAAO,UACrB,KAAU,IACV,KAAY,EAAO,OACnB,KAAY,KAAU,EAAO,WAC7B,CACF,GACA,GACA,CACF;EACA,GAAI;EACJ,SAAS,IAAW,KAAA,IAAY;EAChC,cAAY;EAIZ,cACG,EAAU,kBACV,IAAW,SAAS,KAAA;EAEvB,GAAK,MAAY,cAAc,IAAW,EAAE,MAAM,cAAc,IAAI,KAAA;EACpE,SAAS,EAAqB,GAAa,CAAW;EACtD,WAAW;EACX,UAAU;EAEV,UAAA,kBAAC,GAAD,EAAA,UAGE,kBAAC,OAAD;GAAK,UAAU;GAAI,WAAW;GAC5B,UAAA,kBAAC,GAAD;IAAoB,OAAO;IAAY;GAA6B,CAAA;EACjE,CAAA,EACa,CAAA;CACd,CAAA;AAEZ;AAEA,EAAO,cAAc"}

package/dist/forks/Drawer/Drawer.styles.d.ts

@@ -1,5 +1,21 @@
 export declare const styles: {
     dialog: {
+        kMv6JI: string;
+        kGuDYH: string;
+        k63SB2: string;
+        kLWn49: string;
+        kKX8nH: string;
+        k9WMMc: string;
+        kJI5tL: string;
+        kTHuQy: string;
+        kP9fke: string;
+        kb6lSQ: string;
+        k4JVr9: string;
+        kKMj4B: string;
+        khDVqt: string;
+        kTgw9: string;
+        kHjlTd: string;
+        kE4Cay: string;
         kVAEAm: string;
         kogj98: string;
         kmVPX3: string;
@@ -87,13 +103,4 @@ export declare const dynamicStyles: {
         kzqmXN?: undefined;
         $$css?: undefined;
     })[];
-    stackZ: (z: any) => ({
-        kY2c9j: any;
-        $$css: boolean;
-        "--x-zIndex"?: undefined;
-    } | {
-        "--x-zIndex": any;
-        kY2c9j?: undefined;
-        $$css?: undefined;
-    })[];
 };

package/dist/forks/Drawer/Drawer.styles.js

@@ -1,6 +1,22 @@
 //#region src/forks/Drawer/Drawer.styles.ts
 var e = {
 	dialog: {
+		kMv6JI: "x9ynric",
+		kGuDYH: "xjm74w1",
+		k63SB2: "xxovm9e",
+		kLWn49: "xw6l6zx",
+		kKX8nH: "x1j61x8r",
+		k9WMMc: "x1yc453h",
+		kJI5tL: "x7ssn7h",
+		kTHuQy: "xzugeeo",
+		kP9fke: "x6mezaz",
+		kb6lSQ: "x1i21sxh",
+		k4JVr9: "xp3md9m",
+		kKMj4B: "x19pm5ym",
+		khDVqt: "xeaf4i8",
+		kTgw9: "x1lldw8n",
+		kHjlTd: "x1h4wwuj",
+		kE4Cay: "xxydokm",
 		kVAEAm: "xixxii4",
 		kogj98: "x1ghz6dp",
 		kmVPX3: "x1717udv",
@@ -71,23 +87,17 @@ var e = {
 }, t = {
 	ks0D6T: "xlbgzzq",
 	$$css: !0
-}, n = {
-	inlineSize: (e, n) => [
-		t,
-		{
-			kzqmXN: (e == null ? e : "x11ymkkh ") + (n == null ? n : "xci7e5a"),
-			$$css: !0
-		},
-		{
-			"--x-1xmrurk": ((e) => typeof e == "number" ? e + "px" : e ?? void 0)(e),
-			"--x-fqzwsx": ((e) => typeof e == "number" ? e + "px" : e ?? void 0)(n)
-		}
-	],
-	stackZ: (e) => [{
-		kY2c9j: e == null ? e : "xr3buco",
+}, n = { inlineSize: (e, n) => [
+	t,
+	{
+		kzqmXN: (e == null ? e : "x11ymkkh ") + (n == null ? n : "xci7e5a"),
 		$$css: !0
-	}, { "--x-zIndex": e ?? void 0 }]
-};
+	},
+	{
+		"--x-1xmrurk": ((e) => typeof e == "number" ? e + "px" : e ?? void 0)(e),
+		"--x-fqzwsx": ((e) => typeof e == "number" ? e + "px" : e ?? void 0)(n)
+	}
+] };
 //#endregion
 export { t as _temp, n as dynamicStyles, e as styles };
 

package/dist/forks/Drawer/Drawer.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.styles.js","names":[],"sources":["../../../src/forks/Drawer/Drawer.styles.ts"],"sourcesContent":["/* eslint-disable */\n// @ts-nocheck\n// @generated by scripts/sync-forks.mjs. Do not edit.\n//\n// Compiled StyleX from @astryxdesign/lab 0.6.2-canary.c9fb1ad, reused by the\n// Drawer fork so it renders with upstream's own class names\n// (src/forks/compiled.ts). Copyright (c) Meta Platforms, Inc. and\n// affiliates; MIT, see NOTICE.\n\n// dist/Drawer/Drawer.js\nexport const styles = {\n  dialog: {\n    kVAEAm: \"xixxii4\",\n    kogj98: \"x1ghz6dp\",\n    kmVPX3: \"x1717udv\",\n    kaIpWk: \"x2u8bby\",\n    ks0D6T: \"x1x1rfll\",\n    kskxy: \"x7ab17h\",\n    kB7OPa: \"x9f619\",\n    kXwgrk: \"xdt5ytf\",\n    kWkggS: \"x10xzikg\",\n    kGVxlE: \"x1kcpxr7\",\n    kVQacm: \"xb3r6kr\",\n    kZeWKH: \"xish69e\",\n    kI3sdo: \"x1a2a7pz\",\n    k87sOh: \"x13vifvy\",\n    krVfgx: \"x1ey2m1c\",\n    kZKoxP: \"xtdtrs8\",\n    k1xSpc: \"x1s85apg\",\n    k1ekBW: \"x11xpdln\",\n    kIyJzY: \"x80gvsz\",\n    kAMwcw: \"xlr8y92\",\n    k6CgDc: \"xzg1mie\",\n    $$css: true,\n  },\n  rendered: {\n    k1xSpc: \"x78zum5\",\n    $$css: true,\n  },\n  end: {\n    kt4wiu: \"xtijo5x\",\n    kLqNvP: \"xhi6v0a\",\n    k2ei4v: \"xgbv0en\",\n    kVhnKS: \"x1t7ytsu\",\n    kGJrpR: \"x1j92z86\",\n    k3aq6I: \"xumwmo6 x1df3fe5\",\n    $$css: true,\n  },\n  endOpen: {\n    k3aq6I: \"xbryuvx x1yqmsfc x1lymnkk\",\n    $$css: true,\n  },\n  start: {\n    kLqNvP: \"x1o0tod\",\n    kt4wiu: \"x1woyocn\",\n    ke9TFa: \"xw8tdv1\",\n    k8ry5P: \"x18b5jzi\",\n    kBCPoo: \"x1gejf6u\",\n    k3aq6I: \"x5i6ehr xttggg\",\n    $$css: true,\n  },\n  startOpen: {\n    k3aq6I: \"xbryuvx x6mt36l x14gflnl\",\n    $$css: true,\n  },\n  scrim: {\n    kGyWv1: \"xnixb3f\",\n    kba3nw: \"x1abwkk1\",\n    k5sjJv: \"xph5o2a\",\n    kND0Po: \"x167zut7\",\n    k9an0g: \"xft5bk6\",\n    kb4ib: \"x15h3t91\",\n    kA5Tbj: \"x1viac0w\",\n    $$css: true,\n  },\n  scrimOpen: {\n    k5sjJv: \"xb3n6bw xxiuuzi\",\n    $$css: true,\n  },\n};\nexport const _temp = {\n  ks0D6T: \"xlbgzzq\",\n  $$css: true,\n};\nexport const dynamicStyles = {\n  inlineSize: (desktopWidth, mobileWidth) => [\n    _temp,\n    {\n      kzqmXN:\n        (desktopWidth != null ? \"x11ymkkh \" : desktopWidth) +\n        (mobileWidth != null ? \"xci7e5a\" : mobileWidth),\n      $$css: true,\n    },\n    {\n      \"--x-1xmrurk\": ((val) =>\n        typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(\n        desktopWidth,\n      ),\n      \"--x-fqzwsx\": ((val) =>\n        typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(\n        mobileWidth,\n      ),\n    },\n  ],\n  stackZ: (z) => [\n    {\n      kY2c9j: z != null ? \"xr3buco\" : z,\n      $$css: true,\n    },\n    {\n      \"--x-zIndex\": z != null ? z : undefined,\n    },\n  ],\n};\n"],"mappings":";AAUA,IAAa,IAAS;CACpB,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;AACF,GACa,IAAQ;CACnB,QAAQ;CACR,OAAO;AACT,GACa,IAAgB;CAC3B,aAAa,GAAc,MAAgB;EACzC;EACA;GACE,SACG,KAAgB,OAAqB,IAAd,gBACvB,KAAe,OAAmB,IAAZ;GACzB,OAAO;EACT;EACA;GACE,iBAAiB,MACf,OAAO,KAAQ,WAAW,IAAM,OAAO,KAAoB,KAAA,EAAA,CAC3D,CACF;GACA,gBAAgB,MACd,OAAO,KAAQ,WAAW,IAAM,OAAO,KAAoB,KAAA,EAAA,CAC3D,CACF;EACF;CACF;CACA,SAAS,MAAM,CACb;EACE,QAAQ,KAAK,OAAmB,IAAZ;EACpB,OAAO;CACT,GACA,EACE,cAAc,KAAgB,KAAA,EAChC,CACF;AACF"}
+{"version":3,"file":"Drawer.styles.js","names":[],"sources":["../../../src/forks/Drawer/Drawer.styles.ts"],"sourcesContent":["/* eslint-disable */\n// @ts-nocheck\n// @generated by scripts/sync-forks.mjs. Do not edit.\n//\n// Compiled StyleX from @astryxdesign/lab 0.6.5-canary.8701623, reused by the\n// Drawer fork so it renders with upstream's own class names\n// (src/forks/compiled.ts). Copyright (c) Meta Platforms, Inc. and\n// affiliates; MIT, see NOTICE.\n\n// dist/Drawer/Drawer.js\nexport const styles = {\n  dialog: {\n    kMv6JI: \"x9ynric\",\n    kGuDYH: \"xjm74w1\",\n    k63SB2: \"xxovm9e\",\n    kLWn49: \"xw6l6zx\",\n    kKX8nH: \"x1j61x8r\",\n    k9WMMc: \"x1yc453h\",\n    kJI5tL: \"x7ssn7h\",\n    kTHuQy: \"xzugeeo\",\n    kP9fke: \"x6mezaz\",\n    kb6lSQ: \"x1i21sxh\",\n    k4JVr9: \"xp3md9m\",\n    kKMj4B: \"x19pm5ym\",\n    khDVqt: \"xeaf4i8\",\n    kTgw9: \"x1lldw8n\",\n    kHjlTd: \"x1h4wwuj\",\n    kE4Cay: \"xxydokm\",\n    kVAEAm: \"xixxii4\",\n    kogj98: \"x1ghz6dp\",\n    kmVPX3: \"x1717udv\",\n    kaIpWk: \"x2u8bby\",\n    ks0D6T: \"x1x1rfll\",\n    kskxy: \"x7ab17h\",\n    kB7OPa: \"x9f619\",\n    kXwgrk: \"xdt5ytf\",\n    kWkggS: \"x10xzikg\",\n    kGVxlE: \"x1kcpxr7\",\n    kVQacm: \"xb3r6kr\",\n    kZeWKH: \"xish69e\",\n    kI3sdo: \"x1a2a7pz\",\n    k87sOh: \"x13vifvy\",\n    krVfgx: \"x1ey2m1c\",\n    kZKoxP: \"xtdtrs8\",\n    k1xSpc: \"x1s85apg\",\n    k1ekBW: \"x11xpdln\",\n    kIyJzY: \"x80gvsz\",\n    kAMwcw: \"xlr8y92\",\n    k6CgDc: \"xzg1mie\",\n    $$css: true,\n  },\n  rendered: {\n    k1xSpc: \"x78zum5\",\n    $$css: true,\n  },\n  end: {\n    kt4wiu: \"xtijo5x\",\n    kLqNvP: \"xhi6v0a\",\n    k2ei4v: \"xgbv0en\",\n    kVhnKS: \"x1t7ytsu\",\n    kGJrpR: \"x1j92z86\",\n    k3aq6I: \"xumwmo6 x1df3fe5\",\n    $$css: true,\n  },\n  endOpen: {\n    k3aq6I: \"xbryuvx x1yqmsfc x1lymnkk\",\n    $$css: true,\n  },\n  start: {\n    kLqNvP: \"x1o0tod\",\n    kt4wiu: \"x1woyocn\",\n    ke9TFa: \"xw8tdv1\",\n    k8ry5P: \"x18b5jzi\",\n    kBCPoo: \"x1gejf6u\",\n    k3aq6I: \"x5i6ehr xttggg\",\n    $$css: true,\n  },\n  startOpen: {\n    k3aq6I: \"xbryuvx x6mt36l x14gflnl\",\n    $$css: true,\n  },\n  scrim: {\n    kGyWv1: \"xnixb3f\",\n    kba3nw: \"x1abwkk1\",\n    k5sjJv: \"xph5o2a\",\n    kND0Po: \"x167zut7\",\n    k9an0g: \"xft5bk6\",\n    kb4ib: \"x15h3t91\",\n    kA5Tbj: \"x1viac0w\",\n    $$css: true,\n  },\n  scrimOpen: {\n    k5sjJv: \"xb3n6bw xxiuuzi\",\n    $$css: true,\n  },\n};\nexport const _temp = {\n  ks0D6T: \"xlbgzzq\",\n  $$css: true,\n};\nexport const dynamicStyles = {\n  inlineSize: (desktopWidth, mobileWidth) => [\n    _temp,\n    {\n      kzqmXN:\n        (desktopWidth != null ? \"x11ymkkh \" : desktopWidth) +\n        (mobileWidth != null ? \"xci7e5a\" : mobileWidth),\n      $$css: true,\n    },\n    {\n      \"--x-1xmrurk\": ((val) =>\n        typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(\n        desktopWidth,\n      ),\n      \"--x-fqzwsx\": ((val) =>\n        typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(\n        mobileWidth,\n      ),\n    },\n  ],\n};\n"],"mappings":";AAUA,IAAa,IAAS;CACpB,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;AACF,GACa,IAAQ;CACnB,QAAQ;CACR,OAAO;AACT,GACa,IAAgB,EAC3B,aAAa,GAAc,MAAgB;CACzC;CACA;EACE,SACG,KAAgB,OAAqB,IAAd,gBACvB,KAAe,OAAmB,IAAZ;EACzB,OAAO;CACT;CACA;EACE,iBAAiB,MACf,OAAO,KAAQ,WAAW,IAAM,OAAO,KAAoB,KAAA,EAAA,CAC3D,CACF;EACA,gBAAgB,MACd,OAAO,KAAQ,WAAW,IAAM,OAAO,KAAoB,KAAA,EAAA,CAC3D,CACF;CACF;AACF,EACF"}

package/dist/forks/Drawer/useDrawerDialogPresence.d.ts

@@ -8,12 +8,13 @@ type UseDrawerDialogPresenceOptions = {
 /**
  * Coordinates the native dialog and React-rendered presence for Drawer.
  *
- * Opening captures the trigger, opens the native dialog, and honours the
- * component's `data-autofocus` contract. Closing waits for the actual
- * transform transition (with a computed-duration backstop), then closes the
- * native dialog and synchronously hides the panel before the browser can paint
- * it outside the top layer. Unmount cleanup closes a dialog left open by React
- * Activity or a removed subtree.
+ * Opening captures the trigger, enters the modal-dialog or manual-popover host,
+ * and honours the component's `data-autofocus` contract. Closing waits for the
+ * actual transform transition (with a computed-duration backstop), then leaves
+ * the native host and synchronously hides the panel before the browser can paint
+ * it outside the top layer, restores focus to the captured trigger, and only
+ * then dispatches the popover host's synthetic `close`. Unmount cleanup closes
+ * a host left open by React Activity or a removed subtree.
  */
 export declare function useDrawerDialogPresence({ dialogRef, isOpen, isModal, setIsRendered, }: UseDrawerDialogPresenceOptions): void;
 export {};

package/dist/forks/Drawer/useDrawerDialogPresence.js

@@ -3,60 +3,81 @@ import { useEffect as e, useRef as t } from "react";
 import { flushSync as n } from "react-dom";
 //#region src/forks/Drawer/useDrawerDialogPresence.ts
 var r = 50, i = 250;
-function a({ dialogRef: r, isOpen: i, isModal: a, setIsRendered: s }) {
-	let c = t(null);
+function a(e) {
+	try {
+		return e.matches(":popover-open");
+	} catch {
+		return !1;
+	}
+}
+function o(e, t) {
+	return t ? e.open : a(e) || e.open;
+}
+function s(e, t) {
+	t ? e.showModal() : typeof e.showPopover == "function" ? e.showPopover() : e.show();
+}
+function c(e) {
+	let t = e.ownerDocument.defaultView?.Event ?? Event;
+	e.dispatchEvent(new t("close"));
+}
+function l(e, t) {
+	return !t && typeof e.hidePopover == "function" ? (e.hidePopover(), !0) : (e.open && e.close(), !1);
+}
+function u({ dialogRef: r, isOpen: i, isModal: a, setIsRendered: u }) {
+	let f = t(null);
 	e(() => {
 		let e = r.current;
 		if (e) {
 			if (i) {
-				e.open || (c.current = document.activeElement, a ? e.showModal() : e.show(), e.querySelector("[data-autofocus]")?.focus());
+				o(e, a) || (f.current = document.activeElement, s(e, a), e.querySelector("[data-autofocus]")?.focus());
 				return;
 			}
-			if (e.open) return o(e, () => {
-				e.close(), n(() => {
-					s(!1);
-				}), c.current?.focus(), c.current = null;
+			if (o(e, a)) return d(e, () => {
+				let t = l(e, a);
+				n(() => {
+					u(!1);
+				}), f.current?.focus(), f.current = null, t && c(e);
 			});
 		}
 	}, [
 		r,
 		a,
 		i,
-		s
+		u
 	]), e(() => {
 		let e = r.current;
 		return () => {
-			e?.open && e.close();
+			e && o(e, a) && l(e, a) && c(e);
 		};
-	}, [r]);
+	}, [r, a]);
 }
-function o(e, t) {
+function d(e, t) {
 	let n = !1, a = null, o = () => {
-		n || (n = !0, a != null && clearTimeout(a), e.removeEventListener("transitionend", c), e.removeEventListener("transitioncancel", c), t());
-	}, c = (t) => {
+		n || (n = !0, a != null && clearTimeout(a), e.removeEventListener("transitionend", s), e.removeEventListener("transitioncancel", s), t());
+	}, s = (t) => {
 		t.target === e && t.propertyName === "transform" && o();
 	};
-	e.addEventListener("transitionend", c), e.addEventListener("transitioncancel", c);
-	let l = s(e);
-	return a = setTimeout(o, (l ?? i) + r), () => {
-		n = !0, a != null && clearTimeout(a), e.removeEventListener("transitionend", c), e.removeEventListener("transitioncancel", c);
+	e.addEventListener("transitionend", s), e.addEventListener("transitioncancel", s);
+	let c = f(e);
+	return a = setTimeout(o, (c ?? i) + r), () => {
+		n = !0, a != null && clearTimeout(a), e.removeEventListener("transitionend", s), e.removeEventListener("transitioncancel", s);
 	};
 }
-function s(e) {
-	let t = window.getComputedStyle(e), n = t.transitionProperty.split(",").map((e) => e.trim()), r = c(t.transitionDuration), i = c(t.transitionDelay);
+function f(e) {
+	let t = window.getComputedStyle(e), n = t.transitionProperty.split(",").map((e) => e.trim()), r = p(t.transitionDuration), i = p(t.transitionDelay);
 	return n.length === 0 || r.length === 0 || i.length === 0 || r.includes(null) || i.includes(null) ? null : n.reduce((e, t, n) => {
 		if (t !== "transform" && t !== "all") return e;
 		let a = r[n % r.length], o = i[n % i.length];
 		return Math.max(e, (a ?? 0) + (o ?? 0));
 	}, 0);
 }
-function c(e) {
+function p(e) {
 	return e.split(",").map((e) => {
 		let t = e.trim(), n = Number.parseFloat(t);
 		return Number.isFinite(n) ? t.endsWith("ms") ? n : t.endsWith("s") ? n * 1e3 : null : null;
 	});
 }
 //#endregion
-export { a as useDrawerDialogPresence };
+export { u as useDrawerDialogPresence };
 
 //# sourceMappingURL=useDrawerDialogPresence.js.map

package/dist/forks/Drawer/useDrawerDialogPresence.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDrawerDialogPresence.js","names":[],"sources":["../../../src/forks/Drawer/useDrawerDialogPresence.ts"],"sourcesContent":["// Copyright (c) Meta Platforms, Inc. and affiliates.\n//\n// Forked from @astryxdesign/lab 0.6.2-canary.c9fb1ad, src/Drawer/useDrawerDialogPresence.ts\n// (MIT; see NOTICE). Unchanged: forked with Drawer, which uses it.\n// Provenance and the drift guard: src/forks/provenance.json.\n\n\"use client\";\n\n/**\n * @file useDrawerDialogPresence.ts\n * @input Controlled open state, modal mode, dialog ref, and rendered-state setter\n * @output Coordinates native dialog presence, exit timing, focus restoration, and unmount cleanup\n * @position Drawer-internal hook; consumed only by Drawer.tsx\n *\n * The drawer has two independent notions of presence:\n * - React's rendered state keeps the panel visible for its CSS exit.\n * - The native <dialog> `open` state keeps it in the top layer.\n *\n * Their close ordering is a browser-visible invariant: the panel must finish\n * its exit, then `dialog.close()` and the React hide must happen in the same\n * task. If the hide lands a frame later, a transformed ancestor becomes the\n * containing block for the now-non-top-layer `position: fixed` panel and it\n * paints back inside the page for one frame.\n *\n * SYNC: When modified, update:\n * - /packages/lab/src/Drawer/Drawer.test.tsx\n * - /.github/scripts/modal-close-visibility.js\n */\n\nimport {\n  useEffect,\n  useRef,\n  type Dispatch,\n  type RefObject,\n  type SetStateAction,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\n\n/** Slack past the computed transition before the backstop gives up waiting. */\nconst EXIT_BACKSTOP_BUFFER_MS = 50;\n\n/**\n * Hold used when the transition duration cannot be read — an unresolved\n * `var()` outside a real browser. Picking a fixed number would otherwise make\n * an assumption about the consumer's theme.\n */\nconst EXIT_FALLBACK_MS = 250;\n\ntype UseDrawerDialogPresenceOptions = {\n  dialogRef: RefObject<HTMLDialogElement | null>;\n  isOpen: boolean;\n  isModal: boolean;\n  setIsRendered: Dispatch<SetStateAction<boolean>>;\n};\n\n/**\n * Coordinates the native dialog and React-rendered presence for Drawer.\n *\n * Opening captures the trigger, opens the native dialog, and honours the\n * component's `data-autofocus` contract. Closing waits for the actual\n * transform transition (with a computed-duration backstop), then closes the\n * native dialog and synchronously hides the panel before the browser can paint\n * it outside the top layer. Unmount cleanup closes a dialog left open by React\n * Activity or a removed subtree.\n */\nexport function useDrawerDialogPresence({\n  dialogRef,\n  isOpen,\n  isModal,\n  setIsRendered,\n}: UseDrawerDialogPresenceOptions): void {\n  // Element focused when the drawer opened — restored on close.\n  const triggerElementRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) {\n      return;\n    }\n\n    if (isOpen) {\n      if (!dialog.open) {\n        triggerElementRef.current = document.activeElement as HTMLElement | null;\n        if (isModal) {\n          dialog.showModal();\n        } else {\n          dialog.show();\n        }\n        // React's autoFocus calls .focus() during commit, before the dialog is\n        // shown, so it silently fails — honour data-autofocus instead (same\n        // contract as Dialog).\n        dialog.querySelector<HTMLElement>(\"[data-autofocus]\")?.focus();\n      }\n      return;\n    }\n\n    if (!dialog.open) {\n      return;\n    }\n\n    return waitForDrawerExit(dialog, () => {\n      dialog.close();\n      // flushSync, not a plain setState: React's default scheduling can land\n      // the commit after the next paint, and that one frame is exactly the\n      // bug — the panel paints outside the top layer. Both happen in this\n      // task, so the browser never gets to paint between them.\n      flushSync(() => {\n        setIsRendered(false);\n      });\n      // Return focus after close(): a modal dialog makes the rest of the\n      // document inert, so focusing the trigger before close() silently fails.\n      triggerElementRef.current?.focus();\n      triggerElementRef.current = null;\n    });\n  }, [dialogRef, isModal, isOpen, setIsRendered]);\n\n  // Close the native dialog on unmount if it is still open. When the drawer is\n  // mounted inside an <Activity> that flips to mode=\"hidden\", React runs effect\n  // cleanups (with stale isOpen) instead of re-running the effect with\n  // isOpen=false. Leaving `open` set would skip showModal() on the next open.\n  // This is deliberately separate from the open/close effect: putting it in\n  // that cleanup would cut off every delayed slide-out.\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    return () => {\n      if (dialog?.open) {\n        dialog.close();\n      }\n    };\n  }, [dialogRef]);\n}\n\n/**\n * Wait for the panel's transform transition, with a computed-duration\n * backstop. Mirrors BottomSheetPanel.waitForTransition: the native event is\n * authoritative, and the timeout only prevents a lost event from stranding an\n * open dialog.\n */\nfunction waitForDrawerExit(\n  element: HTMLDialogElement,\n  complete: () => void,\n): () => void {\n  let done = false;\n  let timer: ReturnType<typeof setTimeout> | null = null;\n\n  const finish = () => {\n    if (done) {\n      return;\n    }\n    done = true;\n    if (timer != null) {\n      clearTimeout(timer);\n    }\n    element.removeEventListener(\"transitionend\", handleTransitionEnd);\n    element.removeEventListener(\"transitioncancel\", handleTransitionEnd);\n    complete();\n  };\n\n  const handleTransitionEnd = (event: TransitionEvent) => {\n    if (event.target === element && event.propertyName === \"transform\") {\n      finish();\n    }\n  };\n\n  element.addEventListener(\"transitionend\", handleTransitionEnd);\n  element.addEventListener(\"transitioncancel\", handleTransitionEnd);\n\n  const transitionMs = readTransformTransitionMs(element);\n  timer = setTimeout(\n    finish,\n    (transitionMs ?? EXIT_FALLBACK_MS) + EXIT_BACKSTOP_BUFFER_MS,\n  );\n\n  return () => {\n    done = true;\n    if (timer != null) {\n      clearTimeout(timer);\n    }\n    element.removeEventListener(\"transitionend\", handleTransitionEnd);\n    element.removeEventListener(\"transitioncancel\", handleTransitionEnd);\n  };\n}\n\n/** Read the transform transition's duration + delay from computed CSS. */\nfunction readTransformTransitionMs(element: HTMLElement): number | null {\n  const computed = window.getComputedStyle(element);\n  const properties = computed.transitionProperty\n    .split(\",\")\n    .map((value) => value.trim());\n  const durations = parseTimes(computed.transitionDuration);\n  const delays = parseTimes(computed.transitionDelay);\n\n  if (\n    properties.length === 0 ||\n    durations.length === 0 ||\n    delays.length === 0 ||\n    durations.includes(null) ||\n    delays.includes(null)\n  ) {\n    return null;\n  }\n\n  return properties.reduce((longest, property, index) => {\n    if (property !== \"transform\" && property !== \"all\") {\n      return longest;\n    }\n    const duration = durations[index % durations.length];\n    const delay = delays[index % delays.length];\n    return Math.max(longest, (duration ?? 0) + (delay ?? 0));\n  }, 0);\n}\n\nfunction parseTimes(value: string): Array<number | null> {\n  return value.split(\",\").map((part) => {\n    const trimmed = part.trim();\n    const time = Number.parseFloat(trimmed);\n    if (!Number.isFinite(time)) {\n      return null;\n    }\n    if (trimmed.endsWith(\"ms\")) {\n      return time;\n    }\n    return trimmed.endsWith(\"s\") ? time * 1000 : null;\n  });\n}\n"],"mappings":";;;;AAuCA,IAAM,IAA0B,IAO1B,IAAmB;AAmBzB,SAAgB,EAAwB,EACtC,cACA,WACA,YACA,oBACuC;CAEvC,IAAM,IAAoB,EAA2B,IAAI;CAkDzD,AAhDA,QAAgB;EACd,IAAM,IAAS,EAAU;EACpB,OAIL;OAAI,GAAQ;IACV,AAAK,EAAO,SACV,EAAkB,UAAU,SAAS,eACjC,IACF,EAAO,UAAU,IAEjB,EAAO,KAAK,GAKd,EAAO,cAA2B,kBAAkB,CAAC,EAAE,MAAM;IAE/D;GACF;GAEK,MAAO,MAIZ,OAAO,EAAkB,SAAc;IAYrC,AAXA,EAAO,MAAM,GAKb,QAAgB;KACd,EAAc,EAAK;IACrB,CAAC,GAGD,EAAkB,SAAS,MAAM,GACjC,EAAkB,UAAU;GAC9B,CAAC;EAnBD;CAoBF,GAAG;EAAC;EAAW;EAAS;EAAQ;CAAa,CAAC,GAQ9C,QAAgB;EACd,IAAM,IAAS,EAAU;EACzB,aAAa;GACX,AAAI,GAAQ,QACV,EAAO,MAAM;EAEjB;CACF,GAAG,CAAC,CAAS,CAAC;AAChB;AAQA,SAAS,EACP,GACA,GACY;CACZ,IAAI,IAAO,IACP,IAA8C,MAE5C,UAAe;EACf,MAGJ,IAAO,IACH,KAAS,QACX,aAAa,CAAK,GAEpB,EAAQ,oBAAoB,iBAAiB,CAAmB,GAChE,EAAQ,oBAAoB,oBAAoB,CAAmB,GACnE,EAAS;CACX,GAEM,KAAuB,MAA2B;EACtD,AAAI,EAAM,WAAW,KAAW,EAAM,iBAAiB,eACrD,EAAO;CAEX;CAGA,AADA,EAAQ,iBAAiB,iBAAiB,CAAmB,GAC7D,EAAQ,iBAAiB,oBAAoB,CAAmB;CAEhE,IAAM,IAAe,EAA0B,CAAO;CAMtD,OALA,IAAQ,WACN,IACC,KAAgB,KAAoB,CACvC,SAEa;EAMX,AALA,IAAO,IACH,KAAS,QACX,aAAa,CAAK,GAEpB,EAAQ,oBAAoB,iBAAiB,CAAmB,GAChE,EAAQ,oBAAoB,oBAAoB,CAAmB;CACrE;AACF;AAGA,SAAS,EAA0B,GAAqC;CACtE,IAAM,IAAW,OAAO,iBAAiB,CAAO,GAC1C,IAAa,EAAS,mBACzB,MAAM,GAAG,CAAC,CACV,KAAK,MAAU,EAAM,KAAK,CAAC,GACxB,IAAY,EAAW,EAAS,kBAAkB,GAClD,IAAS,EAAW,EAAS,eAAe;CAYlD,OATE,EAAW,WAAW,KACtB,EAAU,WAAW,KACrB,EAAO,WAAW,KAClB,EAAU,SAAS,IAAI,KACvB,EAAO,SAAS,IAAI,IAEb,OAGF,EAAW,QAAQ,GAAS,GAAU,MAAU;EACrD,IAAI,MAAa,eAAe,MAAa,OAC3C,OAAO;EAET,IAAM,IAAW,EAAU,IAAQ,EAAU,SACvC,IAAQ,EAAO,IAAQ,EAAO;EACpC,OAAO,KAAK,IAAI,IAAU,KAAY,MAAM,KAAS,EAAE;CACzD,GAAG,CAAC;AACN;AAEA,SAAS,EAAW,GAAqC;CACvD,OAAO,EAAM,MAAM,GAAG,CAAC,CAAC,KAAK,MAAS;EACpC,IAAM,IAAU,EAAK,KAAK,GACpB,IAAO,OAAO,WAAW,CAAO;EAOtC,OANK,OAAO,SAAS,CAAI,IAGrB,EAAQ,SAAS,IAAI,IAChB,IAEF,EAAQ,SAAS,GAAG,IAAI,IAAO,MAAO,OALpC;CAMX,CAAC;AACH"}
+{"version":3,"file":"useDrawerDialogPresence.js","names":[],"sources":["../../../src/forks/Drawer/useDrawerDialogPresence.ts"],"sourcesContent":["// Copyright (c) Meta Platforms, Inc. and affiliates.\n//\n// Forked from @astryxdesign/lab 0.6.5-canary.8701623, src/Drawer/useDrawerDialogPresence.ts\n// (MIT; see NOTICE). Unchanged: forked with Drawer, which uses it.\n// Provenance and the drift guard: src/forks/provenance.json.\n\n\"use client\";\n\n/**\n * @file useDrawerDialogPresence.ts\n * @input Controlled open state, modal mode, dialog ref, and rendered-state setter\n * @output Coordinates native top-layer presence, exit timing, focus restoration, and unmount cleanup\n * @position Drawer-internal hook; consumed only by Drawer.tsx\n *\n * The drawer has two independent notions of presence:\n * - React's rendered state keeps the panel visible for its CSS exit.\n * - Native `showModal()` or `showPopover()` state keeps it in the browser top\n *   layer.\n *\n * Their close ordering is a browser-visible invariant: the panel must finish\n * its exit, then leave the active native host and hide in the same task. If the\n * hide lands a frame later, a transformed ancestor becomes the containing block\n * for the now-non-top-layer `position: fixed` panel and it paints back inside\n * the page for one frame.\n *\n * SYNC: When modified, update:\n * - /packages/lab/src/Drawer/Drawer.test.tsx\n * - /.github/scripts/modal-close-visibility.js\n */\n\nimport {\n  useEffect,\n  useRef,\n  type Dispatch,\n  type RefObject,\n  type SetStateAction,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\n\n/** Slack past the computed transition before the backstop gives up waiting. */\nconst EXIT_BACKSTOP_BUFFER_MS = 50;\n\n/**\n * Hold used when the transition duration cannot be read — an unresolved\n * `var()` outside a real browser. Picking a fixed number would otherwise make\n * an assumption about the consumer's theme.\n */\nconst EXIT_FALLBACK_MS = 250;\n\ntype UseDrawerDialogPresenceOptions = {\n  dialogRef: RefObject<HTMLDialogElement | null>;\n  isOpen: boolean;\n  isModal: boolean;\n  setIsRendered: Dispatch<SetStateAction<boolean>>;\n};\n\nfunction isPopoverOpen(dialog: HTMLDialogElement): boolean {\n  try {\n    return dialog.matches(\":popover-open\");\n  } catch {\n    // jsdom and pre-Popover browsers do not recognize :popover-open.\n    return false;\n  }\n}\n\nfunction isDrawerHostOpen(dialog: HTMLDialogElement, isModal: boolean): boolean {\n  return isModal ? dialog.open : isPopoverOpen(dialog) || dialog.open;\n}\n\nfunction showDrawerHost(dialog: HTMLDialogElement, isModal: boolean): void {\n  if (isModal) {\n    dialog.showModal();\n  } else if (typeof dialog.showPopover === \"function\") {\n    dialog.showPopover();\n  } else {\n    // Reduced fallback for browsers below the Popover API support floor.\n    dialog.show();\n  }\n}\n\nfunction dispatchDialogClose(dialog: HTMLDialogElement): void {\n  const EventConstructor = dialog.ownerDocument.defaultView?.Event ?? Event;\n  dialog.dispatchEvent(new EventConstructor(\"close\"));\n}\n\n/**\n * Leaves the active native host. Returns whether the caller owes a synthetic\n * `close` dispatch: `dialog.close()` used to power the non-modal path, and\n * consumers observe its native `close` event through refs/onClose. Popover\n * dismissal has no equivalent event, so that public DOM contract is preserved\n * explicitly — but by the caller, not here. Native `close` is queued as a\n * task, so a consumer's listener always ran after this hook's own focus\n * restore; the synthetic event must keep that ordering (and fire exactly once\n * per exit, including the unmount path).\n */\nfunction hideDrawerHost(dialog: HTMLDialogElement, isModal: boolean): boolean {\n  if (!isModal && typeof dialog.hidePopover === \"function\") {\n    dialog.hidePopover();\n    return true;\n  }\n  if (dialog.open) {\n    dialog.close();\n  }\n  return false;\n}\n\n/**\n * Coordinates the native dialog and React-rendered presence for Drawer.\n *\n * Opening captures the trigger, enters the modal-dialog or manual-popover host,\n * and honours the component's `data-autofocus` contract. Closing waits for the\n * actual transform transition (with a computed-duration backstop), then leaves\n * the native host and synchronously hides the panel before the browser can paint\n * it outside the top layer, restores focus to the captured trigger, and only\n * then dispatches the popover host's synthetic `close`. Unmount cleanup closes\n * a host left open by React Activity or a removed subtree.\n */\nexport function useDrawerDialogPresence({\n  dialogRef,\n  isOpen,\n  isModal,\n  setIsRendered,\n}: UseDrawerDialogPresenceOptions): void {\n  // Element focused when the drawer opened — restored on close.\n  const triggerElementRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) {\n      return;\n    }\n\n    if (isOpen) {\n      if (!isDrawerHostOpen(dialog, isModal)) {\n        triggerElementRef.current = document.activeElement as HTMLElement | null;\n        showDrawerHost(dialog, isModal);\n        // React's autoFocus calls .focus() during commit, before the native host\n        // is visible, so it silently fails — honour data-autofocus instead (same\n        // contract as Dialog).\n        dialog.querySelector<HTMLElement>(\"[data-autofocus]\")?.focus();\n      }\n      return;\n    }\n\n    if (!isDrawerHostOpen(dialog, isModal)) {\n      return;\n    }\n\n    return waitForDrawerExit(dialog, () => {\n      const owesCloseEvent = hideDrawerHost(dialog, isModal);\n      // flushSync, not a plain setState: React's default scheduling can land\n      // the commit after the next paint, and that one frame is exactly the\n      // bug — the panel paints outside the top layer. Both happen in this\n      // task, so the browser never gets to paint between them.\n      flushSync(() => {\n        setIsRendered(false);\n      });\n      // Return focus after leaving the native host: a modal dialog makes the\n      // rest of the document inert, so focusing earlier silently fails.\n      triggerElementRef.current?.focus();\n      triggerElementRef.current = null;\n      // The synthetic popover close fires after the focus restore above,\n      // mirroring the task-queued native event: a consumer close listener\n      // that retargets focus (master-detail row switching) gets the last word.\n      if (owesCloseEvent) {\n        dispatchDialogClose(dialog);\n      }\n    });\n  }, [dialogRef, isModal, isOpen, setIsRendered]);\n\n  // Leave the active native host on unmount. When the drawer is mounted inside\n  // an <Activity> that flips to mode=\"hidden\", React runs effect cleanups (with\n  // stale isOpen) instead of re-running the effect with isOpen=false. Leaving\n  // the host active would strand the top-layer surface and skip the next open.\n  // This is deliberately separate from the open/close effect: putting it in\n  // that cleanup would cut off every delayed slide-out.\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    return () => {\n      if (dialog && isDrawerHostOpen(dialog, isModal)) {\n        if (hideDrawerHost(dialog, isModal)) {\n          // No focus restore on this path — the drawer is being torn down, so\n          // the owed synthetic close fires immediately (still exactly once).\n          dispatchDialogClose(dialog);\n        }\n      }\n    };\n  }, [dialogRef, isModal]);\n}\n\n/**\n * Wait for the panel's transform transition, with a computed-duration\n * backstop. Mirrors BottomSheetPanel.waitForTransition: the native event is\n * authoritative, and the timeout only prevents a lost event from stranding an\n * open dialog.\n */\nfunction waitForDrawerExit(\n  element: HTMLDialogElement,\n  complete: () => void,\n): () => void {\n  let done = false;\n  let timer: ReturnType<typeof setTimeout> | null = null;\n\n  const finish = () => {\n    if (done) {\n      return;\n    }\n    done = true;\n    if (timer != null) {\n      clearTimeout(timer);\n    }\n    element.removeEventListener(\"transitionend\", handleTransitionEnd);\n    element.removeEventListener(\"transitioncancel\", handleTransitionEnd);\n    complete();\n  };\n\n  const handleTransitionEnd = (event: TransitionEvent) => {\n    if (event.target === element && event.propertyName === \"transform\") {\n      finish();\n    }\n  };\n\n  element.addEventListener(\"transitionend\", handleTransitionEnd);\n  element.addEventListener(\"transitioncancel\", handleTransitionEnd);\n\n  const transitionMs = readTransformTransitionMs(element);\n  timer = setTimeout(\n    finish,\n    (transitionMs ?? EXIT_FALLBACK_MS) + EXIT_BACKSTOP_BUFFER_MS,\n  );\n\n  return () => {\n    done = true;\n    if (timer != null) {\n      clearTimeout(timer);\n    }\n    element.removeEventListener(\"transitionend\", handleTransitionEnd);\n    element.removeEventListener(\"transitioncancel\", handleTransitionEnd);\n  };\n}\n\n/** Read the transform transition's duration + delay from computed CSS. */\nfunction readTransformTransitionMs(element: HTMLElement): number | null {\n  const computed = window.getComputedStyle(element);\n  const properties = computed.transitionProperty\n    .split(\",\")\n    .map((value) => value.trim());\n  const durations = parseTimes(computed.transitionDuration);\n  const delays = parseTimes(computed.transitionDelay);\n\n  if (\n    properties.length === 0 ||\n    durations.length === 0 ||\n    delays.length === 0 ||\n    durations.includes(null) ||\n    delays.includes(null)\n  ) {\n    return null;\n  }\n\n  return properties.reduce((longest, property, index) => {\n    if (property !== \"transform\" && property !== \"all\") {\n      return longest;\n    }\n    const duration = durations[index % durations.length];\n    const delay = delays[index % delays.length];\n    return Math.max(longest, (duration ?? 0) + (delay ?? 0));\n  }, 0);\n}\n\nfunction parseTimes(value: string): (number | null)[] {\n  return value.split(\",\").map((part) => {\n    const trimmed = part.trim();\n    const time = Number.parseFloat(trimmed);\n    if (!Number.isFinite(time)) {\n      return null;\n    }\n    if (trimmed.endsWith(\"ms\")) {\n      return time;\n    }\n    return trimmed.endsWith(\"s\") ? time * 1000 : null;\n  });\n}\n"],"mappings":"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"}

package/dist/forks/Tour/Tour.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tour.js","names":[],"sources":["../../../src/forks/Tour/Tour.tsx"],"sourcesContent":["// Copyright (c) Meta Platforms, Inc. and affiliates.\n//\n// Forked from @astryxdesign/lab 0.6.2-canary.c9fb1ad, src/Tour/Tour.tsx\n// (MIT; see NOTICE). Unchanged: forked with TourStep, whose context it provides.\n// Provenance and the drift guard: src/forks/provenance.json.\n\n\"use client\";\n\n/**\n * @file Tour.tsx\n * @input Uses React state/refs, TourContext\n * @output Exports Tour controller component and TourProps\n * @position Lab experiment (facebook/astryx#4239); controller consumed by index.ts\n *\n * Tour is the controller for a product-tour / NUX walkthrough. It renders no\n * visible chrome of its own — it owns the tour state (active step, advance /\n * retreat / complete / dismiss) and shares it with declaratively-nested\n * `<TourStep>` children through context. Steps register on mount, so the step\n * ORDER is taken from the children in document order (no step array to keep in\n * sync with the markup).\n *\n * The behavior (a controller plus spotlight feature steps, an `isActive`\n * switch, dismiss-with-reason, and step progress) is composed from Astryx\n * primitives. Each step anchors its callout via Popover and draws its own\n * highlight/backdrop (see TourStep) — the controller owns no chrome.\n *\n * SYNC: When modified, update these files to stay in sync:\n * - /packages/lab/src/Tour/TourStep.tsx\n * - /packages/lab/src/Tour/TourContext.ts\n * - /packages/lab/src/Tour/useTour.ts\n * - /packages/lab/src/Tour/Tour.doc.mjs (props table, features)\n * - /packages/lab/src/Tour/Tour.test.tsx (tests for new/changed behavior)\n * - /packages/lab/src/Tour/index.ts (exports if types change)\n */\n\nimport { useCallback, useEffect, useMemo, useState, type ReactNode } from \"react\";\nimport {\n  TourContext,\n  type TourDismissSource,\n  type TourContextValue,\n} from \"./TourContext\";\n\nexport interface TourProps {\n  /**\n   * Whether the tour is running. When false, nothing renders and step state\n   * resets — the tour restarts from the first step next time it becomes active.\n   * (Controlled: the consumer owns \"has this user seen the tour?\".)\n   */\n  isActive: boolean;\n  /**\n   * The tour's steps — `<TourStep>` elements. Step order is taken from their\n   * order here; only the active step renders its callout.\n   */\n  children?: ReactNode;\n  /**\n   * Called when the tour is dismissed, with the reason. Fires for every exit,\n   * including completing the last step (`source === 'complete'`). The consumer\n   * flips `isActive` to false in response, and can branch on the source to tell\n   * a successful finish apart from an early skip/backdrop/escape.\n   */\n  onDismiss: (source: TourDismissSource) => void;\n  /**\n   * Dim the page around the active step's target (a spotlight cutout — the\n   * target stays lit, everything else darkens). Use for modal-style steps that\n   * demand focus; leave off for a lightweight coachmark that only rings the\n   * target.\n   * @default false\n   */\n  hasBackdrop?: boolean;\n  /**\n   * Show the step count (\"2 of 5\") in each step.\n   * @default false\n   */\n  isStepCountShown?: boolean;\n}\n\n/**\n * Controller for a guided product tour. Renders no chrome; coordinates the\n * active step among its `<TourStep>` children.\n *\n * @example\n * ```\n * const [isActive, setIsActive] = useState(true);\n * const saveRef = useRef(null);\n * const shareRef = useRef(null);\n * <Tour isActive={isActive} hasBackdrop isStepCountShown onDismiss={() => setIsActive(false)}>\n *   <TourStep targetRef={saveRef} heading=\"Save your work\">\n *     Changes save automatically to the cloud.\n *   </TourStep>\n *   <TourStep targetRef={shareRef} heading=\"Share it\">\n *     Invite teammates from here.\n *   </TourStep>\n * </Tour>\n * ```\n */\nexport function Tour({\n  isActive,\n  children,\n  onDismiss,\n  hasBackdrop = false,\n  isStepCountShown = false,\n}: TourProps) {\n  // Steps register on mount; insertion order (document order) defines the\n  // sequence. A plain array keeps registration order deterministic.\n  const [stepIds, setStepIds] = useState<string[]>([]);\n  const [activeStepIndex, setActiveStepIndex] = useState(0);\n\n  const registerStep = useCallback((id: string) => {\n    setStepIds((prev) => (prev.includes(id) ? prev : [...prev, id]));\n    return () => {\n      setStepIds((prev) => prev.filter((stepId) => stepId !== id));\n    };\n  }, []);\n\n  // Reset to the first step whenever the tour is (re)started, so a dismissed\n  // tour begins from the top next time isActive flips back on.\n  useEffect(() => {\n    if (!isActive) {\n      setActiveStepIndex(0);\n    }\n  }, [isActive]);\n\n  const stepCount = stepIds.length;\n\n  const onNext = useCallback(() => {\n    // Runs from a click/imperative call (never during render), so branch on the\n    // current index directly rather than inside a state updater — calling\n    // onDismiss from within setState triggers a \"setState while rendering\"\n    // warning.\n    if (activeStepIndex < stepCount - 1) {\n      setActiveStepIndex(activeStepIndex + 1);\n      return;\n    }\n    // Past the last step → complete. onDismiss carries the reason so a\n    // consumer can branch on 'complete' vs an early exit.\n    onDismiss(\"complete\");\n  }, [activeStepIndex, stepCount, onDismiss]);\n\n  const onPrevious = useCallback(() => {\n    setActiveStepIndex((prev) => (prev > 0 ? prev - 1 : prev));\n  }, []);\n\n  const activeStepId = isActive ? (stepIds[activeStepIndex] ?? null) : null;\n\n  const contextValue = useMemo<TourContextValue>(\n    () => ({\n      registerStep,\n      activeStepId,\n      activeStepIndex,\n      stepCount,\n      isStepCountShown,\n      hasBackdrop,\n      onNext,\n      onPrevious,\n      onDismiss,\n    }),\n    [\n      registerStep,\n      activeStepId,\n      activeStepIndex,\n      stepCount,\n      isStepCountShown,\n      hasBackdrop,\n      onNext,\n      onPrevious,\n      onDismiss,\n    ],\n  );\n\n  return <TourContext.Provider value={contextValue}>{children}</TourContext.Provider>;\n}\n\nTour.displayName = \"Tour\";\n"],"mappings":";;;;;AA+FA,SAAgB,EAAK,EACnB,aACA,aACA,cACA,iBAAc,IACd,sBAAmB,MACP;CAGZ,IAAM,CAAC,GAAS,KAAc,EAAmB,CAAC,CAAC,GAC7C,CAAC,GAAiB,KAAsB,EAAS,CAAC,GAElD,IAAe,GAAa,OAChC,GAAY,MAAU,EAAK,SAAS,CAAE,IAAI,IAAO,CAAC,GAAG,GAAM,CAAE,CAAE,SAClD;EACX,GAAY,MAAS,EAAK,QAAQ,MAAW,MAAW,CAAE,CAAC;CAC7D,IACC,CAAC,CAAC;CAIL,QAAgB;EACd,AAAK,KACH,EAAmB,CAAC;CAExB,GAAG,CAAC,CAAQ,CAAC;CAEb,IAAM,IAAY,EAAQ,QAEpB,IAAS,QAAkB;EAK/B,IAAI,IAAkB,IAAY,GAAG;GACnC,EAAmB,IAAkB,CAAC;GACtC;EACF;EAGA,EAAU,UAAU;CACtB,GAAG;EAAC;EAAiB;EAAW;CAAS,CAAC,GAEpC,IAAa,QAAkB;EACnC,GAAoB,MAAU,IAAO,IAAI,IAAO,IAAI,CAAK;CAC3D,GAAG,CAAC,CAAC,GAEC,IAAe,IAAY,EAAQ,MAAoB,OAAQ,MAE/D,IAAe,SACZ;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OAAO,kBAAC,EAAY,UAAb;EAAsB,OAAO;EAAe;CAA+B,CAAA;AACpF;AAEA,EAAK,cAAc"}
+{"version":3,"file":"Tour.js","names":[],"sources":["../../../src/forks/Tour/Tour.tsx"],"sourcesContent":["// Copyright (c) Meta Platforms, Inc. and affiliates.\n//\n// Forked from @astryxdesign/lab 0.6.5-canary.8701623, src/Tour/Tour.tsx\n// (MIT; see NOTICE). Unchanged: forked with TourStep, whose context it provides.\n// Provenance and the drift guard: src/forks/provenance.json.\n\n\"use client\";\n\n/**\n * @file Tour.tsx\n * @input Uses React state/refs, TourContext\n * @output Exports Tour controller component and TourProps\n * @position Lab experiment (facebook/astryx#4239); controller consumed by index.ts\n *\n * Tour is the controller for a product-tour / NUX walkthrough. It renders no\n * visible chrome of its own — it owns the tour state (active step, advance /\n * retreat / complete / dismiss) and shares it with declaratively-nested\n * `<TourStep>` children through context. Steps register on mount, so the step\n * ORDER is taken from the children in document order (no step array to keep in\n * sync with the markup).\n *\n * The behavior (a controller plus spotlight feature steps, an `isActive`\n * switch, dismiss-with-reason, and step progress) is composed from Astryx\n * primitives. Each step anchors its callout via Popover and draws its own\n * highlight/backdrop (see TourStep) — the controller owns no chrome.\n *\n * SYNC: When modified, update these files to stay in sync:\n * - /packages/lab/src/Tour/TourStep.tsx\n * - /packages/lab/src/Tour/TourContext.ts\n * - /packages/lab/src/Tour/useTour.ts\n * - /packages/lab/src/Tour/Tour.doc.mjs (props table, features)\n * - /packages/lab/src/Tour/Tour.test.tsx (tests for new/changed behavior)\n * - /packages/lab/src/Tour/index.ts (exports if types change)\n */\n\nimport { useCallback, useEffect, useMemo, useState, type ReactNode } from \"react\";\nimport {\n  TourContext,\n  type TourDismissSource,\n  type TourContextValue,\n} from \"./TourContext\";\n\nexport interface TourProps {\n  /**\n   * Whether the tour is running. When false, nothing renders and step state\n   * resets — the tour restarts from the first step next time it becomes active.\n   * (Controlled: the consumer owns \"has this user seen the tour?\".)\n   */\n  isActive: boolean;\n  /**\n   * The tour's steps — `<TourStep>` elements. Step order is taken from their\n   * order here; only the active step renders its callout.\n   */\n  children?: ReactNode;\n  /**\n   * Called when the tour is dismissed, with the reason. Fires for every exit,\n   * including completing the last step (`source === 'complete'`). The consumer\n   * flips `isActive` to false in response, and can branch on the source to tell\n   * a successful finish apart from an early skip/backdrop/escape.\n   */\n  onDismiss: (source: TourDismissSource) => void;\n  /**\n   * Dim the page around the active step's target (a spotlight cutout — the\n   * target stays lit, everything else darkens). Use for modal-style steps that\n   * demand focus; leave off for a lightweight coachmark that only rings the\n   * target.\n   * @default false\n   */\n  hasBackdrop?: boolean;\n  /**\n   * Show the step count (\"2 of 5\") in each step.\n   * @default false\n   */\n  isStepCountShown?: boolean;\n}\n\n/**\n * Controller for a guided product tour. Renders no chrome; coordinates the\n * active step among its `<TourStep>` children.\n *\n * @example\n * ```\n * const [isActive, setIsActive] = useState(true);\n * const saveRef = useRef(null);\n * const shareRef = useRef(null);\n * <Tour isActive={isActive} hasBackdrop isStepCountShown onDismiss={() => setIsActive(false)}>\n *   <TourStep targetRef={saveRef} heading=\"Save your work\">\n *     Changes save automatically to the cloud.\n *   </TourStep>\n *   <TourStep targetRef={shareRef} heading=\"Share it\">\n *     Invite teammates from here.\n *   </TourStep>\n * </Tour>\n * ```\n */\nexport function Tour({\n  isActive,\n  children,\n  onDismiss,\n  hasBackdrop = false,\n  isStepCountShown = false,\n}: TourProps) {\n  // Steps register on mount; insertion order (document order) defines the\n  // sequence. A plain array keeps registration order deterministic.\n  const [stepIds, setStepIds] = useState<string[]>([]);\n  const [activeStepIndex, setActiveStepIndex] = useState(0);\n\n  const registerStep = useCallback((id: string) => {\n    setStepIds((prev) => (prev.includes(id) ? prev : [...prev, id]));\n    return () => {\n      setStepIds((prev) => prev.filter((stepId) => stepId !== id));\n    };\n  }, []);\n\n  // Reset to the first step whenever the tour is (re)started, so a dismissed\n  // tour begins from the top next time isActive flips back on.\n  useEffect(() => {\n    if (!isActive) {\n      setActiveStepIndex(0);\n    }\n  }, [isActive]);\n\n  const stepCount = stepIds.length;\n\n  const onNext = useCallback(() => {\n    // Runs from a click/imperative call (never during render), so branch on the\n    // current index directly rather than inside a state updater — calling\n    // onDismiss from within setState triggers a \"setState while rendering\"\n    // warning.\n    if (activeStepIndex < stepCount - 1) {\n      setActiveStepIndex(activeStepIndex + 1);\n      return;\n    }\n    // Past the last step → complete. onDismiss carries the reason so a\n    // consumer can branch on 'complete' vs an early exit.\n    onDismiss(\"complete\");\n  }, [activeStepIndex, stepCount, onDismiss]);\n\n  const onPrevious = useCallback(() => {\n    setActiveStepIndex((prev) => (prev > 0 ? prev - 1 : prev));\n  }, []);\n\n  const activeStepId = isActive ? (stepIds[activeStepIndex] ?? null) : null;\n\n  const contextValue = useMemo<TourContextValue>(\n    () => ({\n      registerStep,\n      activeStepId,\n      activeStepIndex,\n      stepCount,\n      isStepCountShown,\n      hasBackdrop,\n      onNext,\n      onPrevious,\n      onDismiss,\n    }),\n    [\n      registerStep,\n      activeStepId,\n      activeStepIndex,\n      stepCount,\n      isStepCountShown,\n      hasBackdrop,\n      onNext,\n      onPrevious,\n      onDismiss,\n    ],\n  );\n\n  return <TourContext.Provider value={contextValue}>{children}</TourContext.Provider>;\n}\n\nTour.displayName = \"Tour\";\n"],"mappings":";;;;;AA+FA,SAAgB,EAAK,EACnB,aACA,aACA,cACA,iBAAc,IACd,sBAAmB,MACP;CAGZ,IAAM,CAAC,GAAS,KAAc,EAAmB,CAAC,CAAC,GAC7C,CAAC,GAAiB,KAAsB,EAAS,CAAC,GAElD,IAAe,GAAa,OAChC,GAAY,MAAU,EAAK,SAAS,CAAE,IAAI,IAAO,CAAC,GAAG,GAAM,CAAE,CAAE,SAClD;EACX,GAAY,MAAS,EAAK,QAAQ,MAAW,MAAW,CAAE,CAAC;CAC7D,IACC,CAAC,CAAC;CAIL,QAAgB;EACd,AAAK,KACH,EAAmB,CAAC;CAExB,GAAG,CAAC,CAAQ,CAAC;CAEb,IAAM,IAAY,EAAQ,QAEpB,IAAS,QAAkB;EAK/B,IAAI,IAAkB,IAAY,GAAG;GACnC,EAAmB,IAAkB,CAAC;GACtC;EACF;EAGA,EAAU,UAAU;CACtB,GAAG;EAAC;EAAiB;EAAW;CAAS,CAAC,GAEpC,IAAa,QAAkB;EACnC,GAAoB,MAAU,IAAO,IAAI,IAAO,IAAI,CAAK;CAC3D,GAAG,CAAC,CAAC,GAEC,IAAe,IAAY,EAAQ,MAAoB,OAAQ,MAE/D,IAAe,SACZ;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OAAO,kBAAC,EAAY,UAAb;EAAsB,OAAO;EAAe;CAA+B,CAAA;AACpF;AAEA,EAAK,cAAc"}

package/dist/forks/Tour/TourContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TourContext.js","names":[],"sources":["../../../src/forks/Tour/TourContext.ts"],"sourcesContent":["// Copyright (c) Meta Platforms, Inc. and affiliates.\n//\n// Forked from @astryxdesign/lab 0.6.2-canary.c9fb1ad, src/Tour/TourContext.ts\n// (MIT; see NOTICE). Unchanged: forked with TourStep, which reads it.\n// Provenance and the drift guard: src/forks/provenance.json.\n\n\"use client\";\n\n/**\n * @file TourContext.ts\n * @input Uses React createContext\n * @output Exports TourContext, TourContextValue, TourDismissSource\n * @position Internal context; provided by Tour, consumed by TourStep + useTour\n *\n * SYNC: When modified, update these files to stay in sync:\n * - /packages/lab/src/Tour/Tour.tsx\n * - /packages/lab/src/Tour/TourStep.tsx\n * - /packages/lab/src/Tour/useTour.ts\n * - /packages/lab/src/Tour/Tour.doc.mjs\n */\n\nimport { createContext } from \"react\";\n\n/**\n * Why a tour was dismissed. Lets a consumer distinguish \"finished the whole\n * tour\" from the various early exits, so it can persist \"has seen this tour\"\n * appropriately.\n * - `backdrop`: clicked the dimmed background\n * - `escape`: pressed Escape at any step\n * - `close`: pressed the step's close (X) control\n * - `skip`: chose \"skip\"/\"maybe later\" on the first step\n * - `complete`: advanced past the final step\n */\nexport type TourDismissSource = \"backdrop\" | \"escape\" | \"close\" | \"skip\" | \"complete\";\n\n/**\n * Value shared from the Tour controller to its steps. Steps register\n * themselves on mount (so the controller learns the step order from the\n * children, in document order) and read whether they are the active step.\n */\nexport interface TourContextValue {\n  /** Register a step by its stable id; returns an unregister cleanup. */\n  registerStep: (id: string) => () => void;\n  /** The id of the step that is currently active, or null when none. */\n  activeStepId: string | null;\n  /** Zero-based index of the active step among registered steps. */\n  activeStepIndex: number;\n  /** Total number of registered steps. */\n  stepCount: number;\n  /** Whether the tour's step count should be shown in each step. */\n  isStepCountShown: boolean;\n  /** Whether a dimmed background is shown behind the active step. */\n  hasBackdrop: boolean;\n  /** Advance to the next step (or complete on the last step). */\n  onNext: () => void;\n  /** Return to the previous step (no-op on the first step). */\n  onPrevious: () => void;\n  /** Dismiss the tour with a reason. */\n  onDismiss: (source: TourDismissSource) => void;\n}\n\nexport const TourContext = createContext<TourContextValue | null>(null);\n"],"mappings":";;;AA6DA,IAAa,IAAc,EAAuC,IAAI"}
+{"version":3,"file":"TourContext.js","names":[],"sources":["../../../src/forks/Tour/TourContext.ts"],"sourcesContent":["// Copyright (c) Meta Platforms, Inc. and affiliates.\n//\n// Forked from @astryxdesign/lab 0.6.5-canary.8701623, src/Tour/TourContext.ts\n// (MIT; see NOTICE). Unchanged: forked with TourStep, which reads it.\n// Provenance and the drift guard: src/forks/provenance.json.\n\n\"use client\";\n\n/**\n * @file TourContext.ts\n * @input Uses React createContext\n * @output Exports TourContext, TourContextValue, TourDismissSource\n * @position Internal context; provided by Tour, consumed by TourStep + useTour\n *\n * SYNC: When modified, update these files to stay in sync:\n * - /packages/lab/src/Tour/Tour.tsx\n * - /packages/lab/src/Tour/TourStep.tsx\n * - /packages/lab/src/Tour/useTour.ts\n * - /packages/lab/src/Tour/Tour.doc.mjs\n */\n\nimport { createContext } from \"react\";\n\n/**\n * Why a tour was dismissed. Lets a consumer distinguish \"finished the whole\n * tour\" from the various early exits, so it can persist \"has seen this tour\"\n * appropriately.\n * - `backdrop`: clicked the dimmed background\n * - `escape`: pressed Escape at any step\n * - `close`: pressed the step's close (X) control\n * - `skip`: chose \"skip\"/\"maybe later\" on the first step\n * - `complete`: advanced past the final step\n */\nexport type TourDismissSource = \"backdrop\" | \"escape\" | \"close\" | \"skip\" | \"complete\";\n\n/**\n * Value shared from the Tour controller to its steps. Steps register\n * themselves on mount (so the controller learns the step order from the\n * children, in document order) and read whether they are the active step.\n */\nexport interface TourContextValue {\n  /** Register a step by its stable id; returns an unregister cleanup. */\n  registerStep: (id: string) => () => void;\n  /** The id of the step that is currently active, or null when none. */\n  activeStepId: string | null;\n  /** Zero-based index of the active step among registered steps. */\n  activeStepIndex: number;\n  /** Total number of registered steps. */\n  stepCount: number;\n  /** Whether the tour's step count should be shown in each step. */\n  isStepCountShown: boolean;\n  /** Whether a dimmed background is shown behind the active step. */\n  hasBackdrop: boolean;\n  /** Advance to the next step (or complete on the last step). */\n  onNext: () => void;\n  /** Return to the previous step (no-op on the first step). */\n  onPrevious: () => void;\n  /** Dismiss the tour with a reason. */\n  onDismiss: (source: TourDismissSource) => void;\n}\n\nexport const TourContext = createContext<TourContextValue | null>(null);\n"],"mappings":";;;AA6DA,IAAa,IAAc,EAAuC,IAAI"}