@astryxdesign/core 0.1.0-canary.cfbdec3 → 0.1.0-canary.d1e1201

package/dist/Outline/Outline.d.ts

@@ -29,8 +29,9 @@ export interface OutlineProps extends BaseProps<HTMLElement> {
  * indentation based on each heading level. Features a sliding indicator
  * track that animates to the active item.
  *
- * When `activeId` is omitted, it observes heading elements by id and marks
- * the topmost visible heading active.
+ * When `activeId` is omitted, it tracks scroll position and marks the last
+ * heading whose top has passed its activation line (its scroll-margin-top)
+ * active — defaulting to the first item at the top and the last at the bottom.
  *
  * @example
  * ```

package/dist/Outline/Outline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Outline.d.ts","sourceRoot":"","sources":["../../src/Outline/Outline.tsx"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAGzC,YAAY,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAEzC,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC1D,6CAA6C;IAC7C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B,+CAA+C;IAC/C,KAAK,EAAE,WAAW,EAAE,CAAC;IAErB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAEhC,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAgJD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,KAA2B,EAC3B,OAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,YAAY,+BAuFd;yBAnGe,OAAO"}
+{"version":3,"file":"Outline.d.ts","sourceRoot":"","sources":["../../src/Outline/Outline.tsx"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAGzC,YAAY,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAEzC,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC1D,6CAA6C;IAC7C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B,+CAA+C;IAC/C,KAAK,EAAE,WAAW,EAAE,CAAC;IAErB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAEhC,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAgJD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,KAA2B,EAC3B,OAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,YAAY,+BAyGd;yBArHe,OAAO"}

package/dist/Outline/Outline.js

@@ -133,8 +133,9 @@ function getIndentStyle(level) {
  * indentation based on each heading level. Features a sliding indicator
  * track that animates to the active item.
  *
- * When `activeId` is omitted, it observes heading elements by id and marks
- * the topmost visible heading active.
+ * When `activeId` is omitted, it tracks scroll position and marks the last
+ * heading whose top has passed its activation line (its scroll-margin-top)
+ * active — defaulting to the first item at the top and the last at the bottom.
  *
  * @example
  * ```
@@ -162,7 +163,12 @@ export function Outline({
 }) {
   const rootRef = useRef(null);
   const LinkComponent = useLinkComponent();
-  const [resolvedActiveId, setActiveId] = useScrollSpy({
+  const isControlled = activeId !== undefined;
+  const {
+    activeId: resolvedActiveId,
+    setActiveId,
+    lockActiveId
+  } = useScrollSpy({
     activeId,
     items,
     onActiveIdChange,
@@ -170,12 +176,25 @@ export function Outline({
   });
   const handleClick = id => event => {
     const target = document.getElementById(id);
-    setActiveId(id);
+
+    // Let the browser handle modified clicks (open in new tab, etc.) and
+    // missing targets without touching the active state.
     if (target == null || event.defaultPrevented || event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {
       return;
     }
     event.preventDefault();
     window.history.pushState(null, '', `#${id}`);
+
+    // Move the indicator to the clicked item in a single step. Controlled
+    // consumers own the active state (notify only); uncontrolled mode pins
+    // the active id and suppresses scroll-spy until the next manual scroll,
+    // so the click is honored — even for short/last sections — and the
+    // indicator doesn't chase the smooth scroll through other sections.
+    if (isControlled) {
+      setActiveId(id);
+    } else {
+      lockActiveId(id);
+    }
     target.scrollIntoView({
       behavior: 'smooth',
       block: 'start'

package/dist/Outline/useScrollSpy.d.ts

@@ -5,6 +5,19 @@ interface UseScrollSpyOptions {
     onActiveIdChange?: (id: string) => void;
     rootRef: React.RefObject<HTMLElement | null>;
 }
-export declare function useScrollSpy({ activeId, items, onActiveIdChange, rootRef, }: UseScrollSpyOptions): [string | undefined, (id: string) => void];
+interface UseScrollSpyResult {
+    activeId: string | undefined;
+    /** Set the active id (notifies onActiveIdChange). For controlled consumers. */
+    setActiveId: (id: string) => void;
+    /**
+     * Handle a click on the outline item with id `id`. Delays moving the
+     * indicator: scroll-spy is suppressed during the programmatic smooth scroll
+     * so the indicator doesn't chase it, then the indicator moves once to the
+     * clicked item when the scroll settles. If the user scrolls manually mid-way,
+     * scroll-position tracking resumes immediately instead.
+     */
+    lockActiveId: (id: string) => void;
+}
+export declare function useScrollSpy({ activeId, items, onActiveIdChange, rootRef, }: UseScrollSpyOptions): UseScrollSpyResult;
 export {};
 //# sourceMappingURL=useScrollSpy.d.ts.map

package/dist/Outline/useScrollSpy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollSpy.d.ts","sourceRoot":"","sources":["../../src/Outline/useScrollSpy.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAwBzC,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC9C;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,OAAO,GACR,EAAE,mBAAmB,GAAG,CAAC,MAAM,GAAG,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC,CA2FlE"}
+{"version":3,"file":"useScrollSpy.d.ts","sourceRoot":"","sources":["../../src/Outline/useScrollSpy.ts"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAuFzC,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC9C;AAED,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,+EAA+E;IAC/E,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;;;OAMG;IACH,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,OAAO,GACR,EAAE,mBAAmB,GAAG,kBAAkB,CA2I1C"}

package/dist/Outline/useScrollSpy.js

@@ -4,13 +4,23 @@
 
 /**
  * @file useScrollSpy.ts
- * @input Uses React, IntersectionObserver, OutlineItem type
+ * @input Uses React, scroll position of heading elements, OutlineItem type
  * @output Exports internal useScrollSpy hook
  * @position Internal behavior hook; consumed by Outline.tsx
  *
+ * Drives the active outline item from scroll position. On each scroll
+ * (rAF-throttled) it reads live heading positions and marks the last heading
+ * whose top has passed its activation line (its own scroll-margin-top, i.e.
+ * where it lands when navigated to). This is stable — it never compares stale
+ * cached positions — so the indicator moves monotonically instead of jumping.
+ * Defaults to the first item at the top and the last item at the bottom so
+ * short final sections still activate.
+ *
  * SYNC: When modified, update /packages/core/src/Outline/Outline.tsx
  */
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+/** Keys that scroll the viewport — used to detect a manual scroll intent. */
+const SCROLL_KEYS = new Set(['ArrowUp', 'ArrowDown', 'PageUp', 'PageDown', 'Home', 'End', ' ', 'Spacebar']);
 function getScrollableAncestor(element) {
   let current = element?.parentElement ?? null;
   while (current != null) {
@@ -24,6 +34,41 @@ function getScrollableAncestor(element) {
   }
   return null;
 }
+
+/**
+ * Resolve the active heading id from current scroll position.
+ *
+ * A heading is "passed" once its top reaches its activation line — the scroll
+ * root's top plus the heading's own scroll-margin-top. The active heading is
+ * the last passed one (headings are in document order). When none have passed
+ * (scrolled above the first), the first item is active; at the bottom, the
+ * last item is active.
+ */
+function resolveActiveId(items, scrollRoot) {
+  if (items.length === 0) {
+    return undefined;
+  }
+  const rootTop = scrollRoot != null ? scrollRoot.getBoundingClientRect().top : 0;
+  const atBottom = scrollRoot != null ? scrollRoot.scrollTop + scrollRoot.clientHeight >= scrollRoot.scrollHeight - 2 : window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 2;
+  if (atBottom) {
+    return items[items.length - 1].id;
+  }
+  let activeId = items[0].id;
+  for (const item of items) {
+    const element = document.getElementById(item.id);
+    if (element == null) {
+      continue;
+    }
+    const top = element.getBoundingClientRect().top;
+    const marginTop = Number.parseFloat(window.getComputedStyle(element).scrollMarginTop) || 0;
+    if (top <= rootTop + marginTop + 1) {
+      activeId = item.id;
+    } else {
+      break;
+    }
+  }
+  return activeId;
+}
 export function useScrollSpy({
   activeId,
   items,
@@ -32,72 +77,138 @@ export function useScrollSpy({
 }) {
   const isControlled = activeId !== undefined;
   const [uncontrolledActiveId, setUncontrolledActiveId] = useState(items[0]?.id);
-  const visibleHeadingIdsRef = useRef(new Set());
-  const headingTopRef = useRef(new Map());
   const activeIdRef = useRef(activeId);
+  // While true, scroll-spy ignores scroll updates because a click is driving a
+  // programmatic scroll. Released when that scroll settles or the user scrolls.
+  const suppressRef = useRef(false);
+  const releaseSuppressionRef = useRef(null);
+  // Latest scroll-position resolver, so the click handler can resume tracking
+  // when the user scrolls during a programmatic scroll.
+  const syncRef = useRef(null);
+  // Keep latest items/callback in refs so the scroll listener effect doesn't
+  // re-subscribe on every render (items is a fresh array each render).
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
+  const onActiveIdChangeRef = useRef(onActiveIdChange);
+  onActiveIdChangeRef.current = onActiveIdChange;
   const itemIds = items.map(item => item.id).join('\n');
   activeIdRef.current = isControlled ? activeId : uncontrolledActiveId;
   useEffect(() => {
-    if (isControlled || typeof IntersectionObserver === 'undefined') {
-      return;
-    }
-    const headingElements = items.map(item => document.getElementById(item.id)).filter(element => element != null);
-    if (headingElements.length === 0) {
+    if (isControlled || typeof window === 'undefined') {
       return;
     }
-    const visibleHeadingIds = visibleHeadingIdsRef.current;
-    const headingTop = headingTopRef.current;
-    const setNextActiveId = nextActiveId => {
-      if (activeIdRef.current === nextActiveId) {
+    const scrollRoot = getScrollableAncestor(rootRef.current);
+    const scrollTarget = scrollRoot ?? window;
+    let frame = 0;
+    const update = () => {
+      frame = 0;
+      if (suppressRef.current) {
         return;
       }
-      activeIdRef.current = nextActiveId;
-      setUncontrolledActiveId(nextActiveId);
-      onActiveIdChange?.(nextActiveId);
-    };
-    const chooseActiveHeading = () => {
-      let nextActiveId;
-      let nextTop = Number.POSITIVE_INFINITY;
-      for (const id of visibleHeadingIds) {
-        const top = headingTop.get(id) ?? Number.POSITIVE_INFINITY;
-        if (top < nextTop) {
-          nextTop = top;
-          nextActiveId = id;
-        }
-      }
-      if (nextActiveId != null) {
-        setNextActiveId(nextActiveId);
+      const nextActiveId = resolveActiveId(itemsRef.current, scrollRoot);
+      if (nextActiveId != null && nextActiveId !== activeIdRef.current) {
+        activeIdRef.current = nextActiveId;
+        setUncontrolledActiveId(nextActiveId);
+        onActiveIdChangeRef.current?.(nextActiveId);
       }
     };
-    const observer = new IntersectionObserver(entries => {
-      for (const entry of entries) {
-        const id = entry.target.id;
-        headingTop.set(id, entry.boundingClientRect.top);
-        if (entry.isIntersecting) {
-          visibleHeadingIds.add(id);
-        } else {
-          visibleHeadingIds.delete(id);
-        }
+    const onScroll = () => {
+      if (frame === 0) {
+        frame = requestAnimationFrame(update);
       }
-      chooseActiveHeading();
-    }, {
-      root: getScrollableAncestor(rootRef.current),
-      threshold: 0
+    };
+    syncRef.current = update;
+    update();
+    scrollTarget.addEventListener('scroll', onScroll, {
+      passive: true
+    });
+    window.addEventListener('resize', onScroll, {
+      passive: true
     });
-    for (const headingElement of headingElements) {
-      observer.observe(headingElement);
-    }
     return () => {
-      observer.disconnect();
-      visibleHeadingIds.clear();
-      headingTop.clear();
+      syncRef.current = null;
+      scrollTarget.removeEventListener('scroll', onScroll);
+      window.removeEventListener('resize', onScroll);
+      if (frame !== 0) {
+        cancelAnimationFrame(frame);
+      }
+    };
+  }, [isControlled, itemIds, rootRef]);
+
+  // Tear down any pending suppression listeners when the Outline unmounts.
+  useEffect(() => {
+    return () => {
+      releaseSuppressionRef.current?.();
     };
-  }, [isControlled, itemIds, items, onActiveIdChange, rootRef]);
+  }, []);
   const setActiveId = nextActiveId => {
     if (!isControlled) {
       setUncontrolledActiveId(nextActiveId);
     }
     onActiveIdChange?.(nextActiveId);
   };
-  return [isControlled ? activeId : uncontrolledActiveId, setActiveId];
+  const lockActiveId = useCallback(clickedId => {
+    if (typeof window === 'undefined') {
+      setUncontrolledActiveId(clickedId);
+      activeIdRef.current = clickedId;
+      onActiveIdChangeRef.current?.(clickedId);
+      return;
+    }
+
+    // Freeze the indicator during the programmatic smooth scroll instead of
+    // moving it immediately — it lands on the clicked item once the scroll
+    // settles, so it doesn't chase the scroll through intervening sections.
+    suppressRef.current = true;
+    // Replace any in-flight handlers from a previous click.
+    releaseSuppressionRef.current?.();
+    let settleTimer = 0;
+    const cleanup = () => {
+      window.removeEventListener('scrollend', onSettle);
+      window.removeEventListener('wheel', onManual);
+      window.removeEventListener('touchmove', onManual);
+      window.removeEventListener('keydown', onKeyDown);
+      if (settleTimer !== 0) {
+        clearTimeout(settleTimer);
+        settleTimer = 0;
+      }
+      releaseSuppressionRef.current = null;
+    };
+    // Programmatic scroll finished: move the indicator to the clicked item.
+    const onSettle = () => {
+      cleanup();
+      suppressRef.current = false;
+      setUncontrolledActiveId(clickedId);
+      activeIdRef.current = clickedId;
+      onActiveIdChangeRef.current?.(clickedId);
+    };
+    // User scrolled mid-flight: hand control back to scroll-position tracking.
+    const onManual = () => {
+      cleanup();
+      suppressRef.current = false;
+      syncRef.current?.();
+    };
+    const onKeyDown = event => {
+      if (SCROLL_KEYS.has(event.key)) {
+        onManual();
+      }
+    };
+    window.addEventListener('scrollend', onSettle, {
+      once: true
+    });
+    window.addEventListener('wheel', onManual, {
+      passive: true
+    });
+    window.addEventListener('touchmove', onManual, {
+      passive: true
+    });
+    window.addEventListener('keydown', onKeyDown);
+    // Fallback when scrollend is unsupported or no scroll is needed.
+    settleTimer = window.setTimeout(onSettle, 1200);
+    releaseSuppressionRef.current = cleanup;
+  }, []);
+  return {
+    activeId: isControlled ? activeId : uncontrolledActiveId,
+    setActiveId,
+    lockActiveId
+  };
 }

package/dist/Resizable/useResizable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useResizable.d.ts","sourceRoot":"","sources":["../../src/Resizable/useResizable.ts"],"names":[],"mappings":"AAiBA,MAAM,WAAW,qBAAqB;IACpC,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,MAAM,WAAW,wBAAyB,SAAQ,qBAAqB;IACrE,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,qEAAqE;IACrE,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;CACnD;AAED,MAAM,WAAW,uBAAuB;IACtC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,mCAAmC;IACnC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAC/C,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,iDAAiD;IACjD,WAAW,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,mCAAmC;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,wCAAwC;IACxC,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,uEAAuE;IACvE,KAAK,EAAE,cAAc,CAAC;CACvB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IAEd,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,8CAA8C;IAE9C,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,EAAE,IAAI,CAAC;CACzB;AA+QD,wBAAgB,YAAY,CAAC,MAAM,EAAE,wBAAwB,GAAG,eAAe,CAAC;AAChF,wBAAgB,YAAY,CAC1B,MAAM,EAAE,uBAAuB,GAC9B,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC"}
+{"version":3,"file":"useResizable.d.ts","sourceRoot":"","sources":["../../src/Resizable/useResizable.ts"],"names":[],"mappings":"AAiBA,MAAM,WAAW,qBAAqB;IACpC,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,MAAM,WAAW,wBAAyB,SAAQ,qBAAqB;IACrE,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,qEAAqE;IACrE,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;CACnD;AAED,MAAM,WAAW,uBAAuB;IACtC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,mCAAmC;IACnC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAC/C,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,iDAAiD;IACjD,WAAW,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,mCAAmC;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,wCAAwC;IACxC,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,uEAAuE;IACvE,KAAK,EAAE,cAAc,CAAC;CACvB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IAEd,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,8CAA8C;IAE9C,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,EAAE,IAAI,CAAC;CACzB;AAyQD,wBAAgB,YAAY,CAAC,MAAM,EAAE,wBAAwB,GAAG,eAAe,CAAC;AAChF,wBAAgB,YAAY,CAC1B,MAAM,EAAE,uBAAuB,GAC9B,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC"}

package/dist/Resizable/useResizable.js

@@ -27,10 +27,6 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 const DEFAULT_MIN = 50;
 const DEFAULT_COLLAPSED_SIZE = 40;
 const STORAGE_PREFIX = 'astryx-resizable:';
-// Legacy key prefix read during the compat window so persisted panel sizes
-// survive the xds -> astryx rename. Read-only fallback; we always write the
-// new prefix. Removed at final cutover.
-const LEGACY_STORAGE_PREFIX = 'xds-resizable:';
 
 // =============================================================================
 // Helpers
@@ -60,7 +56,7 @@ function loadPersistedSize(key) {
     return null;
   }
   try {
-    const raw = localStorage.getItem(STORAGE_PREFIX + key) ?? localStorage.getItem(LEGACY_STORAGE_PREFIX + key);
+    const raw = localStorage.getItem(STORAGE_PREFIX + key);
     if (raw != null) {
       const parsed = JSON.parse(raw);
       if (typeof parsed === 'number') {

package/dist/ToggleButton/ToggleButton.d.ts

@@ -38,8 +38,15 @@ export interface ToggleButtonProps extends BaseProps<HTMLButtonElement> {
      */
     onPressedChange?: (isPressed: boolean) => void;
     /**
-     * Async action handler for API-backed toggles.
-     * The button shows a loading spinner while the promise is pending.
+     * Action handler for API- or navigation-backed toggles, run inside a
+     * transition. The button shows a loading spinner while the action is
+     * pending — whether it returns a promise or synchronously triggers a
+     * suspending update (e.g. a router navigation that suspends on data).
+     *
+     * Because it runs in a transition, the toggle is *interruptible*: clicking
+     * again while an action is pending starts a new transition with the next
+     * optimistic state, so the action reflects the latest intent rather than
+     * being dropped.
      *
      * @example
      * ```
@@ -53,7 +60,7 @@ export interface ToggleButtonProps extends BaseProps<HTMLButtonElement> {
      * />
      * ```
      */
-    pressedChangeAction?: (isPressed: boolean) => Promise<void>;
+    pressedChangeAction?: (isPressed: boolean) => void | Promise<void>;
     /**
      * The size of the toggle button.
      * When used inside ToggleButtonGroup, defaults to the group's size.

package/dist/ToggleButton/ToggleButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../src/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIzD,OAAO,EAAS,KAAK,UAAU,EAAC,MAAM,WAAW,CAAC;AAElD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0C5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C;;;;;;;;;;;;;;;OAeG;IACH,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAE5D;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,GAAG,EACH,KAAK,EACL,SAAS,EAAE,aAAa,EACxB,eAAe,EAAE,mBAAmB,EACpC,mBAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,UAAU,EAAE,cAAsB,EAClC,SAAiB,EACjB,IAAI,EACJ,UAAkB,EAClB,WAAW,EACX,QAAQ,EACR,OAAO,EACP,KAAK,EACL,MAAM,EACN,SAAS,EAAE,UAAU,EACrB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,GAAG,SAAS,CAuF/B;yBA1Ge,YAAY"}
+{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../src/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAS,KAAK,UAAU,EAAC,MAAM,WAAW,CAAC;AAElD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyE5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEnE;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,GAAG,EACH,KAAK,EACL,SAAS,EAAE,aAAa,EACxB,eAAe,EAAE,mBAAmB,EACpC,mBAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,UAAU,EAAE,cAAsB,EAClC,SAAiB,EACjB,IAAI,EACJ,UAAkB,EAClB,WAAW,EACX,QAAQ,EACR,OAAO,EACP,KAAK,EACL,MAAM,EACN,SAAS,EAAE,UAAU,EACrB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,GAAG,SAAS,CAyG/B;yBA5He,YAAY"}

package/dist/ToggleButton/ToggleButton.js

@@ -19,7 +19,7 @@
  * - /apps/storybook/stories/ToggleButton.stories.tsx
  * - /packages/cli/templates/blocks/components/ToggleButton/ (showcase blocks)
  */
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useOptimistic, useState, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, fontWeightVars } from "../theme/tokens.stylex.js";
@@ -27,6 +27,38 @@ import { Button } from "../Button/index.js";
 import { useToggleButtonGroup } from "./ToggleButtonGroup.js";
 import { themeProps } from "../utils/themeProps.js";
 
+// =============================================================================
+// Constants & helpers
+// =============================================================================
+
+/**
+ * The spinner only appears once the action has been pending for this long.
+ * A fast action shows the optimistic pressed state immediately with no spinner
+ * flash, and rapid re-clicks can interrupt the in-flight action before the
+ * button locks behind the spinner.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PENDING_SPINNER_DELAY_MS = 150;
+
+/**
+ * Returns `true` only once `active` has stayed `true` for `delayMs`.
+ * Used to debounce the loading spinner so the optimistic state shows first.
+ */
+function useDelayed(active, delayMs) {
+  const [delayed, setDelayed] = useState(false);
+  useEffect(() => {
+    if (!active) {
+      return undefined;
+    }
+    const timer = setTimeout(() => setDelayed(true), delayMs);
+    return () => {
+      clearTimeout(timer);
+      setDelayed(false);
+    };
+  }, [active, delayMs]);
+  return active && delayed;
+}
+
 // =============================================================================
 // Styles
 // =============================================================================
@@ -36,7 +68,6 @@ import { themeProps } from "../utils/themeProps.js";
  * A hidden span renders the same text at semibold weight to reserve
  * the wider width, preventing layout shift when toggling.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const pressedStyles = {
   background: {
     kWkggS: "xi89dp7",
@@ -93,32 +124,47 @@ export function ToggleButton({
   style,
   ...props
 }) {
-  // Read group context if inside a group
   const group = useToggleButtonGroup();
-
-  // Resolve state from group or props
-  const isPressed = group && value != null ? group.selectedValues.has(value) : isPressedProp ?? false;
+  const committedPressed = group && value != null ? group.selectedValues.has(value) : isPressedProp ?? false;
   const size = sizeProp ?? group?.size ?? 'md';
   const isDisabled = group?.isDisabled ?? isDisabledProp;
+
+  // Track the pressed state optimistically. While an action is pending, the
+  // button reflects the intended (optimistic) state immediately, and a click
+  // mid-flight derives its next state from this value — so rapid toggles read
+  // true -> false -> true rather than stalling on the last committed value.
+  const [optimisticPressed, setOptimisticPressed] = useOptimistic(committedPressed);
+  const isPressed = optimisticPressed;
   const resolvedIcon = isPressed && pressedIcon ? pressedIcon : icon;
+
+  // Run the toggle inside a transition. The action is interruptible: clicking
+  // again while it is pending starts a fresh transition with the next
+  // optimistic state instead of being dropped, so there is no re-entry guard.
+  // Both onPressedChange and pressedChangeAction run inside the transition,
+  // which means a synchronous-but-suspending handler (e.g. a router navigation
+  // that suspends on data) also drives the pending state — not just promises.
+  const [isPending, startTransition] = useTransition();
+  // Debounce the spinner so a fast action shows the optimistic state without a
+  // spinner flash, and rapid re-clicks can interrupt before the button locks.
+  const showSpinner = useDelayed(isPending, PENDING_SPINNER_DELAY_MS);
+  const isLoadingState = isLoading || showSpinner;
   const handleClick = useCallback(() => {
-    if (isDisabled || isLoading) {
+    if (isDisabled) {
       return;
     }
     if (group && value != null) {
-      // Delegate to group context
+      // Group mode delegates selection to the group; no async-action path.
       group.toggle(value);
-    } else if (onPressedChangeProp) {
-      // Standalone toggle
-      const newState = !isPressed;
-      onPressedChangeProp(newState);
-      if (pressedChangeAction) {
-        void pressedChangeAction(newState);
-      }
+      return;
     }
-  }, [isDisabled, isLoading, group, value, onPressedChangeProp, pressedChangeAction, isPressed]);
+    const newState = !optimisticPressed;
+    startTransition(async () => {
+      setOptimisticPressed(newState);
+      onPressedChangeProp?.(newState);
+      await pressedChangeAction?.(newState);
+    });
+  }, [isDisabled, group, value, optimisticPressed, onPressedChangeProp, pressedChangeAction, setOptimisticPressed]);
 
-  // Label with font weight shift and width reservation
   // isIconOnly prop is the source of truth for icon-only rendering.
   const labelContent = children != null ? /*#__PURE__*/_jsxs("span", {
     ...{
@@ -165,7 +211,7 @@ export function ToggleButton({
     variant: "ghost",
     size: size,
     isDisabled: isDisabled,
-    isLoading: isLoading,
+    isLoading: isLoadingState,
     isIconOnly: isIconOnly,
     "aria-pressed": isPressed,
     icon: resolvedIcon,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.1.0-canary.cfbdec3",
+  "version": "0.1.0-canary.d1e1201",
   "displayName": "XDS Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",

package/src/Outline/Outline.doc.mjs

@@ -228,7 +228,7 @@ export const docsZh = {
 /** @type {import('../docs-types').TranslationDoc} */
 export const docsDense = {
   description:
-    'Document outline/table-of-contents nav with sliding indicator track. Flat items array {id,label,level}; anchor links; density variant (default/compact); uncontrolled scroll-spy via IntersectionObserver topmost-visible-heading; controlled with activeId; smooth-scroll on click.',
+    'Document outline/table-of-contents nav with sliding indicator track. Flat items array {id,label,level}; anchor links; density variant (default/compact); uncontrolled scroll-spy by scroll position (last heading past its scroll-margin-top line; first item at top, last at bottom); controlled with activeId; smooth-scroll on click that pins the active item until the next manual scroll.',
   usage: {
     description:
       'A table-of-contents sidebar for documentation pages, help centers, wikis, and long settings pages. Use it for navigation within a single page, not for app routes.',