create-bestax 4.2.19 → 4.3.0

package/templates/skills/bestax-theming/references/css-variables.md

@@ -10,7 +10,11 @@ theming means overriding the right `--bulma-*` values.
 
 `Theme` is exported from the package and writes `--bulma-*` variables for you.
 
-- `isRoot` → injects the variables globally at `:root` (use once, at the app root).
+- `isRoot` → injects the variables globally at `:root` (use once, at the app root). It writes
+  them before the browser paints what it rendered, so an app rendered in the browser has them
+  from its first frame of content. A server render doesn't include them, so a server-rendered
+  page paints with the stylesheet's values until it hydrates: put what it needs from its first
+  paint in CSS (path 2).
 - without `isRoot` → wraps children in a `<div>` and scopes the variables to that subtree.
 - Named props set the color/scheme HSL channels and common values (see "Theme props" below).
 - `bulmaVars` sets any other variable, keyed by its real `--bulma-*` name. It only changes
@@ -112,14 +116,39 @@ the blue too, and is too light for turquoise text on a white page. The other col
 from Bulma's own defaults. For a page made for stock Bulma, the bestax-migrate skill's
 `references/css-migration.md` covers getting its turquoise back.
 
-`Theme` doesn't set either one, so set them in your CSS, loaded after the library's styles:
+Set them alongside the trio, through `Theme`'s `bulmaVars` or in your CSS:
 
 - **The invert** is one value for both schemes. Point it at a shade that reads on the new color: a
   near-black `var(--bulma-<c>-05-l)` on a light color, a near-white `var(--bulma-<c>-100-l)` on a
   dark one.
 - **The on-scheme lightness** has to read on the page's background, so Bulma gives each scheme
-  its own. A value on `:root` in your stylesheet wins in both, so give dark mode its own value on
-  both of its paths, as below.
+  its own. One value applies in both schemes, so give each scheme its own: on an `isRoot`
+  `Theme`, the on-scheme keys of `bulmaVars` take `{ light, dark }`, and `Theme` writes each
+  where Bulma's own value for that scheme applies. A scheme you leave out keeps the
+  stylesheet's value. `bestax-no-dark-mode.css` has no dark scheme, so with it give one string.
+
+```tsx
+// Stock Bulma's turquoise, with the values from bulma/css/bulma.css.
+<Theme
+  isRoot
+  primaryH="171deg"
+  primaryS="100%"
+  primaryL="41%"
+  bulmaVars={{
+    '--bulma-primary-invert-l': 'var(--bulma-primary-05-l)',
+    '--bulma-primary-on-scheme-l': { light: '21%', dark: '41%' },
+  }}
+>
+  <App />
+</Theme>
+```
+
+A scoped `Theme` writes its variables as an inline style, which can't hold a value per scheme, so
+there the on-scheme lightness takes only a string, and `{ light, dark }` is skipped with a warning
+in development. Set it in your CSS instead when a scoped section needs one per scheme, or when
+the page is rendered on the server, which paints before `Theme` runs. In CSS, loaded after the
+library's styles, a value on `:root` wins in both schemes, so give dark mode its own value on
+both of its paths:
 
 ```css
 /* Stock Bulma's turquoise, with the values from bulma/css/bulma.css. */
@@ -322,6 +351,15 @@ come from the `itemsToShow*` props, and `--bulma-carousel-items-in-view` is the
 viewport picks. The props also decide how far a step moves, so set the count with the props
 rather than with these variables.
 
+The `--bulma-carousel-overlay-*` variables color the arrows, and indicators over the slides, only
+while the overlay look is on: `overlayControls`, which follows `indicatorInside` unless set. The look
+also puts a dark gradient band behind indicators over the slides (a `background`, not a variable),
+and while it's on the arrows ignore `arrowColor`. For indicators over light slides, such as white
+cards, use `<Carousel indicatorInside overlayControls={false}>`: plain colors and no band.
+`overlayControls` alone gives the arrows the overlay look with the indicators below the slides. The
+overlay colors default to light ones (`--bulma-white`) in either color scheme, since they sit on a
+dark tint.
+
 ### Checkbox
 
 `--bulma-checkbox-active-color`, `--bulma-checkbox-background`, `--bulma-checkbox-border-color`,
@@ -341,6 +379,12 @@ that selector, so leave `color` unset when a class sets the fill. The unchecked
 the box holds the 3:1 WCAG asks of a control's boundary; keep a replacement at 3:1 against what
 the form sits on.
 
+`--bulma-checkbox-size` (default `1.25em`) can't take the box below 24px: the stylesheet gives the
+`.check` box a `min-width` and `min-height` of 24px, WCAG 2.2's minimum target size, so with
+Bulma's default font sizes the box is 24px at the default and `small` sizes. For a smaller box, set the size and also
+`min-width: 0; min-height: 0` on `.styled-checkbox.my-box .check` (mind the class prefix), and keep
+the label text inside the `Checkbox`, since the whole label is the click target.
+
 ### Collapse
 
 `--bulma-collapse-border-color`, `--bulma-collapse-group-gap`, `--bulma-collapse-header-weight`,
@@ -555,6 +599,12 @@ declares `--bulma-radio-active-color` again on `.styled-radio.is-<color>`, which
 selector, so leave `color` unset when a class sets it. The unchecked ring, `--bulma-radio-border-color`, defaults to `text-weak` for the same 3:1 boundary
 contrast.
 
+`--bulma-radio-size` (default `1.25em`) can't take the circle below 24px: the stylesheet gives the
+`.check` circle a `min-width` and `min-height` of 24px, WCAG 2.2's minimum target size, so with
+Bulma's default font sizes the circle is 24px at the default and `small` sizes. For a smaller circle, set the size and also
+`min-width: 0; min-height: 0` on `.styled-radio.my-radio .check` (mind the class prefix), and keep
+the label text inside the `Radio`, since the whole label is the click target.
+
 ### Rate
 
 `--bulma-rate-color-active`, `--bulma-rate-color-hover`, `--bulma-rate-color-inactive`,
@@ -571,6 +621,19 @@ contrast.
 `--bulma-reveal-duration`, `--bulma-reveal-easing`, `--bulma-reveal-flip-angle`,
 `--bulma-reveal-offset`, `--bulma-reveal-offset-large`, `--bulma-reveal-scale`
 
+### ScrollArea
+
+Declared on the frame, `.scroll-area`, and read by the viewport inside it, so set them on the
+frame, through `className` or `style`. `--bulma-scroll-area-scrollbar-width` takes what
+`scrollbar-width` takes: `thin`, `auto` or `none`. `none` hides the bars while the area still
+scrolls, which hides that it scrolls at all, so keep to `thin` or `auto`. Restyled bars owe
+WCAG's 3:1, so keep a thumb color that clears it against the background in both schemes. In forced colors the browser gives the bars the system's colors
+whatever these say.
+
+`--bulma-scroll-area-fade-size`, `--bulma-scroll-area-scrollbar-width`,
+`--bulma-scroll-area-thumb-color`, `--bulma-scroll-area-thumb-hover-color`,
+`--bulma-scroll-area-track-color`
+
 ### Sidebar
 
 `--bulma-sidebar-background`, `--bulma-sidebar-close-color`,
@@ -603,6 +666,18 @@ contrast.
 `--bulma-slider-track-height-small`, `--bulma-slider-transition-duration`,
 `--bulma-slider-vertical-height`
 
+### Splitter
+
+Declared on the root, `.splitter`. The handle reads them, and its line and grip are borders, so a
+forced-colors page keeps them and draws an active handle in `Highlight`.
+`--bulma-splitter-handle-size-coarse` is the strip's width for a coarse pointer, kept at 24px or
+more for WCAG 2.5.8.
+
+`--bulma-splitter-grip-color`, `--bulma-splitter-grip-length`, `--bulma-splitter-grip-radius`,
+`--bulma-splitter-grip-size`, `--bulma-splitter-handle-size`,
+`--bulma-splitter-handle-size-coarse`, `--bulma-splitter-line-active-color`,
+`--bulma-splitter-line-active-size`, `--bulma-splitter-line-color`, `--bulma-splitter-line-size`
+
 ### Steps
 
 `--bulma-steps-animation-duration`, `--bulma-steps-content-margin-top`,
@@ -747,10 +822,11 @@ own, so a new color sets one per scheme (see "The lightnesses Bulma's build pick
 
 ### The scheme of the first paint
 
-`Theme` writes the attribute from an effect, and a client-rendered app (the create-bestax
-scaffold, for one) paints before its effects run. That first frame takes whatever `<html>`
-already carries: with nothing there, the visitor's OS scheme, which then flips. So the scheme
-for that frame comes from `index.html`:
+`Theme` writes the attribute before the browser paints what it rendered, but a page can paint
+before the app's script runs at all: a client-rendered app (the create-bestax scaffold, for one)
+can show its empty page first, and a server-rendered one shows its server HTML. That first frame
+takes whatever `<html>` already carries: with nothing there, the visitor's OS scheme, which then
+flips. So the scheme for that frame comes from `index.html`:
 
 - **A scheme that never changes** goes on the `<html>` itself,
   `<html lang="en" data-theme="light">`, and needs no `colorMode`.
@@ -781,8 +857,8 @@ white text on cream. The failure is invisible unless the author's own OS is in d
 
 **If the design is single-mode, pin the scheme** on the `<html>` in `index.html`
 (`<html lang="en" data-theme="light">`, as above), so text can't flip out from under the palette.
-`<Theme isRoot colorMode="light">` pins it too, but only from its effect on, after the first
-paint.
+`<Theme isRoot colorMode="light">` pins it too, but only once the app's script runs, so the
+page can show the OS scheme before that.
 
 **If both modes are supported, never expose a fixed custom token to the flip** — derive it from
 scheme variables, or flip it yourself:
@@ -825,4 +901,6 @@ Color trios: `primaryH/primaryS/primaryL`, `linkH/linkS/linkL`, `infoH/S/L`, `su
 `darkInvertL`, `softL`, `boldL`, `softInvertL`, `boldInvertL`. Interaction deltas:
 `hoverBackgroundLDelta`, `activeBackgroundLDelta`, `hoverBorderLDelta`, `activeBorderLDelta`,
 `hoverColorLDelta`, `activeColorLDelta`, `hoverShadowADelta`, `activeShadowADelta`. Everything else:
-`bulmaVars={{ '--bulma-…': '…' }}`. All values are strings.
+`bulmaVars={{ '--bulma-…': '…' }}`, each color's `--bulma-<c>-invert-l` and
+`--bulma-<c>-on-scheme-l` included. All values are strings, except that an on-scheme key also
+takes `{ light, dark }` on an `isRoot` `Theme`.

package/templates/skills/bestax-theming/references/themeable-components.md

@@ -79,9 +79,11 @@ Shades (`colorShade` / `backgroundColorShade`): `00, 05, 10, … 95, invert, lig
 | `Progress`         | every `validColors` member (the `-bis`/`-ter` shades and the greys deprecated: no CSS, dev-warn, removed next major — see ⚠️)                                             | `small \| medium \| large`                                                | —                                                                                                                                                   |
 | `Radio`            | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| normal \| medium \| large`                                      | the 6 only                                                                                                                                          |
 | `Rate`             | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | the 6 only                                                                                                                                          |
+| `ScrollArea`       | — (no `color`: the thumb is `--bulma-scroll-area-thumb-color`)                                                                                                            | — (`--bulma-scroll-area-scrollbar-width`: `thin`, `auto` or `none`)       | the browser's own bars, so forced colors gives them the system's colors; retheme through `--bulma-scroll-area-*`                                    |
 | `SegmentedControl` | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | fills only the checked segment (default `link`); `size` is the row's `are-<size>`; segments take no `color` or `size`                               |
 | `Select`           | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                                                                              | `small \| medium \| large`                                                | also `isRounded`                                                                                                                                    |
 | `Slider`           | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | also `isRounded`, `isCircle`                                                                                                                        |
+| `Splitter`         | — (no `color`: the line is `--bulma-splitter-line-color`)                                                                                                                 | — (no `size`)                                                             | the line and grip are borders, so forced colors keeps them; retheme through `--bulma-splitter-*`                                                    |
 | `Steps`            | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | the 6 only                                                                                                                                          |
 | `Switch`           | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| normal \| medium \| large`                                      | also `isRounded`, `isThin`, `isOutlined`                                                                                                            |
 | `Tabs`             | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                                                                              | `small \| medium \| large`                                                | **entire `color` prop deprecated** (no CSS ships; dev-warn; removal next major)                                                                     |

package/templates/vite/README.md

@@ -14,14 +14,14 @@ pnpm run dev
 - `pnpm run dev` - Start development server
 - `pnpm run build` - Build for production
 - `pnpm run preview` - Preview production build
-- `pnpm run lint` - Run ESLint
+- `pnpm run lint` - Run Oxlint
 
 ## Features
 
 - ⚡️ Vite for lightning-fast HMR
 - 🎨 Bulma CSS framework
 - 📦 bestax-bulma component library
-- 🔧 ESLint pre-configured
+- 🔧 Oxlint pre-configured
 
 ## Learn More
 

package/templates/vite/_oxlintrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "oxc"],
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}

package/templates/vite/package.json

@@ -6,24 +6,20 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "lint": "eslint .",
+    "lint": "oxlint",
     "preview": "vite preview"
   },
   "dependencies": {
     "@allxsmith/bestax-bulma": "workspace:^",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3"
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1"
   },
   "devDependencies": {
-    "@eslint/js": "^10.0.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.3",
-    "eslint": "^10.5.0",
-    "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.3",
-    "globals": "^17.7.0",
-    "vite": "^8.1.0"
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.2",
+    "oxlint": "^1.89.0",
+    "vite": "^8.3.5"
   },
   "engines": {
     "node": "^20.19.0 || >=22.12.0"

package/templates/vite/vite.config.js

@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 
-// https://vitejs.dev/config/
+// https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
 });

package/templates/vite-ts/README.md

@@ -14,7 +14,7 @@ pnpm run dev
 - `pnpm run dev` - Start development server
 - `pnpm run build` - Build for production
 - `pnpm run preview` - Preview production build
-- `pnpm run lint` - Run ESLint
+- `pnpm run lint` - Run Oxlint
 
 ## Features
 
@@ -22,7 +22,7 @@ pnpm run dev
 - 🎨 Bulma CSS framework
 - 📦 bestax-bulma component library
 - 📘 TypeScript for type safety
-- 🔧 ESLint pre-configured
+- 🔧 Oxlint pre-configured
 
 ## Learn More
 

package/templates/vite-ts/_oxlintrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}

package/templates/vite-ts/package.json

@@ -6,27 +6,22 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "lint": "eslint .",
+    "lint": "oxlint",
     "preview": "vite preview"
   },
   "dependencies": {
     "@allxsmith/bestax-bulma": "workspace:^",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3"
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1"
   },
   "devDependencies": {
-    "@eslint/js": "^10.0.1",
-    "@types/node": "^24.13.3",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.3",
-    "eslint": "^10.5.0",
-    "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.3",
-    "globals": "^17.7.0",
-    "typescript": "^6.0.3",
-    "typescript-eslint": "^8.62.0",
-    "vite": "^8.1.0"
+    "@types/node": "^24.19.2",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.2",
+    "oxlint": "^1.89.0",
+    "typescript": "~7.0.2",
+    "vite": "^8.3.5"
   },
   "engines": {
     "node": "^20.19.0 || >=22.12.0"

package/templates/vite/eslint.config.js

@@ -1,29 +0,0 @@
-import js from '@eslint/js';
-import globals from 'globals';
-import reactHooks from 'eslint-plugin-react-hooks';
-import reactRefresh from 'eslint-plugin-react-refresh';
-
-export default [
-  { ignores: ['dist'] },
-  js.configs.recommended,
-  {
-    files: ['**/*.{js,jsx}'],
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-      parserOptions: {
-        ecmaVersion: 'latest',
-        ecmaFeatures: { jsx: true },
-        sourceType: 'module',
-      },
-    },
-    rules: {
-      ...reactHooks.configs['recommended-latest'].rules,
-      ...reactRefresh.configs.vite.rules,
-    },
-  },
-];

package/templates/vite-ts/eslint.config.js

@@ -1,26 +0,0 @@
-import js from '@eslint/js';
-import globals from 'globals';
-import reactHooks from 'eslint-plugin-react-hooks';
-import reactRefresh from 'eslint-plugin-react-refresh';
-import tseslint from 'typescript-eslint';
-
-export default [
-  { ignores: ['dist'] },
-  js.configs.recommended,
-  ...tseslint.configs.recommended,
-  {
-    files: ['**/*.{ts,tsx}'],
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    rules: {
-      ...reactHooks.configs['recommended-latest'].rules,
-      ...reactRefresh.configs.vite.rules,
-    },
-  },
-];