@imfusion/web-ui 0.5.1-dev.18.g81350f83 → 0.5.1-dev.2.g0a349a2a

package/README.md

@@ -2,11 +2,6 @@
 
 `@imfusion/web-ui` — the official shared Web UI library for ImFusion web apps, built on Base UI.
 
-- [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
-
 ## Usage
 
 The packages are private on npmjs.com.
@@ -38,54 +33,23 @@ import "@imfusion/web-ui/styles.css";
 import { WebUIProvider } from "@imfusion/web-ui";
 ```
 
-### LLM integration
+> [!NOTE] 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).
 
-The `web-ui` package does offer first-class support for LLMs, but it's not wired up by default.
+## Development
 
-To install the skills, run this command after the package is installed:
+Install the deps and configure git:
 
 ```bash
-npx web-ui-install
+npm install
+npm run git:config   # hooks path + rebase-only pull/merge
 ```
 
-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.
-
-**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-library-setup`        | One-time wiring in a consumer project — the styles import and the provider.   |
-| `/imf-web-ui-components`           | Component 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-frontend-conventions` | The frontend conventions baseline, including the sanctioned styling seams.    |
-| `/imf-web-ui-frontend-setup`       | Set up or audit an ImFusion frontend's tooling against the house baseline.    |
-| `/imf-web-ui-agent-setup`          | Install or update the vendored skills, agent hooks, and TanStack Intent.      |
-
-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.
+- Try out **`/web-ui-dev-getting-started`** for an ai assisted start.
+
+> [!IMPORTANT] `npm run git:config` is a separate, explicit step. `.npmrc` sets `ignore-scripts=true` to blunt supply-chain
+> attacks, and that disables this package's own lifecycle scripts too — so nothing configures git for you. It sets
+> `.githooks` as the hooks path and pins `pull.rebase true` / `merge.ff only`.
 
 ## Documentation
 
@@ -98,21 +62,41 @@ npm run dev   # builds the library, then Storybook + a rebuild watcher
 
 See the [Developer Docs](./docs/README.md).
 
-## Development
+## AI agents
 
-Install the deps and configure git:
+Two families of Agent Skills, told apart by their prefix:
 
-```bash
-npm install
-npm run git:config   # hooks path + rebase-only pull/merge
-```
+| Prefix         | For                           | Lives in                   | How to get it               |
+| -------------- | ----------------------------- | -------------------------- | --------------------------- |
+| `imf-web-ui-*` | Apps consuming the library    | shipped in the npm package | `npx web-ui-install-skills` |
+| `web-ui-dev-*` | Developing the library itself | `.agents/skills/`          | already there after cloning |
 
-**Try out **`/web-ui-dev-getting-started`** for an ai assisted start.**
+See the [skills/ folder](.agents/skills/) for the full list.
 
-### LLM integration
+**`imf-web-ui-*`** travels with the package, so an agent in a consumer app gets library guidance without reading this
+library's source. ` imf-web-ui` — the bare name, no suffix — is the router: it costs little to load and decides which
+companion applies, or that none does.
 
-These skills are shipped with a `/web-ui-dev-*` prefix, so to make their names identifiable and not pollute the skill
-namespace.
+The companions cover library wiring (`-setup`), the component reference (`-components`), UX guidance (`-ux`), frontend
+patterns (`-frontend-patterns`), and ImFusion project tooling (`-imfusion-frontend-setup`).
+
+**`web-ui-dev-*`** never ships; it's the workflow for working on this repo — scaffolding a component, authoring a story,
+committing. Start with `/web-ui-dev-getting-started`, which routes you the same way.
+
+The split is the audience, and the prefix is how you tell at a glance which side of the package boundary a skill sits on.
+
+### 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`                   | One-time wiring in a consumer project — the styles import and the provider.          |
+| `/imf-web-ui-components`              | Component 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-frontend-patterns`       | Frontend patterns, including the sanctioned styling seams (tokens, data attributes). |
+| `/imf-web-ui-imfusion-frontend-setup` | Set up or audit an ImFusion frontend's tooling against the house baseline.           |
+
+### Development skills — `web-ui-dev-*`
 
 | Skill                                     | What it does                                                                          |
 | ----------------------------------------- | ------------------------------------------------------------------------------------- |
@@ -125,71 +109,8 @@ namespace.
 | `/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-teardown-worktree`           | Tear down a worktree, wherever it lives — merging its branch first or dropping it.    |
+| `/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
-
-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
-[`scripts/version.ts`](./scripts/version.ts) and writes it into `package.json` on the build agent just before publishing.
-
-That working copy is thrown away, so nothing is committed back.
-
-`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:
-
-```
-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
-```
-
-Bumping the patch is what makes a dev build sort above the release it follows and below the next one.
-
-Every build of `master` publishes a `dev` version automatically. To check what the current checkout would publish:
-
-```bash
-npx tsx scripts/version.ts        # prints, changes nothing
-```
-
-### Cutting a release
-
-Tag the commit you want to ship and push the tag:
-
-```bash
-git tag -a web-ui/v0.5.1 -m "web-ui 0.5.1"
-git push origin web-ui/v0.5.1
-```
-
-The tag triggers a build that publishes `0.5.1` as `latest` and repoints the `dev` dist-tag at the same version.
-
-**The tag must be annotated (`-a`).** `git describe` ignores lightweight tags, so a tag pushed without `-a` is invisible to
-the version script — the build reads through it to the previous release tag and publishes another `dev` version instead of
-the release.
-
-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.
-
-### 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
-```
+Keep these tables current when a skill is added, renamed, or removed — `/web-ui-dev-audit-docs` checks them.

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/components/logo/logo.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { VariantProps } from 'class-variance-authority';
 declare const logo: (props?: ({
     size?: "sm" | "md" | "lg" | "hero" | "xs" | "xl" | "fit" | null | undefined;
-    variant?: "main" | "inherit" | "support" | "minor" | "brand" | "oncolor" | null | undefined;
+    variant?: "main" | "inherit" | "support" | "minor" | "brand" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & VariantProps<typeof logo> & {
     /** Logo source — an image URL or an inline SVG node. Required; this primitive carries no brand default (see `ImFusionLogo` for our own mark). */

package/dist/index.js

@@ -301,7 +301,7 @@ function Jn({ value: e, label: t = "Copy", copiedLabel: n = "Copied", variant: i
 		"data-copied": c || void 0,
 		"aria-label": c ? n : t,
 		onClick: () => l(e),
-		className: (e) => r(Kn.root, typeof o == "function" ? o(e) : o),
+		className: r(Kn.root, typeof o == "string" ? o : void 0),
 		children: /* @__PURE__ */ X(u, {
 			size: 15,
 			strokeWidth: 2,
@@ -10593,7 +10593,6 @@ var Xh = {
 	variantInherit: "imf-ui-logo-module-variantInherit",
 	variantMain: "imf-ui-logo-module-variantMain",
 	variantMinor: "imf-ui-logo-module-variantMinor",
-	variantOncolor: "imf-ui-logo-module-variantOncolor",
 	variantSupport: "imf-ui-logo-module-variantSupport"
 }, Qh = n(Zh.root, { variants: {
 	size: {
@@ -10610,8 +10609,7 @@ var Xh = {
 		main: Zh.variantMain,
 		support: Zh.variantSupport,
 		minor: Zh.variantMinor,
-		brand: Zh.variantBrand,
-		oncolor: Zh.variantOncolor
+		brand: Zh.variantBrand
 	}
 } });
 function $h({ src: e, alt: t, size: n = "md", variant: r = "brand", height: i, className: a, style: o, ...s }) {