npm - @cascivo/react - Versions diffs - 0.17.0 → 0.18.0 - Mend

@cascivo/react 0.17.0 → 0.18.0

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 (16) hide show

package/README.md +14 -13
package/dist/breadcrumb/breadcrumb.js +1 -1
package/dist/code-snippet/code-snippet.js +31 -26
package/dist/dock/dock.js +1 -1
package/dist/index.d.ts +85 -6
package/dist/large-title-header/large-title-header.js +1 -1
package/dist/node/breadcrumb/breadcrumb.js +1 -1
package/dist/node/code-snippet/code-snippet.js +31 -26
package/dist/node/dock/dock.js +1 -1
package/dist/node/large-title-header/large-title-header.js +1 -1
package/dist/node/swap/swap.js +2 -0
package/dist/swap/swap.js +2 -0
package/dist/types.d.ts +21 -0
package/dist/types.js +1 -0
package/package.json +11 -4
package/readme.body.md +14 -13

package/README.md CHANGED Viewed

@@ -73,26 +73,27 @@ RSC without any extra wrapper.
 > **No bundler? (CDN, import maps, plain `<link>`)** Import the aggregate sheet
 > `@cascivo/react/styles.css` — every component's CSS **plus the tokens and the
-> light & dark themes** in one file (~305 KB / ~40 KB gzip, not tree-shaken). It is
+> light & dark themes** in one file (~328 KB / ~47 KB gzip, not tree-shaken). It is
 > self-contained: this single import gives you a fully-colored app with no separate
-> `@cascivo/themes` import. 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.
+> `@cascivo/themes` import. On **any** bundler — CSR, SSR or RSC alike — you don't
+> need it, and importing it costs you the per-component tree-shaking; reach for it
+> only when nothing walks the module graph.
 > **Vite SSR / TanStack Start / Remix / workerd?** The 4-line SSR checklist (full
 > recipe: [USING-WITH-VITE-SSR.md](https://github.com/cascivo/cascivo/blob/main/docs/USING-WITH-VITE-SSR.md)):
 >
-> 1. **`ssr: { noExternal: [/^@cascivo\//] }`** in `vite.config` (or the
->    `cascivoSsr()` plugin from `@cascivo/vite-plugin`). Without it a bare
->    server-side ESM loader can't resolve the per-component `.css` side-effect
->    imports and throws `Unknown file extension ".css"`.
+> 1. **No Vite config needed** on 0.10+ — the `node` export condition ships a
+>    CSS-free server build a bare ESM loader can import. Pinned below 0.10? Add
+>    `ssr: { noExternal: [/^@cascivo\//] }` (or the `cascivoSsr()` plugin from
+>    `@cascivo/vite-plugin`), else the loader throws `Unknown file extension ".css"`.
 > 2. **`@preact/signals-react` 3.x** — on React 19 the 2.x line fails to load. The
 >    peer range enforces `>=3`.
-> 3. **Import the CSS once** in your root entry: `@cascivo/react/styles.css` +
->    `@cascivo/themes/all` (+ `@cascivo/charts/styles.css` if you use charts). If you
->    typecheck (`tsc --noEmit`), these bare `.css` imports need ambient types — add
->    `src/vite-env.d.ts` with `/// <reference types="vite/client" />` or
->    `declare module '*.css'`, else TS2307/TS2882.
+> 3. **Import a theme once** in your root entry: `@cascivo/themes/light-dark.css`
+>    (+ `@cascivo/charts/styles.css` if you use charts). Component CSS is automatic
+>    here too — don't add the aggregate. If you typecheck (`tsc --noEmit`), these
+>    bare `.css` imports need ambient types — add `src/vite-env.d.ts` with
+>    `/// <reference types="vite/client" />` or `declare module '*.css'`, else
+>    TS2307/TS2882.
 > 4. **Theme without a mismatch:** inline `themePreloadScript()` in `<head>` and add
 >    `suppressHydrationWarning` to `<html>`, or hard-code `data-theme` for a fixed theme.
 >

package/dist/breadcrumb/breadcrumb.js CHANGED Viewed

@@ -21,7 +21,7 @@ function s({ items: s, maxVisible: c, className: l, ariaLabel: u }) {
 		}) : e.href === void 0 ? /* @__PURE__ */ o("span", { children: e.label }) : /* @__PURE__ */ o(d, {
 			href: e.href,
 			children: e.label
-		}) }, `${t}-${e.label}`)) })
+		}) }, e.id ?? `${t}-${e.label}`)) })
 	});
 }
 //#endregion

package/dist/code-snippet/code-snippet.js CHANGED Viewed

@@ -6,7 +6,10 @@ import { cn as n, useClipboard as r, useSignals as i } from "@cascivo/core";
 import { builtin as a, t as o } from "@cascivo/i18n";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region ../components/src/code-snippet/code-snippet.tsx
-function l({ code: n, language: r }) {
+function l() {
+	return globalThis.process?.env?.NODE_ENV !== "production";
+}
+function u({ code: n, language: r }) {
 	return /* @__PURE__ */ s("code", {
 		className: t.code,
 		children: e(n, r).map((e, t) => e.type === "text" ? /* @__PURE__ */ s("span", { children: e.value }, t) : /* @__PURE__ */ s("span", {
@@ -15,15 +18,17 @@ function l({ code: n, language: r }) {
 		}, t))
 	});
 }
-function u({ code: e, variant: u = "single", language: d, terminal: f = !1, title: p, showLineNumbers: m, showCopyButton: h, labels: g, className: _ }) {
+function d({ code: e, children: d, variant: f = "single", language: p, terminal: m = !1, title: h, showLineNumbers: g, showCopyButton: _, labels: v, className: y }) {
 	i();
-	let { copied: v, copy: y } = r(), b = g?.copy ?? o(a.codeSnippet.copy), x = g?.copied ?? o(a.codeSnippet.copied), S = h ?? u !== "inline" ? /* @__PURE__ */ s("button", {
+	let b = e ?? d ?? "";
+	l() && e === void 0 && d === void 0 && console.error("CodeSnippet: pass the code either as the `code` prop or as a plain-string child. Rendering nothing.");
+	let { copied: x, copy: S } = r(), C = v?.copy ?? o(a.codeSnippet.copy), w = v?.copied ?? o(a.codeSnippet.copied), T = _ ?? f !== "inline" ? /* @__PURE__ */ s("button", {
 		type: "button",
-		"aria-label": v.value ? x : b,
-		"data-state": v.value ? "copied" : "idle",
+		"aria-label": x.value ? w : C,
+		"data-state": x.value ? "copied" : "idle",
 		className: t.copy,
-		onClick: () => void y(e),
-		children: v.value ? /* @__PURE__ */ s("svg", {
+		onClick: () => void S(b),
+		children: x.value ? /* @__PURE__ */ s("svg", {
 			"aria-hidden": "true",
 			viewBox: "0 0 16 16",
 			className: t.icon,
@@ -56,21 +61,21 @@ function u({ code: e, variant: u = "single", language: d, terminal: f = !1, titl
 			})]
 		})
 	}) : null;
-	if (u === "inline") return /* @__PURE__ */ c("span", {
-		className: n(t.root, _),
+	if (f === "inline") return /* @__PURE__ */ c("span", {
+		className: n(t.root, y),
 		"data-variant": "inline",
 		children: [/* @__PURE__ */ s("code", {
 			className: t.inlineCode,
-			children: e
-		}), S]
+			children: b
+		}), T]
 	});
-	let C = e.split("\n"), w = u === "multi" && m && !d;
+	let E = b.split("\n"), D = f === "multi" && g && !p;
 	return /* @__PURE__ */ c("div", {
-		className: n(t.root, _),
-		"data-variant": u,
-		"data-terminal": f ? "" : void 0,
+		className: n(t.root, y),
+		"data-variant": f,
+		"data-terminal": m ? "" : void 0,
 		children: [
-			f && /* @__PURE__ */ c("div", {
+			m && /* @__PURE__ */ c("div", {
 				className: t.bar,
 				"aria-hidden": "true",
 				children: [/* @__PURE__ */ c("span", {
@@ -80,16 +85,16 @@ function u({ code: e, variant: u = "single", language: d, terminal: f = !1, titl
 						/* @__PURE__ */ s("span", { className: t.dot }),
 						/* @__PURE__ */ s("span", { className: t.dot })
 					]
-				}), p && /* @__PURE__ */ s("span", {
+				}), h && /* @__PURE__ */ s("span", {
 					className: t.title,
-					children: p
+					children: h
 				})]
 			}),
 			/* @__PURE__ */ s("pre", {
 				className: t.pre,
-				children: w ? /* @__PURE__ */ s("code", {
+				children: D ? /* @__PURE__ */ s("code", {
 					className: t.code,
-					children: C.map((e, n) => /* @__PURE__ */ c("span", {
+					children: E.map((e, n) => /* @__PURE__ */ c("span", {
 						className: t.line,
 						children: [/* @__PURE__ */ s("span", {
 							"aria-hidden": "true",
@@ -100,17 +105,17 @@ function u({ code: e, variant: u = "single", language: d, terminal: f = !1, titl
 							children: e
 						})]
 					}, n))
-				}) : d ? /* @__PURE__ */ s(l, {
-					code: e,
-					language: d
+				}) : p ? /* @__PURE__ */ s(u, {
+					code: b,
+					language: p
 				}) : /* @__PURE__ */ s("code", {
 					className: t.code,
-					children: e
+					children: b
 				})
 			}),
-			S
+			T
 		]
 	});
 }
 //#endregion
-export { u as CodeSnippet };
+export { d as CodeSnippet };

package/dist/dock/dock.js CHANGED Viewed

@@ -26,7 +26,7 @@ function s({ items: s, activeIndex: c, className: l, ariaLabel: u }) {
 					className: e.label,
 					children: n.label
 				})]
-			}, r);
+			}, n.id ?? `${r}-${n.label}`);
 		})
 	});
 }

package/dist/index.d.ts CHANGED Viewed

@@ -159,6 +159,11 @@ interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
    * (`neutral | info | success | warning | danger`) as well as Badge's historical spellings
    * (`default`, `destructive`, `error`) — they are aliases of the same tones, so one domain
    * enum can drive `Badge`, `Tag`, `Status` and `Notification` with no lookup table.
+   *
+   * To name this type in your own code, import it: `import type { Tone } from
+   * '@cascivo/react/types'` on the prebuilt path, or from `@cascivo/core` if you copied the
+   * source. Do not add `@cascivo/core` to a prebuilt app just for this; it is a transitive
+   * dependency there.
    */
   variant?: ToneInput | BadgeVariant;
   size?: 'sm' | 'md';
@@ -708,7 +713,8 @@ interface TabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {
    *
    * With `asChild`, `disabled` becomes `aria-disabled`: it is not a valid attribute on an
    * anchor, and a slotted element gets no `type` either. See
-   * [USING-WITH-A-ROUTER.md](../../../../docs/USING-WITH-A-ROUTER.md) for the full recipe.
+   * https://cascivo.com/docs/using-with-a-router.md for the full recipe — offline:
+   * `npx -y @cascivo/docs guide using-with-a-router`.
    */
   asChild?: boolean;
 }
@@ -839,7 +845,8 @@ interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
    * styling lands on your router's `Link`. **This is the supported way to style an
    * in-content router link** — `setLinkComponent` only covers the config-driven nav
    * components (SideNav, ShellHeader, Breadcrumb, …), not links you write in page
-   * content. See `docs/USING-WITH-A-ROUTER.md`.
+   * content. See https://cascivo.com/docs/using-with-a-router.md — offline:
+   * `npx -y @cascivo/docs guide using-with-a-router`.
    *
    * ```tsx
    * <Link asChild><RouterLink to="/projects/a">Project A</RouterLink></Link>
@@ -855,6 +862,17 @@ interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
  */
 declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
 interface BreadcrumbItem {
+  /**
+   * Stable React key. Provide when `label`/`href` may repeat.
+   *
+   * A real breadcrumb repeats hrefs — "Overview" and "Projects" both pointing at `/` is the
+   * normal shape of a console trail — and without an `id` the crumbs key on their index, so
+   * reordering or truncating the trail re-keys every row after the change.
+   * `SideNavItem`, `ShellHeaderNavLink`, `ShellHeaderNavMenuItem`, `HeaderLink`,
+   * `CommandItem` and `SwitcherLink` all carry this field; `BreadcrumbItem` was missed by
+   * both earlier sweeps (2026-08-14 report §9).
+   */
+  id?: string;
   label: string;
   href?: string;
 }
@@ -2782,6 +2800,16 @@ interface StatProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
    * a `Card` you control; `Kpi` always brings its own chrome, which made a `Stat` row and
    * a `Kpi` row on adjacent pages of one dashboard look like different products. Set this
    * when you are mixing the two, or use it instead of hand-wrapping every `Stat` in a `Card`.
+   *
+   * ⚠ **`card` matches the CHROME only — the internal layout still differs, so do not mix
+   * `Stat` and `Kpi` in one app.** `Kpi` puts value and delta on one line with the sparkline
+   * below; `Stat` stacks value → delta → help text and puts `visual` in a trailing slot.
+   * With `card` set they share surface, border, radius and padding and still read as two
+   * tile designs (2026-08-14 report §6 — the exact symptom this prop was added to cure, on
+   * an overview page using `Stat card` next to an analytics page using `Kpi`).
+   *
+   * Pick one per app: `Kpi` when you have a numeric delta it should format and a sparkline;
+   * `Stat` otherwise.
    */
   card?: boolean;
   /** Trailing visual, e.g. a `Sparkline` from the separate `@cascivo/charts` package (not exported from `@cascivo/react`; `pnpm add @cascivo/charts`). Purely decorative — mark it `aria-hidden` yourself if it duplicates the value/delta already announced. */
@@ -2804,6 +2832,11 @@ interface StatusProps extends HTMLAttributes<HTMLSpanElement> {
    * Severity tone. Accepts the catalog-wide `Tone` vocabulary
    * (`neutral | info | success | warning | danger`) plus Status's historical spellings
    * (`error`, `destructive`, `default`).
+   *
+   * To name this type in your own code — a `Record<DeployState, Tone>` is the usual shape —
+   * import it: `import type { Tone } from '@cascivo/react/types'` on the prebuilt path, or
+   * from `@cascivo/core` if you copied the source. Do not add `@cascivo/core` to a prebuilt
+   * app just for this; it is a transitive dependency there.
    */
   status?: ToneInput;
   /**
@@ -4181,6 +4214,16 @@ declare function Resizable({
   label
 }: ResizableProps): import("react").JSX.Element;
 interface DockItem {
+  /**
+   * Stable React key. Provide when `label`/`href` may repeat.
+   *
+   * Without it the items key on their array index, so inserting or reordering a dock entry
+   * re-keys every item after it. `SideNavItem`, `ShellHeaderNavLink`, `SwitcherLink`,
+   * `BreadcrumbItem` and the rest carry this field; `Dock` was missed by all three earlier
+   * sweeps and found only once the guard derived its subjects instead of listing them
+   * (2026-08-14 report §9).
+   */
+  id?: string;
   label: string;
   icon: React.ReactNode;
   onClick?: () => void;
@@ -4495,8 +4538,24 @@ interface NativeSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>
 declare const NativeSelect: import("react").ForwardRefExoticComponent<NativeSelectProps & import("react").RefAttributes<HTMLSelectElement>>;
 type CodeLang = 'bash' | 'css' | 'js' | 'ts';
 interface CodeSnippetProps {
-  /** The code to display (and copy). */
-  code: string;
+  /**
+   * The code to display (and copy). Equivalent to passing a plain string as `children`;
+   * `code` wins if you pass both.
+   *
+   * One of the two is required. It is a **string**, not a `ReactNode`, because the content
+   * is tokenized for highlighting and handed to the clipboard — neither works on arbitrary
+   * JSX, so accepting nodes here would silently produce an uncopyable snippet.
+   */
+  code?: string;
+  /**
+   * The code, as children — `<CodeSnippet>npm i foo</CodeSnippet>`.
+   *
+   * Every other content component in the catalog takes children, so this was the natural
+   * guess and the only compile error in a 2026-08-14 adopter's whole build (§8). Must be a
+   * plain string for the reason on `code` above; interpolation is fine
+   * (`{`npm i ${pkg}`}`), arbitrary elements are not.
+   */
+  children?: string;
   /**
    * inline = a <code> span; single = one-line <pre>; multi = multi-line <pre>.
    *
@@ -4535,6 +4594,7 @@ interface CodeSnippetProps {
  */
 declare function CodeSnippet({
   code,
+  children,
   variant,
   language,
   terminal,
@@ -5037,8 +5097,27 @@ declare function AutoGrid({
   ...props
 }: AutoGridProps): import("react").JSX.Element;
 interface PageHeaderProps {
-  title: string;
-  description?: string;
+  /**
+   * The page title, rendered as the `<h1>`.
+   *
+   * `ReactNode`, not `string`, so a deploy console can put the production domain in the
+   * heading as a link and a status badge beside the project name — the canonical shape of a
+   * project header. `RECIPE-DASHBOARD.md` tells you not to hand-compose `PageHeader` out of
+   * `Heading`/`Text`/`Flex`, so this has to be composable here (2026-08-14 report §7).
+   *
+   * ```tsx
+   * <PageHeader
+   *   title={<>acme-web <Badge variant="success">Ready</Badge></>}
+   *   description={<>Deployed from <Link asChild><RouterLink to="/c/abc">abc123</RouterLink></Link></>}
+   * />
+   * ```
+   *
+   * Keep it short and heading-like: it is an `<h1>`, so anything block-level inside it is
+   * invalid HTML and will fight the heading's own typography.
+   */
+  title: ReactNode;
+  /** Supporting line under the title, rendered as a `<p>`. Accepts nodes, like `title`. */
+  description?: ReactNode;
   breadcrumb?: ReactNode;
   actions?: ReactNode;
   className?: string;

package/dist/large-title-header/large-title-header.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import e from "./large-title-header.module.js";
-import { cn as t } from "@cascivo/core";
+import { cn as t } from "@cascivo/core/pure";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region ../components/src/large-title-header/large-title-header.tsx
 function i({ title: i, children: a, leading: o, actions: s, level: c = 1, collapseDistance: l = 48, className: u }) {

package/dist/node/breadcrumb/breadcrumb.js CHANGED Viewed

@@ -21,7 +21,7 @@ function s({ items: s, maxVisible: c, className: l, ariaLabel: u }) {
 		}) : e.href === void 0 ? /* @__PURE__ */ o("span", { children: e.label }) : /* @__PURE__ */ o(d, {
 			href: e.href,
 			children: e.label
-		}) }, `${t}-${e.label}`)) })
+		}) }, e.id ?? `${t}-${e.label}`)) })
 	});
 }
 //#endregion

package/dist/node/code-snippet/code-snippet.js CHANGED Viewed

@@ -6,7 +6,10 @@ import { cn as n, useClipboard as r, useSignals as i } from "@cascivo/core";
 import { builtin as a, t as o } from "@cascivo/i18n";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region ../components/src/code-snippet/code-snippet.tsx
-function l({ code: n, language: r }) {
+function l() {
+	return globalThis.process?.env?.NODE_ENV !== "production";
+}
+function u({ code: n, language: r }) {
 	return /* @__PURE__ */ s("code", {
 		className: t.code,
 		children: e(n, r).map((e, t) => e.type === "text" ? /* @__PURE__ */ s("span", { children: e.value }, t) : /* @__PURE__ */ s("span", {
@@ -15,15 +18,17 @@ function l({ code: n, language: r }) {
 		}, t))
 	});
 }
-function u({ code: e, variant: u = "single", language: d, terminal: f = !1, title: p, showLineNumbers: m, showCopyButton: h, labels: g, className: _ }) {
+function d({ code: e, children: d, variant: f = "single", language: p, terminal: m = !1, title: h, showLineNumbers: g, showCopyButton: _, labels: v, className: y }) {
 	i();
-	let { copied: v, copy: y } = r(), b = g?.copy ?? o(a.codeSnippet.copy), x = g?.copied ?? o(a.codeSnippet.copied), S = h ?? u !== "inline" ? /* @__PURE__ */ s("button", {
+	let b = e ?? d ?? "";
+	l() && e === void 0 && d === void 0 && console.error("CodeSnippet: pass the code either as the `code` prop or as a plain-string child. Rendering nothing.");
+	let { copied: x, copy: S } = r(), C = v?.copy ?? o(a.codeSnippet.copy), w = v?.copied ?? o(a.codeSnippet.copied), T = _ ?? f !== "inline" ? /* @__PURE__ */ s("button", {
 		type: "button",
-		"aria-label": v.value ? x : b,
-		"data-state": v.value ? "copied" : "idle",
+		"aria-label": x.value ? w : C,
+		"data-state": x.value ? "copied" : "idle",
 		className: t.copy,
-		onClick: () => void y(e),
-		children: v.value ? /* @__PURE__ */ s("svg", {
+		onClick: () => void S(b),
+		children: x.value ? /* @__PURE__ */ s("svg", {
 			"aria-hidden": "true",
 			viewBox: "0 0 16 16",
 			className: t.icon,
@@ -56,21 +61,21 @@ function u({ code: e, variant: u = "single", language: d, terminal: f = !1, titl
 			})]
 		})
 	}) : null;
-	if (u === "inline") return /* @__PURE__ */ c("span", {
-		className: n(t.root, _),
+	if (f === "inline") return /* @__PURE__ */ c("span", {
+		className: n(t.root, y),
 		"data-variant": "inline",
 		children: [/* @__PURE__ */ s("code", {
 			className: t.inlineCode,
-			children: e
-		}), S]
+			children: b
+		}), T]
 	});
-	let C = e.split("\n"), w = u === "multi" && m && !d;
+	let E = b.split("\n"), D = f === "multi" && g && !p;
 	return /* @__PURE__ */ c("div", {
-		className: n(t.root, _),
-		"data-variant": u,
-		"data-terminal": f ? "" : void 0,
+		className: n(t.root, y),
+		"data-variant": f,
+		"data-terminal": m ? "" : void 0,
 		children: [
-			f && /* @__PURE__ */ c("div", {
+			m && /* @__PURE__ */ c("div", {
 				className: t.bar,
 				"aria-hidden": "true",
 				children: [/* @__PURE__ */ c("span", {
@@ -80,16 +85,16 @@ function u({ code: e, variant: u = "single", language: d, terminal: f = !1, titl
 						/* @__PURE__ */ s("span", { className: t.dot }),
 						/* @__PURE__ */ s("span", { className: t.dot })
 					]
-				}), p && /* @__PURE__ */ s("span", {
+				}), h && /* @__PURE__ */ s("span", {
 					className: t.title,
-					children: p
+					children: h
 				})]
 			}),
 			/* @__PURE__ */ s("pre", {
 				className: t.pre,
-				children: w ? /* @__PURE__ */ s("code", {
+				children: D ? /* @__PURE__ */ s("code", {
 					className: t.code,
-					children: C.map((e, n) => /* @__PURE__ */ c("span", {
+					children: E.map((e, n) => /* @__PURE__ */ c("span", {
 						className: t.line,
 						children: [/* @__PURE__ */ s("span", {
 							"aria-hidden": "true",
@@ -100,17 +105,17 @@ function u({ code: e, variant: u = "single", language: d, terminal: f = !1, titl
 							children: e
 						})]
 					}, n))
-				}) : d ? /* @__PURE__ */ s(l, {
-					code: e,
-					language: d
+				}) : p ? /* @__PURE__ */ s(u, {
+					code: b,
+					language: p
 				}) : /* @__PURE__ */ s("code", {
 					className: t.code,
-					children: e
+					children: b
 				})
 			}),
-			S
+			T
 		]
 	});
 }
 //#endregion
-export { u as CodeSnippet };
+export { d as CodeSnippet };

package/dist/node/dock/dock.js CHANGED Viewed

@@ -26,7 +26,7 @@ function s({ items: s, activeIndex: c, className: l, ariaLabel: u }) {
 					className: e.label,
 					children: n.label
 				})]
-			}, r);
+			}, n.id ?? `${r}-${n.label}`);
 		})
 	});
 }

package/dist/node/large-title-header/large-title-header.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import e from "./large-title-header.module.js";
-import { cn as t } from "@cascivo/core";
+import { cn as t } from "@cascivo/core/pure";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region ../components/src/large-title-header/large-title-header.tsx
 function i({ title: i, children: a, leading: o, actions: s, level: c = 1, collapseDistance: l = 48, className: u }) {

package/dist/node/swap/swap.js CHANGED Viewed

@@ -1,3 +1,5 @@
+"use client";
 import e from "./swap.module.js";
 import { useControllableSignal as t, useSignals as n } from "@cascivo/core";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";

package/dist/swap/swap.js CHANGED Viewed

@@ -1,3 +1,5 @@
+"use client";
 import e from "./swap.module.js";
 import { useControllableSignal as t, useSignals as n } from "@cascivo/core";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";

package/dist/types.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+/**
+ * The catalog-wide vocabulary types, importable on the prebuilt path.
+ *
+ * `Status.status` and `Badge.variant` are `ToneInput`; every layout `gap` is a
+ * `SpaceStep`. These declarations are the same ones the main entry's props reference, so
+ * a value typed here is assignable there.
+ *
+ *   import type { Tone } from '@cascivo/react/types'
+ *   const TONE: Record<DeployState, Tone> = { ready: 'success', error: 'danger' }
+ *   <Status status={TONE[deployment.state]} />
+ */
+export type {
+  Tone,
+  ToneAlias,
+  ToneInput,
+  Progress,
+  ProgressAlias,
+  ProgressInput,
+  SpaceStep,
+  RovingOrientation,
+} from '@cascivo/core'

package/dist/types.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cascivo/react",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "private": false,
   "description": "Prebuilt cascivo design system components — use without copying source. @cascivo/themes installs with it; pair with @cascivo/charts (data-viz) and @cascivo/icons. Docs offline: npx @cascivo/docs",
   "keywords": [
@@ -33,10 +33,16 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "react-server": "./dist/index.js",
       "node": "./dist/node/index.js",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/types.js",
+      "default": "./dist/types.js"
+    },
     "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json"
   },
@@ -45,13 +51,14 @@
     "provenance": true
   },
   "dependencies": {
-    "@cascivo/core": "^0.17.0",
-    "@cascivo/i18n": "^0.17.0",
-    "@cascivo/themes": "^0.4.11"
+    "@cascivo/core": "^0.18.0",
+    "@cascivo/i18n": "^0.18.0",
+    "@cascivo/themes": "^0.4.13"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
+    "@types/node": "^25",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29",

package/readme.body.md CHANGED Viewed

@@ -55,26 +55,27 @@ RSC without any extra wrapper.
 > **No bundler? (CDN, import maps, plain `<link>`)** Import the aggregate sheet
 > `@cascivo/react/styles.css` — every component's CSS **plus the tokens and the
-> light & dark themes** in one file (~305 KB / ~40 KB gzip, not tree-shaken). It is
+> light & dark themes** in one file (~328 KB / ~47 KB gzip, not tree-shaken). It is
 > self-contained: this single import gives you a fully-colored app with no separate
-> `@cascivo/themes` import. 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.
+> `@cascivo/themes` import. On **any** bundler — CSR, SSR or RSC alike — you don't
+> need it, and importing it costs you the per-component tree-shaking; reach for it
+> only when nothing walks the module graph.
 > **Vite SSR / TanStack Start / Remix / workerd?** The 4-line SSR checklist (full
 > recipe: [USING-WITH-VITE-SSR.md](https://github.com/cascivo/cascivo/blob/main/docs/USING-WITH-VITE-SSR.md)):
 >
-> 1. **`ssr: { noExternal: [/^@cascivo\//] }`** in `vite.config` (or the
->    `cascivoSsr()` plugin from `@cascivo/vite-plugin`). Without it a bare
->    server-side ESM loader can't resolve the per-component `.css` side-effect
->    imports and throws `Unknown file extension ".css"`.
+> 1. **No Vite config needed** on 0.10+ — the `node` export condition ships a
+>    CSS-free server build a bare ESM loader can import. Pinned below 0.10? Add
+>    `ssr: { noExternal: [/^@cascivo\//] }` (or the `cascivoSsr()` plugin from
+>    `@cascivo/vite-plugin`), else the loader throws `Unknown file extension ".css"`.
 > 2. **`@preact/signals-react` 3.x** — on React 19 the 2.x line fails to load. The
 >    peer range enforces `>=3`.
-> 3. **Import the CSS once** in your root entry: `@cascivo/react/styles.css` +
->    `@cascivo/themes/all` (+ `@cascivo/charts/styles.css` if you use charts). If you
->    typecheck (`tsc --noEmit`), these bare `.css` imports need ambient types — add
->    `src/vite-env.d.ts` with `/// <reference types="vite/client" />` or
->    `declare module '*.css'`, else TS2307/TS2882.
+> 3. **Import a theme once** in your root entry: `@cascivo/themes/light-dark.css`
+>    (+ `@cascivo/charts/styles.css` if you use charts). Component CSS is automatic
+>    here too — don't add the aggregate. If you typecheck (`tsc --noEmit`), these
+>    bare `.css` imports need ambient types — add `src/vite-env.d.ts` with
+>    `/// <reference types="vite/client" />` or `declare module '*.css'`, else
+>    TS2307/TS2882.
 > 4. **Theme without a mismatch:** inline `themePreloadScript()` in `<head>` and add
 >    `suppressHydrationWarning` to `<html>`, or hard-code `data-theme` for a fixed theme.
 >