@astryxdesign/core 0.1.9 → 0.2.0-canary.0b7a99e

package/dist/Icon/Icon.js

@@ -19,7 +19,7 @@
  * - /packages/core/src/Icon/Icon.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/Icon/index.ts (exports if types change)
  * - /apps/storybook/stories/Icon.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Icon/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Icon/ (showcase blocks)
  */
 import React from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -243,6 +243,9 @@ export function Icon({
   size = 'md',
   label,
   ref,
+  className,
+  style,
+  xstyle,
   ...props
 }) {
   // Derive ARIA from `label`: decorative (aria-hidden) by default, or a
@@ -256,6 +259,9 @@ export function Icon({
       color: color,
       size: size,
       a11yProps: a11yProps,
+      className: className,
+      style: style,
+      xstyle: xstyle,
       spanProps: props
     });
   }
@@ -272,7 +278,7 @@ export function Icon({
     ...mergeProps(themeProps('icon', {
       size,
       color
-    }), stylex.props(styles.root, colorStyles[color], sizeStyles[size])),
+    }), stylex.props(styles.root, colorStyles[color], sizeStyles[size], xstyle), className ?? undefined, style),
     ...props
   });
 }
@@ -294,19 +300,29 @@ function IconFromRegistry({
   color,
   size,
   a11yProps,
+  className,
+  style,
+  xstyle,
   spanProps
 }) {
   const resolvedIcon = getIcon(name);
   if (resolvedIcon == null) {
     return null;
   }
+
+  // The styling props (className, style, xstyle) are handled here so they
+  // COMPOSE with the internal astryx-icon + StyleX classes/styles instead of
+  // being shadowed by the later spread: xstyle folds into stylex.props, and
+  // className/style merge via mergeProps. Other span props keep their prior
+  // precedence (spread before the internal merge).
+  const restSpanProps = spanProps ?? {};
   return /*#__PURE__*/_jsx("span", {
     ...a11yProps,
-    ...spanProps,
+    ...restSpanProps,
     ...mergeProps(themeProps('icon', {
       size,
       color
-    }), stylex.props(styles.span, colorStyles[color], spanSizeStyles[size])),
+    }), stylex.props(styles.span, colorStyles[color], spanSizeStyles[size], xstyle), className ?? undefined, style),
     children: resolvedIcon
   });
 }

package/dist/Icon/globalIconRegistry.js

@@ -22,7 +22,7 @@ import { defaultIcons } from "./defaultIcons.js";
  * These represent the functional purpose of each icon, not a specific
  * visual representation. Themes provide the actual icon components.
  */
-// SYNC: packages/cli/docs/icons.doc.mjs — update USAGE_HINTS when adding names
+// SYNC: packages/cli/assets/docs/icons.doc.mjs — update USAGE_HINTS when adding names
 
 /**
  * Icon registry mapping semantic names to React nodes.

package/dist/IconButton/IconButton.d.ts

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

package/dist/IconButton/IconButton.js

@@ -13,7 +13,7 @@
  * - /packages/core/src/IconButton/IconButton.test.tsx (tests)
  * - /packages/core/src/IconButton/index.ts (exports if types change)
  * - /apps/storybook/stories/IconButton.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/IconButton/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/IconButton/ (showcase blocks)
  */
 import { Button } from "../Button/Button.js";
 

package/dist/InputGroup/InputGroup.d.ts

@@ -14,7 +14,7 @@
  * - /packages/core/src/InputGroup/InputGroup.test.tsx
  * - /packages/core/src/InputGroup/index.ts
  * - /apps/storybook/stories/InputGroup.stories.tsx
- * - /packages/cli/templates/blocks/components/InputGroup/
+ * - /packages/cli/assets/templates/blocks/components/InputGroup/
  */
 import { type ReactNode } from 'react';
 import { type InputStatus } from '../Field';

package/dist/InputGroup/InputGroup.js

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

package/dist/InputGroup/InputGroupText.d.ts

@@ -7,7 +7,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/InputGroup/InputGroup.doc.mjs
  * - /packages/core/src/InputGroup/index.ts
- * - /packages/cli/templates/blocks/components/InputGroup/
+ * - /packages/cli/assets/templates/blocks/components/InputGroup/
  */
 import React, { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';

package/dist/InputGroup/InputGroupText.js

@@ -11,7 +11,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/InputGroup/InputGroup.doc.mjs
  * - /packages/core/src/InputGroup/index.ts
- * - /packages/cli/templates/blocks/components/InputGroup/
+ * - /packages/cli/assets/templates/blocks/components/InputGroup/
  */
 import React from 'react';
 import * as stylex from '@stylexjs/stylex';

package/dist/Item/Item.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file Item.tsx
- * @input Uses React, ReactNode, StyleXStyles, theme tokens
+ * @input Uses React, ReactNode, StyleXStyles, theme tokens, useClickableContainer
  * @output Exports Item component, ItemProps type
  * @position Core layout primitive; consumed by index.ts, tested by Item.test.tsx
  *
@@ -9,9 +9,9 @@
  * - /packages/core/src/Item/Item.test.tsx
  * - /packages/core/src/Item/index.ts
  * - /apps/storybook/stories/Item.stories.tsx
- * - /packages/cli/templates/blocks/components/Item/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Item/ (showcase blocks)
  */
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
 export type ItemAlign = 'center' | 'start';
 export type ItemDensity = 'compact' | 'balanced' | 'spacious';
@@ -72,6 +72,19 @@ export interface ItemProps extends BaseProps<HTMLElement> {
      * Click handler. Makes the item clickable with button semantics.
      */
     onClick?: (event: 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). Clicks on the
+     * control itself, and on any other nested interactive element, are left to
+     * that element. Mutually exclusive with `onClick`/`href` — when
+     * `interactiveRef` is set those are ignored (the nested control is the sole
+     * action).
+     */
+    interactiveRef?: React.RefObject<HTMLElement | null>;
     /**
      * Link URL. Makes the item a link via an invisible anchor element.
      */
@@ -126,7 +139,7 @@ export interface ItemProps extends BaseProps<HTMLElement> {
  * />
  * ```
  */
-export declare function Item({ as: Component, marker, startContent, label, description, endContent, align, density, labelLines, descriptionLines, onClick, href, target: targetFromProps, rel: relFromProps, isHighlighted, isSelected, isDisabled, xstyle, className, style, ref, role, ...restProps }: ItemProps): import("react").JSX.Element;
+export declare function Item({ as: Component, marker, startContent, label, description, endContent, align, density, labelLines, descriptionLines, onClick, interactiveRef, href, target: targetFromProps, rel: relFromProps, isHighlighted, isSelected, isDisabled, xstyle, className, style, ref, role, ...restProps }: ItemProps): import("react").JSX.Element;
 export declare namespace Item {
     var displayName: string;
 }

package/dist/Item/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAUrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,WAAW,CAAC;IACvD,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,MAAM,CAAC;IAE3B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE5C;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAE5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA0KD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,IAAI,CAAC,EACnB,EAAE,EAAE,SAAiB,EACrB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,WAAW,EACX,UAAU,EACV,KAAgB,EAChB,OAAoB,EACpB,UAAU,EACV,gBAAgB,EAChB,OAAO,EACP,IAAI,EACJ,MAAM,EAAE,eAAe,EACvB,GAAG,EAAE,YAAY,EACjB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,IAAI,EACJ,GAAG,SAAS,EACb,EAAE,SAAS,+BA+KX;yBAvMe,IAAI"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAS,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAU7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAY5C,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,WAAW,CAAC;IACvD,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,MAAM,CAAC;IAE3B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE5C;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAErD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAE5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA0KD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,IAAI,CAAC,EACnB,EAAE,EAAE,SAAiB,EACrB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,WAAW,EACX,UAAU,EACV,KAAgB,EAChB,OAAoB,EACpB,UAAU,EACV,gBAAgB,EAChB,OAAO,EACP,cAAc,EACd,IAAI,EACJ,MAAM,EAAE,eAAe,EACvB,GAAG,EAAE,YAAY,EACjB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,IAAI,EACJ,GAAG,SAAS,EACb,EAAE,SAAS,+BA4MX;yBArOe,IAAI"}

package/dist/Item/Item.js

@@ -4,7 +4,7 @@
 
 /**
  * @file Item.tsx
- * @input Uses React, ReactNode, StyleXStyles, theme tokens
+ * @input Uses React, ReactNode, StyleXStyles, theme tokens, useClickableContainer
  * @output Exports Item component, ItemProps type
  * @position Core layout primitive; consumed by index.ts, tested by Item.test.tsx
  *
@@ -13,14 +13,17 @@
  * - /packages/core/src/Item/Item.test.tsx
  * - /packages/core/src/Item/index.ts
  * - /apps/storybook/stories/Item.stories.tsx
- * - /packages/cli/templates/blocks/components/Item/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Item/ (showcase blocks)
  */
+import { useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, radiusVars, spacingVars, durationVars, easeVars, typeScaleVars } from "../theme/tokens.stylex.js";
-import { mergeProps } from "../utils/index.js";
+import { mergeProps, mergeRefs } from "../utils/index.js";
 import { computeTargetAndRel } from "../Link/computeTargetAndRel.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
+import { useClickableContainer } from "../hooks/useClickableContainer.js";
+import { useDevWarning } from "../hooks/useDevWarning.js";
 import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
@@ -176,6 +179,7 @@ export function Item({
   labelLines,
   descriptionLines,
   onClick,
+  interactiveRef,
   href,
   target: targetFromProps,
   rel: relFromProps,
@@ -190,7 +194,23 @@ export function Item({
   ...restProps
 }) {
   const LinkComponent = useLinkComponent();
-  const isInteractive = onClick != null || href != null;
+
+  // Delegation mode: the row is an enlarged click/tap target for a nested
+  // control (e.g. a checkbox) that owns the keyboard access and action. The
+  // control is the row's only tab stop; the row proxies surface clicks to it.
+  const isDelegate = interactiveRef != null;
+  const containerRef = useRef(null);
+  // Only onClick is needed: onMouseUp handles middle-click href navigation,
+  // which delegation mode never has (href is ignored here).
+  const {
+    onClick: delegatedOnClick
+  } = useClickableContainer({
+    containerRef,
+    interactiveRef: interactiveRef ?? undefined,
+    disabled: isDisabled
+  });
+  useDevWarning('Item', '`interactiveRef` is mutually exclusive with `onClick`/`href`. In ' + 'delegation mode the row only forwards clicks to the referenced control, ' + 'so `onClick`/`href` are ignored. Drop one of them.', isDelegate && (onClick != null || href != null));
+  const isInteractive = onClick != null || href != null || isDelegate;
   const {
     target,
     rel
@@ -233,7 +253,12 @@ export function Item({
         className: "x3psx0u x78zum5"
       },
       children: startContent
-    }), hasParentRole ? /*#__PURE__*/_jsx("span", {
+    }), hasParentRole || isDelegate ?
+    /*#__PURE__*/
+    // Delegation mode (and parent-role mode) put the label in a plain span:
+    // keyboard access lives on the nested control, so no invisible
+    // button/anchor is rendered and the row adds no second tab stop.
+    _jsx("span", {
       ...{
         0: {
           className: "x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h"
@@ -294,7 +319,7 @@ export function Item({
     })]
   });
   return /*#__PURE__*/_jsx(Component, {
-    ref: ref,
+    ref: isDelegate ? mergeRefs(ref, containerRef) : ref,
     ...restProps,
     "aria-selected": allowsAriaSelected && isSelected || undefined
     // aria-selected is invalid on roles that don't permit it (listitem, a
@@ -309,7 +334,7 @@ export function Item({
       align
     }), stylex.props(styles.root, densityStyles[density], align === 'start' && styles.alignStart, isInteractive && styles.interactive, isInteractive && styles.focusVisibleOutline, isHighlighted && styles.highlighted, isSelected && styles.selected, isDisabled && !hasParentRole && styles.disabled, xstyle), className, style),
     role: role,
-    onClick: hasParentRole ? onClick : isInteractive ? handleContainerClick : undefined,
+    onClick: isDelegate ? delegatedOnClick : hasParentRole ? onClick : isInteractive ? handleContainerClick : undefined,
     children: innerContent
   });
 }

package/dist/Kbd/Kbd.d.ts

@@ -6,7 +6,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 from 'react';
 import type { BaseProps } from '../BaseProps';

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/Layer/layerAnimations.stylex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layerAnimations.stylex.d.ts","sourceRoot":"","sources":["../../src/Layer/layerAnimations.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAyC3C;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;EA6B1B,CAAC"}
+{"version":3,"file":"layerAnimations.stylex.d.ts","sourceRoot":"","sources":["../../src/Layer/layerAnimations.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AA8D3C;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;EA+B1B,CAAC"}

package/dist/Layer/layerAnimations.stylex.js

@@ -33,6 +33,14 @@ const enterBelow = "xv1hr86-B";
 const enterAbove = "x1ahk7ht-B";
 const enterEnd = "xwmkjkf-B";
 const enterStart = "xu7jd1z-B";
+
+// RTL: the horizontal entrance nudge is a physical translateX, so it must
+// mirror under RTL — a layer on the inline-end/start side must slide in from
+// the correct physical side following the reading flow. Only the horizontal
+// (translateX) keyframes need mirroring; the vertical enterAbove/enterBelow
+// (translateY) entrances are direction-neutral and are left as-is.
+const enterEndRtl = "xu7jd1z-B";
+const enterStartRtl = "xwmkjkf-B";
 const animationBase = {
   animationDuration: durationVars['--duration-fast-max'],
   animationTimingFunction: easeVars['--ease-standard'],
@@ -65,14 +73,14 @@ export const layerAnimations = {
     $$css: true
   },
   end: {
-    kKVMdj: "x1i331go x1aquc0h",
+    kKVMdj: "x1i331go x1vxsm5i x1aquc0h",
     k44tkh: "x9uej1z",
     kyAemX: "x128ha8g",
     kWV6AL: "xskzprw",
     $$css: true
   },
   start: {
-    kKVMdj: "xck01x9 x1aquc0h",
+    kKVMdj: "xck01x9 x18lne9g x1aquc0h",
     k44tkh: "x9uej1z",
     kyAemX: "x128ha8g",
     kWV6AL: "xskzprw",

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';

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,sCAoUf;yBApVe,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;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,sCAwVf;yBAxWe,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';
@@ -24,7 +24,7 @@ import { IconButton } from "../IconButton/index.js";
 import { useAnnounce } from "../hooks/useAnnounce.js";
 import { useScrollLock } from "../hooks/useScrollLock.js";
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
-import { mergeProps, mergeRefs } from "../utils/index.js";
+import { mergeProps, mergeRefs, rtlStyles } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/index.js";
 
@@ -136,6 +136,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 +238,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]);
@@ -293,6 +303,7 @@ export function Lightbox({
       return;
     }
     setIsDragging(true);
+    didDragRef.current = false;
     dragStartRef.current = {
       x: e.clientX,
       y: e.clientY,
@@ -305,6 +316,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({
@@ -342,12 +354,13 @@ 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 xmz3bnw x1vjfegm"
+          className: "x10l6tqk xyx6v2t x1mcfs9z x1vjfegm"
         },
         children: /*#__PURE__*/_jsx(IconButton, {
           icon: /*#__PURE__*/_jsx(Icon, {
@@ -362,13 +375,16 @@ export function Lightbox({
         })
       }), isGallery && /*#__PURE__*/_jsx("div", {
         ...{
-          className: "x10l6tqk xwa60dl x1cb1t30 x1vjfegm xnp31yv"
+          className: "x10l6tqk xwa60dl x1cb1t30 x1vjfegm x1ybfrjj"
         },
         children: /*#__PURE__*/_jsx(IconButton, {
-          icon: /*#__PURE__*/_jsx(Icon, {
-            icon: "chevronLeft",
-            size: "sm",
-            color: "inherit"
+          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",
@@ -432,13 +448,16 @@ export function Lightbox({
         })]
       }), isGallery && /*#__PURE__*/_jsx("div", {
         ...{
-          className: "x10l6tqk xwa60dl x1cb1t30 x1vjfegm xmz3bnw"
+          className: "x10l6tqk xwa60dl x1cb1t30 x1vjfegm x1mcfs9z"
         },
         children: /*#__PURE__*/_jsx(IconButton, {
-          icon: /*#__PURE__*/_jsx(Icon, {
-            icon: "chevronRight",
-            size: "sm",
-            color: "inherit"
+          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",
@@ -448,7 +467,7 @@ export function Lightbox({
         })
       }), isGallery && mediaArray.length > 1 && /*#__PURE__*/_jsxs("div", {
         ...{
-          className: "x10l6tqk xyx6v2t xnp31yv x9e3rv5 xjm74w1 xw6l6zx x1vjfegm"
+          className: "x10l6tqk xyx6v2t x1ybfrjj x9e3rv5 xjm74w1 xw6l6zx x1vjfegm"
         },
         children: [index + 1, " / ", mediaArray.length]
       })]

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';