@mattermost/compass-ui 0.1.0-alpha.2 → 0.1.0-alpha.21

package/dist/hooks/use-anchored-popup-portal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-anchored-popup-portal.cjs","sources":["../../src/hooks/use-anchored-popup-portal.ts"],"sourcesContent":["import {\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type RefObject,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  ANCHORED_POPUP_GAP,\n  ANCHORED_POPUP_Z_INDEX,\n  computeAnchoredPopupFixedStyle,\n  computeAnchoredPopupPlacement,\n  getAnchoredPopupContainerFrame,\n  type PopupPlacement,\n} from '@/utils/anchoredPopupPlacement';\n\nexport interface UseAnchoredPopupPortalOptions {\n  /** Height used for the flip decision when content isn’t measured yet. */\n  preferredHeight: number;\n  /** Cap for scrollable menus (Select/Combobox). Omit for intrinsic panels. */\n  maxHeightCap?: number;\n  /** Ref to the portaled panel for measuring intrinsic height (DateRangePicker). */\n  contentRef?: RefObject<HTMLElement | null>;\n  /**\n   * Portal mount node; defaults to `document.body` with viewport-fixed coords.\n   * Custom containers must establish a positioning context (`position` other\n   * than `static`); coords are converted to that container’s space.\n   */\n  portalContainer?: HTMLElement | null;\n  zIndex?: number;\n  /**\n   * When true (default), fixed width matches the trigger.\n   * DateRangePicker sets false and keeps its CSS width.\n   */\n  matchWidth?: boolean;\n  gap?: number;\n}\n\nexport interface UseAnchoredPopupPortalResult {\n  placement: PopupPlacement;\n  maxHeight: number;\n  style: CSSProperties;\n  /** Ref for the portaled surface — pass to `useOutsideClose` as a second root. */\n  portalRef: RefObject<HTMLDivElement | null>;\n  /** Wraps children in a portal to `portalContainer` or `document.body`. */\n  renderPortal: (children: ReactNode) => ReactNode;\n}\n\nconst DEFAULT_PLACEMENT: PopupPlacement = 'below';\n\nfunction resolvePortalMount(\n  portalContainer: HTMLElement | null | undefined,\n): HTMLElement | null {\n  if (typeof document === 'undefined') return null;\n  return portalContainer ?? document.body;\n}\n\nfunction usesViewportFixedCoords(mount: HTMLElement): boolean {\n  return mount === document.body;\n}\n\n/**\n * Positions a form-widget popup in a portal with viewport-aware above/below flip.\n * Internal to compass-ui form widgets — not a general overlay positioning API.\n */\nexport function useAnchoredPopupPortal(\n  anchorRef: RefObject<HTMLElement | null>,\n  isOpen: boolean,\n  options: UseAnchoredPopupPortalOptions,\n): UseAnchoredPopupPortalResult {\n  const {\n    preferredHeight,\n    maxHeightCap,\n    contentRef,\n    portalContainer = null,\n    zIndex = ANCHORED_POPUP_Z_INDEX,\n    matchWidth = true,\n    gap = ANCHORED_POPUP_GAP,\n  } = options;\n\n  const portalRef = useRef<HTMLDivElement | null>(null);\n  const [placement, setPlacement] = useState<PopupPlacement>(DEFAULT_PLACEMENT);\n  const [maxHeight, setMaxHeight] = useState(maxHeightCap ?? preferredHeight);\n  const [style, setStyle] = useState<CSSProperties>({\n    position: 'fixed',\n    top: 0,\n    left: 0,\n    width: matchWidth ? 0 : undefined,\n    zIndex,\n  });\n\n  const update = useCallback(() => {\n    const anchor = anchorRef.current;\n    if (!anchor) return;\n\n    const mount = resolvePortalMount(portalContainer);\n    if (!mount) return;\n\n    const rect = anchor.getBoundingClientRect();\n    const viewportHeight = window.innerHeight;\n    const viewportFixed = usesViewportFixedCoords(mount);\n    const containerFrame = viewportFixed\n      ? undefined\n      : getAnchoredPopupContainerFrame(mount);\n\n    const measured =\n      contentRef?.current?.offsetHeight ?? portalRef.current?.offsetHeight ?? 0;\n    const heightForFlip = measured > 0 ? measured : preferredHeight;\n\n    const { placement: nextPlacement, maxHeight: nextMaxHeight } =\n      computeAnchoredPopupPlacement(rect, viewportHeight, {\n        gap,\n        preferredHeight: heightForFlip,\n        maxHeightCap,\n        bounds: containerFrame?.bounds,\n      });\n\n    const fixed = computeAnchoredPopupFixedStyle(rect, nextPlacement, {\n      gap,\n      zIndex,\n      width: matchWidth ? rect.width : undefined,\n      viewportHeight,\n      containerFrame,\n    });\n\n    setPlacement(nextPlacement);\n    setMaxHeight(nextMaxHeight);\n    setStyle({\n      position: fixed.position,\n      left: fixed.left,\n      zIndex: fixed.zIndex,\n      ...(matchWidth ? { width: fixed.width } : null),\n      ...(nextPlacement === 'below'\n        ? { top: fixed.top, bottom: 'auto' }\n        : { bottom: fixed.bottom, top: 'auto' }),\n    });\n  }, [\n    anchorRef,\n    contentRef,\n    gap,\n    matchWidth,\n    maxHeightCap,\n    portalContainer,\n    preferredHeight,\n    zIndex,\n  ]);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n\n    update();\n\n    function handle() {\n      update();\n    }\n\n    window.addEventListener('resize', handle);\n    // Capture phase so nested scroll containers (modals, RHS) are covered.\n    document.addEventListener('scroll', handle, true);\n    return () => {\n      window.removeEventListener('resize', handle);\n      document.removeEventListener('scroll', handle, true);\n    };\n  }, [isOpen, update]);\n\n  // Re-measure after content mounts / changes size (calendar, long lists).\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n    const el = contentRef?.current ?? portalRef.current;\n    if (!el || typeof ResizeObserver === 'undefined') return;\n\n    const ro = new ResizeObserver(() => update());\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [isOpen, contentRef, update]);\n\n  const renderPortal = useCallback(\n    (children: ReactNode) => {\n      const mount = resolvePortalMount(portalContainer);\n      if (!mount) return null;\n      return createPortal(children, mount);\n    },\n    [portalContainer],\n  );\n\n  return {\n    placement,\n    maxHeight,\n    style,\n    portalRef,\n    renderPortal,\n  };\n}\n"],"names":["DEFAULT_PLACEMENT","resolvePortalMount","portalContainer","usesViewportFixedCoords","mount","useAnchoredPopupPortal","anchorRef","isOpen","options","preferredHeight","maxHeightCap","contentRef","zIndex","ANCHORED_POPUP_Z_INDEX","matchWidth","gap","ANCHORED_POPUP_GAP","portalRef","useRef","placement","setPlacement","useState","maxHeight","setMaxHeight","style","setStyle","update","useCallback","anchor","rect","viewportHeight","containerFrame","getAnchoredPopupContainerFrame","measured","_a","_b","heightForFlip","nextPlacement","nextMaxHeight","computeAnchoredPopupPlacement","fixed","computeAnchoredPopupFixedStyle","useLayoutEffect","handle","el","ro","renderPortal","children","createPortal"],"mappings":"iLAmDMA,EAAoC,QAE1C,SAASC,EACPC,EACoB,CACpB,OAAI,OAAO,SAAa,IAAoB,KACrCA,GAAmB,SAAS,IACrC,CAEA,SAASC,EAAwBC,EAA6B,CAC5D,OAAOA,IAAU,SAAS,IAC5B,CAMO,SAASC,EACdC,EACAC,EACAC,EAC8B,CAC9B,KAAM,CACJ,gBAAAC,EACA,aAAAC,EACA,WAAAC,EACA,gBAAAT,EAAkB,KAClB,OAAAU,EAASC,EAAAA,uBACT,WAAAC,EAAa,GACb,IAAAC,EAAMC,EAAAA,kBAAA,EACJR,EAEES,EAAYC,EAAAA,OAA8B,IAAI,EAC9C,CAACC,EAAWC,CAAY,EAAIC,EAAAA,SAAyBrB,CAAiB,EACtE,CAACsB,EAAWC,CAAY,EAAIF,EAAAA,SAASX,GAAgBD,CAAe,EACpE,CAACe,EAAOC,CAAQ,EAAIJ,WAAwB,CAChD,SAAU,QACV,IAAK,EACL,KAAM,EACN,MAAOP,EAAa,EAAI,OACxB,OAAAF,CAAA,CACD,EAEKc,EAASC,EAAAA,YAAY,IAAM,SAC/B,MAAMC,EAAStB,EAAU,QACzB,GAAI,CAACsB,EAAQ,OAEb,MAAMxB,EAAQH,EAAmBC,CAAe,EAChD,GAAI,CAACE,EAAO,OAEZ,MAAMyB,EAAOD,EAAO,sBAAA,EACdE,EAAiB,OAAO,YAExBC,EADgB5B,EAAwBC,CAAK,EAE/C,OACA4B,EAAAA,+BAA+B5B,CAAK,EAElC6B,IACJC,EAAAvB,GAAA,YAAAA,EAAY,UAAZ,YAAAuB,EAAqB,iBAAgBC,EAAAlB,EAAU,UAAV,YAAAkB,EAAmB,eAAgB,EACpEC,EAAgBH,EAAW,EAAIA,EAAWxB,EAE1C,CAAE,UAAW4B,EAAe,UAAWC,GAC3CC,EAAAA,8BAA8BV,EAAMC,EAAgB,CAClD,IAAAf,EACA,gBAAiBqB,EACjB,aAAA1B,EACA,OAAQqB,GAAA,YAAAA,EAAgB,MAAA,CACzB,EAEGS,EAAQC,EAAAA,+BAA+BZ,EAAMQ,EAAe,CAChE,IAAAtB,EACA,OAAAH,EACA,MAAOE,EAAae,EAAK,MAAQ,OACjC,eAAAC,EACA,eAAAC,CAAA,CACD,EAEDX,EAAaiB,CAAa,EAC1Bd,EAAae,CAAa,EAC1Bb,EAAS,CACP,SAAUe,EAAM,SAChB,KAAMA,EAAM,KACZ,OAAQA,EAAM,OACd,GAAI1B,EAAa,CAAE,MAAO0B,EAAM,OAAU,KAC1C,GAAIH,IAAkB,QAClB,CAAE,IAAKG,EAAM,IAAK,OAAQ,MAAA,EAC1B,CAAE,OAAQA,EAAM,OAAQ,IAAK,MAAA,CAAO,CACzC,CACH,EAAG,CACDlC,EACAK,EACAI,EACAD,EACAJ,EACAR,EACAO,EACAG,CAAA,CACD,EAED8B,EAAAA,gBAAgB,IAAM,CACpB,GAAI,CAACnC,EAAQ,OAEbmB,EAAA,EAEA,SAASiB,GAAS,CAChBjB,EAAA,CACF,CAEA,cAAO,iBAAiB,SAAUiB,CAAM,EAExC,SAAS,iBAAiB,SAAUA,EAAQ,EAAI,EACzC,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAM,EAC3C,SAAS,oBAAoB,SAAUA,EAAQ,EAAI,CACrD,CACF,EAAG,CAACpC,EAAQmB,CAAM,CAAC,EAGnBgB,EAAAA,gBAAgB,IAAM,CACpB,GAAI,CAACnC,EAAQ,OACb,MAAMqC,GAAKjC,GAAA,YAAAA,EAAY,UAAWM,EAAU,QAC5C,GAAI,CAAC2B,GAAM,OAAO,eAAmB,IAAa,OAElD,MAAMC,EAAK,IAAI,eAAe,IAAMnB,GAAQ,EAC5C,OAAAmB,EAAG,QAAQD,CAAE,EACN,IAAMC,EAAG,WAAA,CAClB,EAAG,CAACtC,EAAQI,EAAYe,CAAM,CAAC,EAE/B,MAAMoB,EAAenB,EAAAA,YAClBoB,GAAwB,CACvB,MAAM3C,EAAQH,EAAmBC,CAAe,EAChD,OAAKE,EACE4C,EAAAA,aAAaD,EAAU3C,CAAK,EADhB,IAErB,EACA,CAACF,CAAe,CAAA,EAGlB,MAAO,CACL,UAAAiB,EACA,UAAAG,EACA,MAAAE,EACA,UAAAP,EACA,aAAA6B,CAAA,CAEJ"}

package/dist/hooks/use-anchored-popup-portal.d.ts

@@ -0,0 +1,38 @@
+import { CSSProperties, ReactNode, RefObject } from 'react';
+import { PopupPlacement } from '../utils/anchoredPopupPlacement';
+export interface UseAnchoredPopupPortalOptions {
+    /** Height used for the flip decision when content isn’t measured yet. */
+    preferredHeight: number;
+    /** Cap for scrollable menus (Select/Combobox). Omit for intrinsic panels. */
+    maxHeightCap?: number;
+    /** Ref to the portaled panel for measuring intrinsic height (DateRangePicker). */
+    contentRef?: RefObject<HTMLElement | null>;
+    /**
+     * Portal mount node; defaults to `document.body` with viewport-fixed coords.
+     * Custom containers must establish a positioning context (`position` other
+     * than `static`); coords are converted to that container’s space.
+     */
+    portalContainer?: HTMLElement | null;
+    zIndex?: number;
+    /**
+     * When true (default), fixed width matches the trigger.
+     * DateRangePicker sets false and keeps its CSS width.
+     */
+    matchWidth?: boolean;
+    gap?: number;
+}
+export interface UseAnchoredPopupPortalResult {
+    placement: PopupPlacement;
+    maxHeight: number;
+    style: CSSProperties;
+    /** Ref for the portaled surface — pass to `useOutsideClose` as a second root. */
+    portalRef: RefObject<HTMLDivElement | null>;
+    /** Wraps children in a portal to `portalContainer` or `document.body`. */
+    renderPortal: (children: ReactNode) => ReactNode;
+}
+/**
+ * Positions a form-widget popup in a portal with viewport-aware above/below flip.
+ * Internal to compass-ui form widgets — not a general overlay positioning API.
+ */
+export declare function useAnchoredPopupPortal(anchorRef: RefObject<HTMLElement | null>, isOpen: boolean, options: UseAnchoredPopupPortalOptions): UseAnchoredPopupPortalResult;
+//# sourceMappingURL=use-anchored-popup-portal.d.ts.map

package/dist/hooks/use-anchored-popup-portal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-anchored-popup-portal.d.ts","sourceRoot":"","sources":["../../src/hooks/use-anchored-popup-portal.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,gCAAgC,CAAC;AAExC,MAAM,WAAW,6BAA6B;IAC5C,yEAAyE;IACzE,eAAe,EAAE,MAAM,CAAC;IACxB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kFAAkF;IAClF,UAAU,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC3C;;;;OAIG;IACH,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,4BAA4B;IAC3C,SAAS,EAAE,cAAc,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,aAAa,CAAC;IACrB,iFAAiF;IACjF,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5C,0EAA0E;IAC1E,YAAY,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,SAAS,CAAC;CAClD;AAeD;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,6BAA6B,GACrC,4BAA4B,CA2H9B"}

package/dist/hooks/use-anchored-popup-portal.js

@@ -0,0 +1,95 @@
+import { useRef as O, useState as w, useCallback as H, useLayoutEffect as E } from "react";
+import { createPortal as R } from "react-dom";
+import { ANCHORED_POPUP_GAP as S, ANCHORED_POPUP_Z_INDEX as U, getAnchoredPopupContainerFrame as T, computeAnchoredPopupPlacement as k, computeAnchoredPopupFixedStyle as B } from "../utils/anchoredPopupPlacement.js";
+const G = "below";
+function A(n) {
+  return typeof document > "u" ? null : n ?? document.body;
+}
+function V(n) {
+  return n === document.body;
+}
+function q(n, u, C) {
+  const {
+    preferredHeight: l,
+    maxHeightCap: p,
+    contentRef: o,
+    portalContainer: s = null,
+    zIndex: a = U,
+    matchWidth: c = !0,
+    gap: m = S
+  } = C, f = O(null), [y, z] = w(G), [F, L] = w(p ?? l), [_, D] = w({
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: c ? 0 : void 0,
+    zIndex: a
+  }), i = H(() => {
+    var v, b;
+    const e = n.current;
+    if (!e) return;
+    const t = A(s);
+    if (!t) return;
+    const h = e.getBoundingClientRect(), x = window.innerHeight, d = V(t) ? void 0 : T(t), g = ((v = o == null ? void 0 : o.current) == null ? void 0 : v.offsetHeight) ?? ((b = f.current) == null ? void 0 : b.offsetHeight) ?? 0, M = g > 0 ? g : l, { placement: P, maxHeight: N } = k(h, x, {
+      gap: m,
+      preferredHeight: M,
+      maxHeightCap: p,
+      bounds: d == null ? void 0 : d.bounds
+    }), r = B(h, P, {
+      gap: m,
+      zIndex: a,
+      width: c ? h.width : void 0,
+      viewportHeight: x,
+      containerFrame: d
+    });
+    z(P), L(N), D({
+      position: r.position,
+      left: r.left,
+      zIndex: r.zIndex,
+      ...c ? { width: r.width } : null,
+      ...P === "below" ? { top: r.top, bottom: "auto" } : { bottom: r.bottom, top: "auto" }
+    });
+  }, [
+    n,
+    o,
+    m,
+    c,
+    p,
+    s,
+    l,
+    a
+  ]);
+  E(() => {
+    if (!u) return;
+    i();
+    function e() {
+      i();
+    }
+    return window.addEventListener("resize", e), document.addEventListener("scroll", e, !0), () => {
+      window.removeEventListener("resize", e), document.removeEventListener("scroll", e, !0);
+    };
+  }, [u, i]), E(() => {
+    if (!u) return;
+    const e = (o == null ? void 0 : o.current) ?? f.current;
+    if (!e || typeof ResizeObserver > "u") return;
+    const t = new ResizeObserver(() => i());
+    return t.observe(e), () => t.disconnect();
+  }, [u, o, i]);
+  const I = H(
+    (e) => {
+      const t = A(s);
+      return t ? R(e, t) : null;
+    },
+    [s]
+  );
+  return {
+    placement: y,
+    maxHeight: F,
+    style: _,
+    portalRef: f,
+    renderPortal: I
+  };
+}
+export {
+  q as useAnchoredPopupPortal
+};
+//# sourceMappingURL=use-anchored-popup-portal.js.map

package/dist/hooks/use-anchored-popup-portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-anchored-popup-portal.js","sources":["../../src/hooks/use-anchored-popup-portal.ts"],"sourcesContent":["import {\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type RefObject,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  ANCHORED_POPUP_GAP,\n  ANCHORED_POPUP_Z_INDEX,\n  computeAnchoredPopupFixedStyle,\n  computeAnchoredPopupPlacement,\n  getAnchoredPopupContainerFrame,\n  type PopupPlacement,\n} from '@/utils/anchoredPopupPlacement';\n\nexport interface UseAnchoredPopupPortalOptions {\n  /** Height used for the flip decision when content isn’t measured yet. */\n  preferredHeight: number;\n  /** Cap for scrollable menus (Select/Combobox). Omit for intrinsic panels. */\n  maxHeightCap?: number;\n  /** Ref to the portaled panel for measuring intrinsic height (DateRangePicker). */\n  contentRef?: RefObject<HTMLElement | null>;\n  /**\n   * Portal mount node; defaults to `document.body` with viewport-fixed coords.\n   * Custom containers must establish a positioning context (`position` other\n   * than `static`); coords are converted to that container’s space.\n   */\n  portalContainer?: HTMLElement | null;\n  zIndex?: number;\n  /**\n   * When true (default), fixed width matches the trigger.\n   * DateRangePicker sets false and keeps its CSS width.\n   */\n  matchWidth?: boolean;\n  gap?: number;\n}\n\nexport interface UseAnchoredPopupPortalResult {\n  placement: PopupPlacement;\n  maxHeight: number;\n  style: CSSProperties;\n  /** Ref for the portaled surface — pass to `useOutsideClose` as a second root. */\n  portalRef: RefObject<HTMLDivElement | null>;\n  /** Wraps children in a portal to `portalContainer` or `document.body`. */\n  renderPortal: (children: ReactNode) => ReactNode;\n}\n\nconst DEFAULT_PLACEMENT: PopupPlacement = 'below';\n\nfunction resolvePortalMount(\n  portalContainer: HTMLElement | null | undefined,\n): HTMLElement | null {\n  if (typeof document === 'undefined') return null;\n  return portalContainer ?? document.body;\n}\n\nfunction usesViewportFixedCoords(mount: HTMLElement): boolean {\n  return mount === document.body;\n}\n\n/**\n * Positions a form-widget popup in a portal with viewport-aware above/below flip.\n * Internal to compass-ui form widgets — not a general overlay positioning API.\n */\nexport function useAnchoredPopupPortal(\n  anchorRef: RefObject<HTMLElement | null>,\n  isOpen: boolean,\n  options: UseAnchoredPopupPortalOptions,\n): UseAnchoredPopupPortalResult {\n  const {\n    preferredHeight,\n    maxHeightCap,\n    contentRef,\n    portalContainer = null,\n    zIndex = ANCHORED_POPUP_Z_INDEX,\n    matchWidth = true,\n    gap = ANCHORED_POPUP_GAP,\n  } = options;\n\n  const portalRef = useRef<HTMLDivElement | null>(null);\n  const [placement, setPlacement] = useState<PopupPlacement>(DEFAULT_PLACEMENT);\n  const [maxHeight, setMaxHeight] = useState(maxHeightCap ?? preferredHeight);\n  const [style, setStyle] = useState<CSSProperties>({\n    position: 'fixed',\n    top: 0,\n    left: 0,\n    width: matchWidth ? 0 : undefined,\n    zIndex,\n  });\n\n  const update = useCallback(() => {\n    const anchor = anchorRef.current;\n    if (!anchor) return;\n\n    const mount = resolvePortalMount(portalContainer);\n    if (!mount) return;\n\n    const rect = anchor.getBoundingClientRect();\n    const viewportHeight = window.innerHeight;\n    const viewportFixed = usesViewportFixedCoords(mount);\n    const containerFrame = viewportFixed\n      ? undefined\n      : getAnchoredPopupContainerFrame(mount);\n\n    const measured =\n      contentRef?.current?.offsetHeight ?? portalRef.current?.offsetHeight ?? 0;\n    const heightForFlip = measured > 0 ? measured : preferredHeight;\n\n    const { placement: nextPlacement, maxHeight: nextMaxHeight } =\n      computeAnchoredPopupPlacement(rect, viewportHeight, {\n        gap,\n        preferredHeight: heightForFlip,\n        maxHeightCap,\n        bounds: containerFrame?.bounds,\n      });\n\n    const fixed = computeAnchoredPopupFixedStyle(rect, nextPlacement, {\n      gap,\n      zIndex,\n      width: matchWidth ? rect.width : undefined,\n      viewportHeight,\n      containerFrame,\n    });\n\n    setPlacement(nextPlacement);\n    setMaxHeight(nextMaxHeight);\n    setStyle({\n      position: fixed.position,\n      left: fixed.left,\n      zIndex: fixed.zIndex,\n      ...(matchWidth ? { width: fixed.width } : null),\n      ...(nextPlacement === 'below'\n        ? { top: fixed.top, bottom: 'auto' }\n        : { bottom: fixed.bottom, top: 'auto' }),\n    });\n  }, [\n    anchorRef,\n    contentRef,\n    gap,\n    matchWidth,\n    maxHeightCap,\n    portalContainer,\n    preferredHeight,\n    zIndex,\n  ]);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n\n    update();\n\n    function handle() {\n      update();\n    }\n\n    window.addEventListener('resize', handle);\n    // Capture phase so nested scroll containers (modals, RHS) are covered.\n    document.addEventListener('scroll', handle, true);\n    return () => {\n      window.removeEventListener('resize', handle);\n      document.removeEventListener('scroll', handle, true);\n    };\n  }, [isOpen, update]);\n\n  // Re-measure after content mounts / changes size (calendar, long lists).\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n    const el = contentRef?.current ?? portalRef.current;\n    if (!el || typeof ResizeObserver === 'undefined') return;\n\n    const ro = new ResizeObserver(() => update());\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [isOpen, contentRef, update]);\n\n  const renderPortal = useCallback(\n    (children: ReactNode) => {\n      const mount = resolvePortalMount(portalContainer);\n      if (!mount) return null;\n      return createPortal(children, mount);\n    },\n    [portalContainer],\n  );\n\n  return {\n    placement,\n    maxHeight,\n    style,\n    portalRef,\n    renderPortal,\n  };\n}\n"],"names":["DEFAULT_PLACEMENT","resolvePortalMount","portalContainer","usesViewportFixedCoords","mount","useAnchoredPopupPortal","anchorRef","isOpen","options","preferredHeight","maxHeightCap","contentRef","zIndex","ANCHORED_POPUP_Z_INDEX","matchWidth","gap","ANCHORED_POPUP_GAP","portalRef","useRef","placement","setPlacement","useState","maxHeight","setMaxHeight","style","setStyle","update","useCallback","anchor","rect","viewportHeight","containerFrame","getAnchoredPopupContainerFrame","measured","_a","_b","heightForFlip","nextPlacement","nextMaxHeight","computeAnchoredPopupPlacement","fixed","computeAnchoredPopupFixedStyle","useLayoutEffect","handle","el","ro","renderPortal","children","createPortal"],"mappings":"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"}

package/dist/hooks/use-controllable.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react");function u(t,r,e){const l=t!==void 0,[s,c]=n.useState(r??!1);return[l?t:s,o=>{l||c(o.target.checked),e==null||e(o)}]}exports.useControllable=u;
+//# sourceMappingURL=use-controllable.cjs.map

package/dist/hooks/use-controllable.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-controllable.cjs","sources":["../../src/hooks/use-controllable.ts"],"sourcesContent":["import type { ChangeEvent } from 'react';\nimport { useState } from 'react';\n\n/**\n * Handles the controlled/uncontrolled pattern for boolean inputs (checkbox, radio, switch).\n *\n * - If `controlled` is provided (not undefined), the component is controlled and the\n *   caller owns the value. Changes are forwarded to `onChange` only.\n * - If `controlled` is undefined, the component manages its own state, initialised\n *   from `defaultValue`.\n *\n * Returns `[value, handleChange]`.\n */\nexport function useControllable(\n  controlled: boolean | undefined,\n  defaultValue: boolean | undefined,\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void,\n): [boolean, (e: ChangeEvent<HTMLInputElement>) => void] {\n  const isControlled = controlled !== undefined;\n  const [uncontrolled, setUncontrolled] = useState(defaultValue ?? false);\n\n  const value = isControlled ? controlled! : uncontrolled;\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) setUncontrolled(e.target.checked);\n    onChange?.(e);\n  };\n\n  return [value, handleChange];\n}\n"],"names":["useControllable","controlled","defaultValue","onChange","isControlled","uncontrolled","setUncontrolled","useState","e"],"mappings":"yGAaO,SAASA,EACdC,EACAC,EACAC,EACuD,CACvD,MAAMC,EAAeH,IAAe,OAC9B,CAACI,EAAcC,CAAe,EAAIC,EAAAA,SAASL,GAAgB,EAAK,EAStE,MAAO,CAPOE,EAAeH,EAAcI,EAErBG,GAAqC,CACpDJ,GAAcE,EAAgBE,EAAE,OAAO,OAAO,EACnDL,GAAA,MAAAA,EAAWK,EACb,CAE2B,CAC7B"}

package/dist/hooks/use-controllable.d.ts

@@ -0,0 +1,13 @@
+import { ChangeEvent } from 'react';
+/**
+ * Handles the controlled/uncontrolled pattern for boolean inputs (checkbox, radio, switch).
+ *
+ * - If `controlled` is provided (not undefined), the component is controlled and the
+ *   caller owns the value. Changes are forwarded to `onChange` only.
+ * - If `controlled` is undefined, the component manages its own state, initialised
+ *   from `defaultValue`.
+ *
+ * Returns `[value, handleChange]`.
+ */
+export declare function useControllable(controlled: boolean | undefined, defaultValue: boolean | undefined, onChange?: (e: ChangeEvent<HTMLInputElement>) => void): [boolean, (e: ChangeEvent<HTMLInputElement>) => void];
+//# sourceMappingURL=use-controllable.d.ts.map

package/dist/hooks/use-controllable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-controllable.d.ts","sourceRoot":"","sources":["../../src/hooks/use-controllable.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGzC;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAC7B,UAAU,EAAE,OAAO,GAAG,SAAS,EAC/B,YAAY,EAAE,OAAO,GAAG,SAAS,EACjC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,GACpD,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC,CAYvD"}

package/dist/hooks/use-controllable.js

@@ -0,0 +1,11 @@
+import { useState as n } from "react";
+function i(e, r, t) {
+  const l = e !== void 0, [s, c] = n(r ?? !1);
+  return [l ? e : s, (o) => {
+    l || c(o.target.checked), t == null || t(o);
+  }];
+}
+export {
+  i as useControllable
+};
+//# sourceMappingURL=use-controllable.js.map

package/dist/hooks/use-controllable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-controllable.js","sources":["../../src/hooks/use-controllable.ts"],"sourcesContent":["import type { ChangeEvent } from 'react';\nimport { useState } from 'react';\n\n/**\n * Handles the controlled/uncontrolled pattern for boolean inputs (checkbox, radio, switch).\n *\n * - If `controlled` is provided (not undefined), the component is controlled and the\n *   caller owns the value. Changes are forwarded to `onChange` only.\n * - If `controlled` is undefined, the component manages its own state, initialised\n *   from `defaultValue`.\n *\n * Returns `[value, handleChange]`.\n */\nexport function useControllable(\n  controlled: boolean | undefined,\n  defaultValue: boolean | undefined,\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void,\n): [boolean, (e: ChangeEvent<HTMLInputElement>) => void] {\n  const isControlled = controlled !== undefined;\n  const [uncontrolled, setUncontrolled] = useState(defaultValue ?? false);\n\n  const value = isControlled ? controlled! : uncontrolled;\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) setUncontrolled(e.target.checked);\n    onChange?.(e);\n  };\n\n  return [value, handleChange];\n}\n"],"names":["useControllable","controlled","defaultValue","onChange","isControlled","uncontrolled","setUncontrolled","useState","e"],"mappings":";AAaO,SAASA,EACdC,GACAC,GACAC,GACuD;AACvD,QAAMC,IAAeH,MAAe,QAC9B,CAACI,GAAcC,CAAe,IAAIC,EAASL,KAAgB,EAAK;AAStE,SAAO,CAPOE,IAAeH,IAAcI,GAEtB,CAACG,MAAqC;AACzD,IAAKJ,KAAcE,EAAgBE,EAAE,OAAO,OAAO,GACnDL,KAAA,QAAAA,EAAWK;AAAA,EACb,CAE2B;AAC7B;"}

package/dist/hooks/use-exit-animation.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react");function a(e,r){const[t,s]=n.useState(e),[u,i]=n.useState(!1);return n.useEffect(()=>{if(e){s(!0),i(!1);return}if(!t)return;i(!0);const o=window.setTimeout(()=>{s(!1),i(!1)},r);return()=>window.clearTimeout(o)},[e,t,r]),{rendered:t,exiting:u}}exports.useExitAnimation=a;
+//# sourceMappingURL=use-exit-animation.cjs.map

package/dist/hooks/use-exit-animation.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-exit-animation.cjs","sources":["../../src/hooks/use-exit-animation.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/**\n * Keeps a panel mounted through its exit animation. While `open` is true the\n * panel renders normally. When `open` flips false, the panel keeps rendering\n * for `durationMs` with `exiting: true` so an exit animation can play before\n * the DOM node is removed.\n */\nexport function useExitAnimation(open: boolean, durationMs: number) {\n  const [rendered, setRendered] = useState(open);\n  const [exiting, setExiting] = useState(false);\n\n  useEffect(() => {\n    if (open) {\n      setRendered(true);\n      setExiting(false);\n      return;\n    }\n    if (!rendered) return;\n    setExiting(true);\n    const t = window.setTimeout(() => {\n      setRendered(false);\n      setExiting(false);\n    }, durationMs);\n    return () => window.clearTimeout(t);\n  }, [open, rendered, durationMs]);\n\n  return { rendered, exiting };\n}\n"],"names":["useExitAnimation","open","durationMs","rendered","setRendered","useState","exiting","setExiting","useEffect","t"],"mappings":"yGAQO,SAASA,EAAiBC,EAAeC,EAAoB,CAClE,KAAM,CAACC,EAAUC,CAAW,EAAIC,EAAAA,SAASJ,CAAI,EACvC,CAACK,EAASC,CAAU,EAAIF,EAAAA,SAAS,EAAK,EAE5CG,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAIP,EAAM,CACRG,EAAY,EAAI,EAChBG,EAAW,EAAK,EAChB,MACF,CACA,GAAI,CAACJ,EAAU,OACfI,EAAW,EAAI,EACf,MAAME,EAAI,OAAO,WAAW,IAAM,CAChCL,EAAY,EAAK,EACjBG,EAAW,EAAK,CAClB,EAAGL,CAAU,EACb,MAAO,IAAM,OAAO,aAAaO,CAAC,CACpC,EAAG,CAACR,EAAME,EAAUD,CAAU,CAAC,EAExB,CAAE,SAAAC,EAAU,QAAAG,CAAA,CACrB"}

package/dist/hooks/use-exit-animation.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Keeps a panel mounted through its exit animation. While `open` is true the
+ * panel renders normally. When `open` flips false, the panel keeps rendering
+ * for `durationMs` with `exiting: true` so an exit animation can play before
+ * the DOM node is removed.
+ */
+export declare function useExitAnimation(open: boolean, durationMs: number): {
+    rendered: boolean;
+    exiting: boolean;
+};
+//# sourceMappingURL=use-exit-animation.d.ts.map

package/dist/hooks/use-exit-animation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-exit-animation.d.ts","sourceRoot":"","sources":["../../src/hooks/use-exit-animation.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM;;;EAoBjE"}

package/dist/hooks/use-exit-animation.js

@@ -0,0 +1,20 @@
+import { useState as s, useEffect as o } from "react";
+function c(e, i) {
+  const [t, n] = s(e), [u, r] = s(!1);
+  return o(() => {
+    if (e) {
+      n(!0), r(!1);
+      return;
+    }
+    if (!t) return;
+    r(!0);
+    const f = window.setTimeout(() => {
+      n(!1), r(!1);
+    }, i);
+    return () => window.clearTimeout(f);
+  }, [e, t, i]), { rendered: t, exiting: u };
+}
+export {
+  c as useExitAnimation
+};
+//# sourceMappingURL=use-exit-animation.js.map

package/dist/hooks/use-exit-animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-exit-animation.js","sources":["../../src/hooks/use-exit-animation.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/**\n * Keeps a panel mounted through its exit animation. While `open` is true the\n * panel renders normally. When `open` flips false, the panel keeps rendering\n * for `durationMs` with `exiting: true` so an exit animation can play before\n * the DOM node is removed.\n */\nexport function useExitAnimation(open: boolean, durationMs: number) {\n  const [rendered, setRendered] = useState(open);\n  const [exiting, setExiting] = useState(false);\n\n  useEffect(() => {\n    if (open) {\n      setRendered(true);\n      setExiting(false);\n      return;\n    }\n    if (!rendered) return;\n    setExiting(true);\n    const t = window.setTimeout(() => {\n      setRendered(false);\n      setExiting(false);\n    }, durationMs);\n    return () => window.clearTimeout(t);\n  }, [open, rendered, durationMs]);\n\n  return { rendered, exiting };\n}\n"],"names":["useExitAnimation","open","durationMs","rendered","setRendered","useState","exiting","setExiting","useEffect","t"],"mappings":";AAQO,SAASA,EAAiBC,GAAeC,GAAoB;AAClE,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAASJ,CAAI,GACvC,CAACK,GAASC,CAAU,IAAIF,EAAS,EAAK;AAE5C,SAAAG,EAAU,MAAM;AACd,QAAIP,GAAM;AACR,MAAAG,EAAY,EAAI,GAChBG,EAAW,EAAK;AAChB;AAAA,IACF;AACA,QAAI,CAACJ,EAAU;AACf,IAAAI,EAAW,EAAI;AACf,UAAME,IAAI,OAAO,WAAW,MAAM;AAChC,MAAAL,EAAY,EAAK,GACjBG,EAAW,EAAK;AAAA,IAClB,GAAGL,CAAU;AACb,WAAO,MAAM,OAAO,aAAaO,CAAC;AAAA,EACpC,GAAG,CAACR,GAAME,GAAUD,CAAU,CAAC,GAExB,EAAE,UAAAC,GAAU,SAAAG,EAAA;AACrB;"}

package/dist/hooks/use-modal-focus.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),T=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","summary",'[contenteditable=""]','[contenteditable="true"]',"[tabindex]"].join(",");function F(r,s){for(let t=r;t;t=t.parentElement){if(t.hidden||t.hasAttribute("inert")||t.getAttribute("aria-hidden")==="true")return!0;const f=getComputedStyle(t);if(f.display==="none"||t===r&&f.visibility==="hidden")return!0;if(t===s)break}return!1}function L(r){return Array.from(r.querySelectorAll(T)).filter(s=>s.tabIndex>=0&&!s.matches(":disabled")&&!F(s,r))}const h=Symbol.for("@mattermost/compass-ui/modal-stack/v1"),p=globalThis,u=p[h]??(p[h]=[]);function O(r,{initialFocusRef:s,closeOnEscape:t=!0,manageFocus:f=!0,onClose:v,active:g=!0}){const R=o.useRef(f),E=o.useRef(s),b=o.useRef({closeOnEscape:t,manageFocus:f,onClose:v});o.useLayoutEffect(()=>{E.current=s,b.current={closeOnEscape:t,manageFocus:f,onClose:v}});const k=o.useRef(null),d=o.useRef(null);o.useEffect(()=>{var i;if(!R.current)return;const c=document.activeElement;function m(){const a=u[u.length-1],l=k.current;return l&&u.includes(l)?a===l:d.current?d.current.wasTop&&a===d.current.below:a===void 0}const e=r.current,n=(i=E.current)==null?void 0:i.current;return n&&(e!=null&&e.contains(n))&&n.focus(),(!n||document.activeElement!==n)&&(e==null||e.focus()),()=>{m()&&c&&c.isConnected&&typeof c.focus=="function"&&c.focus()}},[r]),o.useEffect(()=>{if(!g)return;const c={};u.push(c),k.current=c,d.current=null;function m(e){var w,x;if(e.defaultPrevented||u[u.length-1]!==c)return;const n=r.current;if(!n)return;if(e.key==="Escape"){b.current.closeOnEscape&&((x=(w=b.current).onClose)==null||x.call(w));return}if(e.key!=="Tab"||!b.current.manageFocus)return;const i=L(n);if(i.length===0){e.preventDefault(),n.focus();return}const a=i[0],l=i[i.length-1],y=document.activeElement,S=!n.contains(y);e.shiftKey?(S||y===a||y===n)&&(e.preventDefault(),l.focus()):(S||y===l)&&(e.preventDefault(),a.focus())}return document.addEventListener("keydown",m),()=>{document.removeEventListener("keydown",m);const e=u.indexOf(c);d.current={wasTop:e===u.length-1,below:u[e-1]},u.splice(e,1)}},[r,g])}exports.useModalFocus=O;
+//# sourceMappingURL=use-modal-focus.cjs.map

package/dist/hooks/use-modal-focus.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-modal-focus.cjs","sources":["../../src/hooks/use-modal-focus.ts"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef } from 'react';\nimport type { RefObject } from 'react';\n\nconst FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  'summary',\n  '[contenteditable=\"\"]',\n  '[contenteditable=\"true\"]',\n  '[tabindex]',\n].join(',');\n\nfunction isHidden(el: HTMLElement, root: HTMLElement): boolean {\n  for (let node: HTMLElement | null = el; node; node = node.parentElement) {\n    if (node.hidden || node.hasAttribute('inert')) return true;\n    if (node.getAttribute('aria-hidden') === 'true') return true;\n    const style = getComputedStyle(node);\n    if (style.display === 'none') return true;\n    if (node === el && style.visibility === 'hidden') return true;\n    if (node === root) break;\n  }\n  return false;\n}\n\nfunction getFocusable(root: HTMLElement): HTMLElement[] {\n  return Array.from(\n    root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n  ).filter(\n    (el) => el.tabIndex >= 0 && !el.matches(':disabled') && !isHidden(el, root),\n  );\n}\n\n/**\n * Open modals in mount order; only the last one reacts to Tab and Escape.\n * Shared through `globalThis` so compass-ui copies bundled by plugins agree on\n * which modal is topmost.\n *\n * **Frozen v1 protocol** (additive-only, like tokens): opaque `{}` tokens,\n * push while active, splice on leave, last entry is top. Do not change the\n * entry shape or those rules in place — mint `…/modal-stack/v2` instead.\n * A new key means new copies stop cooperating with old ones.\n */\nconst STACK_KEY = Symbol.for('@mattermost/compass-ui/modal-stack/v1');\nconst stackHost = globalThis as typeof globalThis & {\n  [STACK_KEY]?: object[];\n};\nconst modalStack: object[] = (stackHost[STACK_KEY] ??= []);\n\nexport interface UseModalFocusOptions {\n  /** Element to focus on mount. Falls back to the dialog root. */\n  initialFocusRef?: RefObject<HTMLElement | null>;\n  /** Close on Escape. Default true. */\n  closeOnEscape?: boolean;\n  /**\n   * Initial focus, Tab trap and focus restore. Set false when the host owns\n   * focus (e.g. a floating-ui focus manager). The modal still joins the stack,\n   * so modals below it stay inert. Initial focus and restore use the value at\n   * mount; the Tab trap follows later updates (like `closeOnEscape`). Default\n   * true.\n   */\n  manageFocus?: boolean;\n  onClose?: () => void;\n  /**\n   * When false (e.g. during an exit transition) Tab and Escape are no longer\n   * handled and the modal leaves the stack, but focus is still restored on\n   * unmount. Default true.\n   */\n  active?: boolean;\n}\n\n/**\n * Dialog focus and keyboard behavior for a modal panel: initial focus, Tab trap\n * (focusable elements computed at keypress), Escape (skipped when already\n * handled), and focus restore on unmount.\n *\n * Tab and Escape are handled by one document listener, so the trap still holds\n * when focus sits outside the dialog (e.g. after a backdrop click), and only\n * the topmost active modal responds. Events whose default was prevented (by an\n * inner widget or the host's `onKeyDown`) are ignored.\n */\nexport function useModalFocus(\n  rootRef: RefObject<HTMLElement | null>,\n  {\n    initialFocusRef,\n    closeOnEscape = true,\n    manageFocus = true,\n    onClose,\n    active = true,\n  }: UseModalFocusOptions,\n): void {\n  // Initial focus + restore only run once; the Tab trap reads `manageFocus` live.\n  const manageFocusOnMount = useRef(manageFocus);\n  const initialFocusRefRef = useRef(initialFocusRef);\n  const latest = useRef({ closeOnEscape, manageFocus, onClose });\n  // Commit-only writes: avoid leaking options from a discarded concurrent render,\n  // without the post-paint stale window of a passive effect.\n  useLayoutEffect(() => {\n    initialFocusRefRef.current = initialFocusRef;\n    latest.current = { closeOnEscape, manageFocus, onClose };\n  });\n  const keyToken = useRef<object | null>(null);\n  // Stack position recorded when the token leaves the stack (exit start).\n  const exit = useRef<{ wasTop: boolean; below: object | undefined } | null>(\n    null,\n  );\n\n  useEffect(() => {\n    if (!manageFocusOnMount.current) return;\n    const previous = document.activeElement as HTMLElement | null;\n    function shouldRestoreFocus(): boolean {\n      const top = modalStack[modalStack.length - 1];\n      const token = keyToken.current;\n      if (token && modalStack.includes(token)) return top === token;\n      if (!exit.current) return top === undefined;\n      return exit.current.wasTop && top === exit.current.below;\n    }\n    const root = rootRef.current;\n    const target = initialFocusRefRef.current?.current;\n    if (target && root?.contains(target)) target.focus();\n    if (!target || document.activeElement !== target) root?.focus();\n    return () => {\n      if (\n        shouldRestoreFocus() &&\n        previous &&\n        previous.isConnected &&\n        typeof previous.focus === 'function'\n      ) {\n        previous.focus();\n      }\n    };\n  }, [rootRef]);\n\n  useEffect(() => {\n    if (!active) return;\n    const token = {};\n    modalStack.push(token);\n    keyToken.current = token;\n    exit.current = null;\n\n    function handle(e: KeyboardEvent) {\n      if (e.defaultPrevented || modalStack[modalStack.length - 1] !== token)\n        return;\n      const dialog = rootRef.current;\n      if (!dialog) return;\n      if (e.key === 'Escape') {\n        if (latest.current.closeOnEscape) latest.current.onClose?.();\n        return;\n      }\n      if (e.key !== 'Tab' || !latest.current.manageFocus) return;\n      const focusable = getFocusable(dialog);\n      if (focusable.length === 0) {\n        e.preventDefault();\n        dialog.focus();\n        return;\n      }\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      const current = document.activeElement;\n      const outside = !dialog.contains(current);\n      if (e.shiftKey) {\n        if (outside || current === first || current === dialog) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else if (outside || current === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    }\n    document.addEventListener('keydown', handle);\n    return () => {\n      document.removeEventListener('keydown', handle);\n      const index = modalStack.indexOf(token);\n      exit.current = {\n        wasTop: index === modalStack.length - 1,\n        below: modalStack[index - 1],\n      };\n      modalStack.splice(index, 1);\n    };\n  }, [rootRef, active]);\n}\n"],"names":["FOCUSABLE_SELECTOR","isHidden","el","root","node","style","getFocusable","STACK_KEY","stackHost","modalStack","useModalFocus","rootRef","initialFocusRef","closeOnEscape","manageFocus","onClose","active","manageFocusOnMount","useRef","initialFocusRefRef","latest","useLayoutEffect","keyToken","exit","useEffect","previous","shouldRestoreFocus","top","token","target","_a","handle","dialog","_b","focusable","first","last","current","outside","index"],"mappings":"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"}

package/dist/hooks/use-modal-focus.d.ts

@@ -0,0 +1,34 @@
+import { RefObject } from 'react';
+export interface UseModalFocusOptions {
+    /** Element to focus on mount. Falls back to the dialog root. */
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    /** Close on Escape. Default true. */
+    closeOnEscape?: boolean;
+    /**
+     * Initial focus, Tab trap and focus restore. Set false when the host owns
+     * focus (e.g. a floating-ui focus manager). The modal still joins the stack,
+     * so modals below it stay inert. Initial focus and restore use the value at
+     * mount; the Tab trap follows later updates (like `closeOnEscape`). Default
+     * true.
+     */
+    manageFocus?: boolean;
+    onClose?: () => void;
+    /**
+     * When false (e.g. during an exit transition) Tab and Escape are no longer
+     * handled and the modal leaves the stack, but focus is still restored on
+     * unmount. Default true.
+     */
+    active?: boolean;
+}
+/**
+ * Dialog focus and keyboard behavior for a modal panel: initial focus, Tab trap
+ * (focusable elements computed at keypress), Escape (skipped when already
+ * handled), and focus restore on unmount.
+ *
+ * Tab and Escape are handled by one document listener, so the trap still holds
+ * when focus sits outside the dialog (e.g. after a backdrop click), and only
+ * the topmost active modal responds. Events whose default was prevented (by an
+ * inner widget or the host's `onKeyDown`) are ignored.
+ */
+export declare function useModalFocus(rootRef: RefObject<HTMLElement | null>, { initialFocusRef, closeOnEscape, manageFocus, onClose, active, }: UseModalFocusOptions): void;
+//# sourceMappingURL=use-modal-focus.d.ts.map

package/dist/hooks/use-modal-focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-modal-focus.d.ts","sourceRoot":"","sources":["../../src/hooks/use-modal-focus.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAmDvC,MAAM,WAAW,oBAAoB;IACnC,gEAAgE;IAChE,eAAe,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAChD,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAC3B,OAAO,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACtC,EACE,eAAe,EACf,aAAoB,EACpB,WAAkB,EAClB,OAAO,EACP,MAAa,GACd,EAAE,oBAAoB,GACtB,IAAI,CA2FN"}

package/dist/hooks/use-modal-focus.js

@@ -0,0 +1,93 @@
+import { useRef as d, useLayoutEffect as A, useEffect as S } from "react";
+const F = [
+  "a[href]",
+  "area[href]",
+  "button:not([disabled])",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "summary",
+  '[contenteditable=""]',
+  '[contenteditable="true"]',
+  "[tabindex]"
+].join(",");
+function O(r, o) {
+  for (let t = r; t; t = t.parentElement) {
+    if (t.hidden || t.hasAttribute("inert") || t.getAttribute("aria-hidden") === "true") return !0;
+    const i = getComputedStyle(t);
+    if (i.display === "none" || t === r && i.visibility === "hidden") return !0;
+    if (t === o) break;
+  }
+  return !1;
+}
+function C(r) {
+  return Array.from(
+    r.querySelectorAll(F)
+  ).filter(
+    (o) => o.tabIndex >= 0 && !o.matches(":disabled") && !O(o, r)
+  );
+}
+const h = Symbol.for("@mattermost/compass-ui/modal-stack/v1"), y = globalThis, u = y[h] ?? (y[h] = []);
+function M(r, {
+  initialFocusRef: o,
+  closeOnEscape: t = !0,
+  manageFocus: i = !0,
+  onClose: v,
+  active: g = !0
+}) {
+  const T = d(i), E = d(o), m = d({ closeOnEscape: t, manageFocus: i, onClose: v });
+  A(() => {
+    E.current = o, m.current = { closeOnEscape: t, manageFocus: i, onClose: v };
+  });
+  const k = d(null), l = d(
+    null
+  );
+  S(() => {
+    var s;
+    if (!T.current) return;
+    const c = document.activeElement;
+    function b() {
+      const f = u[u.length - 1], a = k.current;
+      return a && u.includes(a) ? f === a : l.current ? l.current.wasTop && f === l.current.below : f === void 0;
+    }
+    const e = r.current, n = (s = E.current) == null ? void 0 : s.current;
+    return n && (e != null && e.contains(n)) && n.focus(), (!n || document.activeElement !== n) && (e == null || e.focus()), () => {
+      b() && c && c.isConnected && typeof c.focus == "function" && c.focus();
+    };
+  }, [r]), S(() => {
+    if (!g) return;
+    const c = {};
+    u.push(c), k.current = c, l.current = null;
+    function b(e) {
+      var w, L;
+      if (e.defaultPrevented || u[u.length - 1] !== c)
+        return;
+      const n = r.current;
+      if (!n) return;
+      if (e.key === "Escape") {
+        m.current.closeOnEscape && ((L = (w = m.current).onClose) == null || L.call(w));
+        return;
+      }
+      if (e.key !== "Tab" || !m.current.manageFocus) return;
+      const s = C(n);
+      if (s.length === 0) {
+        e.preventDefault(), n.focus();
+        return;
+      }
+      const f = s[0], a = s[s.length - 1], p = document.activeElement, x = !n.contains(p);
+      e.shiftKey ? (x || p === f || p === n) && (e.preventDefault(), a.focus()) : (x || p === a) && (e.preventDefault(), f.focus());
+    }
+    return document.addEventListener("keydown", b), () => {
+      document.removeEventListener("keydown", b);
+      const e = u.indexOf(c);
+      l.current = {
+        wasTop: e === u.length - 1,
+        below: u[e - 1]
+      }, u.splice(e, 1);
+    };
+  }, [r, g]);
+}
+export {
+  M as useModalFocus
+};
+//# sourceMappingURL=use-modal-focus.js.map

package/dist/hooks/use-modal-focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-modal-focus.js","sources":["../../src/hooks/use-modal-focus.ts"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef } from 'react';\nimport type { RefObject } from 'react';\n\nconst FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  'summary',\n  '[contenteditable=\"\"]',\n  '[contenteditable=\"true\"]',\n  '[tabindex]',\n].join(',');\n\nfunction isHidden(el: HTMLElement, root: HTMLElement): boolean {\n  for (let node: HTMLElement | null = el; node; node = node.parentElement) {\n    if (node.hidden || node.hasAttribute('inert')) return true;\n    if (node.getAttribute('aria-hidden') === 'true') return true;\n    const style = getComputedStyle(node);\n    if (style.display === 'none') return true;\n    if (node === el && style.visibility === 'hidden') return true;\n    if (node === root) break;\n  }\n  return false;\n}\n\nfunction getFocusable(root: HTMLElement): HTMLElement[] {\n  return Array.from(\n    root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n  ).filter(\n    (el) => el.tabIndex >= 0 && !el.matches(':disabled') && !isHidden(el, root),\n  );\n}\n\n/**\n * Open modals in mount order; only the last one reacts to Tab and Escape.\n * Shared through `globalThis` so compass-ui copies bundled by plugins agree on\n * which modal is topmost.\n *\n * **Frozen v1 protocol** (additive-only, like tokens): opaque `{}` tokens,\n * push while active, splice on leave, last entry is top. Do not change the\n * entry shape or those rules in place — mint `…/modal-stack/v2` instead.\n * A new key means new copies stop cooperating with old ones.\n */\nconst STACK_KEY = Symbol.for('@mattermost/compass-ui/modal-stack/v1');\nconst stackHost = globalThis as typeof globalThis & {\n  [STACK_KEY]?: object[];\n};\nconst modalStack: object[] = (stackHost[STACK_KEY] ??= []);\n\nexport interface UseModalFocusOptions {\n  /** Element to focus on mount. Falls back to the dialog root. */\n  initialFocusRef?: RefObject<HTMLElement | null>;\n  /** Close on Escape. Default true. */\n  closeOnEscape?: boolean;\n  /**\n   * Initial focus, Tab trap and focus restore. Set false when the host owns\n   * focus (e.g. a floating-ui focus manager). The modal still joins the stack,\n   * so modals below it stay inert. Initial focus and restore use the value at\n   * mount; the Tab trap follows later updates (like `closeOnEscape`). Default\n   * true.\n   */\n  manageFocus?: boolean;\n  onClose?: () => void;\n  /**\n   * When false (e.g. during an exit transition) Tab and Escape are no longer\n   * handled and the modal leaves the stack, but focus is still restored on\n   * unmount. Default true.\n   */\n  active?: boolean;\n}\n\n/**\n * Dialog focus and keyboard behavior for a modal panel: initial focus, Tab trap\n * (focusable elements computed at keypress), Escape (skipped when already\n * handled), and focus restore on unmount.\n *\n * Tab and Escape are handled by one document listener, so the trap still holds\n * when focus sits outside the dialog (e.g. after a backdrop click), and only\n * the topmost active modal responds. Events whose default was prevented (by an\n * inner widget or the host's `onKeyDown`) are ignored.\n */\nexport function useModalFocus(\n  rootRef: RefObject<HTMLElement | null>,\n  {\n    initialFocusRef,\n    closeOnEscape = true,\n    manageFocus = true,\n    onClose,\n    active = true,\n  }: UseModalFocusOptions,\n): void {\n  // Initial focus + restore only run once; the Tab trap reads `manageFocus` live.\n  const manageFocusOnMount = useRef(manageFocus);\n  const initialFocusRefRef = useRef(initialFocusRef);\n  const latest = useRef({ closeOnEscape, manageFocus, onClose });\n  // Commit-only writes: avoid leaking options from a discarded concurrent render,\n  // without the post-paint stale window of a passive effect.\n  useLayoutEffect(() => {\n    initialFocusRefRef.current = initialFocusRef;\n    latest.current = { closeOnEscape, manageFocus, onClose };\n  });\n  const keyToken = useRef<object | null>(null);\n  // Stack position recorded when the token leaves the stack (exit start).\n  const exit = useRef<{ wasTop: boolean; below: object | undefined } | null>(\n    null,\n  );\n\n  useEffect(() => {\n    if (!manageFocusOnMount.current) return;\n    const previous = document.activeElement as HTMLElement | null;\n    function shouldRestoreFocus(): boolean {\n      const top = modalStack[modalStack.length - 1];\n      const token = keyToken.current;\n      if (token && modalStack.includes(token)) return top === token;\n      if (!exit.current) return top === undefined;\n      return exit.current.wasTop && top === exit.current.below;\n    }\n    const root = rootRef.current;\n    const target = initialFocusRefRef.current?.current;\n    if (target && root?.contains(target)) target.focus();\n    if (!target || document.activeElement !== target) root?.focus();\n    return () => {\n      if (\n        shouldRestoreFocus() &&\n        previous &&\n        previous.isConnected &&\n        typeof previous.focus === 'function'\n      ) {\n        previous.focus();\n      }\n    };\n  }, [rootRef]);\n\n  useEffect(() => {\n    if (!active) return;\n    const token = {};\n    modalStack.push(token);\n    keyToken.current = token;\n    exit.current = null;\n\n    function handle(e: KeyboardEvent) {\n      if (e.defaultPrevented || modalStack[modalStack.length - 1] !== token)\n        return;\n      const dialog = rootRef.current;\n      if (!dialog) return;\n      if (e.key === 'Escape') {\n        if (latest.current.closeOnEscape) latest.current.onClose?.();\n        return;\n      }\n      if (e.key !== 'Tab' || !latest.current.manageFocus) return;\n      const focusable = getFocusable(dialog);\n      if (focusable.length === 0) {\n        e.preventDefault();\n        dialog.focus();\n        return;\n      }\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      const current = document.activeElement;\n      const outside = !dialog.contains(current);\n      if (e.shiftKey) {\n        if (outside || current === first || current === dialog) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else if (outside || current === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    }\n    document.addEventListener('keydown', handle);\n    return () => {\n      document.removeEventListener('keydown', handle);\n      const index = modalStack.indexOf(token);\n      exit.current = {\n        wasTop: index === modalStack.length - 1,\n        below: modalStack[index - 1],\n      };\n      modalStack.splice(index, 1);\n    };\n  }, [rootRef, active]);\n}\n"],"names":["FOCUSABLE_SELECTOR","isHidden","el","root","node","style","getFocusable","STACK_KEY","stackHost","modalStack","useModalFocus","rootRef","initialFocusRef","closeOnEscape","manageFocus","onClose","active","manageFocusOnMount","useRef","initialFocusRefRef","latest","useLayoutEffect","keyToken","exit","useEffect","previous","shouldRestoreFocus","top","token","target","_a","handle","dialog","_b","focusable","first","last","current","outside","index"],"mappings":"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"}

package/dist/hooks/use-outside-close.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react");function m(t,n,u,e){o.useEffect(()=>{if(!n)return;function r(d){var i,c;const s=d.target;(i=t.current)!=null&&i.contains(s)||(c=e==null?void 0:e.current)!=null&&c.contains(s)||u()}return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[t,e,n,u])}exports.useOutsideClose=m;
+//# sourceMappingURL=use-outside-close.cjs.map

package/dist/hooks/use-outside-close.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-outside-close.cjs","sources":["../../src/hooks/use-outside-close.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport type { RefObject } from 'react';\n\ntype MaybeRef = RefObject<HTMLElement | null>;\n\n/**\n * Closes a dropdown or popover when the user mousedowns outside the container(s).\n * Listeners attach only while `open` is true.\n *\n * Pass `portalRef` when the popup is portaled outside `ref` so menu clicks\n * still count as inside.\n *\n * @param ref - Primary container (e.g. field root).\n * @param open - When true, the listener is active.\n * @param onClose - Called when a mousedown lands outside all containers.\n * @param portalRef - Optional portaled surface to treat as inside.\n */\nexport function useOutsideClose(\n  ref: MaybeRef,\n  open: boolean,\n  onClose: () => void,\n  portalRef?: MaybeRef,\n): void {\n  useEffect(() => {\n    if (!open) return;\n    function handle(e: MouseEvent) {\n      const target = e.target as Node;\n      if (ref.current?.contains(target)) return;\n      if (portalRef?.current?.contains(target)) return;\n      onClose();\n    }\n    document.addEventListener('mousedown', handle);\n    return () => document.removeEventListener('mousedown', handle);\n  }, [ref, portalRef, open, onClose]);\n}\n"],"names":["useOutsideClose","ref","open","onClose","portalRef","useEffect","handle","e","target","_a","_b"],"mappings":"yGAiBO,SAASA,EACdC,EACAC,EACAC,EACAC,EACM,CACNC,EAAAA,UAAU,IAAM,CACd,GAAI,CAACH,EAAM,OACX,SAASI,EAAOC,EAAe,SAC7B,MAAMC,EAASD,EAAE,QACbE,EAAAR,EAAI,UAAJ,MAAAQ,EAAa,SAASD,KACtBE,EAAAN,GAAA,YAAAA,EAAW,UAAX,MAAAM,EAAoB,SAASF,IACjCL,EAAA,CACF,CACA,gBAAS,iBAAiB,YAAaG,CAAM,EACtC,IAAM,SAAS,oBAAoB,YAAaA,CAAM,CAC/D,EAAG,CAACL,EAAKG,EAAWF,EAAMC,CAAO,CAAC,CACpC"}

package/dist/hooks/use-outside-close.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+type MaybeRef = RefObject<HTMLElement | null>;
+/**
+ * Closes a dropdown or popover when the user mousedowns outside the container(s).
+ * Listeners attach only while `open` is true.
+ *
+ * Pass `portalRef` when the popup is portaled outside `ref` so menu clicks
+ * still count as inside.
+ *
+ * @param ref - Primary container (e.g. field root).
+ * @param open - When true, the listener is active.
+ * @param onClose - Called when a mousedown lands outside all containers.
+ * @param portalRef - Optional portaled surface to treat as inside.
+ */
+export declare function useOutsideClose(ref: MaybeRef, open: boolean, onClose: () => void, portalRef?: MaybeRef): void;
+export {};
+//# sourceMappingURL=use-outside-close.d.ts.map

package/dist/hooks/use-outside-close.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-outside-close.d.ts","sourceRoot":"","sources":["../../src/hooks/use-outside-close.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,QAAQ,GAAG,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;AAE9C;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,QAAQ,EACb,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,MAAM,IAAI,EACnB,SAAS,CAAC,EAAE,QAAQ,GACnB,IAAI,CAYN"}

package/dist/hooks/use-outside-close.js

@@ -0,0 +1,16 @@
+import { useEffect as o } from "react";
+function v(t, e, u, n) {
+  o(() => {
+    if (!e) return;
+    function r(d) {
+      var c, s;
+      const i = d.target;
+      (c = t.current) != null && c.contains(i) || (s = n == null ? void 0 : n.current) != null && s.contains(i) || u();
+    }
+    return document.addEventListener("mousedown", r), () => document.removeEventListener("mousedown", r);
+  }, [t, n, e, u]);
+}
+export {
+  v as useOutsideClose
+};
+//# sourceMappingURL=use-outside-close.js.map

package/dist/hooks/use-outside-close.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-outside-close.js","sources":["../../src/hooks/use-outside-close.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport type { RefObject } from 'react';\n\ntype MaybeRef = RefObject<HTMLElement | null>;\n\n/**\n * Closes a dropdown or popover when the user mousedowns outside the container(s).\n * Listeners attach only while `open` is true.\n *\n * Pass `portalRef` when the popup is portaled outside `ref` so menu clicks\n * still count as inside.\n *\n * @param ref - Primary container (e.g. field root).\n * @param open - When true, the listener is active.\n * @param onClose - Called when a mousedown lands outside all containers.\n * @param portalRef - Optional portaled surface to treat as inside.\n */\nexport function useOutsideClose(\n  ref: MaybeRef,\n  open: boolean,\n  onClose: () => void,\n  portalRef?: MaybeRef,\n): void {\n  useEffect(() => {\n    if (!open) return;\n    function handle(e: MouseEvent) {\n      const target = e.target as Node;\n      if (ref.current?.contains(target)) return;\n      if (portalRef?.current?.contains(target)) return;\n      onClose();\n    }\n    document.addEventListener('mousedown', handle);\n    return () => document.removeEventListener('mousedown', handle);\n  }, [ref, portalRef, open, onClose]);\n}\n"],"names":["useOutsideClose","ref","open","onClose","portalRef","useEffect","handle","e","target","_a","_b"],"mappings":";AAiBO,SAASA,EACdC,GACAC,GACAC,GACAC,GACM;AACN,EAAAC,EAAU,MAAM;AACd,QAAI,CAACH,EAAM;AACX,aAASI,EAAOC,GAAe;;AAC7B,YAAMC,IAASD,EAAE;AACjB,OAAIE,IAAAR,EAAI,YAAJ,QAAAQ,EAAa,SAASD,OACtBE,IAAAN,KAAA,gBAAAA,EAAW,YAAX,QAAAM,EAAoB,SAASF,MACjCL,EAAA;AAAA,IACF;AACA,oBAAS,iBAAiB,aAAaG,CAAM,GACtC,MAAM,SAAS,oBAAoB,aAAaA,CAAM;AAAA,EAC/D,GAAG,CAACL,GAAKG,GAAWF,GAAMC,CAAO,CAAC;AACpC;"}

package/dist/hooks/use-popover-transition.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),m=require("../utils/duration.cjs"),s=150;function f(e,i="--duration-quick"){const[a,n]=r.useState(e),[u,o]=r.useState(!1);return r.useEffect(()=>{if(e){n(!0);let t=0;const l=requestAnimationFrame(()=>{t=requestAnimationFrame(()=>o(!0))});return()=>{cancelAnimationFrame(l),t&&cancelAnimationFrame(t)}}o(!1);const c=window.setTimeout(()=>n(!1),m.readDurationMs(i,s));return()=>window.clearTimeout(c)},[e,i]),{mounted:a,visible:u}}exports.POPOVER_TRANSITION_MS=s;exports.usePopoverTransition=f;
+//# sourceMappingURL=use-popover-transition.cjs.map

package/dist/hooks/use-popover-transition.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-popover-transition.cjs","sources":["../../src/hooks/use-popover-transition.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { readDurationMs } from '@/utils/duration';\n\n/** Fallback for `--duration-quick` when the token is not available. */\nexport const POPOVER_TRANSITION_MS = 150;\n\n/**\n * Keeps a surface mounted for the duration of its exit animation so the close\n * transition can play before React unmounts the node. The exit wait is read\n * from `durationToken` (default `--duration-quick`) so it always matches the\n * CSS transition. See CLAUDE.md: \"Animation: popover panel open/close\".\n */\nexport function usePopoverTransition(\n  open: boolean,\n  durationToken = '--duration-quick',\n) {\n  const [mounted, setMounted] = useState(open);\n  const [visible, setVisible] = useState(false);\n\n  useEffect(() => {\n    if (open) {\n      setMounted(true);\n      let raf2 = 0;\n      const raf1 = requestAnimationFrame(() => {\n        raf2 = requestAnimationFrame(() => setVisible(true));\n      });\n      return () => {\n        cancelAnimationFrame(raf1);\n        if (raf2) cancelAnimationFrame(raf2);\n      };\n    }\n    setVisible(false);\n    const t = window.setTimeout(\n      () => setMounted(false),\n      readDurationMs(durationToken, POPOVER_TRANSITION_MS),\n    );\n    return () => window.clearTimeout(t);\n  }, [open, durationToken]);\n\n  return { mounted, visible };\n}\n"],"names":["POPOVER_TRANSITION_MS","usePopoverTransition","open","durationToken","mounted","setMounted","useState","visible","setVisible","useEffect","raf2","raf1","t","readDurationMs"],"mappings":"4IAIaA,EAAwB,IAQ9B,SAASC,EACdC,EACAC,EAAgB,mBAChB,CACA,KAAM,CAACC,EAASC,CAAU,EAAIC,EAAAA,SAASJ,CAAI,EACrC,CAACK,EAASC,CAAU,EAAIF,EAAAA,SAAS,EAAK,EAE5CG,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAIP,EAAM,CACRG,EAAW,EAAI,EACf,IAAIK,EAAO,EACX,MAAMC,EAAO,sBAAsB,IAAM,CACvCD,EAAO,sBAAsB,IAAMF,EAAW,EAAI,CAAC,CACrD,CAAC,EACD,MAAO,IAAM,CACX,qBAAqBG,CAAI,EACrBD,wBAA2BA,CAAI,CACrC,CACF,CACAF,EAAW,EAAK,EAChB,MAAMI,EAAI,OAAO,WACf,IAAMP,EAAW,EAAK,EACtBQ,EAAAA,eAAeV,EAAeH,CAAqB,CAAA,EAErD,MAAO,IAAM,OAAO,aAAaY,CAAC,CACpC,EAAG,CAACV,EAAMC,CAAa,CAAC,EAEjB,CAAE,QAAAC,EAAS,QAAAG,CAAA,CACpB"}

package/dist/hooks/use-popover-transition.d.ts

@@ -0,0 +1,13 @@
+/** Fallback for `--duration-quick` when the token is not available. */
+export declare const POPOVER_TRANSITION_MS = 150;
+/**
+ * Keeps a surface mounted for the duration of its exit animation so the close
+ * transition can play before React unmounts the node. The exit wait is read
+ * from `durationToken` (default `--duration-quick`) so it always matches the
+ * CSS transition. See CLAUDE.md: "Animation: popover panel open/close".
+ */
+export declare function usePopoverTransition(open: boolean, durationToken?: string): {
+    mounted: boolean;
+    visible: boolean;
+};
+//# sourceMappingURL=use-popover-transition.d.ts.map

package/dist/hooks/use-popover-transition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-popover-transition.d.ts","sourceRoot":"","sources":["../../src/hooks/use-popover-transition.ts"],"names":[],"mappings":"AAGA,uEAAuE;AACvE,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,OAAO,EACb,aAAa,SAAqB;;;EA0BnC"}

package/dist/hooks/use-popover-transition.js

@@ -0,0 +1,29 @@
+import { useState as o, useEffect as c } from "react";
+import { readDurationMs as f } from "../utils/duration.js";
+const l = 150;
+function w(e, r = "--duration-quick") {
+  const [a, i] = o(e), [s, n] = o(!1);
+  return c(() => {
+    if (e) {
+      i(!0);
+      let t = 0;
+      const m = requestAnimationFrame(() => {
+        t = requestAnimationFrame(() => n(!0));
+      });
+      return () => {
+        cancelAnimationFrame(m), t && cancelAnimationFrame(t);
+      };
+    }
+    n(!1);
+    const u = window.setTimeout(
+      () => i(!1),
+      f(r, l)
+    );
+    return () => window.clearTimeout(u);
+  }, [e, r]), { mounted: a, visible: s };
+}
+export {
+  l as POPOVER_TRANSITION_MS,
+  w as usePopoverTransition
+};
+//# sourceMappingURL=use-popover-transition.js.map

package/dist/hooks/use-popover-transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-popover-transition.js","sources":["../../src/hooks/use-popover-transition.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { readDurationMs } from '@/utils/duration';\n\n/** Fallback for `--duration-quick` when the token is not available. */\nexport const POPOVER_TRANSITION_MS = 150;\n\n/**\n * Keeps a surface mounted for the duration of its exit animation so the close\n * transition can play before React unmounts the node. The exit wait is read\n * from `durationToken` (default `--duration-quick`) so it always matches the\n * CSS transition. See CLAUDE.md: \"Animation: popover panel open/close\".\n */\nexport function usePopoverTransition(\n  open: boolean,\n  durationToken = '--duration-quick',\n) {\n  const [mounted, setMounted] = useState(open);\n  const [visible, setVisible] = useState(false);\n\n  useEffect(() => {\n    if (open) {\n      setMounted(true);\n      let raf2 = 0;\n      const raf1 = requestAnimationFrame(() => {\n        raf2 = requestAnimationFrame(() => setVisible(true));\n      });\n      return () => {\n        cancelAnimationFrame(raf1);\n        if (raf2) cancelAnimationFrame(raf2);\n      };\n    }\n    setVisible(false);\n    const t = window.setTimeout(\n      () => setMounted(false),\n      readDurationMs(durationToken, POPOVER_TRANSITION_MS),\n    );\n    return () => window.clearTimeout(t);\n  }, [open, durationToken]);\n\n  return { mounted, visible };\n}\n"],"names":["POPOVER_TRANSITION_MS","usePopoverTransition","open","durationToken","mounted","setMounted","useState","visible","setVisible","useEffect","raf2","raf1","t","readDurationMs"],"mappings":";;AAIO,MAAMA,IAAwB;AAQ9B,SAASC,EACdC,GACAC,IAAgB,oBAChB;AACA,QAAM,CAACC,GAASC,CAAU,IAAIC,EAASJ,CAAI,GACrC,CAACK,GAASC,CAAU,IAAIF,EAAS,EAAK;AAE5C,SAAAG,EAAU,MAAM;AACd,QAAIP,GAAM;AACR,MAAAG,EAAW,EAAI;AACf,UAAIK,IAAO;AACX,YAAMC,IAAO,sBAAsB,MAAM;AACvC,QAAAD,IAAO,sBAAsB,MAAMF,EAAW,EAAI,CAAC;AAAA,MACrD,CAAC;AACD,aAAO,MAAM;AACX,6BAAqBG,CAAI,GACrBD,0BAA2BA,CAAI;AAAA,MACrC;AAAA,IACF;AACA,IAAAF,EAAW,EAAK;AAChB,UAAMI,IAAI,OAAO;AAAA,MACf,MAAMP,EAAW,EAAK;AAAA,MACtBQ,EAAeV,GAAeH,CAAqB;AAAA,IAAA;AAErD,WAAO,MAAM,OAAO,aAAaY,CAAC;AAAA,EACpC,GAAG,CAACV,GAAMC,CAAa,CAAC,GAEjB,EAAE,SAAAC,GAAS,SAAAG,EAAA;AACpB;"}

package/dist/illustrations/ai-copilot-intro.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./ai-copilot-intro.svg.cjs");exports.default=e.default;
+//# sourceMappingURL=ai-copilot-intro.cjs.map