astryx-dracula 0.5.0 → 0.6.2

package/BRAND.md

@@ -37,7 +37,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
 
@@ -79,8 +79,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,7 +10,7 @@ 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.
 - 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`
@@ -52,9 +52,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/        around 45 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,10 +62,13 @@ 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, lint only — the formatter is `bun fmt` |
 | `bunx react-doctor@latest` | Component health scan (currently 100/100) |
 
 ## Attribution & 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
 
@@ -78,7 +78,7 @@ as an Astryx integration pack (`astryx.integration.mjs`). List this package in y
 `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.2
+ * Core: @astryxdesign/core@0.7.2
  */
 
 /// <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.2
+ * Core: @astryxdesign/core@0.7.2
  */
 
 import { draculaIconRegistry } from "./icons.mjs";
@@ -98,6 +98,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",
@@ -452,12 +457,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 +493,7 @@ export const astryxDraculaTheme = {
         "--color-error": "#FF5555"
       }
     },
-    "textarea": {
+    "text-area": {
       "status:success": {
         "--color-success": "#50FA7B"
       },
@@ -541,6 +546,9 @@ export const astryxDraculaTheme = {
       },
       "status:error": {
         "--color-error": "#FF5555"
+      },
+      "variant:secondary": {
+        "fontWeight": "var(--font-weight-normal)"
       }
     },
     "multi-selector": {
@@ -552,6 +560,9 @@ export const astryxDraculaTheme = {
       },
       "status:error": {
         "--color-error": "#FF5555"
+      },
+      "variant:secondary": {
+        "fontWeight": "var(--font-weight-normal)"
       }
     },
     "typeahead": {
@@ -609,7 +620,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 +650,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: {

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.2
+ * Core: @astryxdesign/core@0.7.2
  */
 
 // Generated by astryx theme build

package/astryx.integration.mjs

@@ -1,3 +1,3 @@
 export default {
-  templates: './templates',
+	templates: "./templates",
 };

package/icons.mjs

@@ -1,33 +1,34 @@
 // icons.tsx
 import {
-  X,
+  AlertTriangle,
+  ArrowDown,
+  ArrowUp,
+  ArrowUpDown,
+  Calendar,
+  Check,
+  CheckCheck,
+  CheckCircle,
   ChevronDown,
   ChevronLeft,
   ChevronRight,
   ChevronsLeft,
   ChevronsRight,
-  Check,
-  CheckCircle,
-  XCircle,
-  AlertTriangle,
-  Info,
-  Calendar,
   Clock,
+  Columns,
+  Copy,
   ExternalLink,
+  EyeOff,
+  Filter,
+  Info,
   Menu,
+  Mic,
   MoreHorizontal,
   Search,
-  ArrowUp,
-  ArrowDown,
-  ArrowUpDown,
-  Filter,
-  EyeOff,
-  Columns,
-  Copy,
-  CheckCheck,
-  Wrench,
   Square,
-  Mic
+  Upload,
+  Wrench,
+  X,
+  XCircle
 } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 var iconProps = {
@@ -86,6 +87,9 @@ var draculaIconRegistry = {
   search: /* @__PURE__ */ jsx(Search, {
     ...iconProps
   }),
+  upload: /* @__PURE__ */ jsx(Upload, {
+    ...iconProps
+  }),
   arrowUp: /* @__PURE__ */ jsx(ArrowUp, {
     ...iconProps
   }),

package/icons.tsx

@@ -6,72 +6,79 @@
  * icon components bundled with the theme, not with @astryxdesign/core.
  */
 
-import React from 'react';
-import type {IconRegistry} from '@astryxdesign/core/Icon';
-
+import type { IconRegistry } from "@astryxdesign/core/Icon";
 import {
-  X,
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  ChevronsLeft,
-  ChevronsRight,
-  Check,
-  CheckCircle,
-  XCircle,
-  AlertTriangle,
-  Info,
-  Calendar,
-  Clock,
-  ExternalLink,
-  Menu,
-  MoreHorizontal,
-  Search,
-  ArrowUp,
-  ArrowDown,
-  ArrowUpDown,
-  Filter,
-  EyeOff,
-  Columns,
-  Copy,
-  CheckCheck,
-  Wrench,
-  Square,
-  Mic,
-} from 'lucide-react';
+	AlertTriangle,
+	ArrowDown,
+	ArrowUp,
+	ArrowUpDown,
+	Calendar,
+	Check,
+	CheckCheck,
+	CheckCircle,
+	ChevronDown,
+	ChevronLeft,
+	ChevronRight,
+	ChevronsLeft,
+	ChevronsRight,
+	Clock,
+	Columns,
+	Copy,
+	ExternalLink,
+	EyeOff,
+	Filter,
+	Info,
+	Menu,
+	Mic,
+	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 = {
-  size: '1em',
-  'aria-hidden': true as const,
+	size: "1em",
+	"aria-hidden": true as const,
 };
 
 export const draculaIconRegistry: IconRegistry = {
-  close: <X {...iconProps} />,
-  chevronDown: <ChevronDown {...iconProps} />,
-  chevronLeft: <ChevronLeft {...iconProps} />,
-  chevronRight: <ChevronRight {...iconProps} />,
-  chevronsLeft: <ChevronsLeft {...iconProps} />,
-  chevronsRight: <ChevronsRight {...iconProps} />,
-  check: <Check {...iconProps} />,
-  success: <CheckCircle {...iconProps} />,
-  error: <XCircle {...iconProps} />,
-  warning: <AlertTriangle {...iconProps} />,
-  info: <Info {...iconProps} />,
-  calendar: <Calendar {...iconProps} />,
-  clock: <Clock {...iconProps} />,
-  externalLink: <ExternalLink {...iconProps} />,
-  menu: <Menu {...iconProps} />,
-  moreHorizontal: <MoreHorizontal {...iconProps} />,
-  search: <Search {...iconProps} />,
-  arrowUp: <ArrowUp {...iconProps} />,
-  arrowDown: <ArrowDown {...iconProps} />,
-  arrowsUpDown: <ArrowUpDown {...iconProps} />,
-  funnel: <Filter {...iconProps} />,
-  eyeSlash: <EyeOff {...iconProps} />,
-  viewColumns: <Columns {...iconProps} />,
-  copy: <Copy {...iconProps} />,
-  checkDouble: <CheckCheck {...iconProps} />,
-  wrench: <Wrench {...iconProps} />,
-  stop: <Square {...iconProps} />,
-  microphone: <Mic {...iconProps} />,
+	close: <X {...iconProps} />,
+	chevronDown: <ChevronDown {...iconProps} />,
+	chevronLeft: <ChevronLeft {...iconProps} />,
+	chevronRight: <ChevronRight {...iconProps} />,
+	chevronsLeft: <ChevronsLeft {...iconProps} />,
+	chevronsRight: <ChevronsRight {...iconProps} />,
+	check: <Check {...iconProps} />,
+	success: <CheckCircle {...iconProps} />,
+	error: <XCircle {...iconProps} />,
+	warning: <AlertTriangle {...iconProps} />,
+	info: <Info {...iconProps} />,
+	calendar: <Calendar {...iconProps} />,
+	clock: <Clock {...iconProps} />,
+	externalLink: <ExternalLink {...iconProps} />,
+	menu: <Menu {...iconProps} />,
+	moreHorizontal: <MoreHorizontal {...iconProps} />,
+	search: <Search {...iconProps} />,
+	upload: <Upload {...iconProps} />,
+	arrowUp: <ArrowUp {...iconProps} />,
+	arrowDown: <ArrowDown {...iconProps} />,
+	arrowsUpDown: <ArrowUpDown {...iconProps} />,
+	funnel: <Filter {...iconProps} />,
+	eyeSlash: <EyeOff {...iconProps} />,
+	viewColumns: <Columns {...iconProps} />,
+	copy: <Copy {...iconProps} />,
+	checkDouble: <CheckCheck {...iconProps} />,
+	wrench: <Wrench {...iconProps} />,
+	stop: <Square {...iconProps} />,
+	microphone: <Mic {...iconProps} />,
 };