@astryxdesign/cli 0.1.6-canary.1a0fef5 → 0.1.6-canary.1b61ba6

package/src/schemas/doc-schema.mjs

@@ -0,0 +1,226 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Doc load-boundary schemas.
+ *
+ * The Zod schemas doc discovery runs a loaded doc value through (see
+ * `loadComponentDoc`). {@link ComponentDocSchema} accepts BOTH the new stamped
+ * formats and the legacy loose `export const docs = {...}` shape, so existing
+ * docs keep loading unchanged. Kept free of any `@astryxdesign/core` import so
+ * the hot path that loads them (doc discovery, `astryx init`) does not require
+ * core's built `dist/`. The authoring factories live in
+ * `@astryxdesign/core/authoring` and are re-exported from `../doc.mjs` for the
+ * public `@astryxdesign/cli/doc` surface.
+ */
+
+import {z} from 'zod';
+
+/**
+ * A single documented prop. Mirrors `PropDoc` from
+ * `@astryxdesign/core/docs-types`. Only `name`, `type`, and `description` are
+ * required; everything else is optional. Extra fields (e.g. `slotElements`)
+ * pass through so the schema does not have to track every evolution of the
+ * rich playground/element surface.
+ */
+const PropSchema = z
+  .object({
+    name: z.string().min(1, 'prop name is required'),
+    type: z.string().min(1, 'prop type is required'),
+    description: z.string(),
+    default: z.string().optional(),
+    required: z.boolean().optional(),
+  })
+  .passthrough();
+
+/** A single documented function/hook parameter (mirrors `HookParamDoc`). */
+const ParamSchema = z
+  .object({
+    name: z.string().min(1, 'param name is required'),
+    type: z.string().min(1, 'param type is required'),
+    description: z.string(),
+    default: z.string().optional(),
+    required: z.boolean().optional(),
+  })
+  .passthrough();
+
+/** A single documented function/hook return field (mirrors `HookReturnDoc`). */
+const ReturnSchema = z
+  .object({
+    name: z.string().min(1, 'return name is required'),
+    type: z.string().min(1, 'return type is required'),
+    description: z.string(),
+  })
+  .passthrough();
+
+/**
+ * Fields shared by every doc kind. Deliberately permissive on the rich blobs
+ * (usage/theming/playground) — those are large and still evolving, so they are
+ * `z.unknown()` passthrough rather than enumerated.
+ *
+ * `group` vs `parent` are distinct concepts and intentionally separate fields:
+ *   - `group` is a FLAT sidebar bucket label. Many docs can share a group; it
+ *     is not an inheritance key.
+ *   - `parent` is a DIRECTED inheritance/composition pointer — a doc naming the
+ *     doc it belongs to (e.g. a sub-component naming its parent component). The
+ *     legacy `subComponentOf` field is a synonym; both map to the same concept.
+ *
+ * `relatedDocs` is a single flat curated cross-reference list. It replaces the
+ * legacy split `relatedComponents` + `relatedHooks`; a downstream reader can
+ * merge the legacy pair into it.
+ */
+const BaseDocFields = {
+  /** Name of the documented unit, without any prefix. Required. */
+  name: z.string().min(1, 'name is required'),
+  /** Human-readable display name for gallery/sidebar. */
+  displayName: z.string().optional(),
+  /** One-line/short description. */
+  description: z.string().optional(),
+  /** Usage documentation (description, best practices, anatomy, slotElements). */
+  usage: z.unknown().optional(),
+  /** Flat sidebar grouping label (not an inheritance key). */
+  group: z.string().optional(),
+  /** Overview-page functional category. */
+  category: z.string().optional(),
+  /** CLI fuzzy-search keywords. */
+  keywords: z.array(z.string()).optional(),
+  /** Directed inheritance/composition pointer to the doc this belongs to. */
+  parent: z.string().optional(),
+  /** Flat curated cross-reference list of related doc names. */
+  relatedDocs: z.array(z.string()).optional(),
+  /** Hide the whole doc from human-facing UI (stays importable/discoverable). */
+  hidden: z.boolean().optional(),
+  /** Exclude from the categorized overview page (kept in sidebar/CLI). */
+  isHiddenFromOverview: z.boolean().optional(),
+};
+
+/**
+ * New-format schema for a stamped component doc (`type: 'component'`). The
+ * top-level component keys are enumerated, but nested blobs stay loose so real
+ * docs are not rejected. `.passthrough()` keeps unknown top-level fields
+ * (translations, element descriptors, ...) flowing through.
+ */
+export const ComponentDocKindSchema = z
+  .object({
+    ...BaseDocFields,
+    type: z.literal('component'),
+    props: z.array(PropSchema),
+    theming: z.unknown().optional(),
+    playground: z.unknown().optional(),
+    examples: z.array(z.unknown()).optional(),
+  })
+  .passthrough();
+
+/**
+ * New-format schema for a stamped function doc (`type: 'function'`). Covers any
+ * function, including hooks: an inputs (`params`) + outputs (`returns`) surface.
+ */
+export const FunctionDocKindSchema = z
+  .object({
+    ...BaseDocFields,
+    type: z.literal('function'),
+    params: z.array(ParamSchema),
+    returns: z.array(ReturnSchema),
+  })
+  .passthrough();
+
+/**
+ * New-format schema for a stamped generic doc (`type: 'generic'`) — reference
+ * and topic docs. Just the shared base plus the discriminant.
+ */
+export const GenericDocKindSchema = z
+  .object({
+    ...BaseDocFields,
+    type: z.literal('generic'),
+  })
+  .passthrough();
+
+/**
+ * The stamped-doc contract: one of the three new per-kind schemas, discriminated
+ * by the injected `type`. Used when a loaded doc carries a `type` field.
+ */
+export const StampedDocSchema = z.discriminatedUnion('type', [
+  ComponentDocKindSchema,
+  FunctionDocKindSchema,
+  GenericDocKindSchema,
+]);
+
+// ── Legacy loose format (unchanged, kept for back-compat) ─────────────
+//
+// The pre-factory docs are authored as a loose, untyped object with no `type`
+// discriminant and validated by shape. Enumerated top-level fields observed
+// across the existing loose docs:
+//   name, displayName, description, group, category, keywords,
+//   isHiddenFromOverview, hidden, hiddenComponents, usage, props, components,
+//   subComponentOf, playground, theming, examples, params, returns,
+//   relatedComponents, relatedHooks, relatedDocs, parent, importPath.
+
+const LegacyBaseDocSchema = z.object({
+  name: z.string().min(1, 'name is required'),
+  displayName: z.string().optional(),
+  description: z.string().optional(),
+  group: z.string().optional(),
+  category: z.string().optional(),
+  keywords: z.array(z.string()).optional(),
+  isHiddenFromOverview: z.boolean().optional(),
+  hidden: z.boolean().optional(),
+  hiddenComponents: z.array(z.string()).optional(),
+  usage: z.unknown().optional(),
+  playground: z.unknown().optional(),
+  theming: z.unknown().optional(),
+  examples: z.array(z.unknown()).optional(),
+  showcase: z.unknown().optional(),
+  // `parent` and legacy `subComponentOf` are synonyms; both accepted here so a
+  // parent-based doc that omits a stamped `type` still validates.
+  parent: z.string().optional(),
+  relatedDocs: z.array(z.string()).optional(),
+  relatedComponents: z.array(z.string()).optional(),
+  relatedHooks: z.array(z.string()).optional(),
+});
+
+/** Legacy: directory exporting a single primary component (props inline). */
+const LegacySingleComponentDocSchema = LegacyBaseDocSchema.extend({
+  props: z.array(PropSchema),
+}).passthrough();
+
+/** Legacy: directory exporting multiple components (props on each entry). */
+const LegacyMultiComponentDocSchema = LegacyBaseDocSchema.extend({
+  components: z.array(z.unknown()),
+}).passthrough();
+
+/** Legacy: a standalone hook doc — inputs (`params`) + outputs (`returns`). */
+const LegacyHookDocSchema = LegacyBaseDocSchema.extend({
+  params: z.array(ParamSchema),
+  returns: z.array(ReturnSchema),
+}).passthrough();
+
+/** Legacy: a sub-component doc parented via `subComponentOf`. */
+const LegacySubComponentDocSchema = LegacyBaseDocSchema.extend({
+  subComponentOf: z.string().min(1, 'subComponentOf is required'),
+  description: z.string(),
+  props: z.array(PropSchema),
+}).passthrough();
+
+/**
+ * The permissive legacy union. `subComponentOf` is listed first so a doc that
+ * carries both `subComponentOf` and `props` is validated as a sub-component
+ * (the more specific shape); hook (`params`/`returns`) before multi/single.
+ */
+export const LegacyDocSchema = z.union([
+  LegacySubComponentDocSchema,
+  LegacyHookDocSchema,
+  LegacyMultiComponentDocSchema,
+  LegacySingleComponentDocSchema,
+]);
+
+/**
+ * The LOAD-boundary contract for a doc. Handles BOTH formats:
+ *   - NEW: a stamped doc (`type: 'component' | 'function' | 'generic'`,
+ *     produced by the factories) is validated against the matching per-kind
+ *     schema in {@link StampedDocSchema}.
+ *   - OLD: a loose, unstamped doc is validated against the permissive
+ *     {@link LegacyDocSchema} union (the three legacy shapes + standalone hook).
+ *
+ * Discovery validates the SHAPE, not "was it made by the factory". Both formats
+ * normalize into the same internal shape consumers already expect.
+ */
+export const ComponentDocSchema = z.union([StampedDocSchema, LegacyDocSchema]);

package/src/schemas/template-schema.mjs

@@ -0,0 +1,47 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Template load-boundary schemas.
+ *
+ * The Zod schemas that integration template discovery runs a module's default
+ * export through (see `loadModuleWithSchema`). Kept free of any
+ * `@astryxdesign/core` import so the hot path that loads them (template
+ * discovery, `astryx init`) does not require core's built `dist/`. The
+ * authoring factories live in `@astryxdesign/core/authoring` and are re-exported
+ * from `../template.mjs` for the public `@astryxdesign/cli/template` surface.
+ */
+
+import {z} from 'zod';
+
+const PreviewSchema = z
+  .object({
+    image: z.string().optional(),
+    aspectRatio: z.string().optional(),
+  })
+  .strict();
+
+/**
+ * Shared authored-template shape. `type` is injected by the create* helpers,
+ * so authors never write it. Inline source/sourceFile are intentionally NOT
+ * part of v1 — a template's source is the required same-stem sibling file.
+ * Exported so integration template discovery can validate the stamped result.
+ */
+export const BaseTemplateSchema = z
+  .object({
+    name: z.string().min(1, 'name is required'),
+    description: z.string().min(1, 'description is required'),
+    category: z.string().optional(),
+    componentsUsed: z.array(z.string()).optional(),
+    preview: PreviewSchema.optional(),
+  })
+  .strict();
+
+/**
+ * The metadata envelope integration template discovery validates: a stamped
+ * template doc. This is the LOAD-boundary contract — a hand-written plain
+ * object that matches this shape is accepted (discovery does not check "was it
+ * made by the factory", only the shape).
+ */
+export const TemplateEnvelopeSchema = BaseTemplateSchema.extend({
+  type: z.enum(['page', 'block']),
+});

package/src/template.mjs

@@ -1,73 +1,15 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 /**
- * @file Static template authoring API.
+ * @file Static template authoring API (public `@astryxdesign/cli/template`).
  *
- * Helpers for authoring Astryx page/block template docs. Like
- * `createConfig`/`createIntegration`, these are tiny runtime identity helpers
- * whose real value is the exported TypeScript surface from
- * `@astryxdesign/cli/template`. They inject the discriminant `type` so a
- * discovered doc always knows whether it is a page or a block. They do NOT
- * validate — validation happens at the load boundary, where integration
- * template discovery runs the module's default export through
- * {@link TemplateEnvelopeSchema} (see `loadModuleWithSchema`).
+ * The `createPageTemplate`/`createBlockTemplate` authoring helpers now live in
+ * `@astryxdesign/core/authoring` and are re-exported here so existing
+ * `@astryxdesign/cli/template` imports keep working. The Zod load-boundary
+ * schemas live in `./schemas/template-schema.mjs` (core-free) and are
+ * re-exported here for back-compat; internal hot-path code imports them from
+ * the schema module directly so it never depends on core's built `dist/`.
  */
 
-import {z} from 'zod';
-
-const PreviewSchema = z
-  .object({
-    image: z.string().optional(),
-    aspectRatio: z.string().optional(),
-  })
-  .strict();
-
-/**
- * Shared authored-template shape. `type` is injected by the create* helpers,
- * so authors never write it. Inline source/sourceFile are intentionally NOT
- * part of v1 — a template's source is the required same-stem sibling file.
- * Exported so integration template discovery can validate the stamped result.
- */
-export const BaseTemplateSchema = z
-  .object({
-    name: z.string().min(1, 'name is required'),
-    description: z.string().min(1, 'description is required'),
-    category: z.string().optional(),
-    componentsUsed: z.array(z.string()).optional(),
-    preview: PreviewSchema.optional(),
-  })
-  .strict();
-
-/**
- * The metadata envelope integration template discovery validates: a stamped
- * template doc. This is the LOAD-boundary contract — a hand-written plain
- * object that matches this shape is accepted (discovery does not check "was it
- * made by the factory", only the shape).
- */
-export const TemplateEnvelopeSchema = BaseTemplateSchema.extend({
-  type: z.enum(['page', 'block']),
-});
-
-/**
- * Author an Astryx page template doc. Stamp-only: returns the def with
- * `type: 'page'` injected. Validation happens at the load boundary.
- *
- * @template {import('./types/template-api').AstryxPageTemplateInput} T
- * @param {T} def
- * @returns {T & {type: 'page'}}
- */
-export function createPageTemplate(def) {
-  return /** @type {T & {type: 'page'}} */ ({...def, type: 'page'});
-}
-
-/**
- * Author an Astryx block template doc. Stamp-only: returns the def with
- * `type: 'block'` injected. Validation happens at the load boundary.
- *
- * @template {import('./types/template-api').AstryxBlockTemplateInput} T
- * @param {T} def
- * @returns {T & {type: 'block'}}
- */
-export function createBlockTemplate(def) {
-  return /** @type {T & {type: 'block'}} */ ({...def, type: 'block'});
-}
+export {createPageTemplate, createBlockTemplate} from '@astryxdesign/core/authoring';
+export {BaseTemplateSchema, TemplateEnvelopeSchema} from './schemas/template-schema.mjs';

package/src/types/config.d.ts

@@ -1,70 +1,15 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 /**
- * A command to run as part of a post-codemod hook. Returned by a hook's
- * `buildCommand` and executed via `execFile` after codemods write files.
+ * The config-authoring surface moved to `@astryxdesign/core/config` so an app's
+ * config file gets type feedback without depending on the CLI. Re-exported here
+ * so existing `@astryxdesign/cli/config` type imports keep resolving.
  */
-export interface PostCodemodCommand {
-  command: string;
-  args?: string[];
-  options?: {
-    cwd?: string;
-    env?: NodeJS.ProcessEnv;
-    timeout?: number;
-  };
-}
-
-/**
- * A post-codemod hook. `buildCommand` receives the package directory and the
- * list of files changed by codemods, and returns the command to run (or a
- * nullish value to skip).
- */
-export type PostCodemodHook = {
-  name?: string;
-  buildCommand: (ctx: {
-    packageDir: string;
-    files: string[];
-  }) =>
-    | PostCodemodCommand
-    | null
-    | undefined
-    | Promise<PostCodemodCommand | null | undefined>;
-};
-
-/** A component XLE layout expressions can reference by name via `{hint}`. */
-export interface XleComponent {
-  /** Import specifier the component is imported from, e.g. '@/components/KpiCard'. */
-  from: string;
-  /** Optional human description shown in tooling. */
-  description?: string;
-  /** Import as the module's default export instead of a named export. Defaults to false. */
-  default?: boolean;
-}
-
-/** User config exported from astryx.config.{ts,mjs,js}. */
-export interface AstryxConfig {
-  /** Integration package names to load. */
-  integrations?: string[];
-  /** Where to file issues/feedback for this project. */
-  issuesUrl?: string;
-  /** Lifecycle hooks. */
-  hooks?: {
-    postCodemod?: PostCodemodHook[];
-  };
-  /**
-   * EXPERIMENTAL — shape may change and is not part of the stable config
-   * contract. Provisional home for features still being proven out.
-   */
-  experimental?: {
-    /** Experimental XLE (layout expression) configuration. */
-    xle?: {
-      /**
-       * Register app-local components so XLE layout expressions can
-       * reference them by name via {hint}. Keyed by component name.
-       */
-      components?: Record<string, XleComponent>;
-    };
-  };
-}
-
-export declare function createConfig<T extends AstryxConfig>(config: T): T;
+export type {
+  PostCodemodCommand,
+  PostCodemodHook,
+  XleComponent,
+  AstryxConfig,
+} from '@astryxdesign/core/config';
+
+export {createConfig} from '@astryxdesign/core/config';

package/src/types/doc.d.ts

@@ -0,0 +1,23 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * The doc-authoring surface moved to `@astryxdesign/core/authoring`. Re-exported
+ * here so existing `@astryxdesign/cli/doc` type imports keep resolving. The Zod
+ * load-boundary schemas remain in the CLI (see `src/doc.mjs`).
+ */
+export type {
+  AstryxBaseDocInput,
+  AstryxPropInput,
+  AstryxParamInput,
+  AstryxReturnInput,
+  AstryxComponentDocInput,
+  AstryxFunctionDocInput,
+  AstryxGenericDocInput,
+  AstryxComponentDoc,
+} from '@astryxdesign/core/authoring';
+
+export {
+  createComponentDoc,
+  createFunctionDoc,
+  createDoc,
+} from '@astryxdesign/core/authoring';

package/src/types/integration.d.ts

@@ -1,21 +1,14 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 /**
- * Integration manifest exported from a conventional root manifest file
- * (astryx.integration.{ts,mjs,js}) sibling to the integration package's
- * package.json. Identity (name/version) comes from the package's
- * package.json, not from the manifest.
+ * The integration-manifest authoring surface moved to
+ * `@astryxdesign/core/authoring`. `AstryxIntegration` and `createIntegration`
+ * are re-exported here so existing `@astryxdesign/cli/integration` type imports
+ * keep resolving. `AstryxIntegrationIssue` stays in the CLI — it is an internal
+ * validation type, not part of the authoring surface.
  */
-export interface AstryxIntegration {
-  /** Relative path to the components/docs root (resolved to absolute). */
-  components?: string;
-  /** Relative path to the templates root (resolved to absolute). */
-  templates?: string;
-  /** Relative path to the codemods root (resolved to absolute). */
-  codemods?: string;
-  /** Where to file issues/feedback for this integration. */
-  issuesUrl?: string;
-}
+export type {AstryxIntegration} from '@astryxdesign/core/authoring';
+export {createIntegration} from '@astryxdesign/core/authoring';
 
 /** An issue surfaced by an integration. */
 export interface AstryxIntegrationIssue {
@@ -23,7 +16,3 @@ export interface AstryxIntegrationIssue {
   severity: 'warning' | 'error';
   message: string;
 }
-
-export declare function createIntegration<T extends AstryxIntegration>(
-  integration: T,
-): T;

package/src/types/template-api.d.ts

@@ -1,54 +1,18 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 /**
- * Authoring surface for Astryx static templates, exported from
- * `@astryxdesign/cli/template`.
- *
- * A template doc lives in a `<id>.doc.{ts,mjs,js}` file with a required
- * same-stem sibling source file (`<id>.tsx`). The doc's `type` (page or
- * block) — injected by the create* helpers — decides how the template is
- * scaffolded; there is no `/pages` vs `/blocks` directory requirement.
+ * The template-authoring surface moved to `@astryxdesign/core/authoring`.
+ * Re-exported here so existing `@astryxdesign/cli/template` type imports keep
+ * resolving.
  */
-
-/** Optional preview metadata for a template (used by docs surfaces). */
-export interface AstryxTemplatePreview {
-  /** Path or URL to a preview image. */
-  image?: string;
-  /** CSS aspect-ratio hint for the preview, e.g. "16 / 9". */
-  aspectRatio?: string;
-}
-
-/** Fields common to page and block template docs (without the `type` tag). */
-export interface AstryxTemplateInput {
-  /** Human-readable template name. Required. */
-  name: string;
-  /** One-line description of what the template provides. Required. */
-  description: string;
-  /** Optional grouping/category label. */
-  category?: string;
-  /** Component display names the template composes. */
-  componentsUsed?: string[];
-  /** Optional preview metadata. */
-  preview?: AstryxTemplatePreview;
-}
-
-/** Input accepted by {@link createPageTemplate} (no `type` field). */
-export type AstryxPageTemplateInput = AstryxTemplateInput;
-/** Input accepted by {@link createBlockTemplate} (no `type` field). */
-export type AstryxBlockTemplateInput = AstryxTemplateInput;
-
-/** A validated page template doc. */
-export type AstryxPageTemplate = AstryxTemplateInput & {type: 'page'};
-/** A validated block template doc. */
-export type AstryxBlockTemplate = AstryxTemplateInput & {type: 'block'};
-
-/** A validated template doc (page or block). */
-export type AstryxTemplate = AstryxPageTemplate | AstryxBlockTemplate;
-
-export declare function createPageTemplate<T extends AstryxPageTemplateInput>(
-  def: T,
-): T & {type: 'page'};
-
-export declare function createBlockTemplate<T extends AstryxBlockTemplateInput>(
-  def: T,
-): T & {type: 'block'};
+export type {
+  AstryxTemplatePreview,
+  AstryxTemplateInput,
+  AstryxPageTemplateInput,
+  AstryxBlockTemplateInput,
+  AstryxPageTemplate,
+  AstryxBlockTemplate,
+  AstryxTemplate,
+} from '@astryxdesign/core/authoring';
+
+export {createPageTemplate, createBlockTemplate} from '@astryxdesign/core/authoring';

package/templates/blocks/components/Avatar/AvatarGroup.tsx

@@ -7,28 +7,26 @@ import {AvatarGroup, AvatarGroupOverflow} from '@astryxdesign/core/AvatarGroup';
 import {Stack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 
-const CDN = 'https://lookaside.facebook.com/assets/astryx';
-
 const USERS = [
   {
     name: 'Ami Pena',
-    src: `${CDN}/DATA-Ami-Pena.png`,
+    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Ami-Pena.png',
   },
   {
     name: 'Drew Young',
-    src: `${CDN}/DATA-Drew-Young.png`,
+    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Drew-Young.png',
   },
   {
     name: 'Gabriela Fernandez',
-    src: `${CDN}/DATA-Gabriela-Fernandez.png`,
+    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Gabriela-Fernandez.png',
   },
   {
     name: 'Jihoo Song',
-    src: `${CDN}/DATA-Jihoo-Song.png`,
+    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Jihoo-Song.png',
   },
   {
     name: 'Nam Tran',
-    src: `${CDN}/DATA-Nam-Tran.png`,
+    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Nam-Tran.png',
   },
 ];
 

package/templates/blocks/components/Avatar/AvatarShowcase.tsx

@@ -5,29 +5,27 @@
 import {Avatar, AvatarStatusDot} from '@astryxdesign/core/Avatar';
 import {Stack} from '@astryxdesign/core/Layout';
 
-const CDN = 'https://lookaside.facebook.com/assets/astryx';
-
 export default function AvatarShowcase() {
   return (
     <Stack direction="horizontal" gap={4} vAlign="center">
       <Avatar
-        src={`${CDN}/DATA-Ana-Thomas.png`}
+        src="https://lookaside.facebook.com/assets/astryx/DATA-Ana-Thomas.png"
         name="Ana Thomas"
         size="large"
         status={<AvatarStatusDot variant="success" label="Online" />}
       />
       <Avatar
-        src={`${CDN}/DATA-Drew-Young.png`}
+        src="https://lookaside.facebook.com/assets/astryx/DATA-Drew-Young.png"
         name="Drew Young"
         size="large"
       />
       <Avatar
-        src={`${CDN}/DATA-Jihoo-Song.png`}
+        src="https://lookaside.facebook.com/assets/astryx/DATA-Jihoo-Song.png"
         name="Jihoo Song"
         size="large"
       />
       <Avatar
-        src={`${CDN}/DATA-Nam-Tran.png`}
+        src="https://lookaside.facebook.com/assets/astryx/DATA-Nam-Tran.png"
         name="Nam Tran"
         size="large"
         status={<AvatarStatusDot variant="error" label="Online" />}

package/templates/blocks/components/Avatar/AvatarUserCard.tsx

@@ -6,24 +6,22 @@ import {Avatar, AvatarStatusDot} from '@astryxdesign/core/Avatar';
 import {Stack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 
-const CDN = 'https://lookaside.facebook.com/assets/astryx';
-
 const USERS = [
   {
     name: 'Itai Jordaan',
-    src: `${CDN}/DATA-Itai-Jordaan.png`,
+    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Itai-Jordaan.png',
     role: 'Engineering Lead',
     variant: 'success' as const,
   },
   {
     name: 'Margot Schroder',
-    src: `${CDN}/DATA-Margot-Schroder.png`,
+    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Margot-Schroder.png',
     role: 'Product Designer',
     variant: 'neutral' as const,
   },
   {
     name: 'Daniela Gimenez',
-    src: `${CDN}/DATA-Daniela-Gimenez.png`,
+    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Daniela-Gimenez.png',
     role: 'Engineering Manager',
     variant: 'error' as const,
   },