gridsmith-ui 0.30.1 → 0.31.0

package/dist/{chunk-IELIF4PJ.js.map → chunk-HUNEJIKV.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../showcase/src/lib/use-text-overflow.ts"],"names":[],"mappings":";;;;AASA,IAAM,QAAA,uBAAe,OAAA,EAAwC;AAC7D,IAAI,cAAA,GAAwC,IAAA;AAC5C,IAAI,KAAA,GAAuB,IAAA;AAC3B,IAAM,eAAA,uBAAsB,GAAA,EAAa;AAEzC,SAAS,iBAAA,GAAoC;AAC3C,EAAA,IAAI,gBAAgB,OAAO,cAAA;AAC3B,EAAA,cAAA,GAAiB,IAAI,cAAA,CAAe,CAAC,OAAA,KAAY;AAC/C,IAAA,KAAA,MAAW,SAAS,OAAA,EAAS;AAC3B,MAAA,eAAA,CAAgB,GAAA,CAAI,MAAM,MAAM,CAAA;AAAA,IAClC;AACA,IAAA,IAAI,UAAU,IAAA,EAAM;AAClB,MAAA,KAAA,GAAQ,sBAAsB,KAAK,CAAA;AAAA,IACrC;AAAA,EACF,CAAC,CAAA;AACD,EAAA,OAAO,cAAA;AACT;AAEA,SAAS,KAAA,GAAQ;AACf,EAAA,KAAA,GAAQ,IAAA;AACR,EAAA,KAAA,MAAW,MAAM,eAAA,EAAiB;AAChC,IAAA,MAAM,SAAA,GAAY,QAAA,CAAS,GAAA,CAAI,EAAE,CAAA;AACjC,IAAA,IAAI,SAAA,EAAW;AACb,MAAA,KAAA,MAAW,EAAA,IAAM,WAAW,EAAA,EAAG;AAAA,IACjC;AAAA,EACF;AACA,EAAA,eAAA,CAAgB,KAAA,EAAM;AACxB;AAEA,SAAS,OAAA,CAAQ,IAAa,QAAA,EAA4B;AACxD,EAAA,IAAI,GAAA,GAAM,QAAA,CAAS,GAAA,CAAI,EAAE,CAAA;AACzB,EAAA,IAAI,CAAC,GAAA,EAAK;AACR,IAAA,GAAA,uBAAU,GAAA,EAAI;AACd,IAAA,QAAA,CAAS,GAAA,CAAI,IAAI,GAAG,CAAA;AAAA,EACtB;AACA,EAAA,GAAA,CAAI,IAAI,QAAQ,CAAA;AAChB,EAAA,IAAI,GAAA,CAAI,SAAS,CAAA,EAAG;AAClB,IAAA,iBAAA,EAAkB,CAAE,QAAQ,EAAE,CAAA;AAAA,EAChC;AACF;AAEA,SAAS,SAAA,CAAU,IAAa,QAAA,EAA4B;AAC1D,EAAA,MAAM,GAAA,GAAM,QAAA,CAAS,GAAA,CAAI,EAAE,CAAA;AAC3B,EAAA,IAAI,CAAC,GAAA,EAAK;AACV,EAAA,GAAA,CAAI,OAAO,QAAQ,CAAA;AACnB,EAAA,IAAI,GAAA,CAAI,SAAS,CAAA,EAAG;AAClB,IAAA,QAAA,CAAS,OAAO,EAAE,CAAA;AAClB,IAAA,iBAAA,EAAkB,CAAE,UAAU,EAAE,CAAA;AAAA,EAClC;AACF;AAIA,IAAM,SAAA,GAAY,CAAA;AAElB,SAAS,aAAA,CAAc,IAAiB,KAAA,EAAwB;AAC9D,EAAA,IAAI,SAAS,CAAA,EAAG;AACd,IAAA,OAAO,EAAA,CAAG,WAAA,GAAc,EAAA,CAAG,WAAA,GAAc,SAAA;AAAA,EAC3C;AACA,EAAA,OAAO,EAAA,CAAG,YAAA,GAAe,EAAA,CAAG,YAAA,GAAe,SAAA;AAC7C;AAgCO,SAAS,eAAA,CAAgB,OAAA,GAAkC,EAAC,EAA0B;AAC3F,EAAA,MAAM,EAAE,KAAA,GAAQ,CAAA,EAAG,QAAA,GAAW,KAAA,EAAO,SAAQ,GAAI,OAAA;AACjD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AACpD,EAAA,MAAM,UAAA,GAAa,OAA2B,IAAI,CAAA;AAElD,EAAA,MAAM,aAAA,GAAgB,OAAgC,IAAI,CAAA;AAE1D,EAAA,MAAM,OAAA,GAAU,YAAY,MAAM;AAChC,IAAA,IAAI,CAAC,UAAA,CAAW,OAAA,IAAW,QAAA,EAAU;AACnC,MAAA,cAAA,CAAe,KAAK,CAAA;AACpB,MAAA;AAAA,IACF;AACA,IAAA,MAAM,IAAA,GAAO,aAAA,CAAc,UAAA,CAAW,OAAA,EAAS,KAAK,CAAA;AACpD,IAAA,cAAA,CAAe,CAAC,IAAA,KAAU,IAAA,KAAS,IAAA,GAAO,OAAO,IAAK,CAAA;AAAA,EACxD,CAAA,EAAG,CAAC,KAAA,EAAO,QAAQ,CAAC,CAAA;AAGpB,EAAA,MAAM,QAAA,GAAW,UAA4B,OAAO,CAAA;AAMpD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,QAAA,EAAU;AACZ,MAAA,cAAA,CAAe,KAAK,CAAA;AAAA,IACtB,CAAA,MAAA,IAAW,WAAW,OAAA,EAAS;AAC7B,MAAA,MAAM,IAAA,GAAO,aAAA,CAAc,UAAA,CAAW,OAAA,EAAS,KAAK,CAAA;AACpD,MAAA,cAAA,CAAe,CAAC,IAAA,KAAU,IAAA,KAAS,IAAA,GAAO,OAAO,IAAK,CAAA;AAAA,IACxD;AAAA,EACF,CAAA,EAAG,CAAC,OAAA,EAAS,KAAA,EAAO,QAAQ,CAAC,CAAA;AAG7B,EAAA,MAAM,GAAA,GAAM,WAAA;AAAA,IACV,CAAC,IAAA,KAA6B;AAC5B,MAAA,MAAM,OAAO,UAAA,CAAW,OAAA;AAGxB,MAAA,IAAI,IAAA,IAAQ,cAAc,OAAA,EAAS;AACjC,QAAA,SAAA,CAAU,IAAA,EAAM,cAAc,OAAO,CAAA;AACrC,QAAA,aAAA,CAAc,OAAA,GAAU,IAAA;AAAA,MAC1B;AAEA,MAAA,UAAA,CAAW,OAAA,GAAU,IAAA;AAErB,MAAA,IAAI,IAAA,IAAQ,CAAC,QAAA,EAAU;AAErB,QAAA,MAAM,OAAA,GAA4B,MAAM,QAAA,CAAS,OAAA,IAAU;AAC3D,QAAA,aAAA,CAAc,OAAA,GAAU,OAAA;AACxB,QAAA,OAAA,CAAQ,MAAM,OAAO,CAAA;AAErB,QAAA,MAAM,OAAA,GAAU,aAAA,CAAc,IAAA,EAAM,KAAK,CAAA;AACzC,QAAA,cAAA,CAAe,OAAO,CAAA;AAAA,MACxB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,KAAA,EAAO,QAAA,EAAU,QAAQ;AAAA,GAC5B;AAGA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,UAAA,CAAW,OAAA,IAAW,aAAA,CAAc,OAAA,EAAS;AAC/C,QAAA,SAAA,CAAU,UAAA,CAAW,OAAA,EAAS,aAAA,CAAc,OAAO,CAAA;AAAA,MACrD;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,EAAE,KAAK,WAAA,EAAY;AAC5B","file":"chunk-IELIF4PJ.js","sourcesContent":["import { useState, useCallback, useRef, useEffect } from \"react\";\nimport { useLatest } from \"./use-latest\";\n\n// ─── Shared ResizeObserver (singleton per document) ────────────────────────────\n// All useTextOverflow instances share a single ResizeObserver. This avoids the\n// performance cost of 80+ independent observers on pages with many truncated elements.\n\ntype OverflowCallback = () => void;\n\nconst registry = new WeakMap<Element, Set<OverflowCallback>>();\nlet sharedObserver: ResizeObserver | null = null;\nlet rafId: number | null = null;\nconst pendingElements = new Set<Element>();\n\nfunction getSharedObserver(): ResizeObserver {\n  if (sharedObserver) return sharedObserver;\n  sharedObserver = new ResizeObserver((entries) => {\n    for (const entry of entries) {\n      pendingElements.add(entry.target);\n    }\n    if (rafId === null) {\n      rafId = requestAnimationFrame(flush);\n    }\n  });\n  return sharedObserver;\n}\n\nfunction flush() {\n  rafId = null;\n  for (const el of pendingElements) {\n    const callbacks = registry.get(el);\n    if (callbacks) {\n      for (const cb of callbacks) cb();\n    }\n  }\n  pendingElements.clear();\n}\n\nfunction observe(el: Element, callback: OverflowCallback) {\n  let set = registry.get(el);\n  if (!set) {\n    set = new Set();\n    registry.set(el, set);\n  }\n  set.add(callback);\n  if (set.size === 1) {\n    getSharedObserver().observe(el);\n  }\n}\n\nfunction unobserve(el: Element, callback: OverflowCallback) {\n  const set = registry.get(el);\n  if (!set) return;\n  set.delete(callback);\n  if (set.size === 0) {\n    registry.delete(el);\n    getSharedObserver().unobserve(el);\n  }\n}\n\n// ─── Overflow detection ────────────────────────────────────────────────────────\n\nconst TOLERANCE = 1; // px — accounts for integer rounding in scrollWidth/clientWidth\n\nfunction checkOverflow(el: HTMLElement, lines: number): boolean {\n  if (lines <= 1) {\n    return el.scrollWidth - el.clientWidth > TOLERANCE;\n  }\n  return el.scrollHeight - el.clientHeight > TOLERANCE;\n}\n\n// ─── Hook ──────────────────────────────────────────────────────────────────────\n\nexport interface UseTextOverflowOptions {\n  /** Number of visible lines before truncation. 1 = single-line ellipsis, >1 = line-clamp. */\n  lines?: number;\n  /** Disable overflow detection (e.g. when component is hidden) */\n  disabled?: boolean;\n  /** Content key — triggers re-check when this value changes (use for dynamic text content) */\n  content?: unknown;\n}\n\nexport interface UseTextOverflowResult {\n  /** Callback ref — attach to the element that has truncation CSS applied */\n  ref: (node: HTMLElement | null) => void;\n  /** True when the element's text is currently overflowing/truncated */\n  isTruncated: boolean;\n}\n\n/**\n * Detects whether an element's text content is overflowing (truncated).\n * Uses a single shared ResizeObserver for all instances on the page.\n *\n * @example\n * const { ref, isTruncated } = useTextOverflow({ lines: 1 });\n * return (\n *   <Tooltip content={fullText} disabled={!isTruncated}>\n *     <span ref={ref} className=\"truncate\">{fullText}</span>\n *   </Tooltip>\n * );\n */\nexport function useTextOverflow(options: UseTextOverflowOptions = {}): UseTextOverflowResult {\n  const { lines = 1, disabled = false, content } = options;\n  const [isTruncated, setIsTruncated] = useState(false);\n  const elementRef = useRef<HTMLElement | null>(null);\n  // The observer-registered wrapper delegates to the latest check logic via checkRef.\n  const registeredRef = useRef<OverflowCallback | null>(null);\n\n  const doCheck = useCallback(() => {\n    if (!elementRef.current || disabled) {\n      setIsTruncated(false);\n      return;\n    }\n    const next = checkOverflow(elementRef.current, lines);\n    setIsTruncated((prev) => (prev !== next ? next : prev));\n  }, [lines, disabled]);\n\n  // Latest check logic, updated in a layout effect so the stable wrapper never runs a stale closure.\n  const checkRef = useLatest<OverflowCallback>(doCheck);\n\n  // Re-check when content changes (handles dynamic text like Dropdown selection)\n  // or when disabled state changes\n  // Measures the committed DOM, so it must stay a post-layout effect.\n  /* eslint-disable react-hooks/set-state-in-effect -- overflow is a layout measurement */\n  useEffect(() => {\n    if (disabled) {\n      setIsTruncated(false);\n    } else if (elementRef.current) {\n      const next = checkOverflow(elementRef.current, lines);\n      setIsTruncated((prev) => (prev !== next ? next : prev));\n    }\n  }, [content, lines, disabled]);\n  /* eslint-enable react-hooks/set-state-in-effect */\n\n  const ref = useCallback(\n    (node: HTMLElement | null) => {\n      const prev = elementRef.current;\n\n      // Unregister previous element using the SAME function we registered with\n      if (prev && registeredRef.current) {\n        unobserve(prev, registeredRef.current);\n        registeredRef.current = null;\n      }\n\n      elementRef.current = node;\n\n      if (node && !disabled) {\n        // Stable wrapper that delegates to the latest check logic\n        const wrapper: OverflowCallback = () => checkRef.current?.();\n        registeredRef.current = wrapper;\n        observe(node, wrapper);\n        // Initial check on mount\n        const initial = checkOverflow(node, lines);\n        setIsTruncated(initial);\n      }\n    },\n    [lines, disabled, checkRef],\n  );\n\n  // Cleanup on unmount — uses the registered wrapper, not the check function\n  useEffect(() => {\n    return () => {\n      if (elementRef.current && registeredRef.current) {\n        unobserve(elementRef.current, registeredRef.current);\n      }\n    };\n  }, []);\n\n  return { ref, isTruncated };\n}\n"]}
+{"version":3,"sources":["../../../showcase/src/lib/use-text-overflow.ts"],"names":[],"mappings":"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","file":"chunk-HUNEJIKV.js","sourcesContent":["import { useState, useCallback, useRef, useEffect } from \"react\";\nimport { useLatest } from \"./use-latest\";\n\n// ─── Shared ResizeObserver (singleton per document) ────────────────────────────\n// All useTextOverflow instances share a single ResizeObserver. This avoids the\n// performance cost of 80+ independent observers on pages with many truncated elements.\n\ntype OverflowCallback = () => void;\n\nconst registry = new WeakMap<Element, Set<OverflowCallback>>();\nlet sharedObserver: ResizeObserver | null = null;\nlet rafId: number | null = null;\nconst pendingElements = new Set<Element>();\n\nfunction getSharedObserver(): ResizeObserver {\n  if (sharedObserver) return sharedObserver;\n  sharedObserver = new ResizeObserver((entries) => {\n    for (const entry of entries) {\n      pendingElements.add(entry.target);\n    }\n    if (rafId === null) {\n      rafId = requestAnimationFrame(flush);\n    }\n  });\n  return sharedObserver;\n}\n\nfunction flush() {\n  rafId = null;\n  for (const el of pendingElements) {\n    const callbacks = registry.get(el);\n    if (callbacks) {\n      for (const cb of callbacks) cb();\n    }\n  }\n  pendingElements.clear();\n}\n\nfunction observe(el: Element, callback: OverflowCallback) {\n  let set = registry.get(el);\n  if (!set) {\n    set = new Set();\n    registry.set(el, set);\n  }\n  set.add(callback);\n  if (set.size === 1) {\n    getSharedObserver().observe(el);\n  }\n}\n\nfunction unobserve(el: Element, callback: OverflowCallback) {\n  const set = registry.get(el);\n  if (!set) return;\n  set.delete(callback);\n  if (set.size === 0) {\n    registry.delete(el);\n    getSharedObserver().unobserve(el);\n  }\n}\n\n// ─── Overflow detection ────────────────────────────────────────────────────────\n\nconst TOLERANCE = 1; // px — accounts for integer rounding in scrollWidth/clientWidth\n\nfunction checkOverflow(el: HTMLElement, lines: number): boolean {\n  if (lines <= 1) {\n    return el.scrollWidth - el.clientWidth > TOLERANCE;\n  }\n  return el.scrollHeight - el.clientHeight > TOLERANCE;\n}\n\n// ─── Hook ──────────────────────────────────────────────────────────────────────\n\nexport interface UseTextOverflowOptions {\n  /** Number of visible lines before truncation. 1 = single-line ellipsis, >1 = line-clamp. */\n  lines?: number;\n  /** Disable overflow detection (e.g. when component is hidden) */\n  disabled?: boolean;\n  /** Content key — triggers re-check when this value changes (use for dynamic text content) */\n  content?: unknown;\n}\n\nexport interface UseTextOverflowResult {\n  /** Callback ref — attach to the element that has truncation CSS applied */\n  ref: (node: HTMLElement | null) => void;\n  /** True when the element's text is currently overflowing/truncated */\n  isTruncated: boolean;\n}\n\n/**\n * Detects whether an element's text content is overflowing (truncated).\n * Uses a single shared ResizeObserver for all instances on the page.\n *\n * @example\n * const { ref, isTruncated } = useTextOverflow({ lines: 1 });\n * return (\n *   <Tooltip content={fullText} disabled={!isTruncated}>\n *     <span ref={ref} className=\"truncate\">{fullText}</span>\n *   </Tooltip>\n * );\n */\nexport function useTextOverflow(options: UseTextOverflowOptions = {}): UseTextOverflowResult {\n  const { lines = 1, disabled = false, content } = options;\n  const [isTruncated, setIsTruncated] = useState(false);\n  const elementRef = useRef<HTMLElement | null>(null);\n  // The observer-registered wrapper delegates to the latest check logic via checkRef.\n  const registeredRef = useRef<OverflowCallback | null>(null);\n\n  const doCheck = useCallback(() => {\n    if (!elementRef.current || disabled) {\n      setIsTruncated(false);\n      return;\n    }\n    const next = checkOverflow(elementRef.current, lines);\n    setIsTruncated((prev) => (prev !== next ? next : prev));\n  }, [lines, disabled]);\n\n  // Latest check logic, updated in a layout effect so the stable wrapper never runs a stale closure.\n  const checkRef = useLatest<OverflowCallback>(doCheck);\n\n  // Re-check when content changes (handles dynamic text like Dropdown selection)\n  // or when disabled state changes\n  // Measures the committed DOM, so it must stay a post-layout effect.\n  /* eslint-disable react-hooks/set-state-in-effect -- overflow is a layout measurement */\n  useEffect(() => {\n    if (disabled) {\n      setIsTruncated(false);\n    } else if (elementRef.current) {\n      const next = checkOverflow(elementRef.current, lines);\n      setIsTruncated((prev) => (prev !== next ? next : prev));\n    }\n  }, [content, lines, disabled]);\n  /* eslint-enable react-hooks/set-state-in-effect */\n\n  const ref = useCallback(\n    (node: HTMLElement | null) => {\n      const prev = elementRef.current;\n\n      // Unregister previous element using the SAME function we registered with\n      if (prev && registeredRef.current) {\n        unobserve(prev, registeredRef.current);\n        registeredRef.current = null;\n      }\n\n      elementRef.current = node;\n\n      if (node && !disabled) {\n        // Stable wrapper that delegates to the latest check logic\n        const wrapper: OverflowCallback = () => checkRef.current?.();\n        registeredRef.current = wrapper;\n        observe(node, wrapper);\n        // Initial check on mount\n        const initial = checkOverflow(node, lines);\n        setIsTruncated(initial);\n      }\n    },\n    [lines, disabled, checkRef],\n  );\n\n  // Cleanup on unmount — uses the registered wrapper, not the check function\n  useEffect(() => {\n    return () => {\n      if (elementRef.current && registeredRef.current) {\n        unobserve(elementRef.current, registeredRef.current);\n      }\n    };\n  }, []);\n\n  return { ref, isTruncated };\n}\n"]}

package/dist/{chunk-NEUWZUK6.js → chunk-LE72KHIE.js}

@@ -1,6 +1,5 @@
 "use client";
-import { useLatest, usePosition } from './chunk-WIUGPZOH.js';
-import { cn } from './chunk-YL5KD5RC.js';
+import { cn, useLatest, usePosition } from './chunk-OWQ7M6R7.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRef, useLayoutEffect, useMemo } from 'react';
 import { createPortal } from 'react-dom';
@@ -205,5 +204,5 @@ function MentionList({ id, label, items, more = 0, activeIndex, onActiveIndexCha
 }
 
 export { Avatar, MentionList, foldForSearch, initialsOf, matchMentions, mentionOptionId, shownMentions, useActiveOptionInView };
-//# sourceMappingURL=chunk-NEUWZUK6.js.map
-//# sourceMappingURL=chunk-NEUWZUK6.js.map
+//# sourceMappingURL=chunk-LE72KHIE.js.map
+//# sourceMappingURL=chunk-LE72KHIE.js.map

package/dist/chunk-LE72KHIE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../showcase/src/lib/initials.ts","../../../showcase/src/components/Avatar.tsx","../../../showcase/src/lib/use-active-option.ts","../../../showcase/src/lib/search-text.ts","../../../showcase/src/components/MentionList.tsx"],"names":["useRef","jsxs","jsx"],"mappings":"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","file":"chunk-LE72KHIE.js","sourcesContent":["/**\n * Initials for an avatar. Round 21 (run 58): a builder passed each person's full name as `initials`, and the avatar\n * printed \"Amara Haddad\" across a 40 px circle on every row of the Team table. The avatar now reads what it is given:\n * up to three characters with no space are initials already and stay as they are (\"JB\", \"ABC\"); anything longer is a\n * name, and its first two words give the letters.\n */\n\n/** \"Sarah Chen\" → \"SC\"; \"Acme\" → \"A\"; \"Mary Jane Watson\" → \"MJ\". */\nexport function initialsOf(name: string): string {\n  return name\n    .trim()\n    .split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((word) => Array.from(word)[0] ?? \"\")\n    .join(\"\")\n    .toUpperCase();\n}\n\n/** What an avatar shows for an `initials` value: initials as given, or the initials of a name. */\nexport function toInitials(value: string): string {\n  const s = value.trim();\n  if (!s) return \"\";\n  if (!/\\s/.test(s) && Array.from(s).length <= 3) return s;\n  return initialsOf(s);\n}\n","import { cn } from \"../lib/utils\";\nimport { toInitials } from \"../lib/initials\";\n\nexport type AvatarStatus = \"online\" | \"away\" | \"busy\" | \"offline\";\nexport type AvatarColor = \"auto\" | \"accent\" | \"neutral\" | 1 | 2 | 3 | 4 | 5;\n\ninterface AvatarProps {\n  /** One to three letters (\"JB\"). A name passed here shows its initials (\"Amara Haddad\" → \"AH\"), never the whole name. */\n  initials?: string;\n  src?: string;\n  alt?: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n  status?: AvatarStatus;\n  /** Initials background. \"auto\" (default) derives a stable palette tint from alt/initials so groups vary; use \"accent\" sparingly. */\n  color?: AvatarColor;\n  className?: string;\n}\n\nconst sizeStyles = {\n  sm: \"h-8 w-8 text-xs\",\n  md: \"h-10 w-10 text-sm\",\n  lg: \"h-12 w-12 text-base\",\n};\n\n// Fallbacks cover themes whose tokens CSS predates the decorative palette.\nconst paletteStyles = {\n  1: \"bg-[var(--ds-palette-1-bg,var(--ds-bg-muted))] text-[var(--ds-palette-1-text,var(--ds-text-secondary))]\",\n  2: \"bg-[var(--ds-palette-2-bg,var(--ds-bg-muted))] text-[var(--ds-palette-2-text,var(--ds-text-secondary))]\",\n  3: \"bg-[var(--ds-palette-3-bg,var(--ds-bg-muted))] text-[var(--ds-palette-3-text,var(--ds-text-secondary))]\",\n  4: \"bg-[var(--ds-palette-4-bg,var(--ds-bg-muted))] text-[var(--ds-palette-4-text,var(--ds-text-secondary))]\",\n  5: \"bg-[var(--ds-palette-5-bg,var(--ds-bg-muted))] text-[var(--ds-palette-5-text,var(--ds-text-secondary))]\",\n} as const;\n\nfunction paletteFor(seed: string): keyof typeof paletteStyles {\n  let h = 0;\n  for (const ch of seed) h = (h * 31 + ch.charCodeAt(0)) >>> 0;\n  return ((h % 5) + 1) as keyof typeof paletteStyles;\n}\n\nfunction colorStyles(color: AvatarColor, seed: string): string {\n  if (color === \"accent\") return \"bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]\";\n  if (color === \"neutral\") return \"bg-[var(--ds-bg-muted)] text-[var(--ds-text-secondary)]\";\n  return paletteStyles[color === \"auto\" ? paletteFor(seed) : color];\n}\n\n/**\n * Presence as a shape as well as a colour (Sprint 25.12 A48, WCAG 1.4.1), as Fluent's presence badges do: online a filled\n * dot, away a ring, busy a dot with a bar, offline a ring with a slash. The words are in the avatar's name.\n */\nfunction PresenceMark({ status }: { status: AvatarStatus }) {\n  return (\n    <svg viewBox=\"0 0 10 10\" width=\"10\" height=\"10\" aria-hidden=\"true\" focusable=\"false\" data-presence={status} className=\"block\">\n      {status === \"online\" && <circle cx=\"5\" cy=\"5\" r=\"5\" className=\"fill-[var(--ds-status-success)]\" />}\n      {status === \"away\" && <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"none\" strokeWidth=\"2\" className=\"stroke-[var(--ds-status-warning)]\" />}\n      {status === \"busy\" && (\n        <>\n          <circle cx=\"5\" cy=\"5\" r=\"5\" className=\"fill-[var(--ds-status-error)]\" />\n          <rect x=\"2.5\" y=\"4.1\" width=\"5\" height=\"1.8\" rx=\"0.9\" className=\"fill-[var(--ds-bg-canvas)]\" />\n        </>\n      )}\n      {status === \"offline\" && (\n        <>\n          <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"none\" strokeWidth=\"2\" className=\"stroke-[var(--ds-text-muted)]\" />\n          <line x1=\"3.1\" y1=\"6.9\" x2=\"6.9\" y2=\"3.1\" strokeWidth=\"1.5\" strokeLinecap=\"round\" className=\"stroke-[var(--ds-text-muted)]\" />\n        </>\n      )}\n    </svg>\n  );\n}\n\nexport function Avatar({ initials, src, alt, size = \"md\", status, color = \"auto\", className }: AvatarProps) {\n  // A48: presence can't show words beside a small avatar, so the avatar's own name carries it (\"Priya Nair, online\")\n  const who = alt ?? initials ?? \"\";\n  const named = status ? [who, status].filter(Boolean).join(\", \") : undefined;\n  const base = cn(\n    \"inline-flex items-center justify-center font-medium shrink-0\",\n    \"rounded-[var(--ds-radius-full)]\",\n    sizeStyles[size],\n    className,\n  );\n\n  // data-avatar: the Table and DataGrid card mode stacks a cell that holds an avatar (Sprint 25.4 C-2).\n  const avatarElement = src ? (\n    <img\n      data-avatar=\"\"\n      src={src}\n      alt={named ?? alt ?? initials ?? \"\"}\n      className={cn(base, \"object-cover\")}\n    />\n  ) : (\n    <div\n      data-avatar=\"\"\n      role={named ? \"img\" : undefined}\n      aria-label={named}\n      className={cn(\n        base,\n        colorStyles(color, alt ?? initials ?? \"\"),\n        \"border-[length:var(--ds-border-width)] border-transparent\",\n      )}\n    >\n      {/* round 21: a full name passed as initials shows its initials, not the name squeezed into the circle */}\n      {initials != null ? toInitials(initials) : null}\n    </div>\n  );\n\n  if (!status) return avatarElement;\n\n  return (\n    <div className=\"relative inline-flex\">\n      {avatarElement}\n      <span\n        className={cn(\n          \"absolute\",\n          size === \"sm\" && \"bottom-[-2px] right-[-2px]\",\n          size === \"md\" && \"bottom-[0px] right-[0px]\",\n          size === \"lg\" && \"bottom-[2px] right-[2px]\",\n        )}\n        aria-hidden=\"true\"\n      >\n        {/* the canvas behind the mark fills a ring's middle and draws the 2px halo that separates it from the photo */}\n        <span className=\"block rounded-[var(--ds-radius-full)] bg-[var(--ds-bg-canvas)] shadow-[0_0_0_2px_var(--ds-bg-canvas)]\">\n          <PresenceMark status={status} />\n        </span>\n      </span>\n    </div>\n  );\n}\n","import { useLayoutEffect, useRef, type RefObject } from \"react\";\n\n/**\n * Keeps the active option of a list driven by aria-activedescendant in view (Sprint 25.17's review; WCAG 2.4.11): when\n * the list opens and when the active option changes, the list scrolls just enough to show it. Only the list's own box\n * scrolls, never the page: the list sits fixed over it. The option is found by its id, in the list's own document or\n * shadow root.\n *\n * Only a change brings it back into view (the second review): a render that leaves the same option active — the page\n * scrolling, the list scrolled by touch or by its scrollbar — leaves the list where the user put it.\n */\nexport function useActiveOptionInView(list: RefObject<HTMLElement | null>, activeId: string | undefined): void {\n  // the option last brought into view, by its id and its text: a filtered list reuses an id for another option\n  const shown = useRef<string | null>(null);\n  useLayoutEffect(() => {\n    const box = list.current;\n    if (!box || !activeId) {\n      shown.current = null;\n      return;\n    }\n    const root = box.getRootNode() as Document | ShadowRoot;\n    const option = typeof root.getElementById === \"function\" ? root.getElementById(activeId) : null;\n    if (!option || !box.contains(option)) return;\n    const seen = `${activeId}\\u0000${option.textContent ?? \"\"}`;\n    if (seen === shown.current) return;\n    shown.current = seen;\n    const top = option.getBoundingClientRect().top - box.getBoundingClientRect().top + box.scrollTop;\n    const bottom = top + option.offsetHeight;\n    if (top < box.scrollTop) box.scrollTo({ top });\n    else if (bottom > box.scrollTop + box.clientHeight) box.scrollTo({ top: bottom - box.clientHeight });\n  });\n}\n","/**\n * Text as a search reads it, one way for every picker (Sprint 25.17's second review): no case, no accents, and \"_\" as a\n * space, so \"@toma\" finds Tomás, \"Sao Paulo\" and \"São Paulo\" find America/Sao_Paulo, and \"New_York\" finds New York.\n */\nexport function foldForSearch(text: string): string {\n  return text.normalize(\"NFD\").replace(/\\p{M}/gu, \"\").replace(/_/g, \" \").toLowerCase();\n}\n","import { useMemo, useRef, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { usePosition } from \"../lib/use-position\";\nimport { useLatest } from \"../lib/use-latest\";\nimport { useActiveOptionInView } from \"../lib/use-active-option\";\nimport { foldForSearch } from \"../lib/search-text\";\nimport { Avatar } from \"./Avatar\";\n\nexport interface MentionSuggestion {\n  id: string;\n  label: string;\n  avatar?: string;\n  description?: string;\n}\n\n/** Text as a search reads it: no case, no accents (\"@toma\" finds Tomás, \"@zoe\" Zoë), as every picker reads it. */\nconst fold = foldForSearch;\n\n/**\n * The suggestions a query matches, by name or by description, ignoring case and accents, best first: a name that starts with it\n * (\"@Mar\": Marcus Chen), then a name with a word that does (Tomás Martin), then a name holding it anywhere (Amara), then\n * a description that does; in their own order within each.\n */\nexport function matchMentions(items: MentionSuggestion[], query: string): MentionSuggestion[] {\n  const q = fold(query);\n  const rank = (s: MentionSuggestion): number => {\n    const name = fold(s.label);\n    if (name.startsWith(q)) return 0;\n    if (name.split(/\\s+/).some((word) => word.startsWith(q))) return 1;\n    if (name.includes(q)) return 2;\n    return s.description && fold(s.description).includes(q) ? 3 : -1;\n  };\n  return items.map((s) => ({ s, r: rank(s) })).filter(({ r }) => r >= 0).sort((a, b) => a.r - b.r).map(({ s }) => s);\n}\n\n/** An option's id, for the field's aria-activedescendant. */\nexport const mentionOptionId = (listId: string, index: number) => `${listId}-option-${index}`;\n\n/**\n * The most people a list shows (Sprint 25.17's second review: two thousand drawn at once took a key a third of a second\n * to paint): the best matches, and a line saying how many more match, which typing narrows.\n */\nexport const MENTION_LIST_LIMIT = 10;\n\n/** The matches a list shows, best first, and how many more there are. */\nexport function shownMentions(found: MentionSuggestion[]): { items: MentionSuggestion[]; more: number } {\n  return { items: found.slice(0, MENTION_LIST_LIMIT), more: Math.max(0, found.length - MENTION_LIST_LIMIT) };\n}\n\nexport interface MentionListProps {\n  /** The listbox's id: the field's aria-controls, and the stem of its options' ids. */\n  id: string;\n  /** The listbox's name (\"People\", \"Suggestions\"). */\n  label: string;\n  /** The people shown, at most MENTION_LIST_LIMIT (shownMentions). */\n  items: MentionSuggestion[];\n  /** How many more match than are shown: the list says so under its people. */\n  more?: number;\n  activeIndex: number;\n  onActiveIndexChange: (index: number) => void;\n  onPick: (item: MentionSuggestion) => void;\n  /** Where the mention being typed is, in the viewport: the list opens under it, above it when the screen runs out below. */\n  anchorRect: () => DOMRect | null;\n  /** The list's element, for the owner's checks (a click outside, focus moving into it). */\n  listRef?: RefObject<HTMLDivElement | null>;\n}\n\n/**\n * The list of suggestions while a mention is typed (Sprint 25.17 A17): MentionInput's and the editor's, so a mention\n * looks and works the same in a comment box and a document. The field keeps focus and carries aria-activedescendant\n * (the field's owner wires the keys: arrows move, Enter or Tab inserts, Escape closes); the options are no Tab stops,\n * and a pointer picks one without taking focus from the field.\n */\nexport function MentionList({ id, label, items, more = 0, activeIndex, onActiveIndexChange, onPick, anchorRect, listRef }: MentionListProps) {\n  const ownRef = useRef<HTMLDivElement | null>(null);\n  const floatingRef = listRef ?? ownRef;\n  const boxRef = useRef<HTMLDivElement | null>(null);\n  const anchorRef = useLatest(anchorRect);\n  // the caret as an element for usePosition, which reads only its rectangle\n  const anchor = useMemo(() => ({ current: { getBoundingClientRect: () => anchorRef.current() ?? new DOMRect() } as HTMLElement }), [anchorRef]);\n  const pos = usePosition(anchor, floatingRef, items.length > 0, { side: \"bottom\", align: \"start\", offset: 4 });\n  // the arrows move through a list longer than its box: the active person stays in view\n  useActiveOptionInView(boxRef, items.length > 0 ? mentionOptionId(id, activeIndex) : undefined);\n  if (items.length === 0) return null;\n\n  return createPortal(\n    <div\n      ref={floatingRef}\n      className={cn(\n        \"fixed z-[var(--ds-z-popover)] min-w-[200px] flex flex-col\",\n        \"bg-[var(--ds-bg-surface-elevated)]\",\n        \"[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]\",\n        \"border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]\",\n        \"rounded-[var(--ds-radius-md)] shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]\",\n      )}\n      style={{ top: pos.top, left: pos.left }}\n    >\n      {/* rows inset in the list, rounded, as Combobox's and the menus' are (the second review: full-width square rows) */}\n      <div ref={boxRef} id={id} role=\"listbox\" aria-label={label} className=\"max-h-[200px] overflow-y-auto p-ds-1\">\n      {items.map((s, i) => (\n        <button\n          key={s.id}\n          id={mentionOptionId(id, i)}\n          type=\"button\"\n          role=\"option\"\n          tabIndex={-1}\n          aria-selected={i === activeIndex}\n          className={cn(\n            \"flex items-center gap-ds-2.5 w-full px-ds-2 py-ds-1.5 text-left text-sm cursor-pointer rounded-[var(--ds-radius-sm)]\",\n            \"transition-colors duration-[var(--ds-transition-speed)]\",\n            i === activeIndex ? \"bg-[var(--ds-bg-muted)] text-[var(--ds-text-primary)]\" : \"text-[var(--ds-text-secondary)]\",\n          )}\n          // the field keeps focus, so the pick lands where the mention is being typed\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={() => onPick(s)}\n          onMouseEnter={() => onActiveIndexChange(i)}\n        >\n          {/* the name follows as text, so the picture is decoration */}\n          <span aria-hidden=\"true\" className=\"inline-flex shrink-0\">\n            <Avatar src={s.avatar} initials={s.label} size=\"sm\" className=\"!h-6 !w-6 !text-2xs\" />\n          </span>\n          <span className=\"min-w-0\">\n            <span className=\"block font-medium text-[var(--ds-text-primary)] truncate\">{s.label}</span>\n            {s.description && <span className=\"block text-xs text-[var(--ds-text-muted)] truncate\">{s.description}</span>}\n          </span>\n        </button>\n      ))}\n      </div>\n      {more > 0 && (\n        <p className=\"px-ds-3 py-ds-1.5 text-xs text-[var(--ds-text-muted)] border-t-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]\">\n          {more} more {more === 1 ? \"matches\" : \"match\"}: keep typing to narrow\n        </p>\n      )}\n    </div>,\n    document.body,\n  );\n}\n"]}

package/dist/{chunk-OX3NNMWG.js → chunk-OFACAHRV.js}

@@ -1,7 +1,8 @@
 "use client";
-import { Badge } from './chunk-OVHBQT3Z.js';
-import { slotIcon, Icon } from './chunk-L6HWACK7.js';
-import { cn, FOCUS_RING } from './chunk-YL5KD5RC.js';
+import { Badge } from './chunk-GT6M74IZ.js';
+import { useKeyboardScroll } from './chunk-GP2COVJC.js';
+import { slotIcon, Icon } from './chunk-53F7GVBQ.js';
+import { cn, FOCUS_RING, FOCUS_INSET } from './chunk-OWQ7M6R7.js';
 import { forwardRef, useState, useCallback } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
@@ -10,6 +11,7 @@ function CodeBlock({
   language,
   showLineNumbers = false,
   wrap,
+  "aria-label": ariaLabel,
   className
 }) {
   const [copied, setCopied] = useState(false);
@@ -23,6 +25,8 @@ function CodeBlock({
   }, [code]);
   const lines = code.split("\n");
   const wraps = wrap ?? lines.length === 1;
+  const [scroller, setScroller] = useState(null);
+  useKeyboardScroll(scroller, ariaLabel ?? (language ? `Code: ${language}` : "Code"), !wraps, false, "x");
   const gutterWidth = showLineNumbers ? `${String(lines.length).length + 1}ch` : void 0;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -60,7 +64,7 @@ function CodeBlock({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { className: wraps ? void 0 : "overflow-x-auto", "data-wrap": wraps ? "true" : void 0, children: /* @__PURE__ */ jsx("pre", { className: cn("p-ds-4 text-sm leading-relaxed font-[family-name:var(--ds-font-mono)]", wraps && "whitespace-pre-wrap break-words"), children: /* @__PURE__ */ jsx("code", { children: lines.map((line, i) => (
+        /* @__PURE__ */ jsx("div", { ref: setScroller, className: wraps ? void 0 : cn("overflow-x-auto", FOCUS_INSET), "data-wrap": wraps ? "true" : void 0, children: /* @__PURE__ */ jsx("pre", { className: cn("p-ds-4 text-sm leading-relaxed font-[family-name:var(--ds-font-mono)]", wraps && "whitespace-pre-wrap break-words"), children: /* @__PURE__ */ jsx("code", { children: lines.map((line, i) => (
           // with line numbers each line is a two-column row, so a wrapped line continues under its text, not under the gutter
           /* @__PURE__ */ jsxs("span", { className: showLineNumbers ? "grid grid-cols-[max-content_1fr]" : "block", children: [
             showLineNumbers && /* @__PURE__ */ jsx(
@@ -159,5 +163,5 @@ function Divider({
 }
 
 export { CodeBlock, Divider, Link };
-//# sourceMappingURL=chunk-OX3NNMWG.js.map
-//# sourceMappingURL=chunk-OX3NNMWG.js.map
+//# sourceMappingURL=chunk-OFACAHRV.js.map
+//# sourceMappingURL=chunk-OFACAHRV.js.map

package/dist/chunk-OFACAHRV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../showcase/src/components/CodeBlock.tsx","../../../showcase/src/components/Link.tsx","../../../showcase/src/components/Divider.tsx"],"names":["Link","jsxs","jsx"],"mappings":"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","file":"chunk-OFACAHRV.js","sourcesContent":["import { useState, useCallback } from \"react\";\nimport { cn, FOCUS_INSET, FOCUS_RING } from \"../lib/utils\";\nimport { useKeyboardScroll } from \"../lib/use-keyboard-scroll\";\nimport { Icon } from \"../lib/icons\";\nimport { Badge } from \"./Badge\";\n\ninterface CodeBlockProps {\n  code: string;\n  language?: string;\n  showLineNumbers?: boolean;\n  /** Wrap long lines instead of scrolling sideways. Default: on for a single-line snippet (a tracking tag, a command), off for multi-line code. */\n  wrap?: boolean;\n  /**\n   * What the code is (\"app.tsx\"): its name while it scrolls sideways, a Tab stop of its own then, so a page of several\n   * reads them apart. Default: its language, \"Code: tsx\", else \"Code\".\n   */\n  \"aria-label\"?: string;\n  className?: string;\n}\n\nexport function CodeBlock({\n  code,\n  language,\n  showLineNumbers = false,\n  wrap,\n  \"aria-label\": ariaLabel,\n  className,\n}: CodeBlockProps) {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch {\n      /* clipboard not available */\n    }\n  }, [code]);\n\n  const lines = code.split(\"\\n\");\n  const wraps = wrap ?? lines.length === 1;\n  // code that scrolls sideways, with nothing in it to Tab to: a Tab stop while it scrolls (Sprint 25.30 item 2), named by\n  // the page's aria-label, else its language where it has one, so a page of several reads them apart: \"Code: tsx\"\n  // (Sprint 25.31 item 8 and the review of 16 October, 7)\n  const [scroller, setScroller] = useState<HTMLDivElement | null>(null);\n  useKeyboardScroll(scroller, ariaLabel ?? (language ? `Code: ${language}` : \"Code\"), !wraps, false, \"x\");\n  const gutterWidth = showLineNumbers ? `${String(lines.length).length + 1}ch` : undefined;\n\n  return (\n    <div\n      className={cn(\n        \"relative group\",\n        \"bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]\",\n        \"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\",\n        \"rounded-[var(--ds-radius-md)]\",\n        \"shadow-[var(--ds-shadow-sm)]\",\n        \"overflow-hidden\",\n        className,\n      )}\n    >\n      <div className=\"flex items-center justify-between px-ds-4 py-ds-2 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-bg-muted)]\">\n        <div className=\"flex items-center gap-ds-2\">\n          {language && <Badge variant=\"outline\" size=\"sm\">{language}</Badge>}\n        </div>\n        <button\n          type=\"button\"\n          onClick={handleCopy}\n          className={cn(\n            \"inline-flex items-center gap-ds-1.5 px-ds-2 py-ds-1 text-xs font-medium cursor-pointer\",\n            \"text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]\",\n            \"rounded-[var(--ds-radius-sm)]\",\n            \"hover:bg-[var(--ds-bg-surface)]\",\n            \"transition-colors\",\n            FOCUS_RING,\n          )}\n          aria-label={copied ? \"Copied\" : \"Copy code\"}\n        >\n          {/* Sprint 25.8.7 item 12: the copy icon, where a folder stood */}\n          <Icon name={copied ? \"check\" : \"copy\"} size={14} />\n          {copied ? \"Copied\" : \"Copy\"}\n        </button>\n      </div>\n\n      <div ref={setScroller} className={wraps ? undefined : cn(\"overflow-x-auto\", FOCUS_INSET)} data-wrap={wraps ? \"true\" : undefined}>\n        <pre className={cn(\"p-ds-4 text-sm leading-relaxed font-[family-name:var(--ds-font-mono)]\", wraps && \"whitespace-pre-wrap break-words\")}>\n          <code>\n            {lines.map((line, i) => (\n              // with line numbers each line is a two-column row, so a wrapped line continues under its text, not under the gutter\n              <span key={i} className={showLineNumbers ? \"grid grid-cols-[max-content_1fr]\" : \"block\"}>\n                {showLineNumbers && (\n                  <span\n                    className=\"text-right text-[var(--ds-text-muted)] select-none mr-ds-4 opacity-50\"\n                    style={{ width: gutterWidth }}\n                  >\n                    {i + 1}\n                  </span>\n                )}\n                <span className=\"min-w-0\">{line || \" \"}</span>\n              </span>\n            ))}\n          </code>\n        </pre>\n      </div>\n    </div>\n  );\n}\n","import { forwardRef, type AnchorHTMLAttributes, type ElementType, type ReactNode } from \"react\";\nimport { cn, FOCUS_RING } from \"../lib/utils\";\nimport { slotIcon, type IconSlot } from \"../lib/icons\";\n\ntype LinkUnderline = \"hover\" | \"always\" | \"none\";\ntype LinkTone = \"accent\" | \"muted\" | \"inherit\";\n\nexport interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  href: string;\n  children: ReactNode;\n  /** When to show the underline. Default \"hover\". */\n  underline?: LinkUnderline;\n  /** Colour: accent (default), muted for secondary links, inherit to match surrounding text. */\n  tone?: LinkTone;\n  /** Opens in a new tab with rel=\"noopener noreferrer\". Default false. */\n  external?: boolean;\n  /**\n   * Render through a router link component instead of a plain anchor\n   * (e.g. `component={RouterLink}` from react-router or next/link). The\n   * component receives the same props; `href` is also passed as `to` for\n   * react-router compatibility. Any element type: a router's Link requires\n   * its own props (react-router's `to`), which a narrower type refused under\n   * strict TypeScript (Sprint 25.16 A19).\n   */\n  component?: ElementType;\n  /** An icon name (\"info\"), drawn as the theme's icon at 14 px, or an element. Not text: use children. */\n  iconLeft?: IconSlot;\n  /** As iconLeft, after the label. */\n  iconRight?: IconSlot;\n}\n\nconst toneStyles: Record<LinkTone, string> = {\n  accent: \"text-[var(--ds-accent-ink)] hover:text-[var(--ds-accent-primary-hover)] active:text-[var(--ds-accent-primary-active)]\",\n  muted: \"text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)]\",\n  inherit: \"text-inherit hover:text-[var(--ds-accent-ink)]\",\n};\n\nconst underlineStyles: Record<LinkUnderline, string> = {\n  hover: \"no-underline hover:underline\",\n  always: \"underline underline-offset-2\",\n  none: \"no-underline\",\n};\n\n/**\n * Navigation link. Renders a real <a> (or a router link via `component`) so\n * middle-click, open-in-new-tab, right-click \"copy link\" and screen readers\n * all behave correctly. Visually identical to Button variant=\"link\".\n *\n * Use Link for NAVIGATION (to a page or URL). Use Button variant=\"link\" for an\n * ACTION that should look like a link (show more, resend code). Never use a\n * ghost Button for inline text — its padding breaks the line.\n */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  { href, children, underline = \"hover\", tone = \"accent\", external = false, component: Component, iconLeft, iconRight, className, target, rel, ...props },\n  ref,\n) {\n  const classes = cn(\n    \"inline-flex items-center gap-ds-1 font-medium cursor-pointer\",\n    \"transition-colors duration-[var(--ds-transition-speed)]\",\n    FOCUS_RING,\n    \"rounded-[var(--ds-radius-sm)]\",\n    toneStyles[tone],\n    underlineStyles[underline],\n    className,\n  );\n  const resolvedTarget = external ? \"_blank\" : target;\n  const resolvedRel = external ? cn(\"noopener noreferrer\", rel) : rel;\n  const content = (\n    <>\n      {slotIcon(iconLeft, 14, \"Link's iconLeft\")}\n      {children}\n      {slotIcon(iconRight, 14, \"Link's iconRight\")}\n    </>\n  );\n\n  if (Component) {\n    return (\n      <Component ref={ref} href={href} to={href} className={classes} target={resolvedTarget} rel={resolvedRel} {...props}>\n        {content}\n      </Component>\n    );\n  }\n\n  return (\n    <a ref={ref} href={href} className={classes} target={resolvedTarget} rel={resolvedRel} {...props}>\n      {content}\n    </a>\n  );\n});\n","import { cn } from \"../lib/utils\";\nimport type { ReactNode } from \"react\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\n\ninterface DividerProps {\n  orientation?: Orientation;\n  label?: ReactNode;\n  className?: string;\n}\n\nexport function Divider({\n  orientation = \"horizontal\",\n  label,\n  className,\n}: DividerProps) {\n  if (orientation === \"vertical\") {\n    return (\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className={cn(\n          \"inline-block self-stretch min-h-[1em]\",\n          \"w-[var(--ds-divider-width)]\",\n          \"bg-[var(--ds-border-default)]\",\n          className,\n        )}\n      />\n    );\n  }\n\n  if (label) {\n    return (\n      <div\n        role=\"separator\"\n        className={cn(\"flex items-center gap-ds-3\", className)}\n      >\n        <span className=\"flex-1 h-[var(--ds-divider-width)] bg-[var(--ds-border-default)]\" />\n        <span className=\"text-xs font-medium text-[var(--ds-text-muted)] shrink-0\">\n          {label}\n        </span>\n        <span className=\"flex-1 h-[var(--ds-divider-width)] bg-[var(--ds-border-default)]\" />\n      </div>\n    );\n  }\n\n  return (\n    <hr\n      role=\"separator\"\n      className={cn(\n        \"border-none w-full\",\n        \"h-[var(--ds-divider-width)]\",\n        \"bg-[var(--ds-border-default)]\",\n        className,\n      )}\n    />\n  );\n}\n"]}

package/dist/{chunk-R5QXMNW7.js → chunk-OWQ7M6R7.js}

@@ -1,8 +1,19 @@
 "use client";
-import { useLatest } from './chunk-WIUGPZOH.js';
-import { useRef, useInsertionEffect, useEffect, useCallback, useState, useMemo, useLayoutEffect } from 'react';
+import { useRef, useLayoutEffect, useInsertionEffect, useEffect, useCallback, useState, useMemo } from 'react';
 import { flushSync } from 'react-dom';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
+// ../../showcase/src/lib/focus.ts
+function useLatest(value) {
+  const ref = useRef(value);
+  useLayoutEffect(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+
+// ../../showcase/src/lib/focus.ts
 var FOCUSABLE = 'a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])';
 var FIELD = "input, select, textarea, [contenteditable='true']";
 var CONTROL_ANCESTOR = 'a[href], button, summary, label, [role="button"], [role="link"], [role="option"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="tab"], [role="treeitem"], [role="row"], [role="gridcell"], [role="checkbox"], [role="radio"], [role="switch"]';
@@ -32,6 +43,10 @@ function isTabStop(el) {
   if (el.closest("[inert]")) return false;
   return isRendered(el);
 }
+function hasTabStop(root) {
+  for (const el of root.querySelectorAll(FOCUSABLE)) if (isTabStop(el)) return true;
+  return false;
+}
 function tabStops(root) {
   return Array.from(root.querySelectorAll(FOCUSABLE)).filter(isTabStop).sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
 }
@@ -132,14 +147,19 @@ function placesOf(el) {
   return places;
 }
 function landLastResort(places, closing) {
-  const at = places.findIndex((p) => p.box.isConnected);
-  if (at < 0) return false;
-  const { box, prev, next } = places[at];
-  const kids = Array.from(box.children);
-  const from = prev?.parentElement === box ? kids.indexOf(prev) + 1 : 0;
-  const to = next?.parentElement === box ? kids.indexOf(next) : kids.length;
-  const areas = [kids.slice(from, Math.max(from, to)), ...places.slice(at).map((p) => [p.box])];
   const counts = (el) => !closing?.contains(el);
+  const areas = [];
+  const at = places.findIndex((p) => p.box.isConnected);
+  if (at >= 0) {
+    const { box, prev, next } = places[at];
+    const kids = Array.from(box.children);
+    const from = prev?.parentElement === box ? kids.indexOf(prev) + 1 : 0;
+    const to = next?.parentElement === box ? kids.indexOf(next) : kids.length;
+    areas.push(kids.slice(from, Math.max(from, to)), ...places.slice(at).map((p) => [p.box]));
+  }
+  const main = document.querySelector('main, [role="main"]');
+  const mainCounts = !!main && counts(main) && isRendered(main);
+  if (mainCounts) areas.push([main]);
   for (const area of areas) {
     const stop = area.flatMap((a) => [...isTabStop(a) ? [a] : [], ...tabStops(a)]).find(counts);
     if (stop) {
@@ -149,7 +169,7 @@ function landLastResort(places, closing) {
     const heading = area.flatMap((a) => [...a.matches(HEADING) ? [a] : [], ...a.querySelectorAll(HEADING)]).find((h) => h instanceof HTMLElement && isRendered(h) && counts(h));
     if (heading && focusForTheMoment(heading)) return true;
   }
-  return false;
+  return mainCounts && focusForTheMoment(main);
 }
 function rememberFocus(el, { ignoreRoute = false } = {}) {
   const { href, pathname } = location;
@@ -198,6 +218,7 @@ function rememberFocus(el, { ignoreRoute = false } = {}) {
   const neighbour = () => inRow(byKey(keyOf(before)) ?? before) || inRow(byKey(keyOf(after)) ?? after) || !!list?.isConnected && land(tabStops(list)[0]);
   const lastResort = () => {
     setTimeout(() => {
+      if (typeof document === "undefined") return;
       const active = document.activeElement;
       if (active && active !== document.body && active.isConnected || pageChanged()) return;
       landLastResort(places);
@@ -224,7 +245,7 @@ function rememberFocus(el, { ignoreRoute = false } = {}) {
     function stop() {
       observer.disconnect();
       clearTimeout(timer);
-      document.removeEventListener("focusin", onFocusIn, true);
+      if (typeof document !== "undefined") document.removeEventListener("focusin", onFocusIn, true);
       unwatch = null;
     }
     observer.observe(list, { childList: true });
@@ -294,7 +315,10 @@ function useFocusKeptInList(listRef) {
   }, [listRef]);
 }
 var openers = /* @__PURE__ */ new WeakMap();
+var waiting = /* @__PURE__ */ new WeakMap();
+var WATCH_MS = 1e4;
 function rememberOpener(active, root) {
+  if (root) waiting.get(root)?.();
   let own = active instanceof HTMLElement && active !== document.body && active.isConnected ? rememberFocus(active) : null;
   const controller = !own && root?.id ? document.querySelector(`[aria-controls~="${CSS.escape(root.id)}"]`) : null;
   if (controller) own = rememberFocus(controller);
@@ -310,12 +334,28 @@ function rememberOpener(active, root) {
     const { pathname } = location;
     return {
       el: null,
-      restore() {
-        setTimeout(() => {
+      restore(_fallback, closed = false) {
+        const since = performance.now();
+        let timer;
+        const stop = () => {
+          clearTimeout(timer);
+          if (waiting.get(root) === stop) waiting.delete(root);
+        };
+        const look = () => {
+          if (typeof document === "undefined") return;
           const now = document.activeElement;
-          if (now && now !== document.body && now.isConnected && !root.contains(now) || location.pathname !== pathname) return;
+          const real = !!now && now !== document.body && now.isConnected;
+          if (real && !root.contains(now) || location.pathname !== pathname && !pathAbove(location.pathname, pathname)) return stop();
+          if (real && !closed && root instanceof HTMLElement && isRendered(root)) {
+            if (performance.now() - since < WATCH_MS) timer = setTimeout(look, 50);
+            else stop();
+            return;
+          }
+          stop();
           landLastResort(places, root);
-        }, LAST_RESORT_MS);
+        };
+        timer = setTimeout(look, LAST_RESORT_MS);
+        waiting.set(root, stop);
         return false;
       }
     };
@@ -342,7 +382,7 @@ function useReturnFocus(open, root) {
     if (!r) return;
     const active = document.activeElement;
     const lost = !active || active === document.body || !active.isConnected;
-    if (!root || lost || active instanceof Node && !!root.current?.contains(active)) r.restore();
+    if (!root || lost || active instanceof Node && !!root.current?.contains(active)) r.restore(void 0, true);
   }, [open, root, before]);
   useEffect(() => () => {
     const r = remembered.current;
@@ -392,13 +432,10 @@ function focusAfterSelfRemoval(control, { item, group, to } = {}) {
     el.focus();
     return document.activeElement === el;
   };
-  const landOnGroup = () => {
-    if (!within?.isConnected) return false;
-    if (!within.hasAttribute("tabindex") && within.tabIndex < 0) within.setAttribute("tabindex", "-1");
-    within.focus();
-    return document.activeElement === within;
-  };
-  const place = () => land(typeof to === "function" ? to() : to) || land(sameBefore) || before.some(land) || land(sameAfter) || after.some(land) || landOnGroup();
+  const landOnGroup = () => !!within?.isConnected && focusForTheMoment(within);
+  const places = within ? [] : placesOf(goes);
+  const landTo = (el) => land(el) || !!el && el.isConnected && !isTabStop(el) && isRendered(el) && focusForTheMoment(el);
+  const place = () => landTo(typeof to === "function" ? to() : to) || land(sameBefore) || before.some(land) || land(sameAfter) || after.some(land) || (within ? landOnGroup() : landLastResort(places));
   if (typeof MutationObserver === "undefined") return () => {
   };
   const observer = new MutationObserver(() => {
@@ -413,7 +450,7 @@ function focusAfterSelfRemoval(control, { item, group, to } = {}) {
   function stop() {
     observer.disconnect();
     clearTimeout(timer);
-    document.removeEventListener("focusin", onFocusIn, true);
+    if (typeof document !== "undefined") document.removeEventListener("focusin", onFocusIn, true);
   }
   observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["disabled"] });
   document.addEventListener("focusin", onFocusIn, true);
@@ -759,7 +796,120 @@ function useNonModalDialog(root, active, onClose, isTop = ALWAYS_TOP) {
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [active, root, isTop, onCloseRef]);
 }
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var GLASS_BACKDROP = "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]";
+var GLASS_SURFACE = `${GLASS_BACKDROP} shadow-[var(--ds-shadow-card),var(--ds-glass-inset)]`;
+var GLASS_OVERLAY = `${GLASS_BACKDROP} shadow-[var(--ds-shadow-modal),var(--ds-glass-inset)]`;
+var OVERLAY_SURFACE = "bg-[var(--ds-bg-surface)] supports-[color:oklch(from_red_l_c_h)]:bg-[oklch(from_var(--ds-bg-surface)_l_c_h_/_max(alpha,min(1,alpha*1000)*0.85))]";
+var GLASS_DROPDOWN = `${GLASS_BACKDROP} shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]`;
+var FOCUS_RING = "focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-[var(--ds-focus)] focus-visible:shadow-none";
+var PEER_FOCUS_RING = "peer-focus-visible:outline-2 peer-focus-visible:outline-solid peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[var(--ds-focus)] peer-focus-visible:shadow-none";
+var GROUP_FOCUS_RING = "group-focus-visible:outline-2 group-focus-visible:outline-solid group-focus-visible:outline-offset-2 group-focus-visible:outline-[var(--ds-focus)] group-focus-visible:shadow-none";
+var FOCUS_INSET = "focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-[var(--ds-focus-inset)] focus-visible:outline-[var(--ds-focus)]";
+var FOCUS_INSET_WHILE_STOP = "data-[scroll-stop]:focus-visible:outline-2 data-[scroll-stop]:focus-visible:outline-solid data-[scroll-stop]:focus-visible:-outline-offset-[var(--ds-focus-inset)] data-[scroll-stop]:focus-visible:outline-[var(--ds-focus)]";
+var FOCUS_ROOM = 4;
+var atLeastFocusRoom = (length) => `max(${length}, ${FOCUS_ROOM}px)`;
+var FIELD_FOCUS_RING = "focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-[var(--ds-focus)] focus-visible:border-[var(--ds-focus)] [[data-input-modality=pointer]_&]:focus-visible:outline-none [[data-input-modality=pointer]_&]:focus-visible:border-[var(--ds-accent-ink)] [[data-input-modality=pointer]_&]:focus-visible:ring-2 [[data-input-modality=pointer]_&]:focus-visible:ring-[var(--ds-ring-active)]";
+var FIELD_FOCUS_WITHIN_RING = "has-[:focus:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus))]:outline-2 has-[:focus:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus))]:outline-solid has-[:focus:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus))]:outline-offset-2 has-[:focus:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus))]:outline-[var(--ds-focus)] has-[:focus:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus))]:border-[var(--ds-focus)] [[data-input-modality=pointer]_&]:has-[:focus:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus))]:outline-none [[data-input-modality=pointer]_&]:has-[:focus:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus))]:border-[var(--ds-accent-ink)] [[data-input-modality=pointer]_&]:has-[:focus:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus))]:ring-2 [[data-input-modality=pointer]_&]:has-[:focus:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus))]:ring-[var(--ds-ring-active)]";
+var FIELD_HAS_FOCUS_RING = "has-[:focus-visible:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus-visible))]:outline-2 has-[:focus-visible:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus-visible))]:outline-solid has-[:focus-visible:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus-visible))]:outline-offset-2 has-[:focus-visible:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus-visible))]:outline-[var(--ds-focus)] has-[:focus-visible:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus-visible))]:border-[var(--ds-focus)] [[data-input-modality=pointer]_&]:has-[:focus-visible:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus-visible))]:outline-none [[data-input-modality=pointer]_&]:has-[:focus-visible:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus-visible))]:border-[var(--ds-accent-ink)] [[data-input-modality=pointer]_&]:has-[:focus-visible:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus-visible))]:ring-2 [[data-input-modality=pointer]_&]:has-[:focus-visible:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus-visible))]:ring-[var(--ds-ring-active)]";
+var ERROR_FOCUS_RING = "focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-[var(--ds-focus)] focus-visible:border-[var(--ds-status-error)] [[data-input-modality=pointer]_&]:focus-visible:outline-none [[data-input-modality=pointer]_&]:focus-visible:ring-2 [[data-input-modality=pointer]_&]:focus-visible:ring-[var(--ds-ring-error)]";
+var ERROR_FOCUS_WITHIN_RING = "has-[:focus:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus))]:outline-2 has-[:focus:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus))]:outline-solid has-[:focus:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus))]:outline-offset-2 has-[:focus:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus))]:outline-[var(--ds-focus)] has-[:focus:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus))]:border-[var(--ds-status-error)] [[data-input-modality=pointer]_&]:has-[:focus:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus))]:outline-none [[data-input-modality=pointer]_&]:has-[:focus:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus))]:ring-2 [[data-input-modality=pointer]_&]:has-[:focus:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus))]:ring-[var(--ds-ring-error)]";
+var ERROR_HAS_FOCUS_RING = "has-[:focus-visible:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus-visible))]:outline-2 has-[:focus-visible:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus-visible))]:outline-solid has-[:focus-visible:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus-visible))]:outline-offset-2 has-[:focus-visible:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus-visible))]:outline-[var(--ds-focus)] has-[:focus-visible:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus-visible))]:border-[var(--ds-status-error)] [[data-input-modality=pointer]_&]:has-[:focus-visible:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus-visible))]:outline-none [[data-input-modality=pointer]_&]:has-[:focus-visible:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus-visible))]:ring-2 [[data-input-modality=pointer]_&]:has-[:focus-visible:not(button,select,a,[role=button],input[type=checkbox],input[type=radio],[role=checkbox],[role=radio],[role=switch])]:[&:not(:has([role=dialog]_:focus-visible))]:ring-[var(--ds-ring-error)]";
+var ACTIVE_RING = "border-[var(--ds-accent-ink)] ring-2 ring-[var(--ds-ring-active)]";
+var ERROR_ACTIVE_RING = "border-[var(--ds-status-error)] ring-2 ring-[var(--ds-ring-error)]";
+var scrollLockCount = 0;
+var scrollLockPreviousOverflow = "";
+function lockBodyScroll() {
+  if (scrollLockCount === 0) {
+    scrollLockPreviousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  scrollLockCount++;
+}
+function unlockBodyScroll() {
+  if (scrollLockCount === 0) return;
+  scrollLockCount--;
+  if (scrollLockCount === 0) {
+    document.body.style.overflow = scrollLockPreviousOverflow;
+    scrollLockPreviousOverflow = "";
+  }
+}
+var VIEWPORT_PADDING = 8;
+function usePosition(triggerRef, floatingRef, open, options = {}) {
+  const { side = "bottom", align = "center", offset = 8, flip = true } = options;
+  const [pos, setPos] = useState({ top: 0, left: 0, placement: side });
+  const rafId = useRef(0);
+  const compute = useCallback(() => {
+    const trigger = triggerRef.current;
+    const floating = floatingRef.current;
+    if (!trigger || !floating) return;
+    const tRect = trigger.getBoundingClientRect();
+    const fRect = floating.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    let placement = side;
+    if (flip) {
+      if (placement === "bottom" && tRect.bottom + offset + fRect.height > vh - VIEWPORT_PADDING && tRect.top - offset - fRect.height > VIEWPORT_PADDING) {
+        placement = "top";
+      } else if (placement === "top" && tRect.top - offset - fRect.height < VIEWPORT_PADDING && tRect.bottom + offset + fRect.height < vh - VIEWPORT_PADDING) {
+        placement = "bottom";
+      } else if (placement === "right" && tRect.right + offset + fRect.width > vw - VIEWPORT_PADDING && tRect.left - offset - fRect.width > VIEWPORT_PADDING) {
+        placement = "left";
+      } else if (placement === "left" && tRect.left - offset - fRect.width < VIEWPORT_PADDING && tRect.right + offset + fRect.width < vw - VIEWPORT_PADDING) {
+        placement = "right";
+      }
+    }
+    let top;
+    let left;
+    if (placement === "bottom" || placement === "top") {
+      top = placement === "bottom" ? tRect.bottom + offset : tRect.top - fRect.height - offset;
+      switch (align) {
+        case "start":
+          left = tRect.left;
+          break;
+        case "end":
+          left = tRect.right - fRect.width;
+          break;
+        default:
+          left = tRect.left + (tRect.width - fRect.width) / 2;
+      }
+    } else {
+      left = placement === "right" ? tRect.right + offset : tRect.left - fRect.width - offset;
+      switch (align) {
+        case "start":
+          top = tRect.top;
+          break;
+        case "end":
+          top = tRect.bottom - fRect.height;
+          break;
+        default:
+          top = tRect.top + (tRect.height - fRect.height) / 2;
+      }
+    }
+    left = Math.max(VIEWPORT_PADDING, Math.min(left, vw - fRect.width - VIEWPORT_PADDING));
+    top = Math.max(VIEWPORT_PADDING, Math.min(top, vh - fRect.height - VIEWPORT_PADDING));
+    setPos((cur) => cur.top === top && cur.left === left && cur.placement === placement ? cur : { top, left, placement });
+  }, [triggerRef, floatingRef, side, align, offset, flip]);
+  useLayoutEffect(() => {
+    if (!open) return;
+    compute();
+    const onUpdate = () => {
+      cancelAnimationFrame(rafId.current);
+      rafId.current = requestAnimationFrame(compute);
+    };
+    window.addEventListener("scroll", onUpdate, true);
+    window.addEventListener("resize", onUpdate);
+    return () => {
+      cancelAnimationFrame(rafId.current);
+      window.removeEventListener("scroll", onUpdate, true);
+      window.removeEventListener("resize", onUpdate);
+    };
+  }, [open, compute]);
+  return pos;
+}
 
-export { CONTROL_ANCESTOR, FIELD, FOCUSABLE, OVERLAY_CLOSE_ATTR, ZOOM_KEYS, focusAfterRemoval, focusAfterSelfRemoval, focusInitial, inertOutside, isTabStop, rememberFocus, rememberOpener, rovingTabStop, tabStops, useCloseOnFocusOut, useFocusBeforeOpen, useFocusKeptInList, useFocusLeave, useFocusTrap, useGridKeyboard, useNonModalDialog, useOverlayLayer, usePopupFocus, usePressMarks, useReturnFocus };
-//# sourceMappingURL=chunk-R5QXMNW7.js.map
-//# sourceMappingURL=chunk-R5QXMNW7.js.map
+export { ACTIVE_RING, CONTROL_ANCESTOR, ERROR_ACTIVE_RING, ERROR_FOCUS_RING, ERROR_FOCUS_WITHIN_RING, ERROR_HAS_FOCUS_RING, FIELD, FIELD_FOCUS_RING, FIELD_FOCUS_WITHIN_RING, FIELD_HAS_FOCUS_RING, FOCUSABLE, FOCUS_INSET, FOCUS_INSET_WHILE_STOP, FOCUS_RING, FOCUS_ROOM, GLASS_BACKDROP, GLASS_DROPDOWN, GLASS_OVERLAY, GLASS_SURFACE, GROUP_FOCUS_RING, OVERLAY_CLOSE_ATTR, OVERLAY_SURFACE, PEER_FOCUS_RING, ZOOM_KEYS, atLeastFocusRoom, cn, focusAfterRemoval, focusAfterSelfRemoval, focusInitial, hasTabStop, inertOutside, isTabStop, lockBodyScroll, rememberFocus, rememberOpener, rovingTabStop, tabStops, unlockBodyScroll, useCloseOnFocusOut, useFocusBeforeOpen, useFocusKeptInList, useFocusLeave, useFocusTrap, useGridKeyboard, useLatest, useNonModalDialog, useOverlayLayer, usePopupFocus, usePosition, usePressMarks, useReturnFocus };
+//# sourceMappingURL=chunk-OWQ7M6R7.js.map
+//# sourceMappingURL=chunk-OWQ7M6R7.js.map