astryx-dracula 0.2.0 → 0.3.0

package/templates/detail-page.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > (LH[divider] > V[g=3] > ((H[g=4 a=start] > (SI > V[g=0] > (Lk"All orders" + (V[g=0] > Hd"#1001"[level=1] + (H[g=1 a=center] > Tx"5 ordered items"[t=supporting] + Av"Vlad Dracul" + SD"Unfulfilled" + Tx"02/23/2026"[t=supporting] + Lk"See all")))) + (H[g=2] > B"Restock" + B"Edit")) + (H[g=3 a=center] > (SI > TL > Tab"Details"! + Tab"Invoices" + Tab"Timeline" + TabMenu"More") + B.ghost))) + (LC > V[g=4] > ((S > V[g=4] > ((H[g=2 a=center] > Hd"Items"[level=2] + SD"Unfulfilled") + UL)) + (S > V[g=4] > ((H[g=2 a=center] > Hd"Invoice"[level=2] + SD"Paid") + ML)) + (S > V[g=4] > ((H[g=2 a=center] > Hd"Timeline"[level=2] + B.ghost) + UL)))) + (LP[w=320 p=4] > V[g=4] > Col"Notes" + Col"Customer" + Col"Fraud analysis")
 
 import {useState} from 'react';
 import {useMediaQuery} from '@astryxdesign/core/hooks';
@@ -14,7 +16,7 @@ import {
   Section,
 } from '@astryxdesign/core/Layout';
 import {Text, Heading} from '@astryxdesign/core/Text';
-import {Badge} from '@astryxdesign/core/Badge';
+import {StatusDot} from '@astryxdesign/core/StatusDot';
 import {Avatar} from '@astryxdesign/core/Avatar';
 import {Button} from '@astryxdesign/core/Button';
 import {TabList, Tab, TabMenu} from '@astryxdesign/core/TabList';
@@ -26,6 +28,7 @@ import {ProgressBar} from '@astryxdesign/core/ProgressBar';
 import {Collapsible} from '@astryxdesign/core/Collapsible';
 import {Icon} from '@astryxdesign/core/Icon';
 import {Dialog, DialogHeader} from '@astryxdesign/core/Dialog';
+import type {SceneHue} from 'astryx-dracula/shared/scene-hues';
 import {
   Calendar,
   Flag,
@@ -93,9 +96,15 @@ const PRODUCTS = [
   },
 ];
 
-// Dracula accent per product row.
-const PRODUCT_HUES = [
-  'var(--dracula-purple)',
+// Per-product art tint, read positionally out of a never-reordered array so
+// "Crypt Cup" keeps its hue for the life of the page. Typed `SceneHue` for two
+// reasons, not one: the union is the enforcement, and it also pins the key set
+// so the array cannot grow a sixth entry that silently reuses slot 1 (the old
+// `index % length` wrapped at n>5 — a latent bug, not a live one).
+// The art-treatment remit bans purple, so the leading entry changes to cyan on
+// the same pass.
+const PRODUCT_HUES: readonly SceneHue[] = [
+  'var(--dracula-cyan)',
   'var(--dracula-cyan)',
   'var(--dracula-pink)',
   'var(--dracula-yellow)',
@@ -109,7 +118,7 @@ const sigilClip: CSSProperties = {
   flexShrink: 0,
 };
 
-function ProductSigil({name, index}: {name: string; index: number}) {
+function ProductSigil({index}: {name: string; index: number}) {
   const hue = PRODUCT_HUES[index % PRODUCT_HUES.length];
   return (
     <Card padding={0} style={sigilClip}>
@@ -117,8 +126,7 @@ function ProductSigil({name, index}: {name: string; index: number}) {
         viewBox="0 0 40 40"
         width={40}
         height={40}
-        role="img"
-        aria-label={name}>
+        aria-hidden="true">
         <rect width="40" height="40" fill="var(--dracula-bg-light)" />
         <circle cx={28} cy={11} r={7} fill={hue} />
         <circle
@@ -149,7 +157,7 @@ const fmt = (n: number) => `$${n.toFixed(2)}`;
 const ACTIVITY = [
   {
     type: 'event' as const,
-    user: 'Jane Doe',
+    user: 'Vlad Dracul',
     text: 'placed order #1001',
     reactions: 2,
     time: 'Feb 23 at 9:12 AM',
@@ -157,7 +165,7 @@ const ACTIVITY = [
   {
     type: 'comment' as const,
     user: 'Alex Rivera',
-    text: "Customer requested gift wrapping for the mug & plate set. I've added a note to the packing slip — warehouse team should wrap in recycled kraft paper.",
+    text: "Customer requested gift wrapping for the mug & plate set. I've added a note to the packing slip. Warehouse team should wrap in recycled kraft paper.",
     reactions: 3,
     time: 'Feb 23 at 10:45 AM',
   },
@@ -167,8 +175,8 @@ const ACTIVITY = [
     text: 'has several information changes',
     time: 'Feb 23 at 11:30 AM',
     changes: [
-      'Payment verified via Visa ...7482',
-      'Fraud check passed — low risk',
+      'Payment verified via Visa …7482',
+      'Fraud check passed, low risk',
     ],
   },
   {
@@ -183,7 +191,7 @@ const ACTIVITY = [
 // ─── Bullet separator ───────────────────────────────────────────────────────
 function Bullet() {
   return (
-    <Text type="supporting" color="secondary">
+    <Text type="supporting" color="secondary" aria-hidden="true">
       {'・'}
     </Text>
   );
@@ -204,12 +212,12 @@ function PageHeader({
   isNarrow: boolean;
 }) {
   return (
-    <LayoutHeader hasDivider padding={4}>
+    <LayoutHeader hasDivider padding={6}>
       <VStack gap={3}>
         <HStack gap={4} vAlign="start">
           <StackItem size="fill">
             <VStack gap={0}>
-              <Link href="#/templates/detail-page" color="secondary">
+              <Link href="#/templates/detail-page">
                 <HStack gap={1} vAlign="center">
                   <Icon icon={ArrowLeft} size="sm" color="inherit" />
                   All orders
@@ -227,14 +235,17 @@ function PageHeader({
                   </Text>
                   <HStack gap={1} vAlign="center">
                     <Bullet />
-                    <Avatar name="Jane Doe" size="sm" />
+                    <Avatar name="Vlad Dracul" size="sm" />
                     <Text type="supporting" color="secondary" maxLines={1}>
-                      Jane Doe
+                      Vlad Dracul
                     </Text>
                   </HStack>
                   <HStack gap={1} vAlign="center">
                     <Bullet />
-                    <Badge variant="warning" label="Unfulfilled" />
+                    <StatusDot variant="warning" label="Unfulfilled" />
+                    <Text type="supporting" color="secondary">
+                      Unfulfilled
+                    </Text>
                   </HStack>
                   <HStack gap={1} vAlign="center">
                     <Bullet />
@@ -256,7 +267,7 @@ function PageHeader({
                   </HStack>
                   <HStack gap={1} vAlign="center">
                     <Bullet />
-                    <Link href="#/templates/detail-page" color="secondary">
+                    <Link href="#/templates/detail-page">
                       See all
                     </Link>
                   </HStack>
@@ -328,7 +339,10 @@ function ItemsCard() {
           <StackItem size="fill">
             <HStack gap={2} vAlign="center">
               <Heading level={2}>Items</Heading>
-              <Badge variant="warning" label="Unfulfilled" />
+              <StatusDot variant="warning" label="Unfulfilled" />
+              <Text type="supporting" color="secondary">
+                Unfulfilled
+              </Text>
             </HStack>
           </StackItem>
           <HStack gap={2}>
@@ -340,13 +354,13 @@ function ItemsCard() {
         <List density="spacious" style={itemsList}>
           {PRODUCTS.map((product, i) => (
             <ListItem
-              key={i}
+              key={product.name}
               label={product.name}
               description={
                 <VStack gap={0}>
-                  {product.details.split('\n').map((line, j) => (
+                  {product.details.split('\n').map(line => (
                     <Text
-                      key={j}
+                      key={line}
                       type="supporting"
                       color="secondary"
                       hasTabularNumbers>
@@ -355,7 +369,6 @@ function ItemsCard() {
                   ))}
                 </VStack>
               }
-              onClick={() => {}}
               startContent={
                 <ProductSigil name={product.name} index={i} />
               }
@@ -363,7 +376,7 @@ function ItemsCard() {
                 <VStack gap={0} hAlign="end">
                   <Text
                     type="body"
-                    weight="bold"
+                    weight="semibold"
                     maxLines={1}
                     hasTabularNumbers>
                     {fmt(product.price * product.qty)}
@@ -394,7 +407,10 @@ function InvoiceCard() {
           <StackItem size="fill">
             <HStack gap={2} vAlign="center">
               <Heading level={2}>Invoice</Heading>
-              <Badge variant="success" label="Paid" />
+              <StatusDot variant="success" label="Paid" />
+              <Text type="supporting" color="secondary">
+                Paid
+              </Text>
             </HStack>
           </StackItem>
           <HStack gap={2}>
@@ -453,7 +469,7 @@ function InvoiceCard() {
           <MetadataListItem label="Total">
             <HStack>
               <StackItem size="fill" />
-              <Text type="body" weight="bold" hasTabularNumbers>
+              <Text type="body" weight="semibold" hasTabularNumbers>
                 {fmt(TOTAL)}
               </Text>
             </HStack>
@@ -467,7 +483,7 @@ function InvoiceCard() {
             <HStack>
               <StackItem size="fill">
                 <Text type="body" hasTabularNumbers>
-                  Visa ...7482
+                  Visa …7482
                 </Text>
               </StackItem>
               <Text type="body" hasTabularNumbers>
@@ -486,7 +502,11 @@ function TimelineSection() {
   return (
     <Section>
       <VStack gap={4}>
-        <HStack vAlign="center">
+        {/* gap={2}, matching the byte-identical header rows at :338 and
+            :407. Core's Stack has no default gap (Stack.tsx:211, pass-through
+            at :255/:285), so this rendered 0px -- the heading and the Filters
+            button touched -- while both siblings render 8px. */}
+        <HStack gap={2} vAlign="center">
           <StackItem size="fill">
             <Heading level={2}>Timeline</Heading>
           </StackItem>
@@ -498,73 +518,58 @@ function TimelineSection() {
           />
         </HStack>
 
-        <VStack gap={4}>
-          {ACTIVITY.map((item, i) => (
-            <VStack key={i} gap={2}>
-              <HStack gap={3} vAlign="start">
-                <Avatar name={item.user} size="md" />
-                <StackItem size="fill">
-                  <VStack gap={2}>
-                    <Card variant="muted" padding={3}>
-                      <VStack gap={1}>
-                        <Text type="body" weight="bold">
-                          {item.user}
-                        </Text>
-                        <Text type="body">{item.text}</Text>
-                        {item.changes && (
-                          <VStack gap={1}>
-                            {item.changes.map((change, j) => (
-                              <HStack key={j} gap={2} vAlign="center">
-                                <Icon
-                                  icon={SquarePen}
-                                  size="sm"
-                                  color="secondary"
-                                />
-                                <Text type="supporting" color="secondary">
-                                  {change}
-                                </Text>
-                              </HStack>
-                            ))}
-                          </VStack>
-                        )}
-                      </VStack>
-                    </Card>
-                    <HStack gap={3} vAlign="center">
-                      <HStack gap={1} vAlign="center">
-                        <Icon
-                          icon={ThumbsUp}
-                          size="xsm"
-                          color="secondary"
-                        />
-                        <Icon icon={Heart} size="xsm" color="secondary" />
-                        <Text
-                          type="supporting"
-                          color="secondary"
-                          hasTabularNumbers>
-                          {item.reactions}
-                        </Text>
-                      </HStack>
-                      <Text type="supporting" color="secondary">
-                        Like
-                      </Text>
-                      <Bullet />
-                      <Text type="supporting" color="secondary">
-                        Reply
-                      </Text>
-                      <Bullet />
+        <List density="spacious" style={itemsList}>
+          {ACTIVITY.map(item => (
+            <ListItem
+              key={`${item.user}-${item.time}`}
+              label={item.user}
+              description={
+                <VStack gap={2}>
+                  <Text type="body">{item.text}</Text>
+                  {item.changes && (
+                    <VStack gap={1}>
+                      {item.changes.map(change => (
+                        <HStack key={change} gap={2} vAlign="center">
+                          <Icon icon={SquarePen} size="sm" color="secondary" />
+                          <Text type="supporting" color="secondary">
+                            {change}
+                          </Text>
+                        </HStack>
+                      ))}
+                    </VStack>
+                  )}
+                  <HStack gap={3} vAlign="center">
+                    <HStack gap={1} vAlign="center">
+                      <Icon icon={ThumbsUp} size="xsm" color="secondary" />
+                      <Icon icon={Heart} size="xsm" color="secondary" />
                       <Text
                         type="supporting"
                         color="secondary"
                         hasTabularNumbers>
-                        {item.time}
+                        {item.reactions}
                       </Text>
                     </HStack>
-                  </VStack>
-                </StackItem>
-              </HStack>
-            </VStack>
+                    <Text type="supporting" color="secondary">
+                      Like
+                    </Text>
+                    <Bullet />
+                    <Text type="supporting" color="secondary">
+                      Reply
+                    </Text>
+                    <Bullet />
+                    <Text
+                      type="supporting"
+                      color="secondary"
+                      hasTabularNumbers>
+                      {item.time}
+                    </Text>
+                  </HStack>
+                </VStack>
+              }
+              startContent={<Avatar name={item.user} size="md" />}
+            />
           ))}
-        </VStack>
+        </List>
       </VStack>
     </Section>
   );
@@ -576,30 +581,30 @@ function TimelineSection() {
 function PanelContent() {
   return (
     <VStack gap={4}>
-      <Collapsible trigger={<Heading level={4}>Notes</Heading>}>
+      <Collapsible trigger={<Heading level={3}>Notes</Heading>}>
         <Text type="body">
-          Customer is a repeat buyer — 3rd order this quarter. Prefers
+          Customer is a repeat buyer, 3rd order this quarter. Prefers
           moonlight and sage glazes. Requested gift wrapping for the mug set.
           Ships to a residential address in CA.{' '}
-          <Link href="#/templates/detail-page" color="secondary">
+          <Link href="#/templates/detail-page">
             Show more
           </Link>
         </Text>
       </Collapsible>
-      <Collapsible trigger={<Heading level={4}>Customer</Heading>}>
+      <Collapsible trigger={<Heading level={3}>Customer</Heading>}>
         <MetadataList>
-          <MetadataListItem label="Name">Jane Doe</MetadataListItem>
+          <MetadataListItem label="Name">Vlad Dracul</MetadataListItem>
           <MetadataListItem label="Address">
             321 Smith Road, CA 38238
           </MetadataListItem>
           <MetadataListItem label="Phone">234-555-0134</MetadataListItem>
-          <MetadataListItem label="Email">janedoe@email.com</MetadataListItem>
+          <MetadataListItem label="Email">vlad@castle-dracula.transylvania</MetadataListItem>
           <MetadataListItem label="Billing Address">
             Same as shipping address
           </MetadataListItem>
         </MetadataList>
       </Collapsible>
-      <Collapsible trigger={<Heading level={4}>Fraud Analysis</Heading>}>
+      <Collapsible trigger={<Heading level={3}>Fraud analysis</Heading>}>
         <VStack gap={1}>
           <ProgressBar
             label="Risk level"
@@ -677,6 +682,7 @@ export default function DetailPage() {
         isOpen={isNarrow && isPanelDialogOpen}
         onOpenChange={setPanelDialogOpen}>
         <Layout
+          height="auto"
           header={
             <DialogHeader
               title="Order details"

package/templates/documentation-design.template.mjs

@@ -2,5 +2,5 @@ export default {
   type: 'page',
   name: 'Design Documentation',
   description: 'Live preview, usage guide, and code examples',
-  category: 'marketing',
+  category: 'docs',
 };