@astryxdesign/core 0.1.4-canary.ff77e1c → 0.1.4

package/src/Layer/useLayer.tsx

@@ -9,8 +9,7 @@
  * @position Core layer utility; used by useHoverCard, useTooltip, etc.
  *
  * SYNC: When modified, update:
- * - /packages/core/src/Layer/useLayer.doc.mjs
- * - /packages/core/src/Layer/useLayer.test.tsx
+ * - /packages/core/src/Layer/Layer.doc.mjs
  * - /packages/core/src/Layer/index.ts
  */
 
@@ -53,9 +52,7 @@ const styles = stylex.create({
 });
 
 /**
- * Position placement relative to anchor.
- * Logical: start/end resolve against the popover's own inherited direction
- * via CSS (RTL contexts mirror automatically, no JS involved).
+ * Position placement relative to anchor
  */
 export type LayerPlacement = 'above' | 'below' | 'start' | 'end';
 
@@ -68,31 +65,7 @@ export type LayerAlignment = 'start' | 'center' | 'end';
  * Render props for context mode (anchor positioning)
  */
 export interface ContextRenderProps {
-  /**
-   * Who authors the layer's position styles.
-   *
-   * `'anchor'` (default): the hook derives CSS anchor-positioning styles —
-   * `position-area` and `position-try-fallbacks` — from the logical
-   * `placement`/`alignment`.
-   *
-   * `'custom'`: the consumer authors its own position styles via `style`
-   * (e.g. explicit `anchor()` insets or an `anchor-size()` cover). The hook
-   * keeps the popover behavior and the `position-anchor` wiring but emits no
-   * placement-derived styles, so direction handling becomes the consumer's
-   * responsibility. `placement`/`alignment` are ignored.
-   *
-   * @default 'anchor'
-   */
-  positioning?: 'anchor' | 'custom';
-  /**
-   * Logical placement relative to the anchor. Ignored when `positioning`
-   * is `'custom'`.
-   */
   placement?: LayerPlacement;
-  /**
-   * Alignment along the placement axis. Ignored when `positioning`
-   * is `'custom'`.
-   */
   alignment?: LayerAlignment;
   /**
    * ARIA role applied to the popover container (e.g. `'tooltip'`). Lets
@@ -279,45 +252,40 @@ export interface FixedLayerReturn {
 }
 
 /**
- * Map logical placement/alignment to a CSS position-area value.
- *
- * Uses the self-* logical keyword family: the inline axis resolves against
- * the popover's own inherited direction (the layer renders inside the
- * trigger's subtree, so it inherits `direction` and mirrors in RTL with no
- * JS). The block axis is direction-neutral but must come from the same
- * keyword family — mixing physical `top` with `self-inline-*` produces an
- * invalid position-area (computes to `none`, which pins the popover to the
- * viewport corner because styles.base zeroes the UA margins).
- *
- * Note the plain logical family (`inline-start`, no `self-`) is NOT a
- * substitute: it resolves against the containing block — the page root for
- * a top-layer popover — so it ignores `direction` set on a subtree, which
- * is exactly #3389's repro.
+ * Map placement and alignment to CSS position-area value.
  */
 function getPositionArea(
   placement: LayerPlacement = 'above',
   alignment: LayerAlignment = 'center',
 ): string {
+  const placementMap: Record<LayerPlacement, string> = {
+    above: 'top',
+    below: 'bottom',
+    start: 'left',
+    end: 'right',
+  };
+
+  const cssPlacement = placementMap[placement];
+
+  // For above/below, alignment is horizontal
   if (placement === 'above' || placement === 'below') {
-    const block = placement === 'above' ? 'self-block-start' : 'self-block-end';
     if (alignment === 'start') {
-      return `${block} span-self-inline-end`;
+      return `${cssPlacement} span-right`;
     }
     if (alignment === 'end') {
-      return `${block} span-self-inline-start`;
+      return `${cssPlacement} span-left`;
     }
-    return block; // center
+    return cssPlacement; // center
   }
 
-  const inline =
-    placement === 'start' ? 'self-inline-start' : 'self-inline-end';
+  // For start/end, alignment is vertical
   if (alignment === 'start') {
-    return `${inline} span-self-block-end`;
+    return `${cssPlacement} span-bottom`;
   }
   if (alignment === 'end') {
-    return `${inline} span-self-block-start`;
+    return `${cssPlacement} span-top`;
   }
-  return inline; // center
+  return `${cssPlacement} center`;
 }
 
 /**
@@ -353,18 +321,18 @@ export function useLayer(
   const isOpenRef = useRef(false);
 
   const show = useCallback(() => {
-    const popover = popoverRef.current;
-    if (popover && !isOpenRef.current) {
+    const el = popoverRef.current;
+    if (el && !isOpenRef.current) {
       // Finding infra-4: the Popover API is unsupported on Safari <17 and
       // Firefox <125. On those browsers `showPopover` does not exist, so
       // calling it unconditionally throws a TypeError and the layer never
       // opens. Guard behind a feature check; when the API is missing, fall
       // back to plain visibility (the [popover] attribute is inert there, so
       // the element sits in normal flow) so the layer still becomes visible.
-      if (typeof popover.showPopover === 'function') {
-        popover.showPopover();
+      if (typeof el.showPopover === 'function') {
+        el.showPopover();
       } else {
-        popover.style.display = 'block';
+        el.style.display = 'block';
       }
       isOpenRef.current = true;
       setIsOpen(true);
@@ -493,7 +461,6 @@ export function useLayer(
       const {
         placement = 'above',
         alignment = 'center',
-        positioning = 'anchor',
         role,
         xstyle,
         className: extraClassName,
@@ -504,17 +471,11 @@ export function useLayer(
       } = props || {};
 
       // CSS anchor positioning (dynamic, not in StyleX)
-      const anchorStyle: React.CSSProperties =
-        positioning === 'custom'
-          ? // Consumer authors its own position styles via `style` — keep
-            // only the anchor wiring, derive nothing from placement.
-            {positionAnchor: anchorId}
-          : {
-              positionAnchor: anchorId,
-              positionArea: getPositionArea(placement, alignment),
-              positionTryFallbacks:
-                'flip-block, flip-inline, flip-block flip-inline',
-            };
+      const anchorStyle: React.CSSProperties = {
+        positionAnchor: anchorId,
+        positionArea: getPositionArea(placement, alignment),
+        positionTryFallbacks: 'flip-block, flip-inline, flip-block flip-inline',
+      };
 
       const stylexResult = stylex.props(styles.base, xstyle);
       const combinedClassName = extraClassName

package/src/Layout/LayoutContent.doc.mjs

@@ -14,12 +14,6 @@ export const docs = {
       type: 'ReactNode',
       description: 'Content.',
     },
-    {
-      name: 'padding',
-      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
-      description:
-        'Internal padding using the spacing scale. Overrides the default padding from the layout container.',
-    },
     {
       name: 'isScrollable',
       type: 'boolean',
@@ -50,11 +44,6 @@ export const docsZh = {
       type: 'ReactNode',
       description: '内容。',
     },
-    {
-      name: 'padding',
-      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
-      description: '使用间距比例的内边距。覆盖布局容器的默认内边距。',
-    },
     {
       name: 'isScrollable',
       type: 'boolean',
@@ -81,7 +70,6 @@ export const docsDense = {
   description: 'Scrollable main content area.',
   propDescriptions: {
     children: 'Content.',
-    padding: 'Internal padding on spacing scale. Overrides layout container default.',
     isScrollable: 'Enable scrollable overflow.',
     label: 'Accessible label for landmark element.',
     role: 'ARIA landmark role.',

package/src/Layout/LayoutPanel.doc.mjs

@@ -20,12 +20,6 @@ export const docs = {
       description: 'Border on the appropriate edge.',
       default: 'false',
     },
-    {
-      name: 'padding',
-      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
-      description:
-        'Internal padding using the spacing scale. Overrides the default padding from the layout container.',
-    },
     {
       name: 'isScrollable',
       type: 'boolean',
@@ -42,18 +36,6 @@ export const docs = {
       type: 'AriaRole',
       description: 'ARIA landmark role.',
     },
-    {
-      name: 'width',
-      type: 'number | string',
-      description:
-        'Width of the panel. Numbers are treated as pixels, strings are used as-is. Ignored when resizable is provided; the hook controls width.',
-    },
-    {
-      name: 'resizable',
-      type: 'ResizableProps',
-      description:
-        'Resize props from useResizable(). When provided, the hook drives the panel width and a ResizeHandle should be placed adjacent to the panel.',
-    },
   ],
 };
 
@@ -74,11 +56,6 @@ export const docsZh = {
       description: '相应边缘的边框。',
       default: 'false',
     },
-    {
-      name: 'padding',
-      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
-      description: '使用间距比例的内边距。覆盖布局容器的默认内边距。',
-    },
     {
       name: 'isScrollable',
       type: 'boolean',
@@ -95,18 +72,6 @@ export const docsZh = {
       type: 'AriaRole',
       description: 'ARIA 地标角色。',
     },
-    {
-      name: 'width',
-      type: 'number | string',
-      description:
-        '面板宽度。数字按像素处理，字符串按原样使用。提供 resizable 时忽略，宽度由 hook 控制。',
-    },
-    {
-      name: 'resizable',
-      type: 'ResizableProps',
-      description:
-        '来自 useResizable() 的调整大小属性。提供时面板宽度由 hook 驱动，应在面板旁放置 ResizeHandle。',
-    },
   ],
 };
 
@@ -118,13 +83,8 @@ export const docsDense = {
   propDescriptions: {
     children: 'Panel content.',
     hasDivider: 'Border on appropriate edge.',
-    padding: 'Internal padding on spacing scale. Overrides layout container default.',
     isScrollable: 'Enable scrollable overflow.',
     label: 'Accessible label for landmark element.',
     role: 'ARIA landmark role.',
-    width:
-      'Panel width. Numbers = pixels, strings as-is. Ignored when resizable provided; hook controls width.',
-    resizable:
-      'Resize props from useResizable(). Hook drives panel width; place ResizeHandle adjacent.',
   },
 };

package/src/Lightbox/Lightbox.doc.mjs

@@ -64,13 +64,8 @@ export const docs = {
       { guidance: false, description: 'Nest interactive content inside captions; keep them plain text.' },
     ],
   },
-  // The lightbox opens via showModal() and renders nothing while closed —
-  // overlay mode gives the Properties preview an open trigger instead of an
-  // empty stage, mirroring MobileNav (#3616).
   playground: {
-    overlay: true,
     defaults: {
-      isOpen: false,
       media: {
         src: 'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png',
         alt: 'Coastal shoreline with ocean waves',

package/src/Lightbox/Lightbox.test.tsx

@@ -1,9 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
-import {render, screen, fireEvent, waitFor} from '@testing-library/react';
+import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {render, screen, fireEvent} from '@testing-library/react';
 import {Lightbox} from './Lightbox';
-import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
 
 // Mock showModal/close for jsdom
 beforeEach(() => {
@@ -17,16 +16,6 @@ beforeEach(() => {
   });
 });
 
-// useAnnounce mounts singleton live regions on <body>; reset between tests so
-// stale announcements from one test don't leak into the next.
-afterEach(() => {
-  __resetLiveRegionsForTest();
-});
-
-function politeRegion(): HTMLElement | null {
-  return document.querySelector('[data-astryx-live-region="polite"]');
-}
-
 describe('Lightbox', () => {
   it('renders as a dialog element', () => {
     render(
@@ -311,116 +300,6 @@ describe('Lightbox', () => {
     });
   });
 
-  describe('screen-reader announcements', () => {
-    const media = [
-      {src: '/a.jpg', alt: 'Image A', caption: 'First'},
-      {src: '/b.jpg', alt: 'Image B', caption: 'Second'},
-      {src: '/c.jpg', alt: 'Image C'},
-    ];
-
-    it('announces the new image and position when navigating next via button', async () => {
-      render(
-        <Lightbox
-          isOpen={true}
-          onOpenChange={() => {}}
-          media={media}
-          defaultIndex={0}
-        />,
-      );
-      fireEvent.click(screen.getByLabelText('Next'));
-      await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Image B, 2 of 3');
-      });
-    });
-
-    it('announces the new image and position when navigating via arrow keys', async () => {
-      render(
-        <Lightbox
-          isOpen={true}
-          onOpenChange={() => {}}
-          media={media}
-          defaultIndex={1}
-        />,
-      );
-      const dialog = document.querySelector('dialog')!;
-      fireEvent.keyDown(dialog, {key: 'ArrowRight'});
-      await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Image C, 3 of 3');
-      });
-    });
-
-    it('announces the new image and position when navigating prev', async () => {
-      render(
-        <Lightbox
-          isOpen={true}
-          onOpenChange={() => {}}
-          media={media}
-          defaultIndex={2}
-        />,
-      );
-      fireEvent.click(screen.getByLabelText('Previous'));
-      await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Image B, 2 of 3');
-      });
-    });
-
-    it('falls back to a positional label when the image has no alt', async () => {
-      const unlabeled = [
-        {src: '/a.jpg', alt: 'Image A'},
-        {src: '/b.jpg', alt: ''},
-      ];
-      render(
-        <Lightbox
-          isOpen={true}
-          onOpenChange={() => {}}
-          media={unlabeled}
-          defaultIndex={0}
-        />,
-      );
-      fireEvent.click(screen.getByLabelText('Next'));
-      await waitFor(() => {
-        expect(politeRegion()).toHaveTextContent('Image 2 of 2');
-      });
-    });
-
-    it('does not announce on initial open', async () => {
-      render(
-        <Lightbox
-          isOpen={true}
-          onOpenChange={() => {}}
-          media={media}
-          defaultIndex={1}
-        />,
-      );
-      // Allow any scheduled rAF to flush; nothing should have been announced.
-      await new Promise(resolve => requestAnimationFrame(() => resolve(null)));
-      // The dialog's aria-label already names the current image on open, so no
-      // live region is created (announce is never called).
-      expect(politeRegion()).toBeNull();
-    });
-
-    it('does not announce when the lightbox opens at a new index', async () => {
-      const {rerender} = render(
-        <Lightbox
-          isOpen={false}
-          onOpenChange={() => {}}
-          media={media}
-          index={0}
-        />,
-      );
-      rerender(
-        <Lightbox
-          isOpen={true}
-          onOpenChange={() => {}}
-          media={media}
-          index={2}
-        />,
-      );
-      await new Promise(resolve => requestAnimationFrame(() => resolve(null)));
-      expect(politeRegion()).toBeNull();
-    });
-  });
-
   describe('video support', () => {
     it('renders a video element when type is video', () => {
       const {container} = render(

package/src/Lightbox/Lightbox.tsx

@@ -19,7 +19,6 @@
 import {
   useCallback,
   useEffect,
-  useMemo,
   useRef,
   useState,
   type MouseEvent as ReactMouseEvent,
@@ -29,7 +28,6 @@ import * as stylex from '@stylexjs/stylex';
 import {colorVars, spacingVars, typeScaleVars} from '../theme/tokens.stylex';
 import {Icon} from '../Icon';
 import {IconButton} from '../IconButton';
-import {useAnnounce} from '../hooks/useAnnounce';
 import {useScrollLock} from '../hooks/useScrollLock';
 import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
 import {mergeProps, mergeRefs} from '../utils';
@@ -308,10 +306,7 @@ export function Lightbox({
   const dragStartRef = useRef({x: 0, y: 0, panX: 0, panY: 0});
 
   // Resolve current media item
-  const mediaArray = useMemo(
-    () => (Array.isArray(media) ? media : [media]),
-    [media],
-  );
+  const mediaArray = Array.isArray(media) ? media : [media];
   const isGallery = mediaArray.length > 1;
   const currentItem =
     mediaArray.length > 0
@@ -334,29 +329,6 @@ export function Lightbox({
     setPan({x: 0, y: 0});
   }, [index, currentItem?.src]);
 
-  // Announce gallery navigation to screen readers. Moving between images only
-  // updates the visual counter, which is silent to assistive tech, so mirror
-  // each change in a polite live region ("<alt>, 3 of 12", or "Image 3 of 12"
-  // when the image has no alt). Announce only when the image changes during an
-  // already-open session — not on mount, not when opening (even at a new
-  // index, since the dialog's aria-label already names the current image), and
-  // not on close.
-  const announce = useAnnounce();
-  const prevIndexRef = useRef(index);
-  const wasOpenRef = useRef(isOpen);
-  useEffect(() => {
-    const indexChanged = prevIndexRef.current !== index;
-    const wasOpen = wasOpenRef.current;
-    prevIndexRef.current = index;
-    wasOpenRef.current = isOpen;
-    if (!indexChanged || !isOpen || !wasOpen) {
-      return;
-    }
-    const item = mediaArray[Math.min(index, mediaArray.length - 1)];
-    const position = `${index + 1} of ${mediaArray.length}`;
-    announce(item?.alt ? `${item.alt}, ${position}` : `Image ${position}`);
-  }, [index, isOpen, announce, mediaArray]);
-
   // Open/close dialog
   useIsomorphicLayoutEffect(() => {
     const dialog = dialogRef.current;

package/src/Markdown/Markdown.tsx

@@ -425,14 +425,7 @@ const streamingStyles = stylex.create({
   fadeIn: {
     opacity: 1,
     transitionProperty: 'opacity',
-    // Collapse the entry fade to an instant swap under reduced motion. The
-    // 0s duration makes the @starting-style opacity jump non-animated (the
-    // media query can't nest inside @starting-style), mirroring the
-    // conditional-duration form in Spinner (Spinner.tsx).
-    transitionDuration: {
-      default: durationVars['--duration-medium'],
-      '@media (prefers-reduced-motion: reduce)': '0s',
-    },
+    transitionDuration: durationVars['--duration-medium'],
     transitionTimingFunction: easeVars['--ease-standard'],
     '@starting-style': {
       opacity: 0,
@@ -1056,7 +1049,12 @@ function renderBlock(
   switch (node.type) {
     case 'heading': {
       const level = Math.min(node.level + headingLevelStart - 1, 6) as
-        1 | 2 | 3 | 4 | 5 | 6;
+        | 1
+        | 2
+        | 3
+        | 4
+        | 5
+        | 6;
       const headingChildren = node.children.map((c, i) =>
         renderInline(
           c,

package/src/Markdown/parser.perf.test.ts

@@ -69,31 +69,6 @@ function simulateStreamingIncremental(
   return parseMarkdownIncremental(fullText, state);
 }
 
-// A single wall-clock measurement is flaky when the whole suite runs in
-// parallel forks: scheduler contention can inflate a millisecond-scale
-// sample well past a tight budget (observed 30.9ms against the 20ms Small
-// budget). The fastest of a few runs approximates the un-contended cost —
-// a real regression raises the minimum too — so budgets stay tight without
-// flapping. The streaming budget tests below keep a single run: their
-// budgets carry 10x+ headroom, which contention cannot realistically eat.
-function measureBest<T>(
-  runs: number,
-  fn: () => T,
-): {elapsed: number; result: T} {
-  let elapsed = Infinity;
-  let result!: T;
-  for (let i = 0; i < runs; i++) {
-    const start = performance.now();
-    const r = fn();
-    const t = performance.now() - start;
-    if (t < elapsed) {
-      elapsed = t;
-      result = r;
-    }
-  }
-  return {elapsed, result};
-}
-
 describe('parseMarkdown performance', () => {
   const sizes = [
     {name: 'Small', paragraphs: 10, maxMs: 20},
@@ -118,7 +93,9 @@ describe('parseMarkdown performance', () => {
   for (const size of sizes) {
     it(`full re-parse ${size.name} (${size.paragraphs} paragraphs) under ${size.maxMs}ms`, () => {
       const text = generateAIResponse(size.paragraphs);
-      const {elapsed, result} = measureBest(3, () => parseMarkdown(text));
+      const start = performance.now();
+      const result = parseMarkdown(text);
+      const elapsed = performance.now() - start;
       console.log(
         `  ${size.name} full parse: ${elapsed.toFixed(2)}ms → ${result.length} blocks`,
       );
@@ -172,14 +149,15 @@ describe('parseMarkdown performance', () => {
     const text = generateAIResponse(200);
     const chunkSize = 50;
 
-    // The assertion below compares a ratio of two measurements, so noise on
-    // either side can flip it — measure both as best-of-3.
-    const {elapsed: fullElapsed} = measureBest(3, () =>
-      simulateStreamingFullReparse(text, chunkSize),
-    );
-    const {elapsed: incrElapsed} = measureBest(3, () =>
-      simulateStreamingIncremental(text, chunkSize),
-    );
+    // Full re-parse timing
+    const fullStart = performance.now();
+    simulateStreamingFullReparse(text, chunkSize);
+    const fullElapsed = performance.now() - fullStart;
+
+    // Incremental timing
+    const incrStart = performance.now();
+    simulateStreamingIncremental(text, chunkSize);
+    const incrElapsed = performance.now() - incrStart;
 
     const speedup = fullElapsed / incrElapsed;
     console.log(`\n  === Incremental vs Full Re-parse Speedup ===`);

package/src/MobileNav/MobileNav.test.tsx

@@ -144,62 +144,6 @@ describe('MobileNav', () => {
     expect(screen.getByTestId('custom-nav')).toBeInTheDocument();
   });
 
-  it('forwards arbitrary pass-through attributes to the dialog', () => {
-    render(
-      <MobileNav
-        isOpen={true}
-        onOpenChange={() => {}}
-        data-testid="nav"
-        id="main-nav"
-        data-custom="x"
-        aria-describedby="nav-desc">
-        <span>Content</span>
-      </MobileNav>,
-    );
-
-    const dialog = screen.getByTestId('nav');
-    expect(dialog).toHaveAttribute('id', 'main-nav');
-    expect(dialog).toHaveAttribute('data-custom', 'x');
-    expect(dialog).toHaveAttribute('aria-describedby', 'nav-desc');
-  });
-
-  it('applies a consumer className and style to the dialog', () => {
-    render(
-      <MobileNav
-        isOpen={true}
-        onOpenChange={() => {}}
-        data-testid="nav"
-        className="consumer-class"
-        style={{zIndex: 42}}>
-        <span>Content</span>
-      </MobileNav>,
-    );
-
-    const dialog = screen.getByTestId('nav');
-    expect(dialog.className).toContain('consumer-class');
-    expect(dialog.style.zIndex).toBe('42');
-  });
-
-  it('composes a consumer onClick with the backdrop-dismiss handler', () => {
-    const onClick = vi.fn();
-    const onOpenChange = vi.fn();
-    render(
-      <MobileNav
-        isOpen={true}
-        onOpenChange={onOpenChange}
-        data-testid="nav"
-        onClick={onClick}>
-        <span>Content</span>
-      </MobileNav>,
-    );
-
-    // Clicking the dialog element itself (the backdrop) dismisses AND calls the
-    // consumer handler.
-    fireEvent.click(screen.getByTestId('nav'));
-    expect(onClick).toHaveBeenCalledTimes(1);
-    expect(onOpenChange).toHaveBeenCalledWith(false);
-  });
-
   it('uses native dialog element', () => {
     render(
       <MobileNav