astryx-dracula 0.5.1 → 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.
@@ -37,7 +87,7 @@ Source of truth is `astryx-theme.ts`. Do not add hexes; `bun run audit` enforces
 
 ## 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.
+`--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). Its live 0.7.2 consumers are form controls and content chrome — `Field`/`FileInput`/`NumberInput`/`InputGroupText`/`Kbd` borders, `Divider variant="strong"`, `Blockquote`'s rule, `HoverCard`'s dashed underline, `Tooltip`'s dashed underline, the checkbox/radio `Indicator`, `Calendar`'s today ring, `TreeList`'s branch lines, `ResizeHandle` and `Selector`'s focus restore. (`DropdownMenuRadioItem` read it in 0.6.3 and no longer does.) The popover tier is still a real adjacent tier for the popover surface itself. Known shortfall: the inverted surface at 2.40, which has no live consumer — recorded, not certified.
 
 ## Charts
 
@@ -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
 
@@ -79,8 +130,8 @@ Radii flat and crisp (5px elements, 4px inner). Everything below is a core defau
 - 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.
+- 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% (`Indicator/CheckboxIndicator.tsx:48,54,65,71`, `Indicator/RadioIndicator.tsx:48,54,62,68`, `Slider.tsx:290`, `Link.tsx:112,120,134`, `Switch.tsx:291,302`), never as a paint, and it is core's own dark value (`tokens.stylex.ts:83`, `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`, **pinned by this theme** — since core 0.7.0 the canonical data-colour defaults live in core's `dataVars` group and a concrete theme emits only what it authors, so this value is ours to own rather than core's — 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.
 

package/README.md

@@ -10,13 +10,15 @@ Live showcase: https://yuzu-octopus.github.io/astryx-dracula/
 
 ## Features
 
-- 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.
+- 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,9 +54,9 @@ 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 plus integration specs
+templates/        48 themed pages, each with an XLE structure header
 shared/           reusable modules templates compose (23 files)
-scripts/check.ts  palette, contrast, and packaging gates
+scripts/check.ts  palette, contrast, packaging, and XLE-header gates
 demo/             showcase source, deployed to GitHub Pages
 ```
 
@@ -62,14 +64,22 @@ demo/             showcase source, deployed to GitHub Pages
 
 | Command              | Purpose                                    |
 | -------------------- | ------------------------------------------ |
-| `bun run audit`      | Palette plus contrast gates, fails on drift |
+| `bun run audit`      | Palette, contrast, packaging and XLE gates   |
 | `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              |
+| `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 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

@@ -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. 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.
+`tokens.css` sets real `:root` values with `color-scheme: dark`, so first paint is correct with no runtime. It mirrors the theme's colour, spacing, radius, type and motion tokens as plain `:root` custom properties (`grep -c "^\s*--" tokens.css` 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,12 +73,12 @@ 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:
 
 ```bash
-bunx astryx template dashboard --package astryx-dracula
+bunx @astryxdesign/cli template dashboard --package astryx-dracula ./src/pages/dashboard.tsx
 ```
 
 View them all live at `/astryx-dracula/#/templates` on the showcase (agent index: [AGENTS.snippet.md](AGENTS.snippet.md)). Pack rules: templates
@@ -97,36 +97,22 @@ falls back to `monospace`. `bun run audit` fails when the files are missing here
 
 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). 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
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-
-export default defineConfig({
-  plugins: [
-    {
-      name: 'astryx-css-layer-order',
-      transformIndexHtml() {
-        return [
-          {
-            tag: 'style',
-            children:
-              '@layer reset, astryx-base, astryx-theme;',
-            injectTo: 'head-prepend',
-          },
-        ];
-      },
-    },
-    react(),
-  ],
-});
-```
+config works.
+
+**The CSS layer order is now declared by the packages themselves.** As of
+core 0.7.x, `reset.css`, `astryx.css` and this kit's `theme.css` each open
+with `@layer reset, astryx-base, astryx-theme;`, so theme overrides beat
+component base styles no matter which order you import them in. The
+layer-order snippet this kit used to recommend is therefore redundant: a
+repeated `@layer` statement is a no-op once the order is established, and
+whichever file lands first establishes the same order. Keep it only if you
+load a DIFFERENT layer name set, and never rename the three layers — the
+names are the contract.
+
+This kit's own `tokens.css` is deliberately **unlayered**, so it beats every
+core layer with no `!important`. That is why the demo still injects the
+layer-order statement: it costs nothing and documents the contract in the
+one file a reader opens first.
 
 Advanced: custom `astryx theme build` pipelines need the full StyleX
 source-compile setup. See the `/facebook/astryx` `apps/example-vite`
@@ -139,26 +125,20 @@ README. Not required for this kit.
 - 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.
 
-## Known upstream defects in `@astryxdesign/core@0.6.3`
+## Upstream defects in `@astryxdesign/core` — resolved
 
-This kit carries local patches for three defects in core, committed under `patches/` and wired through
-`patchedDependencies`. **Read this before assuming the patches reach you: they do not.** Bun and npm
-honour `patchedDependencies` only from the *root* project of an install. The patches apply when you
-clone or work in this repository; they do **not** propagate to a downstream app that installs
-`astryx-dracula` from npm, because core resolves through your own dependency tree. If you hit one of
-these in your own app, the fix is yours to carry.
+This kit used to carry local patches for three core defects, under `patches/` and wired through
+`patchedDependencies`. **All three were fixed upstream in `@astryxdesign/core@0.7.2`**, so the
+patch directory and the `patchedDependencies` entry are gone. Nothing to carry downstream any more.
 
-| Defect | Symptom | Workaround |
-|---|---|---|
-| `ChatToolCalls` discards its `label` prop | The `label` prop is typed and documented ("Auto-generated from count if omitted") but the expanded group header always renders `"{count} tool calls"`. The prop is destructured away, so it cannot reach the DOM either. | Render your own header above the component, or wrap it. The internal header markup is not exported. |
-| `ToggleButton` drops `className` | A `className` passed to `ToggleButton` never reaches the DOM, even though `BaseProps` documents that it is kept. A sweep of all of core's `dist` found this to be the only component doing it, so it reads as an oversight rather than policy. | Style via `style` or `xstyle`, both of which do forward. Or use `Button` with `aria-pressed`, which honours `className`. |
-| `ChatToolCalls` `defaultIsExpanded` JSDoc is wrong | The type comment claims "true for ≤3 calls, false for >3". The implementation is an unconditional `?? false`. The behaviour is the JSDoc that is wrong, so no action is needed. | None. Documented so nobody codes against the comment. |
+| Defect (core 0.6.3) | Status in 0.7.2 |
+|---|---|
+| `ChatToolCalls` discarded its `label` prop — the prop was destructured to `_customLabel` and never read, so the expanded group header always rendered `"{count} tool calls"`. | Fixed. The prop is destructured to `customLabel` and the header renders `customLabel ?? t('@astryx.chatToolCalls.groupLabel', …)`. |
+| `ToggleButton` dropped `className` — destructured to `_className` and discarded, so it never reached the DOM. | Fixed. `className` is now merged into the inner `Button` via `mergeProps(themeProps(…), className)`. |
+| `ChatToolCalls` `defaultIsExpanded` JSDoc claimed "true for ≤3 calls, false for >3" while the implementation was an unconditional `?? false`. | Fixed. The doc comment now reads `@default false`, which matches the code. |
 
-If you want the patches, copy `patches/@astryxdesign%2Fcore@0.6.3.patch` from the repository into
-your own root `package.json` under `patchedDependencies`. They are version-locked to `0.6.3`, so
-upgrading core makes them stop applying rather than silently mis-apply — which is the intended
-signal to delete them. Each hunk carries a comment naming the defect, so they are easy to drop once
-upstream ships a fix.
+Because these were the only defects we ever patched, this repository now installs a stock
+`@astryxdesign/core` with no `patchedDependencies` at all.
 
 ## Rules
 
@@ -186,3 +166,23 @@ Before tagging a release:
 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.
+
+### The toolchain
+
+One tool per job, so nothing formats the same bytes twice:
+
+- **`bun`** installs, runs scripts, typechecks (`bun check`) and formats (`bun fmt`). The format style
+  lives in `bunfig.toml` — tabs, 100 columns, semicolons, double quotes.
+- **Biome** still runs, but as the **linter** only (`bun run lint`); its formatter is off in
+  `biome.json`. The lint rules are the part worth keeping: unused imports, non-null assertions,
+  `!important`, import organisation.
+- **Markdown is not formatted by either tool.** `bun fmt` restructures markdown — emphasis marks,
+  list spacing, blockquote reflow — which is churn prose never had, so the `fmt` scripts name the
+  code extensions explicitly.
+- **The generated outputs are never formatted.** `theme.css`, `astryx-dracula.js`, the `.d.ts`
+  files and `icons.mjs` are build products, compared byte-for-byte against a fresh build by
+  `theme:check` and `icons:check`. A formatter that touches them breaks the freshness gate, so
+  they are listed in `.gitignore` (they stay tracked, and npm's `files` array still ships them).
+- **`bun build` needs `NODE_ENV=production`.** Bun 1.4.4 defaults the bundler to the
+  *development* JSX runtime, so an unbundled build emitted `jsxDEV` and would have shipped
+  React's dev build inside the package. `icons:build` sets it.

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.6.3
- * Core: @astryxdesign/core@0.6.3
+ * 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.6.3
- * Core: @astryxdesign/core@0.6.3
+ * 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",
@@ -98,6 +110,11 @@ export const astryxDraculaTheme = {
     "--color-syntax-property": "#F8F8F2",
     "--color-syntax-punctuation": "#F8F8F2",
     "--color-syntax-background": "#282A36",
+    "--color-syntax-added": "#50FA7B26",
+    "--color-syntax-removed": "#FF555526",
+    "--color-syntax-diff-header": "#44475A",
+    "--color-syntax-added-marker": "#50FA7B",
+    "--color-syntax-removed-marker": "#FF5555",
     "--radius-inner": "4px",
     "--radius-element": "5px",
     "--radius-container": "5px",
@@ -141,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)",
@@ -156,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)",
@@ -452,12 +477,12 @@ export const astryxDraculaTheme = {
         "borderColor": "var(--color-error)"
       }
     },
-    "statusdot": {
+    "status-dot": {
       "variant:info": {
         "backgroundColor": "#8BE9FD"
       }
     },
-    "progressbar-fill": {
+    "progress-bar-fill": {
       "variant:accent": {
         "backgroundColor": "#BD93F9"
       },
@@ -488,7 +513,7 @@ export const astryxDraculaTheme = {
         "--color-error": "#FF5555"
       }
     },
-    "textarea": {
+    "text-area": {
       "status:success": {
         "--color-success": "#50FA7B"
       },
@@ -541,6 +566,9 @@ export const astryxDraculaTheme = {
       },
       "status:error": {
         "--color-error": "#FF5555"
+      },
+      "variant:secondary": {
+        "fontWeight": "var(--font-weight-normal)"
       }
     },
     "multi-selector": {
@@ -552,6 +580,9 @@ export const astryxDraculaTheme = {
       },
       "status:error": {
         "--color-error": "#FF5555"
+      },
+      "variant:secondary": {
+        "fontWeight": "var(--font-weight-normal)"
       }
     },
     "typeahead": {
@@ -609,7 +640,12 @@ export const astryxDraculaTheme = {
         "boxShadow": "var(--shadow-low)"
       }
     },
-    "hovercard": {
+    "hover-card": {
+      "base": {
+        "backgroundColor": "var(--color-background-popover)"
+      }
+    },
+    "drawer": {
       "base": {
         "backgroundColor": "var(--color-background-popover)"
       }
@@ -634,9 +670,9 @@ export const astryxDraculaTheme = {
   __onLight: {
     "tokens": {
       "color-scheme": "light",
-      "--color-text-primary": "var(--color-on-light)",
-      "--color-icon-primary": "var(--color-on-light)",
-      "--color-accent": "var(--color-on-light)"
+      "--color-text-primary": "light-dark(#F8F8F2, #F8F8F2)",
+      "--color-icon-primary": "light-dark(#F8F8F2, #F8F8F2)",
+      "--color-accent": "light-dark(#BD93F9, #BD93F9)"
     }
   },
   __adaptations: {
@@ -673,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.6.3
- * Core: @astryxdesign/core@0.6.3
+ * CLI: @astryxdesign/cli@0.7.10
+ * Core: @astryxdesign/core@0.7.10
  */
 
 // Generated by astryx theme build

package/icons.mjs

@@ -25,6 +25,7 @@ import {
   MoreHorizontal,
   Search,
   Square,
+  Upload,
   Wrench,
   X,
   XCircle
@@ -86,6 +87,9 @@ var draculaIconRegistry = {
   search: /* @__PURE__ */ jsx(Search, {
     ...iconProps
   }),
+  upload: /* @__PURE__ */ jsx(Upload, {
+    ...iconProps
+  }),
   arrowUp: /* @__PURE__ */ jsx(ArrowUp, {
     ...iconProps
   }),

package/icons.tsx

@@ -33,10 +33,17 @@ import {
 	MoreHorizontal,
 	Search,
 	Square,
+	Upload,
 	Wrench,
 	X,
 	XCircle,
 } from "lucide-react";
+// The Astryx theme loader evaluates this file to read the icon registry, and
+// it evaluates JSX with the CLASSIC runtime, so React has to be in scope
+// here even though the app's own bundler uses the automatic one. Without it,
+// `astryx theme build` fails with "React is not defined" — so this import is
+// load-bearing and must not be removed as "unused".
+// biome-ignore lint/correctness/noUnusedImports: the theme loader needs React in scope for the classic JSX runtime
 import React from "react";
 
 const iconProps = {
@@ -62,6 +69,7 @@ export const draculaIconRegistry: IconRegistry = {
 	menu: <Menu {...iconProps} />,
 	moreHorizontal: <MoreHorizontal {...iconProps} />,
 	search: <Search {...iconProps} />,
+	upload: <Upload {...iconProps} />,
 	arrowUp: <ArrowUp {...iconProps} />,
 	arrowDown: <ArrowDown {...iconProps} />,
 	arrowsUpDown: <ArrowUpDown {...iconProps} />,

package/package.json

@@ -4,19 +4,20 @@
 		"url": "https://github.com/yuzu-octopus/astryx-dracula/issues"
 	},
 	"dependencies": {
-		"lucide-react": "^1.53.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.6.3",
-		"@astryxdesign/core": "0.6.3",
-		"@types/bun": "^1.4.2",
-		"@types/node": "^26.6.4",
+		"@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.3"
+		"vite": "8.3.6"
 	},
 	"exports": {
 		"./shared/auth-chrome": "./shared/auth-chrome.tsx",
@@ -52,7 +53,10 @@
 		"./astryx.integration.mjs": "./astryx.integration.mjs",
 		"./package.json": "./package.json",
 		"./templates/*": "./templates/*",
-		"./theme.css": "./theme.css",
+		"./theme.css": {
+			"types": "./theme.css.d.ts",
+			"default": "./theme.css"
+		},
 		"./tokens.css": "./tokens.css"
 	},
 	"files": [
@@ -67,6 +71,7 @@
 		"icons.mjs",
 		"icons.tsx",
 		"shared/",
+		"theme.css.d.ts",
 		"theme.css",
 		"tokens.css",
 		"templates/",
@@ -85,7 +90,7 @@
 	"license": "MIT",
 	"name": "astryx-dracula",
 	"peerDependencies": {
-		"@astryxdesign/core": "^0.6.3",
+		"@astryxdesign/core": "^0.7.2",
 		"lucide-react": "^1.45.0",
 		"react": ">=19.0.0",
 		"react-dom": ">=19.0.0"
@@ -97,15 +102,18 @@
 	"scripts": {
 		"audit": "bun run fonts:sync && bun scripts/check.ts",
 		"fonts:sync": "mkdir -p public/fonts && cp fonts/*.woff2 public/fonts/",
-		"build": "tsc --noEmit && vite build",
+		"build": "bun check && vite build",
 		"dev": "vite",
 		"preview": "vite preview",
 		"theme:build": "bun run icons:build && bunx astryx theme build astryx-theme.ts -o theme.css --icons-specifier ./icons.mjs",
-		"icons:build": "bun build icons.tsx --outfile icons.mjs --format esm --external react --external lucide-react",
-		"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.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\");' && bun run entry:check",
-		"icons:check": "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; }",
+		"icons:build": "NODE_ENV=production bun build icons.tsx --outfile icons.mjs --format esm --external react --external lucide-react",
+		"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 && tsc --noEmit && 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 check"
 	},
 	"sideEffects": [
 		"**/*.css"
@@ -115,8 +123,5 @@
 		"@astryxdesign/cli"
 	],
 	"type": "module",
-	"version": "0.5.1",
-	"patchedDependencies": {
-		"@astryxdesign/core@0.6.3": "patches/@astryxdesign%2Fcore@0.6.3.patch"
-	}
+	"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>;