@astryxdesign/core 0.2.0 → 0.3.0-canary.041a0ef

package/src/Lightbox/Lightbox.test.tsx

@@ -421,6 +421,184 @@ describe('Lightbox', () => {
     });
   });
 
+  describe('keyboard zoom and pan', () => {
+    const media = [
+      {src: '/a.jpg', alt: 'Image A'},
+      {src: '/b.jpg', alt: 'Image B'},
+      {src: '/c.jpg', alt: 'Image C'},
+    ];
+
+    function zoomTarget(): HTMLElement {
+      return screen.getByRole('button', {name: 'Zoom'});
+    }
+
+    it('exposes the image as a focusable zoom toggle when hasZoom is on', () => {
+      render(
+        <Lightbox
+          isOpen={true}
+          onOpenChange={() => {}}
+          media={{src: '/photo.jpg', alt: 'Photo'}}
+          hasZoom
+        />,
+      );
+      const target = zoomTarget();
+      expect(target).toHaveAttribute('tabindex', '0');
+      expect(target).toHaveAttribute('aria-pressed', 'false');
+    });
+
+    it('toggles zoom with Enter on the image', () => {
+      render(
+        <Lightbox
+          isOpen={true}
+          onOpenChange={() => {}}
+          media={{src: '/photo.jpg', alt: 'Photo'}}
+          hasZoom
+        />,
+      );
+      const target = zoomTarget();
+      fireEvent.keyDown(target, {key: 'Enter'});
+      expect(target).toHaveAttribute('aria-pressed', 'true');
+      fireEvent.keyDown(target, {key: 'Enter'});
+      expect(target).toHaveAttribute('aria-pressed', 'false');
+    });
+
+    it('toggles zoom with Space on the image', () => {
+      render(
+        <Lightbox
+          isOpen={true}
+          onOpenChange={() => {}}
+          media={{src: '/photo.jpg', alt: 'Photo'}}
+          hasZoom
+        />,
+      );
+      const target = zoomTarget();
+      fireEvent.keyDown(target, {key: ' '});
+      expect(target).toHaveAttribute('aria-pressed', 'true');
+      fireEvent.keyDown(target, {key: ' '});
+      expect(target).toHaveAttribute('aria-pressed', 'false');
+    });
+
+    it('zooms in with + and out with - from anywhere in the dialog', () => {
+      render(
+        <Lightbox
+          isOpen={true}
+          onOpenChange={() => {}}
+          media={{src: '/photo.jpg', alt: 'Photo'}}
+          hasZoom
+        />,
+      );
+      const dialog = document.querySelector('dialog')!;
+      fireEvent.keyDown(dialog, {key: '+'});
+      expect(zoomTarget()).toHaveAttribute('aria-pressed', 'true');
+      fireEvent.keyDown(dialog, {key: '-'});
+      expect(zoomTarget()).toHaveAttribute('aria-pressed', 'false');
+      // `=` (unshifted `+` on most layouts) also zooms in.
+      fireEvent.keyDown(dialog, {key: '='});
+      expect(zoomTarget()).toHaveAttribute('aria-pressed', 'true');
+    });
+
+    it('pans with arrow keys while zoomed instead of navigating the gallery', () => {
+      const onIndexChange = vi.fn();
+      render(
+        <Lightbox
+          isOpen={true}
+          onOpenChange={() => {}}
+          media={media}
+          index={1}
+          onIndexChange={onIndexChange}
+          hasZoom
+        />,
+      );
+      const dialog = document.querySelector('dialog')!;
+      fireEvent.keyDown(zoomTarget(), {key: 'Enter'});
+      const img = screen.getByAltText('Image B');
+      expect(img.getAttribute('style') ?? '').toContain('translate(0px, 0px)');
+      // ArrowRight reveals content to the right (image shifts left) and must
+      // not fall through to gallery navigation.
+      fireEvent.keyDown(dialog, {key: 'ArrowRight'});
+      expect(onIndexChange).not.toHaveBeenCalled();
+      expect(img.getAttribute('style') ?? '').toContain(
+        'translate(-25px, 0px)',
+      );
+      fireEvent.keyDown(dialog, {key: 'ArrowDown'});
+      expect(img.getAttribute('style') ?? '').toContain(
+        'translate(-25px, -25px)',
+      );
+      fireEvent.keyDown(dialog, {key: 'ArrowLeft'});
+      fireEvent.keyDown(dialog, {key: 'ArrowUp'});
+      expect(img.getAttribute('style') ?? '').toContain('translate(0px, 0px)');
+      expect(onIndexChange).not.toHaveBeenCalled();
+    });
+
+    it('navigates the gallery with arrows when not zoomed, even with hasZoom', () => {
+      const onIndexChange = vi.fn();
+      render(
+        <Lightbox
+          isOpen={true}
+          onOpenChange={() => {}}
+          media={media}
+          index={1}
+          onIndexChange={onIndexChange}
+          hasZoom
+        />,
+      );
+      const dialog = document.querySelector('dialog')!;
+      fireEvent.keyDown(dialog, {key: 'ArrowRight'});
+      expect(onIndexChange).toHaveBeenCalledWith(2);
+    });
+
+    it('announces zoom state changes politely', async () => {
+      render(
+        <Lightbox
+          isOpen={true}
+          onOpenChange={() => {}}
+          media={{src: '/photo.jpg', alt: 'Photo'}}
+          hasZoom
+        />,
+      );
+      fireEvent.keyDown(zoomTarget(), {key: 'Enter'});
+      await waitFor(() => {
+        expect(politeRegion()).toHaveTextContent('Zoomed in');
+      });
+      fireEvent.keyDown(zoomTarget(), {key: 'Enter'});
+      await waitFor(() => {
+        expect(politeRegion()).toHaveTextContent('Zoomed out');
+      });
+    });
+
+    it('has no zoom target or key bindings when hasZoom is off', () => {
+      const onIndexChange = vi.fn();
+      render(
+        <Lightbox
+          isOpen={true}
+          onOpenChange={() => {}}
+          media={media}
+          index={1}
+          onIndexChange={onIndexChange}
+        />,
+      );
+      expect(screen.queryByRole('button', {name: 'Zoom'})).toBeNull();
+      const dialog = document.querySelector('dialog')!;
+      fireEvent.keyDown(dialog, {key: '+'});
+      expect(document.querySelector('[aria-pressed]')).toBeNull();
+      // Arrows still navigate the gallery.
+      fireEvent.keyDown(dialog, {key: 'ArrowRight'});
+      expect(onIndexChange).toHaveBeenCalledWith(2);
+    });
+
+    it('does not expose a zoom target for video items', () => {
+      render(
+        <Lightbox
+          isOpen={true}
+          onOpenChange={() => {}}
+          media={{src: '/clip.mp4', alt: 'A clip', type: 'video'}}
+          hasZoom
+        />,
+      );
+      expect(screen.queryByRole('button', {name: 'Zoom'})).toBeNull();
+    });
+  });
+
   describe('video support', () => {
     it('renders a video element when type is video', () => {
       const {container} = render(
@@ -443,4 +621,37 @@ describe('Lightbox', () => {
     );
     expect(container.querySelector('dialog')).not.toBeInTheDocument();
   });
+
+  describe('backdrop dismiss', () => {
+    it('calls onOpenChange(false) when the dark area around the media is clicked', () => {
+      const onOpenChange = vi.fn();
+      render(
+        <Lightbox
+          isOpen={true}
+          onOpenChange={onOpenChange}
+          media={{src: '/photo.jpg', alt: 'Photo'}}
+        />,
+      );
+      // The container fills the whole dialog, so a click on the visual
+      // backdrop (the dark area around the media) lands on it — not on the
+      // dialog element itself.
+      const dialog = document.querySelector('dialog')!;
+      const container = dialog.firstElementChild!;
+      fireEvent.click(container);
+      expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it('does not close when the media itself is clicked', () => {
+      const onOpenChange = vi.fn();
+      render(
+        <Lightbox
+          isOpen={true}
+          onOpenChange={onOpenChange}
+          media={{src: '/photo.jpg', alt: 'Photo'}}
+        />,
+      );
+      fireEvent.click(screen.getByRole('img', {hidden: true}));
+      expect(onOpenChange).not.toHaveBeenCalled();
+    });
+  });
 });

package/src/Lightbox/Lightbox.tsx

@@ -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 {
@@ -91,8 +91,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;
@@ -158,6 +158,16 @@ const styles = stylex.create({
       '@media (hover: hover)': 'zoom-in',
     },
   },
+  zoomTarget: {
+    outline: {
+      default: 'none',
+      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
+    },
+    outlineOffset: {
+      default: '0',
+      ':focus-visible': '2px',
+    },
+  },
   imageWrapperZoomed: {
     cursor: 'grab',
   },
@@ -205,7 +215,12 @@ const styles = stylex.create({
   navButton: {
     position: 'absolute',
     top: '50%',
-    transform: 'translateY(-50%)',
+    // The individual `translate` property, not `transform`: this style now
+    // lands on the Button root, and a `transform` here replaces the Button's
+    // own transform rules — measured: the `scale(0.98)` press feedback stops
+    // firing. `translate` composes with them, reproducing exactly what the
+    // removed wrapper element did (wrapper translated, button scaled).
+    translate: '0 -50%',
     zIndex: 1,
   },
   navPrev: {
@@ -234,12 +249,28 @@ const dynamicStyles = stylex.create({
   }),
 });
 
+/**
+ * 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: Record<string, [number, number]> = {
+  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,
@@ -285,6 +316,7 @@ export function Lightbox({
 }: LightboxProps) {
   const t = useTranslator();
   const dialogRef = useRef<HTMLDialogElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
   const imageWrapperRef = useRef<HTMLDivElement>(null);
   const triggerElementRef = useRef<Element | null>(null);
 
@@ -390,10 +422,19 @@ export function Lightbox({
     [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: ReactMouseEvent<HTMLDialogElement>) => {
-      if (e.target === e.currentTarget) {
+      if (didDragRef.current) {
+        didDragRef.current = false;
+        return;
+      }
+      if (e.target === e.currentTarget || e.target === containerRef.current) {
         handleClose();
       }
     },
@@ -413,9 +454,52 @@ 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: number) => {
+      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: React.KeyboardEvent) => {
+      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();
@@ -424,22 +508,19 @@ export function Lightbox({
         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});
-    }
-  }, [hasZoom, zoom]);
+  // Enter/Space on the focused image wrapper (role="button") toggles zoom.
+  const handleImageKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        handleDoubleClick();
+      }
+    },
+    [handleDoubleClick],
+  );
 
   // Pan: mouse drag when zoomed
   const handlePointerDown = useCallback(
@@ -448,6 +529,7 @@ export function Lightbox({
         return;
       }
       setIsDragging(true);
+      didDragRef.current = false;
       dragStartRef.current = {
         x: e.clientX,
         y: e.clientY,
@@ -464,6 +546,7 @@ export function Lightbox({
     }
 
     const handlePointerMove = (e: PointerEvent) => {
+      didDragRef.current = true;
       const dx = e.clientX - dragStartRef.current.x;
       const dy = e.clientY - dragStartRef.current.y;
       setPan({
@@ -485,6 +568,7 @@ export function Lightbox({
   }, [isDragging]);
 
   const isZoomed = zoom > 1;
+  const isZoomTarget = hasZoom && !isVideo;
   const imageTransform =
     zoom === 1
       ? null
@@ -514,49 +598,56 @@ export function Lightbox({
         style,
       )}
       {...props}>
-      <div {...stylex.props(styles.container)}>
+      <div ref={containerRef} {...stylex.props(styles.container)}>
         {/* Close button */}
-        <div {...stylex.props(styles.closeButton)}>
-          <IconButton
-            icon={<Icon icon="close" size="sm" color="inherit" />}
-            label={t('@astryx.lightbox.close')}
-            variant="ghost"
-            onClick={handleClose}
-            xstyle={styles.controlButton}
-          />
-        </div>
+        <IconButton
+          icon={<Icon icon="close" size="sm" color="inherit" />}
+          label={t('@astryx.lightbox.close')}
+          variant="ghost"
+          onClick={handleClose}
+          xstyle={[styles.closeButton, styles.controlButton]}
+        />
 
         {/* Gallery nav: prev — stays mounted and is disabled at the start of
             the range so pressing/arrowing to the boundary doesn't unmount the
             focused control and drop focus to <body>. */}
         {isGallery && (
-          <div {...stylex.props(styles.navButton, styles.navPrev)}>
-            <IconButton
-              icon={
-                <span {...stylex.props(rtlStyles.mirror)}>
-                  <Icon icon="chevronLeft" size="sm" color="inherit" />
-                </span>
-              }
-              label={t('@astryx.lightbox.previous')}
-              variant="ghost"
-              isDisabled={!canPrev}
-              onClick={goToPrev}
-              xstyle={styles.controlButton}
-            />
-          </div>
+          <IconButton
+            icon={
+              <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]}
+          />
         )}
 
         {/* Media + caption group (centered together) */}
         <div {...stylex.props(styles.mediaGroup)}>
           <div
             ref={imageWrapperRef}
+            // The wrapper is a keyboard-operable zoom toggle when zoom is
+            // enabled: Enter/Space toggles, aria-pressed reflects state.
+            role={isZoomTarget ? 'button' : undefined}
+            tabIndex={isZoomTarget ? 0 : undefined}
+            aria-pressed={isZoomTarget ? isZoomed : undefined}
+            aria-label={isZoomTarget ? t('@astryx.lightbox.zoom') : undefined}
             {...stylex.props(
               styles.imageWrapper,
+              isZoomTarget && styles.zoomTarget,
               !isVideo && hasZoom && !isZoomed && styles.imageWrapperZoomable,
               !isVideo && isZoomed && styles.imageWrapperZoomed,
               !isVideo && isDragging && styles.imageWrapperDragging,
             )}
             onDoubleClick={isVideo ? undefined : handleDoubleClick}
+            onKeyDown={isZoomTarget ? handleImageKeyDown : undefined}
             onPointerDown={isVideo ? undefined : handlePointerDown}>
             {isVideo ? (
               <video
@@ -589,20 +680,21 @@ export function Lightbox({
         {/* Gallery nav: next — see "prev" above; stays mounted and disabled at
             the end of the range instead of unmounting. */}
         {isGallery && (
-          <div {...stylex.props(styles.navButton, styles.navNext)}>
-            <IconButton
-              icon={
-                <span {...stylex.props(rtlStyles.mirror)}>
-                  <Icon icon="chevronRight" size="sm" color="inherit" />
-                </span>
-              }
-              label={t('@astryx.lightbox.next')}
-              variant="ghost"
-              isDisabled={!canNext}
-              onClick={goToNext}
-              xstyle={styles.controlButton}
-            />
-          </div>
+          <IconButton
+            icon={
+              <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]}
+          />
         )}
 
         {/* Gallery counter */}

package/src/Link/Link.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: 'Link',
@@ -143,7 +143,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Link',
   displayName: 'Link',
@@ -275,7 +275,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Styled anchor links w/ multiple variants + polymorphic link infra for custom link components (Next.js Link, React Router Link, etc.).',

package/src/Link/Link.tsx

@@ -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 type {ReactNode} from 'react';
@@ -44,6 +44,7 @@ import {mergeProps} from '../utils';
 import {computeTargetAndRel} from './computeTargetAndRel';
 import {useInteractiveRole} from '../hooks/useInteractiveRole';
 import {themeProps} from '../utils/themeProps';
+import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {useTranslator} from '../i18n';
 
 /**
@@ -68,14 +69,6 @@ const styles = stylex.create({
     transitionProperty: 'color, text-decoration',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
-    outline: {
-      default: null,
-      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: {
-      default: '0',
-      ':focus-visible': '2px',
-    },
   },
   /**
    * Reset styles for rendering as a <button> when href is undefined.
@@ -368,7 +361,7 @@ export function Link({
         disabled={isDisabled}
         {...mergeProps(
           themeProps('link', {color}),
-          stylex.props(
+          focusOutlineProps.focusVisible(
             styles.base,
             styles.buttonReset,
             linkColorStyles[color],
@@ -400,7 +393,7 @@ export function Link({
         tabIndex={-1}
         {...mergeProps(
           themeProps('link', {color}),
-          stylex.props(
+          focusOutlineProps.focusVisible(
             styles.base,
             linkColorStyles[color],
             hasUnderline && styles.hasUnderline,
@@ -428,7 +421,7 @@ export function Link({
         tabIndex={isDisabled ? -1 : undefined}
         {...mergeProps(
           themeProps('link', {color}),
-          stylex.props(
+          focusOutlineProps.focusVisible(
             styles.base,
             linkColorStyles[color],
             hasUnderline && styles.hasUnderline,

package/src/Link/LinkProvider.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: 'LinkProvider',
@@ -18,7 +18,7 @@ export const docs = {
   ],
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'Wraps app to replace default <a> tag w/ framework-specific link component (e.g. Next.js Link) for client-side routing across all Astryx components.',
   usage: {

package/src/Link/LinkProvider.tsx

@@ -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, type ReactNode} from 'react';