@persona/design-system 0.10.10 → 0.10.12

package/dist/lib/useCloseFocus.d.mts

@@ -0,0 +1,45 @@
+import { Ref, RefObject } from "react";
+
+//#region src/lib/useCloseFocus.d.ts
+type OutsideEvent = CustomEvent<{
+  originalEvent: PointerEvent | FocusEvent;
+}>;
+interface CloseFocusOptions {
+  /** Runs once, when the close starts. `preventDefault` keeps focus where it is. */
+  onCloseAutoFocus?: (event: Event) => void;
+  /** Runs when the content reopens before its exit ends; Radix doesn't run it again then. */
+  onOpenAutoFocus?: (event: Event) => void;
+  onInteractOutside?: (event: OutsideEvent) => void;
+  onEscapeKeyDown?: (event: KeyboardEvent) => void;
+  /**
+   * Modal content closes at once (it has no exit), so Radix's own focus handling is left alone:
+   * until unmount Radix hides the rest of the page from assistive technology.
+   */
+  modal?: boolean;
+  /** Where focus returns. Falls back to the element whose `aria-controls` names the content. */
+  triggerRef?: RefObject<HTMLElement | null>;
+  /** What takes focus on a reopen mid-exit: the first tabbable element, or the content itself. */
+  reopenFocus?: 'first-tabbable' | 'content';
+}
+interface CloseFocus {
+  ref: (node: HTMLElement | null) => void;
+  onCloseAutoFocus?: (event: Event) => void;
+  onInteractOutside?: (event: OutsideEvent) => void;
+  onEscapeKeyDown?: (event: KeyboardEvent) => void;
+  'data-modal'?: '';
+}
+/**
+ * Returns focus when a Radix popover or menu starts to close, instead of when its exit animation
+ * ends and it unmounts, and stops the closing content taking input. Spread the result onto the
+ * Radix `Content`, after the consumer's props.
+ *
+ * At close start it calls `onCloseAutoFocus` and, unless that's prevented or the close came from
+ * an interaction outside, focuses the trigger, as Radix would. Radix's own call at unmount is then
+ * prevented. Content that unmounts at once (no exit running) is left to Radix.
+ */
+declare function useCloseFocus(options: CloseFocusOptions): CloseFocus;
+/** Sets every ref to the node. Memoize the result, or React re-attaches it on every render. */
+declare function mergeRefs<T>(...refs: (Ref<T> | undefined)[]): (node: T | null) => void;
+//#endregion
+export { CloseFocus, CloseFocusOptions, mergeRefs, useCloseFocus };
+//# sourceMappingURL=useCloseFocus.d.mts.map

package/dist/lib/useCloseFocus.mjs

@@ -0,0 +1,123 @@
+import { useCallback, useRef } from "react";
+//#region src/lib/useCloseFocus.ts
+const TABBABLE = "button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+/**
+* Returns focus when a Radix popover or menu starts to close, instead of when its exit animation
+* ends and it unmounts, and stops the closing content taking input. Spread the result onto the
+* Radix `Content`, after the consumer's props.
+*
+* At close start it calls `onCloseAutoFocus` and, unless that's prevented or the close came from
+* an interaction outside, focuses the trigger, as Radix would. Radix's own call at unmount is then
+* prevented. Content that unmounts at once (no exit running) is left to Radix.
+*/
+function useCloseFocus(options) {
+	const latest = useRef(options);
+	latest.current = options;
+	const state = useRef({
+		open: true,
+		interactedOutside: false,
+		trigger: null,
+		handled: /* @__PURE__ */ new WeakSet(),
+		observer: null,
+		node: null
+	});
+	const findTrigger = (node) => {
+		return (node.id ? node.ownerDocument.querySelector(`[aria-controls="${node.id.replace(/["\\]/g, "\\$&")}"]`) : null) ?? latest.current.triggerRef?.current ?? state.current.trigger;
+	};
+	const opened = (node) => {
+		const s = state.current;
+		s.open = true;
+		s.interactedOutside = false;
+		s.trigger = findTrigger(node);
+		if (!s.handled.has(node)) return;
+		s.handled.delete(node);
+		node.removeAttribute("inert");
+		const event = new CustomEvent("focusScope.autoFocusOnMount", { cancelable: true });
+		latest.current.onOpenAutoFocus?.(event);
+		if (!event.defaultPrevented) (latest.current.reopenFocus === "content" ? node : node.querySelector(TABBABLE) ?? node).focus({ preventScroll: true });
+	};
+	const closed = (node) => {
+		const s = state.current;
+		s.open = false;
+		if (!node.isConnected) return;
+		s.handled.add(node);
+		const active = node.ownerDocument.activeElement;
+		const focusInside = active == null || active === node.ownerDocument.body || node.contains(active) || !!active.closest("[data-radix-popper-content-wrapper] [data-state=\"closed\"]");
+		const interactedOutside = s.interactedOutside;
+		const restore = () => {
+			if (s.open) return;
+			const event = new CustomEvent("focusScope.autoFocusOnUnmount", { cancelable: true });
+			latest.current.onCloseAutoFocus?.(event);
+			if (!event.defaultPrevented && focusInside && !interactedOutside) findTrigger(node)?.focus({ preventScroll: true });
+		};
+		if (node.ownerDocument.defaultView?.event?.type === "keydown") setTimeout(restore, 0);
+		else restore();
+		node.setAttribute("inert", "");
+	};
+	const ref = useCallback((node) => {
+		const s = state.current;
+		if (!node || node === s.node) return;
+		s.observer?.disconnect();
+		s.observer = null;
+		s.node = node;
+		if (latest.current.modal) return;
+		s.open = node.getAttribute("data-state") !== "closed";
+		s.interactedOutside = false;
+		const active = node.ownerDocument.activeElement;
+		s.trigger = active && active !== node.ownerDocument.body ? active : null;
+		s.trigger = findTrigger(node);
+		s.observer = new MutationObserver(() => {
+			const isOpen = node.getAttribute("data-state") !== "closed";
+			if (isOpen && !s.open) opened(node);
+			else if (!isOpen && s.open) closed(node);
+		});
+		s.observer.observe(node, {
+			attributes: true,
+			attributeFilter: ["data-state"]
+		});
+	}, []);
+	if (options.modal) return {
+		ref,
+		onCloseAutoFocus: options.onCloseAutoFocus,
+		onInteractOutside: options.onInteractOutside,
+		onEscapeKeyDown: options.onEscapeKeyDown,
+		"data-modal": ""
+	};
+	return {
+		ref,
+		onCloseAutoFocus: (event) => {
+			if (event.currentTarget && state.current.handled.has(event.currentTarget)) {
+				state.current.handled.delete(event.currentTarget);
+				event.preventDefault();
+				return;
+			}
+			latest.current.onCloseAutoFocus?.(event);
+		},
+		onInteractOutside: (event) => {
+			if (!state.current.open) {
+				event.preventDefault();
+				return;
+			}
+			latest.current.onInteractOutside?.(event);
+			if (!event.defaultPrevented) state.current.interactedOutside = true;
+		},
+		onEscapeKeyDown: (event) => {
+			if (!state.current.open) {
+				event.preventDefault();
+				return;
+			}
+			latest.current.onEscapeKeyDown?.(event);
+		}
+	};
+}
+/** Sets every ref to the node. Memoize the result, or React re-attaches it on every render. */
+function mergeRefs(...refs) {
+	return (node) => {
+		for (const ref of refs) if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+}
+//#endregion
+export { mergeRefs, useCloseFocus };
+
+//# sourceMappingURL=useCloseFocus.mjs.map

package/dist/lib/useCloseFocus.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCloseFocus.mjs","names":[],"sources":["../../src/lib/useCloseFocus.ts"],"sourcesContent":["import { type Ref, type RefObject, useCallback, useRef } from 'react';\n\ntype OutsideEvent = CustomEvent<{ originalEvent: PointerEvent | FocusEvent }>;\n\nexport interface CloseFocusOptions {\n  /** Runs once, when the close starts. `preventDefault` keeps focus where it is. */\n  onCloseAutoFocus?: (event: Event) => void;\n  /** Runs when the content reopens before its exit ends; Radix doesn't run it again then. */\n  onOpenAutoFocus?: (event: Event) => void;\n  onInteractOutside?: (event: OutsideEvent) => void;\n  onEscapeKeyDown?: (event: KeyboardEvent) => void;\n  /**\n   * Modal content closes at once (it has no exit), so Radix's own focus handling is left alone:\n   * until unmount Radix hides the rest of the page from assistive technology.\n   */\n  modal?: boolean;\n  /** Where focus returns. Falls back to the element whose `aria-controls` names the content. */\n  triggerRef?: RefObject<HTMLElement | null>;\n  /** What takes focus on a reopen mid-exit: the first tabbable element, or the content itself. */\n  reopenFocus?: 'first-tabbable' | 'content';\n}\n\nexport interface CloseFocus {\n  ref: (node: HTMLElement | null) => void;\n  onCloseAutoFocus?: (event: Event) => void;\n  onInteractOutside?: (event: OutsideEvent) => void;\n  onEscapeKeyDown?: (event: KeyboardEvent) => void;\n  'data-modal'?: '';\n}\n\nconst TABBABLE =\n  'button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Returns focus when a Radix popover or menu starts to close, instead of when its exit animation\n * ends and it unmounts, and stops the closing content taking input. Spread the result onto the\n * Radix `Content`, after the consumer's props.\n *\n * At close start it calls `onCloseAutoFocus` and, unless that's prevented or the close came from\n * an interaction outside, focuses the trigger, as Radix would. Radix's own call at unmount is then\n * prevented. Content that unmounts at once (no exit running) is left to Radix.\n */\nexport function useCloseFocus(options: CloseFocusOptions): CloseFocus {\n  const latest = useRef(options);\n  latest.current = options;\n  const state = useRef({\n    open: true,\n    interactedOutside: false,\n    trigger: null as HTMLElement | null,\n    handled: new WeakSet<EventTarget>(),\n    observer: null as MutationObserver | null,\n    node: null as HTMLElement | null,\n  });\n\n  const findTrigger = (node: HTMLElement): HTMLElement | null => {\n    // The `aria-controls` match wins: a raw Root nested in a PDS Popover inherits its triggerRef.\n    const controlled = node.id\n      ? node.ownerDocument.querySelector<HTMLElement>(\n          `[aria-controls=\"${node.id.replace(/[\"\\\\]/g, '\\\\$&')}\"]`,\n        )\n      : null;\n    return controlled ?? latest.current.triggerRef?.current ?? state.current.trigger;\n  };\n\n  const opened = (node: HTMLElement) => {\n    const s = state.current;\n    s.open = true;\n    s.interactedOutside = false;\n    s.trigger = findTrigger(node);\n    if (!s.handled.has(node)) {\n      return;\n    }\n    s.handled.delete(node);\n    node.removeAttribute('inert');\n    const event = new CustomEvent('focusScope.autoFocusOnMount', { cancelable: true });\n    latest.current.onOpenAutoFocus?.(event);\n    if (!event.defaultPrevented) {\n      const target =\n        latest.current.reopenFocus === 'content'\n          ? node\n          : (node.querySelector<HTMLElement>(TABBABLE) ?? node);\n      target.focus({ preventScroll: true });\n    }\n  };\n\n  const closed = (node: HTMLElement) => {\n    const s = state.current;\n    s.open = false;\n    if (!node.isConnected) {\n      return;\n    }\n    s.handled.add(node);\n    const active = node.ownerDocument.activeElement;\n    // A portaled child layer closing in the same commit (a menu item that closes its Popover)\n    // holds focus outside `node`, and its own trigger is about to go inert with `node`.\n    const focusInside =\n      active == null ||\n      active === node.ownerDocument.body ||\n      node.contains(active) ||\n      !!active.closest('[data-radix-popper-content-wrapper] [data-state=\"closed\"]');\n    const interactedOutside = s.interactedOutside;\n    const restore = () => {\n      if (s.open) {\n        return;\n      }\n      const event = new CustomEvent('focusScope.autoFocusOnUnmount', { cancelable: true });\n      latest.current.onCloseAutoFocus?.(event);\n      if (!event.defaultPrevented && focusInside && !interactedOutside) {\n        findTrigger(node)?.focus({ preventScroll: true });\n      }\n    };\n    // Focus moved during a keydown takes that key's keypress, so an Enter that closes from a\n    // field would click the trigger and reopen it. Radix restores after a task for the same reason.\n    if (node.ownerDocument.defaultView?.event?.type === 'keydown') {\n      setTimeout(restore, 0);\n    } else {\n      restore();\n    }\n    node.setAttribute('inert', '');\n  };\n\n  const ref = useCallback((node: HTMLElement | null) => {\n    const s = state.current;\n    // Radix composes its content refs afresh on every render, so React detaches (null) and\n    // reattaches the same node each time; only a new node starts a new open.\n    if (!node || node === s.node) {\n      return;\n    }\n    s.observer?.disconnect();\n    s.observer = null;\n    s.node = node;\n    if (latest.current.modal) {\n      return;\n    }\n    s.open = node.getAttribute('data-state') !== 'closed';\n    s.interactedOutside = false;\n    const active = node.ownerDocument.activeElement;\n    s.trigger = active && active !== node.ownerDocument.body ? (active as HTMLElement) : null;\n    s.trigger = findTrigger(node);\n    s.observer = new MutationObserver(() => {\n      const isOpen = node.getAttribute('data-state') !== 'closed';\n      if (isOpen && !s.open) {\n        opened(node);\n      } else if (!isOpen && s.open) {\n        closed(node);\n      }\n    });\n    s.observer.observe(node, { attributes: true, attributeFilter: ['data-state'] });\n  }, []);\n\n  if (options.modal) {\n    return {\n      ref,\n      onCloseAutoFocus: options.onCloseAutoFocus,\n      onInteractOutside: options.onInteractOutside,\n      onEscapeKeyDown: options.onEscapeKeyDown,\n      'data-modal': '',\n    };\n  }\n\n  return {\n    ref,\n    onCloseAutoFocus: (event) => {\n      if (event.currentTarget && state.current.handled.has(event.currentTarget)) {\n        state.current.handled.delete(event.currentTarget);\n        event.preventDefault();\n        return;\n      }\n      latest.current.onCloseAutoFocus?.(event);\n    },\n    onInteractOutside: (event) => {\n      if (!state.current.open) {\n        event.preventDefault();\n        return;\n      }\n      latest.current.onInteractOutside?.(event);\n      if (!event.defaultPrevented) {\n        state.current.interactedOutside = true;\n      }\n    },\n    onEscapeKeyDown: (event) => {\n      if (!state.current.open) {\n        event.preventDefault();\n        return;\n      }\n      latest.current.onEscapeKeyDown?.(event);\n    },\n  };\n}\n\n/** Sets every ref to the node. Memoize the result, or React re-attaches it on every render. */\nexport function mergeRefs<T>(...refs: (Ref<T> | undefined)[]): (node: T | null) => void {\n  return (node) => {\n    for (const ref of refs) {\n      if (typeof ref === 'function') {\n        ref(node);\n      } else if (ref) {\n        (ref as { current: T | null }).current = node;\n      }\n    }\n  };\n}\n"],"mappings":"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"}

package/dist/lib/useModalInsetRight.d.mts

@@ -1,6 +1,7 @@
 //#region src/lib/useModalInsetRight.d.ts
-declare const SIDEBAR_OPEN_TRANSITION_MS = 425;
-declare const SIDEBAR_CLOSE_TRANSITION_MS = 200;
+declare const SIDEBAR_OPEN_TRANSITION_MS: number;
+declare const SIDEBAR_CLOSE_TRANSITION_MS: number;
+declare const SIDEBAR_TRANSITION_EASING = "ease-out";
 type PanelInsetState = 'closed' | 'opening' | 'open' | 'closing';
 interface ModalInsetRight {
   /** Animated inset value — starts at 0px on panel open so CSS transition fires */
@@ -17,5 +18,5 @@ interface ModalInsetRight {
  */
 declare const useModalInsetRight: () => ModalInsetRight;
 //#endregion
-export { ModalInsetRight, PanelInsetState, SIDEBAR_CLOSE_TRANSITION_MS, SIDEBAR_OPEN_TRANSITION_MS, useModalInsetRight as default };
+export { ModalInsetRight, PanelInsetState, SIDEBAR_CLOSE_TRANSITION_MS, SIDEBAR_OPEN_TRANSITION_MS, SIDEBAR_TRANSITION_EASING, useModalInsetRight as default };
 //# sourceMappingURL=useModalInsetRight.d.mts.map

package/dist/lib/useModalInsetRight.mjs

@@ -1,8 +1,10 @@
+import "../variables/transitions.mjs";
 import { useEffect, useRef, useState } from "react";
 //#region src/lib/useModalInsetRight.ts
 const CSS_VAR = "--modal-inset-right";
-const SIDEBAR_OPEN_TRANSITION_MS = 425;
-const SIDEBAR_CLOSE_TRANSITION_MS = 200;
+const SIDEBAR_OPEN_TRANSITION_MS = parseInt("400ms", 10);
+const SIDEBAR_CLOSE_TRANSITION_MS = parseInt("300ms", 10);
+const SIDEBAR_TRANSITION_EASING = "ease-out";
 const getModalInsetRight = () => getComputedStyle(document.documentElement).getPropertyValue(CSS_VAR).trim() || "0px";
 const prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 /**
@@ -33,7 +35,7 @@ const useModalInsetRight = () => {
 				setInsetRight("0px");
 				setPanelState("opening");
 				rafRef.current = requestAnimationFrame(() => setInsetRight(next));
-				transitionTimerRef.current = setTimeout(() => setPanelState("open"), 425);
+				transitionTimerRef.current = setTimeout(() => setPanelState("open"), SIDEBAR_OPEN_TRANSITION_MS);
 			}
 			else if (prev !== "0px" && next === "0px") if (prefersReducedMotion()) {
 				setInsetRight("0px");
@@ -44,7 +46,7 @@ const useModalInsetRight = () => {
 				setInsetRight(prev);
 				setPanelState("closing");
 				rafRef.current = requestAnimationFrame(() => setInsetRight("0px"));
-				transitionTimerRef.current = setTimeout(() => setPanelState("closed"), 200);
+				transitionTimerRef.current = setTimeout(() => setPanelState("closed"), SIDEBAR_CLOSE_TRANSITION_MS);
 			}
 			else setInsetRight(next);
 		});
@@ -64,6 +66,6 @@ const useModalInsetRight = () => {
 	};
 };
 //#endregion
-export { SIDEBAR_CLOSE_TRANSITION_MS, SIDEBAR_OPEN_TRANSITION_MS, useModalInsetRight as default };
+export { SIDEBAR_CLOSE_TRANSITION_MS, SIDEBAR_OPEN_TRANSITION_MS, SIDEBAR_TRANSITION_EASING, useModalInsetRight as default };
 
 //# sourceMappingURL=useModalInsetRight.mjs.map

package/dist/lib/useModalInsetRight.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useModalInsetRight.mjs","names":[],"sources":["../../src/lib/useModalInsetRight.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nconst CSS_VAR = '--modal-inset-right';\n\n// Match AgentsPanel sidebar transition durations\nexport const SIDEBAR_OPEN_TRANSITION_MS = 425;\nexport const SIDEBAR_CLOSE_TRANSITION_MS = 200;\n\nconst getModalInsetRight = () =>\n  getComputedStyle(document.documentElement).getPropertyValue(CSS_VAR).trim() || '0px';\n\nconst prefersReducedMotion = () =>\n  typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nexport type PanelInsetState = 'closed' | 'opening' | 'open' | 'closing';\n\nexport interface ModalInsetRight {\n  /** Animated inset value — starts at 0px on panel open so CSS transition fires */\n  insetRight: string;\n  panelState: PanelInsetState;\n}\n\n/**\n * Returns the current value of --modal-inset-right from :root, reactively updating\n * as the agents side panel animates open/closed or is resized. Also tracks whether\n * the panel is opening, open, closing, or closed.\n *\n * panelState stays 'opening'/'closing' for the full transition duration so that\n * CSS transitions on consumers have time to animate.\n */\nconst useModalInsetRight = (): ModalInsetRight => {\n  const [insetRight, setInsetRight] = useState(getModalInsetRight);\n  const [panelState, setPanelState] = useState<PanelInsetState>(() =>\n    getModalInsetRight() !== '0px' ? 'open' : 'closed',\n  );\n  const prevInsetRight = useRef(getModalInsetRight());\n  const transitionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const rafRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    const observer = new MutationObserver(() => {\n      const prev = prevInsetRight.current;\n      const next = getModalInsetRight();\n      prevInsetRight.current = next;\n\n      if (prev === '0px' && next !== '0px') {\n        if (prefersReducedMotion()) {\n          setInsetRight(next);\n          setPanelState('open');\n        } else {\n          if (rafRef.current) {\n            cancelAnimationFrame(rafRef.current);\n          }\n          if (transitionTimerRef.current) {\n            clearTimeout(transitionTimerRef.current);\n          }\n          setInsetRight('0px');\n          setPanelState('opening');\n          rafRef.current = requestAnimationFrame(() => setInsetRight(next));\n          transitionTimerRef.current = setTimeout(\n            () => setPanelState('open'),\n            SIDEBAR_OPEN_TRANSITION_MS,\n          );\n        }\n      } else if (prev !== '0px' && next === '0px') {\n        if (prefersReducedMotion()) {\n          setInsetRight('0px');\n          setPanelState('closed');\n        } else {\n          if (rafRef.current) {\n            cancelAnimationFrame(rafRef.current);\n          }\n          if (transitionTimerRef.current) {\n            clearTimeout(transitionTimerRef.current);\n          }\n          setInsetRight(prev);\n          setPanelState('closing');\n          rafRef.current = requestAnimationFrame(() => setInsetRight('0px'));\n          transitionTimerRef.current = setTimeout(\n            () => setPanelState('closed'),\n            SIDEBAR_CLOSE_TRANSITION_MS,\n          );\n        }\n      } else {\n        setInsetRight(next);\n      }\n    });\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['style'],\n    });\n\n    return () => {\n      observer.disconnect();\n      if (transitionTimerRef.current) {\n        clearTimeout(transitionTimerRef.current);\n      }\n      if (rafRef.current) {\n        cancelAnimationFrame(rafRef.current);\n      }\n    };\n  }, []);\n\n  return { insetRight, panelState };\n};\n\nexport default useModalInsetRight;\n"],"mappings":";;AAEA,MAAM,UAAU;AAGhB,MAAa,6BAA6B;AAC1C,MAAa,8BAA8B;AAE3C,MAAM,2BACJ,iBAAiB,SAAS,gBAAgB,CAAC,iBAAiB,QAAQ,CAAC,MAAM,IAAI;AAEjF,MAAM,6BACJ,OAAO,WAAW,eAAe,OAAO,WAAW,mCAAmC,CAAC;;;;;;;;;AAkBzF,MAAM,2BAA4C;CAChD,MAAM,CAAC,YAAY,iBAAiB,SAAS,mBAAmB;CAChE,MAAM,CAAC,YAAY,iBAAiB,eAClC,oBAAoB,KAAK,QAAQ,SAAS,SAC3C;CACD,MAAM,iBAAiB,OAAO,oBAAoB,CAAC;CACnD,MAAM,qBAAqB,OAA6C,KAAK;CAC7E,MAAM,SAAS,OAAsB,KAAK;AAE1C,iBAAgB;EACd,MAAM,WAAW,IAAI,uBAAuB;GAC1C,MAAM,OAAO,eAAe;GAC5B,MAAM,OAAO,oBAAoB;AACjC,kBAAe,UAAU;AAEzB,OAAI,SAAS,SAAS,SAAS,MAC7B,KAAI,sBAAsB,EAAE;AAC1B,kBAAc,KAAK;AACnB,kBAAc,OAAO;UAChB;AACL,QAAI,OAAO,QACT,sBAAqB,OAAO,QAAQ;AAEtC,QAAI,mBAAmB,QACrB,cAAa,mBAAmB,QAAQ;AAE1C,kBAAc,MAAM;AACpB,kBAAc,UAAU;AACxB,WAAO,UAAU,4BAA4B,cAAc,KAAK,CAAC;AACjE,uBAAmB,UAAU,iBACrB,cAAc,OAAO,EAAA,IAE5B;;YAEM,SAAS,SAAS,SAAS,MACpC,KAAI,sBAAsB,EAAE;AAC1B,kBAAc,MAAM;AACpB,kBAAc,SAAS;UAClB;AACL,QAAI,OAAO,QACT,sBAAqB,OAAO,QAAQ;AAEtC,QAAI,mBAAmB,QACrB,cAAa,mBAAmB,QAAQ;AAE1C,kBAAc,KAAK;AACnB,kBAAc,UAAU;AACxB,WAAO,UAAU,4BAA4B,cAAc,MAAM,CAAC;AAClE,uBAAmB,UAAU,iBACrB,cAAc,SAAS,EAAA,IAE9B;;OAGH,eAAc,KAAK;IAErB;AAEF,WAAS,QAAQ,SAAS,iBAAiB;GACzC,YAAY;GACZ,iBAAiB,CAAC,QAAQ;GAC3B,CAAC;AAEF,eAAa;AACX,YAAS,YAAY;AACrB,OAAI,mBAAmB,QACrB,cAAa,mBAAmB,QAAQ;AAE1C,OAAI,OAAO,QACT,sBAAqB,OAAO,QAAQ;;IAGvC,EAAE,CAAC;AAEN,QAAO;EAAE;EAAY;EAAY"}
+{"version":3,"file":"useModalInsetRight.mjs","names":[],"sources":["../../src/lib/useModalInsetRight.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { TransitionDuration } from '#src/variables/transitions';\n\nconst CSS_VAR = '--modal-inset-right';\n\n// Must equal the agents panel's open and close durations in persona-web, or the modal's edge and the panel's drift apart.\nexport const SIDEBAR_OPEN_TRANSITION_MS = parseInt(TransitionDuration.Medium, 10);\nexport const SIDEBAR_CLOSE_TRANSITION_MS = parseInt(TransitionDuration.MediumFast, 10);\n// The agents panel slides on framer-motion's `easeOut`; switch with it to `TransitionEasing.Enter`/`Exit`.\nexport const SIDEBAR_TRANSITION_EASING = 'ease-out';\n\nconst getModalInsetRight = () =>\n  getComputedStyle(document.documentElement).getPropertyValue(CSS_VAR).trim() || '0px';\n\nconst prefersReducedMotion = () =>\n  typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nexport type PanelInsetState = 'closed' | 'opening' | 'open' | 'closing';\n\nexport interface ModalInsetRight {\n  /** Animated inset value — starts at 0px on panel open so CSS transition fires */\n  insetRight: string;\n  panelState: PanelInsetState;\n}\n\n/**\n * Returns the current value of --modal-inset-right from :root, reactively updating\n * as the agents side panel animates open/closed or is resized. Also tracks whether\n * the panel is opening, open, closing, or closed.\n *\n * panelState stays 'opening'/'closing' for the full transition duration so that\n * CSS transitions on consumers have time to animate.\n */\nconst useModalInsetRight = (): ModalInsetRight => {\n  const [insetRight, setInsetRight] = useState(getModalInsetRight);\n  const [panelState, setPanelState] = useState<PanelInsetState>(() =>\n    getModalInsetRight() !== '0px' ? 'open' : 'closed',\n  );\n  const prevInsetRight = useRef(getModalInsetRight());\n  const transitionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const rafRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    const observer = new MutationObserver(() => {\n      const prev = prevInsetRight.current;\n      const next = getModalInsetRight();\n      prevInsetRight.current = next;\n\n      if (prev === '0px' && next !== '0px') {\n        if (prefersReducedMotion()) {\n          setInsetRight(next);\n          setPanelState('open');\n        } else {\n          if (rafRef.current) {\n            cancelAnimationFrame(rafRef.current);\n          }\n          if (transitionTimerRef.current) {\n            clearTimeout(transitionTimerRef.current);\n          }\n          setInsetRight('0px');\n          setPanelState('opening');\n          rafRef.current = requestAnimationFrame(() => setInsetRight(next));\n          transitionTimerRef.current = setTimeout(\n            () => setPanelState('open'),\n            SIDEBAR_OPEN_TRANSITION_MS,\n          );\n        }\n      } else if (prev !== '0px' && next === '0px') {\n        if (prefersReducedMotion()) {\n          setInsetRight('0px');\n          setPanelState('closed');\n        } else {\n          if (rafRef.current) {\n            cancelAnimationFrame(rafRef.current);\n          }\n          if (transitionTimerRef.current) {\n            clearTimeout(transitionTimerRef.current);\n          }\n          setInsetRight(prev);\n          setPanelState('closing');\n          rafRef.current = requestAnimationFrame(() => setInsetRight('0px'));\n          transitionTimerRef.current = setTimeout(\n            () => setPanelState('closed'),\n            SIDEBAR_CLOSE_TRANSITION_MS,\n          );\n        }\n      } else {\n        setInsetRight(next);\n      }\n    });\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['style'],\n    });\n\n    return () => {\n      observer.disconnect();\n      if (transitionTimerRef.current) {\n        clearTimeout(transitionTimerRef.current);\n      }\n      if (rafRef.current) {\n        cancelAnimationFrame(rafRef.current);\n      }\n    };\n  }, []);\n\n  return { insetRight, panelState };\n};\n\nexport default useModalInsetRight;\n"],"mappings":";;;AAIA,MAAM,UAAU;AAGhB,MAAa,6BAA6B,SAAA,SAAoC,GAAG;AACjF,MAAa,8BAA8B,SAAA,SAAwC,GAAG;AAEtF,MAAa,4BAA4B;AAEzC,MAAM,2BACJ,iBAAiB,SAAS,gBAAgB,CAAC,iBAAiB,QAAQ,CAAC,MAAM,IAAI;AAEjF,MAAM,6BACJ,OAAO,WAAW,eAAe,OAAO,WAAW,mCAAmC,CAAC;;;;;;;;;AAkBzF,MAAM,2BAA4C;CAChD,MAAM,CAAC,YAAY,iBAAiB,SAAS,mBAAmB;CAChE,MAAM,CAAC,YAAY,iBAAiB,eAClC,oBAAoB,KAAK,QAAQ,SAAS,SAC3C;CACD,MAAM,iBAAiB,OAAO,oBAAoB,CAAC;CACnD,MAAM,qBAAqB,OAA6C,KAAK;CAC7E,MAAM,SAAS,OAAsB,KAAK;AAE1C,iBAAgB;EACd,MAAM,WAAW,IAAI,uBAAuB;GAC1C,MAAM,OAAO,eAAe;GAC5B,MAAM,OAAO,oBAAoB;AACjC,kBAAe,UAAU;AAEzB,OAAI,SAAS,SAAS,SAAS,MAC7B,KAAI,sBAAsB,EAAE;AAC1B,kBAAc,KAAK;AACnB,kBAAc,OAAO;UAChB;AACL,QAAI,OAAO,QACT,sBAAqB,OAAO,QAAQ;AAEtC,QAAI,mBAAmB,QACrB,cAAa,mBAAmB,QAAQ;AAE1C,kBAAc,MAAM;AACpB,kBAAc,UAAU;AACxB,WAAO,UAAU,4BAA4B,cAAc,KAAK,CAAC;AACjE,uBAAmB,UAAU,iBACrB,cAAc,OAAO,EAC3B,2BACD;;YAEM,SAAS,SAAS,SAAS,MACpC,KAAI,sBAAsB,EAAE;AAC1B,kBAAc,MAAM;AACpB,kBAAc,SAAS;UAClB;AACL,QAAI,OAAO,QACT,sBAAqB,OAAO,QAAQ;AAEtC,QAAI,mBAAmB,QACrB,cAAa,mBAAmB,QAAQ;AAE1C,kBAAc,KAAK;AACnB,kBAAc,UAAU;AACxB,WAAO,UAAU,4BAA4B,cAAc,MAAM,CAAC;AAClE,uBAAmB,UAAU,iBACrB,cAAc,SAAS,EAC7B,4BACD;;OAGH,eAAc,KAAK;IAErB;AAEF,WAAS,QAAQ,SAAS,iBAAiB;GACzC,YAAY;GACZ,iBAAiB,CAAC,QAAQ;GAC3B,CAAC;AAEF,eAAa;AACX,YAAS,YAAY;AACrB,OAAI,mBAAmB,QACrB,cAAa,mBAAmB,QAAQ;AAE1C,OAAI,OAAO,QACT,sBAAqB,OAAO,QAAQ;;IAGvC,EAAE,CAAC;AAEN,QAAO;EAAE;EAAY;EAAY"}

package/dist/lint/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,30 @@
+# Third-party notices
+
+The `pds/duration-token`, `pds/exit-motion`, `pds/motion-origin`, `pds/no-layout-motion`,
+`pds/no-transition-all` and `pds/overlay-motion` rules adapt checks from the transitions.dev Motion
+Agent (<https://github.com/Jakubantalik/transitions.dev>, `agent/lib/rules.mjs`,
+`agent/lib/components.mjs` and `agent/lib/catalog.mjs`), used under the MIT License that the
+repository's `LICENSE` grants its tooling (section 2, covering `agent/`). Nothing is taken from its
+`transitions/` or `skills/` directories, which are under a different licence.
+
+```
+Copyright (c) 2026 Jakub Antalik / Transitions.dev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```