@astryxdesign/core 0.1.4-canary.fd7ab46 → 0.1.4

package/src/Layer/useLayer.test.tsx

@@ -3,21 +3,15 @@
 /**
  * @file useLayer.test.tsx
  * @input Uses vitest, @testing-library/react, useLayer hook
- * @output Tests for useLayer show/hide feature-detection guards and context-mode positioning
+ * @output Unit tests for useLayer show/hide behavior and feature-detection guards
  * @position Testing; validates useLayer.tsx implementation
  *
- * SYNC: When useLayer.tsx changes, update tests accordingly
+ * SYNC: When useLayer.tsx changes, update tests to match new behavior
  */
 
 import {describe, it, expect, vi, afterEach} from 'vitest';
 import {render, act} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import {useLayer} from './useLayer';
-import type {
-  LayerPlacement,
-  LayerAlignment,
-  ContextRenderProps,
-} from './useLayer';
 
 /**
  * Minimal harness that exposes the imperative show/hide callbacks and renders
@@ -115,216 +109,3 @@ describe('useLayer', () => {
     });
   });
 });
-
-/**
- * Harness that owns the trigger element.
- */
-function Harness({
-  placement,
-  alignment,
-  triggerStyle,
-  triggerDir,
-}: {
-  placement: LayerPlacement;
-  alignment: LayerAlignment;
-  triggerStyle?: React.CSSProperties;
-  triggerDir?: string;
-}) {
-  const layer = useLayer({mode: 'context'});
-  return (
-    <>
-      <button
-        type="button"
-        ref={layer.ref}
-        dir={triggerDir}
-        style={triggerStyle}
-        onClick={layer.isOpen ? layer.hide : layer.show}>
-        trigger
-      </button>
-      {layer.render(<span>content</span>, {placement, alignment})}
-    </>
-  );
-}
-
-async function openAndGetStyle(ui: React.ReactElement): Promise<string> {
-  const user = userEvent.setup();
-  const {container, getByRole} = render(ui);
-  await user.click(getByRole('button', {name: 'trigger'}));
-  const popover = container.querySelector('[popover]');
-  return popover?.getAttribute('style') ?? '';
-}
-
-describe('useLayer context positioning', () => {
-  // The mapping uses the self-* logical keyword family, so the emitted
-  // string is direction-independent by construction: the browser resolves
-  // the inline axis against the popover's own inherited direction, and RTL
-  // mirrors with no JS. jsdom has no layout engine, so these tests can only
-  // assert the emitted string — the actual RTL geometry is covered by the
-  // RTL Storybook story (and was verified against the full 12-cell matrix
-  // in a real browser).
-  describe('self-* position-area mapping', () => {
-    it.each([
-      // [placement, alignment, expected position-area]
-      ['above', 'start', 'self-block-start span-self-inline-end'],
-      ['above', 'center', 'self-block-start'],
-      ['above', 'end', 'self-block-start span-self-inline-start'],
-      ['below', 'start', 'self-block-end span-self-inline-end'],
-      ['below', 'center', 'self-block-end'],
-      ['below', 'end', 'self-block-end span-self-inline-start'],
-      ['start', 'start', 'self-inline-start span-self-block-end'],
-      ['start', 'center', 'self-inline-start'],
-      ['start', 'end', 'self-inline-start span-self-block-start'],
-      ['end', 'start', 'self-inline-end span-self-block-end'],
-      ['end', 'center', 'self-inline-end'],
-      ['end', 'end', 'self-inline-end span-self-block-start'],
-    ] as const)(
-      'placement=%s alignment=%s emits position-area %s',
-      async (placement, alignment, expectedArea) => {
-        const style = await openAndGetStyle(
-          <Harness placement={placement} alignment={alignment} />,
-        );
-        expect(style).toMatch(
-          new RegExp(`position-area: ${expectedArea}(;|$)`),
-        );
-        expect(style).not.toContain('justify-self');
-      },
-    );
-
-    it('emits the same string regardless of trigger direction', async () => {
-      const user = userEvent.setup();
-      const first = render(<Harness placement="below" alignment="start" />);
-      await user.click(first.getByRole('button', {name: 'trigger'}));
-      const ltr =
-        first.container.querySelector('[popover]')?.getAttribute('style') ?? '';
-      first.unmount();
-
-      const second = render(
-        <Harness
-          placement="below"
-          alignment="start"
-          triggerDir="rtl"
-          triggerStyle={{direction: 'rtl'}}
-        />,
-      );
-      await user.click(second.getByRole('button', {name: 'trigger'}));
-      const rtl =
-        second.container.querySelector('[popover]')?.getAttribute('style') ??
-        '';
-      // The unique position-anchor id differs per render; the placement
-      // mapping must not.
-      const positionArea = (s: string) => s.match(/position-area:[^;]*/)?.[0];
-      expect(positionArea(rtl)).toBeDefined();
-      expect(positionArea(rtl)).toBe(positionArea(ltr));
-    });
-
-    it('keeps position-try fallbacks intact', async () => {
-      const style = await openAndGetStyle(
-        <Harness placement="below" alignment="start" />,
-      );
-      expect(style).toContain(
-        'position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline',
-      );
-    });
-  });
-
-  describe("positioning='custom' (consumer-authored position styles)", () => {
-    // Consumers like Carousel and Tokenizer keep useLayer's popover behavior
-    // and anchor wiring but position the layer themselves. The opt-out must
-    // suppress every placement-derived style — position-area and the try
-    // fallbacks — so those consumers never need to know which properties
-    // the hook would have emitted.
-    function CustomHarness({
-      triggerStyle,
-      renderProps,
-    }: {
-      triggerStyle?: React.CSSProperties;
-      renderProps: ContextRenderProps;
-    }) {
-      const layer = useLayer({mode: 'context'});
-      return (
-        <>
-          <button
-            type="button"
-            ref={layer.ref}
-            style={triggerStyle}
-            onClick={layer.isOpen ? layer.hide : layer.show}>
-            trigger
-          </button>
-          {layer.render(<span>content</span>, renderProps)}
-        </>
-      );
-    }
-
-    it('keeps the anchor wiring but derives no placement styles', async () => {
-      const style = await openAndGetStyle(
-        <CustomHarness
-          renderProps={{
-            positioning: 'custom',
-            style: {positionArea: 'center'},
-          }}
-        />,
-      );
-      expect(style).toContain('position-anchor');
-      // The consumer-authored area is the only one present…
-      expect(style).toContain('position-area: center');
-      // …and no placement-derived styles leak through.
-      expect(style).not.toContain('position-try-fallbacks');
-    });
-
-    it('ignores placement and alignment when positioning is custom', async () => {
-      // placement/alignment are documented as ignored under custom. Derived
-      // output would be position-area "self-block-end span-self-inline-end";
-      // none of it may appear.
-      const style = await openAndGetStyle(
-        <CustomHarness
-          renderProps={{
-            positioning: 'custom',
-            placement: 'below',
-            alignment: 'start',
-            style: {positionArea: 'center'},
-          }}
-        />,
-      );
-      expect(style).toContain('position-anchor');
-      expect(style).toContain('position-area: center');
-      expect(style).not.toContain('self-block');
-      expect(style).not.toContain('position-try-fallbacks');
-    });
-
-    it('emits only the anchor wiring when custom positioning passes no style at all', async () => {
-      // The strongest suppression probe: with no consumer style in the merge
-      // (Tokenizer's insets-only shape reduces to this in jsdom), nothing can
-      // clobber a leaked derived value — any position-area or try-fallbacks
-      // in the output is a genuine leak.
-      const style = await openAndGetStyle(
-        <CustomHarness renderProps={{positioning: 'custom'}} />,
-      );
-      expect(style).toContain('position-anchor');
-      expect(style).not.toContain('position-area');
-      expect(style).not.toContain('position-try-fallbacks');
-    });
-  });
-
-  it('fixed mode emits no anchor-positioning styles', async () => {
-    function FixedHarness() {
-      const layer = useLayer({mode: 'fixed'});
-      return (
-        <>
-          <button type="button" onClick={layer.show}>
-            opener
-          </button>
-          {layer.render(<span>content</span>, {x: 10, y: 20})}
-        </>
-      );
-    }
-
-    const user = userEvent.setup();
-    const {container, getByRole} = render(<FixedHarness />);
-    await user.click(getByRole('button', {name: 'opener'}));
-
-    const style =
-      container.querySelector('[popover]')?.getAttribute('style') ?? '';
-    expect(style).not.toContain('position-area');
-    expect(style).not.toContain('position-anchor');
-  });
-});

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(