@imfusion/web-ui 0.5.1-dev.53.gb710322e → 0.5.1-dev.6.g9d275fa8

package/README.md

@@ -38,41 +38,8 @@ import "@imfusion/web-ui/styles.css";
 import { WebUIProvider } from "@imfusion/web-ui";
 ```
 
-### LLM integration
-
-The `web-ui` package does offer first-class support for LLMs, but it's not wired up by default.
-
-To install the skills, run this command after the package is installed:
-
-```bash
-npx web-ui-install
-```
-
-The binary asks which LLM client you use and installs everything it needs. Run it again after a version bump and it refreshes
-the directories it already installed into, without asking again — `--reconfigure` re-opens that choice.
-
-The optional `--hooks` flag also installs the agent lifecycle hooks and registers them for both hosts, in
-`.claude/settings.json` (Claude Code) and `.codex/hooks.json` (Codex). Three hooks inject one fixed line each: `SessionStart`
-and `SubagentStart` point the agent at the `imf-web-ui` skills router, and `UserPromptSubmit` names the companion skills to
-consult per task. A fourth, the `Stop` gate, blocks a turn that edited source files once, until the agent has addressed the
-project's verification. Re-running the installer refreshes the scripts and prunes retired ones along with their
-registrations. Without `--hooks`, the skills are still available but no lifecycle hook runs. The full flow is documented in
-the shipped [`agent-tooling` topic](./src/llms/skills/imf-web-ui-conventions/topics/agent-tooling.md) of the conventions
-skill.
-
-**Available consumer skills - `/imf-web-ui-*`**
-
-| Skill                     | What it does                                                                   |
-| ------------------------- | ------------------------------------------------------------------------------ |
-| `/imf-web-ui`             | The router: decides whether guidance is needed, then which companion to open.  |
-| `/imf-web-ui-setup`       | Plan and, after approval, bootstrap a consumer project by topic.               |
-| `/imf-web-ui-components`  | Component and icon reference — what exists and how it's meant to be used.      |
-| `/imf-web-ui-ux`          | UX guidance for building interfaces with the library.                          |
-| `/imf-web-ui-conventions` | The frontend conventions baseline, including the sanctioned styling seams.     |
-| `/imf-web-ui-audit`       | Read-only health check for a consumer project, ending in a plan you approve.   |
-| `/imf-web-ui-update`      | Update the library, skills, and optional hooks, then verify before committing. |
-
-Start at `/imf-web-ui` — it routes to the rest. Storybook's **User Guide → AI Agents** page covers the whole family.
+**There is also an AI skill to help you set up the Web UI library in your project:
+[`/imf-web-ui-setup`](./src/llms/skills/imf-web-ui-setup/SKILL.md).**
 
 ### Versions and updates
 
@@ -118,33 +85,27 @@ npm run git:config   # hooks path + rebase-only pull/merge
 
 **Try out **`/web-ui-dev-getting-started`** for an ai assisted start.**
 
-### LLM integration
-
-These skills are shipped with a `/web-ui-dev-*` prefix, so to make their names identifiable and not pollute the skill
-namespace.
-
-| Skill                                     | What it does                                                                                                            |
-| ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
-| `/web-ui-dev-getting-started`             | Interactive intro — gauges your experience, works out your goal, routes you.                                            |
-| `/web-ui-dev-start`                       | Starting ritual for any task: Jira context, `master` vs. a worktree, context summary.                                   |
-| `/web-ui-dev-new-component`               | Scaffolds an architecture-compliant primitive (adapted or absorbed).                                                    |
-| `/web-ui-dev-update-component`            | Pointers to every file a prop, variant, or sub-component change touches.                                                |
-| `/web-ui-dev-design-component`            | Brand design pass for a component that works but isn't styled yet.                                                      |
-| `/web-ui-dev-story`                       | Author or update a Storybook story.                                                                                     |
-| `/web-ui-dev-commit`                      | Commit workflow: changelog skill, staged docs audit, CI-parity checks, house commit format.                             |
-| `/web-ui-dev-changelog`                   | Generate and validate the required one-line CHANGELOG.md entry for a web-ui change, including direct commits to master. |
-| `/web-ui-dev-audit-docs`                  | Audit docs against staged or recent changes for staleness, gaps, and drift.                                             |
-| `/web-ui-dev-audit-pass-through-defaults` | Check `@default` annotations on pass-through props against Base UI upstream.                                            |
-| `/web-ui-dev-teardown-worktree`           | Tear down a worktree, wherever it lives — merging its branch first or dropping it.                                      |
-| `/web-ui-dev-refresh-design-reference`    | Refresh the committed brand snapshots in `design/` from the Figma styleguide.                                           |
-| `/web-ui-dev-mcp`                         | Set up or recover Storybook, DevTools, Atlassian, or Figma MCP access.                                                  |
+### Development skills — `web-ui-dev-*`
+
+These skills are shipped with a `web-ui-dev` prefix, so to make their names identifiable and not pollute the skill namespace.
+
+| Skill                                     | What it does                                                                          |
+| ----------------------------------------- | ------------------------------------------------------------------------------------- |
+| `/web-ui-dev-getting-started`             | Interactive intro — gauges your experience, works out your goal, routes you.          |
+| `/web-ui-dev-start`                       | Starting ritual for any task: Jira context, `master` vs. a worktree, context summary. |
+| `/web-ui-dev-new-component`               | Scaffolds an architecture-compliant primitive (adapted or absorbed).                  |
+| `/web-ui-dev-update-component`            | Pointers to every file a prop, variant, or sub-component change touches.              |
+| `/web-ui-dev-design-component`            | Brand design pass for a component that works but isn't styled yet.                    |
+| `/web-ui-dev-story`                       | Author or update a Storybook story.                                                   |
+| `/web-ui-dev-commit`                      | Commit workflow: staged docs audit, CI-parity checks, house commit format.            |
+| `/web-ui-dev-audit-docs`                  | Audit docs against staged or recent changes for staleness, gaps, and drift.           |
+| `/web-ui-dev-audit-pass-through-defaults` | Check `@default` annotations on pass-through props against Base UI upstream.          |
+| `/web-ui-dev-manage-worktrees`            | Create, close, or discard a worktree in `.workspaces/`.                               |
+| `/web-ui-dev-refresh-design-reference`    | Refresh the committed brand snapshots in `design/` from the Figma styleguide.         |
+| `/web-ui-dev-mcp`                         | Set up or recover Storybook, DevTools, Atlassian, or Figma MCP access.                |
 
 ## Releasing
 
-Release-facing changes are recorded as one-line entries in [`CHANGELOG.md`](./CHANGELOG.md) under `## [Unreleased]`. The
-commit workflow requires an entry for pull-request commits and direct commits to `master`, with only narrow mechanical
-exceptions. Each entry ends with its author as ` — Name <email>`, taken from the committer's git config.
-
 The published version is derived from git tags, not from `package.json`.
 
 The `version` field stays at `0.0.0` in the repository and he CI computes the real number with

package/bin/install-skill.js

@@ -0,0 +1,180 @@
+#!/usr/bin/env node
+
+// Installs the consumer skill family (../src/llms/skills/imf-web-ui*/)
+// into the consumer project's agent skill directories. Runs in the
+// CONSUMER's environment, so it may only use this package's real runtime
+// dependencies (@clack/prompts). Never wire this into a postinstall hook:
+// ambient script execution on `npm install` is a live supply-chain attack
+// vector — install stays an explicit, user-run command.
+//
+// The skills cross-reference each other, so they install as one bundle.
+// When both targets are selected, .agents/skills/ holds the real copy and
+// .claude/skills/ symlinks it (this repo's own convention) so the two
+// can't drift apart.
+
+import {
+  cpSync,
+  existsSync,
+  lstatSync,
+  mkdirSync,
+  readdirSync,
+  readFileSync,
+  rmSync,
+  symlinkSync,
+  writeFileSync
+} from "node:fs";
+import { dirname, relative, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import * as p from "@clack/prompts";
+
+const SKILL_PREFIX = "imf-web-ui";
+const VERSION_MARKER = ".imf-web-ui-skill-version.json";
+
+const here = dirname(fileURLToPath(import.meta.url));
+// Source is relative to THIS SCRIPT's location (inside node_modules), not
+// the consumer's cwd — the script is invoked from the consumer's project
+// root, but the skills it copies ship alongside this file in the package.
+const skillsRoot = resolve(here, "..", "src", "llms", "skills");
+const packageJson = JSON.parse(readFileSync(resolve(here, "..", "package.json"), "utf-8"));
+const currentVersion = packageJson.version;
+
+// Destination is relative to the consumer's project root (cwd), since
+// that's where their `.claude/` or `.agents/` directory lives.
+const projectRoot = process.cwd();
+
+const TARGETS = {
+  claude: { label: "Claude Code", root: resolve(projectRoot, ".claude", "skills") },
+  agents: { label: "Vendor-neutral (.agents/)", root: resolve(projectRoot, ".agents", "skills") }
+};
+
+function discoverSkills() {
+  if (!existsSync(skillsRoot)) return [];
+  return readdirSync(skillsRoot, { withFileTypes: true })
+    .filter(entry => entry.isDirectory() && entry.name.startsWith(SKILL_PREFIX))
+    .map(entry => entry.name)
+    .sort();
+}
+
+function displayPath(absPath) {
+  return `./${relative(projectRoot, absPath)}`;
+}
+
+function readInstalledVersion(dir) {
+  const markerPath = resolve(dir, VERSION_MARKER);
+  if (!existsSync(markerPath)) return null;
+  try {
+    return JSON.parse(readFileSync(markerPath, "utf-8")).version ?? null;
+  } catch {
+    return null;
+  }
+}
+
+function writeRealCopy(sourceDir, destDir) {
+  mkdirSync(dirname(destDir), { recursive: true });
+  // force: true makes re-running after a version bump overwrite cleanly.
+  cpSync(sourceDir, destDir, { recursive: true, force: true });
+  writeFileSync(resolve(destDir, VERSION_MARKER), JSON.stringify({ version: currentVersion }, null, 2) + "\n");
+}
+
+function writeSymlink(linkPath, targetPath) {
+  mkdirSync(dirname(linkPath), { recursive: true });
+  // lstat (not existsSync, which follows symlinks) catches a broken/stale
+  // symlink left over from a prior run, not just a real file or directory.
+  if (lstatSync(linkPath, { throwIfNoEntry: false })) {
+    rmSync(linkPath, { recursive: true, force: true });
+  }
+  symlinkSync(relative(dirname(linkPath), targetPath), linkPath);
+}
+
+// --target claude|agents (repeatable) selects targets without the
+// interactive prompt — for CI and scripted installs.
+function parseTargetFlags(argv) {
+  const targets = [];
+  for (let i = 0; i < argv.length; i++) {
+    if (argv[i] !== "--target") continue;
+    const value = argv[i + 1];
+    if (!value || !(value in TARGETS)) {
+      console.error(`--target expects one of: ${Object.keys(TARGETS).join(", ")}`);
+      process.exit(1);
+    }
+    targets.push(value);
+    i++;
+  }
+  return targets;
+}
+
+async function main() {
+  const skills = discoverSkills();
+  const flagTargets = parseTargetFlags(process.argv.slice(2));
+
+  p.intro(`@imfusion/web-ui — install the ${SKILL_PREFIX} skills (${skills.length})`);
+
+  if (skills.length === 0) {
+    p.log.error(`No skills found at ${skillsRoot}. Reinstall @imfusion/web-ui and try again.`);
+    p.outro("Nothing installed.");
+    process.exitCode = 1;
+    return;
+  }
+
+  const existingVersions = Object.values(TARGETS)
+    .flatMap(({ root }) => skills.map(name => readInstalledVersion(resolve(root, name))))
+    .filter(Boolean);
+  if (existingVersions.length > 0 && existingVersions.every(v => v === currentVersion)) {
+    p.log.info(`Already up to date (v${currentVersion}). Re-running will overwrite with the same content.`);
+  } else if (existingVersions.some(v => v !== currentVersion)) {
+    const from = existingVersions.find(v => v !== currentVersion);
+    p.log.info(`Updating installed skills from v${from} to v${currentVersion}.`);
+  }
+
+  p.log.message(`Skills in this bundle:\n${skills.map(name => `  - ${name}`).join("\n")}`);
+
+  let selected;
+  if (flagTargets.length > 0) {
+    selected = flagTargets;
+    p.log.info(`Targets from --target flags: ${selected.join(", ")}`);
+  } else {
+    selected = await p.multiselect({
+      message: "Install into which skill directory (or directories)?",
+      options: Object.entries(TARGETS).map(([key, { label, root }]) => ({
+        value: key,
+        label,
+        hint: displayPath(root)
+      })),
+      required: true
+    });
+
+    if (p.isCancel(selected)) {
+      p.cancel("Cancelled — nothing installed.");
+      return;
+    }
+  }
+
+  const both = selected.includes("claude") && selected.includes("agents");
+
+  for (const name of skills) {
+    const sourceDir = resolve(skillsRoot, name);
+    if (both) {
+      // .agents/ is the canonical real copy; .claude/ aliases it via symlink.
+      const realDir = resolve(TARGETS.agents.root, name);
+      writeRealCopy(sourceDir, realDir);
+      writeSymlink(resolve(TARGETS.claude.root, name), realDir);
+    } else {
+      for (const key of selected) {
+        writeRealCopy(sourceDir, resolve(TARGETS[key].root, name));
+      }
+    }
+  }
+
+  if (both) {
+    p.log.success(`Vendor-neutral (.agents/) -> ${displayPath(TARGETS.agents.root)}/${SKILL_PREFIX}*`);
+    p.log.success(`Claude Code -> ${displayPath(TARGETS.claude.root)}/${SKILL_PREFIX}* (symlinks -> .agents/)`);
+  } else {
+    for (const key of selected) {
+      p.log.success(`${TARGETS[key].label} -> ${displayPath(TARGETS[key].root)}/${SKILL_PREFIX}*`);
+    }
+  }
+
+  p.outro(`Done — ${skills.length} skills installed.`);
+}
+
+await main();

package/dist/code-qBbqAHK-.js

@@ -0,0 +1,190 @@
+import { a as e, r as t, t as n } from "./meta-B8C51eyL.js";
+import { createContext as r, createElement as i, forwardRef as a, useCallback as o, useContext as s, useEffect as c, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region node_modules/lucide-react/dist/esm/shared/src/utils/mergeClasses.mjs
+var p = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) === t).join(" ").trim(), m = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), h = (e) => e.replace(/^([A-Z])|[\s-_]+(\w)/g, (e, t, n) => n ? n.toUpperCase() : t.toLowerCase()), g = (e) => {
+	let t = h(e);
+	return t.charAt(0).toUpperCase() + t.slice(1);
+}, _ = {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 24,
+	height: 24,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+}, v = (e) => {
+	for (let t in e) if (t.startsWith("aria-") || t === "role" || t === "title") return !0;
+	return !1;
+}, y = r({}), b = () => s(y), x = a(({ color: e, size: t, strokeWidth: n, absoluteStrokeWidth: r, className: a = "", children: o, iconNode: s, ...c }, l) => {
+	let { size: u = 24, strokeWidth: d = 2, absoluteStrokeWidth: f = !1, color: m = "currentColor", className: h = "" } = b() ?? {}, g = r ?? f ? Number(n ?? d) * 24 / Number(t ?? u) : n ?? d;
+	return i("svg", {
+		ref: l,
+		..._,
+		width: t ?? u ?? _.width,
+		height: t ?? u ?? _.height,
+		stroke: e ?? m,
+		strokeWidth: g,
+		className: p("lucide", h, a),
+		...!o && !v(c) && { "aria-hidden": "true" },
+		...c
+	}, [...s.map(([e, t]) => i(e, t)), ...Array.isArray(o) ? o : [o]]);
+}), S = (e, t) => {
+	let n = a(({ className: n, ...r }, a) => i(x, {
+		ref: a,
+		iconNode: t,
+		className: p(`lucide-${m(g(e))}`, `lucide-${e}`, n),
+		...r
+	}));
+	return n.displayName = g(e), n;
+}, C = S("arrow-right", [["path", {
+	d: "M5 12h14",
+	key: "1ays0h"
+}], ["path", {
+	d: "m12 5 7 7-7 7",
+	key: "xquz4c"
+}]]), w = S("arrow-up-right", [["path", {
+	d: "M7 7h10v10",
+	key: "1tivn9"
+}], ["path", {
+	d: "M7 17 17 7",
+	key: "1vkiza"
+}]]), T = S("check", [["path", {
+	d: "M20 6 9 17l-5-5",
+	key: "1gmf2c"
+}]]), E = S("copy", [["rect", {
+	width: "14",
+	height: "14",
+	x: "8",
+	y: "8",
+	rx: "2",
+	ry: "2",
+	key: "17jyea"
+}], ["path", {
+	d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",
+	key: "zix9uf"
+}]]);
+//#endregion
+//#region src/hooks/use-clipboard.ts
+function D({ timeout: e = 1500 } = {}) {
+	let [t, n] = u(!1), r = l(void 0);
+	return c(() => () => clearTimeout(r.current), []), {
+		copied: t,
+		copy: o((t) => {
+			navigator.clipboard.writeText(t).then(() => {
+				n(!0), clearTimeout(r.current), r.current = setTimeout(() => n(!1), e);
+			});
+		}, [e])
+	};
+}
+var O = {
+	block: "imf-ui-code-module-block",
+	copy: "imf-ui-code-module-copy",
+	icon: "imf-ui-code-module-icon",
+	inline: "imf-ui-code-module-inline",
+	inlineCopy: "imf-ui-code-module-inlineCopy",
+	inlineLink: "imf-ui-code-module-inlineLink",
+	language: "imf-ui-code-module-language",
+	pre: "imf-ui-code-module-pre",
+	separator: "imf-ui-code-module-separator"
+}, k = /* @__PURE__ */ e({
+	Block: () => M,
+	Inline: () => A,
+	InlineLink: () => j
+});
+function A({ className: e, copyable: n = !1, highlighted: r, children: i, ...a }) {
+	let { copied: o, copy: s } = D(), c = o ? T : E;
+	return /* @__PURE__ */ f("code", {
+		...a,
+		"data-imf-ui-component": "Code.Inline",
+		className: t(O.inline, e),
+		children: [
+			r ?? i,
+			n && /* @__PURE__ */ d("span", { className: O.separator }),
+			n && /* @__PURE__ */ d("button", {
+				type: "button",
+				className: O.inlineCopy,
+				"data-copied": o || void 0,
+				"aria-label": o ? "Copied" : "Copy",
+				onClick: () => s(i),
+				children: /* @__PURE__ */ d(c, {
+					size: 12,
+					strokeWidth: 2,
+					"aria-hidden": !0
+				})
+			})
+		]
+	});
+}
+A.displayName = "Code.Inline";
+function j({ className: e, kind: n = "external", children: r, ...i }) {
+	let a = n === "external" ? w : C;
+	return /* @__PURE__ */ f("a", {
+		...n === "external" ? {
+			target: "_blank",
+			rel: "noreferrer"
+		} : {},
+		...i,
+		"data-imf-ui-component": "Code.InlineLink",
+		"data-kind": n,
+		className: t(O.inline, O.inlineLink, e),
+		children: [
+			r,
+			/* @__PURE__ */ d("span", { className: O.separator }),
+			/* @__PURE__ */ d("span", {
+				className: O.icon,
+				"aria-hidden": !0,
+				children: /* @__PURE__ */ d(a, {
+					size: 12,
+					strokeWidth: 2
+				})
+			})
+		]
+	});
+}
+j.displayName = "Code.InlineLink";
+function M({ className: e, language: n, hideCopy: r = !1, highlighted: i, children: a, ...o }) {
+	let { copied: s, copy: c } = D(), l = s ? T : E;
+	return /* @__PURE__ */ f("div", {
+		"data-imf-ui-component": "Code.Block",
+		className: t(O.block, e),
+		children: [
+			n != null && /* @__PURE__ */ d("span", {
+				className: O.language,
+				children: n
+			}),
+			!r && /* @__PURE__ */ d("button", {
+				type: "button",
+				className: O.copy,
+				"data-copied": s || void 0,
+				"aria-label": s ? "Copied" : "Copy",
+				onClick: () => c(a),
+				children: /* @__PURE__ */ d(l, {
+					size: 12,
+					strokeWidth: 2,
+					"aria-hidden": !0
+				})
+			}),
+			/* @__PURE__ */ d("pre", {
+				...o,
+				className: O.pre,
+				children: /* @__PURE__ */ d("code", { children: i ?? a })
+			})
+		]
+	});
+}
+M.displayName = "Code.Block";
+//#endregion
+//#region src/components/code/code.meta.ts
+var N = {
+	name: "Code",
+	category: n.display,
+	status: "stable",
+	namespace: !0,
+	description: "Displays source code — Code.Inline for a fragment in running text, Code.Block for a fenced block with an optional language label and copy button. Also called a code snippet or code block.",
+	origin: "native"
+};
+//#endregion
+export { k as a, T as c, S as d, j as i, w as l, M as n, D as o, A as r, E as s, N as t, C as u };

package/dist/components/callout/callout.d.ts

@@ -19,7 +19,7 @@ declare namespace Root {
 type IconProps = React.HTMLAttributes<HTMLSpanElement>;
 /**
  * Callout.Icon — the leading status glyph. With no children it renders the
- * variant's default local icon; pass a custom icon as children to override.
+ * variant's default lucide icon; pass a custom icon as children to override.
  * `aria-hidden` (the variant is conveyed by copy, not the glyph) and inherits
  * the status colour via `currentColor`.
  */

package/dist/components/chip-link/chip-link.d.ts

@@ -11,7 +11,7 @@ type Props = React.AnchorHTMLAttributes<HTMLAnchorElement> & VariantProps<typeof
 /**
  * ChipLink — anchor styled as a Chip. Reuses Chip's shared variants so the
  * variant and appearance axes stay aligned, and auto-appends a directional icon
- * (local Web UI `ArrowUpRight` for external, `ArrowRight` for internal).
+ * (Lucide `ArrowUpRight` for external, `ArrowRight` for internal).
  */
 export declare function ChipLink({ variant, appearance, inline, kind, className, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/code/code.d.ts

@@ -1,15 +1,19 @@
 type InlineProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
-    /** Code content shown in the chip. The copy button copies its rendered text. */
-    children: React.ReactNode;
+    /** The inline code, as a raw string — also the value copied when `copyable`. */
+    children: string;
     /** Show a small copy button on the right, behind a hairline separator. @default false */
     copyable?: boolean;
+    /** Pre-rendered display content (e.g. syntax-highlighted tokens) shown in place of `children`, which stays the copied value. The code-highlight integration fills this slot. */
+    highlighted?: React.ReactNode;
 };
 /**
  * Code.Inline — an inline code fragment (a `<code>` chip) for use inside running
- * text. `Typo.InlineCode` renders this under the hood so inline-code chrome is
- * defined in one place. The copy button copies the rendered text.
+ * text. Dumb: styling only — syntax coloring arrives pre-rendered through the
+ * `highlighted` slot (the code-highlight integration supplies it). `Typo.InlineCode`
+ * renders this under the hood so inline-code chrome is defined in one place.
+ * Children must be a string so an opted-in copy button has clean text to copy.
  */
-export declare function Inline({ className, copyable, children, ...props }: InlineProps): import("react/jsx-runtime").JSX.Element;
+export declare function Inline({ className, copyable, highlighted, children, ...props }: InlineProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Inline {
     var displayName: string;
 }
@@ -32,20 +36,24 @@ export declare namespace InlineLink {
     var displayName: string;
 }
 type BlockProps = Omit<React.HTMLAttributes<HTMLPreElement>, "children"> & {
-    /** Code content shown in the block. The copy button copies its rendered text. */
-    children: React.ReactNode;
+    /** The code to display, as a raw string — also the value copied by the copy button. */
+    children: string;
     /** Language label shown in the corner notch. Omit to hide the notch. */
     language?: string;
     /** Hide the copy button. @default false */
     hideCopy?: boolean;
+    /** Pre-rendered display content (e.g. syntax-highlighted tokens) shown in place of `children`, which stays the copied value. The code-highlight integration fills this slot. */
+    highlighted?: React.ReactNode;
 };
 /**
  * Code.Block — a fenced code block on a flat brand surface, with an optional
  * chamfered language notch (top-left) and a copy button (top-right). The
- * surface follows the global corner-radius token when a preset opts in. The
- * copy button copies the rendered text.
+ * surface follows the global corner-radius token when a preset opts in.
+ * Dumb: styling only — syntax coloring arrives pre-rendered through the
+ * `highlighted` slot (the code-highlight integration supplies it). Children
+ * must be a string so the copy button has clean text to copy.
  */
-export declare function Block({ className, language, hideCopy, children, ...props }: BlockProps): import("react/jsx-runtime").JSX.Element;
+export declare function Block({ className, language, hideCopy, highlighted, children, ...props }: BlockProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Block {
     var displayName: string;
 }

package/dist/components/input/input.d.ts

@@ -9,8 +9,6 @@ type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "st
     value?: UpstreamInput["value"];
     defaultValue?: UpstreamInput["defaultValue"];
     onValueChange?: UpstreamInput["onValueChange"];
-    /** Called when the search input's clear button is pressed. */
-    onClear?: () => void;
     className?: UpstreamInput["className"];
     style?: UpstreamInput["style"];
     render?: UpstreamInput["render"];
@@ -23,5 +21,5 @@ type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "st
  * @see https://base-ui.com/react/components/input
  * @llm https://base-ui.com/react/components/input.md
  */
-export declare function Input({ variant, size, type, value, defaultValue, onValueChange, onClear, disabled, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Input({ variant, size, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/typo/typo.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import { Code } from '../code';
 declare const typo: (props?: ({
-    variant?: "primary" | "positive" | "negative" | "main" | "support" | "minor" | "brand" | "warning" | "info" | "oncolor" | "accent-1" | "accent-2" | "accent-3" | null | undefined;
+    variant?: "primary" | "positive" | "negative" | "main" | "support" | "minor" | "brand" | "warning" | "info" | "accent-1" | "accent-2" | "accent-3" | "oncolor" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const spacingVariants: (props?: ({
     spacing?: "none" | "default" | null | undefined;
@@ -82,7 +82,7 @@ export declare function Highlight({ variant, className, ...props }: InlineProps)
 export declare namespace Highlight {
     var displayName: string;
 }
-/** Typo.Link — inline anchor. Auto-appends a local Web UI directional icon (`ArrowUpRight` for external, `ArrowRight` for internal), mirroring ChipLink's affordance for prose links. */
+/** Typo.Link — inline anchor. Auto-appends a directional icon (Lucide `ArrowUpRight` for external, `ArrowRight` for internal), mirroring ChipLink's affordance for prose links. */
 export declare function Link({ variant, kind, className, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Link {
     var displayName: string;

package/dist/hooks/index.d.ts

@@ -3,4 +3,3 @@ export type { UseClipboardOptions } from './use-clipboard';
 export { useColorScheme } from './use-color-scheme';
 export { useMediaQuery } from './use-media-query';
 export type { UseMediaQueryOptions } from './use-media-query';
-export { useResizeObserver } from './use-resize-observer';

package/dist/index.d.ts

@@ -2,8 +2,6 @@ export { Button, buttonMeta } from './components/button';
 export { ChipLink, chipLinkMeta } from './components/chip-link';
 export { CopyButton, copyButtonMeta } from './components/copy-button';
 export { Checkbox, checkboxMeta } from './components/checkbox';
-export { Field, fieldMeta } from './components/field';
-export { Fieldset, fieldsetMeta } from './components/fieldset';
 export { Input, inputMeta } from './components/input';
 export { Select, selectMeta } from './components/select';
 export { Slider, sliderMeta } from './components/slider';
@@ -21,7 +19,6 @@ export { Callout, calloutMeta } from './components/callout';
 export { Chip, chipMeta } from './components/chip';
 export { Code, codeMeta } from './components/code';
 export { Collapsible, collapsibleMeta } from './components/collapsible';
-export { Icon, iconMeta } from './components/icon';
 export { Logo, logoMeta } from './components/logo';
 export { NavigationMenu, navigationMenuMeta } from './components/navigation-menu';
 export { Spinner, spinnerMeta } from './components/spinner';