@astryxdesign/cli 0.3.0-canary.d1b7d82 → 0.3.0-canary.d52d2cb

package/api/template/template.test.mjs

@@ -4,36 +4,35 @@ import {describe, it, expect} from 'vitest';
 import {stripTemplateAssetRefs, template} from './template.mjs';
 
 describe('stripTemplateAssetRefs', () => {
-  it('replaces a lookaside astryx image URL with an inline data URI', () => {
+  it('replaces a /template-assets image path with an inline data URI', () => {
     const src =
-      "const hero = 'https://lookaside.facebook.com/assets/astryx/colorful-home-horizontal-1.png';";
+      "const hero = '/template-assets/colorful-home-horizontal-1.png';";
     const out = stripTemplateAssetRefs(src);
-    expect(out).not.toContain('lookaside.facebook.com');
+    expect(out).not.toContain('/template-assets/');
     expect(out).toContain('data:image/svg+xml,');
   });
 
-  it('replaces a lookaside block-avatar image URL', () => {
-    const src =
-      'src="https://lookaside.facebook.com/assets/astryx/avatar-profile-05.jpg"';
+  it('replaces a /template-assets block-avatar image path', () => {
+    const src = 'src="/template-assets/avatar-profile-05.jpg"';
     const out = stripTemplateAssetRefs(src);
-    expect(out).not.toContain('lookaside.facebook.com');
+    expect(out).not.toContain('/template-assets/');
     expect(out).toContain('data:image/svg+xml,');
   });
 
-  it('replaces every lookaside reference, not just the first', () => {
+  it('replaces every /template-assets reference, not just the first', () => {
     const src = [
-      "'https://lookaside.facebook.com/assets/astryx/colorful-home-horizontal-1.png'",
-      "'https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-3.png'",
-      "'https://lookaside.facebook.com/assets/astryx/moody-scene-horizontal-1.png'",
+      "'/template-assets/colorful-home-horizontal-1.png'",
+      "'/template-assets/illustrative-horizontal-3.png'",
+      "'/template-assets/moody-scene-horizontal-1.png'",
     ].join('\n');
     const out = stripTemplateAssetRefs(src);
-    expect(out).not.toContain('lookaside.facebook.com');
+    expect(out).not.toContain('/template-assets/');
     expect(out.match(/data:image\/svg\+xml,/g)).toHaveLength(3);
   });
 
   it('preserves surrounding source structure', () => {
     const src =
-      "const data = [{src: 'https://lookaside.facebook.com/assets/astryx/x.png', alt: 'X'}];";
+      "const data = [{src: '/template-assets/x.png', alt: 'X'}];";
     const out = stripTemplateAssetRefs(src);
     expect(out).toContain("alt: 'X'");
     expect(out).toContain('const data = [{src:');

package/assets/codemods/transforms/v0.3.0/__tests__/migrate-grid-minchildwidth-to-columns.test.mjs

@@ -0,0 +1,82 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+
+async function applyTransform(source) {
+  const {default: transform} =
+    await import('../migrate-grid-minchildwidth-to-columns.mjs');
+  const jscodeshift = (await import('jscodeshift')).default;
+  const j = jscodeshift.withParser('tsx');
+  const api = {jscodeshift: j, stats: () => {}, report: () => {}};
+  const file = {source, path: 'test.tsx'};
+  const result = transform(file, api);
+  return result ?? source;
+}
+
+/** Collapse whitespace (and space padding inside braces) so formatting of
+ * pretty-printed multiline objects does not matter for assertions. */
+function normalize(str) {
+  return str
+    .replace(/\s+/g, ' ')
+    .replace(/\{\s+/g, '{')
+    .replace(/\s+\}/g, '}')
+    .trim();
+}
+
+describe('migrate-grid-minchildwidth-to-columns', () => {
+  it('migrates minChildWidth only to columns={{minWidth, repeat: "fit"}}', async () => {
+    const input = `import {Grid} from '@astryxdesign/core';
+const t = <Grid minChildWidth={280}><Item /></Grid>;`;
+    const output = await applyTransform(input);
+    expect(output).not.toContain('minChildWidth');
+    expect(normalize(output)).toContain(
+      normalize("columns={{minWidth: 280, repeat: 'fit'}}"),
+    );
+  });
+
+  it('migrates columns={n} + minChildWidth to columns={{minWidth, max, repeat: "fit"}}', async () => {
+    const input = `import {Grid} from '@astryxdesign/core';
+const t = <Grid columns={3} minChildWidth={280}><Item /></Grid>;`;
+    const output = await applyTransform(input);
+    expect(output).not.toContain('minChildWidth');
+    expect(normalize(output)).toContain(
+      normalize("columns={{minWidth: 280, max: 3, repeat: 'fit'}}"),
+    );
+  });
+
+  it('preserves other attributes (gap) when migrating the combo', async () => {
+    const input = `import {Grid} from '@astryxdesign/core';
+const t = <Grid columns={5} gap={5} minChildWidth={140}><Item /></Grid>;`;
+    const output = await applyTransform(input);
+    expect(output).not.toContain('minChildWidth');
+    expect(normalize(output)).toContain(
+      normalize("columns={{minWidth: 140, max: 5, repeat: 'fit'}}"),
+    );
+    expect(output).toContain('gap={5}');
+  });
+
+  it('bails when columns is already an object (ambiguous)', async () => {
+    const input = `import {Grid} from '@astryxdesign/core';
+const t = <Grid columns={{minWidth: 100}} minChildWidth={280}><Item /></Grid>;`;
+    const output = await applyTransform(input);
+    // Unchanged: object columns is ambiguous, so it is left as-is.
+    expect(output).toBe(input);
+  });
+
+  it('bails when columns is a non-numeric/dynamic expression', async () => {
+    const input = `import {Grid} from '@astryxdesign/core';
+const t = <Grid columns={cols} minChildWidth={280}><Item /></Grid>;`;
+    const output = await applyTransform(input);
+    expect(output).toBe(input);
+  });
+
+  it('is alias-aware and supports the subpath import source', async () => {
+    const input = `import {Grid as G} from '@astryxdesign/core/Grid';
+const t = <G columns={4} minChildWidth={200}><Item /></G>;`;
+    const output = await applyTransform(input);
+    expect(output).not.toContain('minChildWidth');
+    expect(normalize(output)).toContain(
+      normalize("columns={{minWidth: 200, max: 4, repeat: 'fit'}}"),
+    );
+  });
+});

package/assets/codemods/transforms/v0.3.0/migrate-grid-minchildwidth-to-columns.mjs

@@ -49,11 +49,10 @@ export default function transformer(file, api) {
         a.type === 'JSXAttribute' && a.name?.name === 'minChildWidth',
     );
     if (!minAttr) return;
-    const hasColumns = attrs.some(
+    const columnsAttr = attrs.find(
       (/** @type {any} */ a) =>
         a.type === 'JSXAttribute' && a.name?.name === 'columns',
     );
-    if (hasColumns) return;
 
     let minWidthExpr;
     if (
@@ -67,6 +66,43 @@ export default function transformer(file, api) {
       return;
     }
 
+    if (columnsAttr) {
+      // Both `columns` and `minChildWidth` are present. This is only safely
+      // migratable when `columns` is a numeric literal (e.g. `columns={3}`).
+      //
+      // In the old (0.2.0) Grid runtime, when both props were set and
+      // `columns` was a number, `minChildWidth` dominated and the numeric
+      // `columns` became a *max column cap* with `auto-fit`:
+      //   repeat(auto-fit, minmax(minChildWidth, 1fr)) capped at `columns`.
+      // The 0.3.0 `columns` object models this exactly as
+      //   {minWidth, max, repeat: 'fit'}.
+      // So the lossless rewrite is:
+      //   <Grid columns={3} minChildWidth={280}>
+      //     -> <Grid columns={{minWidth: 280, max: 3, repeat: 'fit'}}>
+      //
+      // If `columns` is already an object or a non-numeric/dynamic
+      // expression, the combined behavior is genuinely ambiguous, so we
+      // bail and leave it unmigrated (it surfaces separately).
+      const columnsValue = columnsAttr.value;
+      if (columnsValue?.type !== 'JSXExpressionContainer') return;
+      const columnsExpr = columnsValue.expression;
+      const isNumericLiteral =
+        (columnsExpr?.type === 'NumericLiteral' ||
+          columnsExpr?.type === 'Literal') &&
+        typeof columnsExpr.value === 'number';
+      if (!isNumericLiteral) return;
+
+      const columnsObject = j.objectExpression([
+        j.property('init', j.identifier('minWidth'), minWidthExpr),
+        j.property('init', j.identifier('max'), j.literal(columnsExpr.value)),
+        j.property('init', j.identifier('repeat'), j.literal('fit')),
+      ]);
+      columnsAttr.value = j.jsxExpressionContainer(columnsObject);
+      attrs.splice(attrs.indexOf(minAttr), 1);
+      hasChanges = true;
+      return;
+    }
+
     const columnsObject = j.objectExpression([
       j.property('init', j.identifier('minWidth'), minWidthExpr),
       j.property('init', j.identifier('repeat'), j.literal('fit')),

package/assets/docs/layout.doc.dense.mjs

@@ -64,7 +64,7 @@ export const docsDense = {
             'no Card-wrapped list items (card soup)',
             'no stacked full-width Cards as page structure',
             'no Cards in Cards',
-            'no decorative Badge — counts/enums only; StatusDot/Token for status',
+            'no decorative Badge: counts/enums only; StatusDot/Token for status',
           ],
         },
       ],

package/assets/templates/blocks/components/AspectRatio/AspectRatioCircleImage.tsx

@@ -10,7 +10,7 @@ export default function AspectRatioCircleImage() {
     <Center width={300}>
       <AspectRatio ratio={1} shape="ellipse" fit="cover">
         <img
-          src="https://lookaside.facebook.com/assets/astryx/light-home-square-1.png"
+          src="/template-assets/light-home-square-1.png"
           alt="Circular image"
         />
       </AspectRatio>

package/assets/templates/blocks/components/AspectRatio/AspectRatioImageGallery.tsx

@@ -27,7 +27,7 @@ export default function AspectRatioImageGallery() {
         {images.map(({id, alt}) => (
           <AspectRatio key={id} ratio={4 / 3} fit="cover">
             <img
-              src="https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-1.png"
+              src="/template-assets/illustrative-horizontal-1.png"
               alt={alt}
               style={{borderRadius: 8}}
             />

package/assets/templates/blocks/components/AspectRatio/AspectRatioShowcase.tsx

@@ -10,19 +10,19 @@ const items = [
   {
     ratio: 1,
     label: '1 : 1',
-    src: 'https://lookaside.facebook.com/assets/astryx/light-home-square-1.png',
+    src: '/template-assets/light-home-square-1.png',
     alt: '1:1 square',
   },
   {
     ratio: 4 / 3,
     label: '4 : 3',
-    src: 'https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-1.png',
+    src: '/template-assets/illustrative-horizontal-1.png',
     alt: '4:3 standard',
   },
   {
     ratio: 16 / 9,
     label: '16 : 9',
-    src: 'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png',
+    src: '/template-assets/light-scene-horizontal-1.png',
     alt: '16:9 widescreen',
   },
 ];

package/assets/templates/blocks/components/AspectRatio/AspectRatioSquareImage.tsx

@@ -10,7 +10,7 @@ export default function AspectRatioSquareImage() {
     <Center width={300}>
       <AspectRatio ratio={1} fit="cover">
         <img
-          src="https://lookaside.facebook.com/assets/astryx/light-home-square-1.png"
+          src="/template-assets/light-home-square-1.png"
           alt="1:1 square"
         />
       </AspectRatio>

package/assets/templates/blocks/components/AspectRatio/AspectRatioWidescreen.tsx

@@ -10,7 +10,7 @@ export default function AspectRatioWidescreen() {
     <Center width={600}>
       <AspectRatio ratio={16 / 9} fit="cover">
         <img
-          src="https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png"
+          src="/template-assets/light-scene-horizontal-1.png"
           alt="16:9 widescreen"
         />
       </AspectRatio>

package/assets/templates/blocks/components/Avatar/AvatarFallbackChain.tsx

@@ -11,7 +11,7 @@ export default function AvatarFallbackChain() {
     <VStack gap={4}>
       <HStack gap={3} vAlign="center">
         <Avatar
-          src="https://lookaside.facebook.com/assets/astryx/DATA-Daniela-Gimenez.png"
+          src="/template-assets/DATA-Daniela-Gimenez.png"
           name="Daniela Gimenez"
           size="lg"
         />
@@ -19,8 +19,8 @@ export default function AvatarFallbackChain() {
       </HStack>
       <HStack gap={3} vAlign="center">
         <Avatar
-          src="https://lookaside.facebook.com/assets/astryx/does-not-exist-primary.jpg"
-          fallbackSrc="https://lookaside.facebook.com/assets/astryx/DATA-Ami-Pena.png"
+          src="/template-assets/does-not-exist-primary.jpg"
+          fallbackSrc="/template-assets/DATA-Ami-Pena.png"
           name="Invalid User"
           size="lg"
         />
@@ -28,8 +28,8 @@ export default function AvatarFallbackChain() {
       </HStack>
       <HStack gap={3} vAlign="center">
         <Avatar
-          src="https://lookaside.facebook.com/assets/astryx/does-not-exist-primary.jpg"
-          fallbackSrc="https://lookaside.facebook.com/assets/astryx/does-not-exist-fallback.jpg"
+          src="/template-assets/does-not-exist-primary.jpg"
+          fallbackSrc="/template-assets/does-not-exist-fallback.jpg"
           name="Test User"
           size="lg"
         />
@@ -37,7 +37,7 @@ export default function AvatarFallbackChain() {
       </HStack>
       <HStack gap={3} vAlign="center">
         <Avatar
-          src="https://lookaside.facebook.com/assets/astryx/does-not-exist-primary.jpg"
+          src="/template-assets/does-not-exist-primary.jpg"
           size="lg"
         />
         <Text type="supporting">All invalid, no name</Text>

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

@@ -10,23 +10,23 @@ import {Text} from '@astryxdesign/core/Text';
 const USERS = [
   {
     name: 'Ami Pena',
-    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Ami-Pena.png',
+    src: '/template-assets/DATA-Ami-Pena.png',
   },
   {
     name: 'Drew Young',
-    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Drew-Young.png',
+    src: '/template-assets/DATA-Drew-Young.png',
   },
   {
     name: 'Gabriela Fernandez',
-    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Gabriela-Fernandez.png',
+    src: '/template-assets/DATA-Gabriela-Fernandez.png',
   },
   {
     name: 'Jihoo Song',
-    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Jihoo-Song.png',
+    src: '/template-assets/DATA-Jihoo-Song.png',
   },
   {
     name: 'Nam Tran',
-    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Nam-Tran.png',
+    src: '/template-assets/DATA-Nam-Tran.png',
   },
 ];
 

package/assets/templates/blocks/components/Avatar/AvatarInteractive.tsx

@@ -11,7 +11,7 @@ export default function AvatarInteractive() {
     <Stack direction="horizontal" gap={6} vAlign="start">
       <Stack direction="vertical" gap={2} hAlign="center">
         <Avatar
-          src="https://lookaside.facebook.com/assets/astryx/DATA-Itai-Jordaan.png"
+          src="/template-assets/DATA-Itai-Jordaan.png"
           name="Itai Jordaan"
           size="xl"
           href="https://example.com/people/itai-jordaan"
@@ -22,7 +22,7 @@ export default function AvatarInteractive() {
       </Stack>
       <Stack direction="vertical" gap={2} hAlign="center">
         <Avatar
-          src="https://lookaside.facebook.com/assets/astryx/DATA-Margot-Schroder.png"
+          src="/template-assets/DATA-Margot-Schroder.png"
           name="Margot Schroder"
           size="xl"
           onClick={() => window.alert('Opening Margot Schroder’s profile')}

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

@@ -9,23 +9,23 @@ 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="/template-assets/DATA-Ana-Thomas.png"
         name="Ana Thomas"
         size="xl"
         status={<AvatarStatusDot variant="success" label="Online" />}
       />
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Drew-Young.png"
+        src="/template-assets/DATA-Drew-Young.png"
         name="Drew Young"
         size="xl"
       />
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Jihoo-Song.png"
+        src="/template-assets/DATA-Jihoo-Song.png"
         name="Jihoo Song"
         size="xl"
       />
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Nam-Tran.png"
+        src="/template-assets/DATA-Nam-Tran.png"
         name="Nam Tran"
         size="xl"
         status={<AvatarStatusDot variant="error" label="Busy" />}

package/assets/templates/blocks/components/Avatar/AvatarTooltip.tsx

@@ -15,17 +15,17 @@ export default function AvatarTooltip() {
         </Text>
         <Stack direction="horizontal" gap={4} vAlign="center">
           <Avatar
-            src="https://lookaside.facebook.com/assets/astryx/DATA-Ana-Thomas.png"
+            src="/template-assets/DATA-Ana-Thomas.png"
             name="Ana Thomas"
             size="xl"
           />
           <Avatar
-            src="https://lookaside.facebook.com/assets/astryx/DATA-Drew-Young.png"
+            src="/template-assets/DATA-Drew-Young.png"
             name="Drew Young"
             size="xl"
           />
           <Avatar
-            src="https://lookaside.facebook.com/assets/astryx/DATA-Jihoo-Song.png"
+            src="/template-assets/DATA-Jihoo-Song.png"
             name="Jihoo Song"
             size="xl"
           />
@@ -36,7 +36,7 @@ export default function AvatarTooltip() {
           Custom tooltip text
         </Text>
         <Avatar
-          src="https://lookaside.facebook.com/assets/astryx/DATA-Itai-Jordaan.png"
+          src="/template-assets/DATA-Itai-Jordaan.png"
           name="Itai Jordaan"
           size="xl"
           tooltip="Itai Jordaan · Engineering Lead"

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

@@ -9,19 +9,19 @@ import {Text} from '@astryxdesign/core/Text';
 const USERS = [
   {
     name: 'Itai Jordaan',
-    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Itai-Jordaan.png',
+    src: '/template-assets/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: '/template-assets/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: '/template-assets/DATA-Daniela-Gimenez.png',
     role: 'Engineering Manager',
     variant: 'error' as const,
   },

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

@@ -9,22 +9,22 @@ export default function AvatarWithImage() {
   return (
     <Stack direction="horizontal" gap={4} vAlign="center">
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Ami-Pena.png"
+        src="/template-assets/DATA-Ami-Pena.png"
         name="Ami Pena"
         size="xsm"
       />
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Ana-Thomas.png"
+        src="/template-assets/DATA-Ana-Thomas.png"
         name="Ana Thomas"
         size="md"
       />
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Daniela-Gimenez.png"
+        src="/template-assets/DATA-Daniela-Gimenez.png"
         name="Daniela Gimenez"
         size="lg"
       />
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Gabriela-Fernandez.png"
+        src="/template-assets/DATA-Gabriela-Fernandez.png"
         name="Gabriela Fernandez"
         size="xl"
       />

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

@@ -9,19 +9,19 @@ 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="/template-assets/DATA-Itai-Jordaan.png"
         name="Itai Jordaan"
         size="xl"
         status={<AvatarStatusDot variant="success" label="Online" />}
       />
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Margot-Schroder.png"
+        src="/template-assets/DATA-Margot-Schroder.png"
         name="Margot Schroder"
         size="xl"
         status={<AvatarStatusDot variant="neutral" label="Offline" />}
       />
       <Avatar
-        src="https://lookaside.facebook.com/assets/astryx/DATA-Pablo-Morales.png"
+        src="/template-assets/DATA-Pablo-Morales.png"
         name="Pablo Morales"
         size="xl"
         status={<AvatarStatusDot variant="error" label="Busy" />}

package/assets/templates/blocks/components/ChatComposerDrawer/ChatComposerDrawerAttachments.tsx

@@ -11,31 +11,31 @@ import {Stack} from '@astryxdesign/core/Layout';
 const IMAGE_ATTACHMENTS = [
   {
     id: '1',
-    src: 'https://lookaside.facebook.com/assets/astryx/illustrative-vertical-1.png',
+    src: '/template-assets/illustrative-vertical-1.png',
     alt: 'River through a valley',
     label: 'valley.jpg',
   },
   {
     id: '2',
-    src: 'https://lookaside.facebook.com/assets/astryx/illustrative-vertical-2.png',
+    src: '/template-assets/illustrative-vertical-2.png',
     alt: 'Foggy mountain peak',
     label: 'mountain.jpg',
   },
   {
     id: '3',
-    src: 'https://lookaside.facebook.com/assets/astryx/illustrative-vertical-3.png',
+    src: '/template-assets/illustrative-vertical-3.png',
     alt: 'Golden retriever puppy',
     label: 'puppy.jpg',
   },
   {
     id: '4',
-    src: 'https://lookaside.facebook.com/assets/astryx/illustrative-vertical-4.png',
+    src: '/template-assets/illustrative-vertical-4.png',
     alt: 'Bridge at sunset',
     label: 'bridge.jpg',
   },
   {
     id: '5',
-    src: 'https://lookaside.facebook.com/assets/astryx/illustrative-vertical-5.png',
+    src: '/template-assets/illustrative-vertical-5.png',
     alt: 'Lakeside at dusk',
     label: 'lakeside.jpg',
   },

package/assets/templates/blocks/components/Lightbox/LightboxGallery.tsx

@@ -8,23 +8,23 @@ import {Thumbnail} from '@astryxdesign/core/Thumbnail';
 
 const PHOTOS = [
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/Neutral-Backpack.png',
+    src: '/template-assets/Neutral-Backpack.png',
     alt: 'Backpack',
     caption: 'A backpack displayed on a neutral background.',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/building.png',
+    src: '/template-assets/building.png',
     alt: 'Modern building',
     caption: 'A modern building with a contemporary architectural design.',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png',
+    src: '/template-assets/light-scene-horizontal-1.png',
     alt: 'Coastal shoreline with ocean waves',
     caption:
       'A scenic coastline with waves rolling onto a sandy beach beneath a clear sky.',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/illustrative-vertical-1.png',
+    src: '/template-assets/illustrative-vertical-1.png',
     alt: 'Illustrated lakeside landscape at sunset',
     caption:
       'A stylized landscape illustration featuring pink clouds reflected over a calm lake at sunset.',

package/assets/templates/blocks/components/Lightbox/LightboxShowcase.tsx

@@ -12,7 +12,7 @@ export default function LightboxShowcase() {
         isOpen={isOpen}
         onOpenChange={setIsOpen}
         media={{
-          src: 'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png',
+          src: '/template-assets/light-scene-horizontal-1.png',
           alt: 'Coastal shoreline with ocean waves',
           caption:
             'A scenic coastline with waves rolling onto a sandy beach beneath a clear sky.',

package/assets/templates/blocks/components/Lightbox/LightboxVideo.tsx

@@ -16,7 +16,7 @@ export default function LightboxVideo() {
         isOpen={isOpen}
         onOpenChange={setIsOpen}
         media={{
-          src: 'https://lookaside.facebook.com/assets/?set=astryx&name=Nature-1&density=1',
+          src: '/template-assets/Nature-1.mp4',
           alt: 'Flower blooming in time-lapse',
           type: 'video',
           caption: 'A flower blooming in time-lapse',

package/assets/templates/blocks/components/Lightbox/LightboxZoom.tsx

@@ -12,7 +12,7 @@ export default function LightboxZoom() {
   return (
     <>
       <Thumbnail
-        src="https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png"
+        src="/template-assets/light-scene-horizontal-1.png"
         alt="Coastal shoreline with ocean waves"
         label="Coastal shoreline with ocean waves"
         onClick={() => setIsOpen(true)}
@@ -21,7 +21,7 @@ export default function LightboxZoom() {
         isOpen={isOpen}
         onOpenChange={setIsOpen}
         media={{
-          src: 'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png',
+          src: '/template-assets/light-scene-horizontal-1.png',
           alt: 'Coastal shoreline with ocean waves',
           caption:
             'A scenic coastline. Double-click to zoom in and drag to pan.',

package/assets/templates/blocks/components/MediaTheme/MediaThemeImageOverlay.tsx

@@ -10,7 +10,7 @@ import {Stack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 
 const LANDSCAPE_IMAGE_URL =
-  'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png';
+  '/template-assets/light-scene-horizontal-1.png';
 
 export default function MediaThemeImageOverlay() {
   return (

package/assets/templates/blocks/components/MediaTheme/MediaThemeLightScrim.tsx

@@ -10,7 +10,7 @@ import {Stack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 
 const BRIGHT_ROOM_IMAGE_URL =
-  'https://lookaside.facebook.com/assets/astryx/light-home-square-1.png';
+  '/template-assets/light-home-square-1.png';
 
 export default function MediaThemeLightScrim() {
   return (

package/assets/templates/blocks/components/MediaTheme/MediaThemeShowcase.tsx

@@ -11,7 +11,7 @@ import {Badge} from '@astryxdesign/core/Badge';
 import {Icon} from '@astryxdesign/core/Icon';
 
 const SHOWCASE_IMAGE_URL =
-  'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png';
+  '/template-assets/light-scene-horizontal-1.png';
 
 export default function MediaThemeShowcase() {
   return (

package/assets/templates/blocks/components/Overlay/OverlayBottomStrip.tsx

@@ -33,7 +33,7 @@ export default function OverlayBottomStrip() {
           overflow: 'clip',
         }}>
         <img
-          src="https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-1.png"
+          src="/template-assets/illustrative-horizontal-1.png"
           alt="Product highlight preview"
           style={{width: '100%', height: '100%', objectFit: 'cover'}}
         />