@astryxdesign/core 0.2.0 → 0.3.0-canary.060cc9d

package/src/SideNav/SideNav.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: 'SideNav',
@@ -142,7 +142,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -161,7 +161,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   usage: {
     description:

package/src/SideNav/SideNav.tsx

@@ -18,7 +18,7 @@
  * - /packages/core/src/SideNav/SideNav.test.tsx
  * - /packages/core/src/SideNav/index.ts
  * - /apps/storybook/stories/SideNav.stories.tsx
- * - /packages/cli/templates/blocks/components/SideNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
 
 import {

package/src/SideNav/SideNavCollapseButton.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: 'SideNavCollapseButton',

package/src/SideNav/SideNavCollapseButton.tsx

@@ -14,13 +14,13 @@
  * SYNC: When modified, update:
  * - /packages/core/src/SideNav/SideNav.doc.mjs
  * - /packages/core/src/SideNav/index.ts
- * - /packages/cli/templates/blocks/components/SideNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
 
 import React, {type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {durationVars, easeVars} from '../theme/tokens.stylex';
-import {getIcon} from '../Icon/globalIconRegistry';
+import {useIcon} from '../Icon';
 import {Button} from '../Button';
 import type {BaseProps} from '../BaseProps';
 import {composeEventHandlers, rtlStyles} from '../utils';
@@ -107,6 +107,7 @@ export function SideNavCollapseButton({
   ...props
 }: SideNavCollapseButtonProps) {
   const t = useTranslator();
+  const chevronLeftIcon = useIcon('chevronLeft');
   const {isCollapsed, toggle, isCollapsible} =
     useSideNavCollapseState(handleRef);
   const {isMobile} = useAppShellMobile();
@@ -137,7 +138,7 @@ export function SideNavCollapseButton({
                 styles.chevron,
                 isCollapsed && styles.chevronCollapsed,
               )}>
-              {getIcon('chevronLeft')}
+              {chevronLeftIcon}
             </span>
           </span>
         )

package/src/SideNav/SideNavHeading.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: 'SideNavHeading',

package/src/SideNav/SideNavHeading.tsx

@@ -16,7 +16,7 @@
  * - /packages/core/src/SideNav/SideNav.test.tsx
  * - /packages/core/src/SideNav/index.ts
  * - /apps/storybook/stories/SideNav.stories.tsx
- * - /packages/cli/templates/blocks/components/SideNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
 
 import {useMemo, useRef, type ReactNode} from 'react';
@@ -33,7 +33,7 @@ import {
 // of lazy loading layer resources.
 import {usePopover} from '../Popover/usePopover';
 import {Link} from '../Link';
-import {getIcon} from '../Icon/globalIconRegistry';
+import {useIcon} from '../Icon';
 import {Tooltip} from '../Tooltip';
 import {navItemStyles} from '../NavItem/navItemStyles.stylex';
 import {useSideNavCollapse} from './SideNavCollapseContext';
@@ -344,6 +344,7 @@ export function SideNavHeading({
   ...props
 }: SideNavHeadingProps) {
   const t = useTranslator();
+  const chevronDownIcon = useIcon('chevronDown');
   const LinkComponent = useLinkComponent(as);
   const {isCollapsed} = useSideNavCollapse();
   const rootRef = useRef<HTMLDivElement>(null);
@@ -454,7 +455,7 @@ export function SideNavHeading({
                       {heading}
                     </span>
                     <span {...stylex.props(styles.popoverChevron)}>
-                      {getIcon('chevronDown')}
+                      {chevronDownIcon}
                     </span>
                   </span>
                   {subheading && (
@@ -550,7 +551,7 @@ export function SideNavHeading({
   );
 
   const chevronElement = showChevron && (
-    <span {...stylex.props(styles.chevron)}>{getIcon('chevronDown')}</span>
+    <span {...stylex.props(styles.chevron)}>{chevronDownIcon}</span>
   );
 
   const headerEndContentElement = headerEndContent && (
@@ -566,9 +567,7 @@ export function SideNavHeading({
       onClick={triggerProps.onClick}>
       {icon && <span {...stylex.props(styles.icon)}>{icon}</span>}
       {renderTextContent(
-        <span {...stylex.props(styles.popoverChevron)}>
-          {getIcon('chevronDown')}
-        </span>,
+        <span {...stylex.props(styles.popoverChevron)}>{chevronDownIcon}</span>,
       )}
     </button>
   );
@@ -620,7 +619,7 @@ export function SideNavHeading({
               }}
               {...popover.triggerProps}
               {...stylex.props(styles.chevron, styles.interactive)}>
-              {getIcon('chevronDown')}
+              {chevronDownIcon}
             </button>,
           )}
           {headerEndContentElement}
@@ -686,7 +685,7 @@ export function SideNavHeading({
                 }}
                 {...popover.triggerProps}
                 {...stylex.props(styles.chevron, styles.interactive)}>
-                {getIcon('chevronDown')}
+                {chevronDownIcon}
               </button>
             ) : undefined,
           )}

package/src/SideNav/SideNavItem.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: 'SideNavItem',

package/src/SideNav/SideNavItem.tsx

@@ -15,7 +15,7 @@
  * - /packages/core/src/SideNav/SideNav.test.tsx
  * - /packages/core/src/SideNav/index.ts
  * - /apps/storybook/stories/SideNav.stories.tsx
- * - /packages/cli/templates/blocks/components/SideNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
 
 import {
@@ -38,7 +38,7 @@ import {
   borderVars,
   radiusVars,
 } from '../theme/tokens.stylex';
-import {renderIconSlot, type IconType} from '../Icon';
+import {renderIconSlot, useIcon, type IconType} from '../Icon';
 import {useLinkComponent} from '../Link/useLinkComponent';
 import type {LinkComponentType} from '../Link/types';
 import {usePopover} from '../Popover/usePopover';
@@ -50,7 +50,6 @@ import {
   useSideNavCollapse,
   SideNavCollapseContext,
 } from './SideNavCollapseContext';
-import {getIcon} from '../Icon/globalIconRegistry';
 import {useSideNavRenderMode} from './SideNavRenderContext';
 import {useAppShellMobile} from '../AppShell/AppShellMobileContext';
 import {themeProps} from '../utils/themeProps';
@@ -357,9 +356,9 @@ export function SideNavItem({
   'data-testid': testId,
   ref,
   xstyle,
-  ...rest
 }: SideNavItemProps) {
   const t = useTranslator();
+  const chevronDownIcon = useIcon('chevronDown');
   const {isCollapsed} = useSideNavCollapse();
   const renderMode = useSideNavRenderMode();
   const {closeMobileNav} = useAppShellMobile();
@@ -580,7 +579,7 @@ export function SideNavItem({
             styles.expandChevron,
             !isItemCollapsed && styles.expandChevronExpanded,
           )}>
-          {getIcon('chevronDown')}
+          {chevronDownIcon}
         </span>
       )}
     </>
@@ -643,7 +642,7 @@ export function SideNavItem({
               styles.expandChevron,
               !isItemCollapsed && styles.expandChevronExpanded,
             )}>
-            {getIcon('chevronDown')}
+            {chevronDownIcon}
           </span>
         </button>
       </div>

package/src/SideNav/SideNavSection.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: 'SideNavSection',

package/src/SideNav/SideNavSection.tsx

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

package/src/Skeleton/Skeleton.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: 'Skeleton',
@@ -61,7 +61,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Skeleton',
   displayName: 'Skeleton',
@@ -110,7 +110,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   usage: {
     description:

package/src/Skeleton/Skeleton.test.tsx

@@ -3,6 +3,7 @@
 import {describe, it, expect} from 'vitest';
 import {render, screen} from '@testing-library/react';
 import {Skeleton} from './Skeleton';
+import {getForcedColorsRules} from '../__tests__/forcedColors';
 
 describe('Skeleton', () => {
   it('renders a placeholder element', () => {
@@ -23,3 +24,18 @@ describe('Skeleton', () => {
     expect(screen.getByTestId('sk')).toHaveAttribute('aria-hidden', 'false');
   });
 });
+
+// jsdom cannot emulate forced-colors rendering, so these assert that the
+// compiled output includes the forced-colors rules; visual behavior needs
+// manual verification under Windows High Contrast.
+describe('forced colors (WCAG 1.4.11)', () => {
+  it('compiles forced-colors overrides so the placeholder stays visible under Windows High Contrast', () => {
+    render(<Skeleton width={200} height={20} data-testid="sk" />);
+    const css = getForcedColorsRules();
+    // The painted fill is stripped to Canvas (invisible); GrayText is a
+    // system color, so it survives forcing.
+    expect(css).toContain('background-color: graytext;');
+    // The resting 0.25 opacity is lifted so the static placeholder reads.
+    expect(css).toContain('opacity: 1;');
+  });
+});

package/src/Skeleton/Skeleton.tsx

@@ -12,7 +12,7 @@
  * - /packages/core/src/Skeleton/Skeleton.doc.mjs
  * - /packages/core/src/Skeleton/index.ts
  * - /apps/storybook/stories/Skeleton.stories.tsx
- * - /packages/cli/templates/blocks/components/Skeleton/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Skeleton/ (showcase blocks)
  */
 
 import type {BaseProps} from '../BaseProps';
@@ -55,8 +55,20 @@ const styles = stylex.create({
     backgroundColor: {
       default: colorVars['--color-skeleton'],
       '@media (prefers-contrast: more)': `color-mix(in srgb, ${colorVars['--color-skeleton']}, ${colorVars['--color-text-primary']} 30%)`,
+      // Forced colors (Windows High Contrast) strips painted backgrounds,
+      // which would make the placeholder invisible. GrayText is a system
+      // color, so it survives forcing and keeps the placeholder visible
+      // (WCAG 1.4.11). Listed after prefers-contrast so it wins when both
+      // media features are active.
+      '@media (forced-colors: active)': 'GrayText',
+    },
+    opacity: {
+      default: 0.25,
+      // The resting 0.25 opacity would render GrayText nearly invisible on
+      // Canvas; full opacity keeps the static placeholder perceivable (the
+      // fade animation still pulses when motion is allowed).
+      '@media (forced-colors: active)': 1,
     },
-    opacity: 0.25,
   },
   animate: {
     animationDirection: 'alternate',

package/src/Slider/Slider.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: 'Slider',
@@ -174,7 +174,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Slider',
   displayName: 'Slider',
@@ -328,7 +328,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   usage: {
     description:

package/src/Slider/Slider.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/Slider/Slider.test.tsx
  * - /packages/core/src/Slider/index.ts
  * - /apps/storybook/stories/Slider.stories.tsx
- * - /packages/cli/templates/blocks/components/Slider/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Slider/ (showcase blocks)
  */
 
 import {
@@ -40,7 +40,7 @@ import {Tooltip} from '../Tooltip/Tooltip';
 import {useTooltip} from '../Tooltip';
 import {VisuallyHidden} from '../VisuallyHidden';
 import type {InputStatus} from '../Field/types';
-import {mergeProps, mergeRefs} from '../utils';
+import {mergeProps, mergeRefs, rtlStyles} from '../utils';
 import {isRtlElement} from '../hooks/isRtlElement';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
@@ -203,8 +203,6 @@ const styles = stylex.create({
     top: 0,
     bottom: 0,
     width: TRACK_SIZE,
-    insetInlineStart: '50%',
-    transform: 'translateX(-50%)',
   },
   filledTrack: {
     position: 'absolute',
@@ -218,8 +216,6 @@ const styles = stylex.create({
   },
   filledTrackVertical: {
     width: TRACK_SIZE,
-    insetInlineStart: '50%',
-    transform: 'translateX(-50%)',
   },
   thumb: {
     position: 'absolute',
@@ -249,10 +245,6 @@ const styles = stylex.create({
       ':is([dir="rtl"] *)': 'translate(50%, -50%)',
     },
   },
-  thumbVertical: {
-    insetInlineStart: '50%',
-    transform: 'translate(-50%, 50%)',
-  },
   thumbHover: {
     backgroundColor: {
       default: colorVars['--color-accent'],
@@ -796,7 +788,9 @@ export function Slider({ref, ...props}: SliderProps) {
           }),
           stylex.props(
             styles.thumb,
-            isHorizontal ? styles.thumbHorizontal : styles.thumbVertical,
+            isHorizontal
+              ? styles.thumbHorizontal
+              : rtlStyles.centerInline('50%'),
             !isDisabled && styles.thumbHover,
             !isDisabled && styles.thumbFocusVisible,
             isDisabled && styles.thumbDisabled,
@@ -930,7 +924,9 @@ export function Slider({ref, ...props}: SliderProps) {
               themeProps('slider-track', {orientation}),
               stylex.props(
                 styles.track,
-                isHorizontal ? styles.trackHorizontal : styles.trackVertical,
+                isHorizontal
+                  ? styles.trackHorizontal
+                  : [styles.trackVertical, rtlStyles.centerInline('0px')],
               ),
             )}
           />
@@ -943,7 +939,7 @@ export function Slider({ref, ...props}: SliderProps) {
                 styles.filledTrack,
                 isHorizontal
                   ? styles.filledTrackHorizontal
-                  : styles.filledTrackVertical,
+                  : [styles.filledTrackVertical, rtlStyles.centerInline('0px')],
               ),
               {style: filledStyle},
             )}

package/src/Spinner/Spinner.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: 'Spinner',
@@ -56,7 +56,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Spinner',
   displayName: 'Spinner',
@@ -108,7 +108,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   usage: {
     description:

package/src/Spinner/Spinner.tsx

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

package/src/Stack/Stack.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: 'Stack',
@@ -15,6 +15,116 @@ export const docs = {
     ],
   },
   components: [
+    {
+      name: 'Stack',
+      displayName: 'Stack',
+      description:
+        'Unified stack layout component with a direction prop. Use direction="horizontal" for left-to-right flow or direction="vertical" (default) for top-to-bottom. For convenience, HStack and VStack are pre-configured wrappers.',
+      props: [
+        {
+          name: 'direction',
+          type: "'horizontal' | 'vertical'",
+          description:
+            "Direction of the stack layout. 'horizontal' flows items left-to-right (like HStack), 'vertical' flows top-to-bottom (like VStack). Note: the value is 'horizontal', NOT 'row'.",
+          default: "'vertical'",
+        },
+        {
+          name: 'gap',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Spacing step (number literal): 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10. Pass as a JSX number expression e.g. gap={4}, NOT a string like gap="4".',
+        },
+        {
+          name: 'padding',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Inner padding on all sides, using the spacing scale. Pass as a JSX number expression e.g. padding={3}.',
+        },
+        {
+          name: 'paddingInline',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Inline (horizontal) padding. Overrides padding on the inline axis when both are set.',
+        },
+        {
+          name: 'paddingBlock',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Block (vertical) padding. Overrides padding on the block axis when both are set.',
+        },
+        {
+          name: 'isScrollable',
+          type: 'boolean',
+          description:
+            'Enables scrollable overflow (overflow: auto).',
+          default: 'false',
+        },
+        {
+          name: 'width',
+          type: 'SizeValue',
+          description: "Width of the stack container. Numbers are treated as pixels, strings are used as-is (e.g., '100%').",
+        },
+        {
+          name: 'height',
+          type: 'SizeValue',
+          description: "Height of the stack container. Numbers are treated as pixels, strings are used as-is (e.g., '100%').",
+        },
+        {
+          name: 'maxWidth',
+          type: 'SizeValue',
+          description: "Maximum width of the stack container.",
+        },
+        {
+          name: 'minHeight',
+          type: 'SizeValue',
+          description: "Minimum height of the stack container.",
+        },
+        {
+          name: 'hAlign',
+          type: "'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch'",
+          description: "Horizontal alignment. When direction='horizontal': main-axis (justify-content). When direction='vertical': cross-axis (align-items).",
+        },
+        {
+          name: 'vAlign',
+          type: "'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch'",
+          description: "Vertical alignment. When direction='horizontal': cross-axis (align-items). When direction='vertical': main-axis (justify-content).",
+        },
+        {
+          name: 'justify',
+          type: "'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'",
+          description: "Main-axis alignment alias. Resolves to hAlign (horizontal) or vAlign (vertical). Note: use 'between', NOT 'space-between'.",
+        },
+        {
+          name: 'align',
+          type: "'start' | 'center' | 'end' | 'stretch'",
+          description: 'Cross-axis alignment alias. Mirrors CSS align-items.',
+        },
+        {
+          name: 'wrap',
+          type: "'nowrap' | 'wrap' | 'wrap-reverse'",
+          description: 'Flex wrap behavior.',
+          default: "'nowrap'",
+        },
+        {
+          name: 'as',
+          type: 'ElementType',
+          description: 'HTML element to render as the stack container.',
+          default: "'div'",
+        },
+        {
+          name: 'children',
+          type: 'ReactNode',
+          description: 'Stack content.',
+        },
+        {
+          name: 'xstyle',
+          type: 'StyleXStyles',
+          description:
+            'StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object like style={{}}.',
+        },
+      ],
+    },
+
     {
       name: 'HStack',
       isHiddenFromOverview: true,
@@ -268,7 +378,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Stack',
   displayName: 'Stack',
@@ -457,7 +567,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'Stack layout primitives for horizontal/vertical sequences using flexbox w/ themed spacing tokens.',
   usage: {

package/src/Stack/Stack.tsx

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

package/src/Stack/StackItem.tsx

@@ -8,7 +8,7 @@
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Stack/Stack.doc.mjs
- * - /packages/cli/templates/blocks/components/Stack/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Stack/ (showcase blocks)
  */
 
 import {createElement, type ElementType, type ReactNode, type Ref} from 'react';