@cascivo/react 0.6.2 → 0.7.0

package/dist/toc/use-toc-from-region.js

@@ -1,17 +1,18 @@
 "use client";
 
-import { useSignal as e, useSignalEffect as t } from "@cascivo/core";
+import { useSignal as e, useSignalEffect as t, useSignals as n } from "@cascivo/core";
 //#region ../components/src/toc/use-toc-from-region.ts
-function n(n, r = {}) {
-	let i = r.selector ?? "h2, h3, h4", a = e([]);
+function r(r, i = {}) {
+	n();
+	let a = i.selector ?? "h2, h3, h4", o = e([]);
 	return t(() => {
-		let e = n.current;
-		e && (a.value = Array.from(e.querySelectorAll(i)).filter((e) => e.id !== "").map((e) => ({
+		let e = r.current;
+		e && (o.value = Array.from(e.querySelectorAll(a)).filter((e) => e.id !== "").map((e) => ({
 			id: e.id,
 			label: e.textContent?.trim() ?? "",
 			level: Number(e.tagName.slice(1)) || 2
 		})));
-	}), a;
+	}), o;
 }
 //#endregion
-export { n as useTocFromRegion };
+export { r as useTocFromRegion };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cascivo/react",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "private": false,
   "description": "Prebuilt cascivo design system components — use without copying source",
   "keywords": [
@@ -44,8 +44,8 @@
     "provenance": true
   },
   "dependencies": {
-    "@cascivo/core": "^0.3.1",
-    "@cascivo/i18n": "^0.2.6"
+    "@cascivo/core": "^0.4.0",
+    "@cascivo/i18n": "^0.2.7"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/readme.body.md

@@ -35,9 +35,18 @@ Components ship with `'use client'` preserved in the bundle, so they work inside
 RSC without any extra wrapper.
 
 > **No bundler? (CDN, import maps, plain `<link>`)** Import the aggregate sheet
-> `@cascivo/react/styles.css` — it contains every component's CSS in one file.
-> With a bundler you don't need it; import it only if you prefer one explicit
-> stylesheet over per-component tree-shaking.
+> `@cascivo/react/styles.css` — every component's CSS in one file (~273 KB /
+> ~37 KB gzip, not tree-shaken). With a bundler (CSR) you don't need it; import it
+> only if you prefer one explicit stylesheet over per-component tree-shaking, or
+> for Vite SSR (below), where it is required.
+
+> **Vite SSR / TanStack Start / Remix / workerd?** Those per-component `.css`
+> imports need a bundler to resolve them; a bare server-side ESM loader throws
+> `Unknown file extension ".css"`. Add `ssr: { noExternal: [/^@cascivo\//] }` (or
+> the `cascivoSsr()` plugin from `@cascivo/vite-plugin`) and import
+> `@cascivo/react/styles.css` once in your root entry. Full recipe:
+> [USING-WITH-VITE-SSR.md](https://github.com/cascivo/cascivo/blob/main/docs/USING-WITH-VITE-SSR.md).
+> Next.js App Router needs none of this.
 
 ## Use
 
@@ -98,6 +107,48 @@ aliases are documented in
 All components are client components (`'use client'` is preserved in the
 bundle), so the package works in Next.js App Router projects out of the box.
 
+## Using with AI tools (v0, Cursor, Claude Code, Gemini)
+
+cascivo is AI-first, but a model can only build with it if the knowledge reaches
+the tool. cascivo has no training-data footprint yet, so **don't rely on a tool
+fetching cascivo.com** — that channel is the least reliable one. Use the channels
+that travel with the package instead:
+
+- **One file, one fetch — paste or link this into any chat/agent:**
+  [`https://cascivo.com/llms-full.txt`](https://cascivo.com/llms-full.txt). It is
+  the entire library — setup, the signals/CSS-layer rules, and every component's
+  props/examples/a11y — inlined, so a single successful fetch is enough. The
+  shorter index is [`llms.txt`](https://cascivo.com/llms.txt).
+- **v0 / shadcn CLI** — components install straight from the
+  [shadcn-compatible registry](https://cascivo.com/r/shadcn/registry.json):
+
+  ```sh
+  npx shadcn@latest add https://cascivo.com/r/shadcn/button.json
+  ```
+
+  Each item inlines its own source and points its dependencies at absolute
+  `https://cascivo.com/r/shadcn/<name>.json` URLs, so the CLI resolves them
+  transitively. Register the whole namespace in `components.json` to use short
+  names (`npx shadcn add @cascivo/button`):
+
+  ```json
+  { "registries": { "@cascivo": "https://cascivo.com/r/shadcn/{name}.json" } }
+  ```
+
+- **MCP-capable agents** (Claude Code, Cursor, Gemini CLI, Windsurf) — point the
+  client at the [`@cascivo/mcp`](https://www.npmjs.com/package/@cascivo/mcp)
+  server so it can query components with no web fetch at all:
+
+  ```json
+  { "mcpServers": { "cascivo": { "command": "npx", "args": ["-y", "@cascivo/mcp"] } } }
+  ```
+
+**One rule to give the model:** cascivo is signal-driven — use `useSignal` /
+`useComputed` / `useSignalEffect` from `@cascivo/core`, never `useState` /
+`useEffect`, and in any app without the Babel signals transform a component that
+reads `signal.value` in render must call `useSignals()` first or it won't
+re-render. `llms-full.txt` carries the full contract.
+
 ## Guides
 
 - [Theming & branding](https://github.com/cascivo/cascivo/blob/main/docs/THEMING.md) — match a brand by overriding tokens (layer cascade, the `data-theme` specificity footgun, per-role radius/control-height tokens, a starter theme).
@@ -293,7 +344,7 @@ routing break after adding one of these, check that the import resolves to
 - **DashboardLayout** — Dashboard page layout with stats strip, main content area, and optional aside.
 - **FeatureGrid** — Feature section — AutoGrid of items with optional title, description, and icon slots. Icons are optional; the grid works text-only. Replace demo content before shipping.
 - **Flex** — Flex layout primitive for vertical or horizontal stacking with gap control.
-- **Grid** — CSS grid layout primitive with responsive column collapsing.
+- **Grid** — CSS grid layout primitive with responsive column collapsing. Establishes its own containment, so responsive `cols` adapt to the grid’s own slot width with no wrapper or container ancestor required.
 - **Hero** — Page hero section — centered or split layout with eyebrow, title, description, actions and media slots. Replace demo content before shipping.
 - **Indicator** — Positions an overlay element (badge, dot, count) at a corner of its child
 - **Join** — Groups adjacent children into a seamless joined element by removing interior borders and radii