@astryxdesign/core 0.2.0-canary.ea693ac → 0.2.0-canary.ebed74f

package/src/Thumbnail/Thumbnail.test.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 import {describe, it, expect, vi} from 'vitest';
-import {render, screen} from '@testing-library/react';
+import {render, screen, fireEvent} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {Thumbnail} from './Thumbnail';
 
@@ -219,4 +219,27 @@ describe('Thumbnail', () => {
       expect(onRemove).toHaveBeenCalledOnce();
     });
   });
+
+  it('shows the placeholder when the image fails to load', () => {
+    render(<Thumbnail src="/broken.jpg" alt="Broken" data-testid="thumb" />);
+
+    fireEvent.error(screen.getByRole('img'));
+
+    expect(screen.queryByRole('img')).toBeNull();
+    const root = screen.getByTestId('thumb');
+    expect(root.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('retries a changed src after a load error', () => {
+    const {rerender} = render(
+      <Thumbnail src="/broken.jpg" alt="Photo" data-testid="thumb" />,
+    );
+    fireEvent.error(screen.getByRole('img'));
+    expect(screen.queryByRole('img')).toBeNull();
+
+    rerender(<Thumbnail src="/fixed.jpg" alt="Photo" data-testid="thumb" />);
+
+    const img = screen.getByRole('img');
+    expect(img).toHaveAttribute('src', '/fixed.jpg');
+  });
 });

package/src/Thumbnail/Thumbnail.tsx

@@ -22,9 +22,10 @@
  * - /packages/core/src/Thumbnail/Thumbnail.test.tsx
  * - /packages/core/src/Thumbnail/index.ts
  * - /apps/storybook/stories/Thumbnail.stories.tsx
- * - /packages/cli/templates/blocks/components/Thumbnail/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Thumbnail/ (showcase blocks)
  */
 
+import {useState} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {
   colorVars,
@@ -39,11 +40,11 @@ import {Skeleton} from '../Skeleton';
 import {Spinner} from '../Spinner';
 import {Tooltip} from '../Tooltip/Tooltip';
 import {useDevWarning} from '../hooks/useDevWarning';
+import {useContainerReveal} from '../hooks/useContainerReveal';
 import type {BaseProps} from '../BaseProps';
 import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
-import {thumbnailScope} from './thumbnail.markers.stylex';
 
 export interface ThumbnailProps extends BaseProps<HTMLDivElement> {
   /** Ref forwarded to the root element */
@@ -236,28 +237,6 @@ const styles = stylex.create({
     zIndex: 1,
     lineHeight: 0,
   },
-  // showRemoveOn="hover": the remove button is hidden at rest and revealed
-  // when the thumbnail is hovered or when focus enters it (keyboard). Only
-  // opacity is animated — the button stays mounted and focusable so tabbing
-  // to it triggers the :focus-within reveal. Any touch-capable device (incl.
-  // hybrid laptops that also report hover) keeps the button visible so the
-  // remove path is never gated behind an unavailable hover.
-  removeOnHover: {
-    opacity: {
-      default: 0,
-      [stylex.when.ancestor(':hover', thumbnailScope)]: {
-        '@media (hover: hover)': 1,
-      },
-      [stylex.when.ancestor(':focus-within', thumbnailScope)]: 1,
-      '@media (any-pointer: coarse)': 1,
-    },
-    transitionProperty: 'opacity',
-    transitionDuration: {
-      default: durationVars['--duration-fast'],
-      '@media (prefers-reduced-motion: reduce)': '0s',
-    },
-    transitionTimingFunction: easeVars['--ease-standard'],
-  },
 });
 
 // =============================================================================
@@ -318,14 +297,22 @@ export function Thumbnail({
 }: ThumbnailProps) {
   const t = useTranslator();
 
+  // Track the exact src that failed (rather than a boolean) so a changed src
+  // gets a fresh load attempt instead of the stale error.
+  const [erroredSrc, setErroredSrc] = useState<string | undefined>(undefined);
+
   const hasSrc = src != null;
+  const hasError = hasSrc && erroredSrc === src;
   const showSkeleton = isLoading && !hasSrc;
-  const showImage = hasSrc && !showSkeleton;
+  const showImage = hasSrc && !showSkeleton && !hasError;
   const showUploadOverlay = isLoading && hasSrc;
-  const showPlaceholder = !isLoading && !hasSrc;
+  const showPlaceholder = (!isLoading && !hasSrc) || hasError;
   const isInteractive = onClick != null && !isDisabled && !isLoading;
   const hasRemove = onRemove != null && !isDisabled;
   const isHoverReveal = hasRemove && showRemoveOn === 'hover';
+  const {getContainerProps, getContentRevealProps} = useContainerReveal({
+    isEnabled: isHoverReveal,
+  });
   const accessibleName =
     label && alt
       ? `${label} — ${alt}`
@@ -363,6 +350,7 @@ export function Thumbnail({
           alt={alt ?? ''}
           role={isImageDecorative ? 'presentation' : undefined}
           aria-hidden={isImageDecorative || undefined}
+          onError={() => setErroredSrc(src)}
           {...stylex.props(styles.image)}
         />
       )}
@@ -377,9 +365,12 @@ export function Thumbnail({
 
   const removeButtonEl = hasRemove ? (
     <div
-      {...stylex.props(
-        styles.removeSlot,
-        isHoverReveal && styles.removeOnHover,
+      {...mergeProps(
+        stylex.props(styles.removeSlot),
+        // The remove button is absolutely positioned in the corner, so it is
+        // already out of flow — an opacity-only reveal (layout preserved)
+        // matches its overlay placement instead of the clip recipe.
+        isHoverReveal ? getContentRevealProps({isLayoutPreserved: true}) : {},
       )}>
       <Button
         icon={<Icon icon="close" size="xsm" />}
@@ -410,12 +401,14 @@ export function Thumbnail({
       )}
       {...props}>
       <div
-        {...stylex.props(
-          styles.imageContainer,
-          isHoverReveal && thumbnailScope,
-          isInteractive && styles.interactive,
-          isInteractive && styles.overlay,
-          isInteractive && styles.hoverOnPointer,
+        {...mergeProps(
+          stylex.props(
+            styles.imageContainer,
+            isInteractive && styles.interactive,
+            isInteractive && styles.overlay,
+            isInteractive && styles.hoverOnPointer,
+          ),
+          isHoverReveal ? getContainerProps() : {},
         )}>
         {isInteractive ? (
           <button

package/src/TimeInput/TimeInput.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: 'TimeInput',
@@ -262,7 +262,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'TimeInput',
 
@@ -489,7 +489,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Time input that converts free-text entry to standard format with arrow-key adjustment.',

package/src/TimeInput/TimeInput.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/TimeInput/TimeInput.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/TimeInput/index.ts (exports if types change)
  * - /apps/storybook/stories/TimeInput.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/TimeInput/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TimeInput/ (showcase blocks)
  */
 
 import {

package/src/Timestamp/Timestamp.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: 'Timestamp',
@@ -26,9 +26,9 @@ export const docs = {
     },
     {
       name: 'format',
-      type: "'relative' | 'auto' | 'date' | 'date_long' | 'date_weekday' | 'date_time' | 'time' | 'system_date' | 'system_date_time' | 'system_time'",
+      type: "'relative' | 'relative_short' | 'auto' | 'date' | 'date_long' | 'date_weekday' | 'date_time' | 'time' | 'system_date' | 'system_date_time' | 'system_time'",
       description:
-        "Display format. 'relative' shows '2 hours ago', 'date' shows 'Mar 21, 2025', 'date_long' shows 'March 21, 2025', 'date_weekday' shows 'Wed, Mar 21, 2025', 'date_time' shows 'Mar 21, 2025, 2:51 PM', 'time' shows '2:51 PM', 'system_*' variants use ISO-style formatting, 'auto' switches from relative to date_time based on recency.",
+        "Display format. 'relative' shows '2 hours ago', 'relative_short' shows the same tiers abbreviated ('2h ago', '1d ago', '3mo ago') for compact surfaces, 'date' shows 'Mar 21, 2025', 'date_long' shows 'March 21, 2025', 'date_weekday' shows 'Wed, Mar 21, 2025', 'date_time' shows 'Mar 21, 2025, 2:51 PM', 'time' shows '2:51 PM', 'system_*' variants use ISO-style formatting, 'auto' switches from relative to date_time based on recency.",
       default: "'auto'",
     },
     {
@@ -117,7 +117,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   propDescriptions: {
     value: '\u8981\u663e\u793a\u7684\u65e5\u671f/\u65f6\u95f4\u3002\u63a5\u53d7 Unix \u65f6\u95f4\u6233\uff08\u79d2\uff09\u6216 ISO 8601 \u5b57\u7b26\u4e32\u3002',
@@ -158,7 +158,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'formatted timestamp with relative/absolute/auto modes, live updates, timezone display, multi-zone tooltip',
   usage: {

package/src/Timestamp/Timestamp.test.tsx

@@ -88,6 +88,137 @@ describe('Timestamp', () => {
     expect(screen.getByText('yesterday')).toBeInTheDocument();
   });
 
+  // --- relative_short format ---
+
+  describe('relative_short format', () => {
+    it('renders "now" for very recent times', () => {
+      render(
+        <Timestamp value={Date.now() / 1000 - 5} format="relative_short" />,
+      );
+      expect(screen.getByText('now')).toBeInTheDocument();
+    });
+
+    it('abbreviates each past tier (s/m/h/d/mo/y)', () => {
+      const {rerender} = render(
+        <Timestamp value={Date.now() / 1000 - 30} format="relative_short" />,
+      );
+      expect(screen.getByText('30s ago')).toBeInTheDocument();
+
+      rerender(
+        <Timestamp
+          value={Date.now() / 1000 - 5 * 60}
+          format="relative_short"
+        />,
+      );
+      expect(screen.getByText('5m ago')).toBeInTheDocument();
+
+      rerender(
+        <Timestamp
+          value={Date.now() / 1000 - 2 * 3600}
+          format="relative_short"
+        />,
+      );
+      expect(screen.getByText('2h ago')).toBeInTheDocument();
+
+      rerender(
+        <Timestamp
+          value={Date.now() / 1000 - 3 * 86400}
+          format="relative_short"
+        />,
+      );
+      expect(screen.getByText('3d ago')).toBeInTheDocument();
+
+      rerender(
+        <Timestamp
+          value={Date.now() / 1000 - 90 * 86400}
+          format="relative_short"
+        />,
+      );
+      expect(screen.getByText('3mo ago')).toBeInTheDocument();
+
+      rerender(
+        <Timestamp
+          value={Date.now() / 1000 - 730 * 86400}
+          format="relative_short"
+        />,
+      );
+      expect(screen.getByText('2y ago')).toBeInTheDocument();
+    });
+
+    it('uses "mo" for months so it never collides with "m" (minutes)', () => {
+      // 45 days → months tier. A bare "m" here would be indistinguishable from
+      // the minutes unit, so months must render as "mo".
+      render(
+        <Timestamp
+          value={Date.now() / 1000 - 45 * 86400}
+          format="relative_short"
+        />,
+      );
+      expect(screen.getByText('1mo ago')).toBeInTheDocument();
+    });
+
+    it('renders a single day as "1d ago" (no "yesterday" idiom in short form)', () => {
+      render(
+        <Timestamp
+          value={Date.now() / 1000 - 100000}
+          format="relative_short"
+        />,
+      );
+      expect(screen.getByText('1d ago')).toBeInTheDocument();
+    });
+
+    it('renders future times with the "in" prefix and abbreviated units', () => {
+      const {rerender} = render(
+        <Timestamp
+          value={Date.now() / 1000 + 5 * 60}
+          format="relative_short"
+        />,
+      );
+      expect(screen.getByText('in 5m')).toBeInTheDocument();
+
+      rerender(
+        <Timestamp
+          value={Date.now() / 1000 + 2 * 3600}
+          format="relative_short"
+        />,
+      );
+      expect(screen.getByText('in 2h')).toBeInTheDocument();
+    });
+
+    it('does not round a tier up past its own boundary', () => {
+      const {rerender} = render(
+        <Timestamp value={Date.now() / 1000 - 3599} format="relative_short" />,
+      );
+      expect(screen.getByText('59m ago')).toBeInTheDocument();
+
+      rerender(
+        <Timestamp value={Date.now() / 1000 - 86399} format="relative_short" />,
+      );
+      expect(screen.getByText('23h ago')).toBeInTheDocument();
+    });
+
+    it('treats a hair in the future as "now" (clock skew)', () => {
+      render(
+        <Timestamp value={Date.now() / 1000 + 2} format="relative_short" />,
+      );
+      expect(screen.getByText('now')).toBeInTheDocument();
+    });
+
+    it('keeps the full absolute date as the accessible name', () => {
+      render(
+        <Timestamp
+          value={Date.now() / 1000 - 2 * 3600}
+          format="relative_short"
+        />,
+      );
+      const el = screen.getByText('2h ago');
+      // Same a11y contract as the long relative form: the visible short label
+      // is backed by the full absolute date for screen readers.
+      expect(el).toHaveAttribute('aria-label');
+      expect(el.getAttribute('aria-label')).not.toBe('2h ago');
+    });
+  });
+
   // --- Standard display formats ---
 
   it('renders date format', () => {

package/src/Timestamp/Timestamp.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/Timestamp/Timestamp.test.tsx
  * - /packages/core/src/Timestamp/index.ts
  * - /apps/storybook/stories/Timestamp.stories.tsx
- * - /packages/cli/templates/blocks/components/Timestamp/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Timestamp/ (showcase blocks)
  */
 
 import {useEffect, useRef, useState, lazy, Suspense, Fragment} from 'react';
@@ -39,6 +39,7 @@ const LazyXDSTooltip = lazy(async () =>
 
 export type TimestampFormat =
   | 'relative'
+  | 'relative_short'
   | 'auto'
   | 'date'
   | 'date_long'
@@ -57,6 +58,9 @@ export interface TimestampProps extends BaseProps<HTMLTimeElement> {
   /**
    * Display format.
    * - `'relative'`: "2 hours ago", "yesterday", "now"
+   * - `'relative_short'`: "2h ago", "1d ago", "now" — the same tiers as
+   *   `'relative'` with abbreviated units (s/m/h/d/mo/y), for compact,
+   *   space-constrained surfaces
    * - `'auto'`: Relative for recent times, `date_time` for older
    * - `'date'`: "Mar 21, 2025"
    * - `'date_long'`: "March 21, 2025"
@@ -298,6 +302,69 @@ function getRelativeTimeString(date: Date, now: Date): string {
   return `${years} ${years === 1 ? 'year' : 'years'} ago`;
 }
 
+/**
+ * The compact sibling of `getRelativeTimeString`: the same tier boundaries and
+ * present/future-skew handling, rendered with abbreviated units for
+ * space-constrained surfaces (chat metadata, dense tables, chips).
+ *
+ * Units follow the common compact convention (and the Microsoft Style Guide):
+ * `s` seconds, `m` minutes, `h` hours, `d` days, `mo` months, `y` years.
+ * Months use `mo` — not `m` — because `m` already means minutes; a bare `m`
+ * for months would be ambiguous. The value is always numeric (no "yesterday"
+ * idiom, which belongs to the long form) so the short form stays predictable
+ * and easy to scan. The `ago` / `in` affixes are kept so direction stays
+ * unambiguous at a glance.
+ */
+function getRelativeTimeShortString(date: Date, now: Date): string {
+  const diffSeconds = Math.round((now.getTime() - date.getTime()) / 1000);
+
+  // Present clamp — identical to the long form (see getRelativeTimeString).
+  if (Math.abs(diffSeconds) < 10) {
+    return 'now';
+  }
+
+  if (diffSeconds < 0) {
+    // Future dates.
+    const absDiff = Math.abs(diffSeconds);
+    if (absDiff <= FUTURE_SKEW_TOLERANCE) {
+      return 'now';
+    }
+    if (absDiff < MINUTE) {
+      return `in ${absDiff}s`;
+    }
+    if (absDiff < HOUR) {
+      return `in ${Math.floor(absDiff / MINUTE)}m`;
+    }
+    if (absDiff < DAY) {
+      return `in ${Math.floor(absDiff / HOUR)}h`;
+    }
+    if (absDiff < MONTH) {
+      return `in ${Math.floor(absDiff / DAY)}d`;
+    }
+    if (absDiff < YEAR) {
+      return `in ${Math.floor(absDiff / MONTH)}mo`;
+    }
+    return `in ${Math.floor(absDiff / YEAR)}y`;
+  }
+
+  if (diffSeconds < MINUTE) {
+    return `${diffSeconds}s ago`;
+  }
+  if (diffSeconds < HOUR) {
+    return `${Math.floor(diffSeconds / MINUTE)}m ago`;
+  }
+  if (diffSeconds < DAY) {
+    return `${Math.floor(diffSeconds / HOUR)}h ago`;
+  }
+  if (diffSeconds < MONTH) {
+    return `${Math.floor(diffSeconds / DAY)}d ago`;
+  }
+  if (diffSeconds < YEAR) {
+    return `${Math.floor(diffSeconds / MONTH)}mo ago`;
+  }
+  return `${Math.floor(diffSeconds / YEAR)}y ago`;
+}
+
 /** Returns the interval (in ms) at which a relative timestamp should update. */
 function getLiveInterval(diffSeconds: number): number {
   const absDiff = Math.abs(diffSeconds);
@@ -316,8 +383,22 @@ function getLiveInterval(diffSeconds: number): number {
 /** Whether a format is non-relative (i.e. shows a fixed date/time). */
 function isAbsoluteFormat(
   format: TimestampFormat,
-): format is Exclude<TimestampFormat, 'relative' | 'auto'> {
-  return format !== 'relative' && format !== 'auto';
+): format is Exclude<TimestampFormat, 'relative' | 'relative_short' | 'auto'> {
+  return (
+    format !== 'relative' && format !== 'relative_short' && format !== 'auto'
+  );
+}
+
+/**
+ * Whether a format renders a relative phrase ("2 hours ago" / "2h ago") rather
+ * than a fixed instant. Both the long and short relative forms share the same
+ * treatment: they get the accessible full-date name, the hover tooltip, and
+ * live updates.
+ */
+function isRelativeFormat(
+  format: TimestampFormat,
+): format is 'relative' | 'relative_short' {
+  return format === 'relative' || format === 'relative_short';
 }
 
 // =============================================================================
@@ -384,16 +465,18 @@ export function Timestamp({
     ? ''
     : effectiveFormat === 'relative'
       ? getRelativeTimeString(date, now)
-      : isAbsoluteFormat(effectiveFormat)
-        ? formatInstant(date, effectiveFormat, {isTimezoneShown})
-        : '';
+      : effectiveFormat === 'relative_short'
+        ? getRelativeTimeShortString(date, now)
+        : isAbsoluteFormat(effectiveFormat)
+          ? formatInstant(date, effectiveFormat, {isTimezoneShown})
+          : '';
 
   // Full absolute text for tooltip and aria-label
   const fullAbsoluteText = isValidDate ? formatInstant(date, 'full') : '';
 
   // Live updates
   useEffect(() => {
-    if (!isLive || !isValidDate || effectiveFormat !== 'relative') {
+    if (!isLive || !isValidDate || !isRelativeFormat(effectiveFormat)) {
       return;
     }
 
@@ -428,7 +511,7 @@ export function Timestamp({
   // silently suppress another prop's output, so entry presence opens it too.
   // With no entries this reduces to the original condition exactly.
   const showTooltip =
-    hasTooltip && (effectiveFormat === 'relative' || entries !== undefined);
+    hasTooltip && (isRelativeFormat(effectiveFormat) || entries !== undefined);
 
   const timestampProps = mergeProps(
     themeProps('timestamp', {format: effectiveFormat}),
@@ -447,7 +530,7 @@ export function Timestamp({
         ref={mergeRefs(ref, timeRef)}
         dateTime={isoString}
         aria-label={
-          effectiveFormat === 'relative' ? fullAbsoluteText : undefined
+          isRelativeFormat(effectiveFormat) ? fullAbsoluteText : undefined
         }
         // The absolute-time tooltip is anchored here with the default 'auto'
         // focus trigger, which only activates on focusable anchors. A bare

package/src/Timestamp/formatInstant.ts

@@ -41,12 +41,11 @@ import type {TimestampFormat} from './Timestamp';
  * style ("February 19, 2026 at 5:00:00 PM UTC") that backs a relative
  * timestamp's accessible name and the tooltip's default line.
  *
- * `'relative'` and `'auto'` are excluded: a relative phrase names no instant,
- * so a zone could not change what it says.
+ * `'relative'`, `'relative_short'`, and `'auto'` are excluded: a relative
+ * phrase names no instant, so a zone could not change what it says.
  */
 export type InstantFormat =
-  | Exclude<TimestampFormat, 'relative' | 'auto'>
-  | 'full';
+  Exclude<TimestampFormat, 'relative' | 'relative_short' | 'auto'> | 'full';
 
 export interface FormatInstantOptions {
   /**

package/src/Timestamp/tooltipEntries.ts

@@ -34,8 +34,9 @@ import type {InstantFormat} from './formatInstant';
  *
  * Every `TimestampFormat` that names a fixed instant, plus `'full'` — the long
  * absolute style the tooltip has always shown ("February 19, 2026 at 5:00:00 PM
- * UTC"). `'relative'` and `'auto'` are excluded: a relative phrase ignores any
- * zone, which would make `timezoneID` silently inert on that line.
+ * UTC"). `'relative'`, `'relative_short'`, and `'auto'` are excluded: a
+ * relative phrase ignores any zone, which would make `timezoneID` silently
+ * inert on that line.
  *
  * `'full'` lives only in this vocabulary, never in `TimestampFormat` — nothing
  * asked for it as a visible display format, and keeping it out means new

package/src/Toast/Toast.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: 'Toast',
@@ -92,7 +92,7 @@ export const docs = {
 // See .context/decisions/dense-compression-protocol.md
 // -------------------------------------------------------
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   propDescriptions: {
     body: '主要消息内容。',
@@ -124,7 +124,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'toast notification w/ auto-dismiss, stacking, dedup, smooth animations; MediaTheme inverted surface',

package/src/Toast/useToast.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: 'useToast',
   displayName: 'useToast',
@@ -31,7 +31,7 @@ export const docs = {
   category: 'interaction',
 };
 
-/** @type {import('../docs-types').HookTranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
 export const docsDense = {
   description: 'Show toast notifications from anywhere in component tree. Returns function accepting toast options + showing notification. Works automatically w/ LayerProvider / self-mounts fallback viewport.',
   returnDescriptions: {

package/src/ToggleButton/ToggleButton.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: 'ToggleButton',
@@ -139,7 +139,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 = {
   description: 'toggle btn w/ pressed/unpressed states, icon swap, group integration for single/multi-select',
   usage: {

package/src/ToggleButton/ToggleButton.tsx

@@ -17,7 +17,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/ToggleButton/index.ts (exports if types change)
  * - /apps/storybook/stories/ToggleButton.stories.tsx
- * - /packages/cli/templates/blocks/components/ToggleButton/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/ToggleButton/ (showcase blocks)
  */
 
 import React, {useOptimistic, type ReactNode} from 'react';

package/src/ToggleButton/ToggleButtonGroup.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: 'ToggleButtonGroup',