@astryxdesign/core 0.2.0 → 0.3.0-canary.269c970

package/src/Calendar/Calendar.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'Calendar',
@@ -117,7 +117,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Calendar',
   displayName: 'Calendar',
@@ -181,7 +181,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'month grid for picking a date or date range',
   usage: {

package/src/Calendar/Calendar.test.tsx

@@ -9,7 +9,7 @@
  * SYNC: When Calendar.tsx changes, update tests accordingly
  */
 
-import {describe, it, expect, vi, afterEach} from 'vitest';
+import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import {act, render, screen, within, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {getButton} from '../__tests__/fastRoleQueries';
@@ -19,9 +19,13 @@ import type {CalendarHandle} from './Calendar';
 import type {ISODateString} from './Calendar';
 import {calendarStyles} from './styles';
 import {defineTheme} from '../theme/defineTheme';
-import {generateThemeCSSFlat} from '../theme/generateThemeRules';
+import {generateThemeCSS} from '../theme/generateThemeRules';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
 
+function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
+  const {prose, component} = generateThemeCSS(theme);
+  return [prose, component].filter(Boolean).join('\n\n');
+}
 afterEach(() => {
   __resetLiveRegionsForTest();
 });
@@ -1038,8 +1042,20 @@ describe('Calendar', () => {
 
   // ─── Day-cell marker theming (#4286) ─────────────────────────
   describe('day-cell marker theme state', () => {
-    // Tests use the real "today" (as the existing aria-current tests do) since
-    // Calendar derives it internally. Helpers pin the exact ISO strings.
+    // Pin "today" to a mid-month date so the ±2-day range helpers below stay
+    // within a single rendered month. With the real clock, running near a month
+    // boundary (e.g. the 1st) pushed today-2 into the previous month, so the
+    // rendered grid didn't contain today's cell and the marker assertions
+    // flaked. Fake only Date (timers stay real; these tests are synchronous).
+    beforeEach(() => {
+      vi.useFakeTimers({toFake: ['Date']});
+      vi.setSystemTime(new Date(2026, 5, 15, 12, 0, 0));
+    });
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+    // Tests use the (now-pinned) "today" since Calendar derives it internally.
+    // Helpers pin the exact ISO strings.
     function todayISO(): ISODateString {
       const n = new Date();
       return `${n.getFullYear()}-${String(n.getMonth() + 1).padStart(2, '0')}-${String(n.getDate()).padStart(2, '0')}` as ISODateString;
@@ -1136,7 +1152,7 @@ describe('Calendar', () => {
           },
         },
       });
-      const css = generateThemeCSSFlat(theme);
+      const css = generateThemeTestCSS(theme);
       expect(css).toContain('.astryx-calendar-day.today-only');
       expect(css).toContain('.astryx-calendar-day.today-in-range');
       expect(css).toContain('box-shadow: inset 0 0 0 2px var(--color-accent)');
@@ -1217,7 +1233,7 @@ describe('Calendar', () => {
           },
         },
       });
-      const css = generateThemeCSSFlat(theme);
+      const css = generateThemeTestCSS(theme);
       expect(css).toContain('.astryx-calendar-nav {');
       expect(css).toContain('color: var(--color-accent)');
       expect(css).toContain('.astryx-calendar-nav.next');

package/src/Calendar/Calendar.tsx

@@ -14,7 +14,7 @@
  * - /packages/core/src/Calendar/Calendar.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/Calendar/index.ts (exports if types change)
  * - /apps/storybook/stories/Calendar.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Calendar/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Calendar/ (showcase blocks)
  */
 
 import {

package/src/Calendar/index.ts

@@ -38,11 +38,6 @@ export type {
 } from './hooks';
 
 // Re-export calendar-specific utilities for advanced usage
-export {
-  isSameDay,
-  isDateInRange,
-  getWeekNumber,
-  formatAccessibleDate,
-} from './utils';
+export {isSameDay, isDateInRange, getWeekNumber} from './utils';
 
 // Re-export theme styles for customization

package/src/Calendar/styles.ts

@@ -215,9 +215,9 @@ export const dayCellStyles = stylex.create({
       content: '""',
       position: 'absolute',
       top: '-2px',
-      right: '-2px',
+      insetInlineEnd: '-2px',
       bottom: '-2px',
-      left: '-2px',
+      insetInlineStart: '-2px',
     },
   },
 

package/src/Calendar/utils.ts

@@ -7,8 +7,6 @@
  * @position Shared utilities; used by Calendar, CalendarMonthGrid, CalendarDayCell
  */
 
-import {plainDateFormat, DATE_FORMAT_WITH_WEEKDAY} from '../utils/plainDate';
-
 export {
   type PlainDate,
   plainDateFromISO as parseISO,
@@ -17,12 +15,3 @@ export {
   plainDateIsInRange as isDateInRange,
   plainDateGetWeekNumber as getWeekNumber,
 } from '../utils/plainDate';
-
-export {plainDateFormat, DATE_FORMAT_WITH_WEEKDAY};
-
-/** @deprecated Use `plainDateFormat(pd, DATE_FORMAT_WITH_WEEKDAY)` instead. */
-export function formatAccessibleDate(
-  ...args: Parameters<typeof plainDateFormat>
-): string {
-  return plainDateFormat(args[0], DATE_FORMAT_WITH_WEEKDAY);
-}

package/src/Card/Card.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'Card',
@@ -103,7 +103,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Card',
   displayName: 'Card',
@@ -151,7 +151,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'bordered container for DISCRETE items; NOT the default layout tool. Most content doesn\'t need a card.',
   usage: {

package/src/Card/Card.tsx

@@ -12,7 +12,7 @@
  * - /packages/core/src/Card/Card.doc.mjs (props table, features)
  * - /packages/core/src/Card/index.ts (exports if types change)
  * - /apps/storybook/stories/Card.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Card/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Card/ (showcase blocks)
  */
 
 import type {ReactNode} from 'react';

package/src/Carousel/Carousel.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'Carousel',
@@ -12,6 +12,7 @@ export const docs = {
       'Carousel scrolls a row of items horizontally when they overflow the available width. Use it for card grids, image galleries, product lists, or any set of items that should be browsable without taking up the full page.',
     bestPractices: [
       {guidance: true, description: 'Enable scroll-snap when each item should land precisely at the start edge, like a gallery or product list.'},
+      {guidance: true, description: 'Reach for hasLoop on small, cyclable sets like a photo gallery, where wrapping past the last item back to the first feels natural.'},
       {guidance: true, description: 'Always provide an aria-label that describes what the carousel contains, like "Featured products" or "Team members".'},
       {guidance: true, description: 'Use a consistent gap and item width so the carousel looks intentional, not like content overflowing by accident.'},
       {guidance: true, description: 'Trust the built-in navigation: trackpad users can swipe horizontally, and mouse users can hold Shift while scrolling the wheel to move through items.'},
@@ -31,10 +32,12 @@ export const docs = {
     {name: 'gap', type: "0 | 0.5 | 1 | 1.5 | 2 | 3 | 4", description: 'Gap between items using the spacing token scale.', default: '1'},
     {name: 'hasButtons', type: 'boolean', description: 'Show prev/next navigation buttons when content is scrollable.', default: 'true'},
     {name: 'hasEdgeFade', type: 'boolean', description: 'Show a gradient edge-fade mask when content overflows, signalling that more items exist off-screen.', default: 'true'},
+    {name: 'hasLoop', type: 'boolean', description: 'Wrap-around scrolling: next at the end scrolls to the start, prev at the start scrolls to the end. Buttons stay visible at both edges. Only engages when content overflows.', default: 'false'},
     {name: 'hasSnap', type: 'boolean', description: 'Enable scroll-snap so each child snaps to the start edge.', default: 'false'},
     {name: 'padding', type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10', description: 'Inline padding inside the scroll container, with matching scroll-padding so snap points align to the content edge.'},
     {name: 'aria-label', type: 'string', description: 'Accessible label for the carousel region.', default: "\'Carousel\'"},
     {name: 'ref', type: 'React.Ref<HTMLDivElement>', description: 'Ref forwarded to the root element.'},
+    {name: 'handleRef', type: 'React.Ref<CarouselHandle>', description: 'Imperative handle exposing scrollNext(), scrollPrev(), scrollTo(index), canScrollNext(), and canScrollPrev() for programmatic scroll control.'},
     {name: 'xstyle', type: 'StyleXStyles', description: 'StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value.'},
     {name: 'className', type: 'string', description: 'CSS class name for the root element. Prefer xstyle for styling.'},
     {name: 'style', type: 'CSSProperties', description: 'Inline styles for the root element. Prefer xstyle.'},
@@ -56,7 +59,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -75,13 +78,15 @@ export const docsZh = {
     gap: '使用间距令牌比例的项目间距。',
     hasButtons: '内容可滚动时显示上一个/下一个导航按钮。',
     hasEdgeFade: '内容溢出时显示渐变边缘遮罩，提示屏幕外还有更多项目。',
+    hasLoop: '环绕滚动：在末尾按"下一个"回到开头，在开头按"上一个"跳到末尾。按钮在两端始终可见。仅在内容溢出时生效。',
     hasSnap: '启用滚动吸附，使每个子元素吸附到起始边缘。',
     padding: '滚动容器内的内联内边距，并设置匹配的 scroll-padding，使吸附点与内容边缘对齐。',
     'aria-label': '轮播区域的无障碍标签。',
+    handleRef: '命令式句柄，暴露 scrollNext()、scrollPrev()、scrollTo(index)、canScrollNext() 和 canScrollPrev() 以进行编程式滚动控制。',
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'horizontal scroll container w/ fade edges, nav buttons, scroll-snap',
   usage: {
@@ -102,9 +107,11 @@ export const docsDense = {
     gap: 'item spacing via spacing token scale',
     hasButtons: 'prev/next buttons when content is scrollable',
     hasEdgeFade: 'gradient edge-fade mask on overflow',
+    hasLoop: 'wrap-around: next at end -> start, prev at start -> end; buttons stay visible; only when overflowing',
     hasSnap: 'scroll-snap; children snap to start edge',
     padding: 'inline padding; scroll-padding keeps snap points on content edge',
     'aria-label': 'accessible label for carousel region',
+    handleRef: 'imperative handle: scrollNext/scrollPrev/scrollTo(index)/canScrollNext/canScrollPrev',
     'data-testid': 'test selector for automated testing frameworks',
   },
 };

package/src/Carousel/Carousel.test.tsx

@@ -1,8 +1,9 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 import {describe, it, expect, vi} from 'vitest';
+import {createRef} from 'react';
 import {render, screen, fireEvent} from '@testing-library/react';
-import {Carousel} from './Carousel';
+import {Carousel, type CarouselHandle} from './Carousel';
 
 // Mock ResizeObserver (not available in jsdom)
 class MockResizeObserver {
@@ -259,4 +260,234 @@ describe('Carousel', () => {
       expect(scrollBy).not.toHaveBeenCalled();
     });
   });
+
+  describe('hasLoop', () => {
+    // jsdom doesn't lay out elements, so we fake an overflowing scroll
+    // container, force it to rest at an edge, and capture scrollBy calls.
+    function getScroller() {
+      const region = screen.getByRole('region');
+      return region.firstElementChild as HTMLElement;
+    }
+
+    function makeOverflowing(el: HTMLElement, scrollLeft: number) {
+      Object.defineProperty(el, 'scrollWidth', {
+        value: 500,
+        configurable: true,
+      });
+      Object.defineProperty(el, 'clientWidth', {
+        value: 200,
+        configurable: true,
+      });
+      Object.defineProperty(el, 'scrollLeft', {
+        value: scrollLeft,
+        writable: true,
+        configurable: true,
+      });
+      // Drive the overflow hook's scroll listener so overflowStart/End settle.
+      fireEvent.scroll(el);
+    }
+
+    it('keeps both navigation buttons enabled at the edges when looping', () => {
+      render(
+        <Carousel hasLoop aria-label="Looping">
+          <div>Item 1</div>
+          <div>Item 2</div>
+        </Carousel>,
+      );
+      const scroller = getScroller();
+      // At the start edge: without loop the left button would be disabled.
+      makeOverflowing(scroller, 0);
+
+      expect(screen.getByLabelText('Scroll left')).toBeEnabled();
+      expect(screen.getByLabelText('Scroll right')).toBeEnabled();
+    });
+
+    it('wraps to the start when pressing next at the end', () => {
+      render(
+        <Carousel hasLoop aria-label="Looping">
+          <div>Item 1</div>
+          <div>Item 2</div>
+        </Carousel>,
+      );
+      const scroller = getScroller();
+      // At the end edge (scrolled fully right): overflowEnd is false.
+      makeOverflowing(scroller, 300);
+      const scrollBy = vi.fn();
+      scroller.scrollBy = scrollBy;
+
+      fireEvent.click(screen.getByLabelText('Scroll right'));
+
+      // Overshoots toward the start by the full scroll width; the browser
+      // clamps to scrollLeft 0.
+      expect(scrollBy).toHaveBeenCalledWith({
+        left: -500,
+        behavior: 'smooth',
+      });
+    });
+
+    it('wraps to the end when pressing prev at the start', () => {
+      render(
+        <Carousel hasLoop aria-label="Looping">
+          <div>Item 1</div>
+          <div>Item 2</div>
+        </Carousel>,
+      );
+      const scroller = getScroller();
+      makeOverflowing(scroller, 0);
+      const scrollBy = vi.fn();
+      scroller.scrollBy = scrollBy;
+
+      fireEvent.click(screen.getByLabelText('Scroll left'));
+
+      // Overshoots toward the end by the full scroll width.
+      expect(scrollBy).toHaveBeenCalledWith({
+        left: 500,
+        behavior: 'smooth',
+      });
+    });
+
+    it('does not wrap when content fits without overflowing', () => {
+      render(
+        <Carousel hasLoop aria-label="Looping">
+          <div>Only item</div>
+        </Carousel>,
+      );
+      const scroller = getScroller();
+      Object.defineProperty(scroller, 'scrollWidth', {
+        value: 200,
+        configurable: true,
+      });
+      Object.defineProperty(scroller, 'clientWidth', {
+        value: 200,
+        configurable: true,
+      });
+      Object.defineProperty(scroller, 'scrollLeft', {
+        value: 0,
+        writable: true,
+        configurable: true,
+      });
+      fireEvent.scroll(scroller);
+      const scrollBy = vi.fn();
+      scroller.scrollBy = scrollBy;
+
+      // Buttons are hidden/disabled with no overflow; invoking scroll is a
+      // no-op wrap-wise — a normal (non-wrap) scrollBy still runs, but there
+      // is nothing to wrap to, so the overshoot branch must not fire.
+      fireEvent.click(screen.getByLabelText('Scroll right'));
+
+      // Either not called (button disabled) or called with a normal delta —
+      // never the full-scrollWidth overshoot.
+      if (scrollBy.mock.calls.length > 0) {
+        expect(scrollBy).not.toHaveBeenCalledWith(
+          expect.objectContaining({left: 500}),
+        );
+        expect(scrollBy).not.toHaveBeenCalledWith(
+          expect.objectContaining({left: -500}),
+        );
+      }
+    });
+  });
+
+  describe('handleRef', () => {
+    function getScroller() {
+      const region = screen.getByRole('region');
+      return region.firstElementChild as HTMLElement;
+    }
+
+    function makeOverflowing(el: HTMLElement, scrollLeft: number) {
+      Object.defineProperty(el, 'scrollWidth', {
+        value: 500,
+        configurable: true,
+      });
+      Object.defineProperty(el, 'clientWidth', {
+        value: 200,
+        configurable: true,
+      });
+      Object.defineProperty(el, 'scrollLeft', {
+        value: scrollLeft,
+        writable: true,
+        configurable: true,
+      });
+      fireEvent.scroll(el);
+    }
+
+    it('exposes scrollNext/scrollPrev that drive the scroll container', () => {
+      const handle = createRef<CarouselHandle>();
+      render(
+        <Carousel handleRef={handle} aria-label="Handle">
+          <div>Item 1</div>
+          <div>Item 2</div>
+        </Carousel>,
+      );
+      const scroller = getScroller();
+      makeOverflowing(scroller, 100);
+      const scrollBy = vi.fn();
+      scroller.scrollBy = scrollBy;
+
+      handle.current?.scrollNext();
+      expect(scrollBy).toHaveBeenCalledTimes(1);
+      expect(scrollBy.mock.calls[0][0].left).toBeGreaterThan(0);
+
+      handle.current?.scrollPrev();
+      expect(scrollBy).toHaveBeenCalledTimes(2);
+      expect(scrollBy.mock.calls[1][0].left).toBeLessThan(0);
+    });
+
+    it('reports canScrollNext/canScrollPrev from live overflow state', () => {
+      const handle = createRef<CarouselHandle>();
+      render(
+        <Carousel handleRef={handle} aria-label="Handle">
+          <div>Item 1</div>
+          <div>Item 2</div>
+        </Carousel>,
+      );
+      const scroller = getScroller();
+
+      // At the start: can scroll toward the end, not the start.
+      makeOverflowing(scroller, 0);
+      expect(handle.current?.canScrollPrev()).toBe(false);
+      expect(handle.current?.canScrollNext()).toBe(true);
+
+      // Scroll into the middle: both directions available.
+      makeOverflowing(scroller, 150);
+      expect(handle.current?.canScrollPrev()).toBe(true);
+      expect(handle.current?.canScrollNext()).toBe(true);
+    });
+
+    it('reports both directions scrollable under hasLoop when overflowing', () => {
+      const handle = createRef<CarouselHandle>();
+      render(
+        <Carousel handleRef={handle} hasLoop aria-label="Handle">
+          <div>Item 1</div>
+          <div>Item 2</div>
+        </Carousel>,
+      );
+      const scroller = getScroller();
+      // Rest at the start edge — normally canScrollPrev would be false.
+      makeOverflowing(scroller, 0);
+
+      expect(handle.current?.canScrollPrev()).toBe(true);
+      expect(handle.current?.canScrollNext()).toBe(true);
+    });
+
+    it('scrollTo scrolls the container and clamps out-of-range indices', () => {
+      const handle = createRef<CarouselHandle>();
+      render(
+        <Carousel handleRef={handle} aria-label="Handle">
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+        </Carousel>,
+      );
+      const scroller = getScroller();
+      const scrollBy = vi.fn();
+      scroller.scrollBy = scrollBy;
+
+      // Out-of-range index is clamped to the last item — no throw, one call.
+      expect(() => handle.current?.scrollTo(99)).not.toThrow();
+      expect(scrollBy).toHaveBeenCalledTimes(1);
+      // Uses scrollBy (contained to the carousel), never scrollIntoView.
+      expect(scrollBy.mock.calls[0][0]).toHaveProperty('left');
+    });
+  });
 });