@astryxdesign/core 0.2.0 → 0.3.0-canary.077087f

package/dist/Kbd/Kbd.js

@@ -10,7 +10,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Kbd/index.ts
- * - /packages/cli/templates/blocks/components/Kbd/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Kbd/ (showcase blocks)
  */
 import React, { useSyncExternalStore } from 'react';
 import * as stylex from '@stylexjs/stylex';

package/dist/Layout/Layout.d.ts

@@ -10,7 +10,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Layout/Layout.doc.mjs
  * - /apps/storybook/stories/Layout.stories.tsx
- * - /packages/cli/templates/blocks/components/Layout/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Layout/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';

package/dist/Layout/Layout.js

@@ -14,7 +14,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Layout/Layout.doc.mjs
  * - /apps/storybook/stories/Layout.stories.tsx
- * - /packages/cli/templates/blocks/components/Layout/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Layout/ (showcase blocks)
  */
 import { useMemo } from 'react';
 import * as stylex from '@stylexjs/stylex';

package/dist/Layout/LayoutContent.d.ts

@@ -8,7 +8,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Layout/Layout.doc.mjs
  * - /apps/storybook/stories/Layout.stories.tsx
- * - /packages/cli/templates/blocks/components/Layout/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Layout/ (showcase blocks)
  */
 import type { AriaRole, ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';

package/dist/Layout/LayoutContent.js

@@ -12,7 +12,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Layout/Layout.doc.mjs
  * - /apps/storybook/stories/Layout.stories.tsx
- * - /packages/cli/templates/blocks/components/Layout/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Layout/ (showcase blocks)
  */
 import { use } from 'react';
 import * as stylex from '@stylexjs/stylex';

package/dist/Layout/LayoutFooter.d.ts

@@ -8,7 +8,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Layout/Layout.doc.mjs
  * - /apps/storybook/stories/Layout.stories.tsx
- * - /packages/cli/templates/blocks/components/Layout/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Layout/ (showcase blocks)
  */
 import type { AriaRole, ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';

package/dist/Layout/LayoutFooter.js

@@ -12,7 +12,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Layout/Layout.doc.mjs
  * - /apps/storybook/stories/Layout.stories.tsx
- * - /packages/cli/templates/blocks/components/Layout/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Layout/ (showcase blocks)
  */
 import { use } from 'react';
 import * as stylex from '@stylexjs/stylex';

package/dist/Layout/LayoutHeader.d.ts

@@ -8,7 +8,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Layout/Layout.doc.mjs
  * - /apps/storybook/stories/Layout.stories.tsx
- * - /packages/cli/templates/blocks/components/Layout/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Layout/ (showcase blocks)
  */
 import type { AriaRole, ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';

package/dist/Layout/LayoutHeader.js

@@ -12,7 +12,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Layout/Layout.doc.mjs
  * - /apps/storybook/stories/Layout.stories.tsx
- * - /packages/cli/templates/blocks/components/Layout/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Layout/ (showcase blocks)
  */
 import { use } from 'react';
 import * as stylex from '@stylexjs/stylex';

package/dist/Layout/LayoutPanel.d.ts

@@ -8,7 +8,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Layout/Layout.doc.mjs
  * - /apps/storybook/stories/Layout.stories.tsx
- * - /packages/cli/templates/blocks/components/Layout/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Layout/ (showcase blocks)
  */
 import type { AriaRole, ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';

package/dist/Layout/LayoutPanel.js

@@ -12,7 +12,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Layout/Layout.doc.mjs
  * - /apps/storybook/stories/Layout.stories.tsx
- * - /packages/cli/templates/blocks/components/Layout/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Layout/ (showcase blocks)
  */
 import { use } from 'react';
 import * as stylex from '@stylexjs/stylex';

package/dist/Lightbox/Lightbox.d.ts

@@ -9,7 +9,7 @@
  * - /packages/core/src/Lightbox/Lightbox.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/Lightbox/index.ts (exports if types change)
  * - /apps/storybook/stories/Lightbox.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Lightbox/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Lightbox/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
@@ -65,8 +65,8 @@ export interface LightboxProps extends BaseProps<HTMLDialogElement> {
      */
     onIndexChange?: (index: number) => void;
     /**
-     * Enable zoom on double-click (images only).
-     * When zoomed, drag to pan.
+     * Enable zoom on double-click, or Enter/Space/`+`/`-` via keyboard
+     * (images only). When zoomed, drag or use arrow keys to pan.
      * @default false
      */
     hasZoom?: boolean;
@@ -81,7 +81,9 @@ export interface LightboxProps extends BaseProps<HTMLDialogElement> {
  *
  * Supports single image and gallery modes. In gallery mode, provides
  * prev/next navigation via buttons and arrow keys. Optionally supports
- * zoom (double-click to toggle 2x) and pan (drag when zoomed).
+ * 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).
  *
  * Uses the native `<dialog>` element with `showModal()` for focus
  * trapping and top-layer placement. Dismiss via Escape, close button,

package/dist/Lightbox/Lightbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAqID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,sCA4Uf;yBA5Ve,QAAQ"}
+{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAkKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,sCAyYf;yBAzZe,QAAQ"}

package/dist/Lightbox/Lightbox.js

@@ -13,7 +13,7 @@
  * - /packages/core/src/Lightbox/Lightbox.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/Lightbox/index.ts (exports if types change)
  * - /apps/storybook/stories/Lightbox.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Lightbox/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Lightbox/ (showcase blocks)
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -71,6 +71,28 @@ const styles = {
     k1ekBW: "x13b0p5u",
     $$css: true
   },
+  closeButton: {
+    kVAEAm: "x10l6tqk",
+    k87sOh: "xyx6v2t",
+    kt4wiu: "x1mcfs9z",
+    kY2c9j: "x1vjfegm",
+    $$css: true
+  },
+  navButton: {
+    kVAEAm: "x10l6tqk",
+    k87sOh: "xwa60dl",
+    kIY38u: "x3sa99s",
+    kY2c9j: "x1vjfegm",
+    $$css: true
+  },
+  navPrev: {
+    kLqNvP: "x1ybfrjj",
+    $$css: true
+  },
+  navNext: {
+    kt4wiu: "x1mcfs9z",
+    $$css: true
+  },
   controlButton: {
     kMwMTN: "x9e3rv5",
     $$css: true
@@ -85,12 +107,28 @@ const dynamicStyles = {
   }]
 };
 
+/**
+ * Pan distance (px) per arrow-key press while zoomed. Offsets move the
+ * viewport in the arrow's direction — pressing ArrowRight reveals content to
+ * the right, so the image itself shifts left (negative x), matching how
+ * scrolling and pointer-drag panning feel.
+ */
+const KEYBOARD_PAN_STEP = 50;
+const KEYBOARD_PAN_OFFSETS = {
+  ArrowLeft: [KEYBOARD_PAN_STEP, 0],
+  ArrowRight: [-KEYBOARD_PAN_STEP, 0],
+  ArrowUp: [0, KEYBOARD_PAN_STEP],
+  ArrowDown: [0, -KEYBOARD_PAN_STEP]
+};
+
 /**
  * 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
- * zoom (double-click to toggle 2x) and pan (drag when zoomed).
+ * 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).
  *
  * Uses the native `<dialog>` element with `showModal()` for focus
  * trapping and top-layer placement. Dismiss via Escape, close button,
@@ -136,6 +174,7 @@ export function Lightbox({
 }) {
   const t = useTranslator();
   const dialogRef = useRef(null);
+  const containerRef = useRef(null);
   const imageWrapperRef = useRef(null);
   const triggerElementRef = useRef(null);
 
@@ -237,9 +276,18 @@ export function Lightbox({
     handleClose();
   }, [handleClose]);
 
-  // Backdrop click
+  // Backdrop click. The layout container fills the whole transparent dialog,
+  // so clicks on the visual backdrop (the dark area around the media) land on
+  // the container, never on the dialog element itself — treat both as the
+  // backdrop. A pan drag that ends over the backdrop still fires a click on
+  // the common ancestor; ignore it so releasing a drag doesn't dismiss.
+  const didDragRef = useRef(false);
   const handleBackdropClick = useCallback(e => {
-    if (e.target === e.currentTarget) {
+    if (didDragRef.current) {
+      didDragRef.current = false;
+      return;
+    }
+    if (e.target === e.currentTarget || e.target === containerRef.current) {
       handleClose();
     }
   }, [handleClose]);
@@ -256,8 +304,49 @@ export function Lightbox({
     }
   }, [canNext, index, setIndex]);
 
-  // Keyboard navigation
+  // Zoom: double-click, Enter/Space on the image, or +/- keys toggle 1x ↔ 2x.
+  // Zoom changes are silent to assistive tech (only the transform changes), so
+  // mirror them in the polite live region, including a hint that arrow keys
+  // pan while zoomed.
+  const applyZoom = useCallback(next => {
+    if (!hasZoom || isVideo || next === zoom) {
+      return;
+    }
+    setZoom(next);
+    setPan({
+      x: 0,
+      y: 0
+    });
+    announce(next > 1 ? t('@astryx.lightbox.zoomedIn') : t('@astryx.lightbox.zoomedOut'));
+  }, [hasZoom, isVideo, zoom, announce, t]);
+  const handleDoubleClick = useCallback(() => {
+    applyZoom(zoom === 1 ? 2 : 1);
+  }, [applyZoom, zoom]);
+
+  // Keyboard navigation. While zoomed, arrows pan the image (matching common
+  // lightbox conventions); when not zoomed they navigate the gallery.
   const handleKeyDown = useCallback(e => {
+    if (hasZoom && !isVideo) {
+      if (e.key === '+' || e.key === '=') {
+        e.preventDefault();
+        applyZoom(2);
+        return;
+      }
+      if (e.key === '-') {
+        e.preventDefault();
+        applyZoom(1);
+        return;
+      }
+      if (zoom > 1 && KEYBOARD_PAN_OFFSETS[e.key] !== undefined) {
+        e.preventDefault();
+        const [dx, dy] = KEYBOARD_PAN_OFFSETS[e.key];
+        setPan(prev => ({
+          x: prev.x + dx,
+          y: prev.y + dy
+        }));
+        return;
+      }
+    }
     if (e.key === 'ArrowLeft') {
       e.preventDefault();
       goToPrev();
@@ -265,27 +354,15 @@ export function Lightbox({
       e.preventDefault();
       goToNext();
     }
-  }, [goToPrev, goToNext]);
+  }, [hasZoom, isVideo, zoom, applyZoom, goToPrev, goToNext]);
 
-  // Zoom: double-click toggles 1x ↔ 2x
-  const handleDoubleClick = useCallback(() => {
-    if (!hasZoom) {
-      return;
-    }
-    if (zoom === 1) {
-      setZoom(2);
-      setPan({
-        x: 0,
-        y: 0
-      });
-    } else {
-      setZoom(1);
-      setPan({
-        x: 0,
-        y: 0
-      });
+  // Enter/Space on the focused image wrapper (role="button") toggles zoom.
+  const handleImageKeyDown = useCallback(e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleDoubleClick();
     }
-  }, [hasZoom, zoom]);
+  }, [handleDoubleClick]);
 
   // Pan: mouse drag when zoomed
   const handlePointerDown = useCallback(e => {
@@ -293,6 +370,7 @@ export function Lightbox({
       return;
     }
     setIsDragging(true);
+    didDragRef.current = false;
     dragStartRef.current = {
       x: e.clientX,
       y: e.clientY,
@@ -305,6 +383,7 @@ export function Lightbox({
       return;
     }
     const handlePointerMove = e => {
+      didDragRef.current = true;
       const dx = e.clientX - dragStartRef.current.x;
       const dy = e.clientY - dragStartRef.current.y;
       setPan({
@@ -323,6 +402,7 @@ export function Lightbox({
     };
   }, [isDragging]);
   const isZoomed = zoom > 1;
+  const isZoomTarget = hasZoom && !isVideo;
   const imageTransform = zoom === 1 ? null : `scale(${zoom}) translate(${pan.x / zoom}px, ${pan.y / zoom}px)`;
   if (!currentItem) {
     return null;
@@ -342,76 +422,97 @@ export function Lightbox({
     ...mergeProps(themeProps('lightbox'), stylex.props(styles.dialog, xstyle), className, style),
     ...props,
     children: /*#__PURE__*/_jsxs("div", {
+      ref: containerRef,
       ...{
         className: "x78zum5 xdt5ytf x6s0dn4 xl56j7k xh8yej3 x5yr21d x1n2onr6"
       },
-      children: [/*#__PURE__*/_jsx("div", {
-        ...{
-          className: "x10l6tqk xyx6v2t x1mcfs9z x1vjfegm"
-        },
-        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.controlButton
-        })
-      }), isGallery && /*#__PURE__*/_jsx("div", {
-        ...{
-          className: "x10l6tqk xwa60dl x1cb1t30 x1vjfegm x1ybfrjj"
-        },
-        children: /*#__PURE__*/_jsx(IconButton, {
-          icon: /*#__PURE__*/_jsx("span", {
-            ...stylex.props(rtlStyles.mirror),
-            children: /*#__PURE__*/_jsx(Icon, {
-              icon: "chevronLeft",
-              size: "sm",
-              color: "inherit"
-            })
-          }),
-          label: t('@astryx.lightbox.previous'),
-          variant: "ghost",
-          isDisabled: !canPrev,
-          onClick: goToPrev,
-          xstyle: styles.controlButton
-        })
+      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,
+          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,
           ...{
             0: {
               className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr xt0e3qv x87ps6o x2lwn1j"
             },
+            8: {
+              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr xt0e3qv x87ps6o x2lwn1j x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
+            },
             4: {
               className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1huxd7x x2dt3px"
             },
+            12: {
+              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x1huxd7x x2dt3px"
+            },
             2: {
               className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1jm3nie"
             },
+            10: {
+              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x1jm3nie"
+            },
             6: {
               className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1jm3nie"
             },
+            14: {
+              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x1jm3nie"
+            },
             1: {
               className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j xi9pz9s"
             },
+            9: {
+              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xi9pz9s"
+            },
             5: {
               className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j xi9pz9s"
             },
+            13: {
+              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xi9pz9s"
+            },
             3: {
               className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j xi9pz9s"
             },
+            11: {
+              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xi9pz9s"
+            },
             7: {
               className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j xi9pz9s"
+            },
+            15: {
+              className: "x78zum5 x6s0dn4 xl56j7k xb3r6kr x87ps6o x2lwn1j x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xi9pz9s"
             }
-          }[!!(!isVideo && hasZoom && !isZoomed) << 2 | !!(!isVideo && isZoomed) << 1 | !!(!isVideo && isDragging) << 0],
+          }[!!isZoomTarget << 3 | !!(!isVideo && hasZoom && !isZoomed) << 2 | !!(!isVideo && isZoomed) << 1 | !!(!isVideo && isDragging) << 0],
           onDoubleClick: isVideo ? undefined : handleDoubleClick,
+          onKeyDown: isZoomTarget ? handleImageKeyDown : undefined,
           onPointerDown: isVideo ? undefined : handlePointerDown,
           children: isVideo ? /*#__PURE__*/_jsx("video", {
             src: currentItem.src,
@@ -433,25 +534,18 @@ export function Lightbox({
           },
           children: currentItem.caption
         })]
-      }), isGallery && /*#__PURE__*/_jsx("div", {
-        ...{
-          className: "x10l6tqk xwa60dl x1cb1t30 x1vjfegm x1mcfs9z"
-        },
-        children: /*#__PURE__*/_jsx(IconButton, {
-          icon: /*#__PURE__*/_jsx("span", {
-            ...stylex.props(rtlStyles.mirror),
-            children: /*#__PURE__*/_jsx(Icon, {
-              icon: "chevronRight",
-              size: "sm",
-              color: "inherit"
-            })
-          }),
-          label: t('@astryx.lightbox.next'),
-          variant: "ghost",
-          isDisabled: !canNext,
-          onClick: goToNext,
-          xstyle: styles.controlButton
-        })
+      }), 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"

package/dist/Link/Link.d.ts

@@ -9,7 +9,7 @@
  * - /packages/core/src/Link/Link.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/Link/index.ts (exports if types change)
  * - /apps/storybook/stories/Link.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Link/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Link/ (showcase blocks)
  */
 import type { ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';

package/dist/Link/Link.js

@@ -13,7 +13,7 @@
  * - /packages/core/src/Link/Link.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/Link/index.ts (exports if types change)
  * - /apps/storybook/stories/Link.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Link/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Link/ (showcase blocks)
  */
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";

package/dist/Link/LinkProvider.d.ts

@@ -18,8 +18,8 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Link/index.ts
  * - /packages/core/src/Link/Link.doc.mjs
- * - /packages/cli/templates/blocks/components/Link/ (showcase blocks)
- * - /packages/cli/templates/blocks/components/LinkProvider/ (example blocks)
+ * - /packages/cli/assets/templates/blocks/components/Link/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/LinkProvider/ (example blocks)
  */
 import { type ReactNode } from 'react';
 import type { LinkComponentType } from './types';

package/dist/Link/LinkProvider.js

@@ -22,8 +22,8 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Link/index.ts
  * - /packages/core/src/Link/Link.doc.mjs
- * - /packages/cli/templates/blocks/components/Link/ (showcase blocks)
- * - /packages/cli/templates/blocks/components/LinkProvider/ (example blocks)
+ * - /packages/cli/assets/templates/blocks/components/Link/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/LinkProvider/ (example blocks)
  */
 import { useMemo } from 'react';
 import { LinkContext } from "./LinkContext.js";

package/dist/List/List.d.ts

@@ -9,7 +9,7 @@
  * - /packages/core/src/List/List.test.tsx
  * - /packages/core/src/List/index.ts
  * - /apps/storybook/stories/List.stories.tsx
- * - /packages/cli/templates/blocks/components/List/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/List/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';

package/dist/List/List.js

@@ -13,7 +13,7 @@
  * - /packages/core/src/List/List.test.tsx
  * - /packages/core/src/List/index.ts
  * - /apps/storybook/stories/List.stories.tsx
- * - /packages/cli/templates/blocks/components/List/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/List/ (showcase blocks)
  */
 import { useId, useMemo } from 'react';
 import * as stylex from '@stylexjs/stylex';

package/dist/List/ListItem.d.ts

@@ -12,7 +12,7 @@
  * - /packages/core/src/List/List.test.tsx
  * - /packages/core/src/List/index.ts
  * - /apps/storybook/stories/List.stories.tsx
- * - /packages/cli/templates/blocks/components/List/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/List/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
@@ -49,6 +49,16 @@ export interface ListItemProps extends BaseProps<HTMLLIElement> {
      * Automatically enables hover/press styles when provided.
      */
     onClick?: (e: React.MouseEvent) => void;
+    /**
+     * Ref to a nested control inside the item (e.g. a checkbox in
+     * `startContent`) that already provides the item's keyboard access and
+     * action. When set, the item becomes an enlarged click/tap target that
+     * delegates surface clicks to that control via the `useClickableContainer`
+     * pattern: it renders no invisible button/anchor, so the row adds no second
+     * tab stop (WCAG 4.1.2 — one focusable control per option). Mutually
+     * exclusive with `onClick`/`href` — when set those are ignored.
+     */
+    interactiveRef?: React.RefObject<HTMLElement | null>;
     /**
      * URL for link items. Renders an invisible anchor element.
      * Automatically enables hover/press styles when provided.
@@ -88,7 +98,7 @@ export interface ListItemProps extends BaseProps<HTMLLIElement> {
  * <ListItem label="Docs" href="/docs" target="_blank" rel="noreferrer" />
  * ```
  */
-export declare function ListItem({ label, description, startContent, endContent, onClick, href, target, rel, isDisabled, isSelected, xstyle, className, style, ref, ...restProps }: ListItemProps): import("react").JSX.Element;
+export declare function ListItem({ label, description, startContent, endContent, onClick, interactiveRef, href, target, rel, isDisabled, isSelected, xstyle, className, style, ref, ...restProps }: ListItemProps): import("react").JSX.Element;
 export declare namespace ListItem {
     var displayName: string;
 }

package/dist/List/ListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../src/List/ListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,aAAa,CAAC;IAC7D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA4ED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,OAAO,EACP,IAAI,EACJ,MAAM,EACN,GAAG,EACH,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,SAAS,EACb,EAAE,aAAa,+BA8Cf;yBA9De,QAAQ"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../src/List/ListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,aAAa,CAAC;IAC7D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAExC;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAErD;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA4ED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,OAAO,EACP,cAAc,EACd,IAAI,EACJ,MAAM,EACN,GAAG,EACH,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,SAAS,EACb,EAAE,aAAa,+BA+Cf;yBAhEe,QAAQ"}