astryx-dracula 0.2.1 → 0.3.0

package/templates/detail-page.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 // XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > (LH > V[g=4] > (H[j=between] > Lk"All orders" + (H[g=2] > B"Restock" + B"Edit")) + (H[g=2 a=center] > Hd"#1001"[level=1] + Bd.warning"Unfulfilled") + (H[j=between] > TL > Tab"Details"! + Tab"Invoices" + Tab"Timeline")) + (LC > V[g=4] > (C > V[g=4] > (H[j=between] > Hd"Items"[level=2] + B"Fulfill item") + UL) + (C > V[g=4] > (H[j=between] > Hd"Invoice"[level=2] + B"Send Invoice") + ML) + (S > V[g=4] > Hd"Timeline"[level=2] + UL)) + (LP[w=320] > V[g=4] > Col"Notes" + Col"Customer" + Col"Fraud Analysis")
+//   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';
@@ -16,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';
@@ -28,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,
@@ -95,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)',
@@ -111,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}>
@@ -119,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
@@ -151,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',
@@ -159,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',
   },
@@ -169,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',
     ],
   },
   {
@@ -185,7 +191,7 @@ const ACTIVITY = [
 // ─── Bullet separator ───────────────────────────────────────────────────────
 function Bullet() {
   return (
-    <Text type="supporting" color="secondary">
+    <Text type="supporting" color="secondary" aria-hidden="true">
       {'・'}
     </Text>
   );
@@ -206,7 +212,7 @@ function PageHeader({
   isNarrow: boolean;
 }) {
   return (
-    <LayoutHeader hasDivider padding={4}>
+    <LayoutHeader hasDivider padding={6}>
       <VStack gap={3}>
         <HStack gap={4} vAlign="start">
           <StackItem size="fill">
@@ -229,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="orange" label="Unfulfilled" />
+                    <StatusDot variant="warning" label="Unfulfilled" />
+                    <Text type="supporting" color="secondary">
+                      Unfulfilled
+                    </Text>
                   </HStack>
                   <HStack gap={1} vAlign="center">
                     <Bullet />
@@ -330,7 +339,10 @@ function ItemsCard() {
           <StackItem size="fill">
             <HStack gap={2} vAlign="center">
               <Heading level={2}>Items</Heading>
-              <Badge variant="orange" label="Unfulfilled" />
+              <StatusDot variant="warning" label="Unfulfilled" />
+              <Text type="supporting" color="secondary">
+                Unfulfilled
+              </Text>
             </HStack>
           </StackItem>
           <HStack gap={2}>
@@ -342,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>
@@ -357,7 +369,6 @@ function ItemsCard() {
                   ))}
                 </VStack>
               }
-              onClick={() => {}}
               startContent={
                 <ProductSigil name={product.name} index={i} />
               }
@@ -396,7 +407,10 @@ function InvoiceCard() {
           <StackItem size="fill">
             <HStack gap={2} vAlign="center">
               <Heading level={2}>Invoice</Heading>
-              <Badge variant="green" label="Paid" />
+              <StatusDot variant="success" label="Paid" />
+              <Text type="supporting" color="secondary">
+                Paid
+              </Text>
             </HStack>
           </StackItem>
           <HStack gap={2}>
@@ -469,7 +483,7 @@ function InvoiceCard() {
             <HStack>
               <StackItem size="fill">
                 <Text type="body" hasTabularNumbers>
-                  Visa ...7482
+                  Visa …7482
                 </Text>
               </StackItem>
               <Text type="body" hasTabularNumbers>
@@ -488,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>
@@ -500,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="semibold">
-                          {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>
   );
@@ -578,9 +581,9 @@ 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">
@@ -588,20 +591,20 @@ function PanelContent() {
           </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"
@@ -679,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',
 };

package/templates/documentation-design.tsx

@@ -1,11 +1,20 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 // XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > (LC > V[g=8] > (V[g=2] > Tx.display-1"Button" + Tx"March 30, 2026"[t=supporting]) + (C.muted[p=0] > Ctr[h=360]) + (V[g=4] > Hd"Usage"[level=2] + Tx.lg"Usage" + Hd"Best practices"[level=3] + T) + D + (V[g=4] > Hd"Examples"[level=2] + Tx.lg"Explore") + (V[g=8] > (C[p=0] > (S[p=3] > H[j=between] > Tx"Title"[t=body] + (H[g=1] > B"Open in Craft" + IB)) + Ctr[h=280] + (S.muted[p=3] > V[g=3] > (TL > Tab"Description"! + Tab"Code") + Tx"Description"[t=body]))*2)) + (LP > Outline)
+//   L > (LC > V[g=8] > (V[g=2] > Hd"Button"[level=1] + Tx"March 30, 2026"[t=supporting]) + (C.muted[p=0] > Ctr[h=360]) + (V[g=4] > Hd"Usage"[level=2] + Tx"Usage"[t=body] + Hd"Best practices"[level=3] + T) + D + (V[g=4] > Hd"Examples"[level=2] + Tx"Explore"[t=body]) + (V[g=8] > (C[p=0] > (S[p=3] > Tx"Semantics"[t=body]) + Ctr[h=280] + (S.muted[p=3] > V[g=3] > (TL > Tab"Description"! + Tab"Code") + Tx"We have four"[t=body])) + (C[p=0] > (S[p=3] > Tx"Default button with badge"[t=body]) + Ctr[h=280] + (S.muted[p=3] > V[g=3] > (TL > Tab"Description"! + Tab"Code") + Tx"Buttons can include"[t=body])))) + (LP > Outline)
 
-import {useCallback, useState, useMemo, type CSSProperties} from 'react';
+/**
+ * Documentation detail — one component, its usage, its guidance and its live examples. (Frame/responsive/container: see XLE header above.)
+ */
+
+import {
+  useCallback,
+  useState,
+  useMemo,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
 import {Heading, Text} from '@astryxdesign/core/Text';
 import {Button} from '@astryxdesign/core/Button';
-import {IconButton} from '@astryxdesign/core/IconButton';
 import {Card} from '@astryxdesign/core/Card';
 import {Avatar} from '@astryxdesign/core/Avatar';
 import {Badge} from '@astryxdesign/core/Badge';
@@ -14,7 +23,7 @@ import {Banner} from '@astryxdesign/core/Banner';
 import {CodeBlock} from '@astryxdesign/core/CodeBlock';
 import {TabList, Tab} from '@astryxdesign/core/TabList';
 import {Selector} from '@astryxdesign/core/Selector';
-import {HStack, VStack, StackItem} from '@astryxdesign/core/Stack';
+import {HStack, VStack} from '@astryxdesign/core/Stack';
 import {Layout, LayoutContent, LayoutPanel} from '@astryxdesign/core/Layout';
 import {useMediaQuery} from '@astryxdesign/core/hooks';
 import {Dialog, DialogHeader} from '@astryxdesign/core/Dialog';
@@ -25,14 +34,12 @@ import {Icon} from '@astryxdesign/core/Icon';
 import {Section} from '@astryxdesign/core/Section';
 import {Center} from '@astryxdesign/core/Center';
 import {Outline, type OutlineItem} from '@astryxdesign/core/Outline';
-import {ExternalLink, Expand, Plus} from 'lucide-react';
+import {Plus} from 'lucide-react';
+import {outlinePanel} from 'astryx-dracula/shared/chaptered-doc-config';
 
-const tabListFlush: CSSProperties = {marginInlineStart: '-12px'};
-const outlinePanel: CSSProperties = {
-  position: 'sticky',
-  top: 24,
-  alignSelf: 'start',
-  paddingBlockStart: 120,
+// Flush the tab list with the example card's 12px inset (Section padding 3).
+const tabListFlush: CSSProperties = {
+  marginInlineStart: 'calc(var(--spacing-3) * -1)',
 };
 
 const COMPONENT_OUTLINE_ITEMS: OutlineItem[] = [
@@ -54,7 +61,9 @@ function DialogPreview() {
   const [isOpen, setIsOpen] = useState(false);
   return (
     <VStack gap={3}>
-      <Heading level={3}>Dialog</Heading>
+      <Text type="body" weight="semibold">
+        Dialog
+      </Text>
       <Button
         label="Open Dialog"
         variant="primary"
@@ -441,7 +450,7 @@ const COMPONENT_DOCS: Record<
         title: 'Default button with badge',
         description:
           'Buttons can include a badge to highlight new or updated actions.',
-        code: `<Button\n  label="Button"\n  variant="default"\n/>`,
+        code: `<Button\n  label="Button"\n  variant="secondary"\n/>`,
       },
     ],
   },
@@ -496,6 +505,57 @@ function getComponentDocs(key: string) {
   };
 }
 
+const EXAMPLE_PREVIEWS: Record<string, ReactNode[]> = {
+  button: [
+    <HStack key="semantics" gap={3} vAlign="center" wrap="wrap">
+      <Button label="Flat" variant="ghost" />
+      <Button label="Default" variant="secondary" />
+      <Button label="Primary" variant="primary" />
+      <Button label="Destructive" variant="destructive" />
+    </HStack>,
+    <Button key="badge" label="Button" variant="secondary" />,
+  ],
+};
+
+const COMPONENT_PREVIEWS: Record<string, ReactNode> = {
+  button: (
+    <Button
+      label="Button"
+      variant="secondary"
+      icon={<Icon icon={Plus} />}
+      endContent={<Badge label="New" variant="cyan" />}
+    />
+  ),
+  avatar: <Avatar name="Vlad" size="lg" />,
+  badge: <Badge label="Design" variant="yellow" />,
+  card: (
+    <Card>
+      <VStack gap={2}>
+        <Text type="body" weight="semibold">
+          Castle Card
+        </Text>
+        <Text type="body" color="secondary">
+          Cards group related content and actions.
+        </Text>
+      </VStack>
+    </Card>
+  ),
+  banner: (
+    <Banner status="info" title="Information">
+      <Text type="body">This is an informational banner message.</Text>
+    </Banner>
+  ),
+  dialog: <DialogPreview />,
+  text: <Text type="body">Body text</Text>,
+  divider: <Divider />,
+  token: <Token label="Dracula" />,
+  tooltip: (
+    <Tooltip content="Primary action">
+      <Button label="Hover me" variant="primary" />
+    </Tooltip>
+  ),
+};
+
 // ---------------------------------------------------------------------------
 // ComponentDetailView
 // ---------------------------------------------------------------------------
@@ -516,55 +576,6 @@ function ComponentDetailView({activeNav}: {activeNav: string}) {
     }
   }, []);
 
-  const EXAMPLE_PREVIEWS: Record<string, React.ReactNode[]> = {
-    button: [
-      <HStack key="semantics" gap={3} vAlign="center" wrap="wrap">
-        <Button label="Flat" variant="ghost" />
-        <Button label="Default" variant="secondary" />
-        <Button label="Primary" variant="primary" />
-        <Button label="Destructive" variant="destructive" />
-      </HStack>,
-      <Button key="badge" label="Button" variant="secondary" />,
-    ],
-  };
-
-  const COMPONENT_PREVIEWS: Record<string, React.ReactNode> = {
-    button: (
-      <Button
-        label="Button"
-        variant="secondary"
-        icon={<Icon icon={Plus} />}
-        endContent={<Badge label="New" variant="cyan" />}
-      />
-    ),
-    avatar: <Avatar name="Vlad" size="lg" />,
-    badge: <Badge label="Success" variant="green" />,
-    card: (
-      <Card>
-        <VStack gap={2}>
-          <Heading level={4}>Castle Card</Heading>
-          <Text type="body" color="secondary">
-            Cards group related content and actions.
-          </Text>
-        </VStack>
-      </Card>
-    ),
-    banner: (
-      <Banner status="info" title="Information">
-        <Text type="body">This is an informational banner message.</Text>
-      </Banner>
-    ),
-    dialog: <DialogPreview />,
-    text: <Text type="body">Body text</Text>,
-    divider: <Divider />,
-    token: <Token label="Dracula" />,
-    tooltip: (
-      <Tooltip content="Primary action">
-        <Button label="Hover me" variant="primary" />
-      </Tooltip>
-    ),
-  };
-
   const docs = useMemo(() => getComponentDocs(activeNav), [activeNav]);
   const previews = EXAMPLE_PREVIEWS[activeNav] ?? [];
 
@@ -590,7 +601,7 @@ function ComponentDetailView({activeNav}: {activeNav: string}) {
         <LayoutContent isScrollable={false} padding={8}>
           <VStack gap={8}>
             <VStack gap={2}>
-              <Text type="display-1">{getComponentName(activeNav)}</Text>
+              <Heading level={1} type="display-2">{getComponentName(activeNav)}</Heading>
               <Text type="supporting" color="secondary" hasTabularNumbers>
                 March 30, 2026 · Updated 5:40 p.m. PST
               </Text>
@@ -610,7 +621,7 @@ function ComponentDetailView({activeNav}: {activeNav: string}) {
               <Center height={360}>
                 {COMPONENT_PREVIEWS[activeNav] ?? (
                   <Text type="supporting" color="secondary">
-                    Preview coming soon
+                    Quiet in the crypt — no preview haunts this shelf yet.
                   </Text>
                 )}
               </Center>
@@ -620,15 +631,14 @@ function ComponentDetailView({activeNav}: {activeNav: string}) {
               <Heading id="usage" level={2}>
                 Usage
               </Heading>
-              <Text type="large" weight="normal">
-                {docs.usage}
-              </Text>
+              <Text type="body">{docs.usage}</Text>
               <Heading id="best-practices" level={3}>
                 Best practices
               </Heading>
               <Table
                 data={docs.bestPractices as Record<string, unknown>[]}
                 dividers="none"
+                hasHover
                 columns={[
                   {
                     key: 'type',
@@ -661,7 +671,7 @@ function ComponentDetailView({activeNav}: {activeNav: string}) {
               <Heading id="examples" level={2}>
                 Examples
               </Heading>
-              <Text type="large" weight="normal">
+              <Text type="body">
                 Explore common configurations, variations, and states for this
                 component.
               </Text>
@@ -671,39 +681,16 @@ function ComponentDetailView({activeNav}: {activeNav: string}) {
                 const tabKey = `${activeNav}-${i}`;
                 const activeTab = exampleTabs[tabKey] ?? 'description';
                 return (
-                  <Card key={i} padding={0}>
+                  <Card key={example.title} padding={0}>
                     <Section padding={3} variant="transparent">
-                      <HStack gap={3} vAlign="center" wrap="wrap">
-                        <StackItem size="fill">
-                          <Text type="body" weight="medium">
-                            {example.title}
-                          </Text>
-                        </StackItem>
-                        <HStack gap={1} vAlign="center" wrap="wrap">
-                          <Button
-                            label="Open in Craft"
-                            variant="ghost"
-                            size="sm"
-                            icon={<Icon icon={ExternalLink} />}
-                          />
-                          <Button
-                            label="Send to CLI"
-                            variant="ghost"
-                            size="sm"
-                          />
-                          <IconButton
-                            label="Fullscreen"
-                            variant="ghost"
-                            size="sm"
-                            icon={<Icon icon={Expand} />}
-                          />
-                        </HStack>
-                      </HStack>
+                      <Text type="body" weight="semibold">
+                        {example.title}
+                      </Text>
                     </Section>
                     <Center height={280}>
                       {previews[i] ?? (
                         <Text type="supporting" color="secondary">
-                          Preview coming soon
+                          Quiet in the crypt — no preview haunts this shelf yet.
                         </Text>
                       )}
                     </Center>

package/templates/documentation-technical.template.mjs

@@ -2,5 +2,5 @@ export default {
   type: 'page',
   name: 'Technical Documentation',
   description: 'Install steps, theming setup, and next steps',
-  category: 'marketing',
+  category: 'docs',
 };