astryx-dracula 0.6.2 → 0.7.0

package/BRAND.md

@@ -9,7 +9,7 @@ Source of truth is `astryx-theme.ts`. Do not add hexes; `bun run audit` enforces
 |---|---|---|
 | Background | #282A36 | page bg |
 | Current line | #6272A4 | line highlight, subtle borders (doubles as comment)[^current-line] |
-| Selection | #44475A | selected rows, quiet surfaces |
+| Selection | #44475A | selected rows and text selection (a semantic, never an elevation step) |
 | Background Light | #343746 | cards, surfaces |
 | Background Lighter | #424450 | popovers, floating elements |
 | Background Dark | #21222C | shadows, on-fill text |
@@ -29,6 +29,56 @@ Source of truth is `astryx-theme.ts`. Do not add hexes; `bun run audit` enforces
 
 [^current-line]: Upstream pins both Current Line and Comment to #6272A4. This kit follows suit for line affordances, including scrollbar thumbs in `tokens.css`. Do not "correct" one of them to #44475A.
 
+### The spec's four palettes
+
+`draculatheme.com/spec` publishes four palettes, and the theme draws on all of
+them. Read the spec before calling a hex off-brand — `#DE5735` looks like a
+stray Stone colour until you find **Functional Red** in the UI section.
+
+| Palette | Hexes |
+|---|---|
+| Syntax | the twelve above |
+| ANSI | `#21222C` black, the eight base hues, and the brights `#6272A4`, `#FF6E6E`, `#69FF94`, `#FFFFA5`, `#D6ACFF`, `#FF92DF`, `#A4FFFF`, `#FFFFFF` |
+| UI | `#343746` light, `#424450` lighter, `#21222C` dark, `#191A21` darker |
+| Functional | `#DE5735`, `#A39514`, `#089108`, `#0081D6`, `#815CD6` — interactive elements, borders and indicators, never status and never editor text |
+
+The categorical chart set draws its teal and indigo from the ANSI brights
+(`#A4FFFF`, `#D6ACFF`), which is why those two are spec values rather than
+inventions.
+
+### Derived values
+
+`scripts/check.ts` allows every hex in `@layer astryx-theme` only if it is in one
+of those four palettes or named in `DERIVED_HEXES` with a reason. Anything else
+fails the build and prints the hex. That gate exists because core's builder
+inlines a token it derives instead of aliasing it, so any colour role the theme
+does not pin keeps Stone's value — 0.7.10 shipped `#E9AF08` for warning text and
+`#F77D77` for error, and the light-dark symmetry gate caught the first only
+because its two branches happened to differ.
+
+Six values are ours, each traceable to a spec value:
+
+- `#9AA1BC` — secondary text, border-emphasized and the gray family. Comment is
+  the obvious pick and fails the 4.5 floor on every surface.
+- `#B0B3C4` — chart axis and caption text, one step above secondary so an axis
+  reads over a grid.
+- `#8C939B` — chart neutral, deliberately not a Dracula hue so a neutral series
+  is not read as one.
+- `#FFD5CC` — the pale inverted error surface behind the inverted Toast.
+- `#FF7575` — error **text**: the ANSI Bright Red lifted 5% toward Foreground.
+  Bright Red alone is 5.23:1 on the body but 4.33:1 on a surface, just under the
+  4.5 floor the spec itself sets; the lift reads 5.46 and 4.52.
+
+Pure black `#000000` is also allowed, for `on-light` and the overlay hover and
+press steps; the spec never asks for black text, but a black overlay is how a
+scrollbar and a pressed state darken.
+
+Two legacy text tokens (`#8288A6`, `#4C5067`) are allowed too, contrast-gated at
+their own floors rather than an AA threshold.
+
+To add a colour, pin it in `astryx-theme.ts` against a spec value, or put it in
+`DERIVED_HEXES` with the reason it exists.
+
 ## Semantic map (glimpse)
 
 - Purple links/titles unvisited. Visited falls back to text-base, hover goes primary + underline. Users learn purple means tappable title.
@@ -59,8 +109,9 @@ Each status scope redefines its muted token to the categorical tint
 (`--color-background-<hue>`, 10% accent wash) with a semantic accent border.
 Text on fills is always `#21222C`; spec never uses raw black. Links render accent
 with underline and resolve to foreground on hover. Focus and interactive edges
-use accent, not Functional Purple: `--color-functional-*` is pinned for spec parity
-(token compat — never encode status in these) and no shipped component consumes it.
+use accent, not Functional Purple: `--color-functional-*` carries the spec's UI
+Functional palette for interactive elements, borders and indicators — never a
+status channel, and no shipped component consumes it today.
 
 ## Interactions
 

package/README.md

@@ -11,12 +11,14 @@ Live showcase: https://yuzu-octopus.github.io/astryx-dracula/
 ## Features
 
 - Dracula tokens pinned in `astryx-theme.ts` (`grep -c "pin(" astryx-theme.ts` pins) (the public props the prebuilt `theme.css` ships, `grep -c "^    --" theme.css`, plus 3 private `--_*-radius` aliases; `tokens.css` mirrors the theme's colour, spacing, radius, type and motion tokens as plain `:root` custom properties, unlayered so it beats core's layers, `grep -c "^\s*--" tokens.css` vars), dark-only. No gate asserts these counts — `bun run theme:check` asserts freshness, `bun run audit` asserts palette purity and contrast.
+- The spec's four palettes (Syntax, ANSI, UI, Functional), with the ANSI bright row
+  available as `--dracula-ansi-bright-*` for emphasis and for a chart series past the base eight
 - Syntax theme plus chart series and sequential ramps
 - Prebuilt CSS plus runtime theme injection, or runtime injection alone for prototyping
 - WCAG contrast gates enforced in CI via `bun run audit`
 - JetBrains Mono fonts and Lucide icons, one runtime dependency (`lucide-react`)
 - Agent skill, `llms.txt`, and copy-paste quickstart for AI-assisted adoption
-- Around 45 themed pages in `templates/`, published as an Astryx integration pack and viewable live at `/astryx-dracula/#/templates`
+- 48 themed pages in `templates/`, published as an Astryx integration pack and viewable live at `/astryx-dracula/#/templates`
 
 ## Installation
 
@@ -52,7 +54,7 @@ theme.css         prebuilt output of bun run theme:build
 tokens.css        plain-CSS :root mirror for any stack
 icons.tsx         Lucide icon registry (runtime `lucide-react` dependency)
 fonts/            JetBrains Mono woff2 files
-templates/        around 45 themed pages, each with an XLE structure header
+templates/        48 themed pages, each with an XLE structure header
 shared/           reusable modules templates compose (23 files)
 scripts/check.ts  palette, contrast, packaging, and XLE-header gates
 demo/             showcase source, deployed to GitHub Pages
@@ -68,11 +70,16 @@ demo/             showcase source, deployed to GitHub Pages
 | `bun run build`      | Typecheck plus showcase build              |
 | `bun run fmt`        | Format the source (`bun fmt`; style in `bunfig.toml`) |
 | `bun run fmt:check`  | Fail if the source is not formatted        |
-| `bun run lint`       | Biome, lint only — the formatter is `bun fmt` |
+| `bun run lint`       | `biome check`: lint plus import order. Formatting is `bun fmt` (Biome's formatter is off) |
+| `bun audit`          | Bun's builtin vulnerability scan — not this repo's `audit` script |
 | `bunx react-doctor@latest` | Component health scan (currently 100/100) |
 
+`bun audit` is a bun builtin and `bun run audit` is the kit gate. Bun's own
+command runs first, so the two never collide, but a bare `bun audit` checks
+dependencies and says nothing about the palette.
+
 ## 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 template files in `templates/` (around 45) 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).
+- **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 template files in `templates/` (46) 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/USAGE.md

@@ -73,7 +73,7 @@ Then use `var(--color-primary)`, `var(--dracula-purple)`, `var(--space-gap)`.
 
 ## Templates
 
-Around 45 themed pages ship in `templates/`, each with a `<id>.template.mjs` spec, published
+48 themed pages ship in `templates/`, each with a `<id>.template.mjs` spec, published
 as an Astryx integration pack (`astryx.integration.mjs`). List this package in your
 `astryx.config`, then scaffold any of them:
 

package/astryx-dracula.d.ts

@@ -2,8 +2,8 @@
  * @generated by `astryx theme build` — do not edit manually.
  * Source: astryx-theme.ts
  * Command: astryx theme build astryx-theme.ts --out theme.css
- * CLI: @astryxdesign/cli@0.7.2
- * Core: @astryxdesign/core@0.7.2
+ * CLI: @astryxdesign/cli@0.7.10
+ * Core: @astryxdesign/core@0.7.10
  */
 
 /// <reference path="./astryx-dracula.variants.d.ts" />

package/astryx-dracula.js

@@ -2,8 +2,8 @@
  * @generated by `astryx theme build` — do not edit manually.
  * Source: astryx-theme.ts
  * Command: astryx theme build astryx-theme.ts --out theme.css
- * CLI: @astryxdesign/cli@0.7.2
- * Core: @astryxdesign/core@0.7.2
+ * CLI: @astryxdesign/cli@0.7.10
+ * Core: @astryxdesign/core@0.7.10
  */
 
 import { draculaIconRegistry } from "./icons.mjs";
@@ -81,6 +81,18 @@ export const astryxDraculaTheme = {
     "--duration-slow-min": "730ms",
     "--duration-slow": "975ms",
     "--duration-slow-max": "1300ms",
+    "--_astryx-pre-tempo-duration-fast-min": "130ms",
+    "--_astryx-pre-tempo-duration-fast": "175ms",
+    "--_astryx-pre-tempo-duration-fast-max": "235ms",
+    "--_astryx-pre-tempo-duration-medium-min": "310ms",
+    "--_astryx-pre-tempo-duration-medium": "410ms",
+    "--_astryx-pre-tempo-duration-medium-max": "545ms",
+    "--_astryx-pre-tempo-duration-slow-min": "730ms",
+    "--_astryx-pre-tempo-duration-slow": "975ms",
+    "--_astryx-pre-tempo-duration-slow-max": "1300ms",
+    "--_astryx-motion-tempo": "1",
+    "--ease-entrance": "cubic-bezier(0.24, 1, 0.4, 1)",
+    "--ease-move": "cubic-bezier(0.24, 1, 0.4, 1)",
     "--font-family-body": "\"JetBrains Mono\", monospace",
     "--font-family-heading": "\"JetBrains Mono\", monospace",
     "--font-family-code": "\"JetBrains Mono\", monospace",
@@ -146,7 +158,7 @@ export const astryxDraculaTheme = {
     "--color-background-surface": "light-dark(#343746, #343746)",
     "--color-background-card": "light-dark(#343746, #343746)",
     "--color-background-popover": "light-dark(#424450, #424450)",
-    "--color-background-muted": "light-dark(#44475A, #44475A)",
+    "--color-background-muted": "light-dark(#21222C, #21222C)",
     "--color-overlay": "light-dark(#191A21CC, #191A21CC)",
     "--color-overlay-hover": "light-dark(#0000001F, #0000001F)",
     "--color-overlay-pressed": "light-dark(#00000033, #00000033)",
@@ -161,6 +173,14 @@ export const astryxDraculaTheme = {
     "--color-text-secondary": "light-dark(#9AA1BC, #9AA1BC)",
     "--color-text-disabled": "light-dark(#6272A4, #6272A4)",
     "--color-text-accent": "light-dark(#BD93F9, #BD93F9)",
+    "--color-text-info": "light-dark(#8BE9FD, #8BE9FD)",
+    "--color-text-success": "light-dark(#50FA7B, #50FA7B)",
+    "--color-text-warning": "light-dark(#F1FA8C, #F1FA8C)",
+    "--color-text-error": "light-dark(#FF7575, #FF7575)",
+    "--color-on-info-muted": "light-dark(#8BE9FD, #8BE9FD)",
+    "--color-on-success-muted": "light-dark(#50FA7B, #50FA7B)",
+    "--color-on-warning-muted": "light-dark(#F1FA8C, #F1FA8C)",
+    "--color-on-error-muted": "light-dark(#FF7575, #FF7575)",
     "--color-icon-primary": "light-dark(#F8F8F2, #F8F8F2)",
     "--color-icon-secondary": "light-dark(#9AA1BC, #9AA1BC)",
     "--color-icon-disabled": "light-dark(#6272A4, #6272A4)",
@@ -689,7 +709,9 @@ export const astryxDraculaTheme = {
       "fast": 175,
       "medium": 410,
       "slow": 975,
-      "ratio": 0.75
+      "ratio": 0.75,
+      "tempo": 1,
+      "character": "standard"
     }
   },
   icons: draculaIconRegistry,

package/astryx-dracula.variants.d.ts

@@ -2,8 +2,8 @@
  * @generated by `astryx theme build` — do not edit manually.
  * Source: astryx-theme.ts
  * Command: astryx theme build astryx-theme.ts --out theme.css
- * CLI: @astryxdesign/cli@0.7.2
- * Core: @astryxdesign/core@0.7.2
+ * CLI: @astryxdesign/cli@0.7.10
+ * Core: @astryxdesign/core@0.7.10
  */
 
 // Generated by astryx theme build

package/package.json

@@ -4,20 +4,20 @@
 		"url": "https://github.com/yuzu-octopus/astryx-dracula/issues"
 	},
 	"dependencies": {
-		"lucide-react": "^1.61.0"
+		"lucide-react": "1.70.0"
 	},
 	"description": "Pure Dracula brand theme for Astryx React sites. Dark-only tokens, syntax highlighting, and chart colors with prebuilt CSS.",
 	"devDependencies": {
-		"@astryxdesign/cli": "0.7.2",
-		"@astryxdesign/core": "0.7.2",
-		"@biomejs/biome": "2.6.2",
-		"@types/bun": "^1.4.3",
-		"@types/node": "^26.6.5",
+		"@astryxdesign/cli": "0.7.10",
+		"@astryxdesign/core": "0.7.10",
+		"@biomejs/biome": "2.6.6",
+		"@types/bun": "1.4.4",
+		"@types/node": "26.6.6",
 		"@types/react": "^19.3.0",
 		"@types/react-dom": "^19.3.0",
-		"@vitejs/plugin-react": "^6.1.2",
+		"@vitejs/plugin-react": "6.2.1",
 		"typescript": "^7.0.2",
-		"vite": "^8.3.5"
+		"vite": "8.3.6"
 	},
 	"exports": {
 		"./shared/auth-chrome": "./shared/auth-chrome.tsx",
@@ -110,10 +110,10 @@
 		"theme:check": "bun run icons:check && bunx astryx theme build astryx-theme.ts -o theme.css --icons-specifier ./icons.mjs --check --json | bun -e 'const r = JSON.parse(await Bun.stdin.text()); if (r.type !== \"theme.build.check\") { console.error(\"theme:check: unexpected CLI response \" + JSON.stringify(r).slice(0, 200)); process.exit(1); } const stale = r.data.stale; for (const s of stale) console.error(\"stale: \" + s.path + \" (\" + s.reason + \")\"); if (stale.length) process.exit(1); const entry = await import(\"./astryx-dracula.js\"); if (!entry.astryxDraculaTheme || !entry.draculaIconRegistry) { console.error(\"astryx-dracula.js is missing its theme or icon registry export\"); process.exit(1); } console.log(\"theme outputs up to date; astryx-dracula.js (hand-maintained) loads and exports\");' && bun run entry:check",
 		"icons:check": "NODE_ENV=production bun build icons.tsx --outfile .tmp-icons.mjs --format esm --external react --external lucide-react; s=$?; cmp -s .tmp-icons.mjs icons.mjs; c=$?; rm -f .tmp-icons.mjs; [ $s -eq 0 ] && [ $c -eq 0 ] || { echo 'stale: icons.mjs (rerun bun run icons:build)'; exit 1; }",
 		"entry:check": "node -e \"const{pathToFileURL}=require('url');const{resolve}=require('path');import(pathToFileURL(resolve('astryx-dracula.js')).href).then(m=>{if(!m.astryxDraculaTheme||!m.draculaIconRegistry){console.error('astryx-dracula.js is missing its theme or icon registry export');process.exit(1)}console.log('astryx-dracula.js loads under plain Node ESM')}).catch(e=>{console.error('astryx-dracula.js is not importable by Node ESM: '+e.message);process.exit(1)})\"",
-		"prepublishOnly": "bun run theme:check && bun run icons:check && bun run entry:check && bun run audit && bun check && bun run fmt:check && bun run lint && bunx react-doctor@latest --score",
+		"prepublishOnly": "bun audit && bun run theme:check && bun run icons:check && bun run entry:check && bun run audit && bun check && bun run fmt:check && bun run lint && bunx react-doctor@latest --score",
 		"fmt": "bun fmt '**/*.{ts,tsx,mjs,js,jsx,json,css}'",
 		"fmt:check": "bun fmt --check '**/*.{ts,tsx,mjs,js,jsx,json,css}'",
-		"lint": "biome lint"
+		"lint": "biome check"
 	},
 	"sideEffects": [
 		"**/*.css"
@@ -123,5 +123,5 @@
 		"@astryxdesign/cli"
 	],
 	"type": "module",
-	"version": "0.6.2"
+	"version": "0.7.0"
 }

package/shared/auth-chrome-config.ts

@@ -12,7 +12,3 @@ export const authPageStyle: CSSProperties = {
 };
 // Cap the column at 400px but let it shrink to fit narrow screens.
 export const authContentStyle: CSSProperties = { width: "100%", maxWidth: 400 };
-// WCAG 1.3.5 autocomplete: TextInput forwards unknown props to <input> but its
-// prop type omits input-only attributes, so spread through a widened record.
-export const inputAutoComplete = (value: string) =>
-	({ autoComplete: value }) as Record<string, string>;

package/shared/auth-chrome.tsx

@@ -8,7 +8,6 @@ import { VStack } from "@astryxdesign/core/Layout";
 import { Link } from "@astryxdesign/core/Link";
 import { Heading, Text } from "@astryxdesign/core/Text";
 import { TextInput } from "@astryxdesign/core/TextInput";
-import { inputAutoComplete } from "astryx-dracula/shared/auth-chrome-config";
 import {
 	AUTH_BRAND_NAME,
 	AUTH_EMAIL_PLACEHOLDER,
@@ -116,7 +115,7 @@ export function AuthLoginFields({
 					onChange={onEmailChange}
 					placeholder={AUTH_EMAIL_PLACEHOLDER}
 					type="email"
-					{...inputAutoComplete("email")}
+					autoComplete="email"
 					size="lg"
 					onEnter={onSubmit}
 					status={error ? { type: "error", message: error } : undefined}
@@ -129,7 +128,7 @@ export function AuthLoginFields({
 						onChange={onPasswordChange}
 						placeholder={AUTH_PASSWORD_PLACEHOLDER}
 						type="password"
-						{...inputAutoComplete("current-password")}
+						autoComplete="current-password"
 						size="lg"
 						onEnter={onSubmit}
 						status={error ? { type: "error", message: error } : undefined}

package/shared/chaptered-doc-config.ts

@@ -57,11 +57,12 @@ export const outlinePanel: CSSProperties = {
 	top: "var(--spacing-6)",
 	alignSelf: "start",
 	// No paddingBlockStart. This object is applied via `style=` to the outline
-	// LayoutPanels (chaptered-doc.tsx:316, documentation-design.tsx:592,
-	// documentation-technical.tsx:82), and an inline style prop BEATS the stylex
+	// LayoutPanels, and an inline style prop BEATS the stylex
 	// class -- so this 8px silently overrode the panel's own 16px block padding
 	// at the top edge only, leaving every "On this page" rail in the kit
 	// asymmetric by 8px. The panel already owns its block padding.
+	// Call sites are named by file, not by line: line numbers in a comment go
+	// stale the first time anyone edits above them, and these three did.
 };
 
 // Derived once per page so the Outline receives a stable array identity

package/shared/order-desk.tsx

@@ -1,5 +1,5 @@
 // Parametric order desk shared by the table-page-chart (Matcha Bar) and
-// table-page-shoe-store-heatmap (Midnight Kicks) templates. The two pages are
+// table-page-shoe-store (Midnight Kicks) templates. The two pages are
 // one archetype — revenue line over the order log — differing only in catalogue,
 // rows, and chart scale, so the frame/columns live here once.
 
@@ -37,7 +37,7 @@ import type { CSSProperties } from "react";
 // minHeight appears in none of them.
 //
 // The wrapper is shared by all three callers (table-page-chart.tsx:410,
-// table-page-shoe-store-heatmap.tsx:759, and this module's own default), so
+// table-page-shoe-store.tsx:759, and this module's own default), so
 // anchoring it here covers them together. Anchoring inside each caller instead
 // would put a 100dvh box inside this one and overflow by the header height.
 //
@@ -200,63 +200,61 @@ export function OrderDesk({
 	gridTicks: number[];
 }) {
 	return (
-		// The anchor lives on a page-owned wrapper, never on the Layout. A bare
-		// `height="fill"` resolves against `min-height: 100%`, which collapses when
-		// the host is content-sized — and templates ship standalone, so that is the
-		// common case. Putting the height on the Layout instead would trade
-		// a soft failure (the document scrolls) for a hard one (content clipped,
-		// because `LayoutContent` is `overflow: auto` with a definite height).
-		<div style={pageStyle}>
-			<Layout
-				height="fill"
-				header={
-					<LayoutHeader hasDivider padding={6}>
-						<HStack gap={2} vAlign="center">
-							<StackItem size="fill">
-								{/* maxLines={1}, not wrap="wrap": at 390 the 35px display-2 title
+		// Templates ship standalone, so the page owns the definite ancestor for
+		// `height="fill"` — 100dvh on the Layout itself, the same anchor every
+		// other page uses. It used to sit on a wrapper <div>, which contradicted
+		// the no-raw-div rule for a reason that does not hold: the height lands on
+		// the same box either way.
+		<Layout
+			style={pageStyle}
+			height="fill"
+			header={
+				<LayoutHeader hasDivider padding={6}>
+					<HStack gap={2} vAlign="center">
+						<StackItem size="fill">
+							{/* maxLines={1}, not wrap="wrap": at 390 the 35px display-2 title
                   wraps 2-3 lines in a 342px header (measured: 136px tall for
                   "Midnight Kicks", 180px for an 18-char title). Wrapping the
                   row measured IDENTICAL header heights in both configurations
                   — the controls already fit, the title is what is tall. And
                   maxLines wires core's useTruncation, so the full value stays
                   reachable in a Tooltip (SC 1.4.10, "truncation must reveal"). */}
-								<Heading level={1} type="display-2" maxLines={1}>
-									{title}
-								</Heading>
-							</StackItem>
-							<IconButton
-								label="Filter"
-								icon={<Icon icon={Filter} size="sm" />}
-								variant="ghost"
-								tooltip="Filter"
-							/>
-							<IconButton
-								label="Export"
-								icon={<Icon icon={Download} size="sm" />}
-								variant="ghost"
-								tooltip="Export"
-							/>
-							<Button label="New order" variant="primary" icon={<Icon icon={Plus} size="sm" />} />
-						</HStack>
-					</LayoutHeader>
-				}
-				content={
-					<LayoutContent padding={3}>
-						<VStack gap={4}>
-							<RevenueChart data={revenueData} chartMax={chartMax} gridTicks={gridTicks} />
-							<Table<OrderDeskRow>
-								data={orders}
-								columns={columnsFor(selfHash, products)}
-								idKey="id"
-								density="balanced"
-								dividers="rows"
-								textOverflow="truncate"
-								hasHover
-							/>
-						</VStack>
-					</LayoutContent>
-				}
-			/>
-		</div>
+							<Heading level={1} type="display-2" maxLines={1}>
+								{title}
+							</Heading>
+						</StackItem>
+						<IconButton
+							label="Filter"
+							icon={<Icon icon={Filter} size="sm" />}
+							variant="ghost"
+							tooltip="Filter"
+						/>
+						<IconButton
+							label="Export"
+							icon={<Icon icon={Download} size="sm" />}
+							variant="ghost"
+							tooltip="Export"
+						/>
+						<Button label="New order" variant="primary" icon={<Icon icon={Plus} size="sm" />} />
+					</HStack>
+				</LayoutHeader>
+			}
+			content={
+				<LayoutContent padding={3}>
+					<VStack gap={4}>
+						<RevenueChart data={revenueData} chartMax={chartMax} gridTicks={gridTicks} />
+						<Table<OrderDeskRow>
+							data={orders}
+							columns={columnsFor(selfHash, products)}
+							idKey="id"
+							density="balanced"
+							dividers="rows"
+							textOverflow="truncate"
+							hasHover
+						/>
+					</VStack>
+				</LayoutContent>
+			}
+		/>
 	);
 }

package/shared/revenue-chart.tsx

@@ -169,7 +169,7 @@ export function RevenueChart({
 									y1={y}
 									x2={CHART_W - CHART_PAD_RIGHT}
 									y2={y}
-									stroke="var(--color-separator)"
+									stroke="var(--color-graph-gridlines)"
 									strokeDasharray={tick === 0 ? undefined : "3 3"}
 									opacity={tick === 0 ? 1 : 0.5}
 								/>

package/shared/scene-castle.tsx

@@ -23,13 +23,13 @@ const CARD_HILLS = {
 
 const TALL_HILL = "M0 380 Q200 320 400 370 V500 H0 Z" as const;
 
-function WideCastle() {
+function WideCastle({ label }: { label?: string }) {
 	return (
 		<svg
 			style={galleryImage}
 			viewBox="0 0 800 450"
 			role="img"
-			aria-label="Moonlit castle on a hill in Dracula theme colors"
+			aria-label={label ?? "Moonlit castle on a hill in Dracula theme colors"}
 		>
 			<rect width="800" height="450" fill="var(--dracula-bg-dark)" />
 			{/* Stars */}
@@ -95,13 +95,13 @@ function WideCastle() {
 	);
 }
 
-function CardCastle() {
+function CardCastle({ label }: { label?: string }) {
 	return (
 		<svg
 			style={galleryImage}
 			viewBox="0 0 400 500"
 			role="img"
-			aria-label="Moonlit castle on midnight hills"
+			aria-label={label ?? "Moonlit castle on midnight hills"}
 		>
 			<rect width="400" height="500" fill="var(--dracula-bg-dark)" />
 			{/* Stars */}
@@ -142,13 +142,13 @@ function CardCastle() {
 	);
 }
 
-function TallPines() {
+function TallPines({ label }: { label?: string }) {
 	return (
 		<svg
 			style={galleryImage}
 			viewBox="0 0 400 500"
 			role="img"
-			aria-label="Harvest moon over midnight pines"
+			aria-label={label ?? "Harvest moon over midnight pines"}
 		>
 			<rect width="400" height="500" fill="var(--dracula-bg-dark)" />
 			{/* Stars */}
@@ -186,14 +186,14 @@ function TallPines() {
 	);
 }
 
-function Rooftops() {
+function Rooftops({ label }: { label?: string }) {
 	return (
 		<svg
 			style={galleryImage}
 			viewBox="0 0 400 300"
 			preserveAspectRatio="xMidYMid slice"
 			role="img"
-			aria-label="Harvest moon over the castle rooftops"
+			aria-label={label ?? "Harvest moon over the castle rooftops"}
 		>
 			<rect width="400" height="300" fill="var(--dracula-bg)" />
 			<g fill="var(--dracula-fg)">
@@ -229,9 +229,17 @@ function Rooftops() {
 	);
 }
 
-export function SceneCastle({ variant }: { variant: SceneCastleVariant }) {
-	if (variant === "wide") return <WideCastle />;
-	if (variant === "card") return <CardCastle />;
-	if (variant === "rooftops") return <Rooftops />;
-	return <TallPines />;
+export function SceneCastle({
+	variant,
+	label,
+}: {
+	variant: SceneCastleVariant;
+	// Callers that keep their own alt text pass it here, so the accessible name
+	// cannot drift from the data the way a hardcoded label lets it.
+	label?: string;
+}) {
+	if (variant === "wide") return <WideCastle label={label} />;
+	if (variant === "card") return <CardCastle label={label} />;
+	if (variant === "rooftops") return <Rooftops label={label} />;
+	return <TallPines label={label} />;
 }

package/templates/ai-chat-landing.tsx

@@ -295,15 +295,10 @@ const INITIAL_ATTACHMENTS: Attachment[] = [
 	"dracula_spec.pdf",
 ].map((name) => ({ id: crypto.randomUUID(), name }));
 
-// The composer's imperative insert methods mutate the DOM without emitting a
-// change, so dispatch an input event to sync its value and clear the placeholder.
-const syncComposerValue = () => {
-	document.activeElement?.dispatchEvent(new Event("input", { bubbles: true }));
-};
-
 // One inserter for every composer write. `insertText` replaces the selection
 // (suggestion prompts); `insertToken` inserts a chip at the cursor without
-// touching the selection (mentions, mode tokens).
+// touching the selection (mentions, mode tokens). Both emit a change in 0.7.10,
+// so no input-event sync is needed after either call.
 function insertIntoComposer(
 	input: ChatComposerInputHandle | null,
 	write: { text: string } | { token: ChatComposerToken },
@@ -327,7 +322,6 @@ function insertIntoComposer(
 	} else {
 		input.insertToken(write.token);
 	}
-	syncComposerValue();
 }
 
 // Main component
@@ -535,7 +529,10 @@ export default function AiChatLanding() {
 											<ClickableCard
 												key={suggestion.heading}
 												label={suggestion.heading}
-												variant="muted"
+												// Raised tappable card. `muted` is a recessed well since
+												// the 2026-11 token change, so it would read as a hole
+												// in the page rather than a prompt you can press.
+												variant="default"
 												padding={4}
 												onClick={() => {
 													applySuggestion(suggestion.prompt);

package/templates/ai-chat.tsx

@@ -231,7 +231,9 @@ function ArtifactCard({ onOpen }: { onOpen: () => void }) {
 		<ClickableCard
 			label={`Open ${ARTIFACT_TITLE}`}
 			onClick={onOpen}
-			variant="muted"
+			// A raised tappable chip, not a well: `muted` is #21222C since the
+			// 2026-11 token change and would sink this card below the chat body.
+			variant="default"
 			padding={3}
 			maxWidth={360}
 			style={artifactCard}
@@ -374,6 +376,7 @@ export default function AiChat() {
 											</ChatMessageBubble>
 											<ChatToolCalls
 												defaultIsExpanded
+												label="Explored the auth files"
 												calls={[
 													{
 														name: "read",
@@ -480,6 +483,7 @@ The fix is to catch \`TokenExpiredError\` specifically and attempt a refresh bef
 										<ChatMessage sender="assistant" avatar={<Avatar name="Agent" size="md" />}>
 											<ChatToolCalls
 												defaultIsExpanded
+												label="Added and ran the refresh test"
 												calls={[
 													{
 														name: "read",

package/templates/centered-hero.tsx

@@ -2,7 +2,7 @@
 // XLE (canonical structure of the tree below; the CLI had no XLE validator
 // after `astryx layout` was removed in 0.7.0, so this is a reading aid and a
 // human drift check — update it with the file, never alone):
-//   L[h=auto] > LC[p=6] > V[g=10] > ((V[g=6 a=center] > (V[g=3 a=center] > Hd"Small joys for creatures of the night"[level=1 t=display-2] + Tx"Sometimes all it takes is one small ritual to turn the whole night around."[t=body] + Tx"astryx-dracula v0.6.2"[t=supporting]) + (H[j=center g=3] > B.primary"Embrace the night" + B.secondary"Read the lore")) + (S.transparent[p=0] > AR[ratio=16/9] > Scene{SceneCastle}))
+//   L[h=auto] > LC[p=6] > V[g=10] > ((V[g=6 a=center] > (V[g=3 a=center] > Hd"Small joys for creatures of the night"[level=1 t=display-2] + Tx"Sometimes all it takes is one small ritual to turn the whole night around."[t=body] + Tx"astryx-dracula v0.7.0"[t=supporting]) + (H[j=center g=3] > B.primary"Embrace the night" + B.secondary"Read the lore")) + (S.transparent[p=0] > AR[ratio=16/9] > Scene{SceneCastle}))
 
 import { AspectRatio } from "@astryxdesign/core/AspectRatio";
 import { Button } from "@astryxdesign/core/Button";
@@ -41,7 +41,7 @@ export default function CenteredHero() {
 									Sometimes all it takes is one small ritual to turn the whole night around.
 								</Text>
 								<Text type="supporting" color="secondary" justify="center" hasTabularNumbers>
-									astryx-dracula v0.6.2
+									astryx-dracula v0.7.0
 								</Text>
 							</VStack>
 							<HStack gap={3} wrap="wrap" justify="center">