astryx-dracula 0.2.0 → 0.3.0

package/BRAND.md

@@ -8,30 +8,40 @@ Source of truth is `astryx-theme.ts`. Do not add hexes; `bun run audit` enforces
 | Role | Hex | Use |
 |---|---|---|
 | Background | #282A36 | page bg |
-| Current line | #6272A4 | line highlight, subtle borders (doubles as comment) |
+| Current line | #6272A4 | line highlight, subtle borders (doubles as comment)[^current-line] |
 | Selection | #44475A | selected rows, quiet surfaces |
 | Background Light | #343746 | cards, surfaces |
 | Background Lighter | #424450 | popovers, floating elements |
-| Background Dark | #21222C | shadows |
+| Background Dark | #21222C | shadows, on-fill text |
+| Darker | #191A21 | shadow washes only (never a surface: `--shadow-*` alpha blends) |
 | Foreground | #F8F8F2 | primary text on dark |
-| Comment | #6272A4 | disabled / muted text |
+| Comment | #6272A4 | subtle borders, empty cells, disabled text[^comment] |
 | Cyan | #8BE9FD | info, secondary links |
 | Green | #50FA7B | positive, success |
-| Orange | #FFB86C | warning, attention |
+| Orange | #FFB86C | attention, constants (never warning) |
 | Pink | #FF79C6 | flair, accent |
 | Purple | #BD93F9 | primary, links and titles unvisited |
 | Red | #FF5555 | negative, error |
-| Yellow | #F1FA8C | tags, chips |
+| Yellow | #F1FA8C | tags, chips, warning states |
+| Inverted error | #FFD5CC | pale surface for the inverted error Toast (not a spec hex) |
+
+[^comment]: Comment sits **between** the two WCAG floors on the scene backdrop `#21222C`: 3.36:1 clears 1.4.11's **graphical** floor and fails the **text** floor, and any `fillOpacity` below 0.9 is worse (0.85 → 2.81). So Comment is correct on an empty cell or a subtle grid line and **never** on a `<text fill>`. Scene text uses `--color-text-paragraph` (7.59:1). Do not "improve" an empty cell to `--color-separator`: its ceiling on `#21222C` is 1.73:1 at full opacity and 1.32:1 at 0.55, and a grid whose empty cells have vanished is not a grid.
+
+[^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.
 
 ## Semantic map (glimpse)
 
 - Purple links/titles unvisited. Visited falls back to text-base, hover goes primary + underline. Users learn purple means tappable title.
-- Green positive and success. Red negative and error. Yellow tags and chips. Cyan info and secondary links. Pink flair. Orange warning.
-- Subdue #4C5067 for metadata and separators. Not a Dracula hex; derived from glimpse ramp for text-on-dark hierarchy.
+- Green positive and success. Red negative and error. Yellow tags, chips, and warning states (`--color-warning` ships Yellow; Orange never carries warning). Cyan info and secondary links. Pink flair. Orange attention and constants.
+- Subdue #4C5067 for separators and hairline chrome, never text (1.8:1 on the page background, 1.5:1 on cards). Not a Dracula hex; derived from the glimpse ramp for chrome hierarchy.
+
+## Borders
+
+`--color-border` is Comment `#6272A4`. `--color-border-emphasized` is **`#9AA1BC`**, repinned from Comment: core tone-bumps that token to ≥3:1 for form-control boundaries, but `pin()` returns a literal so that guarantee is inert here, and the old value cleared *no* surface tier at 3:1 while the new one clears all four (5.56 / 4.60 / 3.77 / 3.57). `DropdownMenuRadioItem` reads it on a popover, so the popover tier is a real consumer. Known shortfall: the inverted surface at 2.40, which has no live consumer — recorded, not certified.
 
 ## Charts
 
-Categorical series use nearest Dracula hues: blue goes comment, orange orange, purple purple,
+A chart mark takes a `--color-data-*` **role token**, never a `--dracula-*` primitive, and the types enforce it — widening `ChartLegendEntry.color` and `DataBarSegment.color` from `string` to template-literal unions caught ten real violations at compile time, including eight demo bars painting `--color-success` on a data mark. Categorical series use nearest Dracula hues: blue goes comment, orange orange, purple purple (compat token only — purple means tappable, never encode data; the ban is a **module rule** enforced by `chart-hues.ts`, not token absence),
 green green, pink pink, cyan cyan, red red. Teal uses ANSI bright cyan #A4FFFF and indigo
 ANSI bright blue #D6ACFF; brown has no spectral match and reuses orange. Sequential ramps cover 9 families (purple, pink, red,
 orange, yellow, teal, blue, shamrock, gray) with 5 lightness steps each (28/44/60/74/88),
@@ -39,8 +49,8 @@ constant hue and saturation per family.
 
 ## Code highlighting
 
-Custom spec-exact syntax theme (`draculaSyntax` in `astryx-theme.ts`, stricter than the bundled preset):
-pink keywords, yellow strings, comment gray comments, orange numbers, green functions, cyan types.
+Syntax theme (`draculaSyntax` in `astryx-theme.ts`, 14 slots per the spec Token Classification):
+pink keywords/operators/tags, yellow strings, comment-gray comments, orange numbers, green functions and attributes, cyan types, purple constants, foreground variables/properties/punctuation, Background canvas. Regexps get no split (core's tokenizer emits no regexp scope); attributes/tags follow the official Dracula editors and the core `dracula` preset, not the Support bucket's Cyan.
 
 ## Status surfaces
 
@@ -49,13 +59,14 @@ 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 Functional Purple `#815CD6`.
+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.
 
 ## Interactions
 
 Buttons darken on hover; destructive pairs red fill with dark text. Links render accent
 underlined and resolve to foreground on hover. Focus rings use accent, not Functional
-Purple: 5.9 contrast beats 3.5 on dark backgrounds, verified by keyboard screenshot.
+Purple: 5.9 contrast beats 3.0 on dark backgrounds, verified by keyboard screenshot.
 Inputs take accent and error rings from core; table rows lift on hover. Cards, banners,
 badges, and progress bars are static.
 
@@ -65,13 +76,14 @@ Radii flat and crisp (5px elements, 4px inner). Everything below is a core defau
 
 - Motion durations: neutral defaults (fast 175ms, medium 410ms).
 - Spacing/size/ease scales: core defaults. Shadows, radii, and surfaces are Dracula-hued tokens above.
-- Zero theme dependencies: icons vendored (Lucide), everything else defined here.
-- Derived AA lifts (not spec hexes, same hues): secondary text #9AA1BC, muted text #8288A6, paragraph #B0B3C4, subdue #4C5067.
-- Icon glyphs vendored from Lucide in `icons.tsx` (MIT). The theme also sets icon colors (primary, secondary, disabled, accent).
-- onDark: generated defaults inherited. Dark-surface content resolves from the same ramp.
-- `--color-data-neutral`: default gray reads fine on dark.
+- One runtime dependency: `lucide-react` (icons render from it at runtime, both the theme `draculaIconRegistry` in `icons.tsx` and every template's direct imports — `bun run audit` fails when a registered glyph stops resolving to a real export). Everything else is defined here.
+- Derived AA lifts (not spec hexes, same hues): secondary text #9AA1BC, muted text #8288A6, paragraph #B0B3C4. Subdue #4C5067 is chrome, below every text floor.
+- Icon glyphs from Lucide in `icons.tsx` (MIT). The theme also sets icon colors (primary, secondary, disabled, accent).
+- onDark: `--color-on-dark` is repinned to spec Foreground `#F8F8F2` — the spec has **no pure white**, so a `#FFFFFF` here is off-palette. The pair is **deliberately asymmetric** and should not be "fixed" into symmetry: on-dark = spec Foreground `#F8F8F2`, on-light = spec black `#000000`. `--color-tint-hover` is **`#FFFFFF` and ruled correct — do not repaint.** It looks like a second pure white next to the line above, and it is not: core only ever reads it as a `color-mix` **partner** at 5–20% (`CheckboxInput.tsx:115-138`, `Slider.tsx:252`), never as a paint, and it is core's own dark value (`tokens.stylex.ts:81`, `light-dark(black, white)`). Retinting it to a Dracula grey would silently change every mix core builds and break the only thing it is for. `#FFFFFF` is not on-palette; the *token* is.
+- `--color-data-neutral`: `#8C939B`, **inherited from core** (core declares `light-dark(#8494A3, #8C939B)` in `core/src/theme/domainTokens/dataTokens.ts`) and off-palette — neither a Dracula hex nor on our gray ramp, whose L60 computes to `#8A8EA8`. It stays because it reads fine on dark. The "Stone" label in an earlier line here was never an Astryx brand name: `grep -ril stone node_modules/@astryxdesign/` hits only a separate `@astryxdesign/theme-stone` package, not this value. **Open question, deliberately not answered:** the value is off-palette and we could ship a gray ramp step instead — but it is core's own default, and diverging from core on a data role buys brand purity at the cost of surprising anyone who ports a core chart. That trade is the human's.
+- Tag accents: `--color-tag-<orange|pink|cyan|yellow|green|purple>`. The purple tag was **renamed from `blue`** — it always held `#BD93F9` (spec Purple) and never a blue. Dracula has no blue, so the value was right and the name was the lie. Historical trap for anyone who greps: `blue` is also the name of six *other* tokens that genuinely are Comment (`--color-background-blue`, `-border-`, `-icon-`, `-text-`, `--color-data-categorical-blue`, `--color-data-blue-1..5`), so a repo-wide find/replace on "blue" would silently repoint all six at Purple. A name that contradicts its own value is invisible to every contrast gate, which is why this needed a ruling rather than a threshold.
 - No color-scale config: HCT generation would fight the pinned hexes. No light mode, ever.
 
 ## Dims
 
-Gap 24px, viewport 16px, content 15px vertical / 16px horizontal, widget-gap 24px, tile-row 96px, radius 5px everywhere, JetBrains Mono, type scale base 14 ratio 1.2: h1 24 / h2 20 / h3 17 / h4 14 / body 14 / supporting 12 / h6 10. Outer Card padding 4, nested inset 3. Touch targets 24px floor, 44 where touch matters.
+Gap 24px, viewport 16px, content 15px vertical / 16px horizontal, widget-gap 24px, tile-row 96px, radius 5px everywhere, JetBrains Mono, type scale base 14 ratio 1.2, generated steps 12 / 14 / 17 / 20 / 24. The pinned heading tokens are compat dims, not a strict 1.2 ladder: h1 24 / h2 20 / h3 16 / h4 14 / h5 13 / h6 12, body 14, supporting 12. Astryx `Heading` sizes come from the scale roles instead, so level 3 renders the 17px `lg` step. Outer Card padding 4, nested inset 3. Touch targets 24px floor, 44 where touch matters.

package/README.md

@@ -10,13 +10,13 @@ Live showcase: https://yuzu-octopus.github.io/astryx-dracula/
 
 ## Features
 
-- 270+ tokens pinned to the official Dracula specification, dark-only
-- Spec-exact code syntax theme plus chart series and sequential ramps
-- Prebuilt CSS with zero runtime cost, or runtime injection for prototyping
+- Dracula tokens pinned in `astryx-theme.ts` (`grep -c "pin(" astryx-theme.ts` pins) (191 public props in the prebuilt `theme.css`, plus 3 private `--_*-radius` aliases; `tokens.css` is a full plain-CSS mirror, `grep -c "^  --" tokens.css` vars), dark-only. No gate asserts these counts — `bun run theme:check` asserts freshness, `bun run audit` asserts palette purity and contrast.
+- 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`
-- Vendored JetBrains Mono fonts and Lucide icons, zero theme dependencies
+- JetBrains Mono fonts and Lucide icons, one runtime dependency (`lucide-react`)
 - Agent skill, `llms.txt`, and copy-paste quickstart for AI-assisted adoption
-- 43 themed pages in `templates/`, published as an Astryx integration pack and viewable live at `/astryx-dracula/#/templates`
+- Around 45 themed pages in `templates/`, published as an Astryx integration pack and viewable live at `/astryx-dracula/#/templates`
 
 ## Installation
 
@@ -27,9 +27,12 @@ bun add astryx-dracula
 ## Usage
 
 ```tsx
+import '@astryxdesign/core/reset.css';
+import '@astryxdesign/core/astryx.css';
+import 'astryx-dracula/tokens.css';
+import 'astryx-dracula/theme.css';
 import { Theme } from '@astryxdesign/core/theme';
 import { astryxDraculaTheme } from 'astryx-dracula';
-import 'astryx-dracula/theme.css';
 
 <Theme theme={astryxDraculaTheme} mode="dark">
   <App />
@@ -39,18 +42,19 @@ import 'astryx-dracula/theme.css';
 Copy `fonts/` from the package into your served `public/fonts/` directory.
 
 > [!NOTE]
-> For the plain-CSS path, migrating an existing codebase, and the full token reference, see [USAGE.md](USAGE.md) and [BRAND.md](BRAND.md). AI agents should start with the skill in `.agents/skills/astryx-dracula/SKILL.md`.
+> For the plain-CSS path, migrating an existing codebase, and the full token reference, see [USAGE.md](USAGE.md) and [BRAND.md](BRAND.md). AI agents should start with the skill in `.agents/skills/astryx-dracula/SKILL.md` (agent index: [AGENTS.snippet.md](AGENTS.snippet.md)).
 
 ## Project layout
 
 ```text
 astryx-theme.ts   defineTheme source, single source of truth
 theme.css         prebuilt output of bun run theme:build
-tokens.css        plain-CSS :root fallback for any stack
-icons.tsx         vendored Lucide icon registry
+tokens.css        plain-CSS :root mirror for any stack
+icons.tsx         Lucide icon registry (runtime `lucide-react` dependency)
 fonts/            JetBrains Mono woff2 files
-templates/        43 themed pages plus integration specs
-scripts/check.ts  palette plus contrast gates
+templates/        around 45 themed pages plus integration specs
+shared/           reusable modules templates compose (23 files)
+scripts/check.ts  palette, contrast, and packaging gates
 demo/             showcase source, deployed to GitHub Pages
 ```
 
@@ -62,3 +66,10 @@ 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              |
+| `bunx react-doctor@latest` | Component health scan (currently 100/100) |
+
+## 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).
+- **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

@@ -14,7 +14,7 @@ Or clone `https://github.com/yuzu-octopus/astryx-dracula.git` and copy
 
 ## Prebuilt (recommended for Astryx apps)
 
-Zero runtime cost. Built with `bun run theme:build` from `astryx-theme.ts`.
+Prebuilt CSS plus runtime theme injection (the CSS carries the paint, the `<Theme>` object carries the tokens). Built with `bun run theme:build` from `astryx-theme.ts`.
 
 ```tsx
 import '@astryxdesign/core/reset.css';
@@ -62,7 +62,7 @@ import '../tokens.css';
 ```
 
 Then use `var(--color-primary)`, `var(--dracula-purple)`, `var(--space-gap)`.
-`tokens.css` sets real `:root` values with `color-scheme: dark`, so first paint is correct with no runtime.
+`tokens.css` sets real `:root` values with `color-scheme: dark`, so first paint is correct with no runtime. It is a full plain-CSS mirror of the theme (`grep -c "^  --" tokens.css` `:root` vars, unlayered by design so it beats core layers with zero `!important`); edit the theme, not this file, then re-mirror.
 
 ## Migrating an existing site
 
@@ -73,7 +73,7 @@ Then use `var(--color-primary)`, `var(--dracula-purple)`, `var(--space-gap)`.
 
 ## Templates
 
-43 themed pages ship in `templates/`, each with a `<id>.template.mjs` spec, published
+Around 45 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:
 
@@ -81,15 +81,17 @@ as an Astryx integration pack (`astryx.integration.mjs`). List this package in y
 bunx astryx template dashboard --package astryx-dracula
 ```
 
-View all 43 live at `/astryx-dracula/#/templates` on the showcase. Pack rules: templates
-import React plus `@astryxdesign/core` only.
+View them all live at `/astryx-dracula/#/templates` on the showcase (agent index: [AGENTS.snippet.md](AGENTS.snippet.md)). Pack rules: templates
+import `@astryxdesign/core`, `lucide-react`, and the kit's own shared modules (`astryx-dracula/shared/*`: auth-copy, auth-chrome-config, chaptered-doc, chaptered-doc-config, chart-hues, chart-labels, chart-panel-style, gallery-image, login-demo, metric-delta, revenue-chart, scene-castle, scene-hues, scene-tile, settings-data, settings-rows, sparkline, sso-icons), no chart libraries.
 
 ## Fonts
 
 Copy `fonts/` to your app's served static dir (Vite: `public/fonts/`).
 `tokens.css` declares the `@font-face` blocks; the theme sets JetBrains Mono
-for body, heading, and code roles. Without the files, text falls back to
-`monospace` — `bun run audit` fails when they are missing here.
+for body, heading, and code roles. The shipped URLs are base-scoped
+(`/astryx-dracula/fonts/*.woff2`, matching this repo's demo `base`) — apps
+served from `/` remap or self-host the files at that path, otherwise text
+falls back to `monospace`. `bun run audit` fails when the files are missing here. Only the package root `fonts/` ships them: a subpath import resolves nothing, so a fallback after copying means the copy step missed the expected path.
 
 ## Consumer Vite config
 
@@ -97,7 +99,9 @@ No special config needed. This kit follows the glimpse path: prebuilt
 `@astryxdesign/core` CSS plus `<Theme>` injection. A stock Vite React
 config works. The only recommended extra is the CSS layer-order snippet so
 theme overrides beat component base styles (our repo `vite.config.ts` also
-sets a demo-only `base` path; do not copy that):
+sets a demo-only `base` path; do not copy that). Tailwind projects keep their
+own setup and add the snippet as a plain `<style>` tag in `index.html` — the
+layer names are the contract, not the Vite plugin:
 
 ```ts
 // vite.config.ts
@@ -113,7 +117,7 @@ export default defineConfig({
           {
             tag: 'style',
             children:
-              '@layer reset, priority1, priority2, priority3, priority4, priority5, priority6, priority7, priority8, priority9, astryx-theme;',
+              '@layer reset, astryx-base, astryx-theme;',
             injectTo: 'head-prepend',
           },
         ];
@@ -132,7 +136,7 @@ README. Not required for this kit.
 
 - Unstyled components: entry is missing `reset.css`/`astryx.css` or the import order is wrong.
 - Monospace fallback: `fonts/` not copied to served `public/fonts/`.
-- Wrong colors after a theme edit: rebuild with `bun run theme:build`; `bun run theme:check` confirms staleness.
+- Wrong colors after a theme edit: rebuild with `bun run theme:build`; `bun run theme:check` confirms staleness (it ignores `astryx-dracula.js` by design — that file is a build artifact, not a freshness signal).
 - Old `:root` `--color-*` overrides winning: delete them.
 
 ## Rules
@@ -141,3 +145,18 @@ README. Not required for this kit.
 - Never override `--color-*` in app `:root`. Brand changes live in `astryx-theme.ts` via `defineTheme`, then `bun run theme:build`.
 - Tokens for every value: `var(--color-*|--space-*|--radius-*)`. No raw hex or px in components.
 - Component styling: props first, then theme `components` overrides in `astryx-theme.ts`. No per-app CSS wars.
+- A chart mark takes a `--color-data-*` role token, never a `--dracula-*` primitive. The `chart-hues` / `chart-legend` / `data-bar` types reject anything else at compile time.
+- `--dracula-comment` is legal on a **graphical** mark (3.36:1 clears WCAG 1.4.11) and illegal on **text** (fails 4.5:1). Any `fillOpacity` under 0.9 makes it worse. Text in a scene uses `--color-text-paragraph`.
+- A `Layout height="fill"` needs `style={{height: '100dvh'}}` or it silently degrades to document scroll. `minHeight: '100%'` computes to 0 against an indefinite parent, so it is a no-op.
+- Derive any count a page prints from its data. Hardcoded numerals are how `documentation.tsx` came to say "twenty-eight components" over 31 entries.
+- A `.tsx` exports components only; shared data lives in a sibling `.ts`, so React Fast Refresh works.
+
+## Release checklist
+
+Before tagging a release:
+
+1. Pin versions: `@astryxdesign/core` / `@astryxdesign/cli` in `package.json` match the showcase and CI.
+2. Nothing to refresh by hand: the version badges in `templates/product-tour.tsx` + `templates/centered-hero.tsx` (rendered text *and* XLE header) are gated against `package.json` by `bun run audit`, so bump the version and the audit tells you if you missed one.
+3. Rebuild and gate: `bun run theme:build`, then `bun run theme:check`, then `bun run audit`, then `bunx react-doctor@latest` (must stay 100/100).
+4. Counts in the docs are cited with the command that produces them, so there is nothing to refresh by hand. If you find a bare numeral, replace it with its command.
+5. `npm publish` runs the same four gates itself via `prepublishOnly`, so a tree that fails cannot reach the registry. There is no publish workflow in CI — publishing is deliberately a human step.

package/astryx-dracula.js

@@ -55,7 +55,7 @@ export const astryxDraculaTheme = {
     "--text-large-weight": "var(--font-weight-semibold)",
     "--text-large-leading": "1.4118",
     "--text-label-size": "var(--font-size-base)",
-    "--text-label-weight": "var(--font-weight-medium)",
+    "--text-label-weight": "var(--font-weight-semibold)",
     "--text-label-leading": "1.4286",
     "--text-code-size": "var(--font-size-base)",
     "--text-code-weight": "var(--font-weight-normal)",
@@ -92,16 +92,18 @@ export const astryxDraculaTheme = {
     "--color-syntax-type": "#8BE9FD",
     "--color-syntax-variable": "#F8F8F2",
     "--color-syntax-operator": "#FF79C6",
-    "--color-syntax-constant": "#FFB86C",
+    "--color-syntax-constant": "#BD93F9",
     "--color-syntax-tag": "#FF79C6",
-    "--color-syntax-attribute": "#F1FA8C",
-    "--color-syntax-property": "#8BE9FD",
+    "--color-syntax-attribute": "#50FA7B",
+    "--color-syntax-property": "#F8F8F2",
     "--color-syntax-punctuation": "#F8F8F2",
     "--color-syntax-background": "#282A36",
     "--radius-inner": "4px",
     "--radius-element": "5px",
     "--radius-container": "5px",
     "--radius-page": "5px",
+    "--radius-chat": "5px",
+    "--font-family-mono": "'JetBrains Mono', monospace",
     "--font-size-h1": "24px",
     "--font-size-h2": "20px",
     "--font-size-h3": "16px",
@@ -112,12 +114,17 @@ export const astryxDraculaTheme = {
     "--shadow-med": "0 2px 4px #191A210D, 0 4px 12px #191A211A",
     "--shadow-high": "0 4px 6px #191A211A, 0 12px 24px #191A2126",
     "--shadow-inset-hover": "inset 0px 0px 0px 2px #6272A430",
+    "--shadow-inset-selected": "inset 0px 0px 0px 2px #BD93F930",
     "--shadow-inset-success": "inset 0px 0px 0px 2px #50FA7B30",
     "--shadow-inset-warning": "inset 0px 0px 0px 2px #F1FA8C30",
     "--shadow-inset-error": "inset 0px 0px 0px 2px #FF555530",
     "--color-neutral": "light-dark(#F8F8F21A, #F8F8F21A)",
     "--color-background-inverted": "light-dark(#F8F8F2, #F8F8F2)",
     "--color-background-error-inverted": "light-dark(#FFD5CC, #FFD5CC)",
+    "--color-tint-hover": "light-dark(#FFFFFF, #FFFFFF)",
+    "--color-on-dark": "light-dark(#F8F8F2, #F8F8F2)",
+    "--color-on-light": "light-dark(#000000, #000000)",
+    "--color-shadow": "light-dark(#21222C, #21222C)",
     "--color-accent-muted": "var(--color-background-purple)",
     "--color-success-muted": "var(--color-background-green)",
     "--color-warning-muted": "var(--color-background-yellow)",
@@ -139,7 +146,7 @@ export const astryxDraculaTheme = {
     "--color-overlay-hover": "light-dark(#0000001F, #0000001F)",
     "--color-overlay-pressed": "light-dark(#00000033, #00000033)",
     "--color-border": "light-dark(#6272A4, #6272A4)",
-    "--color-border-emphasized": "light-dark(#6272A4, #6272A4)",
+    "--color-border-emphasized": "light-dark(#9AA1BC, #9AA1BC)",
     "--color-accent": "light-dark(#BD93F9, #BD93F9)",
     "--color-success": "light-dark(#50FA7B, #50FA7B)",
     "--color-error": "light-dark(#FF5555, #FF5555)",
@@ -158,6 +165,7 @@ export const astryxDraculaTheme = {
     "--color-on-warning": "light-dark(#21222C, #21222C)",
     "--color-on-error": "light-dark(#21222C, #21222C)",
     "--color-on-info": "light-dark(#21222C, #21222C)",
+    "--color-data-neutral": "light-dark(#8C939B, #8C939B)",
     "--color-track": "light-dark(#6272A4, #6272A4)",
     "--color-skeleton": "light-dark(#6272A4, #6272A4)",
     "--color-functional-red": "light-dark(#DE5735, #DE5735)",
@@ -167,13 +175,11 @@ export const astryxDraculaTheme = {
     "--color-functional-purple": "light-dark(#815CD6, #815CD6)",
     "--color-data-categorical-blue": "light-dark(#6272A4, #6272A4)",
     "--color-data-categorical-orange": "light-dark(#FFB86C, #FFB86C)",
-    "--color-data-categorical-purple": "light-dark(#BD93F9, #BD93F9)",
     "--color-data-categorical-green": "light-dark(#50FA7B, #50FA7B)",
     "--color-data-categorical-pink": "light-dark(#FF79C6, #FF79C6)",
     "--color-data-categorical-cyan": "light-dark(#8BE9FD, #8BE9FD)",
     "--color-data-categorical-red": "light-dark(#FF5555, #FF5555)",
     "--color-data-categorical-teal": "light-dark(#A4FFFF, #A4FFFF)",
-    "--color-data-categorical-brown": "light-dark(#FFB86C, #FFB86C)",
     "--color-data-categorical-indigo": "light-dark(#D6ACFF, #D6ACFF)",
     "--color-background-blue": "light-dark(#6272A41A, #6272A41A)",
     "--color-border-blue": "light-dark(#6272A44D, #6272A44D)",
@@ -240,11 +246,11 @@ export const astryxDraculaTheme = {
     "--color-data-yellow-3": "light-dark(hsl(64.91 91.67% 60%), hsl(64.91 91.67% 60%))",
     "--color-data-yellow-2": "light-dark(hsl(64.91 91.67% 74%), hsl(64.91 91.67% 74%))",
     "--color-data-yellow-1": "light-dark(hsl(64.91 91.67% 88%), hsl(64.91 91.67% 88%))",
-    "--color-data-teal-5": "light-dark(hsl(190.53 96.61% 28%), hsl(190.53 96.61% 28%))",
-    "--color-data-teal-4": "light-dark(hsl(190.53 96.61% 44%), hsl(190.53 96.61% 44%))",
-    "--color-data-teal-3": "light-dark(hsl(190.53 96.61% 60%), hsl(190.53 96.61% 60%))",
-    "--color-data-teal-2": "light-dark(hsl(190.53 96.61% 74%), hsl(190.53 96.61% 74%))",
-    "--color-data-teal-1": "light-dark(hsl(190.53 96.61% 88%), hsl(190.53 96.61% 88%))",
+    "--color-data-teal-5": "light-dark(hsl(180 100% 28%), hsl(180 100% 28%))",
+    "--color-data-teal-4": "light-dark(hsl(180 100% 44%), hsl(180 100% 44%))",
+    "--color-data-teal-3": "light-dark(hsl(180 100% 60%), hsl(180 100% 60%))",
+    "--color-data-teal-2": "light-dark(hsl(180 100% 74%), hsl(180 100% 74%))",
+    "--color-data-teal-1": "light-dark(hsl(180 100% 88%), hsl(180 100% 88%))",
     "--color-data-blue-5": "light-dark(hsl(225.45 26.61% 28%), hsl(225.45 26.61% 28%))",
     "--color-data-blue-4": "light-dark(hsl(225.45 26.61% 44%), hsl(225.45 26.61% 44%))",
     "--color-data-blue-3": "light-dark(hsl(225.45 26.61% 60%), hsl(225.45 26.61% 60%))",
@@ -287,7 +293,7 @@ export const astryxDraculaTheme = {
     "--color-tag-cyan": "light-dark(#8BE9FD, #8BE9FD)",
     "--color-tag-yellow": "light-dark(#F1FA8C, #F1FA8C)",
     "--color-tag-green": "light-dark(#50FA7B, #50FA7B)",
-    "--color-tag-blue": "light-dark(#BD93F9, #BD93F9)"
+    "--color-tag-purple": "light-dark(#BD93F9, #BD93F9)"
   },
   icons: draculaIconRegistry,
 };

package/astryx-dracula.variants.d.ts

@@ -9,11 +9,26 @@
 // Generated by astryx theme build
 export {};
 
+declare module '@astryxdesign/core/StatusDot' {
+  interface StatusDotVariantMap {
+    'info': true;
+  }
+}
+
 declare module '@astryxdesign/core/ProgressBar' {
   interface ProgressBarVariantMap {
     'accent': true;
     'success': true;
     'warning': true;
     'error': true;
+    'neutral': true;
+    'disabled': true;
+  }
+}
+
+declare module '@astryxdesign/core/Avatar' {
+  interface AvatarStatusDotVariantMap {
+    'success': true;
+    'error': true;
   }
 }

package/package.json

@@ -1,68 +1,110 @@
 {
+  "author": "Yuzu Octopus",
+  "bugs": {
+    "url": "https://github.com/yuzu-octopus/astryx-dracula/issues"
+  },
   "dependencies": {
-    "@astryxdesign/core": "^0.3.0",
-    "@stylexjs/stylex": "^0.19.0",
-    "lucide-react": "^1.33.0",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "lucide-react": "^1.45.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.3.0",
-    "@types/bun": "^1.4.1",
-    "@types/node": "^26.4.1",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
-    "@vitejs/plugin-react": "^6.1.0",
+    "@types/bun": "^1.4.2",
+    "@types/node": "^26.5.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.1",
     "typescript": "^7.0.2",
-    "vite": "^8.0.0"
+    "vite": "^8.3.0"
   },
   "exports": {
+    "./shared/auth-chrome": "./shared/auth-chrome.tsx",
+    "./shared/auth-chrome-config": "./shared/auth-chrome-config.ts",
+    "./shared/auth-copy": "./shared/auth-copy.ts",
+    "./shared/chaptered-doc": "./shared/chaptered-doc.tsx",
+    "./shared/chaptered-doc-config": "./shared/chaptered-doc-config.ts",
+    "./shared/chart-hues": "./shared/chart-hues.ts",
+    "./shared/chart-labels": "./shared/chart-labels.tsx",
+    "./shared/chart-legend": "./shared/chart-legend.tsx",
+    "./shared/chart-panel-style": "./shared/chart-panel-style.ts",
+    "./shared/data-bar": "./shared/data-bar.tsx",
+    "./shared/gallery-image": "./shared/gallery-image.ts",
+    "./shared/login-demo": "./shared/login-demo.ts",
+    "./shared/metric-delta": "./shared/metric-delta.tsx",
+    "./shared/order-desk": "./shared/order-desk.tsx",
+    "./shared/revenue-chart": "./shared/revenue-chart.tsx",
+    "./shared/scene-castle": "./shared/scene-castle.tsx",
+    "./shared/scene-frame": "./shared/scene-frame.tsx",
+    "./shared/scene-hues": "./shared/scene-hues.ts",
+    "./shared/scene-tile": "./shared/scene-tile.tsx",
+    "./shared/settings-data": "./shared/settings-data.ts",
+    "./shared/settings-rows": "./shared/settings-rows.tsx",
+    "./shared/sparkline": "./shared/sparkline.tsx",
+    "./shared/sso-icons": "./shared/sso-icons.tsx",
     ".": {
       "default": "./astryx-dracula.js",
       "types": "./astryx-dracula.d.ts"
     },
-    "./built": {
-      "default": "./astryx-dracula.js",
-      "types": "./astryx-dracula.d.ts"
-    },
+    "./astryx.integration.mjs": "./astryx.integration.mjs",
     "./package.json": "./package.json",
+    "./templates/*": "./templates/*",
     "./theme.css": "./theme.css",
     "./tokens.css": "./tokens.css"
   },
   "files": [
     "BRAND.md",
     "LICENSE",
+    "README.md",
     "USAGE.md",
     "astryx-dracula.d.ts",
     "astryx-dracula.js",
     "astryx-dracula.variants.d.ts",
     "fonts/",
     "icons.tsx",
+    "shared/",
     "theme.css",
     "tokens.css",
     "templates/",
     "astryx.integration.mjs"
   ],
+  "keywords": [
+    "astryx",
+    "dracula",
+    "dracula-theme",
+    "theme",
+    "design-system",
+    "dark-theme",
+    "react",
+    "tokens"
+  ],
   "license": "MIT",
   "name": "astryx-dracula",
   "peerDependencies": {
     "@astryxdesign/core": "^0.3.0",
+    "lucide-react": "^1.45.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yuzu-octopus/astryx-dracula.git"
+  },
   "scripts": {
     "audit": "bun scripts/check.ts",
     "build": "tsc --noEmit && vite build",
     "dev": "vite",
     "preview": "vite preview",
     "theme:build": "bunx astryx theme build astryx-theme.ts -o theme.css",
-    "theme:check": "bunx astryx theme build astryx-theme.ts -o theme.css --check"
+    "theme:check": "bunx astryx theme build astryx-theme.ts -o theme.css --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.filter(s => s.path !== \"astryx-dracula.js\"); 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\");'",
+    "prepublishOnly": "bun run theme:check && bun run audit && tsc --noEmit && bunx react-doctor@latest --score"
   },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "trustedDependencies": [
     "@astryxdesign/core",
     "@astryxdesign/cli"
   ],
   "type": "module",
-  "version": "0.2.0"
+  "version": "0.3.0"
 }

package/shared/auth-chrome-config.ts

@@ -0,0 +1,18 @@
+// Auth page chrome, split from the component that renders it, for the same
+// reason as shared/scene-hues.ts: a .tsx exporting non-components breaks React
+// Fast Refresh. Five templates import these, so they are genuinely shared --
+// they were only ever co-located by accident of history.
+import type {CSSProperties} from 'react';
+
+// Standalone auth pages paint their own body background (no host shell).
+export const authPageStyle: CSSProperties = {
+  minHeight: '100%',
+  backgroundColor: 'var(--color-background-body)',
+  padding: 'var(--spacing-6)',
+};
+// 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

@@ -0,0 +1,25 @@
+// Shared login chrome: page wash + 400px column + Moon brand row + the
+// autocomplete widen-record TextInput needs (prop type omits input attrs).
+import type {CSSProperties} from 'react';
+import {Moon} from 'lucide-react';
+import {VStack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+import {Icon} from '@astryxdesign/core/Icon';
+import {AUTH_BRAND_NAME} from 'astryx-dracula/shared/auth-copy';
+import {
+  authContentStyle,
+  authPageStyle,
+  inputAutoComplete,
+} from 'astryx-dracula/shared/auth-chrome-config';
+
+
+export function LoginBrand() {
+  return (
+    <VStack gap={2} hAlign="center">
+      <Icon icon={Moon} size="lg" color="secondary" />
+      <Text type="body" weight="semibold" size="lg">
+        {AUTH_BRAND_NAME}
+      </Text>
+    </VStack>
+  );
+}

package/shared/auth-copy.ts

@@ -0,0 +1,22 @@
+// Auth copy shared by the four login templates. Single-sourced so the family
+// line cannot drift again. SSO-specific strings (Work email, Whisper your
+// details, Continue with SSO, provider names) stay per-template in login-sso.
+export const AUTH_HEADING = 'Welcome back to the night';
+export const AUTH_SUBTITLE = 'Sign in to your crypt';
+export const AUTH_PRIMARY_CTA = 'Sign in';
+export const AUTH_SIGNUP_PROMPT = 'New to the castle?';
+export const AUTH_SIGNUP_LINK = 'Sign up';
+export const AUTH_SSO_DIVIDER = 'Or continue with';
+export const AUTH_FORGOT_PASSWORD = 'Forgot password?';
+// Names the problem without apologising, and does not blame one field: a
+// mistyped email used to be reported as a wrong password, because this string
+// was attached to the password input only.
+export const AUTH_ERROR_MESSAGE = 'Email or password is wrong. Try again.';
+export const AUTH_EMAIL_PLACEHOLDER = 'you@castle.dracula';
+// The placeholder is the only visible name on the credential inputs, so it has
+// to actually name the field. "Whisper your password" named nothing.
+export const AUTH_PASSWORD_PLACEHOLDER = 'Your password';
+export const AUTH_BRAND_NAME = 'Castle Dracula';
+export const AUTH_TERMS_PREFIX = 'By clicking continue, you agree to our';
+export const AUTH_TERMS_SERVICE = 'Terms of service';
+export const AUTH_TERMS_PRIVACY = 'Privacy policy';