@sakaniui/react 0.8.8 → 0.8.10

package/AGENTS.md

@@ -16,8 +16,14 @@ import manifest from '@sakaniui/react/manifest.json';
 const button = manifest.components.find((c) => c.name === 'Button'); // props[], contract.requiredProps
 ```
 Editors can query the same data through the bundled MCP server
-(`npx -y -p @sakaniui/react sakaniui-mcp`): `get_component`, `check_usage`, `get_tokens`, `get_guide`,
-`check_compatibility`, `get_changelog`. If it is connected, call `check_usage` on every component you write.
+(`npx -y @sakaniui/mcp`): `search_components`, `get_component`, `search_icons`,
+`check_code`, `check_usage`, `get_tokens`, `get_guide`, `check_compatibility`, `get_changelog`.
+
+**Start from the example, check before you answer.** Every component has `example`: its imports and the
+element with each required prop filled in, type-checked against the release. Start from it instead of
+writing the element from memory. Never guess an icon name: find it with `search_icons` (icons are
+`IconTrash`, `IconSettings`, ... from `@sakaniui/react/icons`, passed as `icon={IconTrash}`, not
+`icon={<IconTrash />}`). If the server is connected, run `check_code` on every snippet you write.
 
 **Versions.** Every component has `since`, the first release that contained it. The project may have an
 older `@sakaniui/react` installed than the one the manifest describes: if an entry is marked

package/CHANGELOG.md

@@ -2,6 +2,70 @@
 
 All notable changes to `@sakaniui/react` are documented here.
 
+## 0.8.10
+
+Readiness release: everything below was found by testing the package the way a new user, an editor
+and an AI agent would, and every fix is now covered by a check that fails the build.
+
+**Installing the library**
+- **Fixed: installing `@sakaniui/react` installed Next.js.** The `geist` and `@fontsource-variable/geist`
+  font packages were runtime dependencies, though the library never loads them, and `geist` requires
+  Next.js as a peer, so every app (Vite included) got Next.js 16. Both are now dev-only; the only runtime
+  dependency is `recharts`. Load Geist yourself if you want it (`@fontsource-variable/geist`); otherwise
+  the system font is used, as before.
+- **Fixed: missing type definitions.** `dist/lib/` was left out of the generated `.d.ts` files, so
+  `LiquidGlass`, `LiquidBackdrop`, `HoverGroup`, `useHoverHighlight`, `useLiquidGlass`, `getContrastColor`
+  and `iconStrokeWidth` had no types: `<LiquidBackdrop />` compiled without its required `src`. The build
+  now fails if any relative import in a shipped `.d.ts` does not resolve.
+- **Fixed docs: `style.css` is required.** The README and the website's Installation page only imported
+  `tokens.css`, which leaves components unstyled. Both now import both stylesheets.
+
+**The MCP server**
+- **New package `@sakaniui/mcp`** (about 190 kB, no dependencies): `npx -y @sakaniui/mcp` starts in
+  about 2 s on a first run. Through `@sakaniui/react` it took ~30 s and ~675 MB, long enough for an editor
+  to give up. The copy in `@sakaniui/react` still works.
+- **`check_code`: no false positives** on 685 real elements across three apps (it reported 77). Aliased
+  and default imports, code inside template strings, native attributes and the non-icon exports of
+  `@sakaniui/react/icons` are handled; it still catches every deliberate mistake in the test set.
+- **Versions per prop and per value.** Each prop added after its component has its own `since` (for
+  example `Switch.variant`, 0.8.4), and values added later are listed in `valuesSince`. `since` now means
+  "first release you could import it", taken from the package's public exports at every release (the
+  social icons are 0.8.6, not 0.3.0). `check_code`, `check_usage` and `get_component` flag props and
+  values the project's installed version does not have.
+- **Invented props are errors.** A prop that is neither the component's own nor an HTML attribute (React's
+  own attribute list now ships in `manifest.json` as `nativeAttributes`) fails `check_code` and
+  `check_usage`, with the real prop list and a suggestion (`leftIcon` -> "did you mean leadingIcon?").
+  Real HTML attributes (`placeholder`, `href`, `name`...) pass silently; `color` gets a note that it does
+  not style the component.
+- **Protocol:** negotiates a supported protocol version, answers `resources/list`, `prompts/list` and
+  batches, exits when the editor disconnects (flushing replies first), and survives a closed pipe.
+  `get_guide` accepts `query`. Tested on Node 18, 20, 22 and 26, with the official MCP SDK client and the
+  MCP Inspector, and documented for Windows (`cmd /c npx ...`).
+- Removed an unresolvable `$schema` link from `manifest.json`.
+
+## 0.8.9
+
+Stops assistants from inventing code. Found by testing the MCP server in Claude Code: it validated a
+snippet correctly, then wrote its own example as `icon={<TrashIcon />}` -- an icon that does not exist,
+passed as an element instead of a component.
+
+- **Examples.** Every component and block in `manifest.json` has `example`: the import lines and the
+  element with each required prop filled in with a value of the right shape (an array of `BreadcrumbItem`
+  gets one real item). Prop types are read from the shipped `.d.ts`, and every example is type-checked
+  against the built package; the build fails if one does not compile.
+- **Icon index.** `@sakaniui/react/icon-index.json` lists all 5,184 icons (and their 1,054 filled
+  variants) with Tabler's category and search tags. The build fails if it differs from the exports.
+- **MCP: `search_icons`.** Finds real icon names by meaning ("delete" -> `IconTrash`); common UI intents
+  rank the conventional icon first.
+- **MCP: `check_code`.** Checks a whole snippet as text (it is never run): imports must exist and come
+  from the right entry point, every SakaniUI element needs its required props, values must be allowed,
+  and icon props must be real icon components passed as `icon={IconTrash}`. Errors carry line numbers
+  and suggestions ("TrashIcon is not exported... Did you mean: IconTrash?").
+- **MCP: `check_usage`** now validates icon props too, and `get_component` points at the example and
+  at `search_icons`.
+- Fixed a type error in `KanbanBoardBlock` (drag attributes when dragging is disabled) that was printed
+  during every build.
+
 ## 0.8.8
 
 Audit of the agent contract and MCP server (accuracy, security, versioning).

package/README.md

@@ -43,12 +43,33 @@ accepts Lucide or Tabler React icons. See `THIRD_PARTY_NOTICES.md` for the MIT l
 npm install @sakaniui/react
 ```
 
-Then import the tokens once at your app's entry point, and any component from the package root:
+Then import the two stylesheets once, at your app's entry point (both are required: `tokens.css` defines
+the design tokens, `style.css` styles the components), and use any component from the package root:
 
 ```tsx
 import '@sakaniui/react/tokens.css';
+import '@sakaniui/react/style.css';
+
+import { Button } from '@sakaniui/react';
+
+export function Example() {
+  return <Button variant="primary">Get started</Button>;
+}
+```
+
+Requires React 19. Typography is set in **Geist**; load the font yourself if you want it (otherwise the
+system font is used):
+
+```bash
+npm install @fontsource-variable/geist
 ```
 
+```tsx
+import '@fontsource-variable/geist';
+```
+
+Charts (`AreaChart`, `BarChart`, ...) use `recharts`, which is installed with the package.
+
 > **Building with AI?** `AGENTS.md` (shipped in this package) explains *why* components behave as they do and what to do when nothing fits. Index for agents: https://www.sakaniui.com/llms.txt
 
 ## Quick start (contributing / browsing the source)
@@ -108,25 +129,31 @@ up instead of guessing prop names.
 ```json
 {
   "mcpServers": {
-    "sakaniui": { "command": "npx", "args": ["-y", "-p", "@sakaniui/react", "sakaniui-mcp"] }
+    "sakaniui": { "command": "npx", "args": ["-y", "@sakaniui/mcp"] }
   }
 }
 ```
 
-Claude Code: `claude mcp add sakaniui -- npx -y -p @sakaniui/react sakaniui-mcp`
+Claude Code: `claude mcp add sakaniui -- npx -y @sakaniui/mcp`
+
+On Windows, launch `npx` through `cmd /c` (`"command": "cmd", "args": ["/c", "npx", "-y", "@sakaniui/mcp"]`,
+or `claude mcp add sakaniui -- cmd /c npx -y @sakaniui/mcp`). Needs Node.js 18 or later.
+
+The server is its own tiny package, [`@sakaniui/mcp`](https://www.npmjs.com/package/@sakaniui/mcp) (about 1 MB, starts in a couple of seconds; it does not install the component library). The copy bundled in `@sakaniui/react` (`npx -y -p @sakaniui/react sakaniui-mcp`) still works but downloads far more.
 
-Tools: `search_components`, `get_component`, `list_components`, `get_tokens`, `check_usage`
-(validates props against the contract), `get_guide`, `check_compatibility` and `get_changelog`.
+Tools: `search_components`, `get_component` (with a type-checked `example`), `search_icons`,
+`check_code` (checks a whole snippet: imports, required props, values, icon names), `check_usage`,
+`list_components`, `get_tokens`, `get_guide`, `check_compatibility` and `get_changelog`.
 
-- **Read-only.** It reads four fixed files from a `@sakaniui/react` install (package.json, the
-  manifest, AGENTS.md, CHANGELOG.md). It writes nothing, runs nothing, opens no network connection and
+- **Read-only.** It reads five fixed files from a `@sakaniui/react` install (package.json, the
+  manifest, the icon index, AGENTS.md, CHANGELOG.md). Code given to `check_code` is read as text, never run. It writes nothing, runs nothing, opens no network connection and
   takes no file paths. Every tool is marked read-only.
 - **Matches your version.** It finds the `@sakaniui/react` installed in your project (working directory,
   or `--project <dir>`) and flags components your version does not have yet, with the release notes for
   the versions in between (`get_changelog`).
 - **Accurate by construction.** `npm run build:lib` fails if the manifest disagrees with the real build:
-  an export that is not described, a prop that is not declared, a token that is not defined, or anything
-  that looks like a private reference.
+  an export that is not described, a prop that is not declared, an example that does not type-check, an
+  icon name that does not exist, a token that is not defined, or anything that looks like a private reference.
 
 ## Glass & liquid glass