@astryxdesign/cli 0.5.0-canary.32a62fd → 0.5.0-canary.3799df9

package/api/theme/themeTargets.doc.mjs

@@ -18,9 +18,9 @@ export const doc = {
     'Enumerates the whole themeable surface: each `defineTheme` components key, the stable ' +
     'class it paints, the component that declares it, and the props and states that are legal ' +
     'override keys under it. Same source as the Theming table `astryx component <Name>` prints ' +
-    '— the component docs — so the list cannot drift from the components, and `theme build` ' +
+    '(the component docs), so the list cannot drift from the components, and `theme build` ' +
     'validates overrides against this exact set. A filter naming a component gives that ' +
-    'component\u2019s set; anything else is a substring search over the keys.',
+    'component\'s set; anything else is a substring search over the keys.',
   importPath: '@astryxdesign/cli/api',
   signature:
     'themeTargets(filter?: string, ctx?: {cwd?: string}): Promise<ThemeTargetsResponse>',
@@ -35,7 +35,7 @@ export const doc = {
     {
       name: 'ctx.cwd',
       type: 'string',
-      description: 'Directory the project’s @astryxdesign/core is resolved from.',
+      description: 'Directory the project\'s @astryxdesign/core is resolved from.',
     },
   ],
   returns: [

package/assets/templates/blocks/components/Step/StepContent.doc.mjs

@@ -7,7 +7,7 @@ export const doc = {
   name: 'Step — Content Slot',
   displayName: 'Step — Content Slot',
   description:
-    'Children passed to a Step render below its description, indented to line up with the label rather than the indicator, and stay outside the clickable label area so buttons inside remain their own targets. In a full flow you gate the slot on the step being active — that is what turns a vertical stepper into an expanding one.',
+    'Children passed to a Step render below its description, indented to line up with the label rather than the indicator, and stay outside the clickable label area so buttons inside remain their own targets. In a full flow you gate the slot on the step being active. That is what turns a vertical stepper into an expanding one.',
   isReady: true,
   aspectRatio: 4 / 3,
   componentsUsed: ['Stepper', 'Step', 'TextInput', 'Button'],

package/assets/templates/blocks/components/Stepper/StepperCustomContent.doc.mjs

@@ -7,7 +7,7 @@ export const doc = {
   name: 'Stepper — Custom Content',
   displayName: 'Stepper — Custom Content',
   description:
-    'A vertical stepper where each step owns a slice of the page. The content slot takes any node — form fields, a summary panel, a banner — so a stepper is not limited to multi-step forms. Rendering the slot only for the active step is what makes the flow expand one step at a time.',
+    'A vertical stepper where each step owns a slice of the page. The content slot takes any node (form fields, a summary panel, a banner), so a stepper is not limited to multi-step forms. Rendering the slot only for the active step is what makes the flow expand one step at a time.',
   isReady: true,
   aspectRatio: 4 / 3,
   componentsUsed: [

package/assets/templates/pages/theme-showcase/page.tsx

@@ -153,14 +153,16 @@ const styles: Record<string, CSSProperties> = {
     flex: 1,
   },
   quantityInput: {
-    // minWidth (not a hard width) so the field grows to fit the digit + the
-    // theme's input padding. A fixed 40px was too tight on themes with larger
-    // padding / bigger type scale (e.g. Matcha, Y2K), clipping the value.
-    minWidth: 64,
     flexShrink: 0,
   },
+  // `auto` basis so the button wraps to its own line rather than ellipsizing.
   cartButton: {
-    flex: 1,
+    flex: '1 1 auto',
+    minWidth: 0,
+  },
+  cartRow: {
+    width: '100%',
+    minWidth: 0,
   },
 };
 
@@ -236,6 +238,18 @@ const inlineStyles: Record<string, CSSProperties> = {
     display: 'flex',
     flexDirection: 'column',
   },
+  // Flex bases, not grid tracks: the checkout form needs a width floor, and the
+  // chat wraps to its own row rather than squeezing it under one.
+  checkoutColumn: {
+    flex: '1 1 300px',
+    minWidth: 0,
+    display: 'grid',
+  },
+  chatColumn: {
+    flex: '2 1 520px',
+    minWidth: 0,
+    display: 'grid',
+  },
 };
 
 const PRODUCT_IMAGE_KEYS = ['watch', 'headphones', 'backpack'];
@@ -284,8 +298,7 @@ const DEFAULT_PRODUCTS: ProductSpec[] = [
 // scaffolded template renders real imagery without needing local public assets.
 const DEFAULT_IMAGES: Record<string, string> = {
   watch: '/template-assets/Neutral-Watch.png',
-  headphones:
-    '/template-assets/Neutral-Headphones.png',
+  headphones: '/template-assets/Neutral-Headphones.png',
   backpack: '/template-assets/Neutral-Backpack.png',
   wallet: '/template-assets/Neutral-Wallet.png',
   tumbler: '/template-assets/Neutral-Tumbler.png',
@@ -350,14 +363,14 @@ function CardShowcase({
 
   return (
     <VStack gap={8}>
-      <Grid columns={columns} gap={4}>
-        <GridSpan columns={1}>
+      <HStack gap={4} wrap="wrap">
+        <div style={inlineStyles.checkoutColumn}>
           <CheckoutCard isMobile={isMobile} />
-        </GridSpan>
-        <GridSpan columns={isMobile ? 1 : 2}>
+        </div>
+        <div style={inlineStyles.chatColumn}>
           <ChatCard />
-        </GridSpan>
-      </Grid>
+        </div>
+      </HStack>
       <Grid columns={columns} gap={4}>
         <GridSpan columns={isMobile ? 1 : 3}>
           <InventoryCard images={images} inventory={inventory} />
@@ -472,7 +485,12 @@ function StorePreview({
                           }}>
                           {p.description}
                         </Text>
-                        <HStack gap={2} vAlign="center" hAlign="center">
+                        <HStack
+                          gap={2}
+                          vAlign="center"
+                          hAlign="center"
+                          wrap="wrap"
+                          style={styles.cartRow}>
                           <NumberInput
                             label="Quantity"
                             isLabelHidden
@@ -481,6 +499,7 @@ function StorePreview({
                             min={1}
                             max={99}
                             size="sm"
+                            width={72}
                             style={styles.quantityInput}
                           />
                           <Button
@@ -506,7 +525,7 @@ function StorePreview({
 
 function CheckoutCard({isMobile}: {isMobile: boolean}) {
   return (
-    <Card padding={5} style={styles.card}>
+    <Card padding={isMobile ? 4 : 5} style={styles.card}>
       <VStack gap={4} style={styles.checkoutStack}>
         <Heading level={2}>Checkout</Heading>
 
@@ -560,7 +579,7 @@ function CheckoutCard({isMobile}: {isMobile: boolean}) {
             <Text type="supporting" weight="bold">
               Payment method
             </Text>
-            <Grid columns={isMobile ? 1 : {minWidth: 70, max: 3}} gap={2}>
+            <Grid columns={isMobile ? 1 : {minWidth: 80, max: 3}} gap={2}>
               <SelectableCard
                 label="Pay with card"
                 isSelected={true}
@@ -614,7 +633,7 @@ function CheckoutCard({isMobile}: {isMobile: boolean}) {
             placeholder="1234 1234 1234 1234"
             value=""
             onChange={() => {}}
-            startIcon={<CreditCard size={16} />}
+            startIcon={isMobile ? undefined : <CreditCard size={16} />}
             size="lg"
           />
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.5.0-canary.32a62fd",
+  "version": "0.5.0-canary.3799df9",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -87,10 +87,10 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/charts": "0.5.0-canary.32a62fd",
-    "@astryxdesign/core": "0.5.0-canary.32a62fd",
-    "@astryxdesign/lab": "0.5.0-canary.32a62fd",
-    "@astryxdesign/theme-neutral": "0.5.0-canary.32a62fd",
+    "@astryxdesign/charts": "0.5.0-canary.3799df9",
+    "@astryxdesign/core": "0.5.0-canary.3799df9",
+    "@astryxdesign/lab": "0.5.0-canary.3799df9",
+    "@astryxdesign/theme-neutral": "0.5.0-canary.3799df9",
     "gpt-tokenizer": "^3.4.0"
   },
   "peerDependenciesMeta": {
@@ -108,10 +108,10 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/charts": "0.5.0-canary.32a62fd",
-    "@astryxdesign/core": "0.5.0-canary.32a62fd",
-    "@astryxdesign/lab": "0.5.0-canary.32a62fd",
-    "@astryxdesign/theme-neutral": "0.5.0-canary.32a62fd",
+    "@astryxdesign/charts": "0.5.0-canary.3799df9",
+    "@astryxdesign/core": "0.5.0-canary.3799df9",
+    "@astryxdesign/lab": "0.5.0-canary.3799df9",
+    "@astryxdesign/theme-neutral": "0.5.0-canary.3799df9",
     "gpt-tokenizer": "^3.4.0"
   },
   "scripts": {