@astryxdesign/cli 0.1.6-canary.eb23da7 → 0.1.6-canary.eba4f34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.6-canary.eb23da7",
+  "version": "0.1.6-canary.eba4f34",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -47,10 +47,6 @@
       "types": "./src/types/integration.d.ts",
       "import": "./src/integration.mjs"
     },
-    "./doc": {
-      "types": "./src/types/doc.d.ts",
-      "import": "./src/doc.mjs"
-    },
     "./template": {
       "types": "./src/types/template-api.d.ts",
       "import": "./src/template.mjs"
@@ -79,10 +75,10 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/charts": "0.1.6-canary.eb23da7",
-    "@astryxdesign/core": "0.1.6-canary.eb23da7",
-    "@astryxdesign/lab": "0.1.6-canary.eb23da7",
-    "@astryxdesign/theme-neutral": "0.1.6-canary.eb23da7",
+    "@astryxdesign/charts": "0.1.6-canary.eba4f34",
+    "@astryxdesign/core": "0.1.6-canary.eba4f34",
+    "@astryxdesign/lab": "0.1.6-canary.eba4f34",
+    "@astryxdesign/theme-neutral": "0.1.6-canary.eba4f34",
     "gpt-tokenizer": "^3.4.0"
   },
   "peerDependenciesMeta": {
@@ -100,10 +96,10 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/charts": "0.1.6-canary.eb23da7",
-    "@astryxdesign/core": "0.1.6-canary.eb23da7",
-    "@astryxdesign/lab": "0.1.6-canary.eb23da7",
-    "@astryxdesign/theme-neutral": "0.1.6-canary.eb23da7",
+    "@astryxdesign/charts": "0.1.6-canary.eba4f34",
+    "@astryxdesign/core": "0.1.6-canary.eba4f34",
+    "@astryxdesign/lab": "0.1.6-canary.eba4f34",
+    "@astryxdesign/theme-neutral": "0.1.6-canary.eba4f34",
     "gpt-tokenizer": "^3.4.0"
   },
   "scripts": {

package/src/api/template.mjs

@@ -6,7 +6,6 @@
 
 import * as fs from 'node:fs';
 import * as path from 'node:path';
-import {createJiti} from 'jiti';
 import {loadModuleWithSchema} from '../lib/module-loader.mjs';
 import {TemplateEnvelopeSchema} from '../template.mjs';
 import {CLI_ROOT, discoverExternalPackages} from '../utils/paths.mjs';
@@ -22,54 +21,9 @@ import {Project} from '../lib/project.mjs';
 /** Identity used for core (built-in) templates in package-scoped listings. */
 const CORE_PACKAGE = '@astryxdesign/core';
 
-/**
- * Canonical basename suffixes for template-spec files, in precedence order.
- * A template spec exports a `createBlockTemplate`/`createPageTemplate` result
- * (a scaffoldable TEMPLATE), so `.template.*` is the descriptive family name.
- */
-const TEMPLATE_SUFFIXES = ['.template.ts', '.template.mjs', '.template.js'];
-
-/**
- * Legacy basename suffixes for template-spec files, in precedence order.
- * `.doc.*` was inherited from the component-doc convention before templates
- * had their own name; it is still accepted during the transition window.
- */
+/** Doc-file basename suffixes for integration templates, in precedence order. */
 const DOC_SUFFIXES = ['.doc.ts', '.doc.mjs', '.doc.js'];
 
-/**
- * The union of canonical + legacy template-spec suffixes, canonical first so
- * `.template.*` wins over `.doc.*` when both stems exist. All template
- * discovery matches this union so a `Foo.template.ts` file is treated exactly
- * like a legacy `Foo.doc.mjs`.
- */
-const ALL_TEMPLATE_SUFFIXES = [...TEMPLATE_SUFFIXES, ...DOC_SUFFIXES];
-
-/**
- * The template-spec suffix present on `file`, or null if none matches.
- * Recognizes both the canonical `.template.*` and legacy `.doc.*` families.
- * @param {string} file
- * @returns {string | null}
- */
-function matchedTemplateSuffix(file) {
-  return ALL_TEMPLATE_SUFFIXES.find(suffix => file.endsWith(suffix)) ?? null;
-}
-
-/**
- * RegExp matching either template-spec suffix family at end of a basename.
- * Used where a per-file regex is convenient (e.g. block discovery walks).
- */
-const TEMPLATE_SUFFIX_RE = /\.(template|doc)\.(ts|mjs|js)$/;
-
-let jitiInstance;
-/** Lazily-created jiti for loading `.ts` template specs (JSX-capable). */
-function getJiti() {
-  if (!jitiInstance) {
-    jitiInstance = createJiti(import.meta.url, {jsx: true});
-  }
-  return jitiInstance;
-}
-
-
 /**
  * Load an integration template doc module and validate it against the template
  * envelope at the load boundary. Default export only — `.ts` via jiti,
@@ -133,29 +87,12 @@ export function stripTemplateAssetRefs(source) {
     source,
   );
 }
-/**
- * Load a template-spec module and return its metadata object. Supports both
- * families of suffix:
- *   - Legacy `.doc.*` core/external specs export `export const doc = {...}`.
- *   - Specs authored with `createPageTemplate`/`createBlockTemplate` export the
- *     stamped object as the default export.
- * Prefers the default export, falling back to the named `doc` export, so a
- * `Foo.template.ts` (default export) is read identically to a legacy
- * `Foo.doc.mjs` (`doc` export). `.ts` is loaded via jiti; `.mjs`/`.js` via a
- * native dynamic import. Returns null if the file does not exist.
- *
- * @param {string} docPath absolute path to the spec file
- * @returns {Promise<Record<string, unknown> | undefined | null>}
- */
 async function loadDocModule(docPath) {
   if (!fs.existsSync(docPath)) return null;
-  const docModule = docPath.endsWith('.ts')
-    ? await getJiti().import(docPath)
-    : await import(`file://${docPath}`);
-  return docModule.default ?? docModule.doc;
+  const docModule = await import(`file://${docPath}`);
+  return docModule.doc;
 }
 
-
 export {discoverAll as discoverTemplates};
 
 export function listTemplates() {
@@ -185,20 +122,6 @@ function findDocFiles(dir, pattern) {
   return results;
 }
 
-/**
- * Resolve the template-spec file for a core page directory: the first existing
- * `template.<suffix>` in canonical-then-legacy precedence, or null.
- * @param {string} dirPath
- * @returns {string | null}
- */
-function findPageDocFile(dirPath) {
-  for (const suffix of ALL_TEMPLATE_SUFFIXES) {
-    const candidate = path.join(dirPath, `template${suffix}`);
-    if (fs.existsSync(candidate)) return candidate;
-  }
-  return null;
-}
-
 async function discoverPages() {
   if (!fs.existsSync(PAGES_DIR)) return [];
   const dirs = fs
@@ -208,9 +131,7 @@ async function discoverPages() {
   const templates = [];
   for (const dir of dirs) {
     const dirPath = path.join(PAGES_DIR, dir.name);
-    const docPath =
-      findPageDocFile(dirPath) ?? path.join(dirPath, 'template.doc.mjs');
-    const doc = await loadDocModule(docPath);
+    const doc = await loadDocModule(path.join(dirPath, 'template.doc.mjs'));
     templates.push({
       type: 'page',
       dirName: dir.name,
@@ -220,18 +141,17 @@ async function discoverPages() {
       isReady: doc?.isReady ?? true,
       scaffold: doc?.scaffold ?? false,
       filePath: path.join(dirPath, 'page.tsx'),
-      docPath,
+      docPath: path.join(dirPath, 'template.doc.mjs'),
     });
   }
   return templates;
 }
 
 async function discoverBlocks() {
-  const docFiles = findDocFiles(BLOCKS_DIR, TEMPLATE_SUFFIX_RE);
+  const docFiles = findDocFiles(BLOCKS_DIR, /\.doc\.mjs$/);
   const blocks = [];
   for (const docPath of docFiles) {
-    const suffix = matchedTemplateSuffix(docPath);
-    const basename = path.basename(docPath, suffix);
+    const basename = path.basename(docPath, '.doc.mjs');
     const tsxPath = path.join(path.dirname(docPath), basename + '.tsx');
     if (!fs.existsSync(tsxPath)) continue;
     const doc = await loadDocModule(docPath);
@@ -253,7 +173,6 @@ async function discoverBlocks() {
   return blocks;
 }
 
-
 /**
  * Discover blocks from external packages that declare `astryx.blocks` in
  * their package.json. Same shape as discoverBlocks() output.
@@ -266,10 +185,9 @@ async function discoverExternalBlocks(cwd = process.cwd()) {
 
   for (const ext of externals) {
     if (!ext.blocksDir || !fs.existsSync(ext.blocksDir)) continue;
-    const docFiles = findDocFiles(ext.blocksDir, TEMPLATE_SUFFIX_RE);
+    const docFiles = findDocFiles(ext.blocksDir, /\.doc\.mjs$/);
     for (const docPath of docFiles) {
-      const suffix = matchedTemplateSuffix(docPath);
-      const basename = path.basename(docPath, suffix);
+      const basename = path.basename(docPath, '.doc.mjs');
       const tsxPath = path.join(path.dirname(docPath), basename + '.tsx');
       if (!fs.existsSync(tsxPath)) continue;
       const doc = await loadDocModule(docPath);
@@ -340,9 +258,8 @@ async function discoverAllWithErrors(cwd = process.cwd()) {
 export {discoverAllWithErrors};
 
 /**
- * Recursively collect integration template-spec files under `root`.
- * Returns absolute paths to files ending in one of ALL_TEMPLATE_SUFFIXES
- * (canonical `.template.*` or legacy `.doc.*`).
+ * Recursively collect integration template doc files under `root`.
+ * Returns absolute paths to files ending in one of DOC_SUFFIXES.
  *
  * @param {string} root
  * @returns {string[]}
@@ -355,7 +272,7 @@ function findIntegrationDocFiles(root) {
       const full = path.join(dir, entry.name);
       if (entry.isDirectory()) {
         walk(full);
-      } else if (ALL_TEMPLATE_SUFFIXES.some(suffix => entry.name.endsWith(suffix))) {
+      } else if (DOC_SUFFIXES.some(suffix => entry.name.endsWith(suffix))) {
         results.push(full);
       }
     }
@@ -364,17 +281,24 @@ function findIntegrationDocFiles(root) {
   return results;
 }
 
+/**
+ * The doc-file suffix present on `file`, or null if none matches.
+ * @param {string} file
+ */
+function matchedDocSuffix(file) {
+  return DOC_SUFFIXES.find(suffix => file.endsWith(suffix)) ?? null;
+}
+
 /**
  * Discover templates contributed by configured integrations.
  *
  * For each integration with a resolved `templates` root, every
- * `<id>.template.{ts,mjs,js}` (or legacy `<id>.doc.{ts,mjs,js}`) file is a
- * template whose id is its path relative to the templates root with the
- * matched suffix stripped (kebab-case, may be nested). The doc's `type`
- * (page|block) decides scaffolding — there is no `/pages` vs `/blocks`
- * requirement. A same-stem sibling source file (`<id>.tsx`) is required; a doc
- * missing its source, or missing `type`, is an integration error and that
- * template is skipped (recorded in `errors`).
+ * `<id>.doc.{ts,mjs,js}` file is a template whose id is its path relative to
+ * the templates root with the `.doc.*` suffix stripped (kebab-case, may be
+ * nested). The doc's `type` (page|block) decides scaffolding — there is no
+ * `/pages` vs `/blocks` requirement. A same-stem sibling source file
+ * (`<id>.tsx`) is required; a doc missing its source, or missing `type`, is
+ * an integration error and that template is skipped (recorded in `errors`).
  *
  * @param {string} [cwd]
  * @returns {Promise<{templates: object[], errors: {package: string, template?: string, message: string}[]}>}
@@ -420,7 +344,7 @@ export async function discoverIntegrationTemplatesForOne(integration) {
   if (!root || !fs.existsSync(root)) return {templates, errors};
 
   for (const docPath of findIntegrationDocFiles(root)) {
-    const suffix = matchedTemplateSuffix(docPath);
+    const suffix = matchedDocSuffix(docPath);
     const id = path
       .relative(root, docPath)
       .slice(0, -suffix.length)

package/src/api/validate-integration.mjs

@@ -67,6 +67,11 @@ function error(code, message) {
   return {code, severity: 'error', message};
 }
 
+/** @param {string} code @param {string} message @returns {Issue} */
+function warning(code, message) {
+  return {code, severity: 'warning', message};
+}
+
 /**
  * Verify each declared contribution root exists on disk. A declared-but-missing
  * root is a `missing_root` error.
@@ -360,3 +365,6 @@ export function summarizeIssues(issues) {
   }
   return {errors, warnings};
 }
+
+// Re-export issue constructors for callers/tests that want them.
+export {error as integrationError, warning as integrationWarning};

package/src/lib/component-discovery.mjs

@@ -273,24 +273,14 @@ export function findComponentReadme(coreDir, name) {
  * For "Button" finds src/Button/XDSButton.tsx
  * For "Layout" finds src/Layout/XDSLayout/XDSLayout.tsx
  * For "Card" finds src/Layout/Container/XDSCard.tsx (deep search fallback)
- *
- * Hooks and other functions are authored as `.ts` (e.g. `useMediaQuery.ts`,
- * `useResizable.ts`), so `.ts` candidates are searched alongside `.tsx`. Without
- * this, deriving the import path for a `.ts`-authored function falls back to the
- * bare `@astryxdesign/core` root instead of its tree-shakeable subpath.
  */
 export function findComponentSource(coreDir, name) {
   const srcDir = path.join(coreDir, 'src');
-  // Try the prefixed forms (`XDSButton.tsx`) first since that is the current
-  // on-disk convention, then the bare forms (`Button.tsx`) that the Astryx-prefix
-  // migration (P4) renames to. `.tsx` before `.ts` within each so a component's
-  // `.tsx` wins over a same-named `.ts` helper; `.ts` covers hooks/functions.
-  const candidateFiles = [
-    `XDS${name}.tsx`,
-    `${name}.tsx`,
-    `XDS${name}.ts`,
-    `${name}.ts`,
-  ];
+  // Try the prefixed form (`XDSButton.tsx`) first since that is the current
+  // on-disk convention, then the bare form (`Button.tsx`) that the Astryx-prefix
+  // migration (P4) renames to. Listing the prefixed name first keeps behavior
+  // identical until files are actually renamed.
+  const candidateFiles = [`XDS${name}.tsx`, `${name}.tsx`];
 
   function searchDir(dirPath) {
     if (!fs.existsSync(dirPath)) return null;

package/src/lib/component-loader.mjs

@@ -5,59 +5,6 @@
  */
 
 import {pathToFileURL} from 'node:url';
-import {importUserModule} from './module-loader.mjs';
-import {formatZodError} from './config-schema.mjs';
-import {ComponentDocSchema} from '../doc.mjs';
-
-/**
- * Load a component doc through the shared load/validation boundary.
- *
- * This is the typed counterpart to {@link loadDocs}: it loads `.doc.ts` via
- * jiti (and `.doc.mjs`/`.doc.js` via native import) and validates against
- * {@link ComponentDocSchema}. That schema accepts BOTH formats, so this loader
- * reads whichever the file uses:
- *   - NEW: the factory default export
- *     (`export default createComponentDoc({...})` / `createFunctionDoc` /
- *     `createDoc`) — the same single-export convention
- *     {@link loadModuleWithSchema} uses for config/integration/template. These
- *     carry a stamped `type` and validate against the matching per-kind schema.
- *   - OLD: the legacy loose `export const docs = {...}` (no `type`), validated
- *     against the permissive legacy union.
- * The default export wins when both are present. Throws a readable
- * `formatZodError`-style message on failure. Translations (`docsZh`/
- * `docsDense`) are merged exactly as {@link loadDocs} does so callers see
- * identical output.
- *
- * @param {string} docPath absolute path to a `.doc.{ts,mjs,js}` file
- * @param {{zh?: boolean, dense?: boolean, lang?: string}} [opts]
- * @returns {Promise<object>} the validated (and optionally translated) doc
- */
-export async function loadComponentDoc(
-  docPath,
-  {zh = false, dense = false, lang} = {},
-) {
-  const mod = await importUserModule(docPath);
-  const authored = mod?.default ?? mod?.docs;
-
-  const result = ComponentDocSchema.safeParse(authored);
-  if (!result.success) {
-    throw new Error(formatZodError(docPath, result.error));
-  }
-  const docs = authored;
-
-  const locale = lang || (dense ? 'dense' : zh ? 'zh' : null);
-  if (!locale) return docs;
-
-  const translationKey =
-    locale === 'zh' ? 'docsZh' : locale === 'dense' ? 'docsDense' : null;
-  if (!translationKey || !mod[translationKey]) return docs;
-
-  const translation = mod[translationKey];
-  if (translation.props || translation.components?.some(c => c.props)) {
-    return translation;
-  }
-  return mergeTranslation(docs, translation);
-}
 
 export function mergeTranslation(docs, translation) {
   if (!translation) return docs;

package/src/lib/config-schema.mjs

@@ -73,3 +73,33 @@ export function formatZodError(label, error) {
     .join('; ');
   return `${label} is invalid: ${issues}`;
 }
+
+/**
+ * @param {unknown} config
+ * @returns {import('../types/config').AstryxConfig}
+ */
+export function validateConfig(config) {
+  const result = AstryxConfigSchema.safeParse(config);
+  if (!result.success) {
+    throw new Error(
+      formatZodError('astryx.config default export', result.error),
+    );
+  }
+  return result.data;
+}
+
+/**
+ * @param {unknown} integration
+ * @param {string} [label]
+ * @returns {import('../types/integration').AstryxIntegration}
+ */
+export function validateIntegration(
+  integration,
+  label = 'integration manifest',
+) {
+  const result = AstryxIntegrationSchema.safeParse(integration);
+  if (!result.success) {
+    throw new Error(formatZodError(label, result.error));
+  }
+  return result.data;
+}

package/src/lib/xle/registry.mjs

@@ -230,3 +230,8 @@ export async function buildRegistry({cwd = process.cwd()} = {}) {
   };
   return cachedRegistry;
 }
+
+/** Test seam — drop the module-level cache. */
+export function resetRegistryCache() {
+  cachedRegistry = null;
+}

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

@@ -7,26 +7,28 @@ 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: 'https://lookaside.facebook.com/assets/astryx/DATA-Ami-Pena.png',
+    src: `${CDN}/DATA-Ami-Pena.png`,
   },
   {
     name: 'Drew Young',
-    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Drew-Young.png',
+    src: `${CDN}/DATA-Drew-Young.png`,
   },
   {
     name: 'Gabriela Fernandez',
-    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Gabriela-Fernandez.png',
+    src: `${CDN}/DATA-Gabriela-Fernandez.png`,
   },
   {
     name: 'Jihoo Song',
-    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Jihoo-Song.png',
+    src: `${CDN}/DATA-Jihoo-Song.png`,
   },
   {
     name: 'Nam Tran',
-    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Nam-Tran.png',
+    src: `${CDN}/DATA-Nam-Tran.png`,
   },
 ];
 

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

@@ -5,27 +5,29 @@
 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="https://lookaside.facebook.com/assets/astryx/DATA-Ana-Thomas.png"
+        src={`${CDN}/DATA-Ana-Thomas.png`}
         name="Ana Thomas"
         size="large"
         status={<AvatarStatusDot variant="success" label="Online" />}
       />
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Drew-Young.png"
+        src={`${CDN}/DATA-Drew-Young.png`}
         name="Drew Young"
         size="large"
       />
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Jihoo-Song.png"
+        src={`${CDN}/DATA-Jihoo-Song.png`}
         name="Jihoo Song"
         size="large"
       />
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Nam-Tran.png"
+        src={`${CDN}/DATA-Nam-Tran.png`}
         name="Nam Tran"
         size="large"
         status={<AvatarStatusDot variant="error" label="Online" />}

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

@@ -6,22 +6,24 @@ 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: 'https://lookaside.facebook.com/assets/astryx/DATA-Itai-Jordaan.png',
+    src: `${CDN}/DATA-Itai-Jordaan.png`,
     role: 'Engineering Lead',
     variant: 'success' as const,
   },
   {
     name: 'Margot Schroder',
-    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Margot-Schroder.png',
+    src: `${CDN}/DATA-Margot-Schroder.png`,
     role: 'Product Designer',
     variant: 'neutral' as const,
   },
   {
     name: 'Daniela Gimenez',
-    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Daniela-Gimenez.png',
+    src: `${CDN}/DATA-Daniela-Gimenez.png`,
     role: 'Engineering Manager',
     variant: 'error' as const,
   },

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

@@ -5,26 +5,24 @@
 import {Avatar} from '@astryxdesign/core/Avatar';
 import {Stack} from '@astryxdesign/core/Layout';
 
+const CDN = 'https://lookaside.facebook.com/assets/astryx';
+
 export default function AvatarWithImage() {
   return (
     <Stack direction="horizontal" gap={4} vAlign="center">
+      <Avatar src={`${CDN}/DATA-Ami-Pena.png`} name="Ami Pena" size="tiny" />
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Ami-Pena.png"
-        name="Ami Pena"
-        size="tiny"
-      />
-      <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Ana-Thomas.png"
+        src={`${CDN}/DATA-Ana-Thomas.png`}
         name="Ana Thomas"
         size="small"
       />
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Daniela-Gimenez.png"
+        src={`${CDN}/DATA-Daniela-Gimenez.png`}
         name="Daniela Gimenez"
         size="medium"
       />
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Gabriela-Fernandez.png"
+        src={`${CDN}/DATA-Gabriela-Fernandez.png`}
         name="Gabriela Fernandez"
         size="large"
       />

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

@@ -5,23 +5,25 @@
 import {Avatar, AvatarStatusDot} from '@astryxdesign/core/Avatar';
 import {Stack} from '@astryxdesign/core/Layout';
 
+const CDN = 'https://lookaside.facebook.com/assets/astryx';
+
 export default function AvatarWithStatus() {
   return (
     <Stack direction="horizontal" gap={4} vAlign="center">
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Itai-Jordaan.png"
+        src={`${CDN}/DATA-Itai-Jordaan.png`}
         name="Itai Jordaan"
         size="large"
         status={<AvatarStatusDot variant="success" label="Online" />}
       />
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Margot-Schroder.png"
+        src={`${CDN}/DATA-Margot-Schroder.png`}
         name="Margot Schroder"
         size="large"
         status={<AvatarStatusDot variant="neutral" label="Offline" />}
       />
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Pablo-Morales.png"
+        src={`${CDN}/DATA-Pablo-Morales.png`}
         name="Pablo Morales"
         size="large"
         status={<AvatarStatusDot variant="error" label="Busy" />}

package/templates/blocks/components/ChatComposerInput/ChatComposerInputControlledInput.tsx

@@ -10,7 +10,7 @@ import {Text} from '@astryxdesign/core/Text';
 export default function ChatComposerInputControlledInput() {
   const [value, setValue] = useState('');
   return (
-    <Stack direction="vertical" gap={3} style={{width: 450, maxWidth: '100%'}}>
+    <Stack direction="vertical" gap={3} style={{width: '100%', maxWidth: 450}}>
       <ChatComposer
         onSubmit={() => setValue('')}
         value={value}

package/templates/blocks/components/ChatComposerInput/ChatComposerInputDisabled.tsx

@@ -7,7 +7,7 @@ import {Stack} from '@astryxdesign/core/Layout';
 
 export default function ChatComposerInputDisabled() {
   return (
-    <Stack direction="vertical" style={{width: 450, maxWidth: '100%'}}>
+    <Stack direction="vertical" style={{width: '100%', maxWidth: 450}}>
       <ChatComposer
         onSubmit={() => {}}
         isDisabled

package/templates/blocks/components/ChatComposerInput/ChatComposerInputMentionTrigger.tsx

@@ -43,7 +43,7 @@ export default function ChatComposerInputMentionTrigger() {
   };
 
   return (
-    <Stack direction="vertical" gap={3} style={{width: 450, maxWidth: '100%'}}>
+    <Stack direction="vertical" gap={3} style={{width: '100%', maxWidth: 450}}>
       <ChatComposer
         onSubmit={() => setValue('')}
         input={

package/templates/blocks/components/ChatComposerInput/ChatComposerInputMultipleTriggers.tsx

@@ -54,7 +54,7 @@ export default function ChatComposerInputMultipleTriggers() {
   };
 
   return (
-    <Stack direction="vertical" gap={3} style={{width: 450, maxWidth: '100%'}}>
+    <Stack direction="vertical" gap={3} style={{width: '100%', maxWidth: 450}}>
       <Text type="supporting" color="secondary">
         Type @ for mentions (blue) or / for commands (yellow)
       </Text>

package/templates/blocks/components/ChatComposerInput/ChatComposerInputShowcase.tsx

@@ -7,7 +7,7 @@ import {Stack} from '@astryxdesign/core/Layout';
 
 export default function ChatComposerInputShowcase() {
   return (
-    <Stack direction="vertical" style={{width: 450, maxWidth: '100%'}}>
+    <Stack direction="vertical" style={{width: '100%', maxWidth: 450}}>
       <ChatComposer
         onSubmit={() => {}}
         input={

package/templates/blocks/components/ChatComposerInput/ChatComposerInputSlashCommands.tsx

@@ -40,7 +40,7 @@ export default function ChatComposerInputSlashCommands() {
   };
 
   return (
-    <Stack direction="vertical" style={{width: 450, maxWidth: '100%'}}>
+    <Stack direction="vertical" style={{width: '100%', maxWidth: 450}}>
       <ChatComposer
         onSubmit={() => {}}
         input={