astryx-dracula 0.2.0 → 0.3.0

package/templates/product-detail.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > LC[p=6] > G[c={min:280} g=8] > (V[g=3] > AR[ratio=4/5] + (G[c=3 g=2] > (AR[ratio=1] > SelectableCard)*6)) + (V[g=8] > (V[g=3] > Hd"Midnight Ceremony Mug & Plate Set"[level=1 t=display-2] + (H[g=1] > Ic*5 + Tx"4.3 (128)") + (H[g=2] > Tx"$89.00"[t=large] + Tx"$119.00"[t=body] + Tk"Sale")) + Tx"A hand-thrown mug and plate set"[t=large] + (V[g=3] > Tx"Glaze"[t=label] + SG) + (V[g=3] > Tx"Finish"[t=label] + SG) + (V[g=3] > Tx"Quantity"[t=label] + (H[g=1] > B.ghost"-" + TI"1" + B.ghost"+")) + (V[g=3] > B.primary"Add to cart" + B.secondary"Buy it now") + (ColG > Col"Composition" + Col"Delivery & Returns" + Col"Dimensions"))
 
 import {useState} from 'react';
 import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
@@ -12,16 +14,18 @@ import {
   SegmentedControl,
   SegmentedControlItem,
 } from '@astryxdesign/core/SegmentedControl';
-import {Badge} from '@astryxdesign/core/Badge';
+import {Token} from '@astryxdesign/core/Token';
 import {Banner} from '@astryxdesign/core/Banner';
 import {Divider} from '@astryxdesign/core/Divider';
 import {Collapsible, CollapsibleGroup} from '@astryxdesign/core/Collapsible';
 import {AspectRatio} from '@astryxdesign/core/AspectRatio';
 import {SelectableCard} from '@astryxdesign/core/SelectableCard';
 import type {CSSProperties} from 'react';
+import {galleryImageClip} from 'astryx-dracula/shared/gallery-image';
+import {SceneTile} from 'astryx-dracula/shared/scene-tile';
 
 // Custom CSS here is limited to what Astryx components can't express today:
-// - image fill + corner radius (no Image primitive — #2582)
+// - image radius-clip (no Image primitive — #2582, see shared/gallery-image)
 // - the sticky info column (no sticky prop on Astryx layout primitives — #2613)
 // Keeps the info column in view while the gallery scrolls. No sticky prop on
 // Astryx layout primitives.
@@ -30,49 +34,16 @@ const stickyInfo: CSSProperties = {
   top: 'var(--spacing-8)',
   alignSelf: 'start',
 };
-// Product scenes are inline Dracula SVG — there is no Image primitive in
-// Astryx (#2582). Fills the AspectRatio box + rounds hero corners. No
-// objectFit/radius props on AspectRatio.
-const heroImage: CSSProperties = {
-  borderRadius: 'var(--radius-container)',
-  overflow: 'clip',
-};
-// Fills the thumbnail card. Corner radius + selection ring come from
-// SelectableCard; the scene only needs to fill the box (#2582).
-const thumbImage: CSSProperties = {
-  width: '100%',
-  height: '100%',
-  display: 'block',
-};
 
 // One Dracula placeholder scene per view, drawn from the fixed badge
-// vocabulary. Resolves to theme tokens so the gallery stays on-brand in the
-// dark-only theme.
-function ProductScene({hue, label}: {hue: string; label: string}) {
-  return (
-    <svg
-      viewBox="0 0 400 300"
-      preserveAspectRatio="xMidYMid slice"
-      style={thumbImage}
-      role="img"
-      aria-label={label}>
-      <rect width="400" height="300" fill="var(--dracula-bg-light)" />
-      <g
-        transform="translate(200 150)"
-        fill="none"
-        stroke="var(--dracula-comment)"
-        strokeWidth="5"
-        strokeLinecap="round"
-        strokeLinejoin="round">
-        <rect x="-44" y="-44" width="88" height="88" rx="5" />
-        <circle cx="18" cy="-18" r="2.5" fill={hue} stroke="none" />
-        <path d="M-34 30 L-8 0 L10 18 L20 8 L34 24" />
-      </g>
-    </svg>
-  );
+// vocabulary (shared/scene-tile large fork). Resolves to theme tokens so the
+// gallery stays on-brand in the dark-only theme.
+function ProductScene({hue, label}: {hue: SceneHue; label: string}) {
+  return <SceneTile label={label} hue={hue} size="lg" />;
 }
 
 import {Minus, Plus, Star} from 'lucide-react';
+import type {SceneHue} from 'astryx-dracula/shared/scene-hues';
 
 // ─── Star Rating ─────────────────────────────────────────────────────────────
 function StarRating({rating, count}: {rating: number; count: number}) {
@@ -82,10 +53,15 @@ function StarRating({rating, count}: {rating: number; count: number}) {
   return (
     <HStack gap={1} vAlign="center">
       {Array.from({length: filled}, (_, i) => (
-        <Icon key={`full-${i}`} icon={Star} size="sm" color="warning" />
+        <Icon key={`full-${i}`} icon={Star} size="sm" color="yellow" />
       ))}
+      {/* secondary, not disabled: --color-icon-disabled #6272A4 is 2.51:1 on
+          the card #343746, under the 3:1 non-text floor, and reads as "this
+          control is unavailable" — but a star is a data mark, not a control.
+          --color-icon-secondary #9AA1BC is 4.60:1, one step under the filled
+          yellow (7.4:1), so the two halves still read as one rating. */}
       {Array.from({length: empty}, (_, i) => (
-        <Icon key={`empty-${i}`} icon={Star} size="sm" />
+        <Icon key={`empty-${i}`} icon={Star} size="sm" color="secondary" />
       ))}
       <Text type="body" color="secondary" hasTabularNumbers>
         {rating} ({count})
@@ -98,13 +74,19 @@ function StarRating({rating, count}: {rating: number; count: number}) {
 // IMAGES[selected] is the hero; all six double as thumbnails so the 3-column
 // grid closes into two full rows (a slice(1) subset left a ragged 3+2 row and
 // a fallback entry that never rendered).
-const IMAGES = [
-  'var(--dracula-purple)',
+const IMAGES: readonly SceneHue[] = [
   'var(--dracula-cyan)',
   'var(--dracula-pink)',
   'var(--dracula-yellow)',
   'var(--dracula-green)',
   'var(--dracula-orange)',
+  // The sixth is `muted` (Comment): a legal / neutral / out-of-stock
+  // register, which is exactly what a product photo set needs an extra slot
+  // for. Cyan, pink, yellow, green and orange are all saturated identity
+  // colours; a sixth saturated one would read as a sixth product variant
+  // rather than as "this one is the plain shot". Keeps the 3-column grid
+  // closing on two full rows, which is the reason the set exists.
+  'var(--dracula-comment)',
 ];
 
 // ─── Product Data ───────────────────────────────────────────────────────────
@@ -144,17 +126,17 @@ function ImageGallery({
   selected: number;
   onSelect: (i: number) => void;
 }) {
-  const heroHue = IMAGES[selected];
+  const heroHue: SceneHue = IMAGES[selected];
   const thumbnails = IMAGES;
 
   return (
     <VStack gap={3}>
-      <AspectRatio ratio={4 / 5} style={heroImage}>
+      <AspectRatio ratio={4 / 5} style={galleryImageClip}>
         <ProductScene hue={heroHue} label={PRODUCT.name} />
       </AspectRatio>
       <Grid columns={3} gap={2}>
         {thumbnails.map((hue, i) => (
-          <AspectRatio key={i} ratio={1}>
+          <AspectRatio key={hue} ratio={1}>
             <SelectableCard
               label={`Product image ${i + 1}`}
               isSelected={selected === i}
@@ -186,26 +168,26 @@ function ProductInfo() {
   const increment = () => setQuantity(q => Math.min(10, (q ?? 1) + 1));
 
   return (
-    <VStack gap={5}>
-      <VStack gap={2}>
+    <VStack gap={8}>
+      <VStack gap={3}>
         <Heading level={1} type="display-2">
           {PRODUCT.name}
         </Heading>
         <StarRating rating={4.3} count={128} />
         <HStack gap={2} vAlign="center">
-          <Text type="large" weight="bold" hasTabularNumbers>
+          <Text type="large" hasTabularNumbers>
             {fmt(PRODUCT.price)}
           </Text>
           <Text type="body" color="secondary" hasStrikethrough hasTabularNumbers>
             {fmt(PRODUCT.originalPrice)}
           </Text>
-          <Badge variant="error" label="Sale" />
+          <Token label="Sale" color="yellow" />
         </HStack>
       </VStack>
       <Text type="large" weight="normal">
         {PRODUCT.description}
       </Text>
-      <VStack gap={2}>
+      <VStack gap={3}>
         <Text type="label">Glaze</Text>
         <VStack hAlign="start">
           <SegmentedControl value={color} onChange={setColor} label="Glaze">
@@ -219,7 +201,7 @@ function ProductInfo() {
           </SegmentedControl>
         </VStack>
       </VStack>
-      <VStack gap={2}>
+      <VStack gap={3}>
         <Text type="label">Finish</Text>
         <VStack hAlign="start">
           <SegmentedControl value={finish} onChange={setFinish} label="Finish">
@@ -233,7 +215,7 @@ function ProductInfo() {
           </SegmentedControl>
         </VStack>
       </VStack>
-      <VStack gap={2}>
+      <VStack gap={3}>
         <Text type="label">Quantity</Text>
         <HStack gap={1} vAlign="center">
           <Button
@@ -267,7 +249,7 @@ function ProductInfo() {
           />
         </HStack>
       </VStack>
-      <VStack gap={2}>
+      <VStack gap={3}>
         {notice && (
           <Banner
             status={notice.status}
@@ -278,7 +260,7 @@ function ProductInfo() {
           />
         )}
         <Button
-          label="Add to Cart"
+          label="Add to cart"
           variant="primary"
           size="lg"
           clickAction={() =>
@@ -290,6 +272,7 @@ function ProductInfo() {
         />
         <Button
           label="Buy it now"
+          variant="secondary"
           size="lg"
           clickAction={() =>
             setNotice({
@@ -350,7 +333,7 @@ export default function ProductDetail() {
       contentWidth={1200}
       content={
         <LayoutContent padding={6}>
-          <Grid columns={{minWidth: 320, repeat: 'fit'}} gap={5}>
+          <Grid columns={{minWidth: 280, repeat: 'fit'}} gap={8}>
             <ImageGallery
               selected={selectedThumb}
               onSelect={setSelectedThumb}

package/templates/product-gallery.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > LC[p=6] > V[g=8] > (G[c={min:280} g=4 a=start] > Hd"Small comforts for the midnight hours."[level=1 t=display-2] + (V[g=3 a=start] > Tx"Provisions from the castle workshops"[t=body] + B.primary"Browse the collection")) + (V[g=8] > (V[g=2] > Hd"The collection"[level=2] + Tx"Each piece is made in small batches"[t=body]) + (G[c={min:280} g=8] > (V[g=3] > (C[p=0] > AR[ratio=1]) + (V[g=1] > Hd"Nightfall Stoneware Mug"[level=3] + Tx"A hand-thrown mug that sits easy"[t=body color=secondary] + Tx.lg"$75.00"))*6))
 
 import {VStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
 import {Text, Heading} from '@astryxdesign/core/Text';
@@ -8,17 +10,12 @@ import {AspectRatio} from '@astryxdesign/core/AspectRatio';
 import {Card} from '@astryxdesign/core/Card';
 import {Icon} from '@astryxdesign/core/Icon';
 import {ArrowRight} from 'lucide-react';
-import type {CSSProperties} from 'react';
+import {SceneTile} from 'astryx-dracula/shared/scene-tile';
+import type {SceneHue} from 'astryx-dracula/shared/scene-hues';
 
 // ─── Styles ─────────────────────────────────────────────────────────────────
-// Product tiles are inline Dracula SVG — there is no Image primitive to fill
-// the AspectRatio box with `object-fit` (#2582).
-
-const svgImage: CSSProperties = {
-  width: '100%',
-  height: '100%',
-  display: 'block',
-};
+// Product tile art lives in shared/scene-tile (large fork); there is no Image
+// primitive to fill the AspectRatio box with `object-fit` (#2582).
 
 // ─── Product Data ───────────────────────────────────────────────────────────
 
@@ -27,7 +24,7 @@ interface Product {
   name: string;
   description: string;
   price: number;
-  hue: string;
+  hue: SceneHue;
 }
 
 // One accent per product from the fixed badge vocabulary.
@@ -38,7 +35,7 @@ const PRODUCTS: Product[] = [
     description:
       'A hand-thrown mug that sits easy in the hand through the longest night watch.',
     price: 75.0,
-    hue: 'var(--dracula-purple)',
+    hue: 'var(--dracula-orange)',
   },
   {
     id: 2,
@@ -91,25 +88,11 @@ function ProductCard({product}: {product: Product}) {
     <VStack gap={3}>
       <Card padding={0}>
         <AspectRatio ratio={1}>
-          <svg
-            viewBox="0 0 400 300"
-            preserveAspectRatio="xMidYMid slice"
-            style={svgImage}
-            role="img"
-            aria-label={`${product.name} thumbnail`}>
-            <rect width="400" height="300" fill="var(--dracula-bg-light)" />
-            <g
-              transform="translate(200 150)"
-              fill="none"
-              stroke="var(--dracula-comment)"
-              strokeWidth="5"
-              strokeLinecap="round"
-              strokeLinejoin="round">
-              <rect x="-44" y="-44" width="88" height="88" rx="5" />
-              <circle cx="18" cy="-18" r="2.5" fill={product.hue} stroke="none" />
-              <path d="M-34 30 L-8 0 L10 18 L20 8 L34 24" />
-            </g>
-          </svg>
+          <SceneTile
+            label={`${product.name} thumbnail`}
+            hue={product.hue}
+            size="lg"
+          />
         </AspectRatio>
       </Card>
       <VStack gap={1}>
@@ -117,7 +100,7 @@ function ProductCard({product}: {product: Product}) {
         <Text type="body" color="secondary" maxLines={2}>
           {product.description}
         </Text>
-        <Text type="large" weight="bold" hasTabularNumbers>
+        <Text type="large" hasTabularNumbers>
           {fmt(product.price)}
         </Text>
       </VStack>
@@ -134,17 +117,16 @@ export default function ProductGallery() {
       contentWidth={1200}
       content={
         <LayoutContent padding={6}>
-          <VStack gap={6}>
+          <VStack gap={8}>
             {/* Header — Grid handles responsive stacking */}
             <Grid columns={{minWidth: 280}} gap={4} align="start">
-              <Heading level={1}>
+              <Heading level={1} type="display-2">
                 Small comforts for the midnight hours.
               </Heading>
               <VStack gap={3} hAlign="start">
                 <Text type="body">
                   Provisions from the castle workshops: kiln-fired, hand-poured,
-                  and stitched by the coven. Each piece is made in small batches
-                  and restocked with every full moon.
+                  and stitched by the coven.
                 </Text>
                 <Button
                   label="Browse the collection"
@@ -160,11 +142,20 @@ export default function ProductGallery() {
             </Grid>
 
             {/* Product Grid — reflows 3 → 2 → 1 columns as width narrows */}
-            <Grid columns={{minWidth: 300}} gap={6} id="products">
-              {PRODUCTS.map(product => (
-                <ProductCard key={product.id} product={product} />
-              ))}
-            </Grid>
+            <VStack gap={8}>
+              <VStack gap={2}>
+                <Heading level={2}>The collection</Heading>
+                <Text type="body" color="secondary">
+                  Each piece is made in small batches and restocked with every
+                  full moon.
+                </Text>
+              </VStack>
+              <Grid columns={{minWidth: 280}} gap={4} id="products">
+                {PRODUCTS.map(product => (
+                  <ProductCard key={product.id} product={product} />
+                ))}
+              </Grid>
+            </VStack>
           </VStack>
         </LayoutContent>
       }

package/templates/product-tour.template.mjs

@@ -0,0 +1,6 @@
+export default {
+  type: 'page',
+  name: 'Product Tour',
+  description: 'Chapter rail, walkthrough content, and outline',
+  category: 'marketing',
+};