@imfusion/web-ui 0.6.1-dev.33.g665111df → 0.6.1-dev.6.g4adc5c3e

package/README.md

@@ -1,160 +1,227 @@
-# @imfusion/web-ui
+# Web 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.
+`@imfusion/web-ui` — the official shared Web UI library for ImFusion web apps, built on Base UI.
 
-- [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](#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
+## Usage
 
-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:
+The packages are private on npmjs.com.
 
-```sh
+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
 npm config set //registry.npmjs.org/:_authToken=<token> --location=user
 ```
 
-Install the latest release:
+Then:
 
-```sh
+```bash
 npm install @imfusion/web-ui
 ```
 
-To follow builds from `master`, use the `dev` dist-tag:
+Or if you want to install the latest CI build from master:
 
-```sh
+```bash
 npm install @imfusion/web-ui@dev
 ```
 
-Import the stylesheet and mount the provider once at your app root:
+Import the stylesheet and wrap your app root once:
 
 ```tsx
 import "@imfusion/web-ui/styles.css";
 import { WebUIProvider } from "@imfusion/web-ui";
-
-export function App() {
-  return <WebUIProvider>{/* app */}</WebUIProvider>;
-}
 ```
 
-### Agent skills
+### LLM integration
+
+The `web-ui` package does offer first-class support for LLMs, but it's not wired up by default.
 
-The package can install optional skills for agents working in a consumer project:
+To install the skills, run this command after the package is installed:
 
-```sh
+```bash
 npx web-ui-install
 ```
 
-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.
-
-Start with `/imf-web-ui`. It routes a task to the companion skills it needs, or tells the agent to work without extra
-guidance.
+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
+```
 
-| 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. |
+See the [Developer Docs](./docs/README.md).
 
-The shipped [`agent-tooling` topic](./src/llms/skills/imf-web-ui-conventions/topics/agent-tooling.md) explains the hook
-installation and Codex trust step.
+## Development
 
-### Versions
+Install the deps and configure git:
 
-Use a release version or range for production and `dev` while building against the library:
+```bash
+npm install
+npm run git:config   # hooks path + rebase-only pull/merge
+```
 
-| 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        |
+**Try out **`/web-ui-dev-getting-started`** for an ai assisted start.**
 
-`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.
+### LLM integration
 
-## Read the docs
+Web UI development skills use a `/web-ui-dev-*` prefix. `documentation-writer` comes from `npx skills`; it is not a native
+Web UI skill.
 
-[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:
+| 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.                                                  |
 
-```sh
-npm run dev
-```
+## Releasing
 
-The source for the contributor docs is [`docs/README.md`](./docs/README.md). Start there if you are changing the library.
+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.
 
-## Work on the library
+The published version is derived from git tags, not from `package.json`.
 
-```sh
-npm install
-npm run git:config
-```
+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.
 
-`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.
+That working copy is thrown away, so nothing is committed back.
 
-The main development skills are:
+`scripts/version.ts` reads `git describe` and applies two rules:
 
-| 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.             |
+Given the tag `web-ui/v0.5.0`:
 
-## Release it
+| 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 published version comes from git tags. The repository keeps `package.json` at `0.0.0`; CI writes the real version into
-the build copy.
+The off-tag string breaks down as:
 
-For a tag such as `web-ui/v0.6.0`:
+```
+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
+```
 
-| 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`    |
+Bumping the patch is what makes a dev build sort above the release it follows and below the next one.
 
-Check the version for the current checkout without changing files:
+Every build of `master` publishes a `dev` version automatically. To check what the current checkout would publish:
 
-```sh
-npx tsx scripts/version.ts
+```bash
+npx tsx scripts/version.ts        # prints, changes nothing
 ```
 
-Use `/web-ui-dev-release <version>` to prepare release notes and get the release commit approved. The final command is:
+### Cutting a release
+
+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:
 
-```sh
+```bash
 npm run release
 ```
 
-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.
+The command reads the prepared version from `CHANGELOG.md`, requires a clean working tree, runs full verification, creates a
+version (e.g. `web-ui/v0.5.1`), and pushes the tag. TeamCity builds that tag, publishes the version 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.
 
-To build a local tarball with a real version:
+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.
 
-```sh
-npx tsx scripts/version.ts --write
-npm run build
-git checkout package.json
+### Optional TeamCity CLI
+
+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.
+
+```bash
+brew install jetbrains/utils/teamcity
+# or: npm install -g @jetbrains/teamcity-cli
+
+teamcity auth login --server https://ci.imfusion.com
+teamcity auth status
 ```
 
-The release skill covers the optional TeamCity CLI checks and the publication verification.
+`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.
+
+### Building locally with a real version
+
+A local `npm run build` stamps `dist` with `0.0.0`. When you need the true version in a local artifact:
+
+```bash
+npx tsx scripts/version.ts --write   # writes it into package.json
+npm run build
+git checkout package.json            # discard the write
+```

package/bin/install.js

@@ -13,9 +13,10 @@
 // .claude/skills/ symlinks it (this repo's own convention) so the two
 // can't drift apart.
 //
-// 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,
+// 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,
 // --reconfigure to re-open the target prompt on an existing install.
 
 import {
@@ -284,45 +285,26 @@ function upsertAgentsBlock() {
   return existing ? "updated" : "added";
 }
 
-// --target claude|agents|all (repeatable) selects targets without the
+// --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 !== "all" && !(value in TARGETS))) {
-      console.error(`--target expects one of: ${Object.keys(TARGETS).join(", ")}, all`);
+    if (!value || !(value in TARGETS)) {
+      console.error(`--target expects one of: ${Object.keys(TARGETS).join(", ")}`);
       process.exit(1);
     }
-    targets.push(...(value === "all" ? ["agents", "claude"] : [value]));
+    targets.push(value);
     i++;
   }
-  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.
-`);
+  return targets;
 }
 
 async function main() {
-  const argv = process.argv.slice(2);
-  if (argv.length === 0 || argv.includes("-h") || argv.includes("--help")) {
-    printHelp();
-    return;
-  }
-
   const skills = discoverSkills();
+  const argv = process.argv.slice(2);
   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,25 +41,6 @@ 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-Blo48PGr.js

@@ -0,0 +1,136 @@
+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-wBmF0U2x.js";
+import { cx as s } from "class-variance-authority";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useCallback as u, useEffect as d, useRef as f, useState as p } from "react";
+//#region src/hooks/use-clipboard.ts
+function m({ timeout: e = 1500 } = {}) {
+	let [t, n] = p(!1), r = f(void 0);
+	return d(() => () => clearTimeout(r.current), []), {
+		copied: t,
+		copy: u((t) => {
+			navigator.clipboard.writeText(t).then(() => {
+				n(!0), clearTimeout(r.current), r.current = setTimeout(() => n(!1), e);
+			});
+		}, [e])
+	};
+}
+var h = {
+	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"
+}, g = /* @__PURE__ */ e({
+	Block: () => y,
+	Inline: () => _,
+	InlineLink: () => v
+});
+function _({ className: e, copyable: t = !1, children: r, ...a }) {
+	let { copied: u, copy: d } = m(), p = f(null), g = u ? n : i;
+	return /* @__PURE__ */ l("code", {
+		...a,
+		"data-imf-ui-component": "Code.Inline",
+		className: s(h.inline, e),
+		children: [
+			/* @__PURE__ */ c("span", {
+				ref: p,
+				children: r
+			}),
+			t && /* @__PURE__ */ c("span", { className: h.separator }),
+			t && /* @__PURE__ */ c("button", {
+				type: "button",
+				className: h.inlineCopy,
+				"data-copied": u || void 0,
+				"aria-label": u ? "Copied" : "Copy",
+				onClick: () => d(p.current?.textContent ?? ""),
+				children: /* @__PURE__ */ c(o, {
+					glyph: g,
+					size: 12,
+					strokeWidth: 2,
+					"aria-hidden": !0
+				})
+			})
+		]
+	});
+}
+_.displayName = "Code.Inline";
+function v({ className: e, kind: t = "external", children: n, ...i }) {
+	let u = t === "external" ? a : r;
+	return /* @__PURE__ */ l("a", {
+		...t === "external" ? {
+			target: "_blank",
+			rel: "noreferrer"
+		} : {},
+		...i,
+		"data-imf-ui-component": "Code.InlineLink",
+		"data-kind": t,
+		className: s(h.inline, h.inlineLink, e),
+		children: [
+			n,
+			/* @__PURE__ */ c("span", { className: h.separator }),
+			/* @__PURE__ */ c("span", {
+				className: h.icon,
+				"aria-hidden": !0,
+				children: /* @__PURE__ */ c(o, {
+					glyph: u,
+					size: 12,
+					strokeWidth: 2
+				})
+			})
+		]
+	});
+}
+v.displayName = "Code.InlineLink";
+function y({ className: e, language: t, hideCopy: r = !1, children: a, ...u }) {
+	let { copied: d, copy: p } = m(), g = f(null), _ = d ? n : i;
+	return /* @__PURE__ */ l("div", {
+		"data-imf-ui-component": "Code.Block",
+		className: s(h.block, e),
+		children: [
+			t != null && /* @__PURE__ */ c("span", {
+				className: h.language,
+				children: t
+			}),
+			!r && /* @__PURE__ */ c("button", {
+				type: "button",
+				className: h.copy,
+				"data-copied": d || void 0,
+				"aria-label": d ? "Copied" : "Copy",
+				onClick: () => p(g.current?.textContent ?? ""),
+				children: /* @__PURE__ */ c(o, {
+					glyph: _,
+					size: 12,
+					strokeWidth: 2,
+					"aria-hidden": !0
+				})
+			}),
+			/* @__PURE__ */ c("pre", {
+				...u,
+				className: h.pre,
+				children: /* @__PURE__ */ c("code", {
+					ref: g,
+					children: a
+				})
+			})
+		]
+	});
+}
+y.displayName = "Code.Block";
+//#endregion
+//#region src/components/code/code.meta.ts
+var b = {
+	name: "Code",
+	category: t.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 { g as a, v as i, y as n, m as o, _ as r, b as t };

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

@@ -1,5 +1,4 @@
-import { useRender } from '@base-ui/react/use-render';
-type InlineProps = Omit<useRender.ComponentProps<"code">, "children"> & {
+type InlineProps = Omit<React.HTMLAttributes<HTMLElement>, "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 */
@@ -10,12 +9,12 @@ type InlineProps = Omit<useRender.ComponentProps<"code">, "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, render, ...props }: InlineProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Inline({ className, copyable, children, ...props }: InlineProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Inline {
     var displayName: string;
 }
 export type CodeInlineLinkKind = "external" | "internal";
-type InlineLinkProps = Omit<useRender.ComponentProps<"a">, "children"> & {
+type InlineLinkProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "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. */
@@ -28,7 +27,7 @@ type InlineLinkProps = Omit<useRender.ComponentProps<"a">, "children"> & {
  * 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, render, ...props }: InlineLinkProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function InlineLink({ className, kind, children, ...props }: InlineLinkProps): import("react/jsx-runtime").JSX.Element;
 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?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | null | undefined;
+    gap?: "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;