@astryxdesign/cli 0.1.6-canary.fec872b → 0.1.6

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 '../schemas/doc-schema.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;
@@ -144,64 +91,15 @@ export async function loadDocs(readmePath, {zh = false, dense = false, lang} = {
 
   const translation = mod[translationKey];
 
-  // A full ComponentDoc-shaped translation (legacy docsZh shape) used to be
-  // returned wholesale. That made it a REPLACEMENT, not an overlay: any prop
-  // the translation had not caught up with simply ceased to exist —
-  // `component Button --zh` silently omitted `isInterruptible` and
-  // `isIconOnly`. A reader of the translated docs cannot discover a prop that
-  // is not there. Overlay it instead, so an untranslated prop falls back to
-  // its English entry. (Same principle as the reference-doc overlays, #2182.)
+  // If the translation is a full ComponentDoc (legacy docsZh shape), return it directly
   if (translation.props || translation.components?.some(c => c.props)) {
-    return overlayComponentDoc(docs, translation);
+    return translation;
   }
 
   // Otherwise it's a TranslationDoc — merge it onto docs
   return mergeTranslation(docs, translation);
 }
 
-/**
- * Overlay a full-ComponentDoc-shaped translation onto the English doc.
- *
- * Base order and completeness win; the translation supplies text for the
- * entries it covers. Props are matched by name, never by position, so a
- * translation that is missing entries (or lists them in another order) can no
- * longer drop or misattribute one.
- *
- * @param {any} docs Base (English) component doc.
- * @param {any} translation Translated doc, possibly covering only some props.
- * @returns {any} Merged doc with every base prop present.
- */
-function overlayComponentDoc(docs, translation) {
-  /** Merge one prop list: keep base entries and order, translate what's covered. */
-  const overlayProps = (baseProps, tProps) => {
-    if (!baseProps) return baseProps;
-    const byName = new Map((tProps ?? []).map(p => [p.name, p]));
-    return baseProps.map(prop => {
-      const t = byName.get(prop.name);
-      // Take the translated text, but never let it drop the prop's contract
-      // (type/default/required stay authoritative from the English doc).
-      return t ? {...prop, ...t, name: prop.name, type: prop.type} : prop;
-    });
-  };
-
-  const merged = {...docs, ...translation};
-
-  merged.props = overlayProps(docs.props, translation.props);
-
-  if (docs.components) {
-    const tByName = new Map(
-      (translation.components ?? []).map(c => [c.name, c]),
-    );
-    merged.components = docs.components.map(base => {
-      const t = tByName.get(base.name);
-      if (!t) return base;
-      return {...base, ...t, props: overlayProps(base.props, t.props)};
-    });
-  }
-
-  return merged;
-}
-
 /**
  * Find the doc file for a component, checking both top-level
  * and nested directories. Prefers {Name}.doc.mjs, then README.md

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/hook-format.mjs

@@ -11,7 +11,6 @@
 
 import {discoverHooks, findHookDoc} from './hook-discovery.mjs';
 import {loadDocs} from './component-loader.mjs';
-import {mdCell} from './component-format.mjs';
 
 /**
  * Build a signature string from hook docs.
@@ -52,11 +51,9 @@ function formatParamsTable(params) {
   lines.push('| Param | Type | Default | Description |');
   lines.push('|-------|------|---------|-------------|');
   for (const p of params) {
-    const def = p.default ? `\`${mdCell(p.default)}\`` : '\u2014';
+    const def = p.default ? `\`${p.default}\`` : '\u2014';
     const req = p.required ? ' **(required)**' : '';
-    lines.push(
-      `| \`${mdCell(p.name)}\` | \`${mdCell(p.type)}\` | ${def} | ${mdCell(p.description)}${req} |`,
-    );
+    lines.push(`| \`${p.name}\` | \`${p.type}\` | ${def} | ${p.description}${req} |`);
   }
   return lines.join('\n');
 }
@@ -70,9 +67,7 @@ function formatReturnsTable(returns) {
   lines.push('| Field | Type | Description |');
   lines.push('|-------|------|-------------|');
   for (const r of returns) {
-    lines.push(
-      `| \`${mdCell(r.name)}\` | \`${mdCell(r.type)}\` | ${mdCell(r.description)} |`,
-    );
+    lines.push(`| \`${r.name}\` | \`${r.type}\` | ${r.description} |`);
   }
   return lines.join('\n');
 }

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/src/template.mjs

@@ -1,15 +1,73 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 /**
- * @file Static template authoring API (public `@astryxdesign/cli/template`).
+ * @file Static template authoring API.
  *
- * 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/`.
+ * 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`).
  */
 
-export {createPageTemplate, createBlockTemplate} from '@astryxdesign/core/authoring';
-export {BaseTemplateSchema, TemplateEnvelopeSchema} from './schemas/template-schema.mjs';
+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'});
+}

package/src/types/config.d.ts

@@ -1,15 +1,70 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 /**
- * 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.
+ * 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.
  */
-export type {
-  PostCodemodCommand,
-  PostCodemodHook,
-  XleComponent,
-  AstryxConfig,
-} from '@astryxdesign/core/config';
-
-export {createConfig} from '@astryxdesign/core/config';
+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;

package/src/types/integration.d.ts

@@ -1,14 +1,21 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 /**
- * 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.
+ * 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.
  */
-export type {AstryxIntegration} from '@astryxdesign/core/authoring';
-export {createIntegration} from '@astryxdesign/core/authoring';
+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;
+}
 
 /** An issue surfaced by an integration. */
 export interface AstryxIntegrationIssue {
@@ -16,3 +23,7 @@ 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,18 +1,54 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 /**
- * The template-authoring surface moved to `@astryxdesign/core/authoring`.
- * Re-exported here so existing `@astryxdesign/cli/template` type imports keep
- * resolving.
+ * 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.
  */
-export type {
-  AstryxTemplatePreview,
-  AstryxTemplateInput,
-  AstryxPageTemplateInput,
-  AstryxBlockTemplateInput,
-  AstryxPageTemplate,
-  AstryxBlockTemplate,
-  AstryxTemplate,
-} from '@astryxdesign/core/authoring';
-
-export {createPageTemplate, createBlockTemplate} from '@astryxdesign/core/authoring';
+
+/** 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'};

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