@astryxdesign/core 0.7.4 → 0.7.5-canary.0418c47

package/dist/Lightbox/Lightbox.js

@@ -4,7 +4,8 @@
 
 /**
  * @file Lightbox.tsx
- * @input Uses React, native dialog, StyleX, IconButton, theme tokens, layerTextReset, layerStructureReset
+ * @input Uses React, native dialog, StyleX, IconButton, theme tokens, layerTextReset, layerStructureReset,
+ *   isRtlElement (gallery arrow keys follow the rendered direction)
  * @output Exports Lightbox component, LightboxProps, LightboxMedia
  * @position Core implementation; consumed by index.ts
  *
@@ -31,11 +32,13 @@ import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
 import { layerTextReset } from "../Layer/layerTextReset.stylex.js";
 import { layerStructureReset } from "../Layer/layerStructureReset.stylex.js";
 import { LayerContentBoundary } from "../Layer/layerScopedContext.js";
+import { ModalAnnounceProvider } from "../hooks/ModalAnnounceProvider.js";
 import { overlayPaddingReset } from "../Layout/padding.stylex.js";
 import { LayerDepthProvider } from "../Layer/LayerDepthContext.js";
 import { useLayerDismissal } from "../Layer/useLayerDismissal.js";
 import { useTranslator } from "../i18n/index.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { isRtlElement } from "../hooks/isRtlElement.js";
 /**
  * Media type for lightbox items.
  */
@@ -53,7 +56,7 @@ const styles = {
     kVAEAm: "xixxii4",
     kpwlN0: "x10a8y8t",
     kzqmXN: "xn9wirt",
-    kZKoxP: "x1dr59a3",
+    kZKoxP: "x1gvbg2u",
     ks0D6T: "x1x1rfll",
     kskxy: "x7ab17h",
     kogj98: "x1ghz6dp",
@@ -157,7 +160,9 @@ const KEYBOARD_PAN_OFFSETS = {
  * A fullscreen overlay for viewing images at full resolution.
  *
  * Supports single image and gallery modes. In gallery mode, provides
- * prev/next navigation via buttons and arrow keys. Optionally supports
+ * prev/next navigation via buttons and arrow keys; the arrow keys follow
+ * the writing direction (in RTL, ArrowLeft goes to the next item, like the
+ * Next button on the left). Optionally supports
  * zoom (double-click, Enter/Space on the image, or `+`/`-` to toggle 2x)
  * and pan (drag or arrow keys when zoomed; arrows navigate the gallery
  * when not zoomed).
@@ -298,10 +303,12 @@ export function Lightbox({
     }) : t('@astryx.lightbox.imagePosition', position));
   }, [index, isOpen, announce, mediaArray, t]);
 
-  // Open/close dialog
+  // Open/close dialog. The dialog renders only with an item, so a viewer
+  // opened before its first item arrives opens when that item does.
+  const hasItem = currentItem != null;
   useIsomorphicLayoutEffect(() => {
     const dialog = dialogRef.current;
-    if (!dialog) {
+    if (!dialog || !hasItem) {
       return;
     }
     if (isOpen && !dialog.open) {
@@ -313,7 +320,7 @@ export function Lightbox({
         triggerElementRef.current.focus();
       }
     }
-  }, [isOpen]);
+  }, [isOpen, hasItem]);
   const handleClose = useCallback(() => {
     onOpenChange(false);
   }, [onOpenChange]);
@@ -321,7 +328,10 @@ export function Lightbox({
     shouldDismissOnCloseRequest
   } = useLayerDismissal({
     isActive: isOpen,
-    onDismiss: handleClose
+    onDismiss: handleClose,
+    // The dialog's document is this layer's: rendered into an iframe or a
+    // Picture-in-Picture window, it ranks with the layers opened inside it.
+    getContainer: () => dialogRef.current
   });
 
   // The native `cancel` event is the browser's own close-watcher firing: an
@@ -389,6 +399,12 @@ export function Lightbox({
 
   // Keyboard navigation. While zoomed, arrows pan the image (matching common
   // lightbox conventions); when not zoomed they navigate the gallery.
+  //
+  // Gallery arrows follow the rendered direction, resolved at keydown: in RTL
+  // the Next button sits on the left, so ArrowLeft goes to the next item and
+  // ArrowRight to the previous one. Panning stays physical in both directions:
+  // the image itself is not mirrored, so ArrowRight still reveals what is to
+  // its right.
   const handleKeyDown = useCallback(e => {
     if (hasZoom && !isVideo) {
       if (e.key === '+' || e.key === '=') {
@@ -411,12 +427,14 @@ export function Lightbox({
         return;
       }
     }
-    if (e.key === 'ArrowLeft') {
-      e.preventDefault();
-      goToPrev();
-    } else if (e.key === 'ArrowRight') {
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
       e.preventDefault();
-      goToNext();
+      const towardEnd = e.key === 'ArrowRight' !== isRtlElement(dialogRef.current);
+      if (towardEnd) {
+        goToNext();
+      } else {
+        goToPrev();
+      }
     }
   }, [hasZoom, isVideo, zoom, applyZoom, goToPrev, goToNext]);
 
@@ -486,89 +504,93 @@ export function Lightbox({
     ...mergeProps(themeProps('lightbox'), stylex.props(layerTextReset.reset, layerStructureReset.reset, styles.dialog, overlayPaddingReset.reset, xstyle), className, style),
     ...props,
     children: /*#__PURE__*/_jsx(LayerDepthProvider, {
-      children: /*#__PURE__*/_jsx(LayerContentBoundary, {
-        children: /*#__PURE__*/_jsxs("div", {
-          ref: containerRef,
-          ...{
-            className: "x78zum5 xdt5ytf x6s0dn4 xl56j7k xh8yej3 x5yr21d x1n2onr6"
-          },
-          children: [/*#__PURE__*/_jsx(IconButton, {
-            icon: /*#__PURE__*/_jsx(Icon, {
-              icon: "close",
-              size: "sm",
-              color: "inherit"
-            }),
-            label: t('@astryx.lightbox.close'),
-            variant: "ghost",
-            onClick: handleClose,
-            xstyle: [styles.closeButton, styles.controlButton]
-          }), isGallery && /*#__PURE__*/_jsx(IconButton, {
-            icon: /*#__PURE__*/_jsx(Icon, {
-              icon: "chevronLeft",
-              size: "sm",
-              color: "inherit",
-              xstyle: rtlStyles.mirror
-            }),
-            label: t('@astryx.lightbox.previous'),
-            variant: "ghost",
-            isDisabled: !canPrev,
-            onClick: goToPrev,
-            xstyle: [styles.navButton, styles.navPrev, styles.controlButton]
-          }), /*#__PURE__*/_jsxs("div", {
+      children: /*#__PURE__*/_jsx(ModalAnnounceProvider, {
+        dialogRef: dialogRef,
+        isOpen: isOpen,
+        children: /*#__PURE__*/_jsx(LayerContentBoundary, {
+          children: /*#__PURE__*/_jsxs("div", {
+            ref: containerRef,
             ...{
-              className: "x78zum5 xdt5ytf x6s0dn4 x193iq5w xmz0i5r xb3r6kr"
+              className: "x78zum5 xdt5ytf x6s0dn4 xl56j7k xh8yej3 x5yr21d x1n2onr6"
             },
-            children: [/*#__PURE__*/_jsx("div", {
-              ref: imageWrapperRef
-              // The wrapper is a keyboard-operable zoom toggle when zoom is
-              // enabled: Enter/Space toggles, aria-pressed reflects state.
-              ,
-              role: isZoomTarget ? 'button' : undefined,
-              tabIndex: isZoomTarget ? 0 : undefined,
-              "aria-pressed": isZoomTarget ? isZoomed : undefined,
-              "aria-label": isZoomTarget ? t('@astryx.lightbox.zoom') : undefined,
-              ...stylex.props(styles.imageWrapper, isZoomTarget && focusOutlineStyles.focusVisible, !isVideo && hasZoom && !isZoomed && styles.imageWrapperZoomable, !isVideo && isZoomed && styles.imageWrapperZoomed, !isVideo && isDragging && styles.imageWrapperDragging),
-              onDoubleClick: isVideo ? undefined : handleDoubleClick,
-              onKeyDown: isZoomTarget ? handleImageKeyDown : undefined,
-              onPointerDown: isVideo ? undefined : handlePointerDown,
-              children: isVideo ? /*#__PURE__*/_jsx("video", {
-                src: currentItem.src,
-                "aria-label": currentItem.alt,
-                controls: true,
-                autoPlay: hasAutoPlay,
+            children: [/*#__PURE__*/_jsx(IconButton, {
+              icon: /*#__PURE__*/_jsx(Icon, {
+                icon: "close",
+                size: "sm",
+                color: "inherit"
+              }),
+              label: t('@astryx.lightbox.close'),
+              variant: "ghost",
+              onClick: handleClose,
+              xstyle: [styles.closeButton, styles.controlButton]
+            }), isGallery && /*#__PURE__*/_jsx(IconButton, {
+              icon: /*#__PURE__*/_jsx(Icon, {
+                icon: "chevronLeft",
+                size: "sm",
+                color: "inherit",
+                xstyle: rtlStyles.mirror
+              }),
+              label: t('@astryx.lightbox.previous'),
+              variant: "ghost",
+              isDisabled: !canPrev,
+              onClick: goToPrev,
+              xstyle: [styles.navButton, styles.navPrev, styles.controlButton]
+            }), /*#__PURE__*/_jsxs("div", {
+              ...{
+                className: "x78zum5 xdt5ytf x6s0dn4 x193iq5w xmz0i5r xb3r6kr"
+              },
+              children: [/*#__PURE__*/_jsx("div", {
+                ref: imageWrapperRef
+                // The wrapper is a keyboard-operable zoom toggle when zoom is
+                // enabled: Enter/Space toggles, aria-pressed reflects state.
+                ,
+                role: isZoomTarget ? 'button' : undefined,
+                tabIndex: isZoomTarget ? 0 : undefined,
+                "aria-pressed": isZoomTarget ? isZoomed : undefined,
+                "aria-label": isZoomTarget ? t('@astryx.lightbox.zoom') : undefined,
+                ...stylex.props(styles.imageWrapper, isZoomTarget && focusOutlineStyles.focusVisible, !isVideo && hasZoom && !isZoomed && styles.imageWrapperZoomable, !isVideo && isZoomed && styles.imageWrapperZoomed, !isVideo && isDragging && styles.imageWrapperDragging),
+                onDoubleClick: isVideo ? undefined : handleDoubleClick,
+                onKeyDown: isZoomTarget ? handleImageKeyDown : undefined,
+                onPointerDown: isVideo ? undefined : handlePointerDown,
+                children: isVideo ? /*#__PURE__*/_jsx("video", {
+                  src: currentItem.src,
+                  "aria-label": currentItem.alt,
+                  controls: true,
+                  autoPlay: hasAutoPlay,
+                  ...{
+                    className: "x193iq5w xmz0i5r x19kjcj4 x1a2a7pz"
+                  }
+                }) : /*#__PURE__*/_jsx("img", {
+                  src: currentItem.src,
+                  alt: currentItem.alt,
+                  draggable: false,
+                  ...stylex.props(styles.image, isDragging && styles.imageDragging, imageTransform != null && dynamicStyles.imageTransform(imageTransform))
+                })
+              }), currentItem.caption && /*#__PURE__*/_jsx("div", {
                 ...{
-                  className: "x193iq5w xmz0i5r x19kjcj4 x1a2a7pz"
-                }
-              }) : /*#__PURE__*/_jsx("img", {
-                src: currentItem.src,
-                alt: currentItem.alt,
-                draggable: false,
-                ...stylex.props(styles.image, isDragging && styles.imageDragging, imageTransform != null && dynamicStyles.imageTransform(imageTransform))
-              })
-            }), currentItem.caption && /*#__PURE__*/_jsx("div", {
+                  className: "x9e3rv5 x18juvz8 xf74fhv x2b8uid x1xye8es x18d9i69 xrrkdod xrlsmeg x2lah0s"
+                },
+                children: currentItem.caption
+              })]
+            }), isGallery && /*#__PURE__*/_jsx(IconButton, {
+              icon: /*#__PURE__*/_jsx(Icon, {
+                icon: "chevronRight",
+                size: "sm",
+                color: "inherit",
+                xstyle: rtlStyles.mirror
+              }),
+              label: t('@astryx.lightbox.next'),
+              variant: "ghost",
+              isDisabled: !canNext,
+              onClick: goToNext,
+              xstyle: [styles.navButton, styles.navNext, styles.controlButton]
+            }), isGallery && mediaArray.length > 1 && /*#__PURE__*/_jsxs("div", {
               ...{
-                className: "x9e3rv5 x18juvz8 xf74fhv x2b8uid x1xye8es x18d9i69 xrrkdod xrlsmeg x2lah0s"
+                className: "x10l6tqk xyx6v2t x1ybfrjj x9e3rv5 xjm74w1 xw6l6zx x1vjfegm"
               },
-              children: currentItem.caption
+              children: [index + 1, " / ", mediaArray.length]
             })]
-          }), isGallery && /*#__PURE__*/_jsx(IconButton, {
-            icon: /*#__PURE__*/_jsx(Icon, {
-              icon: "chevronRight",
-              size: "sm",
-              color: "inherit",
-              xstyle: rtlStyles.mirror
-            }),
-            label: t('@astryx.lightbox.next'),
-            variant: "ghost",
-            isDisabled: !canNext,
-            onClick: goToNext,
-            xstyle: [styles.navButton, styles.navNext, styles.controlButton]
-          }), isGallery && mediaArray.length > 1 && /*#__PURE__*/_jsxs("div", {
-            ...{
-              className: "x10l6tqk xyx6v2t x1ybfrjj x9e3rv5 xjm74w1 xw6l6zx x1vjfegm"
-            },
-            children: [index + 1, " / ", mediaArray.length]
-          })]
+          })
         })
       })
     })

package/dist/Lightbox/LightboxKeyboard.a11y.browser.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=LightboxKeyboard.a11y.browser.spec.d.ts.map

package/dist/Lightbox/LightboxKeyboard.a11y.browser.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LightboxKeyboard.a11y.browser.spec.d.ts","sourceRoot":"","sources":["../../src/Lightbox/LightboxKeyboard.a11y.browser.spec.ts"],"names":[],"mappings":""}

package/dist/Lightbox/LightboxKeyboard.a11y.browser.spec.js

@@ -0,0 +1,78 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y always
+
+/**
+ * @file LightboxKeyboard.a11y.browser.spec.ts
+ * @input Built Lightbox stories (LTR and the RTL story global) and real
+ *   Chromium/WebKit keyboard input
+ * @output Browser evidence that the gallery's Left/Right arrow keys move in
+ *   the direction of the matching on-screen button, in both directions
+ * @position Cross-browser proof for Lightbox's direction-aware gallery keys
+ *   (design:bidirectionality DR6, DR11)
+ */
+
+import { expect, test } from '@playwright/test';
+import { DEFAULT_STORYBOOK_DIR, serveStorybook } from '@astryxdesign/a11y-spec/storybook';
+let storybook;
+test.beforeAll(async () => {
+  storybook = await serveStorybook(process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR);
+});
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+// Opens the gallery story at its second photo ("2 / 4").
+async function openGallery(page, direction) {
+  // The story's photos are remote; the keys do not need them to load.
+  await page.route(/picsum\.photos/, async route => route.abort());
+  await page.goto(`${storybook.origin}/iframe.html?id=core-lightbox--gallery&viewMode=story${direction === 'rtl' ? '&globals=direction:rtl' : ''}`);
+  await page.getByRole('img', {
+    name: 'Mountain lake'
+  }).click();
+  const dialog = page.getByRole('dialog');
+  await expect(dialog).toBeVisible();
+  await expect(dialog).toContainText('2 / 4');
+  const previous = page.getByRole('button', {
+    name: 'Previous'
+  });
+  const next = page.getByRole('button', {
+    name: 'Next'
+  });
+  return {
+    dialog,
+    previous,
+    next
+  };
+}
+async function centerX(locator) {
+  const box = await locator.boundingBox();
+  if (box == null) {
+    throw new Error('no box');
+  }
+  return box.x + box.width / 2;
+}
+for (const direction of ['ltr', 'rtl']) {
+  test(`${direction}: each arrow key moves toward the button on its side`, async ({
+    page
+  }) => {
+    const {
+      dialog,
+      previous,
+      next
+    } = await openGallery(page, direction);
+    const nextIsOnTheLeft = (await centerX(next)) < (await centerX(previous));
+    // The buttons swap sides in RTL; the keys must follow them.
+    expect(nextIsOnTheLeft).toBe(direction === 'rtl');
+    const towardNext = nextIsOnTheLeft ? 'ArrowLeft' : 'ArrowRight';
+    const towardPrevious = nextIsOnTheLeft ? 'ArrowRight' : 'ArrowLeft';
+    await page.keyboard.press(towardNext);
+    await expect(dialog).toContainText('3 / 4');
+    await page.keyboard.press(towardPrevious);
+    await page.keyboard.press(towardPrevious);
+    await expect(dialog).toContainText('1 / 4');
+    // At the start of the range the key toward Previous does nothing, like
+    // the disabled button it matches.
+    await page.keyboard.press(towardPrevious);
+    await expect(dialog).toContainText('1 / 4');
+  });
+}

package/dist/Lightbox/LightboxViewport.a11y.browser.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=LightboxViewport.a11y.browser.spec.d.ts.map

package/dist/Lightbox/LightboxViewport.a11y.browser.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LightboxViewport.a11y.browser.spec.d.ts","sourceRoot":"","sources":["../../src/Lightbox/LightboxViewport.a11y.browser.spec.ts"],"names":[],"mappings":""}

package/dist/Lightbox/LightboxViewport.a11y.browser.spec.js

@@ -0,0 +1,65 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y always
+
+/**
+ * @file LightboxViewport.a11y.browser.spec.ts
+ * @input The built Lightbox default story and the stylesheet rules the open
+ *   viewer matches, in Chromium and WebKit
+ * @output Browser evidence that the viewer is as tall as the dynamic viewport,
+ *   so a mobile browser's toolbar never covers its bottom
+ * @position Cross-browser proof for Lightbox's full-screen sizing
+ */
+
+import { expect, test } from '@playwright/test';
+import { DEFAULT_STORYBOOK_DIR, serveStorybook } from '@astryxdesign/a11y-spec/storybook';
+let storybook;
+test.beforeAll(async () => {
+  storybook = await serveStorybook(process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR);
+});
+test.afterAll(async () => {
+  await storybook?.close();
+});
+test('the viewer is as tall as the dynamic viewport, so a toolbar never covers its bottom', async ({
+  page
+}) => {
+  // The story's photo is remote; the sizing does not need it to load.
+  await page.route(/picsum\.photos/, async route => route.abort());
+  await page.goto(`${storybook.origin}/iframe.html?id=core-lightbox--default&viewMode=story`);
+  await page.getByRole('button', {
+    name: 'Open lightbox'
+  }).click();
+  const dialog = page.getByRole('dialog');
+  await expect(dialog).toBeVisible();
+  // Mobile Safari's 100vh is the large viewport, measured with its toolbars
+  // retracted, so a viewer that tall runs under the bottom toolbar and hides a
+  // gallery's caption (iOS 26.2, iPhone 17 Pro: 714 pt visible, the caption
+  // at 718–754). The dynamic viewport is the visible height. No desktop or
+  // emulated engine shrinks it, so this reads the height the viewer declares.
+  const declared = await dialog.evaluate(element => {
+    const heights = [];
+    const walk = rules => {
+      for (const rule of Array.from(rules)) {
+        if (rule instanceof CSSStyleRule) {
+          if (rule.style.height !== '' && element.matches(rule.selectorText)) {
+            heights.push(rule.style.height);
+          }
+        } else if ('cssRules' in rule) {
+          walk(rule.cssRules);
+        }
+      }
+    };
+    for (const sheet of Array.from(document.styleSheets)) {
+      try {
+        walk(sheet.cssRules);
+      } catch {
+        // A cross-origin stylesheet's rules are unreadable and not ours.
+      }
+    }
+    return {
+      heights,
+      supported: CSS.supports('height', '100dvh')
+    };
+  });
+  expect(declared.supported).toBe(true);
+  expect(declared.heights).toContain('100dvh');
+});

package/dist/Lightbox/index.d.ts

@@ -4,8 +4,8 @@
  * @output Exports Lightbox, useLightbox, and all related types
  * @position Component entry point; re-exported by /packages/core/src/index.ts
  */
-export { Lightbox } from './Lightbox';
-export type { LightboxProps, LightboxMedia, LightboxMediaType, } from './Lightbox';
-export { useLightbox } from './useLightbox';
-export type { UseLightboxOptions, UseLightboxReturn, } from './useLightbox';
+export { Lightbox } from './Lightbox.js';
+export type { LightboxProps, LightboxMedia, LightboxMediaType, } from './Lightbox.js';
+export { useLightbox } from './useLightbox.js';
+export type { UseLightboxOptions, UseLightboxReturn, } from './useLightbox.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Lightbox/useLightbox.d.ts

@@ -15,7 +15,7 @@
  * ```
  */
 import { type ReactNode } from 'react';
-import { type LightboxProps, type LightboxMedia } from './Lightbox';
+import { type LightboxProps, type LightboxMedia } from './Lightbox.js';
 type LightboxOptions = Omit<LightboxProps, 'isOpen' | 'onOpenChange' | 'media' | 'index' | 'defaultIndex' | 'onIndexChange'>;
 export interface UseLightboxOptions extends LightboxOptions {
     /** Media to display in the lightbox. */

package/dist/Link/Link.d.ts

@@ -12,9 +12,9 @@
  * - /packages/cli/assets/templates/blocks/components/Link/ (showcase blocks)
  */
 import type { ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import type { TextType, TextSize, TextColor, TextWeight, TextDisplay } from '../theme/types';
-import type { LinkComponentType } from './types';
+import type { BaseProps } from '../BaseProps.js';
+import type { TextType, TextSize, TextColor, TextWeight, TextDisplay } from '../theme/types.js';
+import type { LinkComponentType } from './types.js';
 export interface LinkProps extends BaseProps<HTMLAnchorElement | HTMLButtonElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;

package/dist/Link/LinkContext.d.ts

@@ -1,4 +1,4 @@
-import type { LinkComponentType } from './types';
+import type { LinkComponentType } from './types.js';
 /**
  * Context value for the link provider.
  */

package/dist/Link/LinkProvider.d.ts

@@ -22,7 +22,7 @@
  * - /packages/cli/assets/templates/blocks/components/LinkProvider/ (example blocks)
  */
 import { type ReactNode } from 'react';
-import type { LinkComponentType } from './types';
+import type { LinkComponentType } from './types.js';
 export interface LinkProviderProps {
     /**
      * The component to use for all link elements in the subtree.

package/dist/Link/index.d.ts

@@ -6,12 +6,12 @@
  *
  * SYNC: When modified, update this header and /packages/core/src/Link/Link.doc.mjs
  */
-export { Link } from './Link';
-export type { LinkProps } from './Link';
-export { LinkProvider } from './LinkProvider';
-export type { LinkProviderProps } from './LinkProvider';
-export { useLinkComponent } from './useLinkComponent';
-export type { LinkComponentType } from './types';
-export { useLinkify } from './useLinkify';
-export type { LinkifyPattern, UseLinkifyOptions } from './useLinkify';
+export { Link } from './Link.js';
+export type { LinkProps } from './Link.js';
+export { LinkProvider } from './LinkProvider.js';
+export type { LinkProviderProps } from './LinkProvider.js';
+export { useLinkComponent } from './useLinkComponent.js';
+export type { LinkComponentType } from './types.js';
+export { useLinkify } from './useLinkify.js';
+export type { LinkifyPattern, UseLinkifyOptions } from './useLinkify.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Link/useLinkComponent.d.ts

@@ -1,4 +1,4 @@
-import type { LinkComponentType } from './types';
+import type { LinkComponentType } from './types.js';
 /**
  * Resolve `as`, then LinkProvider, then a native anchor. Both destination props
  * are checked before rendering; accepted structured values retain identity.

package/dist/List/List.d.ts

@@ -14,9 +14,9 @@
  * - /packages/cli/assets/templates/blocks/components/List/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import { type ListDensity, type ListEdge, type ListMarkerStyle } from './ListContext';
-export { type ListDensity, type ListEdge, type ListMarkerStyle as ListStyle, } from './ListContext';
+import type { BaseProps } from '../BaseProps.js';
+import { type ListDensity, type ListEdge, type ListMarkerStyle } from './ListContext.js';
+export { type ListDensity, type ListEdge, type ListMarkerStyle as ListStyle, } from './ListContext.js';
 export interface ListProps extends BaseProps<HTMLUListElement | HTMLOListElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLUListElement | HTMLOListElement>;

package/dist/List/ListItem.d.ts

@@ -18,8 +18,8 @@
  * - /packages/cli/assets/templates/blocks/components/List/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import type { ItemAlign, ItemSwipeActions, ItemSwipeBehavior } from '../Item';
+import type { BaseProps } from '../BaseProps.js';
+import type { ItemAlign, ItemSwipeActions, ItemSwipeBehavior } from '../Item/index.js';
 export interface ListItemProps extends BaseProps<HTMLLIElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLLIElement>;

package/dist/List/index.d.ts

@@ -6,8 +6,8 @@
  *
  * SYNC: When modified, update /packages/core/src/List/List.doc.mjs
  */
-export { List } from './List';
-export type { ListProps, ListStyle, ListDensity, ListEdge } from './List';
-export { ListItem } from './ListItem';
-export type { ListItemProps } from './ListItem';
+export { List } from './List.js';
+export type { ListProps, ListStyle, ListDensity, ListEdge } from './List.js';
+export { ListItem } from './ListItem.js';
+export type { ListItemProps } from './ListItem.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Markdown/Markdown.d.ts

@@ -1,8 +1,9 @@
 import type React from 'react';
-import type { TextDisplay } from '../theme/types';
-import type { BaseProps } from '../BaseProps';
-import type { CitationSource } from '../Citation/Citation';
-import type { MarkdownPluginEntry } from './plugins/protocol';
+import type { TextDisplay } from '../theme/types.js';
+import type { CodeLanguage } from '../CodeBlock/grammar.js';
+import type { BaseProps } from '../BaseProps.js';
+import type { CitationSource } from '../Citation/Citation.js';
+import type { MarkdownPluginEntry } from './plugins/protocol.js';
 /**
  * A plugin that transforms text patterns into custom React elements
  * inside Markdown. Applied to parsed text nodes only — code blocks,
@@ -177,6 +178,15 @@ export interface MarkdownProps<Plugins extends ReadonlyArray<MarkdownPluginEntry
      * literal text.
      */
     autolink?: 'gfm';
+    /**
+     * CodeBlock language values a fence may name: each one imported on its
+     * own, such as `graphql` from `@astryxdesign/core/CodeBlock/languages/graphql`,
+     * or made with `createCodeLanguage`. A fence whose language word is one of
+     * a listed value's identifiers renders with that value, ahead of a built-in
+     * with the same identifier; a later entry wins. Without it, fences render
+     * as they do today.
+     */
+    codeLanguages?: ReadonlyArray<CodeLanguage>;
 }
 /**
  * Renders a markdown string as Astryx components. Supports streaming with
@@ -189,7 +199,7 @@ export interface MarkdownProps<Plugins extends ReadonlyArray<MarkdownPluginEntry
  * </Markdown>
  * ```
  */
-export declare function Markdown<const Plugins extends ReadonlyArray<MarkdownPluginEntry> = readonly []>({ ref, children, display, density, headingLevelStart, isStreaming, onLinkClick, sources, citationStyle, contentWidth, contentAlign, components, plugins, inlinePlugins, autolink, xstyle, className, style, id: rootId, 'data-testid': testId, ...props }: MarkdownProps<Plugins>): React.ReactElement;
+export declare function Markdown<const Plugins extends ReadonlyArray<MarkdownPluginEntry> = readonly []>({ ref, children, display, density, headingLevelStart, isStreaming, onLinkClick, sources, citationStyle, contentWidth, contentAlign, components, plugins, inlinePlugins, autolink, codeLanguages: codeLanguagesProp, xstyle, className, style, id: rootId, 'data-testid': testId, ...props }: MarkdownProps<Plugins>): React.ReactElement;
 export declare namespace Markdown {
     var displayName: string;
 }

package/dist/Markdown/Markdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../src/Markdown/Markdown.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../src/Markdown/Markdown.tsx"],"names":[],"mappings":"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"}

package/dist/Markdown/Markdown.fr23.bench.js

@@ -16,7 +16,9 @@
  * then nine alternating paired rounds averaging 20 iterations a side,
  * reported as the median of the nine paired ratios — against the omitted
  * baseline, for a stable list and a recreated equivalent one. Each ratio
- * comes from one sample, never a selection by the fastest baseline.
+ * comes from one sample, never a selection by the fastest baseline. Windows
+ * are timed on the main thread's CPU clock, so V8's background threads do not
+ * bill their work to whichever side happens to be running.
  *
  * The harness retries a fresh process only when the A/A control is invalid.
  * A helper-overhead failure is never retried to obtain a passing sample.