@imfusion/web-ui 0.5.0

package/README.md

@@ -0,0 +1,60 @@
+# Web UI
+
+`@imfusion/web-ui` — the official shared Web UI library for ImFusion web apps, built on Base UI (selected through the
+company's Component Library ADR). It will be published to ImFusion's private npm registry for internal use (publishing isn't
+wired up yet — the package is still `private`).
+
+This repo is **AI-first**: it's designed to be worked on by driving an agent through a set of skills, and that's the
+smoothest path — but hand-writing code is perfectly welcome too. (How the agent config is wired is described under
+[Working with an AI agent](#working-with-an-ai-agent).)
+
+Either way, the fastest way in is the **`/web-ui-dev-getting-started`** skill: a short interactive intro that figures out
+what you want to do and points you at the right skill and docs, walking you through setup and the commands you'll need.
+
+For the full workflow, see [`CONTRIBUTING.md`](CONTRIBUTING.md); for the runnable scripts, [`package.json`](package.json) is
+the source of truth.
+
+```bash
+npm install   # installs deps, then configures git (see notes below)
+```
+
+> **Note — `npm install` also configures git** via the `prepare` script: sets `.githooks` as the hooks path, and enforces a
+> rebase-only pull/merge strategy (`pull.rebase true`, `merge.ff only`). No manual git setup needed.
+
+> **Note — install scripts are disabled** (`.npmrc` sets `ignore-scripts=true` for supply-chain security). Today's native
+> deps (esbuild, fsevents) ship their platform binary as an optional dependency, so a fresh install works out of the box. If
+> you add a package that relies on a native install hook (e.g. `sharp`, `node-gyp` builds), it won't run —
+> `npm rebuild <pkg>` once after install, and note it here.
+
+# Using the library
+
+If you're consuming `@imfusion/web-ui` in a downstream app rather than working on it, **Storybook is your entry point** — it
+carries the setup guides and a live, browsable catalog of every component and its props. It isn't hosted yet; run it locally
+with `npm run dev` (or `npm run storybook`) and open the printed URL.
+
+If an AI agent is working in that downstream app, run `npx web-ui-install-skills` (once `@imfusion/web-ui` is installed) to
+give it the `imf-web-ui` skill family — setup, component lookup, UX guidance, and frontend patterns, with a small router
+skill deciding which applies — no need for it to read this library's source. The skills ship inside the package at
+`src/llms/skills/` (next to the generated llms index; deliberately _not_ in `.agents/skills/`, which holds this repo's own
+development skills). See the **AI Agents** page in Storybook's User Guide for the full skill family and how it routes.
+
+# Working with an AI agent
+
+The agent config is tool-neutral by design, so the repo isn't tied to a single LLM client:
+
+- **`AGENTS.md`** holds the instructions, following the cross-tool `AGENTS.md` convention that Cursor, Aider, Windsurf,
+  Copilot and others read directly.
+- **`.agents/skills/`** holds the skills — the reusable, step-by-step workflows an agent runs.
+
+Claude Code is the one client that looks for its own paths rather than these, so it's bridged with two symlinks:
+`CLAUDE.md → AGENTS.md` and `.claude/skills → .agents/skills`. Edit through either path — it's the same file — but `.agents/`
+and `AGENTS.md` are the canonical, git-tracked source.
+
+# Architecture
+
+The library's wrappers, types, and public API follow strict rules captured in
+**[docs/architecture.md](docs/architecture.md)**. Read it before contributing — every wrapped component, hook, and public API
+decision must satisfy these rules.
+
+That's one of several developer docs — architecture, conventions, the color system, responsiveness, and story authoring.
+Start from **[docs/README.md](docs/README.md)**, which lays out the full reading order.

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/assets/vendors/base-ui.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Base UI brandmark — compact glyph. Internal asset (not part of the public
+ * package API); consumed by the Storybook origin badge to flag adapted
+ * components. New upstreams (Mantine, …) get a sibling file here.
+ */
+export declare function BaseUILogo({ size }: {
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/breakpoints/index.d.ts

@@ -0,0 +1,3 @@
+export { BREAKPOINTS } from './registry';
+export type { BreakpointName } from './registry';
+export { minWidth } from './min-width';

package/dist/breakpoints/min-width.d.ts

@@ -0,0 +1,9 @@
+import { BreakpointName } from './registry';
+/**
+ * Resolve a registry breakpoint name to the plain media-query string
+ * `useMediaQuery` expects, e.g. `minWidth("md")` → `"(min-width: 768px)"`.
+ *
+ * Keeps JS-side viewport checks (e.g. a mobile burger toggle) reading from the
+ * same numeric source as the CSS-side `@custom-media` definitions.
+ */
+export declare function minWidth(name: BreakpointName): string;

package/dist/breakpoints/registry.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Breakpoint registry — the single source of truth for every
+ * `@custom-media --imf-ui-*` definition AND the `minWidth()` JS helper.
+ * `styles/custom-media.gen.css` is generated from this list by the codegen
+ * runner (see `./gen-breakpoints-css.ts`), so CSS and JS can never drift.
+ *
+ * Values are min-width breakpoints (mobile-first). Component CSS consumes them
+ * via `@media (--imf-ui-{name})`; Lightning CSS substitutes the literal at
+ * build time (`drafts.customMedia`, enabled in `vite.config.ts` and
+ * `.storybook/main.ts`).
+ */
+export declare const BREAKPOINTS: {
+    readonly mobile: 375;
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+};
+export type BreakpointName = keyof typeof BREAKPOINTS;

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/codegen/gen-breakpoints-css.d.ts

@@ -0,0 +1,6 @@
+import { BREAKPOINTS } from '../breakpoints/registry';
+/**
+ * Render the `@custom-media --imf-ui-*` declarations from the breakpoint
+ * registry. Pure function.
+ */
+export declare function renderBreakpointsCss(registry: typeof BREAKPOINTS): string;

package/dist/codegen/gen-css-types.d.ts

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

package/dist/codegen/gen-token-css.d.ts

@@ -0,0 +1,6 @@
+import { Token } from '../tokens/types';
+/** Render `token-controls.gen.css` — every non-font token's `:root` declarations, in registry order. */
+export declare function renderColorTokensCss(registry?: readonly Token[]): string;
+/** Render `font-families.gen.css` — the `--imf-ui-font-family-*` tokens, base stacks and aliases. */
+export declare function renderFontTokensCss(registry?: readonly Token[]): string;
+export declare function writeTokenCss(): void;

package/dist/codegen/run.d.ts

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

package/dist/components/app-shell/app-shell.d.ts

@@ -0,0 +1,66 @@
+type RootProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * AppShell — application layout shell.
+ *
+ * The classic dashboard frame: a fixed header, collapsible navbar/aside
+ * sidebars, an optional footer, and a scrolling main content area. Also called
+ * an app layout, application frame, dashboard shell, or sidebar layout.
+ *
+ * Composed of seven sub-components used with dot-notation: `AppShell.Root` wraps
+ * `AppShell.Header`, `AppShell.Navbar`, `AppShell.Aside`, `AppShell.Footer`,
+ * `AppShell.Main`, and (inside a sidebar) `AppShell.Section`.
+ *
+ * Sizing is CSS-driven — override the `--imf-ui-appshell-*` custom properties
+ * rather than passing dimension props. Below the responsive breakpoints the
+ * navbar (`md`) and aside (`lg`) become sliding overlays toggled via the `open`
+ * prop; the consumer wires that to a burger button.
+ *
+ * Copied and adapted from Mantine's AppShell; no upstream runtime dependency.
+ * MIT licensed (see Mantine repo).
+ *
+ * @see https://mantine.dev/llms/core-app-shell.md
+ */
+declare function Root({ className, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Root {
+    var displayName: string;
+}
+type HeaderProps = React.HTMLAttributes<HTMLElement>;
+declare function Header({ className, ...props }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Header {
+    var displayName: string;
+}
+type NavbarProps = React.HTMLAttributes<HTMLElement> & {
+    /** Whether the mobile overlay is open. Ignored above the `md` breakpoint, where the navbar is always visible. */
+    open?: boolean;
+};
+declare function Navbar({ className, open, ...props }: NavbarProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Navbar {
+    var displayName: string;
+}
+type AsideProps = React.HTMLAttributes<HTMLElement> & {
+    /** Whether the mobile overlay is open. Ignored above the `lg` breakpoint, where the aside is always visible. */
+    open?: boolean;
+};
+declare function Aside({ className, open, ...props }: AsideProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Aside {
+    var displayName: string;
+}
+type FooterProps = React.HTMLAttributes<HTMLElement>;
+declare function Footer({ className, ...props }: FooterProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Footer {
+    var displayName: string;
+}
+type MainProps = React.HTMLAttributes<HTMLElement>;
+declare function Main({ className, ...props }: MainProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Main {
+    var displayName: string;
+}
+type SectionProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** If set, the section expands to fill the remaining space in its sidebar. */
+    grow?: boolean;
+};
+declare function Section({ className, grow, ...props }: SectionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Section {
+    var displayName: string;
+}
+export { Root, Header, Navbar, Aside, Footer, Main, Section };

package/dist/components/app-shell/app-shell.meta.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const appShellMeta: ComponentMeta;

package/dist/components/app-shell/index.d.ts

@@ -0,0 +1,2 @@
+export * as AppShell from './app-shell';
+export { appShellMeta } from './app-shell.meta';

package/dist/components/button/button.d.ts

@@ -0,0 +1,30 @@
+import { Button as ButtonPrimitive } from '@base-ui/react/button';
+import { VariantProps } from 'class-variance-authority';
+declare const button: (props?: ({
+    variant?: "primary" | "secondary" | "positive" | "negative" | "outline" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | "hero" | null | undefined;
+    chamfer?: boolean | null | undefined;
+    radius?: "sm" | "md" | "lg" | "none" | "round" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type UpstreamButton = React.ComponentProps<typeof ButtonPrimitive>;
+type Props = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "style"> & VariantProps<typeof button> & {
+    /** @default false */
+    focusableWhenDisabled?: boolean;
+    /** @default true */
+    nativeButton?: boolean;
+    /** Leading slot — typically a label. When present, the label aligns right and the icon pins left. */
+    startIcon?: React.ReactNode;
+    /** Trailing slot — typically an icon. When present, the label aligns left and the icon pins right. */
+    endIcon?: React.ReactNode;
+    className?: UpstreamButton["className"];
+    style?: UpstreamButton["style"];
+    render?: UpstreamButton["render"];
+};
+/**
+ * Button component
+ *
+ * @doc https://base-ui.com/react/components/button
+ * @llm https://base-ui.com/react/components/button.md
+ */
+export declare function Button({ variant, size, chamfer, radius, className, startIcon, endIcon, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/button/button.meta.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const buttonMeta: ComponentMeta;

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

@@ -0,0 +1,2 @@
+export { Button } from './button';
+export { buttonMeta } from './button.meta';

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

@@ -0,0 +1,42 @@
+import { VariantProps } from 'class-variance-authority';
+declare const root: (props?: ({
+    variant?: "positive" | "negative" | "warning" | "info" | "accent-1" | "accent-2" | "accent-3" | null | undefined;
+    maxWidth?: "sm" | "md" | "lg" | "full" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type RootProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof root>;
+/**
+ * Callout.Root — the banner container. Sets the `variant` (which tints the
+ * surface and colours the icon and text) and lays out a leading `Callout.Icon`
+ * beside a text region of `Callout.Title` / `Callout.Description`. `maxWidth`
+ * caps the banner so it reads as a block region rather than stretching full
+ * container width. A persistent element in the content flow — not a transient
+ * Toast, not a modal Alert Dialog.
+ */
+declare function Root({ variant, maxWidth, className, children, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Root {
+    var displayName: string;
+}
+type IconProps = React.HTMLAttributes<HTMLSpanElement>;
+/**
+ * Callout.Icon — the leading status glyph. With no children it renders the
+ * 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`.
+ */
+declare function Icon({ className, children, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Icon {
+    var displayName: string;
+}
+type TitleProps = React.HTMLAttributes<HTMLDivElement>;
+/** Callout.Title — an optional short heading, set in the semi-mono UPPERCASE technical voice. */
+declare function Title({ className, ...props }: TitleProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Title {
+    var displayName: string;
+}
+type DescriptionProps = React.HTMLAttributes<HTMLDivElement>;
+/** Callout.Description — the message body, set in the editorial (grotesk) body voice. */
+declare function Description({ className, ...props }: DescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Description {
+    var displayName: string;
+}
+export { Root, Icon, Title, Description };

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

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const calloutMeta: ComponentMeta;

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

@@ -0,0 +1,2 @@
+export * as Callout from './callout';
+export { calloutMeta } from './callout.meta';