@astryxdesign/core 0.2.0 → 0.3.0

package/src/Token/TokenLink.tsx

@@ -0,0 +1,107 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file TokenLink.tsx
+ * @input Rendered token pieces (icon, label, endContent, remove button) plus
+ *   container/link styling props and the resolved LinkComponent
+ * @output Exports TokenLink, the interactive container for the href+onRemove Token variant
+ * @position Internal to Token; keeps Token.tsx presentational
+ *
+ * Token is a presentational component (see
+ * /internal/eslint-plugin-astryx/presentational-component.js) and must not use
+ * refs or effects. When a Token has both `href` and `onRemove`, the remove
+ * <button> must be a sibling of the link (nesting a button inside an anchor is
+ * invalid HTML — WCAG 4.1.2), so the surface becomes a clickable container that
+ * delegates to an inner link. That delegation needs refs, so it lives here.
+ *
+ * useClickableContainer gives the container middle-click and cmd/ctrl-click
+ * open-in-new-tab behavior for the link, ignores clicks on nested interactive
+ * elements (the remove button), and skips activation during text selection.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Token/Token.tsx (renders TokenLink for the href+onRemove case)
+ * - /packages/core/src/Token/Token.test.tsx (tests for delegated behavior)
+ */
+
+import type {ReactNode, CSSProperties, Ref, HTMLAttributes} from 'react';
+import {useRef} from 'react';
+import {mergeRefs} from '../utils';
+import {useClickableContainer} from '../hooks/useClickableContainer';
+import type {LinkComponentType} from '../Link/types';
+
+export interface TokenLinkProps extends HTMLAttributes<HTMLElement> {
+  /** Ref forwarded to the container element. */
+  ref?: Ref<HTMLElement>;
+  /** Link URL. */
+  href: string;
+  /** Whether the token is disabled. */
+  isDisabled: boolean;
+  /** Resolved link component (native `<a>` or a router link). */
+  LinkComponent: LinkComponentType;
+  /** `stylex.props()` output applied to the invisible inner link. */
+  linkStyleProps: {className?: string; style?: CSSProperties};
+  /** Visible (or visually hidden) label node rendered inside the link. */
+  labelContent: ReactNode;
+  /** Optional leading icon. */
+  icon?: ReactNode;
+  /** Content rendered after the label, before the remove button. */
+  endContent?: ReactNode;
+  /** The remove button node, rendered as a sibling of the link. */
+  removeButton: ReactNode;
+  /** Allow data-* attributes (e.g. data-testid, theme targets) on the container. */
+  [dataAttr: `data-${string}`]: unknown;
+}
+
+/**
+ * Interactive container for a Token that is both a link and removable.
+ *
+ * Renders a `<span>` wrapping an invisible inner link and the remove button as
+ * siblings. useClickableContainer delegates clicks on the surface to the link
+ * (including middle-click / cmd+click to open in a new tab) while the remove
+ * button keeps handling its own clicks.
+ */
+export function TokenLink({
+  ref,
+  href,
+  isDisabled,
+  LinkComponent,
+  linkStyleProps,
+  labelContent,
+  icon,
+  endContent,
+  removeButton,
+  ...containerProps
+}: TokenLinkProps) {
+  const containerRef = useRef<HTMLElement | null>(null);
+  const linkRef = useRef<HTMLElement | null>(null);
+
+  const {onClick, onMouseUp} = useClickableContainer({
+    containerRef,
+    interactiveRef: linkRef,
+    href,
+    disabled: isDisabled,
+  });
+
+  return (
+    <span
+      ref={mergeRefs(ref, containerRef)}
+      onClick={isDisabled ? undefined : onClick}
+      onMouseUp={isDisabled ? undefined : onMouseUp}
+      {...containerProps}>
+      {icon}
+      <LinkComponent
+        ref={linkRef as Ref<HTMLAnchorElement>}
+        href={href}
+        aria-disabled={isDisabled || undefined}
+        {...linkStyleProps}>
+        {labelContent}
+      </LinkComponent>
+      {endContent}
+      {removeButton}
+    </span>
+  );
+}
+
+TokenLink.displayName = 'TokenLink';

package/src/Token/index.ts

@@ -11,5 +11,32 @@
  * SYNC: When adding new Token files, update exports here
  */
 
+/**
+ * Extensible color map for Token.
+ *
+ * Theme packages can add custom colors via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/Token' {
+ *   interface TokenColorMap {
+ *     brand: true;
+ *   }
+ * }
+ * ```
+ */
+export interface TokenColorMap {
+  default: true;
+  red: true;
+  orange: true;
+  yellow: true;
+  green: true;
+  teal: true;
+  cyan: true;
+  blue: true;
+  purple: true;
+  pink: true;
+  gray: true;
+}
+
 export {Token} from './Token';
-export type {TokenProps, TokenColor, TokenColorMap, TokenSize} from './Token';
+export type {TokenProps, TokenColor, TokenSize} from './Token';

package/src/Tokenizer/Tokenizer.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: 'Tokenizer',
@@ -237,7 +237,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Tokenizer',
   displayName: 'Tokenizer',
@@ -451,7 +451,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'Multi-select typeahead w/ token chips for selected items. Composes BaseTypeahead for search+Token for chips.',
   usage: {

package/src/Tokenizer/Tokenizer.tsx

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

package/src/Toolbar/Toolbar.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: 'Toolbar',
@@ -156,7 +156,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   components: [
     {
@@ -191,7 +191,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'Horizontal bar w/ left, center, right areas. For contextual actions in content, not page headers. Size cascades to children.',
   usage: {

package/src/Toolbar/Toolbar.tsx

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

package/src/Tooltip/Tooltip.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: 'Tooltip',
@@ -109,7 +109,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Tooltip',
   displayName: 'Tooltip',
@@ -208,7 +208,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'Hover/focus triggered tooltip for displaying short, non-interactive text anchored to trigger element.',
   usage: {

package/src/Tooltip/Tooltip.tsx

@@ -11,7 +11,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Tooltip/index.ts
  * - /apps/storybook/stories/Tooltip.stories.tsx
- * - /packages/cli/templates/blocks/components/Tooltip/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Tooltip/ (showcase blocks)
  */
 
 import React, {

package/src/Tooltip/useTooltip.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: 'useTooltip',
   displayName: 'useTooltip',
@@ -40,7 +40,7 @@ export const docs = {
   category: 'interaction',
 };
 
-/** @type {import('../docs-types').HookTranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
 export const docsDense = {
   description: 'Headless hover/focus tooltip hook. Builds on useLayer w/ hover intent, keyboard focus handling, aria-describedby. Use for custom triggers without wrapper component.',
   paramDescriptions: {

package/src/TopNav/TopNav.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: 'TopNav',
@@ -143,7 +143,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -163,7 +163,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'Top navigation bar for app headers w/ slot-based layout+companion nav item components.',
   usage: {

package/src/TopNav/TopNav.test.tsx

@@ -281,8 +281,8 @@ describe('TopNavHeading', () => {
     });
   });
 
-  it('renders as anchor when href is provided', () => {
-    render(<TopNavHeading heading="Home" href="/" />);
+  it('renders as anchor when headingHref is provided', () => {
+    render(<TopNavHeading heading="Home" headingHref="/" />);
     const link = screen.getByRole('link');
     expect(link).toHaveAttribute('href', '/');
   });

package/src/TopNav/TopNav.tsx

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

package/src/TopNav/TopNavHeading.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: 'TopNavHeading',
@@ -33,11 +33,6 @@ export const docs = {
       type: 'string',
       description: 'Link for the heading text (e.g. product home). When no menu is present and this is the only href, the whole heading becomes one clickable link.',
     },
-    {
-      name: 'href',
-      type: 'string',
-      description: 'Deprecated: use headingHref instead. URL to navigate to when clicked.',
-    },
     {
       name: 'superheading',
       type: 'string',
@@ -122,11 +117,6 @@ export const docsZh = {
       type: 'string',
       description: '标题文本的链接（如产品首页）。当没有菜单且这是唯一的 href 时，整个标题变为一个可点击链接。',
     },
-    {
-      name: 'href',
-      type: 'string',
-      description: '已弃用，请使用 headingHref。点击时导航到的 URL。',
-    },
     {
       name: 'superheading',
       type: 'string',
@@ -179,7 +169,6 @@ export const docsDense = {
     logo: 'Logo before heading text. Image, NavIcon, or ReactNode.',
     heading: 'Product/app name.',
     headingHref: 'Link for heading (product home). Only href + no menu → whole heading is link.',
-    href: 'Deprecated: use headingHref.',
     superheading: 'Text above heading (suite name). Smaller secondary style.',
     superheadingHref: 'Link for superheading. Independent inline link when menu present.',
     subheading: 'Text below heading (account context). Smaller secondary style.',

package/src/TopNav/TopNavHeading.tsx

@@ -17,7 +17,7 @@
  * - /packages/core/src/TopNav/TopNav.test.tsx
  * - /packages/core/src/TopNav/index.ts
  * - /apps/storybook/stories/TopNav.stories.tsx
- * - /packages/cli/templates/blocks/components/TopNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TopNav/ (showcase blocks)
  */
 
 import {useMemo, useRef, type ReactNode} from 'react';
@@ -31,7 +31,7 @@ import {
 } from '../theme/tokens.stylex';
 import {usePopover} from '../Popover/usePopover';
 import {Link} from '../Link';
-import {getIcon} from '../Icon/globalIconRegistry';
+import {useIcon} from '../Icon';
 import {useLinkComponent} from '../Link/useLinkComponent';
 import type {LinkComponentType} from '../Link/types';
 import {mergeProps, mergeRefs} from '../utils';
@@ -227,14 +227,8 @@ export interface TopNavHeadingProps extends BaseProps<HTMLElement> {
   heading?: string;
   /**
    * Link for the heading (e.g., product home).
-   * Alias: `href` (for backward compatibility).
    */
   headingHref?: string;
-  /**
-   * @deprecated Use `headingHref` instead.
-   * URL to navigate to when the heading is clicked.
-   */
-  href?: string;
   /**
    * Text above the heading (e.g., suite name).
    */
@@ -304,8 +298,7 @@ export function TopNavHeading({
   logo,
   logoLabel,
   heading,
-  headingHref: headingHrefProp,
-  href,
+  headingHref,
   superheading,
   superheadingHref,
   subheading,
@@ -320,9 +313,8 @@ export function TopNavHeading({
   ...props
 }: TopNavHeadingProps) {
   const t = useTranslator();
+  const chevronDownIcon = useIcon('chevronDown');
   const LinkComponent = useLinkComponent(as);
-  // Support both headingHref and legacy href
-  const headingHref = headingHrefProp ?? href;
   // When the logo is wrapped in a link it needs its own accessible name (the
   // logo image itself is decorative). Prefer an explicit logoLabel, fall back
   // to the heading text. axe: link-name.
@@ -412,7 +404,7 @@ export function TopNavHeading({
   );
 
   const chevronElement = showChevron && (
-    <span {...stylex.props(styles.chevron)}>{getIcon('chevronDown')}</span>
+    <span {...stylex.props(styles.chevron)}>{chevronDownIcon}</span>
   );
 
   const headerEndContentElement = headerEndContent && (
@@ -428,9 +420,7 @@ export function TopNavHeading({
       onClick={triggerProps.onClick}>
       {logo && <span {...stylex.props(styles.logo)}>{logo}</span>}
       {renderTextContent(
-        <span {...stylex.props(styles.popoverChevron)}>
-          {getIcon('chevronDown')}
-        </span>,
+        <span {...stylex.props(styles.popoverChevron)}>{chevronDownIcon}</span>,
       )}
     </button>
   );
@@ -507,7 +497,7 @@ export function TopNavHeading({
               }}
               {...popover.triggerProps}
               {...stylex.props(styles.chevron, styles.interactive)}>
-              {getIcon('chevronDown')}
+              {chevronDownIcon}
             </button>,
           )}
           {headerEndContentElement}
@@ -576,7 +566,7 @@ export function TopNavHeading({
                 }}
                 {...popover.triggerProps}
                 {...stylex.props(styles.chevron, styles.interactive)}>
-                {getIcon('chevronDown')}
+                {chevronDownIcon}
               </button>
             ) : undefined,
           )}

package/src/TopNav/TopNavItem.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: 'TopNavItem',

package/src/TopNav/TopNavItem.tsx

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

package/src/TopNav/TopNavMegaMenu.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: 'TopNavMegaMenu',

package/src/TopNav/TopNavMegaMenu.tsx

@@ -20,7 +20,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/TopNav/TopNav.doc.mjs
  * - /packages/core/src/TopNav/index.ts
- * - /packages/cli/templates/blocks/components/TopNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TopNav/ (showcase blocks)
  */
 
 import React, {
@@ -44,7 +44,7 @@ import {
 } from '../theme/tokens.stylex';
 import {usePopover} from '../Popover/usePopover';
 import {Grid} from '../Grid/Grid';
-import {getIcon} from '../Icon/globalIconRegistry';
+import {useIcon} from '../Icon';
 import {mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {navItemStyles} from '../NavItem/navItemStyles.stylex';
@@ -123,6 +123,18 @@ const styles = stylex.create({
       transform: 'translateY(-4px)',
     },
   },
+  // Clamp the anchored layer to the space available below the nav so a tall
+  // menu never runs off the bottom of the viewport. The layer is positioned
+  // with position-area: self-block-end, so its containing block spans from
+  // the nav's block-end to the viewport edge — 100% is exactly that space.
+  // The layer is a flex column so panelContainer can shrink and scroll its
+  // own content, keeping the surface radius/shadow static at the edges.
+  // Internal scroll is a stopgap until the mobile bottom-sheet lands.
+  panelViewportFit: {
+    display: 'flex',
+    flexDirection: 'column',
+    maxHeight: `calc(100% - ${spacingVars['--spacing-3']})`,
+  },
   // Visual styles for the panel content container.
   panelContainer: {
     backgroundColor: colorVars['--color-background-popover'],
@@ -132,6 +144,11 @@ const styles = stylex.create({
     borderRadius: radiusVars['--radius-container'],
     boxShadow: shadowVars['--shadow-low'],
     overflow: 'hidden',
+    // Allow the container to shrink inside the height-clamped layer so its
+    // content (panelContent) can scroll rather than overflow the viewport.
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: 0,
   },
   panelContent: {
     display: 'flex',
@@ -139,7 +156,14 @@ const styles = stylex.create({
     gap: spacingVars['--spacing-6'],
     paddingBlock: spacingVars['--spacing-3'],
     paddingInline: spacingVars['--spacing-3'],
-    maxWidth: 960,
+    // Clamp to the viewport (minus a gutter) so the anchored panel never
+    // overflows the screen edge on narrow viewports; caps at 960px otherwise.
+    maxWidth: `min(960px, calc(100dvw - ${spacingVars['--spacing-4']}))`,
+    boxSizing: 'border-box',
+    // Scroll internally when the menu is taller than the available space
+    // below the nav (paired with panelViewportFit on the layer).
+    overflowY: 'auto',
+    overscrollBehavior: 'contain',
   },
   menuWrapper: {
     flexGrow: 2,
@@ -340,6 +364,7 @@ function DefaultMegaMenu({
   onOpenChange,
 }: TopNavMegaMenuProps) {
   const slot = useTopNavSlot();
+  const chevronDownIcon = useIcon('chevronDown');
   const showTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const triggerButtonRef = useRef<HTMLButtonElement | null>(null);
@@ -452,7 +477,7 @@ function DefaultMegaMenu({
             styles.chevron,
             popover.isOpen && styles.chevronOpen,
           )}>
-          {getIcon('chevronDown')}
+          {chevronDownIcon}
         </span>
       </button>
       {popover.render(
@@ -484,7 +509,7 @@ function DefaultMegaMenu({
         {
           placement: 'below',
           alignment: slot,
-          xstyle: styles.panelAnimation,
+          xstyle: [styles.panelAnimation, styles.panelViewportFit],
         },
       )}
     </>
@@ -501,6 +526,7 @@ function DrawerMegaMenu({
   featured,
 }: Pick<TopNavMegaMenuProps, 'label' | 'items' | 'featured'>) {
   const [isExpanded, setIsExpanded] = useState(false);
+  const chevronDownIcon = useIcon('chevronDown');
   const menuId = `mega-menu-${label.toLowerCase().replace(/\s+/g, '-')}`;
 
   return (
@@ -521,7 +547,7 @@ function DrawerMegaMenu({
             styles.drawerChevron,
             isExpanded && styles.drawerChevronExpanded,
           )}>
-          {getIcon('chevronDown')}
+          {chevronDownIcon}
         </span>
       </button>
 

package/src/TopNav/TopNavMegaMenuFeaturedCard.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: 'TopNavMegaMenuFeaturedCard',

package/src/TopNav/TopNavMegaMenuFeaturedCard.tsx

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

package/src/TopNav/TopNavMegaMenuItem.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: 'TopNavMegaMenuItem',

package/src/TopNav/TopNavMegaMenuItem.tsx

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

package/src/TopNav/TopNavMenu.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: 'TopNavMenu',