astryx-dracula 0.2.0 → 0.2.1

package/README.md

@@ -62,3 +62,9 @@ demo/             showcase source, deployed to GitHub Pages
 | `bun run theme:build`| Rebuild `theme.css` from the source        |
 | `bun run theme:check`| Fail if committed theme outputs are stale  |
 | `bun run build`      | Typecheck plus showcase build              |
+
+## Attribution & License
+
+- **Astryx Design System**: Created by the Astryx team at Meta Platforms, Inc. under the [MIT License](https://github.com/facebook/astryx/blob/main/LICENSE). The 43 template files in `templates/` are derived from Astryx's open source page templates and adapted for the Dracula brand (pure Dracula spec retokening, recharts replaced with zero-dependency inline SVGs, heroicons mapped to Lucide, XLE/XLO structural expression headers, and responsive layout hardening).
+- **Dracula Theme**: Color palette and specification by [Zeno Rocha and the Dracula Theme community](https://draculatheme.com).
+- **Package & Additions**: Released under the [MIT License](LICENSE).

package/package.json

@@ -64,5 +64,5 @@
     "@astryxdesign/cli"
   ],
   "type": "module",
-  "version": "0.2.0"
+  "version": "0.2.1"
 }

package/templates/ai-chat-landing.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > LC > V[g=8 a=center] > (V[g=1] > (H[g=2 a=center] > Ic + Tx.lg"Hi, Vlad") + Hd"Where should we start?"[level=1 type=display-2]) + ChC"Ask anything" + (V[g=6] > (TgG"Category" > Tg"Writing"*4) + (G[c={min:280} g=3] > (CC[p=4] > V[g=0.5] > Hd"Draft"[level=4] + Tx"Compose"[t=body])*4))
 
 import {useRef, useState, type CSSProperties} from 'react';
 

package/templates/ai-chat.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > LC[p=0] > H > (SI[fill] > ChL > ChML > (ChM > ChB)*4 + ChC"Ask a follow up...") + (C.transparent > Tbar + S.section > MD) ;; Dlg#artifact[variant=fullscreen] > L > (DH"JWT Token Refresh" + (LC[p=0] > S.section > MD))
 
 import {useRef, useState, type CSSProperties} from 'react';
 
@@ -121,7 +123,7 @@ const AI_CHAT_CSS = `
 // Artifact content
 
 const MENTION_TOKENS = [
-  {value: '@agent', label: '@Agent', variant: 'blue' as const},
+  {value: '@agent', label: '@Agent', variant: 'cyan' as const},
 ];
 
 const ARTIFACT_TITLE = 'JWT Token Refresh: Design & Rollout';
@@ -440,6 +442,7 @@ The fix is to catch \`TokenExpiredError\` specifically and attempt a refresh bef
                         <CodeBlock
                           title="middleware.ts"
                           language="typescript"
+                          width="100%"
                           code={`async function authMiddleware(req: Request) {
   try {
     const decoded = validateToken(req.headers.authorization);
@@ -556,6 +559,7 @@ The fix is to catch \`TokenExpiredError\` specifically and attempt a refresh bef
                         <CodeBlock
                           title="middleware.test.ts"
                           language="typescript"
+                          width="100%"
                           code={`describe('authMiddleware', () => {
   it('refreshes an expired token silently', async () => {
     const expiredToken = createExpiredJWT(mockUser);

package/templates/blank.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > LC > Tx.lg"A blank crypt awaits its story"
 
 import {Layout, LayoutContent} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';

package/templates/centered-hero.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > LC > (V[g6 a=center] > Hd"Hero"[level=1] + Tx"Remit"[t=body] + (H[j=center g3] > B.primary"CTA" + B"Secondary"))
 
 import type {CSSProperties} from 'react';
 import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';

package/templates/classic-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=0] > Ctr > V[g=8] > (V[g=4 a=center] > (V[g=2 a=center] > Hd"Hung after dark"[level=1] + Tx"A coven-curated wall"[t=body]) + (TL > Tab"All"! + Tab"Lifestyle" + Tab"Scenery" + Tab"Home") + Tx"10 pieces on the wall"[t=supporting]) + (G[g=4] > (C[p=0] > AR)*6)
 
 import {useState, type CSSProperties} from 'react';
 import {VStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';

package/templates/contact-form.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   Ctr > V[a=center] > S.section[p=6] > V[g=6] > (V[g=2 a=center] > Hd"Let's brew after dark"[level=1] + Tx"Tell us a bit"[t=body]) + (G[c={min:200} g=4] > (C > V[g=3] > Ic + (V[g=1] > Tx"Title"[t=body] + Tx"Desc"[t=supporting]))*3) + (G[c={min:260} g=4] > TI"Full Name" + TI"Email") + (G[c={min:260} g=4] > TI"Company" + TI"Phone") + D + (V[g=5] > (V[g=2] > Tx"Goals"[t=label] + (H[g=2] > Tk"Goal"*3)) + SE"Timeline" + SE"Budget" + (RL"Source" > RLI*5) + TA"Notes" + CB"Decision maker") + (V[g=3] > B.primary"Submit" + (H[j=center g=1] > Tx[t=supporting] > Lk"Privacy Policy"))
 
 import {useState} from 'react';
 import {VStack, HStack} from '@astryxdesign/core/Layout';
@@ -7,7 +9,7 @@ import {Section} from '@astryxdesign/core/Section';
 import {Grid} from '@astryxdesign/core/Grid';
 import {Card} from '@astryxdesign/core/Card';
 import {Button} from '@astryxdesign/core/Button';
-import {Text} from '@astryxdesign/core/Text';
+import {Text, Heading} from '@astryxdesign/core/Text';
 import {Icon} from '@astryxdesign/core/Icon';
 import {TextInput} from '@astryxdesign/core/TextInput';
 import {Selector} from '@astryxdesign/core/Selector';
@@ -112,9 +114,9 @@ export default function ContactForm() {
           <VStack gap={6}>
             {/* Header */}
             <VStack gap={2} hAlign="center" style={{textAlign: 'center'}}>
-              <Text type="display-1" weight="bold">
+              <Heading level={1} type="display-1">
                 Let&apos;s brew after dark
-              </Text>
+              </Heading>
               <Text type="body" color="secondary">
                 Tell us a bit about what you&apos;re summoning — the coven
                 would love to help it take flight.

package/templates/dashboard-portfolio.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > LC > V[g=6] > (H[j=between a=center] > Hd"The night vault"[level=1] + DM"1 year") + (G[c=4 g=4] > (C > V[g=2] > Hd"Label"[level=4] + (H[g=2] > Hd"$1.2M"[level=2] + Tx"+2.4%"[t=body]))*4) + (G[c=4 g=4] > (GS[c=3] > C > V[g=4] > (H[j=between] > Hd"Vault value"[level=3] + Lk"View details") + AR) + (GS[c=1] > C > V[g=4] > (H[j=between] > Hd"Top holdings"[level=3] + Lk"View all") + UL)) + D + (H[j=between a=start] > (V[g=1] > Hd"Market at midnight"[level=2] + Tx"Past 24 hours under moonlight"[t=body]) + B"View more") + (G[c=3 g=4] > (C > V[g=3] > Hd"Index"[level=4] + Tx"$5,200"[t=body])*3) + (C > V[g=4] > Hd"Trending Stocks"[level=3] + T)
 
 import {useState} from 'react';
 
@@ -493,7 +495,7 @@ function MarketCard({
         </VStack>
         <Sparkline data={spark} positive={positive} />
         <HStack gap={3} vAlign="center">
-          <Text type="display-3" weight="bold" hasTabularNumbers>
+          <Text type="display-3" weight="semibold" hasTabularNumbers>
             {price}
           </Text>
           <HStack gap={1} vAlign="center">
@@ -560,7 +562,7 @@ const trendingColumns: TableColumn<StockRow>[] = [
     header: 'Ticker',
     width: proportional(1),
     renderCell: (row: StockRow) => (
-      <Text type="body" weight="bold">
+      <Text type="body" weight="semibold">
         {row.ticker}
       </Text>
     ),
@@ -665,7 +667,7 @@ function AssetRow({
 }) {
   return (
     <ListItem
-      label={<Text weight="bold">{ticker}</Text>}
+      label={<Text weight="semibold">{ticker}</Text>}
       description={name}
       href="#/templates/dashboard-portfolio"
       startContent={<Avatar name={ticker} size="md" />}

package/templates/dashboard.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=6] > (V[g=6] > (H[j=between a=center] > Hd"Awake after dark"[level=3] + B.secondary"Reload") + C[p=3]) + (G[c=4 g=4] > C*4) + D + (H[j=between a=center] > Hd"Night denizens"[level=3] + B.secondary"View more") + (G[c=2 g=4] > C*2) + D + (H[j=between a=center] > Hd"Engagement"[level=3] + B.secondary"View more") + (G[c=2 g=4] > (C > V[g=6] > (H[j=between a=center] > Hd"Top pages"[level=4] + Lk"All pages") + T)*2)
 
 import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
 import {Text, Heading} from '@astryxdesign/core/Text';
@@ -192,7 +194,7 @@ const regionData = [
   {
     label: 'NORAM',
     value: 38,
-    color: 'var(--dracula-comment)',
+    color: 'var(--dracula-cyan)',
   },
   {
     label: 'EMEA',
@@ -209,14 +211,14 @@ const regionData = [
     value: 8,
     color: 'var(--dracula-purple)',
   },
-  {label: 'Other', value: 4, color: 'var(--dracula-selection)'},
+  {label: 'Other', value: 4, color: 'var(--dracula-comment)'},
 ];
 
 const roleData = [
   {
     label: 'Engineer',
     value: 45,
-    color: 'var(--dracula-comment)',
+    color: 'var(--dracula-cyan)',
   },
   {
     label: 'Manager',
@@ -233,7 +235,7 @@ const roleData = [
     value: 12,
     color: 'var(--dracula-purple)',
   },
-  {label: 'Other', value: 8, color: 'var(--dracula-selection)'},
+  {label: 'Other', value: 8, color: 'var(--dracula-comment)'},
 ];
 
 // Engagement — Top pages

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 > 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")
 
 import {useState} from 'react';
 import {useMediaQuery} from '@astryxdesign/core/hooks';
@@ -209,7 +211,7 @@ function PageHeader({
         <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
@@ -234,7 +236,7 @@ function PageHeader({
                   </HStack>
                   <HStack gap={1} vAlign="center">
                     <Bullet />
-                    <Badge variant="warning" label="Unfulfilled" />
+                    <Badge variant="orange" label="Unfulfilled" />
                   </HStack>
                   <HStack gap={1} vAlign="center">
                     <Bullet />
@@ -256,7 +258,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 +330,7 @@ function ItemsCard() {
           <StackItem size="fill">
             <HStack gap={2} vAlign="center">
               <Heading level={2}>Items</Heading>
-              <Badge variant="warning" label="Unfulfilled" />
+              <Badge variant="orange" label="Unfulfilled" />
             </HStack>
           </StackItem>
           <HStack gap={2}>
@@ -363,7 +365,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 +396,7 @@ function InvoiceCard() {
           <StackItem size="fill">
             <HStack gap={2} vAlign="center">
               <Heading level={2}>Invoice</Heading>
-              <Badge variant="success" label="Paid" />
+              <Badge variant="green" label="Paid" />
             </HStack>
           </StackItem>
           <HStack gap={2}>
@@ -453,7 +455,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>
@@ -507,7 +509,7 @@ function TimelineSection() {
                   <VStack gap={2}>
                     <Card variant="muted" padding={3}>
                       <VStack gap={1}>
-                        <Text type="body" weight="bold">
+                        <Text type="body" weight="semibold">
                           {item.user}
                         </Text>
                         <Text type="body">{item.text}</Text>
@@ -581,7 +583,7 @@ function PanelContent() {
           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>

package/templates/documentation-design.tsx

@@ -1,4 +1,6 @@
 // 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)
 
 import {useCallback, useState, useMemo, type CSSProperties} from 'react';
 import {Heading, Text} from '@astryxdesign/core/Text';
@@ -532,11 +534,11 @@ function ComponentDetailView({activeNav}: {activeNav: string}) {
         label="Button"
         variant="secondary"
         icon={<Icon icon={Plus} />}
-        endContent={<Badge label="New" variant="info" />}
+        endContent={<Badge label="New" variant="cyan" />}
       />
     ),
     avatar: <Avatar name="Vlad" size="lg" />,
-    badge: <Badge label="Success" variant="success" />,
+    badge: <Badge label="Success" variant="green" />,
     card: (
       <Card>
         <VStack gap={2}>
@@ -635,7 +637,7 @@ function ComponentDetailView({activeNav}: {activeNav: string}) {
                     renderCell: (item: Record<string, unknown>) => (
                       <Badge
                         label={item.type === 'do' ? 'Do' : "Don't"}
-                        variant={item.type === 'do' ? 'success' : 'error'}
+                        variant={item.type === 'do' ? 'green' : 'red'}
                       />
                     ),
                   },

package/templates/documentation-technical.tsx

@@ -1,4 +1,6 @@
 // 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"Getting started with Astryx Dracula" + Tx"Last updated March 30, 2026"[t=supporting]) + (C > V[g=3] > (H[j=between] > (H[g=2] > Ic + Tx"AI Assistance"[t=body]) + (H > B"Copy prompt" + DM)) + Tx"Prompt description"[t=body]) + (V[g=4] > Hd"Prerequisites"[level=2] + UL) + D + (V[g=4] > Hd"Install the package"[level=2] + Tx"Description"[t=body] + (V[g=2] > Tx"Step"[t=body] + Cd)*3) + D + (V[g=4] > Hd"Configure theming"[level=2] + Tx"Description"[t=body] + Cd + Tx"Note"[t=body]) + D + (V[g=4] > Hd"Next steps"[level=2] + UL)) + (LP > Outline)
 
 import {useCallback, useState, type CSSProperties} from 'react';
 import {Heading, Text} from '@astryxdesign/core/Text';
@@ -165,7 +167,7 @@ export default function DocumentationTechnical() {
                 gives you access to all components, tokens, and utilities.
               </Text>
               <VStack gap={2}>
-                <Text type="body" weight="bold">
+                <Text type="body" weight="semibold">
                   Step 1: Install the core package
                 </Text>
                 <CodeBlock
@@ -175,7 +177,7 @@ export default function DocumentationTechnical() {
                 />
               </VStack>
               <VStack gap={2}>
-                <Text type="body" weight="bold">
+                <Text type="body" weight="semibold">
                   Step 2: Import the precompiled styles
                 </Text>
                 <Text type="body" color="secondary">
@@ -191,7 +193,7 @@ import '@astryxdesign/core/astryx.css';`}
                 />
               </VStack>
               <VStack gap={2}>
-                <Text type="body" weight="bold">
+                <Text type="body" weight="semibold">
                   Step 3: Import your first component
                 </Text>
                 <CodeBlock

package/templates/documentation.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > LC > V[g=10] > (C[p=10] > (H[g=8 a=center] > (V[g=4] > Tx.display-1"The coven grimoire" + Tx.lg"Every incantation in the Astryx spellbook"[t=large] + (H > B.primary"Enter the grimoire")))) + (V[g=4] > (H[j=between a=center] > Hd"Category"[level=2] + Tx"18 spells"[t=supporting]) + (G[c=4 g=2] > (CC[p=2] > V[g=3] > C[p=0] + (V[g=1] > Tx"AppShell"[t=body] + Tx"Description"[t=body]))*4))*4
 
 import type {CSSProperties} from 'react';
 import {Heading, Text} from '@astryxdesign/core/Text';
@@ -326,7 +328,7 @@ export default function DocumentationCatalog() {
                           />
                         </Card>
                         <VStack gap={0.5}>
-                          <Text type="body" weight="bold">
+                          <Text type="body" weight="semibold">
                             {item.name}
                           </Text>
                           <Text type="body" color="secondary" maxLines={3}>

package/templates/editor.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > (LP[w=320] > V[g=4] > (S[p=4] > V[g=4] > Hd"Page Editor"[level=2] + Tbar) + (V[g=4] > (TL > Tab"Blocks"! + Tab"Properties") + D + (S[p=4] > V[g=2] > Hd"Add Block"[level=3] + UL + Hd"Layers"[level=3] + UL))) + (LC > V[g=4] > C*3)
 
 import {useState, useCallback, type CSSProperties} from 'react';
 import {useMediaQuery} from '@astryxdesign/core/hooks';
@@ -109,7 +111,7 @@ const TRANSACTION_COLUMNS: TableColumn<Transaction>[] = [
       <HStack gap={3} vAlign="center">
         <Icon icon={CATEGORY_ICONS[item.category] || Sparkles} />
         <VStack gap={0}>
-          <Text type="label" weight="semibold">
+          <Text type="body" weight="semibold">
             {item.name}
           </Text>
           <Text type="supporting" color="secondary">
@@ -134,7 +136,7 @@ const TRANSACTION_COLUMNS: TableColumn<Transaction>[] = [
     header: 'Amount',
     width: proportional(1, {minWidth: 90}),
     renderCell: (item: Transaction) => (
-      <Text type="label" weight="semibold" hasTabularNumbers>
+      <Text type="body" weight="semibold" hasTabularNumbers>
         {item.amount}
       </Text>
     ),
@@ -314,14 +316,14 @@ const clickable: CSSProperties = {
 // Selection ring on the active block — Card has no `isSelected` state.
 const selectedCard: CSSProperties = {
   outline: '2px solid',
-  outlineColor: 'var(--color-border-blue)',
+  outlineColor: 'var(--color-accent)',
   outlineOffset: -2,
 };
 // Circular muted chip behind the CTA icon — Center handles the centering
 // and sizing; only the surface (radius + fill) needs custom CSS.
 const iconCircle: CSSProperties = {
   borderRadius: '50%',
-  backgroundColor: 'var(--color-background-muted)',
+  backgroundColor: 'var(--color-selection)',
 };
 
 // ---------------------------------------------------------------------------
@@ -470,7 +472,7 @@ function BlockPreview({
             <Heading level={2}>
               {(props.heading as string) || 'Hero Heading'}
             </Heading>
-            <Text type="supporting" color="secondary">
+            <Text type="body" color="secondary">
               {(props.subheading as string) || 'Subtitle text goes here'}
             </Text>
             {(props.buttonLabel as string) && (
@@ -596,10 +598,10 @@ function BlockPreview({
               <Icon icon={Lock} color="secondary" />
             </Center>
             <VStack gap={1}>
-              <Text type="label" weight="semibold">
+              <Heading level={4}>
                 {(props.heading as string) || 'Notice'}
-              </Text>
-              <Text type="supporting" color="secondary">
+              </Heading>
+              <Text type="body" color="secondary">
                 {(props.description as string) || 'Description text'}
               </Text>
             </VStack>

package/templates/file-explorer.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > (Tbar[size=sm] > (H > IB"Go back" + IB"Go forward" + Tx"Folder"[t=label]) + (SG"View mode" > SGI*4) + (H > IB"Group" + IB"Share" + IB"Tags" + IB"More" + IB"Search")) + (LC[p=0 !scroll] > H[h=fill] > (S.transparent[p=2 w=240 dv=[end]] > UL[density=compact !hasDividers] > (LI > Ic + Tx"Item"[t=body])*3)*3 + (S.transparent[p=6] > V[g=4 a=center] > Av[size=96] + (V[g=1 a=center] > Tx"Name"[t=label] + Tx"Kind"[t=supporting]) + (ML"Information" > MLI*3)))
 
 import {useState, useMemo, type CSSProperties} from 'react';
 import {Layout, LayoutContent} from '@astryxdesign/core/Layout';
@@ -551,7 +553,7 @@ export default function FileExplorer() {
                     <Text type="label" maxLines={1}>
                       {selectedFile.name}
                     </Text>
-                    <Text type="supporting">
+                    <Text type="supporting" color="secondary">
                       {getFileExtension(selectedFile.name)} Document
                     </Text>
                   </VStack>

package/templates/form-two-column.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   Ctr > S.transparent[p=10] > V[g=10] > (G[c={min:320} g=10] > (V[g=6] > (V[g=3] > Hd"Let's conjure together"[level=1 t=display-1] + Tx"Tell us what you're brewing"[t=body]) + AR) + (C[p=8] > V[g=4] > Tx"Your details"[t=label] + TI"Full name" + (G[c={min:180} g=3] > TI"Email" + TI"Company") + (G[c={min:180} g=3] > TI"Job title" + TI"Phone") + (V[g=2] > Tx"Reason"[t=label] + (H[g=2] > Tk"Reason"*3)) + SE"Budget" + TA"Project details" + B.primary"Send it into the night")) + (V[g=6] > D + (G[c={min:200} g=6] > (V[g=1 a=center] > Tx"General"[t=supporting] + Lk"hello@castle.dracula")*3))
 
 import {useState, type CSSProperties} from 'react';
 import {VStack, HStack} from '@astryxdesign/core/Layout';
@@ -249,7 +251,7 @@ export default function TwoColumnForm() {
                       <Token
                         key={reason}
                         label={reason}
-                        color={inquiryReason === reason ? 'blue' : 'default'}
+                        color={inquiryReason === reason ? 'yellow' : 'default'}
                         onClick={() =>
                           setInquiryReason(prev =>
                             prev === reason ? '' : reason,

package/templates/gallery-hero.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=10] > (V[g=6 a=center] > (V[g=3 a=center] > Hd"Little haunts, everywhere you roam"[level=1 t=display-2] + Tx"Sometimes all it takes"[t=body]) + (H[j=center g=3] > B.primary"Enter the gallery" + B.secondary"Read the lore")) + (G[c={min:200} g=4] > AR*3)
 
 import type {CSSProperties} from 'react';
 import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';

package/templates/ide.tsx

@@ -1,8 +1,11 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > (LP[p=4] > V[g=2] > TI"Search files" + TreeList) + (LC[p=0] > V > (SI[fill] > Cd) + (V > (TL > Tab"Terminal"! + Tab"Problems" + Tab"Output" + Tab"Debug") + Cd)) + (LP[p=4] > V[g=3] > (SG > SGI"Properties"! + SGI"History") + (V[g=3] > (V[g=1] > Hd"NightCounter.tsx"[level=3] + Tx"src/components/NightCounter.tsx"[t=supporting]) + ML + (V[g=2] > B.secondary"Format Document" + B.secondary"Go to Definition" + B.secondary"Find References")))
 
 import {useState, useMemo, type CSSProperties} from 'react';
 
 import {Layout, LayoutContent, LayoutPanel} from '@astryxdesign/core/Layout';
+import {StatusDot} from '@astryxdesign/core/StatusDot';
 import {ResizeHandle, useResizable} from '@astryxdesign/core/Resizable';
 import {Text, Heading} from '@astryxdesign/core/Text';
 import {Center} from '@astryxdesign/core/Center';
@@ -507,8 +510,9 @@ export default function IdeWorkspace() {
                                           </Text>
                                         }
                                         startContent={
-                                          <span
-                                            style={styles.historyTimelineDot}
+                                          <StatusDot
+                                            variant="neutral"
+                                            label="Timeline marker"
                                           />
                                         }
                                       />

package/templates/incident-console.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > (LH > H[g3 a=center] > (H[g2 a=center] > Hd"Night watch"[level=1] + Tx"3 investigating"[t=supporting]) + SegmentedControl"Filter by status" + B"Declare incident") + (LC[p0] > V[g0] > (H > PowerSearch"Search the night watch...") + (List > (ListItem)*6)) + (LayoutPanel[w380 p0] > V[g4] > (V[g2] > (H[g2 a=center] > StatusDot + Tx"INC-2417"[t=supporting] + Token"Investigating") + Hd"Checkout API elevated 5xx rate"[level=2]) + (H[g2] > B.primary"Mark mitigated" + B.secondary"Escalate") + Divider + MetadataList + Divider + (V[g2] > Hd"Timeline"[level=3] + List))
 
 /**
  * Incident Console — an on-call incident response tool for the night watch.
@@ -415,7 +417,7 @@ function IncidentInspector({incident}: {incident: Incident}) {
       </VStack>
 
       <HStack gap={2}>
-        <Button label={nextAction} size="sm" />
+        <Button label={nextAction} variant="primary" size="sm" />
         <Button label="Escalate" variant="secondary" size="sm" />
       </HStack>
 

package/templates/kanban-board.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   S > L > (LH[divider] > Tbar > (Hd"Sprint Board"[level=3] + Bd.neutral"8") + (H[g=2] > SE + D.strong + IB"Sort" + IB"Filter" + IB"Search" + B.primary"Add task")) + (LC[p=0] > G[c=4 g=4] > (C.muted[p=0] > L > (LH[divider] > H[j=between a=center] > (H[g=2 a=center] > SD + Hd"To-do"[level=4] + Ic) + Tx) + (LC[p=2] > V[g=2] > (C[p=3] > V[g=2] > (H[j=between] > (H[g=1] > Bd + Bd) + MM) + (V[g=1] > Hd[level=4] + Tx) + Tx)*2))*4)
 
 import {
   useEffect,

package/templates/library.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > (LH[divider] > Hd"Library"[level=1]) + (LC[p=6] > V[g=6] > (V[g=4] > TI"Search the stacks..." + (H[a=center g=4] > (SI[fill] > TgG"Filter" > OFL > Tg"All"! + Tg"Layout" + Tg"Forms") + DM"Sort")) + D + (V[g=6] > (H[j=between a=center] > Hd"Layout"[level=2] + Tx"6 items"[t=supporting]) + (G[c={min:320} g=4] > (C[p=0] > AR + (S.transparent[p=4] > V[g=1] > Hd"Card"[level=3] + Tx"Description"[t=body]))*4)))
 
 import {useState, useMemo, type CSSProperties} from 'react';
 import {Layout, LayoutHeader, LayoutContent} from '@astryxdesign/core/Layout';

package/templates/login-card.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   C[p4] > V[g3] > (Hd"Sign in"[level=3] + F > (TI"Email"[t=email req] + TI"Password"[t=password req]) + B.primary"Enter the night")
 
 import {useState, type CSSProperties} from 'react';
 import {Moon} from 'lucide-react';

package/templates/login-split.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   Ctr > V[g4] > (C[p0] > G[c{min:240} g8 a=stretch] > (S[p0] > V[g4] > (H[g2] > Ic + Tx"Castle Dracula"[t=body]) + (V[g4] > (V[g1] > Hd"Welcome back to the night"[level=2] + Tx"Sign in to your crypt"[t=body]) + (V[g2] > TI"Email"[t=email] + TI"Password"[t=password]) + B.primary"Enter the night" + D"Or continue with" + (G[c2 g3] > B.secondary"Apple" + B.secondary"Google")) + (Tx"New to the castle?"[t=supporting] > Lk"Sign up")) + (C[p0] > AR)) + (V[a=center] > Tx"Terms"[t=supporting])
 
 import {useState, type CSSProperties} from 'react';
 import {VStack, HStack, StackItem} from '@astryxdesign/core/Layout';
@@ -174,7 +176,7 @@ export default function LoginSplit() {
                 <VStack gap={4} height="100%">
                   <HStack gap={2} vAlign="center">
                     <Icon icon={Moon} color="accent" />
-                    <Text type="body" weight="bold">
+                    <Text type="body" weight="semibold">
                       Castle Dracula
                     </Text>
                   </HStack>
@@ -232,11 +234,7 @@ export default function LoginSplit() {
                               />
                               {loginFailed && (
                                 <VStack hAlign="end">
-                                  <Link
-                                    href="#/templates/login-split"
-                                    size="sm"
-                                    color="secondary"
-                                    type="supporting">
+                                  <Link href="#/templates/login-split">
                                     Forgot your password?
                                   </Link>
                                 </VStack>
@@ -276,7 +274,7 @@ export default function LoginSplit() {
                   {!isSuccess && (
                     <Text type="supporting" color="secondary">
                       New to the castle?{' '}
-                      <Link href="#/templates/login-split" type="supporting">
+                      <Link href="#/templates/login-split">
                         Sign up
                       </Link>
                     </Text>
@@ -302,11 +300,11 @@ export default function LoginSplit() {
         <VStack hAlign="center">
           <Text type="supporting" color="secondary">
             By clicking continue, you agree to our{' '}
-            <Link href="#/templates/login-split" type="supporting">
+            <Link href="#/templates/login-split">
               Terms of Service
             </Link>{' '}
             and{' '}
-            <Link href="#/templates/login-split" type="supporting">
+            <Link href="#/templates/login-split">
               Privacy Policy
             </Link>
             .

package/templates/login-sso.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   Ctr > C[p8 mw400] > V[g4] > (V[g1 a=center] > Hd"Welcome back to the night"[level=2] + Tx"Whisper your details"[t=body]) + (V[g2] > TI"Work email"[t=email] + TI"Password"[t=password]) + Lk"Having trouble signing in?" + B.primary"Enter the night" + D"Or sign in with" + B.secondary"Continue with SSO" + (V[a=center] > Tx"New to the castle?"[t=supporting])
 
 import {useState, type CSSProperties} from 'react';
 import {VStack, HStack} from '@astryxdesign/core/Layout';
@@ -135,7 +137,7 @@ export default function LoginSso() {
                 />
               </VStack>
 
-              <Link href="#/templates/login-sso" size="sm" color="secondary" type="supporting">
+              <Link href="#/templates/login-sso">
                 Having trouble signing in?
               </Link>
 
@@ -160,7 +162,7 @@ export default function LoginSso() {
               <VStack hAlign="center">
                 <Text type="supporting" color="secondary">
                   New to the castle?{' '}
-                  <Link href="#/templates/login-sso" type="supporting">
+                  <Link href="#/templates/login-sso">
                     Request access
                   </Link>
                 </Text>
@@ -243,11 +245,7 @@ export default function LoginSso() {
                   />
                   {loginFailed && (
                     <VStack hAlign="end">
-                      <Link
-                        href="#/templates/login-sso"
-                        size="sm"
-                        color="secondary"
-                        type="supporting">
+                      <Link href="#/templates/login-sso">
                         Forgot password?
                       </Link>
                     </VStack>

package/templates/login.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   Ctr > V[g=4 a=center] > (V[g=2 a=center] > Ic + Tx"Castle Dracula"[t=body]) + (C[p=8] > V[g=4] > (V[g=1 a=center] > Hd"Welcome back to the night"[level=2] + Tx"Sign in to your crypt"[t=body]) + TI"Email"[t=email] + TI"Password"[t=password] + B.primary"Enter the night")
 
 import {useState, type CSSProperties} from 'react';
 import {Moon} from 'lucide-react';

package/templates/messaging-shell.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > (LP[w68] > V > Av + (V > IB*4) + IB) + (LP[w260] > V > (H > Hd"Night Watch"[level=3] + IB) + TI"Jump to..." + (V > Tx"Channels"[t=label] + (List > (ListItem)*4)) + (V > Tx"Direct messages"[t=label] + (List > (ListItem)*3))) + (LC[p0] > ChL > ChML > (ChM > ChB)*6 + ChC) + (LP[w340] > V > (H > Hd"Thread"[level=3] + IB) + (ChL > ChML > (ChM > ChB)*3 + ChC))
 
 /**
  * Messaging Shell — Slack-style column frame for team messaging tools.

package/templates/mixed-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=6] > (V[g=2 a=center] > Hd"Every corner of the castle, caught after dark."[level=1] + Tx"Relics, sketches, and moonlit views"[t=body]) + (G[g=4] > (V[g=2] > AR + Tx"Title"[t=supporting])*5)
 
 import type {CSSProperties} from 'react';
 import {VStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
@@ -154,7 +156,7 @@ export default function MixedGallery() {
               <Heading level={1} justify="center">
                 Every corner of the castle, caught after dark.
               </Heading>
-              <Text type="body" justify="center">
+              <Text type="body" color="secondary" justify="center">
                 Relics, sketches, and moonlit views from the coven archives —
                 collected over one long Transylvanian night.
               </Text>

package/templates/payment-form.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > LC[p=0] > Ctr > (S > V[g=5] > (V[g=1] > Hd"Payment Request"[level=1] + Tx"Review your order"[t=body]) + (H > (SI > V[g=6] > (C > V[g=3] > Hd"Sign in"[level=3] + B) + (F > TI"Email" + TI"Address" + B.primary"Place Order")) + (SI > C[p=5] > (Col > V[g=4] > (H > Tmb + V[g=1] > Tx + Tx)*3 + D + (H > Tx + Tx) + Bn.info))))
 
 import {useState, type CSSProperties} from 'react';
 import {

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:360} g=8] > (V[g=4] > AR + (G[c=3 g=3] > C*6)) + (V[g=6] > (V[g=2] > Hd"Midnight Ceremony Mug & Plate Set"[level=1 t=display-2] + (H[g=2] > Tx"$89.00"[t=large] + Tx"$119.00"[t=body] + Bd.pink"Sale")) + Tx"A hand-thrown mug and plate set"[t=large] + (V[g=2] > Tx"Glaze"[t=label] + SG) + (V[g=2] > Tx"Finish"[t=label] + SG) + (V[g=2] > Tx"Quantity"[t=label] + (H[g=1] > B.ghost"-" + TI"1" + B.ghost"+")) + (V[g=2] > 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';
@@ -85,7 +87,7 @@ function StarRating({rating, count}: {rating: number; count: number}) {
         <Icon key={`full-${i}`} icon={Star} size="sm" color="warning" />
       ))}
       {Array.from({length: empty}, (_, i) => (
-        <Icon key={`empty-${i}`} icon={Star} size="sm" />
+        <Icon key={`empty-${i}`} icon={Star} size="sm" color="disabled" />
       ))}
       <Text type="body" color="secondary" hasTabularNumbers>
         {rating} ({count})
@@ -199,7 +201,7 @@ function ProductInfo() {
           <Text type="body" color="secondary" hasStrikethrough hasTabularNumbers>
             {fmt(PRODUCT.originalPrice)}
           </Text>
-          <Badge variant="error" label="Sale" />
+          <Badge variant="pink" label="Sale" />
         </HStack>
       </VStack>
       <Text type="large" weight="normal">

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 > V[g=6] > (G[c={min:280} g=4 a=start] > Hd"Small comforts for the midnight hours."[level=1] + (V[g=3 a=start] > Tx"Provisions from the castle workshops"[t=body] + B.primary"Browse the collection")) + (G[c={min:300} g=6] > (V[g=3] > (C[p=0] > AR[ratio=1]) + (V[g=1] > Hd"Nightfall Stoneware Mug"[level=3] + Tx"Description"[t=body color=secondary] + Tx.lg"$75.00"))*6)
 
 import {VStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
 import {Text, Heading} from '@astryxdesign/core/Text';

package/templates/settings-dialog.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > LC > Ctr[h=80vh] > B.primary"Open settings"[opens=#settings] ;; Dlg#settings > L > (LP[w=280 divider p=3] > V[g=4] > Hd"Account settings"[level=2] + (List > LI"Personal information"*8)) + (LC[p=6] > V[g=6] > DH"Account" + (V[g=4] > (H[j=between] > (V[g=0] > Tx"Legal name"[weight=semibold] + Tx"Vlad Dracul"[t=supporting color=secondary]) + Link"Edit")*4))
 
 import React, {useState, type CSSProperties} from 'react';
 import {
@@ -71,6 +73,10 @@ const actionNoWrap: CSSProperties = {
   whiteSpace: 'nowrap',
 };
 
+// Same-route hash: demo links stay focusable anchors without escaping the
+// template through the hash router (bare "#" would drop back to the home page).
+const SELF_HASH = '#/templates/settings-dialog';
+
 const NAV_ITEMS = [
   {label: 'Personal information', icon: User},
   {label: 'Login & security', icon: Lock},
@@ -178,7 +184,7 @@ function ExpandableRow({
             </Text>
           </VStack>
           <Link
-            href="#/templates/settings-dialog"
+            href={SELF_HASH}
             onClick={(e: React.MouseEvent) => {
               e.preventDefault();
               onEdit();
@@ -212,7 +218,7 @@ function InfoRowItem({
             {value}
           </Text>
         </VStack>
-        {action && <Link>{action}</Link>}
+        {action && <Link href={SELF_HASH}>{action}</Link>}
       </HStack>
       <Divider />
     </>
@@ -570,7 +576,7 @@ export default function SettingsDialog() {
                                     </VStack>
                                   </StackItem>
                                   {device.action && (
-                                    <Link style={actionNoWrap}>
+                                    <Link href={SELF_HASH} style={actionNoWrap}>
                                       {device.action}
                                     </Link>
                                   )}
@@ -598,7 +604,7 @@ export default function SettingsDialog() {
                                   This action cannot be undone
                                 </Text>
                               </VStack>
-                              <Link>Deactivate</Link>
+                              <Link href={SELF_HASH}>Deactivate</Link>
                             </HStack>
                             <Divider />
                           </VStack>
@@ -802,7 +808,7 @@ export default function SettingsDialog() {
                             <Text type="body" weight="semibold">
                               Blocked people
                             </Text>
-                                                          <Link>View</Link>
+                            <Link href={SELF_HASH}>View</Link>
                           </HStack>
                           <Divider />
                         </VStack>
@@ -824,7 +830,7 @@ export default function SettingsDialog() {
                           <Heading level={3}>Reviews</Heading>
                           <Text type="supporting" color="secondary">
                             Choose what&apos;s shared when you write a review.{' '}
-                            <Link type="supporting">Learn more</Link>
+                            <Link href={SELF_HASH}>Learn more</Link>
                           </Text>
                           <VStack gap={4}>
                             <Switch
@@ -868,7 +874,7 @@ export default function SettingsDialog() {
                           <Card>
                             <HStack hAlign="between" vAlign="center">
                               <Text type="body">Request my personal data</Text>
-                              <Link>Request</Link>
+                              <Link href={SELF_HASH}>Request</Link>
                             </HStack>
                           </Card>
                           <Switch
@@ -882,7 +888,7 @@ export default function SettingsDialog() {
                           <Card>
                             <HStack hAlign="between" vAlign="center">
                               <Text type="body">Delete my account</Text>
-                              <Link>Delete</Link>
+                              <Link href={SELF_HASH}>Delete</Link>
                             </HStack>
                           </Card>
                           <Card variant="muted">
@@ -897,7 +903,7 @@ export default function SettingsDialog() {
                                 <Text type="supporting" color="secondary">
                                   We&apos;re committed to keeping your data
                                   protected. See details in our{' '}
-                                  <Link type="supporting">
+                                  <Link href={SELF_HASH}>
                                     Privacy Policy
                                   </Link>
                                   .

package/templates/settings-sidebar.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > (LP > V[g=4] > Hd"Account settings"[level=2] + (UL > LI*8) + D + LI) + (LC[p=4] > V[g=6] > Hd"Personal info"[level=2] + (V > (H[j=between a=center] > (V > Tx"Legal name" + Tx"Vlad Dracul"[t=supporting]) + Lk"Edit")*7) + (C.muted > V[g=4] > (H[g=3 a=start] > Ic + (V[g=1] > Tx"Why is info hidden" + Tx[t=supporting]))*3))
 
 import {useState, type CSSProperties} from 'react';
 import {useMediaQuery} from '@astryxdesign/core/hooks';

package/templates/settings.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   V[g6] > (V[g1] > Hd"Settings"[level=2] + Tx"Profile"[t=body]) + (G[c2 g4] > C[p4] + C[p4])
 
 import {useState} from 'react';
 import {useMediaQuery} from '@astryxdesign/core/hooks';

package/templates/shell-nav.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   A[cp=0 @topNav=(TN) @sideNav=(SN > TL)] > L > (LH[divider] > H[g=2] > C.muted[p=0]*3) + (LC[p=6] > V[g=2] > (H[g=3 a=center] > C.muted[p=0] + C.muted[p=0])*8)
 
 import {Fragment, useState, useMemo, useEffect} from 'react';
 import {AppShell} from '@astryxdesign/core/AppShell';

package/templates/shell-side-nav.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   A[cp=0 @sideNav=(SN > SNI"New chat" + SNI"Search" + SNI"Library" + D + (SNI"Personal" > SNI"Weekend trip planning")*3)] > L > (LC[p=6] > V[g=5] > (H > C.muted[p=0])*4) + (LF > TI"Message Night Owl")
 
 import {useState} from 'react';
 import {AppShell} from '@astryxdesign/core/AppShell';

package/templates/shell-top-nav.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   A[cp=6 @topNav=(TN > TNI"Shop" + TNI"Brands" + TNI"Sale" + TNI"Service")] > V[g=10] > C.muted[p=0] + (V[g=4] > C.muted[p=0] + (G[c={min:160} g=4] > (V[g=2] > C.muted[p=0] + C.muted[p=0])*6))*3
 
 import type {CSSProperties} from 'react';
 import {AppShell} from '@astryxdesign/core/AppShell';

package/templates/side-gallery.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > LC > G[c{min:360} g8 a=center] > (V[g6] > (V[g3] > Tx"AFTER DARK"[t=supporting] + Hd"Make every night"[level=1] + Tx"The smallest rituals"[t=body]) + B.primary"Explore the night" + (V[g4] > D + (H[g6] > (V > Tx"12k+"[t=large] + Tx"Night shots"[t=supporting])*3))) + (G[c3 g3] > AR*9)
 
 import type {CSSProperties} from 'react';
 import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
@@ -103,7 +105,7 @@ function NightScene({alt, hue, index}: {alt: string; hue: string; index: number}
 function StatBlock({value, label}: {value: string; label: string}) {
   return (
     <VStack gap={0}>
-      <Text type="large" weight="bold" hasTabularNumbers>
+      <Text type="large" weight="semibold" hasTabularNumbers>
         {value}
       </Text>
       <Text type="supporting" color="secondary">

package/templates/table-grouped.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=4] > (H[j=between a=center] > Hd"Night-shift issues"[level=2] + B.primary"Raise issue") + (H[g=2 a=center] > PS + B.secondary"View Options")) + (LC[p=0] > T[hover] > (TR > THC*7) + (TR > TC*7)*4)
 
 import React, {useState, useMemo} from 'react';
 import {useResizable, ResizeHandle} from '@astryxdesign/core/Resizable';
@@ -787,7 +789,7 @@ function TaskDetailPanel({
               <Text type="label">Labels</Text>
               <HStack gap={2}>
                 {task.tags.map(tag => (
-                  <Badge key={tag} variant="neutral" label={tag} />
+                  <Badge key={tag} variant="yellow" label={tag} />
                 ))}
               </HStack>
             </VStack>

package/templates/table-page-chart.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > (LH[divider] > H[a=center g=2] > (SI[size=fill] > Hd"Matcha Bar"[level=1]) + IB"Filter"[variant=ghost] + IB"Export"[variant=ghost] + B.primary"New order") + (LC[p=3] > V[g=4] > C[p=3] + (T[hover] > (TR > THC"Order" + THC"Product" + THC"Amount" + THC"Customer" + THC"Email" + THC"Status" + THC"Date") + (TR > TC"ORD-1001" + TC"Ceremonial Matcha Latte" + TC"$6" + TC"Sarah Chen" + TC"sarah.chen@acme.co" + (TC > Bd.green"Completed") + TC"2025-01-15")*6))
 
 import type {CSSProperties} from 'react';
 import {
@@ -668,7 +670,11 @@ export default function ChartTable() {
               variant="ghost"
               tooltip="Export"
             />
-            <Button label="New order" icon={<Icon icon={Plus} size="sm" />} />
+            <Button
+              label="New order"
+              variant="primary"
+              icon={<Icon icon={Plus} size="sm" />}
+            />
           </HStack>
         </LayoutHeader>
       }

package/templates/table-page-heatmap-status.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > (LH > H[g2 a=center] > Hd"Status"[level=1] + IB*2 + B"Refresh") + (LC[p3] > V[g4] > (V[g3] > C[p3] + Tx"Incidents by day and hour"[t=supporting] + (H[g4] > (H[g2] > Tx[t=supporting])*4)) + (T > (TR > THC*8) + (TR > TC*8)*5))
 
 import {
   VStack,

package/templates/table-page-shoe-store-heatmap.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > (LH > H[g2 a=center] > Hd"Midnight Kicks"[level=1] + IB*2 + B.primary"New order") + (LC[p3] > V[g4] > (V[g3] > C[p3] + Tx"Daily revenue"[t=supporting] + (H[g2 a=center] > Ic + Tx"Revenue"[t=supporting])) + (T > (TR > THC*7) + (TR > TC*7)*5))
 
 import type {CSSProperties} from 'react';
 import {
@@ -1013,7 +1015,11 @@ export default function ShoeStoreTable() {
               variant="ghost"
               tooltip="Export"
             />
-            <Button label="New order" icon={<Icon icon={Plus} size="sm" />} />
+            <Button
+              label="New order"
+              variant="primary"
+              icon={<Icon icon={Plus} size="sm" />}
+            />
           </HStack>
         </LayoutHeader>
       }

package/templates/table-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] > H[g=2 a=center] > (SI[fill] > Hd"Familiars"[level=1]) + IB"Filter" + IB"Download" + B.primary"Add") + (LC[p=3] > V[g=4] > PS + (T[hover] > (TR > THC*3) + (TR > TC*3)*3))
 
 import {useState, useMemo} from 'react';
 import {

package/templates/table.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   L > LC > V[g6] > (V[g1] > Hd"Vault"[level=2] + Tx"Remit"[t=body]) + (C[p0] > T[striped] > (TR > THC"Name" + THC"Status" + THC"Updated") + (TR > TC"Blood Vial" + (TC > Bd.success"Active") + TC"2025-01-15")*3)
 
 import {useState} from 'react';
 import {Layout, LayoutHeader, LayoutContent, HStack} from '@astryxdesign/core/Layout';

package/templates/theme-showcase.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   TN"Nocturne" + (S[p6] > V[g10] > (Ctr > V[g4 a=center] > Tx"Little haunts"[t=display-2] + Tx"We believe"[t=body]) + (G[c{min:200,max:3} g4] > (C[p0] > AR + V[g2 a=center] > Bd + Hd"Product"[level=2] + Tx"Description"[t=body] + (H[g2] > NI + B"Add to cart"))*3)) + (V[g8] > (G[c{min:200} g4] > (GS[c1] > C > Hd"Checkout"[level=2]) + (GS[c2] > C > Hd"Night Owl AI"[level=2])) + (G[c{min:200} g4] > (GS[c3] > C > T) + (GS[c1] > C > Hd"Revenue"[level=2])))
 
 import {type CSSProperties, type ReactNode} from 'react';
 import {
@@ -555,7 +557,7 @@ function CheckoutCard({isMobile}: {isMobile: boolean}) {
               label="Economy Shipping"
               description="Delivered in 5–7 business days"
               endContent={
-                <Text type="body" weight="bold" hasTabularNumbers>
+                <Text type="body" weight="semibold" hasTabularNumbers>
                   $12.00
                 </Text>
               }
@@ -565,7 +567,7 @@ function CheckoutCard({isMobile}: {isMobile: boolean}) {
               label="Standard Shipping"
               description="Delivered in 3–5 business days"
               endContent={
-                <Text type="body" weight="bold" hasTabularNumbers>
+                <Text type="body" weight="semibold" hasTabularNumbers>
                   $16.00
                 </Text>
               }
@@ -575,7 +577,7 @@ function CheckoutCard({isMobile}: {isMobile: boolean}) {
               label="Express Shipping"
               description="Delivered in 1–2 business days"
               endContent={
-                <Text type="body" weight="bold" hasTabularNumbers>
+                <Text type="body" weight="semibold" hasTabularNumbers>
                   $24.00
                 </Text>
               }
@@ -583,7 +585,7 @@ function CheckoutCard({isMobile}: {isMobile: boolean}) {
           </RadioList>
 
           <VStack gap={2} style={styles.checkoutStack}>
-            <Text type="label" weight="bold">
+            <Text type="label" weight="semibold">
               Payment method
             </Text>
             <Grid columns={isMobile ? 1 : {minWidth: 70, max: 3}} gap={2}>
@@ -597,7 +599,7 @@ function CheckoutCard({isMobile}: {isMobile: boolean}) {
                   hAlign="center"
                   style={styles.paymentCardContent}>
                   <CreditCard size={20} />
-                  <Text type="supporting" weight="bold">
+                  <Text type="supporting" weight="semibold">
                     Card
                   </Text>
                 </VStack>
@@ -612,7 +614,7 @@ function CheckoutCard({isMobile}: {isMobile: boolean}) {
                   hAlign="center"
                   style={styles.paymentCardContent}>
                   <Smartphone size={20} />
-                  <Text type="supporting" weight="bold">
+                  <Text type="supporting" weight="semibold">
                     Apple Pay
                   </Text>
                 </VStack>
@@ -627,7 +629,7 @@ function CheckoutCard({isMobile}: {isMobile: boolean}) {
                   hAlign="center"
                   style={styles.paymentCardContent}>
                   <Wallet size={20} />
-                  <Text type="supporting" weight="bold">
+                  <Text type="supporting" weight="semibold">
                     Google Pay
                   </Text>
                 </VStack>
@@ -773,7 +775,7 @@ function ChatCard() {
                     label="Items"
                     description="Moonphase Watch · Belfry Throw"
                     endContent={
-                      <Text type="body" weight="bold" hasTabularNumbers>
+                      <Text type="body" weight="semibold" hasTabularNumbers>
                         $248
                       </Text>
                     }
@@ -782,7 +784,7 @@ function ChatCard() {
                     label="Shipping"
                     description="UPS Ground"
                     endContent={
-                      <Text type="body" weight="bold" hasTabularNumbers>
+                      <Text type="body" weight="semibold" hasTabularNumbers>
                         $12
                       </Text>
                     }
@@ -914,7 +916,7 @@ function LatestActivityCard({isMobile}: {isMobile: boolean}) {
 
         <Grid columns={isMobile ? 1 : 2} gap={3}>
           <VStack gap={0}>
-            <Text type="display-3" weight="bold" hasTabularNumbers>
+            <Text type="display-3" weight="semibold" hasTabularNumbers>
               18K
             </Text>
             <Text type="supporting" color="secondary">
@@ -922,7 +924,7 @@ function LatestActivityCard({isMobile}: {isMobile: boolean}) {
             </Text>
           </VStack>
           <VStack gap={0}>
-            <Text type="display-3" weight="bold" hasTabularNumbers>
+            <Text type="display-3" weight="semibold" hasTabularNumbers>
               +12%
             </Text>
             <Text type="supporting" color="secondary">
@@ -952,7 +954,7 @@ function LatestActivityCard({isMobile}: {isMobile: boolean}) {
               endContent={
                 <Text
                   type="body"
-                  weight="bold"
+                  weight="semibold"
                   hasTabularNumbers
                   color={item.amount < 0 ? 'secondary' : 'primary'}>
                   {formatAmount(item.amount)}
@@ -1061,7 +1063,7 @@ function ItemCell({row}: {row: InventoryRow}) {
     <HStack gap={3} vAlign="center">
       <ThumbSwatch hue={row.hue} label={row.name} />
       <VStack gap={0} style={{minWidth: 0}}>
-        <Text type="body" weight="bold">
+        <Text type="body" weight="semibold">
           {row.name}
         </Text>
         <Text type="supporting" color="secondary">