@ably/ui 17.12.1 → 17.13.0-dev.06163b64

package/AGENTS.md

@@ -39,6 +39,34 @@ This project is intended to primarily be consumed by the Ably website, voltaire
 - **Error Handling**: Wrap external service calls in try-catch, log with logger module
 - **Comments**: JSDoc for props, inline comments for complex logic
 
+### Custom Hooks
+
+- **Naming**: `use` prefix with descriptive name (e.g., `useContentHeight`, `useThemedScrollpoints`)
+- **JSDoc**: Always include for custom hooks, especially performance-related ones
+- **Parameters**: Document with `@param` including types and defaults
+- **Returns**: Document with `@returns` including type and semantic meaning
+- **Performance rationale**: Include "why" in JSDoc when optimizing (e.g., "eliminates forced reflows")
+- **Cleanup**: Always return cleanup function to prevent memory leaks
+- **Shared constants**: Import from `src/core/utils/heights.ts` instead of duplicating
+
+Example:
+
+```typescript
+/**
+ * Tracks element height using ResizeObserver to avoid forced reflows.
+ *
+ * @param ref - React ref to the element to observe
+ * @param initialHeight - Initial height value (default: 0)
+ * @returns Current height in pixels
+ */
+export function useContentHeight(
+  ref: RefObject<HTMLElement>,
+  initialHeight = 0,
+): number {
+  // Implementation...
+}
+```
+
 Keep emojis in the code to a minimum, only introduce them if there is precedent
 in the file you're working on.
 
@@ -51,6 +79,9 @@ this is a given for how we work.
   files in CI and don't want preventable failures. `pnpm lint:fix` should also
   apply our formatting rules while trying to fix most things for you
 - Run tests with `pnpm test` after making file changes
+- When testing with Storybook, use Chrome DevTools Performance tab to verify no forced reflows
+- For performance-related changes, compare before/after metrics and include in commit/PR
+- Use Chrome MCP at `http://localhost:6006` (Storybook) or `http://localhost:4000` (Voltaire) for visual verification
 
 ## Styling Guide
 
@@ -188,6 +219,312 @@ Here's a complete button component demonstrating all patterns:
 >
 ```
 
+## Performance Optimization Guidelines
+
+### When to Optimize
+
+Optimize when Chrome DevTools Performance profiling shows:
+
+- Forced reflows/layouts in event handlers (scroll, resize, input)
+- Long tasks blocking the main thread (>50ms)
+- CPU throttling causing device overheating (especially iOS)
+
+Common anti-patterns causing forced reflows:
+
+- `getBoundingClientRect()` in scroll/resize handlers
+- `clientHeight/scrollHeight/offsetHeight` reads during interactions
+- Synchronous layout queries followed by style changes
+- DOM queries inside throttled/debounced callbacks
+
+### Observer API Patterns
+
+#### IntersectionObserver (Scroll Position Detection)
+
+Use for detecting when elements enter/exit viewport or cross specific boundaries.
+
+**Example:** Header theme changes based on which section is visible
+
+**Key patterns:**
+
+```typescript
+const observerRef = useRef<IntersectionObserver | null>(null);
+const intersectingElementsRef = useRef<Map<string, IntersectionObserverEntry>>(new Map());
+
+useEffect(() => {
+  const intersectingElements = intersectingElementsRef.current;
+
+  observerRef.current = new IntersectionObserver(
+    (entries) => {
+      requestAnimationFrame(() => {
+        // Update tracking map
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            intersectingElements.set(entry.target.id, entry);
+          } else {
+            intersectingElements.delete(entry.target.id);
+          }
+        }
+
+        // Find best match from ALL intersecting elements
+        // (observer only reports changes, not all intersecting)
+        let bestMatch = null;
+        for (const [id, entry] of intersectingElements) {
+          const rect = entry.boundingClientRect ?? entry.target.getBoundingClientRect();
+          // Calculate match quality...
+          if (isBetterMatch) bestMatch = {...};
+        }
+
+        // Only update state if changed
+        if (bestMatch && bestMatch.value !== previousValueRef.current) {
+          previousValueRef.current = bestMatch.value;
+          setState(bestMatch.value);
+        }
+      });
+    },
+    {
+      rootMargin: "-64px 0px 0px 0px", // Adjust for fixed header
+      threshold: 0,
+    }
+  );
+
+  // Observe elements
+  elements.forEach(el => observerRef.current?.observe(el));
+
+  // CRITICAL: Manual initial state check
+  // IntersectionObserver callbacks only fire on CHANGES, not initial observation
+  const timeoutId = setTimeout(() => {
+    // Check which elements currently intersect
+    // Set initial state
+  }, 0);
+
+  return () => {
+    clearTimeout(timeoutId);
+    observerRef.current?.disconnect();
+    observerRef.current = null;
+    intersectingElements.clear();
+  };
+}, [deps]);
+```
+
+**Critical points:**
+
+- Observer only reports state CHANGES, not all intersecting elements
+- Use Map to track currently intersecting elements
+- Manual initial check with `setTimeout(..., 0)` required
+- Batch updates with `requestAnimationFrame()`
+- Track previous value to skip redundant setState
+- **Tiebreaker logic**: When multiple elements have equal distances, use array order (earlier in array wins)
+- Clean up timeout, observer, and Map
+
+**Tiebreaker pattern:**
+
+```typescript
+// When distances are equal, use scrollpoints array order
+if (
+  !bestMatch ||
+  distance < bestMatch.distance ||
+  (distance === bestMatch.distance && scrollpointIndex < bestMatch.index)
+) {
+  bestMatch = { scrollpoint, distance, index: scrollpointIndex };
+}
+```
+
+**Why this matters:** In Voltaire, both `meganav` (transparent) and `main-theme-dark` (with border) start at position 0, giving identical distances. Without a tiebreaker, the header unpredictably showed the border. Array order ensures `meganav` (listed first) always wins.
+
+#### ResizeObserver (Height/Size Tracking)
+
+Use for tracking element dimensions without synchronous layout reads.
+
+**Example:** Expander content height for expand/collapse animations
+
+**Key patterns:**
+
+```typescript
+const rafIdRef = useRef<number | null>(null);
+const observerRef = useRef<ResizeObserver | null>(null);
+
+useEffect(() => {
+  let isMounted = true;
+
+  observerRef.current = new ResizeObserver((entries) => {
+    // Cancel any pending RAF to avoid stale updates
+    if (rafIdRef.current !== null) {
+      cancelAnimationFrame(rafIdRef.current);
+    }
+
+    rafIdRef.current = requestAnimationFrame(() => {
+      rafIdRef.current = null;
+
+      // Guard against updates after unmount
+      if (!isMounted) return;
+
+      const entry = entries[0];
+      if (entry && entry.contentRect) {
+        const newHeight = Math.round(entry.contentRect.height);
+        setState(newHeight);
+      }
+    });
+  });
+
+  observerRef.current.observe(element);
+
+  return () => {
+    isMounted = false;
+    // Cancel pending RAF to prevent setState after unmount
+    if (rafIdRef.current !== null) {
+      cancelAnimationFrame(rafIdRef.current);
+      rafIdRef.current = null;
+    }
+    observerRef.current?.disconnect();
+    observerRef.current = null;
+  };
+}, [ref]);
+```
+
+**Critical points:**
+
+- Always capture RAF ID and cancel on cleanup
+- Use `isMounted` flag to guard setState calls
+- Cancel pending RAF before scheduling new one
+- ResizeObserver doesn't need initial check (fires immediately on observe)
+- Round numeric values for consistency
+
+### Testing Async Hooks
+
+#### Setup Pattern
+
+```typescript
+describe("useMyHook", () => {
+  let originalIntersectionObserver: typeof IntersectionObserver;
+  let originalRequestAnimationFrame: typeof requestAnimationFrame;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+
+    // CRITICAL: Save originals BEFORE mocking
+    originalIntersectionObserver = global.IntersectionObserver;
+    originalRequestAnimationFrame = global.requestAnimationFrame;
+
+    // Mock global APIs
+    global.IntersectionObserver = vi.fn((callback) => ({
+      observe: vi.fn(),
+      disconnect: vi.fn(),
+    })) as unknown as typeof IntersectionObserver;
+
+    global.requestAnimationFrame = vi.fn((cb) => {
+      cb(0);
+      return 0;
+    });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    vi.useRealTimers();
+    document.body.innerHTML = "";
+
+    // CRITICAL: Restore originals to prevent test pollution
+    global.IntersectionObserver = originalIntersectionObserver;
+    global.requestAnimationFrame = originalRequestAnimationFrame;
+  });
+});
+```
+
+#### Testing Observer Callbacks
+
+```typescript
+it("updates state when observer fires", () => {
+  const elem = document.createElement("div");
+  elem.id = "test";
+  elem.getBoundingClientRect = vi.fn().mockReturnValue({ top: 0, bottom: 200 });
+  document.body.appendChild(elem);
+
+  const { result } = renderHook(() => useMyHook());
+
+  // Advance timers for initial check
+  act(() => {
+    vi.runAllTimers();
+  });
+
+  // Simulate observer callback
+  act(() => {
+    observerCallback(
+      [
+        {
+          target: elem,
+          isIntersecting: true,
+          boundingClientRect: {
+            top: 0,
+            bottom: 200,
+            left: 0,
+            right: 0,
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 200,
+          },
+        } as unknown as IntersectionObserverEntry,
+      ],
+      {} as IntersectionObserver,
+    );
+  });
+
+  expect(result.current).toBe("expected-value");
+});
+```
+
+**Key points:**
+
+- Mock `getBoundingClientRect` on test elements
+- Provide `boundingClientRect` in IntersectionObserverEntry mocks
+- Wrap timer advances and callback calls in `act()`
+- Test both initial state and subsequent updates
+
+### Common Pitfalls Checklist
+
+When writing performance-optimized hooks:
+
+- [ ] RAF cleanup: Store ID, cancel in cleanup
+- [ ] isMounted guard: Prevent setState after unmount
+- [ ] Initial state check: Manual check for IntersectionObserver
+- [ ] Previous value tracking: Skip redundant setState
+- [ ] Map/Set cleanup: Clear in cleanup function
+- [ ] Test mock restoration: Save originals, restore in afterEach
+- [ ] Console warnings: For missing DOM elements (not errors)
+- [ ] Tiebreaker logic: When multiple candidates have equal scores
+
+## Storybook Development
+
+### Testing Interactive Components
+
+- Use `http://localhost:6006` when developing/testing components
+- Create stories that simulate production patterns (e.g., overlapping scrollpoints like Voltaire)
+- Test edge cases in stories (empty arrays, missing DOM elements, rapid state changes)
+
+### Performance Testing in Storybook
+
+1. Open Chrome DevTools → Performance tab
+2. Start recording while interacting with component
+3. Search for forced reflow indicators:
+   - `getBoundingClientRect`
+   - `clientHeight`/`scrollHeight`/`offsetHeight`
+   - "Forced reflow" warnings
+4. Measure total time in layout/reflow (should be <5ms for interactions)
+
+### Simulating Production Patterns
+
+When creating stories for layout-dependent components, replicate real-world scenarios:
+
+Example - Overlapping scrollpoints (like Voltaire):
+
+```tsx
+<div className="relative">
+  <div id="hero" className="absolute top-0 h-32" />
+  <div id="main" className="relative pt-32 h-screen" />
+</div>
+```
+
+This allows testing tiebreaker logic and initial state detection. Storybook stories should replicate production layout patterns to catch bugs like the tiebreaker issue. The original simple sequential zones didn't expose the Voltaire bug where elements start at the same position.
+
 ## Git workflow
 
 - Always do work on a new branch, start the branch on the HEAD of `origin/main`

package/core/Expander.js

@@ -1,2 +1,2 @@
-import React,{useEffect,useRef,useState}from"react";import*as RadixCollapsible from"@radix-ui/react-collapsible";import{throttle}from"es-toolkit/compat";import cn from"./utils/cn";const Expander=({heightThreshold=200,className,fadeClassName,controlsClassName,controlsOpenedLabel,controlsClosedLabel,children})=>{const innerRef=useRef(null);const[showControls,setShowControls]=useState(false);const[contentHeight,setContentHeight]=useState(heightThreshold);const[expanded,setExpanded]=useState(false);useEffect(()=>{if(innerRef.current){setContentHeight(innerRef.current.clientHeight)}setShowControls(contentHeight>=heightThreshold)},[contentHeight,heightThreshold]);useEffect(()=>{const onResize=throttle(()=>{if(innerRef.current){setContentHeight(innerRef.current.clientHeight)}},250);window.addEventListener("resize",onResize);return()=>{window.removeEventListener("resize",onResize)}},[]);const height=contentHeight<heightThreshold?"auto":expanded?contentHeight:heightThreshold;return React.createElement(RadixCollapsible.Root,{open:expanded,onOpenChange:setExpanded},React.createElement("div",{style:{height},"data-testid":"expander-container",className:cn("overflow-hidden transition-all relative",className)},showControls&&!expanded&&React.createElement("div",{className:cn("h-16 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0",fadeClassName)}),React.createElement("div",{ref:innerRef},children)),showControls&&React.createElement(RadixCollapsible.Trigger,{asChild:true},React.createElement("button",{"data-testid":"expander-controls",className:cn(heightThreshold===0&&!expanded?"":"mt-4","cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light",controlsClassName)},expanded?controlsOpenedLabel??"View less -":controlsClosedLabel??"View all +")))};export default Expander;
+import React,{useMemo,useRef,useState}from"react";import*as RadixCollapsible from"@radix-ui/react-collapsible";import cn from"./utils/cn";import{useContentHeight}from"./hooks/use-content-height";const Expander=({heightThreshold=200,className,fadeClassName,controlsClassName,controlsOpenedLabel,controlsClosedLabel,children})=>{const innerRef=useRef(null);const[expanded,setExpanded]=useState(false);const contentHeight=useContentHeight(innerRef,heightThreshold);const showControls=useMemo(()=>contentHeight>=heightThreshold,[contentHeight,heightThreshold]);const height=useMemo(()=>contentHeight<heightThreshold?"auto":expanded?contentHeight:heightThreshold,[contentHeight,heightThreshold,expanded]);return React.createElement(RadixCollapsible.Root,{open:expanded,onOpenChange:setExpanded},React.createElement("div",{style:{height},"data-testid":"expander-container",className:cn("overflow-hidden transition-all relative",className)},showControls&&!expanded&&React.createElement("div",{className:cn("h-16 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0",fadeClassName)}),React.createElement("div",{ref:innerRef},children)),showControls&&React.createElement(RadixCollapsible.Trigger,{asChild:true},React.createElement("button",{"data-testid":"expander-controls",className:cn(heightThreshold===0&&!expanded?"":"mt-4","cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light focus-base transition-colors",controlsClassName)},expanded?controlsOpenedLabel??"View less -":controlsClosedLabel??"View all +")))};export default Expander;
 //# sourceMappingURL=Expander.js.map

package/core/Expander.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Expander.tsx"],"sourcesContent":["import React, {\n  PropsWithChildren,\n  ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport * as RadixCollapsible from \"@radix-ui/react-collapsible\";\nimport { throttle } from \"es-toolkit/compat\";\nimport cn from \"./utils/cn\";\n\ntype ExpanderProps = {\n  heightThreshold?: number;\n  className?: string;\n  fadeClassName?: string;\n  controlsClassName?: string;\n  controlsOpenedLabel?: string | ReactNode;\n  controlsClosedLabel?: string | ReactNode;\n};\n\nconst Expander = ({\n  heightThreshold = 200,\n  className,\n  fadeClassName,\n  controlsClassName,\n  controlsOpenedLabel,\n  controlsClosedLabel,\n  children,\n}: PropsWithChildren<ExpanderProps>) => {\n  const innerRef = useRef<HTMLDivElement>(null);\n  const [showControls, setShowControls] = useState(false);\n  const [contentHeight, setContentHeight] = useState<number>(heightThreshold);\n  const [expanded, setExpanded] = useState(false);\n\n  useEffect(() => {\n    if (innerRef.current) {\n      setContentHeight(innerRef.current.clientHeight);\n    }\n\n    setShowControls(contentHeight >= heightThreshold);\n  }, [contentHeight, heightThreshold]);\n\n  useEffect(() => {\n    const onResize = throttle(() => {\n      if (innerRef.current) {\n        setContentHeight(innerRef.current.clientHeight);\n      }\n    }, 250);\n\n    window.addEventListener(\"resize\", onResize);\n    return () => {\n      window.removeEventListener(\"resize\", onResize);\n    };\n  }, []);\n\n  const height =\n    contentHeight < heightThreshold\n      ? \"auto\"\n      : expanded\n        ? contentHeight\n        : heightThreshold;\n\n  return (\n    <RadixCollapsible.Root open={expanded} onOpenChange={setExpanded}>\n      <div\n        style={{ height }}\n        data-testid=\"expander-container\"\n        className={cn(\"overflow-hidden transition-all relative\", className)}\n      >\n        {showControls && !expanded && (\n          <div\n            className={cn(\n              \"h-16 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0\",\n              fadeClassName,\n            )}\n          ></div>\n        )}\n        <div ref={innerRef}>{children}</div>\n      </div>\n      {showControls && (\n        <RadixCollapsible.Trigger asChild>\n          <button\n            data-testid=\"expander-controls\"\n            className={cn(\n              heightThreshold === 0 && !expanded ? \"\" : \"mt-4\",\n              \"cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light\",\n              controlsClassName,\n            )}\n          >\n            {expanded\n              ? (controlsOpenedLabel ?? \"View less -\")\n              : (controlsClosedLabel ?? \"View all +\")}\n          </button>\n        </RadixCollapsible.Trigger>\n      )}\n    </RadixCollapsible.Root>\n  );\n};\n\nexport default Expander;\n"],"names":["React","useEffect","useRef","useState","RadixCollapsible","throttle","cn","Expander","heightThreshold","className","fadeClassName","controlsClassName","controlsOpenedLabel","controlsClosedLabel","children","innerRef","showControls","setShowControls","contentHeight","setContentHeight","expanded","setExpanded","current","clientHeight","onResize","window","addEventListener","removeEventListener","height","Root","open","onOpenChange","div","style","data-testid","ref","Trigger","asChild","button"],"mappings":"AAAA,OAAOA,OAGLC,SAAS,CACTC,MAAM,CACNC,QAAQ,KACH,OAAQ,AACf,WAAYC,qBAAsB,6BAA8B,AAChE,QAASC,QAAQ,KAAQ,mBAAoB,AAC7C,QAAOC,OAAQ,YAAa,CAW5B,MAAMC,SAAW,CAAC,CAChBC,gBAAkB,GAAG,CACrBC,SAAS,CACTC,aAAa,CACbC,iBAAiB,CACjBC,mBAAmB,CACnBC,mBAAmB,CACnBC,QAAQ,CACyB,IACjC,MAAMC,SAAWb,OAAuB,MACxC,KAAM,CAACc,aAAcC,gBAAgB,CAAGd,SAAS,OACjD,KAAM,CAACe,cAAeC,iBAAiB,CAAGhB,SAAiBK,iBAC3D,KAAM,CAACY,SAAUC,YAAY,CAAGlB,SAAS,OAEzCF,UAAU,KACR,GAAIc,SAASO,OAAO,CAAE,CACpBH,iBAAiBJ,SAASO,OAAO,CAACC,YAAY,CAChD,CAEAN,gBAAgBC,eAAiBV,gBACnC,EAAG,CAACU,cAAeV,gBAAgB,EAEnCP,UAAU,KACR,MAAMuB,SAAWnB,SAAS,KACxB,GAAIU,SAASO,OAAO,CAAE,CACpBH,iBAAiBJ,SAASO,OAAO,CAACC,YAAY,CAChD,CACF,EAAG,KAEHE,OAAOC,gBAAgB,CAAC,SAAUF,UAClC,MAAO,KACLC,OAAOE,mBAAmB,CAAC,SAAUH,SACvC,CACF,EAAG,EAAE,EAEL,MAAMI,OACJV,cAAgBV,gBACZ,OACAY,SACEF,cACAV,gBAER,OACE,oBAACJ,iBAAiByB,IAAI,EAACC,KAAMV,SAAUW,aAAcV,aACnD,oBAACW,OACCC,MAAO,CAAEL,MAAO,EAChBM,cAAY,qBACZzB,UAAWH,GAAG,0CAA2CG,YAExDO,cAAgB,CAACI,UAChB,oBAACY,OACCvB,UAAWH,GACT,0FACAI,iBAIN,oBAACsB,OAAIG,IAAKpB,UAAWD,WAEtBE,cACC,oBAACZ,iBAAiBgC,OAAO,EAACC,QAAAA,MACxB,oBAACC,UACCJ,cAAY,oBACZzB,UAAWH,GACTE,kBAAoB,GAAK,CAACY,SAAW,GAAK,OAC1C,uFACAT,oBAGDS,SACIR,qBAAuB,cACvBC,qBAAuB,eAMxC,CAEA,gBAAeN,QAAS"}
+{"version":3,"sources":["../../src/core/Expander.tsx"],"sourcesContent":["import React, {\n  PropsWithChildren,\n  ReactNode,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport * as RadixCollapsible from \"@radix-ui/react-collapsible\";\nimport cn from \"./utils/cn\";\nimport { useContentHeight } from \"./hooks/use-content-height\";\n\ntype ExpanderProps = {\n  heightThreshold?: number;\n  className?: string;\n  fadeClassName?: string;\n  controlsClassName?: string;\n  controlsOpenedLabel?: string | ReactNode;\n  controlsClosedLabel?: string | ReactNode;\n};\n\nconst Expander = ({\n  heightThreshold = 200,\n  className,\n  fadeClassName,\n  controlsClassName,\n  controlsOpenedLabel,\n  controlsClosedLabel,\n  children,\n}: PropsWithChildren<ExpanderProps>) => {\n  const innerRef = useRef<HTMLDivElement>(null);\n  const [expanded, setExpanded] = useState(false);\n\n  const contentHeight = useContentHeight(innerRef, heightThreshold);\n\n  const showControls = useMemo(\n    () => contentHeight >= heightThreshold,\n    [contentHeight, heightThreshold],\n  );\n\n  const height = useMemo(\n    () =>\n      contentHeight < heightThreshold\n        ? \"auto\"\n        : expanded\n          ? contentHeight\n          : heightThreshold,\n    [contentHeight, heightThreshold, expanded],\n  );\n\n  return (\n    <RadixCollapsible.Root open={expanded} onOpenChange={setExpanded}>\n      <div\n        style={{ height }}\n        data-testid=\"expander-container\"\n        className={cn(\"overflow-hidden transition-all relative\", className)}\n      >\n        {showControls && !expanded && (\n          <div\n            className={cn(\n              \"h-16 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0\",\n              fadeClassName,\n            )}\n          ></div>\n        )}\n        <div ref={innerRef}>{children}</div>\n      </div>\n      {showControls && (\n        <RadixCollapsible.Trigger asChild>\n          <button\n            data-testid=\"expander-controls\"\n            className={cn(\n              heightThreshold === 0 && !expanded ? \"\" : \"mt-4\",\n              \"cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light focus-base transition-colors\",\n              controlsClassName,\n            )}\n          >\n            {expanded\n              ? (controlsOpenedLabel ?? \"View less -\")\n              : (controlsClosedLabel ?? \"View all +\")}\n          </button>\n        </RadixCollapsible.Trigger>\n      )}\n    </RadixCollapsible.Root>\n  );\n};\n\nexport default Expander;\n"],"names":["React","useMemo","useRef","useState","RadixCollapsible","cn","useContentHeight","Expander","heightThreshold","className","fadeClassName","controlsClassName","controlsOpenedLabel","controlsClosedLabel","children","innerRef","expanded","setExpanded","contentHeight","showControls","height","Root","open","onOpenChange","div","style","data-testid","ref","Trigger","asChild","button"],"mappings":"AAAA,OAAOA,OAGLC,OAAO,CACPC,MAAM,CACNC,QAAQ,KACH,OAAQ,AACf,WAAYC,qBAAsB,6BAA8B,AAChE,QAAOC,OAAQ,YAAa,AAC5B,QAASC,gBAAgB,KAAQ,4BAA6B,CAW9D,MAAMC,SAAW,CAAC,CAChBC,gBAAkB,GAAG,CACrBC,SAAS,CACTC,aAAa,CACbC,iBAAiB,CACjBC,mBAAmB,CACnBC,mBAAmB,CACnBC,QAAQ,CACyB,IACjC,MAAMC,SAAWb,OAAuB,MACxC,KAAM,CAACc,SAAUC,YAAY,CAAGd,SAAS,OAEzC,MAAMe,cAAgBZ,iBAAiBS,SAAUP,iBAEjD,MAAMW,aAAelB,QACnB,IAAMiB,eAAiBV,gBACvB,CAACU,cAAeV,gBAAgB,EAGlC,MAAMY,OAASnB,QACb,IACEiB,cAAgBV,gBACZ,OACAQ,SACEE,cACAV,gBACR,CAACU,cAAeV,gBAAiBQ,SAAS,EAG5C,OACE,oBAACZ,iBAAiBiB,IAAI,EAACC,KAAMN,SAAUO,aAAcN,aACnD,oBAACO,OACCC,MAAO,CAAEL,MAAO,EAChBM,cAAY,qBACZjB,UAAWJ,GAAG,0CAA2CI,YAExDU,cAAgB,CAACH,UAChB,oBAACQ,OACCf,UAAWJ,GACT,0FACAK,iBAIN,oBAACc,OAAIG,IAAKZ,UAAWD,WAEtBK,cACC,oBAACf,iBAAiBwB,OAAO,EAACC,QAAAA,MACxB,oBAACC,UACCJ,cAAY,oBACZjB,UAAWJ,GACTG,kBAAoB,GAAK,CAACQ,SAAW,GAAK,OAC1C,oHACAL,oBAGDK,SACIJ,qBAAuB,cACvBC,qBAAuB,eAMxC,CAEA,gBAAeN,QAAS"}

package/core/Header/types.js

@@ -0,0 +1,2 @@
+export{};
+//# sourceMappingURL=types.js.map

package/core/Header/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/Header/types.ts"],"sourcesContent":["export type ThemedScrollpoint = {\n  id: string;\n  className: string;\n};\n"],"names":[],"mappings":"AAAA,QAGE"}

package/core/Header.js

@@ -1,2 +1,2 @@
-import React,{useState,useEffect,useRef,useMemo,useCallback}from"react";import Icon from"./Icon";import cn from"./utils/cn";import Logo from"./Logo";import{componentMaxHeight,HEADER_BOTTOM_MARGIN,HEADER_HEIGHT}from"./utils/heights";import{HeaderLinks}from"./Header/HeaderLinks";import{throttle}from"es-toolkit/compat";import{COLLAPSE_TRIGGER_DISTANCE}from"./Notice/component";const FLEXIBLE_DESKTOP_CLASSES="hidden md:flex flex-1 items-center h-full";const MAX_MOBILE_MENU_WIDTH="560px";const Header=({className,isNoticeBannerEnabled=false,noticeHeight=0,searchBar,searchButton,logoHref,headerLinks,headerLinksClassName,headerCenterClassName,nav,mobileNav,sessionState,themedScrollpoints=[],searchButtonVisibility="all",location,logoBadge})=>{const[showMenu,setShowMenu]=useState(false);const[fadingOut,setFadingOut]=useState(false);const[noticeBannerVisible,setNoticeBannerVisible]=useState(isNoticeBannerEnabled);const menuRef=useRef(null);const[scrollpointClasses,setScrollpointClasses]=useState(themedScrollpoints.length>0?themedScrollpoints[0].className:"");const headerStyle={height:HEADER_HEIGHT,top:noticeBannerVisible?`${noticeHeight}px`:"0"};const headerClassName=cn("fixed left-0 top-0 w-full z-50 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-all duration-300 ease-in-out px-6 lg:px-16",scrollpointClasses,{"md:top-auto":noticeBannerVisible});const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setShowMenu(false);setFadingOut(false)},150)};const handleNoticeClose=useCallback(()=>{setNoticeBannerVisible(false)},[]);useEffect(()=>{document.addEventListener("notice-closed",handleNoticeClose);return()=>document.removeEventListener("notice-closed",handleNoticeClose)},[handleNoticeClose]);useEffect(()=>{const handleScroll=()=>{const noticeElement=document.querySelector('[data-id="ui-notice"]');const isNoticeClosedToBeHidden=noticeElement?.classList.contains("ui-announcement-hidden");setNoticeBannerVisible(window.scrollY<=COLLAPSE_TRIGGER_DISTANCE&&isNoticeBannerEnabled&&!isNoticeClosedToBeHidden);for(const scrollpoint of themedScrollpoints){const element=document.getElementById(scrollpoint.id);if(element){const rect=element.getBoundingClientRect();if(rect.top<=HEADER_HEIGHT&&rect.bottom>=HEADER_HEIGHT){setScrollpointClasses(scrollpoint.className);return}}}};const throttledHandleScroll=throttle(handleScroll,100);handleScroll();window.addEventListener("scroll",throttledHandleScroll);return()=>window.removeEventListener("scroll",throttledHandleScroll)},[themedScrollpoints,isNoticeBannerEnabled]);useEffect(()=>{const handleResize=()=>{if(window.innerWidth>=1040){setShowMenu(false)}};window.addEventListener("resize",handleResize);return()=>window.removeEventListener("resize",handleResize)},[]);useEffect(()=>{if(showMenu){document.body.classList.add("overflow-hidden")}else{document.body.classList.remove("overflow-hidden")}return()=>{document.body.classList.remove("overflow-hidden")}},[showMenu]);useEffect(()=>{if(location&&showMenu){closeMenu()}},[location]);const wrappedSearchButton=useMemo(()=>searchButton?React.createElement("div",{className:"text-neutral-1300 dark:text-neutral-000 flex items-center"},searchButton):null,[searchButton]);return React.createElement(React.Fragment,null,React.createElement("header",{role:"banner",style:headerStyle,className:headerClassName},React.createElement("div",{className:cn("flex items-center h-full",className)},React.createElement("nav",{className:"flex flex-1 h-full items-center"},["light","dark"].map(theme=>React.createElement(Logo,{key:theme,href:logoHref,theme:theme,badge:logoBadge,additionalLinkAttrs:{className:cn("h-full focus-base rounded mr-4 lg:mr-8",{"flex dark:hidden":theme==="light","hidden dark:flex":theme==="dark"})}})),React.createElement("div",{className:FLEXIBLE_DESKTOP_CLASSES},nav)),React.createElement("div",{className:"flex md:hidden flex-1 items-center justify-end gap-6 h-full"},searchButtonVisibility!=="desktop"?wrappedSearchButton:null,React.createElement("button",{className:"cursor-pointer focus-base rounded flex items-center p-0",onClick:()=>setShowMenu(!showMenu),"aria-expanded":showMenu,"aria-controls":"mobile-menu","aria-label":"Toggle menu"},React.createElement(Icon,{name:showMenu?"icon-gui-x-mark-outline":"icon-gui-bars-3-outline",additionalCSS:"text-neutral-1300 dark:text-neutral-000",size:"1.5rem"}))),searchBar?React.createElement("div",{className:cn(FLEXIBLE_DESKTOP_CLASSES,"justify-center",headerCenterClassName)},searchBar):null,React.createElement(HeaderLinks,{className:cn(FLEXIBLE_DESKTOP_CLASSES,headerLinksClassName),headerLinks:headerLinks,sessionState:sessionState,searchButton:wrappedSearchButton,searchButtonVisibility:searchButtonVisibility}))),showMenu?React.createElement(React.Fragment,null,React.createElement("div",{className:cn("fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300 z-40",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut}),onClick:closeMenu,onKeyDown:e=>e.key==="Escape"&&closeMenu(),role:"presentation"}),React.createElement("div",{id:"mobile-menu",className:"md:hidden fixed flex flex-col top-[4.75rem] overflow-y-hidden mx-3 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-50",style:{maxWidth:MAX_MOBILE_MENU_WIDTH,maxHeight:componentMaxHeight(HEADER_HEIGHT,HEADER_BOTTOM_MARGIN)},ref:menuRef,role:"navigation"},mobileNav,React.createElement(HeaderLinks,{headerLinks:headerLinks,sessionState:sessionState}))):null)};export default Header;
+import React,{useState,useEffect,useRef,useMemo,useCallback}from"react";import Icon from"./Icon";import cn from"./utils/cn";import Logo from"./Logo";import{componentMaxHeight,HEADER_BOTTOM_MARGIN,HEADER_HEIGHT}from"./utils/heights";import{HeaderLinks}from"./Header/HeaderLinks";import{throttle}from"es-toolkit/compat";import{COLLAPSE_TRIGGER_DISTANCE}from"./Notice/component";import{useThemedScrollpoints}from"./hooks/use-themed-scrollpoints";const FLEXIBLE_DESKTOP_CLASSES="hidden md:flex flex-1 items-center h-full";const MAX_MOBILE_MENU_WIDTH="560px";const Header=({className,isNoticeBannerEnabled=false,noticeHeight=0,searchBar,searchButton,logoHref,headerLinks,headerLinksClassName,headerCenterClassName,nav,mobileNav,sessionState,themedScrollpoints=[],searchButtonVisibility="all",location,logoBadge})=>{const[showMenu,setShowMenu]=useState(false);const[fadingOut,setFadingOut]=useState(false);const[noticeBannerVisible,setNoticeBannerVisible]=useState(isNoticeBannerEnabled);const menuRef=useRef(null);const scrollpointClasses=useThemedScrollpoints(themedScrollpoints);const headerStyle={height:HEADER_HEIGHT,top:noticeBannerVisible?`${noticeHeight}px`:"0"};const headerClassName=cn("fixed left-0 top-0 w-full z-50 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-all duration-300 ease-in-out px-6 lg:px-16",scrollpointClasses,{"md:top-auto":noticeBannerVisible});const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setShowMenu(false);setFadingOut(false)},150)};const handleNoticeClose=useCallback(()=>{setNoticeBannerVisible(false)},[]);useEffect(()=>{document.addEventListener("notice-closed",handleNoticeClose);return()=>document.removeEventListener("notice-closed",handleNoticeClose)},[handleNoticeClose]);useEffect(()=>{if(!isNoticeBannerEnabled){return}const noticeElement=document.querySelector('[data-id="ui-notice"]');if(!noticeElement){console.warn("Header: Notice element not found");return}let previousVisibility=noticeBannerVisible;const handleScroll=()=>{const scrollY=window.scrollY;const isNoticeHidden=noticeElement.classList.contains("ui-announcement-hidden");const shouldBeVisible=scrollY<=COLLAPSE_TRIGGER_DISTANCE&&!isNoticeHidden;if(shouldBeVisible!==previousVisibility){previousVisibility=shouldBeVisible;setNoticeBannerVisible(shouldBeVisible)}};const throttledHandleScroll=throttle(handleScroll,100);handleScroll();window.addEventListener("scroll",throttledHandleScroll,{passive:true});return()=>{window.removeEventListener("scroll",throttledHandleScroll)}},[isNoticeBannerEnabled,noticeBannerVisible]);useEffect(()=>{const handleResize=()=>{if(window.innerWidth>=1040){setShowMenu(false)}};window.addEventListener("resize",handleResize);return()=>window.removeEventListener("resize",handleResize)},[]);useEffect(()=>{if(showMenu){document.body.classList.add("overflow-hidden")}else{document.body.classList.remove("overflow-hidden")}return()=>{document.body.classList.remove("overflow-hidden")}},[showMenu]);useEffect(()=>{if(location&&showMenu){closeMenu()}},[location]);const wrappedSearchButton=useMemo(()=>searchButton?React.createElement("div",{className:"text-neutral-1300 dark:text-neutral-000 flex items-center"},searchButton):null,[searchButton]);return React.createElement(React.Fragment,null,React.createElement("header",{role:"banner",style:headerStyle,className:headerClassName},React.createElement("div",{className:cn("flex items-center h-full",className)},React.createElement("nav",{className:"flex flex-1 h-full items-center"},["light","dark"].map(theme=>React.createElement(Logo,{key:theme,href:logoHref,theme:theme,badge:logoBadge,additionalLinkAttrs:{className:cn("h-full focus-base rounded mr-4 lg:mr-8",{"flex dark:hidden":theme==="light","hidden dark:flex":theme==="dark"})}})),React.createElement("div",{className:FLEXIBLE_DESKTOP_CLASSES},nav)),React.createElement("div",{className:"flex md:hidden flex-1 items-center justify-end gap-6 h-full"},searchButtonVisibility!=="desktop"?wrappedSearchButton:null,React.createElement("button",{className:"cursor-pointer focus-base rounded flex items-center p-0",onClick:()=>setShowMenu(!showMenu),"aria-expanded":showMenu,"aria-controls":"mobile-menu","aria-label":"Toggle menu"},React.createElement(Icon,{name:showMenu?"icon-gui-x-mark-outline":"icon-gui-bars-3-outline",additionalCSS:"text-neutral-1300 dark:text-neutral-000",size:"1.5rem"}))),searchBar?React.createElement("div",{className:cn(FLEXIBLE_DESKTOP_CLASSES,"justify-center",headerCenterClassName)},searchBar):null,React.createElement(HeaderLinks,{className:cn(FLEXIBLE_DESKTOP_CLASSES,headerLinksClassName),headerLinks:headerLinks,sessionState:sessionState,searchButton:wrappedSearchButton,searchButtonVisibility:searchButtonVisibility}))),showMenu?React.createElement(React.Fragment,null,React.createElement("div",{className:cn("fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300 z-40",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut}),onClick:closeMenu,onKeyDown:e=>e.key==="Escape"&&closeMenu(),role:"presentation"}),React.createElement("div",{id:"mobile-menu",className:"md:hidden fixed flex flex-col top-[4.75rem] overflow-y-hidden mx-3 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-50",style:{maxWidth:MAX_MOBILE_MENU_WIDTH,maxHeight:componentMaxHeight(HEADER_HEIGHT,HEADER_BOTTOM_MARGIN)},ref:menuRef,role:"navigation"},mobileNav,React.createElement(HeaderLinks,{headerLinks:headerLinks,sessionState:sessionState}))):null)};export default Header;
 //# sourceMappingURL=Header.js.map

package/core/Header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Header.tsx"],"sourcesContent":["import React, {\n  useState,\n  useEffect,\n  useRef,\n  ReactNode,\n  useMemo,\n  useCallback,\n} from \"react\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport Logo from \"./Logo\";\nimport {\n  componentMaxHeight,\n  HEADER_BOTTOM_MARGIN,\n  HEADER_HEIGHT,\n} from \"./utils/heights\";\nimport { HeaderLinks } from \"./Header/HeaderLinks\";\nimport { throttle } from \"es-toolkit/compat\";\nimport { Theme } from \"./styles/colors/types\";\nimport { COLLAPSE_TRIGGER_DISTANCE } from \"./Notice/component\";\n\nexport type ThemedScrollpoint = {\n  id: string;\n  className: string;\n};\n\n/**\n * Represents the state of the user session in the header.\n */\nexport type HeaderSessionState = {\n  /**\n   * Indicates if the user is signed in.\n   */\n  signedIn: boolean;\n\n  /**\n   * Information required to log out the user.\n   */\n  logOut: {\n    /**\n     * Token used for logging out.\n     */\n    token: string;\n\n    /**\n     * URL to log out the user.\n     */\n    href: string;\n  };\n\n  /**\n   * Name of the user's account.\n   */\n  accountName: string;\n};\n\n/**\n * Props for the Header component.\n */\nexport type HeaderProps = {\n  /**\n   * Optional classnames to add to the header\n   */\n  className?: string;\n  /**\n   * Indicates if the notice banner is enabled.\n   */\n  isNoticeBannerEnabled?: boolean;\n  /**\n   * Height of the notice banner in pixels.\n   */\n  noticeHeight?: number;\n  /**\n   * Optional search bar element.\n   */\n  searchBar?: ReactNode;\n\n  /**\n   * Optional search button element.\n   */\n  searchButton?: ReactNode;\n\n  /**\n   * URL for the logo link.\n   */\n  logoHref?: string;\n\n  /**\n   * Array of header links.\n   */\n  headerLinks?: {\n    /**\n     * URL for the link.\n     */\n    href: string;\n\n    /**\n     * Label for the link.\n     */\n    label: string;\n\n    /**\n     * Indicates if the link should open in a new tab.\n     */\n    external?: boolean;\n  }[];\n\n  /**\n   * Optional classname for styling the header links container.\n   */\n  headerLinksClassName?: string;\n\n  /**\n   * Optional classname for styling the header center container.\n   */\n  headerCenterClassName?: string;\n\n  /**\n   * Optional desktop navigation element.\n   */\n  nav?: ReactNode;\n\n  /**\n   * Optional mobile navigation element.\n   */\n  mobileNav?: ReactNode;\n\n  /**\n   * State of the user session.\n   */\n  sessionState?: HeaderSessionState;\n\n  /**\n   * Array of themed scrollpoints. The header will change its appearance based on the scrollpoint in view.\n   */\n  themedScrollpoints?: ThemedScrollpoint[];\n\n  /**\n   * Visibility setting for the search button.\n   * - \"all\": Visible on all devices.\n   * - \"desktop\": Visible only on desktop devices.\n   * - \"mobile\": Visible only on mobile devices.\n   */\n  searchButtonVisibility?: \"all\" | \"desktop\" | \"mobile\";\n\n  /**\n   * Optional location object to detect location changes.\n   */\n  location?: Location;\n\n  /**\n   * Optional badge text to display on the logo.\n   */\n  logoBadge?: string;\n};\n\nconst FLEXIBLE_DESKTOP_CLASSES = \"hidden md:flex flex-1 items-center h-full\";\n\n/**\n * Maximum width before the menu expanded into full width\n */\nconst MAX_MOBILE_MENU_WIDTH = \"560px\";\n\nconst Header: React.FC<HeaderProps> = ({\n  className,\n  isNoticeBannerEnabled = false,\n  noticeHeight = 0,\n  searchBar,\n  searchButton,\n  logoHref,\n  headerLinks,\n  headerLinksClassName,\n  headerCenterClassName,\n  nav,\n  mobileNav,\n  sessionState,\n  themedScrollpoints = [],\n  searchButtonVisibility = \"all\",\n  location,\n  logoBadge,\n}) => {\n  const [showMenu, setShowMenu] = useState(false);\n  const [fadingOut, setFadingOut] = useState(false);\n  const [noticeBannerVisible, setNoticeBannerVisible] = useState(\n    isNoticeBannerEnabled,\n  );\n  const menuRef = useRef<HTMLDivElement>(null);\n  const [scrollpointClasses, setScrollpointClasses] = useState<string>(\n    themedScrollpoints.length > 0 ? themedScrollpoints[0].className : \"\",\n  );\n\n  const headerStyle = {\n    height: HEADER_HEIGHT,\n    top: noticeBannerVisible ? `${noticeHeight}px` : \"0\",\n  };\n\n  const headerClassName = cn(\n    \"fixed left-0 top-0 w-full z-50 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-all duration-300 ease-in-out px-6 lg:px-16\",\n    scrollpointClasses,\n    {\n      \"md:top-auto\": noticeBannerVisible,\n    },\n  );\n\n  const closeMenu = () => {\n    setFadingOut(true);\n\n    setTimeout(() => {\n      setShowMenu(false);\n      setFadingOut(false);\n    }, 150);\n  };\n\n  const handleNoticeClose = useCallback(() => {\n    setNoticeBannerVisible(false);\n  }, []);\n\n  useEffect(() => {\n    document.addEventListener(\"notice-closed\", handleNoticeClose);\n    return () =>\n      document.removeEventListener(\"notice-closed\", handleNoticeClose);\n  }, [handleNoticeClose]);\n\n  useEffect(() => {\n    const handleScroll = () => {\n      const noticeElement = document.querySelector('[data-id=\"ui-notice\"]');\n      const isNoticeClosedToBeHidden = noticeElement?.classList.contains(\n        \"ui-announcement-hidden\",\n      );\n      setNoticeBannerVisible(\n        window.scrollY <= COLLAPSE_TRIGGER_DISTANCE &&\n          isNoticeBannerEnabled &&\n          !isNoticeClosedToBeHidden,\n      );\n      for (const scrollpoint of themedScrollpoints) {\n        const element = document.getElementById(scrollpoint.id);\n        if (element) {\n          const rect = element.getBoundingClientRect();\n          if (rect.top <= HEADER_HEIGHT && rect.bottom >= HEADER_HEIGHT) {\n            setScrollpointClasses(scrollpoint.className);\n            return;\n          }\n        }\n      }\n    };\n\n    const throttledHandleScroll = throttle(handleScroll, 100);\n\n    handleScroll();\n\n    window.addEventListener(\"scroll\", throttledHandleScroll);\n    return () => window.removeEventListener(\"scroll\", throttledHandleScroll);\n  }, [themedScrollpoints, isNoticeBannerEnabled]);\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (window.innerWidth >= 1040) {\n        setShowMenu(false);\n      }\n    };\n    window.addEventListener(\"resize\", handleResize);\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n\n  useEffect(() => {\n    if (showMenu) {\n      document.body.classList.add(\"overflow-hidden\");\n    } else {\n      document.body.classList.remove(\"overflow-hidden\");\n    }\n\n    // Cleanup on unmount\n    return () => {\n      document.body.classList.remove(\"overflow-hidden\");\n    };\n  }, [showMenu]);\n\n  // Close menu when location changes\n  useEffect(() => {\n    if (location && showMenu) {\n      closeMenu();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [location]);\n\n  const wrappedSearchButton = useMemo(\n    () =>\n      searchButton ? (\n        <div className=\"text-neutral-1300 dark:text-neutral-000 flex items-center\">\n          {searchButton}\n        </div>\n      ) : null,\n    [searchButton],\n  );\n\n  return (\n    <>\n      <header role=\"banner\" style={headerStyle} className={headerClassName}>\n        <div className={cn(\"flex items-center h-full\", className)}>\n          <nav className=\"flex flex-1 h-full items-center\">\n            {([\"light\", \"dark\"] as Theme[]).map((theme) => (\n              <Logo\n                key={theme}\n                href={logoHref}\n                theme={theme}\n                badge={logoBadge}\n                additionalLinkAttrs={{\n                  className: cn(\"h-full focus-base rounded mr-4 lg:mr-8\", {\n                    \"flex dark:hidden\": theme === \"light\",\n                    \"hidden dark:flex\": theme === \"dark\",\n                  }),\n                }}\n              />\n            ))}\n            <div className={FLEXIBLE_DESKTOP_CLASSES}>{nav}</div>\n          </nav>\n          <div className=\"flex md:hidden flex-1 items-center justify-end gap-6 h-full\">\n            {searchButtonVisibility !== \"desktop\" ? wrappedSearchButton : null}\n            <button\n              className=\"cursor-pointer focus-base rounded flex items-center p-0\"\n              onClick={() => setShowMenu(!showMenu)}\n              aria-expanded={showMenu}\n              aria-controls=\"mobile-menu\"\n              aria-label=\"Toggle menu\"\n            >\n              <Icon\n                name={\n                  showMenu\n                    ? \"icon-gui-x-mark-outline\"\n                    : \"icon-gui-bars-3-outline\"\n                }\n                additionalCSS=\"text-neutral-1300 dark:text-neutral-000\"\n                size=\"1.5rem\"\n              />\n            </button>\n          </div>\n          {searchBar ? (\n            <div\n              className={cn(\n                FLEXIBLE_DESKTOP_CLASSES,\n                \"justify-center\",\n                headerCenterClassName,\n              )}\n            >\n              {searchBar}\n            </div>\n          ) : null}\n          <HeaderLinks\n            className={cn(FLEXIBLE_DESKTOP_CLASSES, headerLinksClassName)}\n            headerLinks={headerLinks}\n            sessionState={sessionState}\n            searchButton={wrappedSearchButton}\n            searchButtonVisibility={searchButtonVisibility}\n          />\n        </div>\n      </header>\n      {showMenu ? (\n        <>\n          <div\n            className={cn(\n              \"fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300 z-40\",\n              {\n                \"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]\":\n                  !fadingOut,\n                \"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]\":\n                  fadingOut,\n              },\n            )}\n            onClick={closeMenu}\n            onKeyDown={(e) => e.key === \"Escape\" && closeMenu()}\n            role=\"presentation\"\n          />\n          <div\n            id=\"mobile-menu\"\n            className=\"md:hidden fixed flex flex-col top-[4.75rem] overflow-y-hidden mx-3 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-50\"\n            style={{\n              maxWidth: MAX_MOBILE_MENU_WIDTH,\n              maxHeight: componentMaxHeight(\n                HEADER_HEIGHT,\n                HEADER_BOTTOM_MARGIN,\n              ),\n            }}\n            ref={menuRef}\n            role=\"navigation\"\n          >\n            {mobileNav}\n            <HeaderLinks\n              headerLinks={headerLinks}\n              sessionState={sessionState}\n            />\n          </div>\n        </>\n      ) : null}\n    </>\n  );\n};\n\nexport default Header;\n"],"names":["React","useState","useEffect","useRef","useMemo","useCallback","Icon","cn","Logo","componentMaxHeight","HEADER_BOTTOM_MARGIN","HEADER_HEIGHT","HeaderLinks","throttle","COLLAPSE_TRIGGER_DISTANCE","FLEXIBLE_DESKTOP_CLASSES","MAX_MOBILE_MENU_WIDTH","Header","className","isNoticeBannerEnabled","noticeHeight","searchBar","searchButton","logoHref","headerLinks","headerLinksClassName","headerCenterClassName","nav","mobileNav","sessionState","themedScrollpoints","searchButtonVisibility","location","logoBadge","showMenu","setShowMenu","fadingOut","setFadingOut","noticeBannerVisible","setNoticeBannerVisible","menuRef","scrollpointClasses","setScrollpointClasses","length","headerStyle","height","top","headerClassName","closeMenu","setTimeout","handleNoticeClose","document","addEventListener","removeEventListener","handleScroll","noticeElement","querySelector","isNoticeClosedToBeHidden","classList","contains","window","scrollY","scrollpoint","element","getElementById","id","rect","getBoundingClientRect","bottom","throttledHandleScroll","handleResize","innerWidth","body","add","remove","wrappedSearchButton","div","header","role","style","map","theme","key","href","badge","additionalLinkAttrs","button","onClick","aria-expanded","aria-controls","aria-label","name","additionalCSS","size","onKeyDown","e","maxWidth","maxHeight","ref"],"mappings":"AAAA,OAAOA,OACLC,QAAQ,CACRC,SAAS,CACTC,MAAM,CAENC,OAAO,CACPC,WAAW,KACN,OAAQ,AACf,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,AAC1B,QACEC,kBAAkB,CAClBC,oBAAoB,CACpBC,aAAa,KACR,iBAAkB,AACzB,QAASC,WAAW,KAAQ,sBAAuB,AACnD,QAASC,QAAQ,KAAQ,mBAAoB,AAE7C,QAASC,yBAAyB,KAAQ,oBAAqB,CAyI/D,MAAMC,yBAA2B,4CAKjC,MAAMC,sBAAwB,QAE9B,MAAMC,OAAgC,CAAC,CACrCC,SAAS,CACTC,sBAAwB,KAAK,CAC7BC,aAAe,CAAC,CAChBC,SAAS,CACTC,YAAY,CACZC,QAAQ,CACRC,WAAW,CACXC,oBAAoB,CACpBC,qBAAqB,CACrBC,GAAG,CACHC,SAAS,CACTC,YAAY,CACZC,mBAAqB,EAAE,CACvBC,uBAAyB,KAAK,CAC9BC,QAAQ,CACRC,SAAS,CACV,IACC,KAAM,CAACC,SAAUC,YAAY,CAAGlC,SAAS,OACzC,KAAM,CAACmC,UAAWC,aAAa,CAAGpC,SAAS,OAC3C,KAAM,CAACqC,oBAAqBC,uBAAuB,CAAGtC,SACpDkB,uBAEF,MAAMqB,QAAUrC,OAAuB,MACvC,KAAM,CAACsC,mBAAoBC,sBAAsB,CAAGzC,SAClD6B,mBAAmBa,MAAM,CAAG,EAAIb,kBAAkB,CAAC,EAAE,CAACZ,SAAS,CAAG,IAGpE,MAAM0B,YAAc,CAClBC,OAAQlC,cACRmC,IAAKR,oBAAsB,CAAC,EAAElB,aAAa,EAAE,CAAC,CAAG,GACnD,EAEA,MAAM2B,gBAAkBxC,GACtB,gLACAkC,mBACA,CACE,cAAeH,mBACjB,GAGF,MAAMU,UAAY,KAChBX,aAAa,MAEbY,WAAW,KACTd,YAAY,OACZE,aAAa,MACf,EAAG,IACL,EAEA,MAAMa,kBAAoB7C,YAAY,KACpCkC,uBAAuB,MACzB,EAAG,EAAE,EAELrC,UAAU,KACRiD,SAASC,gBAAgB,CAAC,gBAAiBF,mBAC3C,MAAO,IACLC,SAASE,mBAAmB,CAAC,gBAAiBH,kBAClD,EAAG,CAACA,kBAAkB,EAEtBhD,UAAU,KACR,MAAMoD,aAAe,KACnB,MAAMC,cAAgBJ,SAASK,aAAa,CAAC,yBAC7C,MAAMC,yBAA2BF,eAAeG,UAAUC,SACxD,0BAEFpB,uBACEqB,OAAOC,OAAO,EAAI/C,2BAChBK,uBACA,CAACsC,0BAEL,IAAK,MAAMK,eAAehC,mBAAoB,CAC5C,MAAMiC,QAAUZ,SAASa,cAAc,CAACF,YAAYG,EAAE,EACtD,GAAIF,QAAS,CACX,MAAMG,KAAOH,QAAQI,qBAAqB,GAC1C,GAAID,KAAKpB,GAAG,EAAInC,eAAiBuD,KAAKE,MAAM,EAAIzD,cAAe,CAC7D+B,sBAAsBoB,YAAY5C,SAAS,EAC3C,MACF,CACF,CACF,CACF,EAEA,MAAMmD,sBAAwBxD,SAASyC,aAAc,KAErDA,eAEAM,OAAOR,gBAAgB,CAAC,SAAUiB,uBAClC,MAAO,IAAMT,OAAOP,mBAAmB,CAAC,SAAUgB,sBACpD,EAAG,CAACvC,mBAAoBX,sBAAsB,EAE9CjB,UAAU,KACR,MAAMoE,aAAe,KACnB,GAAIV,OAAOW,UAAU,EAAI,KAAM,CAC7BpC,YAAY,MACd,CACF,EACAyB,OAAOR,gBAAgB,CAAC,SAAUkB,cAClC,MAAO,IAAMV,OAAOP,mBAAmB,CAAC,SAAUiB,aACpD,EAAG,EAAE,EAELpE,UAAU,KACR,GAAIgC,SAAU,CACZiB,SAASqB,IAAI,CAACd,SAAS,CAACe,GAAG,CAAC,kBAC9B,KAAO,CACLtB,SAASqB,IAAI,CAACd,SAAS,CAACgB,MAAM,CAAC,kBACjC,CAGA,MAAO,KACLvB,SAASqB,IAAI,CAACd,SAAS,CAACgB,MAAM,CAAC,kBACjC,CACF,EAAG,CAACxC,SAAS,EAGbhC,UAAU,KACR,GAAI8B,UAAYE,SAAU,CACxBc,WACF,CAEF,EAAG,CAAChB,SAAS,EAEb,MAAM2C,oBAAsBvE,QAC1B,IACEkB,aACE,oBAACsD,OAAI1D,UAAU,6DACZI,cAED,KACN,CAACA,aAAa,EAGhB,OACE,wCACE,oBAACuD,UAAOC,KAAK,SAASC,MAAOnC,YAAa1B,UAAW6B,iBACnD,oBAAC6B,OAAI1D,UAAWX,GAAG,2BAA4BW,YAC7C,oBAACS,OAAIT,UAAU,mCACZ,AAAC,CAAC,QAAS,OAAO,CAAa8D,GAAG,CAAC,AAACC,OACnC,oBAACzE,MACC0E,IAAKD,MACLE,KAAM5D,SACN0D,MAAOA,MACPG,MAAOnD,UACPoD,oBAAqB,CACnBnE,UAAWX,GAAG,yCAA0C,CACtD,mBAAoB0E,QAAU,QAC9B,mBAAoBA,QAAU,MAChC,EACF,KAGJ,oBAACL,OAAI1D,UAAWH,0BAA2BY,MAE7C,oBAACiD,OAAI1D,UAAU,+DACZa,yBAA2B,UAAY4C,oBAAsB,KAC9D,oBAACW,UACCpE,UAAU,0DACVqE,QAAS,IAAMpD,YAAY,CAACD,UAC5BsD,gBAAetD,SACfuD,gBAAc,cACdC,aAAW,eAEX,oBAACpF,MACCqF,KACEzD,SACI,0BACA,0BAEN0D,cAAc,0CACdC,KAAK,aAIVxE,UACC,oBAACuD,OACC1D,UAAWX,GACTQ,yBACA,iBACAW,wBAGDL,WAED,KACJ,oBAACT,aACCM,UAAWX,GAAGQ,yBAA0BU,sBACxCD,YAAaA,YACbK,aAAcA,aACdP,aAAcqD,oBACd5C,uBAAwBA,2BAI7BG,SACC,wCACE,oBAAC0C,OACC1D,UAAWX,GACT,0DACA,CACE,2DACE,CAAC6B,UACH,4DACEA,SACJ,GAEFmD,QAASvC,UACT8C,UAAW,AAACC,GAAMA,EAAEb,GAAG,GAAK,UAAYlC,YACxC8B,KAAK,iBAEP,oBAACF,OACCX,GAAG,cACH/C,UAAU,0KACV6D,MAAO,CACLiB,SAAUhF,sBACViF,UAAWxF,mBACTE,cACAD,qBAEJ,EACAwF,IAAK1D,QACLsC,KAAK,cAEJlD,UACD,oBAAChB,aACCY,YAAaA,YACbK,aAAcA,iBAIlB,KAGV,CAEA,gBAAeZ,MAAO"}
+{"version":3,"sources":["../../src/core/Header.tsx"],"sourcesContent":["import React, {\n  useState,\n  useEffect,\n  useRef,\n  ReactNode,\n  useMemo,\n  useCallback,\n} from \"react\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport Logo from \"./Logo\";\nimport {\n  componentMaxHeight,\n  HEADER_BOTTOM_MARGIN,\n  HEADER_HEIGHT,\n} from \"./utils/heights\";\nimport { HeaderLinks } from \"./Header/HeaderLinks\";\nimport { throttle } from \"es-toolkit/compat\";\nimport { Theme } from \"./styles/colors/types\";\nimport { COLLAPSE_TRIGGER_DISTANCE } from \"./Notice/component\";\nimport { useThemedScrollpoints } from \"./hooks/use-themed-scrollpoints\";\nimport { ThemedScrollpoint } from \"./Header/types\";\n\nexport type { ThemedScrollpoint };\n\n/**\n * Represents the state of the user session in the header.\n */\nexport type HeaderSessionState = {\n  /**\n   * Indicates if the user is signed in.\n   */\n  signedIn: boolean;\n\n  /**\n   * Information required to log out the user.\n   */\n  logOut: {\n    /**\n     * Token used for logging out.\n     */\n    token: string;\n\n    /**\n     * URL to log out the user.\n     */\n    href: string;\n  };\n\n  /**\n   * Name of the user's account.\n   */\n  accountName: string;\n};\n\n/**\n * Props for the Header component.\n */\nexport type HeaderProps = {\n  /**\n   * Optional classnames to add to the header\n   */\n  className?: string;\n  /**\n   * Indicates if the notice banner is enabled.\n   */\n  isNoticeBannerEnabled?: boolean;\n  /**\n   * Height of the notice banner in pixels.\n   */\n  noticeHeight?: number;\n  /**\n   * Optional search bar element.\n   */\n  searchBar?: ReactNode;\n\n  /**\n   * Optional search button element.\n   */\n  searchButton?: ReactNode;\n\n  /**\n   * URL for the logo link.\n   */\n  logoHref?: string;\n\n  /**\n   * Array of header links.\n   */\n  headerLinks?: {\n    /**\n     * URL for the link.\n     */\n    href: string;\n\n    /**\n     * Label for the link.\n     */\n    label: string;\n\n    /**\n     * Indicates if the link should open in a new tab.\n     */\n    external?: boolean;\n  }[];\n\n  /**\n   * Optional classname for styling the header links container.\n   */\n  headerLinksClassName?: string;\n\n  /**\n   * Optional classname for styling the header center container.\n   */\n  headerCenterClassName?: string;\n\n  /**\n   * Optional desktop navigation element.\n   */\n  nav?: ReactNode;\n\n  /**\n   * Optional mobile navigation element.\n   */\n  mobileNav?: ReactNode;\n\n  /**\n   * State of the user session.\n   */\n  sessionState?: HeaderSessionState;\n\n  /**\n   * Array of themed scrollpoints. The header will change its appearance based on the scrollpoint in view.\n   */\n  themedScrollpoints?: ThemedScrollpoint[];\n\n  /**\n   * Visibility setting for the search button.\n   * - \"all\": Visible on all devices.\n   * - \"desktop\": Visible only on desktop devices.\n   * - \"mobile\": Visible only on mobile devices.\n   */\n  searchButtonVisibility?: \"all\" | \"desktop\" | \"mobile\";\n\n  /**\n   * Optional location object to detect location changes.\n   */\n  location?: Location;\n\n  /**\n   * Optional badge text to display on the logo.\n   */\n  logoBadge?: string;\n};\n\nconst FLEXIBLE_DESKTOP_CLASSES = \"hidden md:flex flex-1 items-center h-full\";\n\n/**\n * Maximum width before the menu expanded into full width\n */\nconst MAX_MOBILE_MENU_WIDTH = \"560px\";\n\nconst Header: React.FC<HeaderProps> = ({\n  className,\n  isNoticeBannerEnabled = false,\n  noticeHeight = 0,\n  searchBar,\n  searchButton,\n  logoHref,\n  headerLinks,\n  headerLinksClassName,\n  headerCenterClassName,\n  nav,\n  mobileNav,\n  sessionState,\n  themedScrollpoints = [],\n  searchButtonVisibility = \"all\",\n  location,\n  logoBadge,\n}) => {\n  const [showMenu, setShowMenu] = useState(false);\n  const [fadingOut, setFadingOut] = useState(false);\n  const [noticeBannerVisible, setNoticeBannerVisible] = useState(\n    isNoticeBannerEnabled,\n  );\n  const menuRef = useRef<HTMLDivElement>(null);\n  const scrollpointClasses = useThemedScrollpoints(themedScrollpoints);\n\n  const headerStyle = {\n    height: HEADER_HEIGHT,\n    top: noticeBannerVisible ? `${noticeHeight}px` : \"0\",\n  };\n\n  const headerClassName = cn(\n    \"fixed left-0 top-0 w-full z-50 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-all duration-300 ease-in-out px-6 lg:px-16\",\n    scrollpointClasses,\n    {\n      \"md:top-auto\": noticeBannerVisible,\n    },\n  );\n\n  const closeMenu = () => {\n    setFadingOut(true);\n\n    setTimeout(() => {\n      setShowMenu(false);\n      setFadingOut(false);\n    }, 150);\n  };\n\n  const handleNoticeClose = useCallback(() => {\n    setNoticeBannerVisible(false);\n  }, []);\n\n  useEffect(() => {\n    document.addEventListener(\"notice-closed\", handleNoticeClose);\n    return () =>\n      document.removeEventListener(\"notice-closed\", handleNoticeClose);\n  }, [handleNoticeClose]);\n\n  useEffect(() => {\n    if (!isNoticeBannerEnabled) {\n      return;\n    }\n\n    const noticeElement = document.querySelector('[data-id=\"ui-notice\"]');\n\n    if (!noticeElement) {\n      console.warn(\"Header: Notice element not found\");\n      return;\n    }\n\n    let previousVisibility = noticeBannerVisible;\n\n    const handleScroll = () => {\n      const scrollY = window.scrollY;\n      const isNoticeHidden = noticeElement.classList.contains(\n        \"ui-announcement-hidden\",\n      );\n\n      const shouldBeVisible =\n        scrollY <= COLLAPSE_TRIGGER_DISTANCE && !isNoticeHidden;\n\n      if (shouldBeVisible !== previousVisibility) {\n        previousVisibility = shouldBeVisible;\n        setNoticeBannerVisible(shouldBeVisible);\n      }\n    };\n\n    const throttledHandleScroll = throttle(handleScroll, 100);\n\n    handleScroll();\n\n    window.addEventListener(\"scroll\", throttledHandleScroll, { passive: true });\n\n    return () => {\n      window.removeEventListener(\"scroll\", throttledHandleScroll);\n    };\n  }, [isNoticeBannerEnabled, noticeBannerVisible]);\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (window.innerWidth >= 1040) {\n        setShowMenu(false);\n      }\n    };\n    window.addEventListener(\"resize\", handleResize);\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n\n  useEffect(() => {\n    if (showMenu) {\n      document.body.classList.add(\"overflow-hidden\");\n    } else {\n      document.body.classList.remove(\"overflow-hidden\");\n    }\n\n    // Cleanup on unmount\n    return () => {\n      document.body.classList.remove(\"overflow-hidden\");\n    };\n  }, [showMenu]);\n\n  // Close menu when location changes\n  useEffect(() => {\n    if (location && showMenu) {\n      closeMenu();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [location]);\n\n  const wrappedSearchButton = useMemo(\n    () =>\n      searchButton ? (\n        <div className=\"text-neutral-1300 dark:text-neutral-000 flex items-center\">\n          {searchButton}\n        </div>\n      ) : null,\n    [searchButton],\n  );\n\n  return (\n    <>\n      <header role=\"banner\" style={headerStyle} className={headerClassName}>\n        <div className={cn(\"flex items-center h-full\", className)}>\n          <nav className=\"flex flex-1 h-full items-center\">\n            {([\"light\", \"dark\"] as Theme[]).map((theme) => (\n              <Logo\n                key={theme}\n                href={logoHref}\n                theme={theme}\n                badge={logoBadge}\n                additionalLinkAttrs={{\n                  className: cn(\"h-full focus-base rounded mr-4 lg:mr-8\", {\n                    \"flex dark:hidden\": theme === \"light\",\n                    \"hidden dark:flex\": theme === \"dark\",\n                  }),\n                }}\n              />\n            ))}\n            <div className={FLEXIBLE_DESKTOP_CLASSES}>{nav}</div>\n          </nav>\n          <div className=\"flex md:hidden flex-1 items-center justify-end gap-6 h-full\">\n            {searchButtonVisibility !== \"desktop\" ? wrappedSearchButton : null}\n            <button\n              className=\"cursor-pointer focus-base rounded flex items-center p-0\"\n              onClick={() => setShowMenu(!showMenu)}\n              aria-expanded={showMenu}\n              aria-controls=\"mobile-menu\"\n              aria-label=\"Toggle menu\"\n            >\n              <Icon\n                name={\n                  showMenu\n                    ? \"icon-gui-x-mark-outline\"\n                    : \"icon-gui-bars-3-outline\"\n                }\n                additionalCSS=\"text-neutral-1300 dark:text-neutral-000\"\n                size=\"1.5rem\"\n              />\n            </button>\n          </div>\n          {searchBar ? (\n            <div\n              className={cn(\n                FLEXIBLE_DESKTOP_CLASSES,\n                \"justify-center\",\n                headerCenterClassName,\n              )}\n            >\n              {searchBar}\n            </div>\n          ) : null}\n          <HeaderLinks\n            className={cn(FLEXIBLE_DESKTOP_CLASSES, headerLinksClassName)}\n            headerLinks={headerLinks}\n            sessionState={sessionState}\n            searchButton={wrappedSearchButton}\n            searchButtonVisibility={searchButtonVisibility}\n          />\n        </div>\n      </header>\n      {showMenu ? (\n        <>\n          <div\n            className={cn(\n              \"fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300 z-40\",\n              {\n                \"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]\":\n                  !fadingOut,\n                \"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]\":\n                  fadingOut,\n              },\n            )}\n            onClick={closeMenu}\n            onKeyDown={(e) => e.key === \"Escape\" && closeMenu()}\n            role=\"presentation\"\n          />\n          <div\n            id=\"mobile-menu\"\n            className=\"md:hidden fixed flex flex-col top-[4.75rem] overflow-y-hidden mx-3 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-50\"\n            style={{\n              maxWidth: MAX_MOBILE_MENU_WIDTH,\n              maxHeight: componentMaxHeight(\n                HEADER_HEIGHT,\n                HEADER_BOTTOM_MARGIN,\n              ),\n            }}\n            ref={menuRef}\n            role=\"navigation\"\n          >\n            {mobileNav}\n            <HeaderLinks\n              headerLinks={headerLinks}\n              sessionState={sessionState}\n            />\n          </div>\n        </>\n      ) : null}\n    </>\n  );\n};\n\nexport default Header;\n"],"names":["React","useState","useEffect","useRef","useMemo","useCallback","Icon","cn","Logo","componentMaxHeight","HEADER_BOTTOM_MARGIN","HEADER_HEIGHT","HeaderLinks","throttle","COLLAPSE_TRIGGER_DISTANCE","useThemedScrollpoints","FLEXIBLE_DESKTOP_CLASSES","MAX_MOBILE_MENU_WIDTH","Header","className","isNoticeBannerEnabled","noticeHeight","searchBar","searchButton","logoHref","headerLinks","headerLinksClassName","headerCenterClassName","nav","mobileNav","sessionState","themedScrollpoints","searchButtonVisibility","location","logoBadge","showMenu","setShowMenu","fadingOut","setFadingOut","noticeBannerVisible","setNoticeBannerVisible","menuRef","scrollpointClasses","headerStyle","height","top","headerClassName","closeMenu","setTimeout","handleNoticeClose","document","addEventListener","removeEventListener","noticeElement","querySelector","console","warn","previousVisibility","handleScroll","scrollY","window","isNoticeHidden","classList","contains","shouldBeVisible","throttledHandleScroll","passive","handleResize","innerWidth","body","add","remove","wrappedSearchButton","div","header","role","style","map","theme","key","href","badge","additionalLinkAttrs","button","onClick","aria-expanded","aria-controls","aria-label","name","additionalCSS","size","onKeyDown","e","id","maxWidth","maxHeight","ref"],"mappings":"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"}

package/core/hooks/use-content-height.js

@@ -0,0 +1,2 @@
+import{useState,useEffect,useRef}from"react";export function useContentHeight(ref,initialHeight=0){const[contentHeight,setContentHeight]=useState(initialHeight);const observerRef=useRef(null);const rafIdRef=useRef(null);useEffect(()=>{const element=ref.current;if(!element){return}let isMounted=true;observerRef.current=new ResizeObserver(entries=>{if(rafIdRef.current!==null){cancelAnimationFrame(rafIdRef.current)}rafIdRef.current=requestAnimationFrame(()=>{rafIdRef.current=null;if(!isMounted)return;const entry=entries[0];if(entry&&entry.contentRect){const newHeight=Math.round(entry.contentRect.height);setContentHeight(newHeight)}})});observerRef.current.observe(element);return()=>{isMounted=false;if(rafIdRef.current!==null){cancelAnimationFrame(rafIdRef.current);rafIdRef.current=null}observerRef.current?.disconnect();observerRef.current=null}},[ref]);return contentHeight}
+//# sourceMappingURL=use-content-height.js.map

package/core/hooks/use-content-height.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/hooks/use-content-height.ts"],"sourcesContent":["import { useState, useEffect, useRef, RefObject } from \"react\";\n\n/**\n * Custom hook that tracks the content height of an element using ResizeObserver.\n * This eliminates forced reflows by using the browser's native resize observation API\n * instead of synchronous clientHeight/getBoundingClientRect queries.\n *\n * @param ref - React ref to the element to observe\n * @param initialHeight - Initial height value (default: 0)\n * @returns Current content height in pixels\n */\nexport function useContentHeight(\n  ref: RefObject<HTMLElement>,\n  initialHeight = 0,\n): number {\n  const [contentHeight, setContentHeight] = useState<number>(initialHeight);\n  const observerRef = useRef<ResizeObserver | null>(null);\n  const rafIdRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    let isMounted = true;\n\n    observerRef.current = new ResizeObserver((entries) => {\n      // Cancel any pending RAF to avoid stale updates\n      if (rafIdRef.current !== null) {\n        cancelAnimationFrame(rafIdRef.current);\n      }\n\n      rafIdRef.current = requestAnimationFrame(() => {\n        rafIdRef.current = null;\n        // Guard against updates after unmount\n        if (!isMounted) return;\n\n        const entry = entries[0];\n        if (entry && entry.contentRect) {\n          const newHeight = Math.round(entry.contentRect.height);\n          setContentHeight(newHeight);\n        }\n      });\n    });\n\n    observerRef.current.observe(element);\n\n    return () => {\n      isMounted = false;\n      // Cancel pending RAF to prevent setState after unmount\n      if (rafIdRef.current !== null) {\n        cancelAnimationFrame(rafIdRef.current);\n        rafIdRef.current = null;\n      }\n      observerRef.current?.disconnect();\n      observerRef.current = null;\n    };\n  }, [ref]);\n\n  return contentHeight;\n}\n"],"names":["useState","useEffect","useRef","useContentHeight","ref","initialHeight","contentHeight","setContentHeight","observerRef","rafIdRef","element","current","isMounted","ResizeObserver","entries","cancelAnimationFrame","requestAnimationFrame","entry","contentRect","newHeight","Math","round","height","observe","disconnect"],"mappings":"AAAA,OAASA,QAAQ,CAAEC,SAAS,CAAEC,MAAM,KAAmB,OAAQ,AAW/D,QAAO,SAASC,iBACdC,GAA2B,CAC3BC,cAAgB,CAAC,EAEjB,KAAM,CAACC,cAAeC,iBAAiB,CAAGP,SAAiBK,eAC3D,MAAMG,YAAcN,OAA8B,MAClD,MAAMO,SAAWP,OAAsB,MAEvCD,UAAU,KACR,MAAMS,QAAUN,IAAIO,OAAO,CAE3B,GAAI,CAACD,QAAS,CACZ,MACF,CAEA,IAAIE,UAAY,IAEhBJ,CAAAA,YAAYG,OAAO,CAAG,IAAIE,eAAe,AAACC,UAExC,GAAIL,SAASE,OAAO,GAAK,KAAM,CAC7BI,qBAAqBN,SAASE,OAAO,CACvC,CAEAF,SAASE,OAAO,CAAGK,sBAAsB,KACvCP,SAASE,OAAO,CAAG,KAEnB,GAAI,CAACC,UAAW,OAEhB,MAAMK,MAAQH,OAAO,CAAC,EAAE,CACxB,GAAIG,OAASA,MAAMC,WAAW,CAAE,CAC9B,MAAMC,UAAYC,KAAKC,KAAK,CAACJ,MAAMC,WAAW,CAACI,MAAM,EACrDf,iBAAiBY,UACnB,CACF,EACF,GAEAX,YAAYG,OAAO,CAACY,OAAO,CAACb,SAE5B,MAAO,KACLE,UAAY,MAEZ,GAAIH,SAASE,OAAO,GAAK,KAAM,CAC7BI,qBAAqBN,SAASE,OAAO,CACrCF,CAAAA,SAASE,OAAO,CAAG,IACrB,CACAH,YAAYG,OAAO,EAAEa,YACrBhB,CAAAA,YAAYG,OAAO,CAAG,IACxB,CACF,EAAG,CAACP,IAAI,EAER,OAAOE,aACT"}

package/core/hooks/use-themed-scrollpoints.js

@@ -0,0 +1,2 @@
+import{useState,useEffect,useRef}from"react";const HEADER_HEIGHT=64;export function useThemedScrollpoints(scrollpoints){const[activeClassName,setActiveClassName]=useState("");const previousClassNameRef=useRef("");const observerRef=useRef(null);const initialCheckDoneRef=useRef(false);const rafIdRef=useRef(null);const intersectingElementsRef=useRef(new Map);useEffect(()=>{if(scrollpoints.length===0){setActiveClassName("");previousClassNameRef.current="";return}let isMounted=true;const intersectingElements=intersectingElementsRef.current;const updateBestMatch=(useEntryRects=false)=>{let bestMatch=null;for(const[id,entry]of intersectingElements){const scrollpointIndex=scrollpoints.findIndex(sp=>sp.id===id);if(scrollpointIndex===-1)continue;const scrollpoint=scrollpoints[scrollpointIndex];const rect=useEntryRects?entry.boundingClientRect??entry.target.getBoundingClientRect():entry.target.getBoundingClientRect();if(rect.top>HEADER_HEIGHT)continue;const distance=Math.abs(rect.top-HEADER_HEIGHT);if(!bestMatch||distance<bestMatch.distance||distance===bestMatch.distance&&scrollpointIndex<bestMatch.index){bestMatch={scrollpoint,distance,index:scrollpointIndex}}}if(bestMatch&&bestMatch.scrollpoint.className!==previousClassNameRef.current){previousClassNameRef.current=bestMatch.scrollpoint.className;setActiveClassName(bestMatch.scrollpoint.className)}};observerRef.current=new IntersectionObserver(entries=>{for(const entry of entries){const id=entry.target.id;if(entry.isIntersecting){intersectingElements.set(id,entry)}else{intersectingElements.delete(id)}}if(rafIdRef.current!==null){cancelAnimationFrame(rafIdRef.current)}rafIdRef.current=requestAnimationFrame(()=>{rafIdRef.current=null;if(!isMounted)return;updateBestMatch(true)})},{rootMargin:`-${HEADER_HEIGHT}px 0px 0px 0px`,threshold:0});const handleScroll=()=>{if(rafIdRef.current!==null){cancelAnimationFrame(rafIdRef.current)}rafIdRef.current=requestAnimationFrame(()=>{rafIdRef.current=null;if(!isMounted)return;updateBestMatch(false)})};window.addEventListener("scroll",handleScroll,{passive:true});scrollpoints.forEach(({id})=>{const element=document.getElementById(id);if(element){observerRef.current?.observe(element)}else{console.warn(`useThemedScrollpoints: Element with id "${id}" not found in DOM`)}});const timeoutId=setTimeout(()=>{if(initialCheckDoneRef.current){return}initialCheckDoneRef.current=true;for(const scrollpoint of scrollpoints){const element=document.getElementById(scrollpoint.id);if(element){intersectingElements.set(scrollpoint.id,{target:element})}}updateBestMatch(false)},0);return()=>{isMounted=false;clearTimeout(timeoutId);window.removeEventListener("scroll",handleScroll);if(rafIdRef.current!==null){cancelAnimationFrame(rafIdRef.current);rafIdRef.current=null}observerRef.current?.disconnect();observerRef.current=null;initialCheckDoneRef.current=false;intersectingElements.clear()}},[scrollpoints]);return activeClassName}
+//# sourceMappingURL=use-themed-scrollpoints.js.map

package/core/hooks/use-themed-scrollpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/hooks/use-themed-scrollpoints.ts"],"sourcesContent":["import { useState, useEffect, useRef } from \"react\";\nimport { ThemedScrollpoint } from \"../Header/types\";\n\nconst HEADER_HEIGHT = 64;\n\nexport function useThemedScrollpoints(\n  scrollpoints: ThemedScrollpoint[],\n): string {\n  const [activeClassName, setActiveClassName] = useState<string>(\"\");\n\n  const previousClassNameRef = useRef<string>(\"\");\n  const observerRef = useRef<IntersectionObserver | null>(null);\n  const initialCheckDoneRef = useRef<boolean>(false);\n  const rafIdRef = useRef<number | null>(null);\n  const intersectingElementsRef = useRef<\n    Map<string, IntersectionObserverEntry>\n  >(new Map());\n\n  useEffect(() => {\n    if (scrollpoints.length === 0) {\n      // Clear active className when scrollpoints becomes empty\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setActiveClassName(\"\");\n      previousClassNameRef.current = \"\";\n      return;\n    }\n\n    let isMounted = true;\n    const intersectingElements = intersectingElementsRef.current;\n\n    // Function to find and update the best matching scrollpoint\n    const updateBestMatch = (useEntryRects = false) => {\n      // Find the best match from ALL currently intersecting elements\n      // Strategy: Pick the element whose top edge is closest to the header position\n      // Use scrollpoints array order as tiebreaker when distances are equal\n      let bestMatch: {\n        scrollpoint: ThemedScrollpoint;\n        distance: number;\n        index: number;\n      } | null = null;\n\n      for (const [id, entry] of intersectingElements) {\n        const scrollpointIndex = scrollpoints.findIndex((sp) => sp.id === id);\n        if (scrollpointIndex === -1) continue;\n\n        const scrollpoint = scrollpoints[scrollpointIndex];\n\n        // For observer callbacks, use entry.boundingClientRect (for test compatibility)\n        // For scroll handler, get fresh position data\n        const rect = useEntryRects\n          ? (entry.boundingClientRect ?? entry.target.getBoundingClientRect())\n          : entry.target.getBoundingClientRect();\n\n        // Only consider elements at or past the header line\n        // This prevents selecting elements that are marked as \"intersecting\" by rootMargin\n        // but haven't actually reached the header position yet\n        if (rect.top > HEADER_HEIGHT) continue;\n\n        // Calculate distance from element's top edge to header position\n        const distance = Math.abs(rect.top - HEADER_HEIGHT);\n\n        // Pick element with smallest distance; if equal, pick earlier in scrollpoints array\n        if (\n          !bestMatch ||\n          distance < bestMatch.distance ||\n          (distance === bestMatch.distance &&\n            scrollpointIndex < bestMatch.index)\n        ) {\n          bestMatch = { scrollpoint, distance, index: scrollpointIndex };\n        }\n      }\n\n      if (\n        bestMatch &&\n        bestMatch.scrollpoint.className !== previousClassNameRef.current\n      ) {\n        previousClassNameRef.current = bestMatch.scrollpoint.className;\n        setActiveClassName(bestMatch.scrollpoint.className);\n      }\n    };\n\n    observerRef.current = new IntersectionObserver(\n      (entries) => {\n        // Update the map of currently intersecting elements\n        for (const entry of entries) {\n          const id = (entry.target as HTMLElement).id;\n          if (entry.isIntersecting) {\n            intersectingElements.set(id, entry);\n          } else {\n            intersectingElements.delete(id);\n          }\n        }\n\n        // Schedule best match calculation using entry rects\n        if (rafIdRef.current !== null) {\n          cancelAnimationFrame(rafIdRef.current);\n        }\n\n        rafIdRef.current = requestAnimationFrame(() => {\n          rafIdRef.current = null;\n          if (!isMounted) return;\n          updateBestMatch(true); // Use entry.boundingClientRect\n        });\n      },\n      {\n        rootMargin: `-${HEADER_HEIGHT}px 0px 0px 0px`,\n        threshold: 0,\n      },\n    );\n\n    // Lightweight scroll handler to re-evaluate on scroll (gets fresh position data)\n    const handleScroll = () => {\n      if (rafIdRef.current !== null) {\n        cancelAnimationFrame(rafIdRef.current);\n      }\n\n      rafIdRef.current = requestAnimationFrame(() => {\n        rafIdRef.current = null;\n        if (!isMounted) return;\n        updateBestMatch(false); // Get fresh position data\n      });\n    };\n\n    window.addEventListener(\"scroll\", handleScroll, { passive: true });\n\n    scrollpoints.forEach(({ id }) => {\n      const element = document.getElementById(id);\n      if (element) {\n        observerRef.current?.observe(element);\n      } else {\n        console.warn(\n          `useThemedScrollpoints: Element with id \"${id}\" not found in DOM`,\n        );\n      }\n    });\n\n    // Manually check initial intersection state since IntersectionObserver\n    // callbacks only fire on changes, not on initial observation\n    // Use a small timeout to ensure DOM is fully laid out\n    const timeoutId = setTimeout(() => {\n      if (initialCheckDoneRef.current) {\n        return;\n      }\n      initialCheckDoneRef.current = true;\n\n      // Manually populate the intersection map for initial check\n      // (observer callbacks haven't fired yet)\n      for (const scrollpoint of scrollpoints) {\n        const element = document.getElementById(scrollpoint.id);\n        if (element) {\n          // Create a minimal entry with just the target\n          intersectingElements.set(scrollpoint.id, {\n            target: element,\n          } as unknown as IntersectionObserverEntry);\n        }\n      }\n\n      // Run initial best match calculation (gets fresh position data)\n      updateBestMatch(false);\n    }, 0);\n\n    return () => {\n      isMounted = false;\n      clearTimeout(timeoutId);\n      window.removeEventListener(\"scroll\", handleScroll);\n      if (rafIdRef.current !== null) {\n        cancelAnimationFrame(rafIdRef.current);\n        rafIdRef.current = null;\n      }\n      observerRef.current?.disconnect();\n      observerRef.current = null;\n      initialCheckDoneRef.current = false;\n      intersectingElements.clear();\n    };\n  }, [scrollpoints]);\n\n  return activeClassName;\n}\n"],"names":["useState","useEffect","useRef","HEADER_HEIGHT","useThemedScrollpoints","scrollpoints","activeClassName","setActiveClassName","previousClassNameRef","observerRef","initialCheckDoneRef","rafIdRef","intersectingElementsRef","Map","length","current","isMounted","intersectingElements","updateBestMatch","useEntryRects","bestMatch","id","entry","scrollpointIndex","findIndex","sp","scrollpoint","rect","boundingClientRect","target","getBoundingClientRect","top","distance","Math","abs","index","className","IntersectionObserver","entries","isIntersecting","set","delete","cancelAnimationFrame","requestAnimationFrame","rootMargin","threshold","handleScroll","window","addEventListener","passive","forEach","element","document","getElementById","observe","console","warn","timeoutId","setTimeout","clearTimeout","removeEventListener","disconnect","clear"],"mappings":"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"}

package/core/hooks/use-themed-scrollpoints.test.js

@@ -0,0 +1,2 @@
+import{describe,it,expect,beforeEach,afterEach,vi}from"vitest";import{renderHook,act}from"@testing-library/react";import{useThemedScrollpoints}from"./use-themed-scrollpoints";describe("useThemedScrollpoints",()=>{let observerCallback;let mockObserve;let mockUnobserve;let mockDisconnect;let originalIntersectionObserver;let originalRequestAnimationFrame;beforeEach(()=>{vi.useFakeTimers();originalIntersectionObserver=global.IntersectionObserver;originalRequestAnimationFrame=global.requestAnimationFrame;mockObserve=vi.fn();mockUnobserve=vi.fn();mockDisconnect=vi.fn();global.IntersectionObserver=vi.fn(callback=>{observerCallback=callback;return{observe:mockObserve,unobserve:mockUnobserve,disconnect:mockDisconnect}});global.requestAnimationFrame=vi.fn(cb=>{cb(0);return 0})});afterEach(()=>{vi.clearAllMocks();vi.useRealTimers();document.body.innerHTML="";global.IntersectionObserver=originalIntersectionObserver;global.requestAnimationFrame=originalRequestAnimationFrame});it("returns first scrollpoint className on mount",()=>{const elem1=document.createElement("div");elem1.id="zone1";elem1.getBoundingClientRect=vi.fn().mockReturnValue({top:0,bottom:200});const elem2=document.createElement("div");elem2.id="zone2";elem2.getBoundingClientRect=vi.fn().mockReturnValue({top:200,bottom:400});document.body.appendChild(elem1);document.body.appendChild(elem2);const scrollpoints=[{id:"zone1",className:"theme-light"},{id:"zone2",className:"theme-dark"}];const{result}=renderHook(()=>useThemedScrollpoints(scrollpoints));expect(result.current).toBe("");act(()=>{vi.runAllTimers()});expect(result.current).toBe("theme-light")});it("returns empty string when no scrollpoints provided",()=>{const{result}=renderHook(()=>useThemedScrollpoints([]));expect(result.current).toBe("")});it("clears activeClassName when scrollpoints changes from non-empty to empty",()=>{const elem=document.createElement("div");elem.id="zone1";elem.getBoundingClientRect=vi.fn().mockReturnValue({top:0,bottom:200});document.body.appendChild(elem);const{result,rerender}=renderHook(({scrollpoints})=>useThemedScrollpoints(scrollpoints),{initialProps:{scrollpoints:[{id:"zone1",className:"theme-light"}]}});act(()=>{vi.runAllTimers()});expect(result.current).toBe("theme-light");rerender({scrollpoints:[]});expect(result.current).toBe("")});it("does not create IntersectionObserver when no scrollpoints provided",()=>{renderHook(()=>useThemedScrollpoints([]));expect(IntersectionObserver).not.toHaveBeenCalled()});it("creates IntersectionObserver with correct config",()=>{const scrollpoints=[{id:"zone1",className:"theme-light"}];const elem=document.createElement("div");elem.id="zone1";document.body.appendChild(elem);renderHook(()=>useThemedScrollpoints(scrollpoints));expect(IntersectionObserver).toHaveBeenCalledWith(expect.any(Function),expect.objectContaining({rootMargin:"-64px 0px 0px 0px",threshold:0}))});it("observes all scrollpoint elements that exist in DOM",()=>{const elem1=document.createElement("div");elem1.id="zone1";const elem2=document.createElement("div");elem2.id="zone2";document.body.appendChild(elem1);document.body.appendChild(elem2);const scrollpoints=[{id:"zone1",className:"theme-light"},{id:"zone2",className:"theme-dark"}];renderHook(()=>useThemedScrollpoints(scrollpoints));expect(mockObserve).toHaveBeenCalledTimes(2);expect(mockObserve).toHaveBeenCalledWith(elem1);expect(mockObserve).toHaveBeenCalledWith(elem2)});it("logs warning for missing DOM elements",()=>{const consoleWarn=vi.spyOn(console,"warn").mockImplementation(()=>{});const scrollpoints=[{id:"non-existent",className:"theme"}];renderHook(()=>useThemedScrollpoints(scrollpoints));expect(consoleWarn).toHaveBeenCalledWith(expect.stringContaining('Element with id "non-existent" not found'));consoleWarn.mockRestore()});it("observes existing elements and warns about missing ones",()=>{const consoleWarn=vi.spyOn(console,"warn").mockImplementation(()=>{});const elem=document.createElement("div");elem.id="zone1";document.body.appendChild(elem);const scrollpoints=[{id:"zone1",className:"theme-light"},{id:"missing",className:"theme-dark"}];renderHook(()=>useThemedScrollpoints(scrollpoints));expect(mockObserve).toHaveBeenCalledTimes(1);expect(mockObserve).toHaveBeenCalledWith(elem);expect(consoleWarn).toHaveBeenCalledWith(expect.stringContaining('Element with id "missing" not found'));consoleWarn.mockRestore()});it("updates className when intersection occurs",()=>{const elem1=document.createElement("div");elem1.id="zone1";elem1.getBoundingClientRect=vi.fn().mockReturnValue({top:0,bottom:200});const elem2=document.createElement("div");elem2.id="zone2";elem2.getBoundingClientRect=vi.fn().mockReturnValue({top:50,bottom:250});document.body.appendChild(elem1);document.body.appendChild(elem2);const scrollpoints=[{id:"zone1",className:"theme-light"},{id:"zone2",className:"theme-dark"}];const{result}=renderHook(()=>useThemedScrollpoints(scrollpoints));act(()=>{vi.runAllTimers()});expect(result.current).toBe("theme-dark");act(()=>{observerCallback([{target:elem1,isIntersecting:true,boundingClientRect:{top:60,bottom:260,left:0,right:0,x:0,y:60,width:0,height:200}},{target:elem2,isIntersecting:true,boundingClientRect:{top:100,bottom:300,left:0,right:0,x:0,y:100,width:0,height:200}}],{})});expect(result.current).toBe("theme-light")});it("does not update className if same scrollpoint intersects again",()=>{const elem=document.createElement("div");elem.id="zone1";elem.getBoundingClientRect=vi.fn().mockReturnValue({top:0,bottom:200});document.body.appendChild(elem);const scrollpoints=[{id:"zone1",className:"theme-light"}];const{result}=renderHook(()=>useThemedScrollpoints(scrollpoints));act(()=>{vi.runAllTimers()});expect(result.current).toBe("theme-light");const renderCount=result.current;observerCallback([{target:elem,isIntersecting:true,boundingClientRect:{top:0,bottom:200,left:0,right:0,x:0,y:0,width:0,height:200}}],{});expect(result.current).toBe(renderCount)});it("ignores non-intersecting entries",()=>{const elem1=document.createElement("div");elem1.id="zone1";elem1.getBoundingClientRect=vi.fn().mockReturnValue({top:0,bottom:200});const elem2=document.createElement("div");elem2.id="zone2";elem2.getBoundingClientRect=vi.fn().mockReturnValue({top:200,bottom:400});document.body.appendChild(elem1);document.body.appendChild(elem2);const scrollpoints=[{id:"zone1",className:"theme-light"},{id:"zone2",className:"theme-dark"}];const{result}=renderHook(()=>useThemedScrollpoints(scrollpoints));act(()=>{vi.runAllTimers()});expect(result.current).toBe("theme-light");observerCallback([{target:elem2,isIntersecting:false}],{});expect(result.current).toBe("theme-light")});it("uses closest element to header when multiple entries intersect",()=>{const elem1=document.createElement("div");elem1.id="zone1";elem1.getBoundingClientRect=vi.fn().mockReturnValue({top:0,bottom:50});const elem2=document.createElement("div");elem2.id="zone2";elem2.getBoundingClientRect=vi.fn().mockReturnValue({top:60,bottom:200});const elem3=document.createElement("div");elem3.id="zone3";elem3.getBoundingClientRect=vi.fn().mockReturnValue({top:10,bottom:100});document.body.appendChild(elem1);document.body.appendChild(elem2);document.body.appendChild(elem3);const scrollpoints=[{id:"zone1",className:"theme-light"},{id:"zone2",className:"theme-dark"},{id:"zone3",className:"theme-blue"}];const{result}=renderHook(()=>useThemedScrollpoints(scrollpoints));act(()=>{vi.runAllTimers()});expect(result.current).toBe("theme-dark");act(()=>{observerCallback([{target:elem1,isIntersecting:false,boundingClientRect:{top:0,bottom:50,left:0,right:0,x:0,y:0,width:0,height:50}},{target:elem2,isIntersecting:true,boundingClientRect:{top:100,bottom:300,left:0,right:0,x:0,y:100,width:0,height:200}},{target:elem3,isIntersecting:true,boundingClientRect:{top:62,bottom:152,left:0,right:0,x:0,y:62,width:0,height:90}}],{})});expect(result.current).toBe("theme-blue")});it("disconnects observer on unmount",()=>{const elem=document.createElement("div");elem.id="zone1";document.body.appendChild(elem);const scrollpoints=[{id:"zone1",className:"theme-light"}];const{unmount}=renderHook(()=>useThemedScrollpoints(scrollpoints));unmount();expect(mockDisconnect).toHaveBeenCalled()});it("recreates observer when scrollpoints change",()=>{const elem1=document.createElement("div");elem1.id="zone1";const elem2=document.createElement("div");elem2.id="zone2";document.body.appendChild(elem1);document.body.appendChild(elem2);const{rerender}=renderHook(({scrollpoints})=>useThemedScrollpoints(scrollpoints),{initialProps:{scrollpoints:[{id:"zone1",className:"theme-light"}]}});expect(IntersectionObserver).toHaveBeenCalledTimes(1);expect(mockObserve).toHaveBeenCalledTimes(1);rerender({scrollpoints:[{id:"zone1",className:"theme-light"},{id:"zone2",className:"theme-dark"}]});expect(mockDisconnect).toHaveBeenCalledTimes(1);expect(IntersectionObserver).toHaveBeenCalledTimes(2);expect(mockObserve).toHaveBeenCalledTimes(3)});it("uses requestAnimationFrame for state updates",()=>{const elem=document.createElement("div");elem.id="zone1";document.body.appendChild(elem);const scrollpoints=[{id:"zone1",className:"theme-light"},{id:"zone2",className:"theme-dark"}];renderHook(()=>useThemedScrollpoints(scrollpoints));const rafSpy=vi.spyOn(global,"requestAnimationFrame");observerCallback([{target:elem,isIntersecting:true}],{});expect(rafSpy).toHaveBeenCalled();rafSpy.mockRestore()})});
+//# sourceMappingURL=use-themed-scrollpoints.test.js.map

package/core/hooks/use-themed-scrollpoints.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/hooks/use-themed-scrollpoints.test.ts"],"sourcesContent":["/**\n * @vitest-environment jsdom\n */\n\nimport { describe, it, expect, beforeEach, afterEach, vi } from \"vitest\";\nimport { renderHook, act } from \"@testing-library/react\";\nimport { useThemedScrollpoints } from \"./use-themed-scrollpoints\";\n\ndescribe(\"useThemedScrollpoints\", () => {\n  let observerCallback: IntersectionObserverCallback;\n  let mockObserve: ReturnType<typeof vi.fn>;\n  let mockUnobserve: ReturnType<typeof vi.fn>;\n  let mockDisconnect: ReturnType<typeof vi.fn>;\n  let originalIntersectionObserver: typeof IntersectionObserver;\n  let originalRequestAnimationFrame: typeof requestAnimationFrame;\n\n  beforeEach(() => {\n    vi.useFakeTimers();\n\n    // Save originals to prevent test pollution\n    originalIntersectionObserver = global.IntersectionObserver;\n    originalRequestAnimationFrame = global.requestAnimationFrame;\n\n    // Mock IntersectionObserver\n    mockObserve = vi.fn();\n    mockUnobserve = vi.fn();\n    mockDisconnect = vi.fn();\n\n    global.IntersectionObserver = vi.fn((callback) => {\n      observerCallback = callback;\n      return {\n        observe: mockObserve,\n        unobserve: mockUnobserve,\n        disconnect: mockDisconnect,\n      };\n    }) as unknown as typeof IntersectionObserver;\n\n    // Mock requestAnimationFrame\n    global.requestAnimationFrame = vi.fn((cb) => {\n      cb(0);\n      return 0;\n    });\n  });\n\n  afterEach(() => {\n    vi.clearAllMocks();\n    vi.useRealTimers();\n    document.body.innerHTML = \"\";\n    // Restore originals to prevent test pollution\n    global.IntersectionObserver = originalIntersectionObserver;\n    global.requestAnimationFrame = originalRequestAnimationFrame;\n  });\n\n  it(\"returns first scrollpoint className on mount\", () => {\n    // Create DOM elements\n    const elem1 = document.createElement(\"div\");\n    elem1.id = \"zone1\";\n    elem1.getBoundingClientRect = vi\n      .fn()\n      .mockReturnValue({ top: 0, bottom: 200 });\n    const elem2 = document.createElement(\"div\");\n    elem2.id = \"zone2\";\n    elem2.getBoundingClientRect = vi\n      .fn()\n      .mockReturnValue({ top: 200, bottom: 400 });\n    document.body.appendChild(elem1);\n    document.body.appendChild(elem2);\n\n    const scrollpoints = [\n      { id: \"zone1\", className: \"theme-light\" },\n      { id: \"zone2\", className: \"theme-dark\" },\n    ];\n\n    const { result } = renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    // Initial state is empty\n    expect(result.current).toBe(\"\");\n\n    // Advance timer to trigger initial check\n    act(() => {\n      vi.runAllTimers();\n    });\n\n    // Should now have the first scrollpoint's className\n    expect(result.current).toBe(\"theme-light\");\n  });\n\n  it(\"returns empty string when no scrollpoints provided\", () => {\n    const { result } = renderHook(() => useThemedScrollpoints([]));\n    expect(result.current).toBe(\"\");\n  });\n\n  it(\"clears activeClassName when scrollpoints changes from non-empty to empty\", () => {\n    const elem = document.createElement(\"div\");\n    elem.id = \"zone1\";\n    elem.getBoundingClientRect = vi\n      .fn()\n      .mockReturnValue({ top: 0, bottom: 200 });\n    document.body.appendChild(elem);\n\n    const { result, rerender } = renderHook(\n      ({ scrollpoints }) => useThemedScrollpoints(scrollpoints),\n      {\n        initialProps: {\n          scrollpoints: [{ id: \"zone1\", className: \"theme-light\" }],\n        },\n      },\n    );\n\n    // Wait for initial check\n    act(() => {\n      vi.runAllTimers();\n    });\n    expect(result.current).toBe(\"theme-light\");\n\n    // Change to empty scrollpoints\n    rerender({ scrollpoints: [] });\n\n    // Should clear the className\n    expect(result.current).toBe(\"\");\n  });\n\n  it(\"does not create IntersectionObserver when no scrollpoints provided\", () => {\n    renderHook(() => useThemedScrollpoints([]));\n\n    expect(IntersectionObserver).not.toHaveBeenCalled();\n  });\n\n  it(\"creates IntersectionObserver with correct config\", () => {\n    const scrollpoints = [{ id: \"zone1\", className: \"theme-light\" }];\n\n    // Create DOM element\n    const elem = document.createElement(\"div\");\n    elem.id = \"zone1\";\n    document.body.appendChild(elem);\n\n    renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    expect(IntersectionObserver).toHaveBeenCalledWith(\n      expect.any(Function),\n      expect.objectContaining({\n        rootMargin: \"-64px 0px 0px 0px\",\n        threshold: 0,\n      }),\n    );\n  });\n\n  it(\"observes all scrollpoint elements that exist in DOM\", () => {\n    // Create DOM elements\n    const elem1 = document.createElement(\"div\");\n    elem1.id = \"zone1\";\n    const elem2 = document.createElement(\"div\");\n    elem2.id = \"zone2\";\n    document.body.appendChild(elem1);\n    document.body.appendChild(elem2);\n\n    const scrollpoints = [\n      { id: \"zone1\", className: \"theme-light\" },\n      { id: \"zone2\", className: \"theme-dark\" },\n    ];\n\n    renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    expect(mockObserve).toHaveBeenCalledTimes(2);\n    expect(mockObserve).toHaveBeenCalledWith(elem1);\n    expect(mockObserve).toHaveBeenCalledWith(elem2);\n  });\n\n  it(\"logs warning for missing DOM elements\", () => {\n    const consoleWarn = vi.spyOn(console, \"warn\").mockImplementation(() => {});\n\n    const scrollpoints = [{ id: \"non-existent\", className: \"theme\" }];\n\n    renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    expect(consoleWarn).toHaveBeenCalledWith(\n      expect.stringContaining('Element with id \"non-existent\" not found'),\n    );\n\n    consoleWarn.mockRestore();\n  });\n\n  it(\"observes existing elements and warns about missing ones\", () => {\n    const consoleWarn = vi.spyOn(console, \"warn\").mockImplementation(() => {});\n\n    // Create only one element\n    const elem = document.createElement(\"div\");\n    elem.id = \"zone1\";\n    document.body.appendChild(elem);\n\n    const scrollpoints = [\n      { id: \"zone1\", className: \"theme-light\" },\n      { id: \"missing\", className: \"theme-dark\" },\n    ];\n\n    renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    expect(mockObserve).toHaveBeenCalledTimes(1);\n    expect(mockObserve).toHaveBeenCalledWith(elem);\n    expect(consoleWarn).toHaveBeenCalledWith(\n      expect.stringContaining('Element with id \"missing\" not found'),\n    );\n\n    consoleWarn.mockRestore();\n  });\n\n  it(\"updates className when intersection occurs\", () => {\n    // Create DOM elements\n    const elem1 = document.createElement(\"div\");\n    elem1.id = \"zone1\";\n    elem1.getBoundingClientRect = vi\n      .fn()\n      .mockReturnValue({ top: 0, bottom: 200 });\n    const elem2 = document.createElement(\"div\");\n    elem2.id = \"zone2\";\n    elem2.getBoundingClientRect = vi\n      .fn()\n      .mockReturnValue({ top: 50, bottom: 250 });\n    document.body.appendChild(elem1);\n    document.body.appendChild(elem2);\n\n    const scrollpoints = [\n      { id: \"zone1\", className: \"theme-light\" },\n      { id: \"zone2\", className: \"theme-dark\" },\n    ];\n\n    const { result } = renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    // Wait for initial check\n    // elem2 (top=50) is closer to header (64) than elem1 (top=0)\n    // distance for elem1: |0 - 64| = 64\n    // distance for elem2: |50 - 64| = 14\n    act(() => {\n      vi.runAllTimers();\n    });\n    expect(result.current).toBe(\"theme-dark\");\n\n    // Simulate scrolling - elem1 moves closer to header position\n    act(() => {\n      observerCallback(\n        [\n          {\n            target: elem1,\n            isIntersecting: true,\n            boundingClientRect: {\n              top: 60,\n              bottom: 260,\n              left: 0,\n              right: 0,\n              x: 0,\n              y: 60,\n              width: 0,\n              height: 200,\n            },\n          } as unknown as IntersectionObserverEntry,\n          {\n            target: elem2,\n            isIntersecting: true,\n            boundingClientRect: {\n              top: 100,\n              bottom: 300,\n              left: 0,\n              right: 0,\n              x: 0,\n              y: 100,\n              width: 0,\n              height: 200,\n            },\n          } as unknown as IntersectionObserverEntry,\n        ],\n        {} as IntersectionObserver,\n      );\n    });\n\n    // elem1 is now closer to header (distance=4 vs elem2 distance=36)\n    expect(result.current).toBe(\"theme-light\");\n  });\n\n  it(\"does not update className if same scrollpoint intersects again\", () => {\n    const elem = document.createElement(\"div\");\n    elem.id = \"zone1\";\n    elem.getBoundingClientRect = vi\n      .fn()\n      .mockReturnValue({ top: 0, bottom: 200 });\n    document.body.appendChild(elem);\n\n    const scrollpoints = [{ id: \"zone1\", className: \"theme-light\" }];\n\n    const { result } = renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    // Wait for initial check\n    act(() => {\n      vi.runAllTimers();\n    });\n    expect(result.current).toBe(\"theme-light\");\n\n    // Simulate intersection with same element\n    const renderCount = result.current;\n    observerCallback(\n      [\n        {\n          target: elem,\n          isIntersecting: true,\n          boundingClientRect: {\n            top: 0,\n            bottom: 200,\n            left: 0,\n            right: 0,\n            x: 0,\n            y: 0,\n            width: 0,\n            height: 200,\n          },\n        } as unknown as IntersectionObserverEntry,\n      ],\n      {} as IntersectionObserver,\n    );\n\n    // Should not trigger re-render (className unchanged)\n    expect(result.current).toBe(renderCount);\n  });\n\n  it(\"ignores non-intersecting entries\", () => {\n    const elem1 = document.createElement(\"div\");\n    elem1.id = \"zone1\";\n    elem1.getBoundingClientRect = vi\n      .fn()\n      .mockReturnValue({ top: 0, bottom: 200 });\n    const elem2 = document.createElement(\"div\");\n    elem2.id = \"zone2\";\n    elem2.getBoundingClientRect = vi\n      .fn()\n      .mockReturnValue({ top: 200, bottom: 400 });\n    document.body.appendChild(elem1);\n    document.body.appendChild(elem2);\n\n    const scrollpoints = [\n      { id: \"zone1\", className: \"theme-light\" },\n      { id: \"zone2\", className: \"theme-dark\" },\n    ];\n\n    const { result } = renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    // Wait for initial check\n    act(() => {\n      vi.runAllTimers();\n    });\n    expect(result.current).toBe(\"theme-light\");\n\n    // Simulate non-intersecting entry\n    observerCallback(\n      [\n        {\n          target: elem2,\n          isIntersecting: false,\n        } as unknown as IntersectionObserverEntry,\n      ],\n      {} as IntersectionObserver,\n    );\n\n    // Should remain unchanged\n    expect(result.current).toBe(\"theme-light\");\n  });\n\n  it(\"uses closest element to header when multiple entries intersect\", () => {\n    const elem1 = document.createElement(\"div\");\n    elem1.id = \"zone1\";\n    elem1.getBoundingClientRect = vi\n      .fn()\n      .mockReturnValue({ top: 0, bottom: 50 });\n    const elem2 = document.createElement(\"div\");\n    elem2.id = \"zone2\";\n    // zone2 top is at 60, which is closer to HEADER_HEIGHT (64) than zone3\n    elem2.getBoundingClientRect = vi\n      .fn()\n      .mockReturnValue({ top: 60, bottom: 200 });\n    const elem3 = document.createElement(\"div\");\n    elem3.id = \"zone3\";\n    elem3.getBoundingClientRect = vi\n      .fn()\n      .mockReturnValue({ top: 10, bottom: 100 });\n    document.body.appendChild(elem1);\n    document.body.appendChild(elem2);\n    document.body.appendChild(elem3);\n\n    const scrollpoints = [\n      { id: \"zone1\", className: \"theme-light\" },\n      { id: \"zone2\", className: \"theme-dark\" },\n      { id: \"zone3\", className: \"theme-blue\" },\n    ];\n\n    const { result } = renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    // Wait for initial check\n    // elem2 (top=60) is closest to header (64) with distance=4\n    // elem3 (top=10) has distance=54\n    // elem1 (top=0) doesn't contain header (bottom=50 < 64)\n    act(() => {\n      vi.runAllTimers();\n    });\n    expect(result.current).toBe(\"theme-dark\");\n\n    // Simulate scrolling where elem3 becomes closest to header\n    act(() => {\n      observerCallback(\n        [\n          {\n            target: elem1,\n            isIntersecting: false,\n            boundingClientRect: {\n              top: 0,\n              bottom: 50,\n              left: 0,\n              right: 0,\n              x: 0,\n              y: 0,\n              width: 0,\n              height: 50,\n            },\n          } as unknown as IntersectionObserverEntry,\n          {\n            target: elem2,\n            isIntersecting: true,\n            boundingClientRect: {\n              top: 100,\n              bottom: 300,\n              left: 0,\n              right: 0,\n              x: 0,\n              y: 100,\n              width: 0,\n              height: 200,\n            },\n          } as unknown as IntersectionObserverEntry,\n          {\n            target: elem3,\n            isIntersecting: true,\n            boundingClientRect: {\n              top: 62,\n              bottom: 152,\n              left: 0,\n              right: 0,\n              x: 0,\n              y: 62,\n              width: 0,\n              height: 90,\n            },\n          } as unknown as IntersectionObserverEntry,\n        ],\n        {} as IntersectionObserver,\n      );\n    });\n\n    // elem3 is now closest to HEADER_HEIGHT (64)\n    // distance for elem2: |100 - 64| = 36\n    // distance for elem3: |62 - 64| = 2\n    expect(result.current).toBe(\"theme-blue\");\n  });\n\n  it(\"disconnects observer on unmount\", () => {\n    const elem = document.createElement(\"div\");\n    elem.id = \"zone1\";\n    document.body.appendChild(elem);\n\n    const scrollpoints = [{ id: \"zone1\", className: \"theme-light\" }];\n\n    const { unmount } = renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    unmount();\n\n    expect(mockDisconnect).toHaveBeenCalled();\n  });\n\n  it(\"recreates observer when scrollpoints change\", () => {\n    const elem1 = document.createElement(\"div\");\n    elem1.id = \"zone1\";\n    const elem2 = document.createElement(\"div\");\n    elem2.id = \"zone2\";\n    document.body.appendChild(elem1);\n    document.body.appendChild(elem2);\n\n    const { rerender } = renderHook(\n      ({ scrollpoints }) => useThemedScrollpoints(scrollpoints),\n      {\n        initialProps: {\n          scrollpoints: [{ id: \"zone1\", className: \"theme-light\" }],\n        },\n      },\n    );\n\n    expect(IntersectionObserver).toHaveBeenCalledTimes(1);\n    expect(mockObserve).toHaveBeenCalledTimes(1);\n\n    // Change scrollpoints\n    rerender({\n      scrollpoints: [\n        { id: \"zone1\", className: \"theme-light\" },\n        { id: \"zone2\", className: \"theme-dark\" },\n      ],\n    });\n\n    // Should disconnect old observer and create new one\n    expect(mockDisconnect).toHaveBeenCalledTimes(1);\n    expect(IntersectionObserver).toHaveBeenCalledTimes(2);\n    expect(mockObserve).toHaveBeenCalledTimes(3); // 1 from first render + 2 from second\n  });\n\n  it(\"uses requestAnimationFrame for state updates\", () => {\n    const elem = document.createElement(\"div\");\n    elem.id = \"zone1\";\n    document.body.appendChild(elem);\n\n    const scrollpoints = [\n      { id: \"zone1\", className: \"theme-light\" },\n      { id: \"zone2\", className: \"theme-dark\" },\n    ];\n\n    renderHook(() => useThemedScrollpoints(scrollpoints));\n\n    const rafSpy = vi.spyOn(global, \"requestAnimationFrame\");\n\n    // Simulate intersection\n    observerCallback(\n      [\n        {\n          target: elem,\n          isIntersecting: true,\n        } as unknown as IntersectionObserverEntry,\n      ],\n      {} as IntersectionObserver,\n    );\n\n    expect(rafSpy).toHaveBeenCalled();\n\n    rafSpy.mockRestore();\n  });\n});\n"],"names":["describe","it","expect","beforeEach","afterEach","vi","renderHook","act","useThemedScrollpoints","observerCallback","mockObserve","mockUnobserve","mockDisconnect","originalIntersectionObserver","originalRequestAnimationFrame","useFakeTimers","global","IntersectionObserver","requestAnimationFrame","fn","callback","observe","unobserve","disconnect","cb","clearAllMocks","useRealTimers","document","body","innerHTML","elem1","createElement","id","getBoundingClientRect","mockReturnValue","top","bottom","elem2","appendChild","scrollpoints","className","result","current","toBe","runAllTimers","elem","rerender","initialProps","not","toHaveBeenCalled","toHaveBeenCalledWith","any","Function","objectContaining","rootMargin","threshold","toHaveBeenCalledTimes","consoleWarn","spyOn","console","mockImplementation","stringContaining","mockRestore","target","isIntersecting","boundingClientRect","left","right","x","y","width","height","renderCount","elem3","unmount","rafSpy"],"mappings":"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"}

package/index.d.ts

@@ -784,12 +784,18 @@ export const HeaderLinks: React.FC<Pick<HeaderProps, "sessionState" | "headerLin
 //# sourceMappingURL=HeaderLinks.d.ts.map
 }
 
-declare module '@ably/ui/core/Header' {
-import React, { ReactNode } from "react";
+declare module '@ably/ui/core/Header/types' {
 export type ThemedScrollpoint = {
     id: string;
     className: string;
 };
+//# sourceMappingURL=types.d.ts.map
+}
+
+declare module '@ably/ui/core/Header' {
+import React, { ReactNode } from "react";
+import { ThemedScrollpoint } from "@ably/ui/core/Header/types";
+export type { ThemedScrollpoint };
 /**
  * Represents the state of the user session in the header.
  */
@@ -6255,6 +6261,21 @@ export const queryIdAll: (val: string, root?: ParentNode) => NodeListOf<Element>
 //# sourceMappingURL=dom-query.d.ts.map
 }
 
+declare module '@ably/ui/core/hooks/use-content-height' {
+import { RefObject } from "react";
+/**
+ * Custom hook that tracks the content height of an element using ResizeObserver.
+ * This eliminates forced reflows by using the browser's native resize observation API
+ * instead of synchronous clientHeight/getBoundingClientRect queries.
+ *
+ * @param ref - React ref to the element to observe
+ * @param initialHeight - Initial height value (default: 0)
+ * @returns Current content height in pixels
+ */
+export function useContentHeight(ref: RefObject<HTMLElement>, initialHeight?: number): number;
+//# sourceMappingURL=use-content-height.d.ts.map
+}
+
 declare module '@ably/ui/core/hooks/use-rails-ujs-hooks' {
 import { RefObject } from "react";
 const useRailsUjsLinks: (containerRef: RefObject<HTMLElement>) => void;
@@ -6262,6 +6283,20 @@ export default useRailsUjsLinks;
 //# sourceMappingURL=use-rails-ujs-hooks.d.ts.map
 }
 
+declare module '@ably/ui/core/hooks/use-themed-scrollpoints' {
+import { ThemedScrollpoint } from ".@ably/ui/core/Header/types";
+export function useThemedScrollpoints(scrollpoints: ThemedScrollpoint[]): string;
+//# sourceMappingURL=use-themed-scrollpoints.d.ts.map
+}
+
+declare module '@ably/ui/core/hooks/use-themed-scrollpoints.test' {
+/**
+ * @vitest-environment jsdom
+ */
+export {};
+//# sourceMappingURL=use-themed-scrollpoints.test.d.ts.map
+}
+
 declare module '@ably/ui/core/insights/command-queue' {
 import { AnalyticsService, InsightsConfig, InsightsIdentity, TrackPageViewOptions } from "@ably/ui/core/types";
 export class InsightsCommandQueue implements AnalyticsService {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "17.12.1",
+  "version": "17.13.0-dev.06163b64",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -31,6 +31,7 @@
     "@swc/cli": "^0.7.8",
     "@swc/core": "^1.13.5",
     "@tailwindcss/container-queries": "^0.1.1",
+    "@testing-library/react": "^16.3.0",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",
     "@types/react": "^18.3.1",