astryx-dracula 0.3.0 → 0.4.0

package/USAGE.md

@@ -139,17 +139,43 @@ 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`
+
+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.
+
+| 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. |
+
+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.
+
 ## Rules
 
 - Never invent hexes. New color need goes through `astryx-theme.ts` + audit, not a one-off.
 - 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.
+- 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, and `bun run audit` tree-walks the chart modules. Values are byte-identical to the primitives, so this is vocabulary, not appearance. Scene ART is exempt and deliberately so: `SCENE_HUES` is a separate remit where purple is banned as a series identity but legitimate as pigment.
 - `--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.
+- **Do not add your own Tooltip override.** Core's `useTooltip` paints `background-color: var(--color-text-primary)` with `color: var(--color-background-surface)` — an inversion that only reads correctly on a light theme, and on dark it is a near-white box with light-grey text. This theme already overrides it (`components.tooltip.base` in `astryx-theme.ts`, shipping as `.astryx-tooltip` in `theme.css`) onto the popover tier with `--shadow-low`, at 9.06:1. Core renders the Tooltip internally, so this reaches `Selector`, `TimeInput`, `Typeahead`, `CheckboxInput`, `CheckboxList`, `Tokenizer`, `DateRangeInput` and `Tooltip` whether or not you use one. If you are carrying your own `.astryx-tooltip` rule, it is computing the same two values and can be deleted.
+- **A link is a destination; a button is an action.** If the thing navigates somewhere (`href`, a route, an anchor, a file) it is a `Link`. If it changes state in place — submit, save, delete, deactivate, disconnect, log out, request, toggle, expand — it is a `Button`. Rendering an action as `<Link href="#">` is the single most common way these templates went wrong: it draws a purple underlined affordance for something that is not navigation, and a screen reader announces "link" for a control that does not act like one. `SELF_HASH` placeholders are for genuine destinations only.
+- **Underline rules, from W3C.** Links **inside running prose** (a sentence in a description, help text, legal copy) stay underlined, because that is the only persistent cue a reader has and colour alone fails WCAG 1.4.1 (F73). Links in **navigation** — a header, sidebar, tab list, breadcrumb, pagination, a rail of settings sections — are not underlined; the grouping and the current-item indicator carry that job. Anything ambiguous is prose, so underline it.
+- **A divider is a section boundary, not a row background.** Use `Divider` to separate genuinely different groups, not between every field, every row of a list, or every setting inside one panel. A stack of rules reads as a form grid and flattens the hierarchy it was meant to express. Prefer `Stack gap` and, inside a panel, one divider at most; if two adjacent groups are only separated by a rule, they are one group.
+- Spacing comes from the spacing scale via `Stack gap` or the kit's own layout props. Do not hand-tune `margin`/`padding` to make a panel look right — a panel that needs 20 rules to assemble is a panel that should be a `Stack`.
 
 ## Release checklist
 

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.3.0
- * Core: @astryxdesign/core@0.3.0
+ * CLI: @astryxdesign/cli@0.6.3
+ * Core: @astryxdesign/core@0.6.3
  */
 
 /// <reference path="./astryx-dracula.variants.d.ts" />

package/astryx-dracula.js

@@ -2,11 +2,11 @@
  * @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.3.0
- * Core: @astryxdesign/core@0.3.0
+ * CLI: @astryxdesign/cli@0.6.3
+ * Core: @astryxdesign/core@0.6.3
  */
 
-import { draculaIconRegistry } from './icons';
+import { draculaIconRegistry } from "./icons.mjs";
 /**
  * astryx-dracula theme — built by `bunx astryx theme build`
  * Import the CSS file alongside this module:
@@ -179,6 +179,8 @@ export const astryxDraculaTheme = {
     "--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-purple": "light-dark(#BD93F9, #BD93F9)",
+    "--color-data-categorical-brown": "light-dark(#FFB86C, #FFB86C)",
     "--color-data-categorical-teal": "light-dark(#A4FFFF, #A4FFFF)",
     "--color-data-categorical-indigo": "light-dark(#D6ACFF, #D6ACFF)",
     "--color-background-blue": "light-dark(#6272A41A, #6272A41A)",
@@ -295,6 +297,385 @@ export const astryxDraculaTheme = {
     "--color-tag-green": "light-dark(#50FA7B, #50FA7B)",
     "--color-tag-purple": "light-dark(#BD93F9, #BD93F9)"
   },
+  components: {
+    "heading": {
+      "level:1": {
+        "fontFamily": "var(--font-family-heading)",
+        "fontSize": "var(--text-heading-1-size)",
+        "fontWeight": "var(--text-heading-1-weight)",
+        "lineHeight": "var(--text-heading-1-leading)"
+      },
+      "level:2": {
+        "fontFamily": "var(--font-family-heading)",
+        "fontSize": "var(--text-heading-2-size)",
+        "fontWeight": "var(--text-heading-2-weight)",
+        "lineHeight": "var(--text-heading-2-leading)"
+      },
+      "level:3": {
+        "fontFamily": "var(--font-family-heading)",
+        "fontSize": "var(--text-heading-3-size)",
+        "fontWeight": "var(--text-heading-3-weight)",
+        "lineHeight": "var(--text-heading-3-leading)"
+      },
+      "level:4": {
+        "fontFamily": "var(--font-family-heading)",
+        "fontSize": "var(--text-heading-4-size)",
+        "fontWeight": "var(--text-heading-4-weight)",
+        "lineHeight": "var(--text-heading-4-leading)"
+      },
+      "level:5": {
+        "fontFamily": "var(--font-family-heading)",
+        "fontSize": "var(--text-heading-5-size)",
+        "fontWeight": "var(--text-heading-5-weight)",
+        "lineHeight": "var(--text-heading-5-leading)"
+      },
+      "level:6": {
+        "fontFamily": "var(--font-family-heading)",
+        "fontSize": "var(--text-heading-6-size)",
+        "fontWeight": "var(--text-heading-6-weight)",
+        "lineHeight": "var(--text-heading-6-leading)"
+      },
+      "type:display-1": {
+        "fontFamily": "var(--font-family-heading)",
+        "fontSize": "var(--text-display-1-size)",
+        "lineHeight": "var(--text-display-1-leading)"
+      },
+      "type:display-2": {
+        "fontFamily": "var(--font-family-heading)",
+        "fontSize": "var(--text-display-2-size)",
+        "lineHeight": "var(--text-display-2-leading)"
+      },
+      "type:display-3": {
+        "fontFamily": "var(--font-family-heading)",
+        "fontSize": "var(--text-display-3-size)",
+        "lineHeight": "var(--text-display-3-leading)"
+      }
+    },
+    "text": {
+      "type:body": {
+        "fontFamily": "var(--font-family-body)",
+        "fontSize": "var(--text-body-size)",
+        "lineHeight": "var(--text-body-leading)"
+      },
+      "type:large": {
+        "fontFamily": "var(--font-family-body)",
+        "fontSize": "var(--text-large-size)",
+        "lineHeight": "var(--text-large-leading)"
+      },
+      "type:label": {
+        "fontFamily": "var(--font-family-body)",
+        "fontSize": "var(--text-label-size)",
+        "lineHeight": "var(--text-label-leading)"
+      },
+      "type:code": {
+        "fontFamily": "var(--font-family-code)",
+        "fontSize": "var(--text-code-size)",
+        "lineHeight": "var(--text-code-leading)"
+      },
+      "type:supporting": {
+        "fontFamily": "var(--font-family-body)",
+        "fontSize": "var(--text-supporting-size)",
+        "lineHeight": "var(--text-supporting-leading)"
+      },
+      "type:display-1": {
+        "fontFamily": "var(--font-family-heading)",
+        "fontSize": "var(--text-display-1-size)",
+        "lineHeight": "var(--text-display-1-leading)"
+      },
+      "type:display-2": {
+        "fontFamily": "var(--font-family-heading)",
+        "fontSize": "var(--text-display-2-size)",
+        "lineHeight": "var(--text-display-2-leading)"
+      },
+      "type:display-3": {
+        "fontFamily": "var(--font-family-heading)",
+        "fontSize": "var(--text-display-3-size)",
+        "lineHeight": "var(--text-display-3-leading)"
+      }
+    },
+    "app-shell": {
+      "variant:wash": {
+        "backgroundColor": "var(--color-background-body)"
+      },
+      "variant:elevated": {
+        "backgroundColor": "var(--color-background-body)"
+      },
+      "variant:surface": {
+        "backgroundColor": "var(--color-background-surface)"
+      },
+      "variant:section": {
+        "backgroundColor": "var(--color-background-surface)"
+      }
+    },
+    "link": {
+      "base": {
+        "color": "var(--color-text-accent)",
+        ":hover": {
+          "color": "var(--color-text-highlight)"
+        }
+      }
+    },
+    "card": {
+      "base": {
+        "backgroundColor": "var(--color-widget-background)",
+        "border": "1px solid var(--color-widget-content-border)",
+        "borderRadius": "var(--border-radius)"
+      }
+    },
+    "button": {
+      "base": {
+        "borderRadius": "var(--border-radius)",
+        "fontWeight": "var(--font-weight-normal)"
+      }
+    },
+    "banner": {
+      "base": {
+        "borderRadius": "var(--border-radius)",
+        "borderWidth": "1px",
+        "borderStyle": "solid",
+        "color": "var(--color-text-primary)"
+      },
+      "status:info": {
+        "--color-accent-muted": "var(--color-background-cyan)",
+        "borderColor": "var(--color-info)"
+      },
+      "status:success": {
+        "--color-success-muted": "var(--color-background-green)",
+        "borderColor": "var(--color-success)"
+      },
+      "status:warning": {
+        "--color-warning-muted": "var(--color-background-yellow)",
+        "borderColor": "var(--color-warning)"
+      },
+      "status:error": {
+        "--color-error-muted": "var(--color-background-red)",
+        "borderColor": "var(--color-error)"
+      }
+    },
+    "statusdot": {
+      "variant:info": {
+        "backgroundColor": "#8BE9FD"
+      }
+    },
+    "progressbar-fill": {
+      "variant:accent": {
+        "backgroundColor": "#BD93F9"
+      },
+      "variant:success": {
+        "backgroundColor": "#50FA7B"
+      },
+      "variant:warning": {
+        "backgroundColor": "#F1FA8C"
+      },
+      "variant:error": {
+        "backgroundColor": "#FF5555"
+      },
+      "variant:neutral": {
+        "backgroundColor": "var(--color-progress-value)"
+      },
+      "variant:disabled": {
+        "backgroundColor": "var(--color-progress-value)"
+      }
+    },
+    "text-input": {
+      "status:success": {
+        "--color-success": "#50FA7B"
+      },
+      "status:warning": {
+        "--color-warning": "#F1FA8C"
+      },
+      "status:error": {
+        "--color-error": "#FF5555"
+      }
+    },
+    "textarea": {
+      "status:success": {
+        "--color-success": "#50FA7B"
+      },
+      "status:warning": {
+        "--color-warning": "#F1FA8C"
+      },
+      "status:error": {
+        "--color-error": "#FF5555"
+      }
+    },
+    "number-input": {
+      "status:success": {
+        "--color-success": "#50FA7B"
+      },
+      "status:warning": {
+        "--color-warning": "#F1FA8C"
+      },
+      "status:error": {
+        "--color-error": "#FF5555"
+      }
+    },
+    "date-input": {
+      "status:success": {
+        "--color-success": "#50FA7B"
+      },
+      "status:warning": {
+        "--color-warning": "#F1FA8C"
+      },
+      "status:error": {
+        "--color-error": "#FF5555"
+      }
+    },
+    "time-input": {
+      "status:success": {
+        "--color-success": "#50FA7B"
+      },
+      "status:warning": {
+        "--color-warning": "#F1FA8C"
+      },
+      "status:error": {
+        "--color-error": "#FF5555"
+      }
+    },
+    "selector": {
+      "status:success": {
+        "--color-success": "#50FA7B"
+      },
+      "status:warning": {
+        "--color-warning": "#F1FA8C"
+      },
+      "status:error": {
+        "--color-error": "#FF5555"
+      }
+    },
+    "multi-selector": {
+      "status:success": {
+        "--color-success": "#50FA7B"
+      },
+      "status:warning": {
+        "--color-warning": "#F1FA8C"
+      },
+      "status:error": {
+        "--color-error": "#FF5555"
+      }
+    },
+    "typeahead": {
+      "status:success": {
+        "--color-success": "#50FA7B"
+      },
+      "status:warning": {
+        "--color-warning": "#F1FA8C"
+      },
+      "status:error": {
+        "--color-error": "#FF5555"
+      }
+    },
+    "tokenizer": {
+      "status:success": {
+        "--color-success": "#50FA7B"
+      },
+      "status:warning": {
+        "--color-warning": "#F1FA8C"
+      },
+      "status:error": {
+        "--color-error": "#FF5555"
+      }
+    },
+    "switch": {
+      "base": {
+        "--color-background-gray": "var(--color-skeleton)"
+      }
+    },
+    "toast": {
+      "type:info": {
+        "backgroundColor": "var(--color-background-inverted)",
+        "color": "var(--color-on-light)"
+      },
+      "type:error": {
+        "backgroundColor": "var(--color-background-error-inverted)",
+        "color": "var(--color-on-light)"
+      }
+    },
+    "field-status": {
+      "type:success": {
+        "backgroundColor": "var(--color-background-green)"
+      },
+      "type:warning": {
+        "backgroundColor": "var(--color-background-yellow)"
+      },
+      "type:error": {
+        "backgroundColor": "var(--color-background-red)"
+      }
+    },
+    "tooltip": {
+      "base": {
+        "backgroundColor": "var(--color-background-popover)",
+        "color": "var(--color-text-primary)",
+        "boxShadow": "var(--shadow-low)"
+      }
+    },
+    "hovercard": {
+      "base": {
+        "backgroundColor": "var(--color-background-popover)"
+      }
+    },
+    "avatar-status-dot": {
+      "variant:success": {
+        "color": "var(--color-on-success)"
+      },
+      "variant:error": {
+        "color": "var(--color-on-error)"
+      }
+    }
+  },
+  __onDark: {
+    "tokens": {
+      "color-scheme": "dark",
+      "--color-text-primary": "var(--color-on-dark)",
+      "--color-icon-primary": "var(--color-on-dark)",
+      "--color-accent": "light-dark(#BD93F9, #BD93F9)"
+    }
+  },
+  __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)"
+    }
+  },
+  __adaptations: {
+    "widthBreakpoints": {
+      "sm": 640,
+      "md": 768,
+      "lg": 1024,
+      "xl": 1280,
+      "2xl": 1536
+    },
+    "rules": []
+  },
+  __axes: {
+    "typography": {
+      "scale": {
+        "base": 14,
+        "ratio": 1.2
+      },
+      "body": {
+        "family": "JetBrains Mono",
+        "fallbacks": "monospace"
+      },
+      "heading": {
+        "family": "JetBrains Mono",
+        "fallbacks": "monospace",
+        "weight": "normal"
+      },
+      "code": {
+        "family": "JetBrains Mono",
+        "fallbacks": "monospace"
+      }
+    },
+    "motion": {
+      "fast": 175,
+      "medium": 410,
+      "slow": 975,
+      "ratio": 0.75
+    }
+  },
   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.3.0
- * Core: @astryxdesign/core@0.3.0
+ * CLI: @astryxdesign/cli@0.6.3
+ * Core: @astryxdesign/core@0.6.3
  */
 
 // Generated by astryx theme build
@@ -17,18 +17,6 @@ declare module '@astryxdesign/core/StatusDot' {
 
 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/icons.mjs

@@ -0,0 +1,125 @@
+// icons.tsx
+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";
+import { jsx } from "react/jsx-runtime";
+var iconProps = {
+  size: "1em",
+  "aria-hidden": true
+};
+var draculaIconRegistry = {
+  close: /* @__PURE__ */ jsx(X, {
+    ...iconProps
+  }),
+  chevronDown: /* @__PURE__ */ jsx(ChevronDown, {
+    ...iconProps
+  }),
+  chevronLeft: /* @__PURE__ */ jsx(ChevronLeft, {
+    ...iconProps
+  }),
+  chevronRight: /* @__PURE__ */ jsx(ChevronRight, {
+    ...iconProps
+  }),
+  chevronsLeft: /* @__PURE__ */ jsx(ChevronsLeft, {
+    ...iconProps
+  }),
+  chevronsRight: /* @__PURE__ */ jsx(ChevronsRight, {
+    ...iconProps
+  }),
+  check: /* @__PURE__ */ jsx(Check, {
+    ...iconProps
+  }),
+  success: /* @__PURE__ */ jsx(CheckCircle, {
+    ...iconProps
+  }),
+  error: /* @__PURE__ */ jsx(XCircle, {
+    ...iconProps
+  }),
+  warning: /* @__PURE__ */ jsx(AlertTriangle, {
+    ...iconProps
+  }),
+  info: /* @__PURE__ */ jsx(Info, {
+    ...iconProps
+  }),
+  calendar: /* @__PURE__ */ jsx(Calendar, {
+    ...iconProps
+  }),
+  clock: /* @__PURE__ */ jsx(Clock, {
+    ...iconProps
+  }),
+  externalLink: /* @__PURE__ */ jsx(ExternalLink, {
+    ...iconProps
+  }),
+  menu: /* @__PURE__ */ jsx(Menu, {
+    ...iconProps
+  }),
+  moreHorizontal: /* @__PURE__ */ jsx(MoreHorizontal, {
+    ...iconProps
+  }),
+  search: /* @__PURE__ */ jsx(Search, {
+    ...iconProps
+  }),
+  arrowUp: /* @__PURE__ */ jsx(ArrowUp, {
+    ...iconProps
+  }),
+  arrowDown: /* @__PURE__ */ jsx(ArrowDown, {
+    ...iconProps
+  }),
+  arrowsUpDown: /* @__PURE__ */ jsx(ArrowUpDown, {
+    ...iconProps
+  }),
+  funnel: /* @__PURE__ */ jsx(Filter, {
+    ...iconProps
+  }),
+  eyeSlash: /* @__PURE__ */ jsx(EyeOff, {
+    ...iconProps
+  }),
+  viewColumns: /* @__PURE__ */ jsx(Columns, {
+    ...iconProps
+  }),
+  copy: /* @__PURE__ */ jsx(Copy, {
+    ...iconProps
+  }),
+  checkDouble: /* @__PURE__ */ jsx(CheckCheck, {
+    ...iconProps
+  }),
+  wrench: /* @__PURE__ */ jsx(Wrench, {
+    ...iconProps
+  }),
+  stop: /* @__PURE__ */ jsx(Square, {
+    ...iconProps
+  }),
+  microphone: /* @__PURE__ */ jsx(Mic, {
+    ...iconProps
+  })
+};
+export {
+  draculaIconRegistry
+};