@astryxdesign/core 0.2.0-canary.8d64648 → 0.2.0-canary.8dfd7cf

package/src/TreeList/TreeList.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'TreeList',
@@ -94,7 +94,7 @@ export const docs = {
 // See .context/decisions/dense-compression-protocol.md
 // -------------------------------------------------------
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'TreeList',
   displayName: 'Tree List',
@@ -165,7 +165,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Data-driven tree list for hierarchical data w/ expand/collapse, branch lines, interactive items. Flat items array w/ recursive children, no composition, no cloneElement.',

package/src/TreeList/TreeList.tsx

@@ -12,7 +12,7 @@
  * - /packages/core/src/TreeList/TreeList.doc.mjs
  * - /packages/core/src/TreeList/index.ts
  * - /apps/storybook/stories/TreeList.stories.tsx
- * - /packages/cli/templates/blocks/components/TreeList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TreeList/ (showcase blocks)
  */
 
 import {useId, useState, useMemo, useCallback, type ReactNode} from 'react';

package/src/TreeList/TreeListBranches.tsx

@@ -10,7 +10,7 @@
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/TreeList/TreeListItem.tsx
- * - /packages/cli/templates/blocks/components/TreeList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TreeList/ (showcase blocks)
  */
 
 import * as stylex from '@stylexjs/stylex';

package/src/TreeList/TreeListItem.tsx

@@ -11,7 +11,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/TreeList/TreeList.doc.mjs
  * - /packages/core/src/TreeList/TreeList.tsx
- * - /packages/cli/templates/blocks/components/TreeList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TreeList/ (showcase blocks)
  */
 
 import {useId, useMemo, type ReactNode} from 'react';
@@ -24,7 +24,7 @@ import {
   easeVars,
   typeScaleVars,
 } from '../theme/tokens.stylex';
-import {getIcon} from '../Icon/globalIconRegistry';
+import {useIcon} from '../Icon';
 import {mergeProps, rtlStyles} from '../utils';
 import {useLinkComponent} from '../Link/useLinkComponent';
 import {TreeListBranches} from './TreeListBranches';
@@ -328,6 +328,7 @@ export function TreeListItem({
   isTabbable,
 }: TreeListItemInternalProps) {
   const t = useTranslator();
+  const chevronRightIcon = useIcon('chevronRight');
   const labelId = useId();
   const descriptionId = useId();
   const LinkComponent = useLinkComponent();
@@ -412,7 +413,7 @@ export function TreeListItem({
           styles.chevronSvg,
           isExpanded ? styles.chevronExpanded : styles.chevronCollapsed,
         )}>
-        {getIcon('chevronRight')}
+        {chevronRightIcon}
       </span>
     </span>
   );

package/src/TreeList/TreeListTypes.ts

@@ -12,28 +12,11 @@
  */
 
 import type {ReactNode} from 'react';
+import type {TreeListVariantMap} from './index';
 
 /** Spacing density for tree list items. */
 export type TreeListDensity = 'compact' | 'balanced' | 'spacious';
 
-/**
- * Extensible variant map for TreeList.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/TreeList' {
- *   interface TreeListVariantMap {
- *     'dotted': true;
- *   }
- * }
- * ```
- */
-export interface TreeListVariantMap {
-  lineGuides: true;
-  noGuides: true;
-}
-
 /**
  * Visual treatment of the hierarchy guide (connector) lines. Extensible via
  * module augmentation of TreeListVariantMap.

package/src/TreeList/index.ts

@@ -11,6 +11,24 @@
  * SYNC: When modified, update /packages/core/src/TreeList/TreeList.doc.mjs
  */
 
+/**
+ * Extensible variant map for TreeList.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/TreeList' {
+ *   interface TreeListVariantMap {
+ *     'dotted': true;
+ *   }
+ * }
+ * ```
+ */
+export interface TreeListVariantMap {
+  lineGuides: true;
+  noGuides: true;
+}
+
 export {TreeList} from './TreeList';
 export type {TreeListProps, TreeListDensity, TreeListVariant} from './TreeList';
-export type {TreeListItemData, TreeListVariantMap} from './TreeListTypes';
+export type {TreeListItemData} from './TreeListTypes';

package/src/Typeahead/BaseTypeahead.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'BaseTypeahead',

package/src/Typeahead/BaseTypeahead.tsx

@@ -14,7 +14,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Typeahead/index.ts
- * - /packages/cli/templates/blocks/components/Typeahead/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Typeahead/ (showcase blocks)
  */
 
 import React, {

package/src/Typeahead/Typeahead.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'Typeahead',
@@ -233,7 +233,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -277,7 +277,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Searchable dropdown for single-item selection w/ keyboard navigation. Supports async+sync search via searchSource interface.',

package/src/Typeahead/Typeahead.tsx

@@ -15,7 +15,7 @@
  * SYNC: When modified, update:
  * - /packages/core/src/Typeahead/index.ts
  * - /apps/storybook/stories/Typeahead.stories.tsx
- * - /packages/cli/templates/blocks/components/Typeahead/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Typeahead/ (showcase blocks)
  */
 
 import React, {

package/src/Typeahead/TypeaheadItem.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'TypeaheadItem',

package/src/Typeahead/TypeaheadItem.tsx

@@ -8,7 +8,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Typeahead/index.ts
- * - /packages/cli/templates/blocks/components/Typeahead/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Typeahead/ (showcase blocks)
  */
 
 import React, {type ReactNode} from 'react';

package/src/VStack/VStack.tsx

@@ -9,7 +9,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Stack/Stack.doc.mjs
  * - /packages/core/src/VStack/VStack.test.tsx
- * - /packages/cli/templates/blocks/components/VStack/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/VStack/ (showcase blocks)
  */
 
 import {Stack, type StackProps} from '../Stack/Stack';

package/src/VisuallyHidden/VisuallyHidden.doc.mjs

@@ -2,7 +2,7 @@
 
 
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'VisuallyHidden',
@@ -33,7 +33,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'VisuallyHidden',
   displayName: 'VisuallyHidden',
@@ -61,7 +61,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'renders content in the a11y tree while hiding it visually (sr-only)',
   usage: {

package/src/VisuallyHidden/VisuallyHidden.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/VisuallyHidden/VisuallyHidden.doc.mjs
  * - /packages/core/src/VisuallyHidden/VisuallyHidden.test.tsx
  * - /apps/storybook/stories/VisuallyHidden.stories.tsx
- * - /packages/cli/templates/blocks/components/VisuallyHidden/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/VisuallyHidden/ (showcase blocks)
  */
 
 import {createElement, type ElementType, type ReactNode, type Ref} from 'react';

package/src/__tests__/inputWidthContract.test.tsx

@@ -43,7 +43,14 @@ const inputDocsSuite = [
 describe('Input Family width Prop Contract (#4163)', () => {
   inputDocsSuite.forEach(({name, docs}) => {
     it(`documents the width prop for ${name}`, () => {
-      const propsList = (docs.props || docs.components?.[0]?.props) as {
+      // `docs` is the ComponentDoc union (single vs multi component); narrow it
+      // for structural access to either the top-level props or the first
+      // sub-component's props.
+      const doc = docs as {
+        props?: {name: string; type: string}[];
+        components?: {props?: {name: string; type: string}[]}[];
+      };
+      const propsList = (doc.props || doc.components?.[0]?.props) as {
         name: string;
         type: string;
       }[];

package/src/doc-mjs.d.ts

@@ -11,9 +11,12 @@
  */
 
 declare module '*.doc.mjs' {
-  import type {ComponentDoc, TranslationDoc} from './docs-types';
+  import type {
+    ComponentDoc,
+    ComponentTranslationDoc,
+  } from '@astryxdesign/cli/authoring';
 
   export const docs: ComponentDoc;
   export const docsZh: ComponentDoc;
-  export const docsDense: TranslationDoc;
+  export const docsDense: ComponentTranslationDoc;
 }

package/src/docPropLiterals.test.ts

@@ -11,7 +11,7 @@
  * without revealing what may be written into it. Readers without an IDE —
  * agents especially — then guess: `gap={16}` (pixels, not a scale step),
  * `direction: 'desc'` (the type says `'descending'`). Both fail to compile.
- * `PropDoc.type` in docs-types.ts already asks for inlined unions
+ * `ComponentPropDoc.type` in docs-types.ts already asks for inlined unions
  * (`"'primary' | 'secondary' | 'ghost'"`); this test holds docs to it.
  *
  * Two ways a doc prop can hide values, checked at different strictness:

package/src/docPropReferences.test.ts

@@ -30,7 +30,7 @@ type DocModule = {
 };
 
 /**
- * Props intentionally omitted from doc props[]: PropDoc in docs-types.ts
+ * Props intentionally omitted from doc props[]: ComponentPropDoc in docs-types.ts
  * says to skip internal/styling props, so prose may reference them even
  * though no doc lists them.
  */

package/src/hooks/containerReveal.pool.stylex.ts

@@ -6,23 +6,21 @@
  * @output A fixed pool of scoped markers, each paired with its reveal style
  *   blocks (reveal / conceal, each with a layout-preserved variant) compiled
  *   against that marker.
- * @position Internal to useContainerReveal.
+ * @position Internal to useContainerReveal. GENERATED by
+ *   scripts/gen-container-reveal-pool.mjs — do not edit by hand.
  *
- * WHY A POOL OF LITERAL BLOCKS: `stylex.when.ancestor(':hover', marker)` is
- * resolved by the StyleX compiler, which welds the marker's class into the
- * emitted selector (`.marker:hover *`). A marker and the styles referencing it
- * are therefore inseparable at build time — the marker cannot be passed as a
- * runtime argument, so the blocks cannot be produced by a loop or a helper and
- * must be written out literally per marker. A single shared marker would leak
- * hover/focus across NESTED reveal containers (an ancestor container's :hover
- * matches a descendant container's revealed content), so useContainerReveal
- * hands each concurrently mounted container a distinct marker from this pool
- * (see the free-list there).
+ * WHY A POOL: `stylex.when.ancestor(':hover', marker)` welds the marker's
+ * class into the compiled selector (`.marker:hover *`), so a marker and the
+ * styles referencing it are inseparable at compile time. A single shared
+ * marker would leak hover/focus across NESTED reveal containers (an ancestor
+ * container's `:hover` matches a descendant container's revealed content).
+ * Pre-declaring N markers lets useContainerReveal hand each concurrently
+ * mounted container a distinct marker (free-list in useContainerReveal),
+ * isolating nested containers without the caller authoring any StyleX.
  *
- * The reveal recipe hides content with `position: absolute` (removed from
- * layout flow, so it reserves no space) plus `opacity: 0`. Both keep the
- * content in the accessibility tree and tab order — unlike display/visibility
- * — so it stays reachable by keyboard and assistive tech while hidden.
+ * SYNC: When the block shape changes, edit
+ * scripts/gen-container-reveal-pool.mjs and useContainerReveal.ts, then
+ * regenerate (node scripts/gen-container-reveal-pool.mjs) and commit.
  */
 
 import * as stylex from '@stylexjs/stylex';
@@ -34,14 +32,26 @@ export const m0 = stylex.defineMarker();
 const s0 = stylex.create({
   // Hidden at rest via position + opacity (kept in the a11y tree and tab
   // order); on container :hover (fine pointer) or :focus-within it returns to
-  // flow and fades in. Always shown on touch.
+  // flow and fades in. Always shown on touch. The position flip is discrete,
+  // so it transitions with allow-discrete + a state-conditional delay: 0 on
+  // entry (flips to static immediately, then fades in) and the fade duration
+  // on exit (stays in flow until the fade finishes, then snaps out) — without
+  // this, the exit would snap out of flow at full opacity and flicker.
   reveal: {
-    transitionProperty: 'opacity',
+    transitionProperty: 'opacity, position',
     transitionDuration: {
-      default: durationVars['--duration-fast'],
-      '@media (prefers-reduced-motion: reduce)': '0s',
+      default: durationVars['--duration-fast'] + ', 0s',
+      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
     },
     transitionTimingFunction: easeVars['--ease-standard'],
+    transitionBehavior: 'allow-discrete',
+    transitionDelay: {
+      default: '0s, ' + durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
+      [stylex.when.ancestor(':hover', m0)]: {'@media (hover: hover)': '0s, 0s'},
+      [stylex.when.ancestor(':focus-within', m0)]: '0s, 0s',
+      '@media (any-pointer: coarse)': '0s, 0s',
+    },
     opacity: {
       default: 0,
       [stylex.when.ancestor(':hover', m0)]: {'@media (hover: hover)': 1},
@@ -104,14 +114,26 @@ export const m1 = stylex.defineMarker();
 const s1 = stylex.create({
   // Hidden at rest via position + opacity (kept in the a11y tree and tab
   // order); on container :hover (fine pointer) or :focus-within it returns to
-  // flow and fades in. Always shown on touch.
+  // flow and fades in. Always shown on touch. The position flip is discrete,
+  // so it transitions with allow-discrete + a state-conditional delay: 0 on
+  // entry (flips to static immediately, then fades in) and the fade duration
+  // on exit (stays in flow until the fade finishes, then snaps out) — without
+  // this, the exit would snap out of flow at full opacity and flicker.
   reveal: {
-    transitionProperty: 'opacity',
+    transitionProperty: 'opacity, position',
     transitionDuration: {
-      default: durationVars['--duration-fast'],
-      '@media (prefers-reduced-motion: reduce)': '0s',
+      default: durationVars['--duration-fast'] + ', 0s',
+      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
     },
     transitionTimingFunction: easeVars['--ease-standard'],
+    transitionBehavior: 'allow-discrete',
+    transitionDelay: {
+      default: '0s, ' + durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
+      [stylex.when.ancestor(':hover', m1)]: {'@media (hover: hover)': '0s, 0s'},
+      [stylex.when.ancestor(':focus-within', m1)]: '0s, 0s',
+      '@media (any-pointer: coarse)': '0s, 0s',
+    },
     opacity: {
       default: 0,
       [stylex.when.ancestor(':hover', m1)]: {'@media (hover: hover)': 1},
@@ -174,14 +196,26 @@ export const m2 = stylex.defineMarker();
 const s2 = stylex.create({
   // Hidden at rest via position + opacity (kept in the a11y tree and tab
   // order); on container :hover (fine pointer) or :focus-within it returns to
-  // flow and fades in. Always shown on touch.
+  // flow and fades in. Always shown on touch. The position flip is discrete,
+  // so it transitions with allow-discrete + a state-conditional delay: 0 on
+  // entry (flips to static immediately, then fades in) and the fade duration
+  // on exit (stays in flow until the fade finishes, then snaps out) — without
+  // this, the exit would snap out of flow at full opacity and flicker.
   reveal: {
-    transitionProperty: 'opacity',
+    transitionProperty: 'opacity, position',
     transitionDuration: {
-      default: durationVars['--duration-fast'],
-      '@media (prefers-reduced-motion: reduce)': '0s',
+      default: durationVars['--duration-fast'] + ', 0s',
+      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
     },
     transitionTimingFunction: easeVars['--ease-standard'],
+    transitionBehavior: 'allow-discrete',
+    transitionDelay: {
+      default: '0s, ' + durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
+      [stylex.when.ancestor(':hover', m2)]: {'@media (hover: hover)': '0s, 0s'},
+      [stylex.when.ancestor(':focus-within', m2)]: '0s, 0s',
+      '@media (any-pointer: coarse)': '0s, 0s',
+    },
     opacity: {
       default: 0,
       [stylex.when.ancestor(':hover', m2)]: {'@media (hover: hover)': 1},
@@ -244,14 +278,26 @@ export const m3 = stylex.defineMarker();
 const s3 = stylex.create({
   // Hidden at rest via position + opacity (kept in the a11y tree and tab
   // order); on container :hover (fine pointer) or :focus-within it returns to
-  // flow and fades in. Always shown on touch.
+  // flow and fades in. Always shown on touch. The position flip is discrete,
+  // so it transitions with allow-discrete + a state-conditional delay: 0 on
+  // entry (flips to static immediately, then fades in) and the fade duration
+  // on exit (stays in flow until the fade finishes, then snaps out) — without
+  // this, the exit would snap out of flow at full opacity and flicker.
   reveal: {
-    transitionProperty: 'opacity',
+    transitionProperty: 'opacity, position',
     transitionDuration: {
-      default: durationVars['--duration-fast'],
-      '@media (prefers-reduced-motion: reduce)': '0s',
+      default: durationVars['--duration-fast'] + ', 0s',
+      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
     },
     transitionTimingFunction: easeVars['--ease-standard'],
+    transitionBehavior: 'allow-discrete',
+    transitionDelay: {
+      default: '0s, ' + durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
+      [stylex.when.ancestor(':hover', m3)]: {'@media (hover: hover)': '0s, 0s'},
+      [stylex.when.ancestor(':focus-within', m3)]: '0s, 0s',
+      '@media (any-pointer: coarse)': '0s, 0s',
+    },
     opacity: {
       default: 0,
       [stylex.when.ancestor(':hover', m3)]: {'@media (hover: hover)': 1},
@@ -314,14 +360,26 @@ export const m4 = stylex.defineMarker();
 const s4 = stylex.create({
   // Hidden at rest via position + opacity (kept in the a11y tree and tab
   // order); on container :hover (fine pointer) or :focus-within it returns to
-  // flow and fades in. Always shown on touch.
+  // flow and fades in. Always shown on touch. The position flip is discrete,
+  // so it transitions with allow-discrete + a state-conditional delay: 0 on
+  // entry (flips to static immediately, then fades in) and the fade duration
+  // on exit (stays in flow until the fade finishes, then snaps out) — without
+  // this, the exit would snap out of flow at full opacity and flicker.
   reveal: {
-    transitionProperty: 'opacity',
+    transitionProperty: 'opacity, position',
     transitionDuration: {
-      default: durationVars['--duration-fast'],
-      '@media (prefers-reduced-motion: reduce)': '0s',
+      default: durationVars['--duration-fast'] + ', 0s',
+      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
     },
     transitionTimingFunction: easeVars['--ease-standard'],
+    transitionBehavior: 'allow-discrete',
+    transitionDelay: {
+      default: '0s, ' + durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
+      [stylex.when.ancestor(':hover', m4)]: {'@media (hover: hover)': '0s, 0s'},
+      [stylex.when.ancestor(':focus-within', m4)]: '0s, 0s',
+      '@media (any-pointer: coarse)': '0s, 0s',
+    },
     opacity: {
       default: 0,
       [stylex.when.ancestor(':hover', m4)]: {'@media (hover: hover)': 1},
@@ -384,14 +442,26 @@ export const m5 = stylex.defineMarker();
 const s5 = stylex.create({
   // Hidden at rest via position + opacity (kept in the a11y tree and tab
   // order); on container :hover (fine pointer) or :focus-within it returns to
-  // flow and fades in. Always shown on touch.
+  // flow and fades in. Always shown on touch. The position flip is discrete,
+  // so it transitions with allow-discrete + a state-conditional delay: 0 on
+  // entry (flips to static immediately, then fades in) and the fade duration
+  // on exit (stays in flow until the fade finishes, then snaps out) — without
+  // this, the exit would snap out of flow at full opacity and flicker.
   reveal: {
-    transitionProperty: 'opacity',
+    transitionProperty: 'opacity, position',
     transitionDuration: {
-      default: durationVars['--duration-fast'],
-      '@media (prefers-reduced-motion: reduce)': '0s',
+      default: durationVars['--duration-fast'] + ', 0s',
+      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
     },
     transitionTimingFunction: easeVars['--ease-standard'],
+    transitionBehavior: 'allow-discrete',
+    transitionDelay: {
+      default: '0s, ' + durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s, 0s',
+      [stylex.when.ancestor(':hover', m5)]: {'@media (hover: hover)': '0s, 0s'},
+      [stylex.when.ancestor(':focus-within', m5)]: '0s, 0s',
+      '@media (any-pointer: coarse)': '0s, 0s',
+    },
     opacity: {
       default: 0,
       [stylex.when.ancestor(':hover', m5)]: {'@media (hover: hover)': 1},
@@ -450,15 +520,52 @@ const s5 = stylex.create({
   },
 });
 
-// The compiled StyleX objects carry `when.ancestor` conditionals the public
-// `StyleXStyles` type does not model, so the slot shape is inferred.
+// The compiled StyleX style objects carry `when.ancestor` conditionals that
+// the public `StyleXStyles` type does not model, so the slot shape is inferred
+// from the generated blocks rather than annotated.
 export const POOL = [
-  {marker: m0, reveal: s0.reveal, revealLayoutPreserved: s0.revealLayoutPreserved, conceal: s0.conceal, concealLayoutPreserved: s0.concealLayoutPreserved},
-  {marker: m1, reveal: s1.reveal, revealLayoutPreserved: s1.revealLayoutPreserved, conceal: s1.conceal, concealLayoutPreserved: s1.concealLayoutPreserved},
-  {marker: m2, reveal: s2.reveal, revealLayoutPreserved: s2.revealLayoutPreserved, conceal: s2.conceal, concealLayoutPreserved: s2.concealLayoutPreserved},
-  {marker: m3, reveal: s3.reveal, revealLayoutPreserved: s3.revealLayoutPreserved, conceal: s3.conceal, concealLayoutPreserved: s3.concealLayoutPreserved},
-  {marker: m4, reveal: s4.reveal, revealLayoutPreserved: s4.revealLayoutPreserved, conceal: s4.conceal, concealLayoutPreserved: s4.concealLayoutPreserved},
-  {marker: m5, reveal: s5.reveal, revealLayoutPreserved: s5.revealLayoutPreserved, conceal: s5.conceal, concealLayoutPreserved: s5.concealLayoutPreserved},
+  {
+    marker: m0,
+    reveal: s0.reveal,
+    revealLayoutPreserved: s0.revealLayoutPreserved,
+    conceal: s0.conceal,
+    concealLayoutPreserved: s0.concealLayoutPreserved,
+  },
+  {
+    marker: m1,
+    reveal: s1.reveal,
+    revealLayoutPreserved: s1.revealLayoutPreserved,
+    conceal: s1.conceal,
+    concealLayoutPreserved: s1.concealLayoutPreserved,
+  },
+  {
+    marker: m2,
+    reveal: s2.reveal,
+    revealLayoutPreserved: s2.revealLayoutPreserved,
+    conceal: s2.conceal,
+    concealLayoutPreserved: s2.concealLayoutPreserved,
+  },
+  {
+    marker: m3,
+    reveal: s3.reveal,
+    revealLayoutPreserved: s3.revealLayoutPreserved,
+    conceal: s3.conceal,
+    concealLayoutPreserved: s3.concealLayoutPreserved,
+  },
+  {
+    marker: m4,
+    reveal: s4.reveal,
+    revealLayoutPreserved: s4.revealLayoutPreserved,
+    conceal: s4.conceal,
+    concealLayoutPreserved: s4.concealLayoutPreserved,
+  },
+  {
+    marker: m5,
+    reveal: s5.reveal,
+    revealLayoutPreserved: s5.revealLayoutPreserved,
+    conceal: s5.conceal,
+    concealLayoutPreserved: s5.concealLayoutPreserved,
+  },
 ] as const;
 
 export type RevealSlot = (typeof POOL)[number];

package/src/hooks/useClickableContainer.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').HookDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookDoc} */
 export const docs = {
   name: 'useClickableContainer',
   displayName: 'useClickableContainer',
@@ -77,7 +77,7 @@ export const docs = {
   category: 'interaction',
 };
 
-/** @type {import('../docs-types').HookTranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
 export const docsDense = {
   description:
     'Makes container element clickable while preserving nested interactive element behavior. Solves "nested interactive elements" problem: when card is clickable but contains buttons/links, clicking those must NOT trigger card\'s action. Detects interactive ancestors between click target + container, ignores text selections. Supports href navigation (incl. middle-click + Ctrl/Cmd+click for new tabs).',