create-bestax 4.2.1 → 4.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/templates/skills/bestax-custom-component/references/component-catalog.md +4 -4
  3. package/templates/skills/bestax-layout-scaffold/SKILL.md +5 -5
  4. package/templates/skills/bestax-migrate/references/unmappables.md +1 -1
  5. package/templates/skills/bestax-theming/references/css-variables.md +16 -15
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-bestax",
3
- "version": "4.2.1",
3
+ "version": "4.2.2",
4
4
  "description": "Create a new bestax-bulma project",
5
5
  "type": "module",
6
6
  "bin": {
package/templates/skills/bestax-custom-component/references/component-catalog.md CHANGED
@@ -82,12 +82,12 @@ component is guaranteed to appear (the generator fails if one lacks an API page)
82
82
  - [Card](https://bestax.io/docs/api/components/card) — The `Card` component renders a Bulma-styled card with optional header, image, content, and footer.
83
83
  - [Carousel](https://bestax.io/docs/api/components/carousel) — The `Carousel` component provides an image/content slider with navigation arrows and indicators.
84
84
  - [Collapse](https://bestax.io/docs/api/components/collapse) — The `Collapse` component provides an expandable/collapsible content panel.
85
- - [Dialog](https://bestax.io/docs/api/components/dialog) — The `Dialog` component provides confirmation and alert dialogs with customizable actions.
85
+ - [Dialog](https://bestax.io/docs/api/components/dialog) — The `Dialog` component provides ready-made confirm and alert dialogs, so a destructive action stays one `await dialog.confirm()` call away.
86
86
  - [Dropdown](https://bestax.io/docs/api/components/dropdown) — The `Dropdown` component provides Bulma's versatile dropdown menu for your Bulma React UI.
87
87
  - [Loading](https://bestax.io/docs/api/components/loading) — The `Loading` component provides a loading overlay with a spinner animation.
88
88
  - [Menu](https://bestax.io/docs/api/components/menu) — The `Menu` component provides Bulma's vertical navigation menu: a simple, accessible sidebar or section menu for your Bulma React UI.
89
89
  - [Message](https://bestax.io/docs/api/components/message) — The `Message` component provides Bulma's flexible notice/message box for your Bulma React UI.
90
- - [Modal](https://bestax.io/docs/api/components/modal) — The `Modal` component provides a flexible, accessible modal dialog for your Bulma React UI.
90
+ - [Modal](https://bestax.io/docs/api/components/modal) — The `Modal` component provides an empty, accessible overlay for arbitrary content — for a ready-made confirm or alert, reach for `Dialog` instead.
91
91
  - [Navbar](https://bestax.io/docs/api/components/navbar) — The `Navbar` component implements Bulma's powerful, responsive navigation bar for your Bulma React UI.
92
92
  - [Pagination](https://bestax.io/docs/api/components/pagination) — The `Pagination` component provides a flexible, composable Bulma pagination navigation for your Bulma React UI.
93
93
  - [Panel](https://bestax.io/docs/api/components/panel) — The `Panel` component implements Bulma's versatile panel block for React.
@@ -123,12 +123,12 @@ component is guaranteed to appear (the generator fails if one lacks an API page)
123
123
  ## Columns
124
124
 
125
125
  - [Column](https://bestax.io/docs/api/columns/column) — The `Column` component provides a single responsive layout column using Bulma's flexbox-based column system.
126
- - [Columns](https://bestax.io/docs/api/columns/columns) — The `Columns` component provides Bulma's flexible, responsive grid container for aligning and distributing [`Column`](./column.md) components.
126
+ - [Columns](https://bestax.io/docs/api/columns) — The `Columns` component provides Bulma's flexible, responsive grid container for aligning and distributing [`Column`](./column.md) components.
127
127
 
128
128
  ## Grid
129
129
 
130
130
  - [Cell](https://bestax.io/docs/api/grid/cell) — The `Cell` component provides a single Bulma grid cell for use inside the [`Grid`](./grid.md) component.
131
- - [Grid](https://bestax.io/docs/api/grid/grid) — The `Grid` component provides Bulma's advanced CSS Grid layout for complex, modern layouts.
131
+ - [Grid](https://bestax.io/docs/api/grid) — The `Grid` component provides Bulma's advanced CSS Grid layout for complex, modern layouts.
132
132
 
133
133
  ## Layout
134
134
 
package/templates/skills/bestax-layout-scaffold/SKILL.md CHANGED
@@ -99,10 +99,10 @@ Centered; a collection of items → Card grid. For mixed requests, pick the domi
99
99
  and `.box` re-declare `--bulma-card-shadow`/`--bulma-box-shadow` from `--bulma-shadow` on
100
100
  their own selector, so setting _those_ from an ancestor never wins (same for
101
101
  `--bulma-box-radius`; `--bulma-card-radius` is a literal with no ancestor route at all).
102
- It has to be a CSS rule rather than `<Theme bulmaVars={{ '--bulma-shadow': … }}>`, because
103
- `bulmaVars` is a closed typed record and `--bulma-shadow` is not one of its keys — that
104
- exact call **does not compile**, and it was the single most repeated invention across this
105
- library's cold-start evals. Either way the subtree stays theme- and dark-mode-aware.
102
+ A class-scoped CSS rule keeps the ring on just the one featured card without wrapping it in
103
+ its own `Theme`; `<Theme bulmaVars={{ '--bulma-shadow': … }}>` also compiles and is the
104
+ better fit when the override already applies to a whole scoped subtree. Either way the
105
+ subtree stays theme- and dark-mode-aware.
106
106
 
107
107
  - **CTAs on a colored hero must stay legible in both schemes.** On a fixed-color surface
108
108
  (`Hero color="primary"`, a dark banner), use **filled** buttons — `color="light"` or
@@ -194,7 +194,7 @@ inline `style`.
194
194
  every other `Section` — never band CSS, never `bgColor="light"`/`"white"`.
195
195
  - [ ] Decorative CSS ≤10 lines total incl. comments — no file-header comment (hero wash +
196
196
  featured-card ring), `--bulma-*`-derived; no resets — Bulma ships one.
197
- The ring sets `--bulma-shadow` in a CSS rule; `Theme bulmaVars` has no such key.
197
+ The ring sets `--bulma-shadow` (via a scoped CSS rule or `Theme bulmaVars`).
198
198
  - [ ] Set the icon library once via `<ConfigProvider iconLibrary="…">` at the root.
199
199
  - [ ] Site built? ~800 KB raw / ~82 KB gzip CSS is the expected default-flavor size — to shrink
200
200
  it, run the `bestax-optimize` skill (measure first).
package/templates/skills/bestax-migrate/references/unmappables.md CHANGED
@@ -32,7 +32,7 @@ matches the usage, or plain JSX with classes:
32
32
  ## `Tile` — Bulma v1 replaced tiles with Grid
33
33
 
34
34
  Convert ancestor/parent/child tile trees to `Grid`/`Cell` (docs:
35
- https://bestax.io/docs/api/grid/grid):
35
+ https://bestax.io/docs/api/grid):
36
36
 
37
37
  ```tsx
38
38
  // Before
package/templates/skills/bestax-theming/references/css-variables.md CHANGED
@@ -101,26 +101,27 @@ and numeric shades `--bulma-<c>-00` … `--bulma-<c>-95`.
101
101
  | `--bulma-size-small` / `-normal` / `-medium` / `-large` | 0.75 / 1 / 1.25 / 1.5rem | via `bulmaVars` |
102
102
  | `--bulma-weight-light/normal/medium/semibold/bold/extrabold` | 300 / 400 / 500 / 600 / 700 / 800 | via `bulmaVars` |
103
103
 
104
- ## Shadow — the one token `bulmaVars` cannot set
104
+ ## Shadow — override the upstream token, not the derived one
105
105
 
106
- `--bulma-shadow` is a real Bulma variable (`.box` and `.card` both derive
107
- `--bulma-box-shadow`/`--bulma-card-shadow` from it), but it is **not a key of `bulmaVars`** —
108
- that record is a closed union built from an explicit list, and shadow was left out. Writing
109
- `<Theme bulmaVars={{ '--bulma-shadow': … }}>` is a compile error, and it is the single most
110
- repeated invention in this library's cold-start evals: every run on every guidance channel
111
- tried it.
106
+ `--bulma-shadow` (plus its `--bulma-shadow-h`/`-s`/`-l` channels) is a real Bulma variable that
107
+ `.box`, `.card`, `.dropdown`, and `.panel` each derive their own shadow variable from
108
+ (`--bulma-box-shadow`, `--bulma-card-shadow`, …). It **is** a key of `bulmaVars`, so `Theme` can
109
+ set it directly:
112
110
 
113
- Set it in CSS instead, then apply the class to the one element that needs it:
114
-
115
- ```css
116
- .featured-ring {
117
- --bulma-shadow: 0 0 0 2px var(--bulma-primary);
118
- }
111
+ ```tsx
112
+ <Theme bulmaVars={{ '--bulma-shadow': '0 0 0 2px var(--bulma-primary)' }}>
113
+ <Box>featured</Box>
114
+ </Theme>
119
115
  ```
120
116
 
117
+ There is no individual `shadow` prop for it — `shadow` already names the unrelated
118
+ `shadowless` helper class (`shadow="shadowless"` → `is-shadowless`) — so reach it through
119
+ `bulmaVars` as shown above.
120
+
121
121
  Do **not** reach for `--bulma-box-shadow`/`--bulma-card-shadow` from an ancestor instead —
122
- those are re-declared on `.box`/`.card` themselves, so an inherited value always loses (the
123
- same rule as the extras section below).
122
+ those are re-declared on `.box`/`.card` themselves, so an inherited value always loses. Setting
123
+ `--bulma-shadow` from an ancestor `Theme` is the one override that cascades into all of them
124
+ (the same rule as the extras section below).
124
125
 
125
126
  ## Extras component variables
126
127