@imfusion/web-ui 0.6.1-dev.3.g5b432448 → 0.6.1-dev.33.g665111df

package/README.md

@@ -1,227 +1,160 @@
-# Web UI
+# @imfusion/web-ui
 
-`@imfusion/web-ui` — the official shared Web UI library for ImFusion web apps, built on Base UI.
+The shared React UI library for ImFusion web apps. It provides accessible primitives, ImFusion tokens, and one public import
+surface. Base UI supplies behavior for the primitives that need it; consumers do not depend on Base UI directly.
 
-- [Usage](#usage) — install, wire up, and keep the version current
-- [Documentation](#documentation) — Storybook and the developer docs
-- [Development](#development) — working on the library itself, including the Agent Skills
-- [Releasing](#releasing) — how versions are derived and how to cut one
+- [Use the library](#use-the-library)
+- [Read the docs](#read-the-docs)
+- [Work on the library](#work-on-the-library)
+- [Release it](#release-it)
 
-## Usage
+## Use the library
 
-The packages are private on npmjs.com.
+The package is private. Get the Web SDK npm token from the
+[Test Licenses page](https://imfusion.atlassian.net/wiki/spaces/DEV/pages/255590402/Test+Licenses), then save it in your
+user-level npm config:
 
-To install them, get the Web SDK npm token from the
-[Test Licenses](https://imfusion.atlassian.net/wiki/spaces/DEV/pages/255590402/Test+Licenses) page on Confluence and add it
-to your user-level `.npmrc`:
-
-```bash
+```sh
 npm config set //registry.npmjs.org/:_authToken=<token> --location=user
 ```
 
-Then:
+Install the latest release:
 
-```bash
+```sh
 npm install @imfusion/web-ui
 ```
 
-Or if you want to install the latest CI build from master:
+To follow builds from `master`, use the `dev` dist-tag:
 
-```bash
+```sh
 npm install @imfusion/web-ui@dev
 ```
 
-Import the stylesheet and wrap your app root once:
+Import the stylesheet and mount the provider once at your app root:
 
 ```tsx
 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
+export function App() {
+  return <WebUIProvider>{/* app */}</WebUIProvider>;
+}
 ```
 
-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.
-
-### Versions and updates
-
-Every merge to master publishes a new build under the `dev` dist-tag. Which spec you install decides how you pick those up:
-
-| Spec in `package.json`             | Gets                       | Update with                    |
-| ---------------------------------- | -------------------------- | ------------------------------ |
-| `"@imfusion/web-ui": "^0.5.0"`     | matching releases          | `npm update @imfusion/web-ui`  |
-| `"@imfusion/web-ui": "latest"`     | the newest release         | `npm update @imfusion/web-ui`  |
-| `"@imfusion/web-ui": "dev"`        | the newest build of master | `npm update @imfusion/web-ui`  |
-| `"@imfusion/web-ui": "file:….tgz"` | a packed tarball, frozen   | re-pack and re-install by hand |
-
-- **Two dist-tags.** `latest` moves when a release is tagged, `dev` on every build of master (and onto the release when one
-  is cut).
-- **A range like `^0.5.0` is the usual choice.** It tracks releases and states which major you expect; bare `latest` follows
-  releases across majors, breaking changes included.
-- **Dist-tag specs stay literal.** npm keeps `dev` or `latest` as-is in `package.json` and re-resolves on every `npm update`.
-  The concrete version lands in `package-lock.json`, so builds stay reproducible until you update.
-- **Track `dev` while building against the library**, to get new components as they land. Use a release spec for anything you
-  cut a production release from, since `dev` moves whenever someone merges.
-- **A `file:` tarball never updates.** npm copies the archive into `node_modules` and re-copies the same one on every
-  install. Switch to `dev` or a version range to get updates.
-
-## Documentation
-
-**[Storybook](https://storybook.js.org/)** is the documentation platform — the component catalog, every prop, and the setup
-guides. It isn't hosted yet, so run it locally:
-
-```bash
-npm run dev   # builds the library, then Storybook + a rebuild watcher
-```
-
-See the [Developer Docs](./docs/README.md).
-
-## Development
+### Agent skills
 
-Install the deps and configure git:
+The package can install optional skills for agents working in a consumer project:
 
-```bash
-npm install
-npm run git:config   # hooks path + rebase-only pull/merge
+```sh
+npx web-ui-install
 ```
 
-**Try out **`/web-ui-dev-getting-started`** for an ai assisted start.**
+Run the command again after updating the package. It refreshes the skills already installed in the project. Use
+`--reconfigure` to choose a different target. Add `--hooks` to install the lifecycle hooks for Claude Code and Codex.
 
-### LLM integration
+Start with `/imf-web-ui`. It routes a task to the companion skills it needs, or tells the agent to work without extra
+guidance.
 
-Web UI development skills use a `/web-ui-dev-*` prefix. `documentation-writer` comes from `npx skills`; it is not a native
-Web UI skill.
+| Skill                     | Use it for                                                   |
+| ------------------------- | ------------------------------------------------------------ |
+| `/imf-web-ui`             | Route UI work to the right companion.                        |
+| `/imf-web-ui-setup`       | Plan library wiring, project setup, or tooling changes.      |
+| `/imf-web-ui-components`  | Look up component and icon APIs.                             |
+| `/imf-web-ui-ux`          | Choose components and shape screens and flows.               |
+| `/imf-web-ui-conventions` | Follow the frontend conventions and token seams.             |
+| `/imf-web-ui-audit`       | Inspect an existing frontend without changing it.            |
+| `/imf-web-ui-update`      | Update the package, skills, and hooks in a consumer project. |
 
-| Skill                                     | What it does                                                                                                            |
-| ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
-| `/documentation-writer`                   | External `npx skills` workflow for Diátaxis documentation.                                                              |
-| `/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-release`                     | Prepare release notes, commit them, and ship the approved release.                                                      |
-| `/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.                                                  |
+The shipped [`agent-tooling` topic](./src/llms/skills/imf-web-ui-conventions/topics/agent-tooling.md) explains the hook
+installation and Codex trust step.
 
-## Releasing
+### Versions
 
-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.
+Use a release version or range for production and `dev` while building against the library:
 
-The published version is derived from git tags, not from `package.json`.
+| Dependency spec | Resolves to                      | Update with                   |
+| --------------- | -------------------------------- | ----------------------------- |
+| `^0.6.0`        | compatible releases              | `npm update @imfusion/web-ui` |
+| `latest`        | newest release                   | `npm update @imfusion/web-ui` |
+| `dev`           | newest build of `master`         | `npm update @imfusion/web-ui` |
+| `file:…tgz`     | the packed archive you installed | pack and install again        |
 
-The `version` field stays at `0.0.0` in the repository and he CI computes the real number with
-[`scripts/version.ts`](./scripts/version.ts) and writes it into `package.json` on the build agent just before publishing.
+`latest` and `dev` are dist-tags. npm records the resolved version in `package-lock.json`; the tag stays in `package.json`
+until you update it. A bare `latest` can cross major versions, while a range keeps the expected major. A file tarball is a
+copy, so it never updates by itself.
 
-That working copy is thrown away, so nothing is committed back.
+## Read the docs
 
-`scripts/version.ts` reads `git describe` and applies two rules:
-
-Given the tag `web-ui/v0.5.0`:
-
-| Where HEAD sits            | Published version       | dist-tag |
-| -------------------------- | ----------------------- | -------- |
-| Exactly on `web-ui/v0.5.0` | `0.5.0`                 | `latest` |
-| 5 commits after that tag   | `0.5.1-dev.5.gb4de52d7` | `dev`    |
-
-The off-tag string breaks down as:
+[Storybook](https://storybook.js.org/) is the public documentation site. It contains the setup guide, usage patterns, token
+reference, and component examples. It is not hosted yet; run it locally from this repository:
 
-```
-0.5.1-dev.5.gb4de52d7
-└─┬─┘ └┬┘ │ └───┬────┘
-  │    │  │     └── commit hash, abbreviated; the leading g means "git"
-  │    │  └──────── commits since the tag
-  │    └─────────── pre-release marker, which is what puts it on the dev tag
-  └──────────────── the tag's version, patch bumped
+```sh
+npm run dev
 ```
 
-Bumping the patch is what makes a dev build sort above the release it follows and below the next one.
+The source for the contributor docs is [`docs/README.md`](./docs/README.md). Start there if you are changing the library.
 
-Every build of `master` publishes a `dev` version automatically. To check what the current checkout would publish:
+## Work on the library
 
-```bash
-npx tsx scripts/version.ts        # prints, changes nothing
+```sh
+npm install
+npm run git:config
 ```
 
-### Cutting a release
+`git:config` sets the tracked hooks path, enables rebase pulls, and requires fast-forward merges. The
+[`web-ui-dev-getting-started`](./.agents/skills/web-ui-dev-getting-started/SKILL.md) skill can route a first task.
 
-The release skill prepares the dated release section from detailed Unreleased entries and commits it through the normal
-approval gate. Then ship that prepared commit:
+The main development skills are:
 
-```bash
-npm run release
-```
+| Skill                                     | Use it for                                       |
+| ----------------------------------------- | ------------------------------------------------ |
+| `/web-ui-dev-getting-started`             | Route a first task based on experience and goal. |
+| `/web-ui-dev-start`                       | Establish task context and working location.     |
+| `/web-ui-dev-new-component`               | Add a primitive.                                 |
+| `/web-ui-dev-update-component`            | Change an existing primitive.                    |
+| `/web-ui-dev-design-component`            | Apply the ImFusion brand to a component.         |
+| `/web-ui-dev-story`                       | Author a Storybook story.                        |
+| `/web-ui-dev-commit`                      | Verify and commit a change.                      |
+| `/web-ui-dev-release`                     | Prepare and ship a release.                      |
+| `/web-ui-dev-audit-docs`                  | Check docs for drift before a commit.            |
+| `/web-ui-dev-audit-pass-through-defaults` | Check adapted prop defaults against Base UI.     |
+| `/web-ui-dev-refresh-design-reference`    | Refresh the committed brand snapshots.           |
+| `/web-ui-dev-teardown-worktree`           | Remove a finished worktree.                      |
+| `/web-ui-dev-mcp`                         | Recover one optional MCP capability.             |
 
-The command reads the prepared version from `CHANGELOG.md`, requires a clean working tree, runs full verification, creates
-`web-ui/v0.5.1`, and pushes the tag. TeamCity builds that tag, publishes `0.5.1` as `latest`, and points `dev` at the same
-version. The release skill uses the optional `teamcity` CLI when it is installed and authenticated to check the tagged build
-and publish log; otherwise it directs you to the same checks in TeamCity.
+## Release it
 
-The tag name must match `web-ui/vX.Y.Z` exactly. Both the version script's `--match` and the TeamCity branch filter in
-[`.teamcity/settings.kts`](./.teamcity/settings.kts) key off that shape; a tag in any other form publishes nothing.
+The published version comes from git tags. The repository keeps `package.json` at `0.0.0`; CI writes the real version into
+the build copy.
 
-### Optional TeamCity CLI
+For a tag such as `web-ui/v0.6.0`:
 
-The release skill can verify the tagged build and npm publish with the
-[official TeamCity CLI](https://www.jetbrains.com/help/teamcity/2026.1/teamcity-cli.html#installing). It is optional:
-TeamCity still builds and publishes releases when the CLI is absent.
+| HEAD is               | Published version     | Tag      |
+| --------------------- | --------------------- | -------- |
+| `web-ui/v0.6.0`       | `0.6.0`               | `latest` |
+| five commits after it | `0.6.1-dev.5.g<hash>` | `dev`    |
 
-```bash
-brew install jetbrains/utils/teamcity
-# or: npm install -g @jetbrains/teamcity-cli
+Check the version for the current checkout without changing files:
 
-teamcity auth login --server https://ci.imfusion.com
-teamcity auth status
+```sh
+npx tsx scripts/version.ts
 ```
 
-`teamcity auth login` opens the browser for TeamCity's PKCE authorization flow and stores the resulting token in the system
-keyring. Use `teamcity auth login --no-browser` when browser login is unavailable.
+Use `/web-ui-dev-release <version>` to prepare release notes and get the release commit approved. The final command is:
 
-### Building locally with a real version
+```sh
+npm run release
+```
 
-A local `npm run build` stamps `dist` with `0.0.0`. When you need the true version in a local artifact:
+It requires a clean tree, runs the full verification, creates `web-ui/v<version>`, and pushes the tag. TeamCity builds that
+tag and publishes npm. The tag must match that shape exactly.
 
-```bash
-npx tsx scripts/version.ts --write   # writes it into package.json
+To build a local tarball with a real version:
+
+```sh
+npx tsx scripts/version.ts --write
 npm run build
-git checkout package.json            # discard the write
+git checkout package.json
 ```
+
+The release skill covers the optional TeamCity CLI checks and the publication verification.

package/bin/install.js

@@ -13,10 +13,9 @@
 // .claude/skills/ symlinks it (this repo's own convention) so the two
 // can't drift apart.
 //
-// Flags: bare = skills only; --hooks adds the agent lifecycle hooks after the
-// consumer checks the repo's existing hooks and still installs the skills.
-// --target claude|agents
-// (repeatable) selects scripted install targets,
+// Flags: bare = help; --hooks adds the agent lifecycle hooks after the consumer
+// checks the repo's existing hooks and still installs the skills.
+// --target claude|agents|all (repeatable) selects scripted install targets,
 // --reconfigure to re-open the target prompt on an existing install.
 
 import {
@@ -285,26 +284,45 @@ function upsertAgentsBlock() {
   return existing ? "updated" : "added";
 }
 
-// --target claude|agents (repeatable) selects targets without the
+// --target claude|agents|all (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(", ")}`);
+    if (!value || (value !== "all" && !(value in TARGETS))) {
+      console.error(`--target expects one of: ${Object.keys(TARGETS).join(", ")}, all`);
       process.exit(1);
     }
-    targets.push(value);
+    targets.push(...(value === "all" ? ["agents", "claude"] : [value]));
     i++;
   }
-  return targets;
+  return [...new Set(targets)];
+}
+
+function printHelp() {
+  console.log(`Usage: web-ui-install [options]
+
+Install @imfusion/web-ui agent skills into a consumer project.
+
+Options:
+  --target agents|claude|all  Install into selected skill target(s).
+                              Repeat --target to select multiple targets.
+  --hooks                     Install agent lifecycle hooks.
+  --reconfigure               Re-open target selection prompt.
+  -h, --help                  Show this help.
+`);
 }
 
 async function main() {
-  const skills = discoverSkills();
   const argv = process.argv.slice(2);
+  if (argv.length === 0 || argv.includes("-h") || argv.includes("--help")) {
+    printHelp();
+    return;
+  }
+
+  const skills = discoverSkills();
   const flagTargets = parseTargetFlags(argv);
   const reconfigure = argv.includes("--reconfigure");
   // Every install includes the skill bundle. Hooks are opt-in via --hooks —

package/bin/install.test.ts

@@ -41,6 +41,25 @@ beforeEach(() => {
 });
 
 describe("web-ui-install", () => {
+  it("prints help and makes no changes without arguments", () => {
+    const result = spawnSync("node", [installer], { cwd: consumer, encoding: "utf-8" });
+
+    expect(result.status).toBe(0);
+    expect(result.stdout).toContain("Usage: web-ui-install [options]");
+    expect(existsSync(join(consumer, ".agents"))).toBe(false);
+    expect(existsSync(join(consumer, ".claude"))).toBe(false);
+  });
+
+  it("uses all as an alias for both installation targets", () => {
+    runInstall(consumer, "--target", "all");
+
+    const installed = readdirSync(join(consumer, ".agents", "skills"));
+    expect(installed).toHaveLength(7);
+    for (const name of installed) {
+      expect(lstatSync(join(consumer, ".claude", "skills", name)).isSymbolicLink()).toBe(true);
+    }
+  });
+
   it("installs skills into both targets with version markers", () => {
     runInstall(consumer, "--skills", "--target", "agents", "--target", "claude");
 

package/dist/code-BFMQnmu9.js

@@ -0,0 +1,147 @@
+import { t as e } from "./chunk-DmhlhrBa.js";
+import { t } from "./meta-CySnRuVp.js";
+import { Ma as n, Qt as r, Xo as i, hn as a, r as o } from "./icons-Cy1HAosO.js";
+import { cx as s } from "class-variance-authority";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useCallback as d, useEffect as f, useRef as p, useState as m } from "react";
+import { mergeProps as h } from "@base-ui/react/merge-props";
+import { useRender as g } from "@base-ui/react/use-render";
+//#region src/hooks/use-clipboard.ts
+function _({ timeout: e = 1500 } = {}) {
+	let [t, n] = m(!1), r = p(void 0);
+	return f(() => () => clearTimeout(r.current), []), {
+		copied: t,
+		copy: d((t) => {
+			navigator.clipboard.writeText(t).then(() => {
+				n(!0), clearTimeout(r.current), r.current = setTimeout(() => n(!1), e);
+			});
+		}, [e])
+	};
+}
+var v = {
+	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"
+}, y = /* @__PURE__ */ e({
+	Block: () => S,
+	Inline: () => b,
+	InlineLink: () => x
+});
+function b({ className: e, copyable: t = !1, children: r, render: a, ...d }) {
+	let { copied: f, copy: m } = _(), y = p(null), b = f ? n : i;
+	return g({
+		defaultTagName: "code",
+		render: a,
+		props: {
+			...h(d, {
+				className: s(v.inline, e),
+				children: /* @__PURE__ */ u(c, { children: [
+					/* @__PURE__ */ l("span", {
+						ref: y,
+						children: r
+					}),
+					t && /* @__PURE__ */ l("span", { className: v.separator }),
+					t && /* @__PURE__ */ l("button", {
+						type: "button",
+						className: v.inlineCopy,
+						"data-copied": f || void 0,
+						"aria-label": f ? "Copied" : "Copy",
+						onClick: () => m(y.current?.textContent ?? ""),
+						children: /* @__PURE__ */ l(o, {
+							glyph: b,
+							size: 12,
+							strokeWidth: 2,
+							"aria-hidden": !0
+						})
+					})
+				] })
+			}),
+			"data-imf-ui-component": "Code.Inline"
+		}
+	});
+}
+b.displayName = "Code.Inline";
+function x({ className: e, kind: t = "external", children: n, render: i, ...d }) {
+	let f = t === "external" ? a : r;
+	return g({
+		defaultTagName: "a",
+		render: i,
+		props: {
+			...h(t === "external" ? {
+				target: "_blank",
+				rel: "noreferrer"
+			} : {}, d, {
+				className: s(v.inline, v.inlineLink, e),
+				children: /* @__PURE__ */ u(c, { children: [
+					n,
+					/* @__PURE__ */ l("span", { className: v.separator }),
+					/* @__PURE__ */ l("span", {
+						className: v.icon,
+						"aria-hidden": !0,
+						children: /* @__PURE__ */ l(o, {
+							glyph: f,
+							size: 12,
+							strokeWidth: 2
+						})
+					})
+				] })
+			}),
+			"data-imf-ui-component": "Code.InlineLink",
+			"data-kind": t
+		}
+	});
+}
+x.displayName = "Code.InlineLink";
+function S({ className: e, language: t, hideCopy: r = !1, children: a, ...c }) {
+	let { copied: d, copy: f } = _(), m = p(null), h = d ? n : i;
+	return /* @__PURE__ */ u("div", {
+		"data-imf-ui-component": "Code.Block",
+		className: s(v.block, e),
+		children: [
+			t != null && /* @__PURE__ */ l("span", {
+				className: v.language,
+				children: t
+			}),
+			!r && /* @__PURE__ */ l("button", {
+				type: "button",
+				className: v.copy,
+				"data-copied": d || void 0,
+				"aria-label": d ? "Copied" : "Copy",
+				onClick: () => f(m.current?.textContent ?? ""),
+				children: /* @__PURE__ */ l(o, {
+					glyph: h,
+					size: 12,
+					strokeWidth: 2,
+					"aria-hidden": !0
+				})
+			}),
+			/* @__PURE__ */ l("pre", {
+				...c,
+				className: v.pre,
+				children: /* @__PURE__ */ l("code", {
+					ref: m,
+					children: a
+				})
+			})
+		]
+	});
+}
+S.displayName = "Code.Block";
+//#endregion
+//#region src/components/code/code.meta.ts
+var C = {
+	name: "Code",
+	category: t.display,
+	status: "stable",
+	namespace: !0,
+	description: "Displays source code inline or in a block, with optional language labels and copying. Also called a code snippet or code block.",
+	origin: "native"
+};
+//#endregion
+export { y as a, x as i, S as n, _ as o, b as r, C as t };

package/dist/codegen/gen-code-highlight-theme.d.ts

@@ -0,0 +1 @@
+export declare function writeCodeHighlightTheme(): void;

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

@@ -1,4 +1,5 @@
-type InlineProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
+import { useRender } from '@base-ui/react/use-render';
+type InlineProps = Omit<useRender.ComponentProps<"code">, "children"> & {
     /** Code content shown in the chip. The copy button copies its rendered text. */
     children: React.ReactNode;
     /** Show a small copy button on the right, behind a hairline separator. @default false */
@@ -9,12 +10,12 @@ type InlineProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
  * text. `Typo.InlineCode` renders this under the hood so inline-code chrome is
  * defined in one place. The copy button copies the rendered text.
  */
-export declare function Inline({ className, copyable, children, ...props }: InlineProps): import("react/jsx-runtime").JSX.Element;
+export declare function Inline({ className, copyable, children, render, ...props }: InlineProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Inline {
     var displayName: string;
 }
 export type CodeInlineLinkKind = "external" | "internal";
-type InlineLinkProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "children"> & {
+type InlineLinkProps = Omit<useRender.ComponentProps<"a">, "children"> & {
     /** The link text, as a raw string, rendered as a code fragment. */
     children: string;
     /** Link target scope. `"external"` (default) opens in a new tab with a diagonal `ArrowUpRight` icon; `"internal"` stays in the current tab with a horizontal `ArrowRight` icon. */
@@ -27,7 +28,7 @@ type InlineLinkProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "chil
  * copy button and a link on the same chip. Mirrors `ChipLink`'s shape (anchor
  * is the chip root, trailing icon nudges on hover, `data-kind` picks the icon).
  */
-export declare function InlineLink({ className, kind, children, ...props }: InlineLinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function InlineLink({ className, kind, children, render, ...props }: InlineLinkProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace InlineLink {
     var displayName: string;
 }

package/dist/components/stack/stack.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 declare const stack: (props?: ({
-    gap?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | null | undefined;
+    gap?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | null | undefined;
     align?: "center" | "end" | "start" | "stretch" | null | undefined;
     justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/toast/index.d.ts

@@ -0,0 +1,2 @@
+export * as Toast from './toast';
+export { toastMeta } from './toast.meta';