@astryxdesign/core 0.1.0-canary.e2d38fb → 0.1.0-canary.e457dac

package/dist/Chat/ChatLayoutScrollButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatLayoutScrollButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayoutScrollButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,CAAC,cAAc,CAAC,EACzB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qCAAqC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAwDD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,GAAG,EACH,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,2BAA2B,qBAwB7B;yBAhCe,sBAAsB"}
+{"version":3,"file":"ChatLayoutScrollButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayoutScrollButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,CAAC,cAAc,CAAC,EACzB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qCAAqC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAkDD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,GAAG,EACH,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,2BAA2B,qBAwB7B;yBAhCe,sBAAsB"}

package/dist/Chat/ChatLayoutScrollButton.js

@@ -43,10 +43,6 @@ const styles = {
     khDVqt: "xuxw1ft",
     kg3NbH: "xf314gf",
     $$css: true
-  },
-  buttonWithLabel: {
-    kwRFfy: "x1t818jl",
-    $$css: true
   }
 };
 
@@ -99,7 +95,7 @@ export function ChatLayoutScrollButton({
         variant: "ghost",
         size: "md",
         onClick: onClick,
-        xstyle: [styles.button, label ? styles.buttonWithLabel : null],
+        xstyle: styles.button,
         children: label ?? undefined
       })
     })

package/dist/Outline/Outline.d.ts

@@ -29,9 +29,8 @@ 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 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.
+ * When `activeId` is omitted, it observes heading elements by id and marks
+ * the topmost visible heading active.
  *
  * @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;;;;;;;;;;;;;;;;;;;;;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"}
+{"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"}

package/dist/Outline/Outline.js

@@ -133,9 +133,8 @@ 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 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.
+ * When `activeId` is omitted, it observes heading elements by id and marks
+ * the topmost visible heading active.
  *
  * @example
  * ```
@@ -163,12 +162,7 @@ export function Outline({
 }) {
   const rootRef = useRef(null);
   const LinkComponent = useLinkComponent();
-  const isControlled = activeId !== undefined;
-  const {
-    activeId: resolvedActiveId,
-    setActiveId,
-    lockActiveId
-  } = useScrollSpy({
+  const [resolvedActiveId, setActiveId] = useScrollSpy({
     activeId,
     items,
     onActiveIdChange,
@@ -176,25 +170,12 @@ export function Outline({
   });
   const handleClick = id => event => {
     const target = document.getElementById(id);
-
-    // Let the browser handle modified clicks (open in new tab, etc.) and
-    // missing targets without touching the active state.
+    setActiveId(id);
     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,19 +5,6 @@ interface UseScrollSpyOptions {
     onActiveIdChange?: (id: string) => void;
     rootRef: React.RefObject<HTMLElement | null>;
 }
-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 declare function useScrollSpy({ activeId, items, onActiveIdChange, rootRef, }: UseScrollSpyOptions): [string | undefined, (id: string) => void];
 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":"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"}
+{"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"}

package/dist/Outline/useScrollSpy.js

@@ -4,23 +4,13 @@
 
 /**
  * @file useScrollSpy.ts
- * @input Uses React, scroll position of heading elements, OutlineItem type
+ * @input Uses React, IntersectionObserver, 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 { 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']);
+import { useEffect, useRef, useState } from 'react';
 function getScrollableAncestor(element) {
   let current = element?.parentElement ?? null;
   while (current != null) {
@@ -34,41 +24,6 @@ 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,
@@ -77,138 +32,72 @@ 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 window === 'undefined') {
+    if (isControlled || typeof IntersectionObserver === 'undefined') {
+      return;
+    }
+    const headingElements = items.map(item => document.getElementById(item.id)).filter(element => element != null);
+    if (headingElements.length === 0) {
       return;
     }
-    const scrollRoot = getScrollableAncestor(rootRef.current);
-    const scrollTarget = scrollRoot ?? window;
-    let frame = 0;
-    const update = () => {
-      frame = 0;
-      if (suppressRef.current) {
+    const visibleHeadingIds = visibleHeadingIdsRef.current;
+    const headingTop = headingTopRef.current;
+    const setNextActiveId = nextActiveId => {
+      if (activeIdRef.current === nextActiveId) {
         return;
       }
-      const nextActiveId = resolveActiveId(itemsRef.current, scrollRoot);
-      if (nextActiveId != null && nextActiveId !== activeIdRef.current) {
-        activeIdRef.current = nextActiveId;
-        setUncontrolledActiveId(nextActiveId);
-        onActiveIdChangeRef.current?.(nextActiveId);
-      }
+      activeIdRef.current = nextActiveId;
+      setUncontrolledActiveId(nextActiveId);
+      onActiveIdChange?.(nextActiveId);
     };
-    const onScroll = () => {
-      if (frame === 0) {
-        frame = requestAnimationFrame(update);
+    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;
+        }
       }
-    };
-    syncRef.current = update;
-    update();
-    scrollTarget.addEventListener('scroll', onScroll, {
-      passive: true
-    });
-    window.addEventListener('resize', onScroll, {
-      passive: true
-    });
-    return () => {
-      syncRef.current = null;
-      scrollTarget.removeEventListener('scroll', onScroll);
-      window.removeEventListener('resize', onScroll);
-      if (frame !== 0) {
-        cancelAnimationFrame(frame);
+      if (nextActiveId != null) {
+        setNextActiveId(nextActiveId);
       }
     };
-  }, [isControlled, itemIds, rootRef]);
-
-  // Tear down any pending suppression listeners when the Outline unmounts.
-  useEffect(() => {
+    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);
+        }
+      }
+      chooseActiveHeading();
+    }, {
+      root: getScrollableAncestor(rootRef.current),
+      threshold: 0
+    });
+    for (const headingElement of headingElements) {
+      observer.observe(headingElement);
+    }
     return () => {
-      releaseSuppressionRef.current?.();
+      observer.disconnect();
+      visibleHeadingIds.clear();
+      headingTop.clear();
     };
-  }, []);
+  }, [isControlled, itemIds, items, onActiveIdChange, rootRef]);
   const setActiveId = nextActiveId => {
     if (!isControlled) {
       setUncontrolledActiveId(nextActiveId);
     }
     onActiveIdChange?.(nextActiveId);
   };
-  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
-  };
+  return [isControlled ? activeId : uncontrolledActiveId, setActiveId];
 }

package/dist/ToggleButton/ToggleButton.d.ts

@@ -38,15 +38,8 @@ export interface ToggleButtonProps extends BaseProps<HTMLButtonElement> {
      */
     onPressedChange?: (isPressed: boolean) => void;
     /**
-     * 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.
+     * Async action handler for API-backed toggles.
+     * The button shows a loading spinner while the promise is pending.
      *
      * @example
      * ```
@@ -60,7 +53,7 @@ export interface ToggleButtonProps extends BaseProps<HTMLButtonElement> {
      * />
      * ```
      */
-    pressedChangeAction?: (isPressed: boolean) => void | Promise<void>;
+    pressedChangeAction?: (isPressed: boolean) => 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,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"}
+{"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"}

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, useEffect, useOptimistic, useState, useTransition } from 'react';
+import React, { useCallback } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, fontWeightVars } from "../theme/tokens.stylex.js";
@@ -27,38 +27,6 @@ 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
 // =============================================================================
@@ -68,6 +36,7 @@ function useDelayed(active, delayMs) {
  * 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",
@@ -124,47 +93,32 @@ export function ToggleButton({
   style,
   ...props
 }) {
+  // Read group context if inside a group
   const group = useToggleButtonGroup();
-  const committedPressed = group && value != null ? group.selectedValues.has(value) : isPressedProp ?? false;
+
+  // Resolve state from group or props
+  const isPressed = 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) {
+    if (isDisabled || isLoading) {
       return;
     }
     if (group && value != null) {
-      // Group mode delegates selection to the group; no async-action path.
+      // Delegate to group context
       group.toggle(value);
-      return;
+    } else if (onPressedChangeProp) {
+      // Standalone toggle
+      const newState = !isPressed;
+      onPressedChangeProp(newState);
+      if (pressedChangeAction) {
+        void pressedChangeAction(newState);
+      }
     }
-    const newState = !optimisticPressed;
-    startTransition(async () => {
-      setOptimisticPressed(newState);
-      onPressedChangeProp?.(newState);
-      await pressedChangeAction?.(newState);
-    });
-  }, [isDisabled, group, value, optimisticPressed, onPressedChangeProp, pressedChangeAction, setOptimisticPressed]);
+  }, [isDisabled, isLoading, group, value, onPressedChangeProp, pressedChangeAction, isPressed]);
 
+  // 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", {
     ...{
@@ -211,7 +165,7 @@ export function ToggleButton({
     variant: "ghost",
     size: size,
     isDisabled: isDisabled,
-    isLoading: isLoadingState,
+    isLoading: isLoading,
     isIconOnly: isIconOnly,
     "aria-pressed": isPressed,
     icon: resolvedIcon,

package/dist/utils/dateParser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dateParser.d.ts","sourceRoot":"","sources":["../../src/utils/dateParser.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAqC,MAAM,aAAa,CAAC;AAE/E,OAAO,EACL,gBAAgB,IAAI,QAAQ,EAC5B,cAAc,IAAI,SAAS,GAC5B,MAAM,aAAa,CAAC;AAErB;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,CAK1C;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAsG9D"}
+{"version":3,"file":"dateParser.d.ts","sourceRoot":"","sources":["../../src/utils/dateParser.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAqC,MAAM,aAAa,CAAC;AAE/E,OAAO,EACL,gBAAgB,IAAI,QAAQ,EAC5B,cAAc,IAAI,SAAS,GAC5B,MAAM,aAAa,CAAC;AAErB;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,CAK1C;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAwF9D"}

package/dist/utils/dateParser.js

@@ -112,23 +112,10 @@ export function parseDateInput(input) {
     return parseNumericDate(+first, +second, currentYear);
   }
 
-  // 6. Fall back to native Date parsing for other formats.
-  //
-  // Skip bare numeric input (e.g. "0", "1", "01", "2026"). These are
-  // in-progress values a user is still typing, not complete dates. Native
-  // `Date` parsing coerces them into arbitrary dates ("0" -> year 2000 in V8,
-  // year 0 in some engines), which is both surprising and — when the year
-  // resolves to 0 — produces an out-of-range date that throws downstream.
-  // Treat them as not-yet-a-valid-date instead.
-  if (/^\d+$/.test(trimmed)) {
-    return null;
-  }
+  // 6. Fall back to native Date parsing for other formats
   const parsed = new Date(trimmed);
   if (!isNaN(parsed.getTime())) {
-    const fromDate = plainDateFromDate(parsed);
-    // Validate the result so we never return an out-of-range date (e.g. a
-    // year of 0), which would throw when later re-parsed.
-    return tryCreatePlainDate(fromDate.year, fromDate.month, fromDate.day);
+    return plainDateFromDate(parsed);
   }
   return null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.1.0-canary.e2d38fb",
+  "version": "0.1.0-canary.e457dac",
   "displayName": "XDS Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -15,7 +15,7 @@
     "url": "https://github.com/facebook/astryx/issues"
   },
   "keywords": [
-    "astryx",
+    "xds",
     "design-system",
     "react",
     "components",

package/src/Chat/ChatLayoutScrollButton.tsx

@@ -90,12 +90,6 @@ const styles = stylex.create({
     whiteSpace: 'nowrap',
     paddingInline: spacingVars['--spacing-2'],
   },
-  // When a label is shown, the icon sits on the leading edge and the text on
-  // the trailing edge. Symmetric padding leaves the text cramped against the
-  // pill's rounded edge, so give the trailing side extra breathing room.
-  buttonWithLabel: {
-    paddingInlineEnd: spacingVars['--spacing-3'],
-  },
 });
 
 // =============================================================================
@@ -136,7 +130,7 @@ export function ChatLayoutScrollButton({
           variant="ghost"
           size="md"
           onClick={onClick}
-          xstyle={[styles.button, label ? styles.buttonWithLabel : null]}>
+          xstyle={styles.button}>
           {label ?? undefined}
         </Button>
       </div>