@astryxdesign/cli 0.3.0-canary.b8cfd19 → 0.3.0-canary.ccb5ca9

package/assets/docs/theme.doc.mjs

@@ -106,7 +106,7 @@ function App() {
             [
               'Y2K',
               "import {y2kTheme} from '@astryxdesign/theme-y2k'",
-              'Playful Y2K pop; periwinkle body, holographic accents, Poppins + Crimson Text.',
+              'Playful Y2K pop; periwinkle body, holographic accents, Poppins + `Crimson Text`.',
             ],
           ],
         },
@@ -510,7 +510,7 @@ import './themes/ocean.css';
       content: [
         {
           type: 'prose',
-          text: 'Wrap different sections in separate <Theme> providers.',
+          text: 'Wrap different sections in separate [`<Theme>`](/components/Theme) providers.',
         },
         {
           type: 'code',
@@ -606,7 +606,7 @@ function ChartConfig() {
         },
         {
           type: 'prose',
-          text: 'Prefer CSS variables, StyleX token imports, xstyle, or className for ordinary styling. To change the theme or mode, manage state at the app level and pass it to <Theme>.',
+          text: 'Prefer CSS variables, StyleX token imports, xstyle, or className for ordinary styling. To change the theme or mode, manage state at the app level and pass it to `<Theme>`.',
         },
         {
           type: 'prose',

package/assets/docs/typography.doc.mjs

@@ -122,7 +122,7 @@ export const docs = {
         },
         {
           type: 'prose',
-          text: 'Display text often needs heading semantics for accessibility. Use the type prop on Heading to apply display styling while preserving the correct HTML element: <Heading level={1} type="display-1"> gives you display-1 styling with an <h1> tag, so screen readers see the correct document outline.',
+          text: 'Display text often needs heading semantics for accessibility. Use the type prop on Heading to apply display styling while preserving the correct HTML element: `<Heading level={1} type="display-1">` gives you display-1 styling with an `<h1>` tag, so screen readers see the correct document outline.',
         },
       ],
     },
@@ -205,7 +205,7 @@ const denseTheme = defineTheme({
           items: [
             'Use Heading for document headings and Text for everything else; they apply the full type scale automatically.',
             'Adjust typography holistically: change base and ratio in defineTheme to shift the entire ramp (e.g. { base: 16, ratio: 1.25 } for editorial, { base: 12, ratio: 1.125 } for dense UI).',
-            'Use display types with as="h1" (or h2/h3) when display text is a page heading; this preserves accessibility while giving you display-level sizing. Or better, use <Heading level={1} type="display-1"> which handles both semantics and styling.',
+            'Use display types with as="h1" (or h2/h3) when display text is a page heading; this preserves accessibility while giving you display-level sizing. Or better, use `<Heading level={1} type="display-1">` which handles both semantics and styling.',
             'Let line-height snap to the 4px grid via the type scale; expandTypeScale computes leading automatically from base and ratio.',
             'Use the supporting type for secondary information: timestamps, helper text, metadata, captions.',
             'Use accessibilityLevel on Heading when the visual hierarchy doesn\u0027t match the document outline (e.g. sidebar or card headings).',

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'}}
         />

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

@@ -28,7 +28,7 @@ export default function OverlayHoverReveal() {
       content={<Button label="Quick view" variant="secondary" size="sm" />}>
       <AspectRatio ratio={16 / 9} style={frame}>
         <img
-          src="https://lookaside.facebook.com/assets/astryx/light-working-horizontal-1.png"
+          src="/template-assets/light-working-horizontal-1.png"
           alt="Workspace preview"
           style={image}
         />

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

@@ -29,7 +29,7 @@ export default function OverlayShowcase() {
           overflow: 'clip',
         }}>
         <img
-          src="https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png"
+          src="/template-assets/light-scene-horizontal-1.png"
           alt="Abstract landscape"
           style={{width: '100%', height: '100%', objectFit: 'cover'}}
         />