@octanejs/mcp-server 0.2.24 → 0.2.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/mcp-server",
-  "version": "0.2.24",
+  "version": "0.2.25",
   "type": "module",
   "engines": {
     "node": ">=22.22.2"

package/skills/build-octane-software.md

@@ -30,6 +30,15 @@ details but do not replace these gates.
   the retained state.
 - Use native event semantics. `onInput` is the per-edit event for text controls;
   do not add synthetic `onChange` compatibility or event wrapper allocation.
+- Style with sibling-scoped `<style>` blocks and assigned theme blocks
+  (`const theme = <style>…</style>`, `class={theme.card}`,
+  `<style apply={theme} />`) instead of a CSS-in-JS runtime. A block styles
+  the items beside it and everything below them, never the element that
+  contains it: put it beside the element in a fragment
+  (`<><style>…</style><div>…</div></>`), inside `@{ … }` and directive bodies
+  too. Keep block CSS static and pass runtime values through custom
+  properties. A block inside a control-flow branch ships its CSS whichever
+  branch renders, so keep branch-only rules small.
 - For SSR, avoid client/server data divergence and duplicate fetches. Exercise
   hydration with production-compiled output and preserve abort/error behavior.
 - Treat bundle size and dependency cost as performance. Check for an official

package/skills/migrate-react-component.md

@@ -45,6 +45,7 @@ locals, early returns) stays above it.
 | text `<input onChange={...}>` meaning every edit | `<input onInput={...}>` (native event) |
 | controlled `value={state}` | keep it — React's controlled semantics apply; pair with `onInput` |
 | `className={clsx(...)}` | `class={[...]}` composes clsx-style natively |
+| CSS Modules `styles.card` / CSS-in-JS | `const theme = <style>…</style>` (a class map: `$class` plus one key per class) and `class={theme.card}`; a `<style>` block among an element's or fragment's children styles the items beside it and below (never its container), and `<style apply={theme} />` applies a theme to those same items |
 | `useDebugValue(x)` | keep or delete — present as an accepted no-op |
 | `React.lazy(() => import(...))` | `lazy()` works as-is (and also accepts a bare component from the loader) |
 | `defaultProps` | parameter defaults / destructuring defaults |

package/skills/react-divergences.md

@@ -85,6 +85,28 @@ React's `{ default }` module shape works, and Octane additionally accepts a
 component directly from the loader. Suspense and ViewTransition are ordinary
 components, so wrapping them in `lazy()` is valid; nested lazy wrappers are not.
 
+## Scoped styles are sibling-scoped
+
+A `<style>` block with raw CSS is TSRX template syntax, not a global stylesheet
+as in React. It is a child of an element or a fragment and is scoped to its
+siblings, not to the `@{ … }` body around it: it styles the items beside it and
+everything below them — never the element that contains it —
+selectors are rewritten with the hash of that children list and the hash is
+stamped on those siblings and their descendants. To style an element, make the
+block and the element fragment siblings (`<><style>…</style><div>…</div></>`);
+a `@{ … }` or directive body holds one output node, so wrap the block and the
+output in a fragment there too. Nested scopes stack their hashes outer to
+inner; several blocks among the same children share one hash; `:global(…)` opts
+out. `const theme = <style>…</style>` yields a class map (`$class` plus one key
+per class) and `<style apply={theme} />` applies it to the items beside it,
+with `apply={[a, b]}` composing. A theme must be declared before its applier.
+The CSS of a control-flow branch is always emitted; only the stamping follows
+the branch. A raw-CSS block is allowed only inside a `@{ … }` or
+`@if`/`@for`/`@switch`/`@try` body; plain TSX keeps React's rule, where
+`<style>{css}</style>` is an ordinary element passed through untouched. Only
+`<style href precedence>` keeps React's Float semantics. Do not port this to
+CSS Modules or a CSS-in-JS runtime.
+
 ## class / className composes clsx-style
 
 Strings, numbers, arrays, objects, and nesting compose into a class string;

package/skills/setup-ssr.md

@@ -24,8 +24,10 @@ const { html, css } = await prerender(App, props, {
 - `html`: rendered markup with hydration markers, plus an inline suspense seed
   script when anything resolved. Hoisted `<title>/<meta>/<link>` fold in
   (spliced into `<head>` if present, else prepended).
-- `css`: deduped `<style data-octane>` tags from scoped styles; place inside
-  `<head>`.
+- `css`: deduped `<style data-octane>` tags from scoped styles, one per hash;
+  a component contributes one per style scope (nested `@{ … }` and
+  control-flow bodies have their own) plus one per assigned theme block. Place
+  them inside `<head>`.
 - Use `renderToString` (from `octane/server`) for a single synchronous pass that
   leaves `@pending` fallbacks in place; use `prerender` to await the data.
 - Options are optional: `nonce` stamps CSP nonces on the emitted inline tags (all
@@ -54,7 +56,9 @@ hydrateRoot(document.getElementById('app')!, App, props);
 ```
 
 Pass the same component and props on both sides. `useId` and scoped styles are
-hydration-stable; the client adopts server DOM instead of rebuilding it.
+hydration-stable, including the stacked scope hashes and applied theme classes
+(`<style apply={theme} />`, `theme.$class`); the client adopts server DOM
+instead of rebuilding it.
 
 ## Two integration paths
 

package/src/bridge.js

@@ -68,6 +68,8 @@ export const KNOWN_BINDINGS = {
 	'react-hook-form': '@octanejs/hook-form',
 	'better-auth/react': '@octanejs/better-auth',
 	'@base-ui-components/react': '@octanejs/base-ui',
+	'@base-ui/react': '@octanejs/base-ui',
+	'@base-ui/utils': '@octanejs/base-ui-utils',
 	'@dnd-kit/react': '@octanejs/dnd-kit',
 	'embla-carousel-react': '@octanejs/embla-carousel',
 	'react-dropzone': '@octanejs/dropzone',

package/src/index.js

@@ -79,6 +79,7 @@ export const BENCHMARK_SUITES = [
 	'radix-collection-order',
 	'router-dispatch',
 	'visx-categorical-scale',
+	'style-unitless',
 	'rspack-css-graph',
 	'floating-tree-navigation',
 	'ink-cursor-update',