@imfusion/web-ui 0.6.4-dev.55.g47fb2f84 → 0.6.4-dev.58.g88c8fcaa

package/docs/user-guide/AgentTooling.mdx

@@ -0,0 +1,127 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="User Guide/Agent Tooling" />
+
+# Agent tooling
+
+The package ships skills and lifecycle hooks for coding agents working in a project that uses `@imfusion/web-ui`. Both are
+optional, but highly recommended: the library is built to be set up and used through an agent.
+
+## Supported agents
+
+The skills follow the [Agent Skills](https://agentskills.io/) standard and install into `.agents/skills/`. Project
+instructions go into [`AGENTS.md`](https://agents.md/): when the project has one, the installer keeps a fenced Web UI block
+in it up to date.
+
+| Agent | Skills | `AGENTS.md` | Hooks |
+| --- | --- | --- | --- |
+| [Codex](https://developers.openai.com/codex/skills) | Reads `.agents/skills/` | [Reads it](https://developers.openai.com/codex/guides/agents-md) | [Supported](https://developers.openai.com/codex/hooks) |
+| [Claude Code](https://code.claude.com/docs/en/skills) | Reads only `.claude/skills/`, so the installer links each skill there | [Reads it](https://code.claude.com/docs/en/changelog#2-1-277) when the project has no `CLAUDE.md`; otherwise add `@AGENTS.md` to `CLAUDE.md` | [Supported](https://code.claude.com/docs/en/hooks) |
+| Other Agent Skills clients | Check the agent's docs for `.agents/skills/` | Check the agent's docs | Not installed |
+
+The installer targets Codex and Claude Code. Other agents that implement the standard are listed on
+[agentskills.io](https://agentskills.io/); one that reads `.agents/skills/` picks up the same skills, without the hooks.
+
+## Install
+
+Install the package first, then run this in the project root:
+
+```sh
+npx web-ui install skills --harness=all
+npx web-ui install hooks --harness=all
+```
+
+`--harness` picks the agent the tooling is installed for:
+
+| Value | Installs for |
+| --- | --- |
+| `claude` | Claude Code |
+| `codex` | Codex, and any agent that reads `.agents/skills/` |
+| `all` | Both |
+
+Without `--harness`, `install skills` prompts once and records the choice, and later runs reuse it. `install hooks` needs the
+skills installed for the same harness first. Leave out the second command to install only the skills.
+
+`npx web-ui --help` lists the commands, and `--help` on any subcommand lists its options.
+
+## Skills
+
+`/imf-web-ui` is the router: the entry point for UI work and library questions. It routes usage questions to the packaged user
+guides and development tasks to the matching companion skill, and it keeps small tasks small instead of loading every
+reference just because the package is installed.
+
+With the hooks installed, the agent is pointed at the router at the start of every session. Without them, the agent usually
+picks it up from the skill's description; invoke it by name when it does not.
+
+| Skill | Use it for |
+| --- | --- |
+| `/imf-web-ui` | The router: any UI task or library question. |
+| `/imf-web-ui-components` | Component props, parts, defaults, and icons. |
+| `/imf-web-ui-ux` | Choosing components and shaping screens or flows. |
+| `/imf-web-ui-conventions` | Code, styling, data, validation, and project conventions. |
+| `/imf-web-ui-setup` | First-time wiring and approved project setup. |
+| `/imf-web-ui-audit` | A read-only check of an existing project. |
+| `/imf-web-ui-update` | Updating the package and its installed tooling. |
+
+## Hooks
+
+The hooks put the agent on the right skill at the right moment and ask it to verify the project after it edits source files:
+
+| Event | What the hook does |
+| --- | --- |
+| `SessionStart` | Points the agent at the router once per session. |
+| `SubagentStart` | Gives the same pointer to spawned agents. |
+| `UserPromptSubmit` | Names the companion skills relevant to the prompt. |
+| `Stop` | Asks for project verification after a turn edits source files. |
+
+## Keeping it current
+
+Ask the agent to update the library, for example "Update @imfusion/web-ui". That runs `/imf-web-ui-update`, which installs
+the newer package and refreshes the skills, hook scripts, and registrations to match it.
+
+To do the same by hand, update the package, then run:
+
+```sh
+npx web-ui install skills
+npx web-ui install hooks
+```
+
+Both reuse the recorded harness. Leave out the second command if the project skips hooks. Together they bring the installed
+tooling in line with the package version and remove anything the package no longer ships.
+
+## Reference
+
+### Where the files go
+
+- Skills: `.agents/skills/` for every harness. `claude` also links each skill from `.claude/skills/`.
+- Hook scripts: `.agents/hooks/imf-web-ui/`.
+- Hook registrations: `.claude/settings.json` for Claude Code, `.codex/hooks.json` for Codex.
+
+### Changing the harness
+
+Pass a different `--harness`, or `--reconfigure` to get the prompt again. Dropping `claude` removes its `.claude/skills`
+links. The next `install hooks` run removes the registrations from a harness that is no longer selected and adds them for the
+newly selected one.
+
+### What the installer owns
+
+The installer owns every skill directory named `imf-web-ui` or `imf-web-ui-*`. It overwrites and prunes those directories and
+leaves every other skill alone, so a project must not put its own skills under that prefix.
+
+Hook registrations merge into the chosen harness's file without touching unrelated entries. For each event, the installer
+adds a shipped hook unless that same script is already registered there; other hooks on that event stay alongside it.
+
+An agent reads the `agent-tooling` topic in the installed `imf-web-ui-conventions` skill before adapting a hook registration.
+
+### Codex trust
+
+Codex only runs project hooks after the project is trusted and each script is approved through `/hooks`. Revisit that review
+after a hook script changes. Claude Code has no equivalent trust gate.
+
+### Where the files come from
+
+The skills ship inside the package under `src/llms/skills/`, and `web-ui install` copies them into the project. The package
+also exposes generated component, token, and icon indexes for the lookup skill. User guides ship as readable MDX under
+`docs/user-guide/`; agents read them from the installed package without a running Storybook.
+
+<PageNav>Importing and composing components, then changing their look with tokens, CSS, and state attributes.</PageNav>

package/docs/user-guide/BrandAssets.mdx

@@ -13,8 +13,8 @@ subpath:
 @imfusion/web-ui/assets/<folder>/<file>
 ```
 
-These are static files rather than components, so an application references them from its HTML head or copies them into its
-own output. Everything under the subpath is a real file on disk, which means a build step can resolve and copy it.
+These are static files rather than components, so an application references them from its HTML head, copies them into its own
+output, or resolves them on disk during its build.
 
 ## Files
 
@@ -43,26 +43,19 @@ the sides.
 
 <img src={ogUrl} alt="" width="480" style={{ display: "block", borderRadius: "0.5rem", margin: "1.5rem 0" }} />
 
-## Regenerate the favicon files
+## Use the files
 
-`favicon.svg` is the source for every favicon variant. With [ImageMagick](https://imagemagick.org) installed, run this from
-`src/assets/public/favicon/` after changing the SVG:
+Pick the method that matches how the application builds:
 
-```sh
-for output in "favicon-16.png:16" "favicon-32.png:32" "apple-touch-icon.png:180" "icon-192.png:192" "icon-512.png:512"; do
-  file=${output%%:*}
-  size=${output##*:}
-  magick -density 512 favicon.svg -resize "${size}x${size}" "png32:$file"
-done
+| Method | Use it when | Public URLs |
+| --- | --- | --- |
+| [Vite plugin](#vite-plugin) | The application builds with Vite | Stable root paths such as `/favicon.ico` |
+| [Copy step](#copy-step) | Another build system, or a static directory served as is | Whatever the copy target gives them |
+| [Direct import](#direct-import) | One file used from application code, such as a manifest or an `<img>` | Hashed by the bundler |
 
-magick -density 512 favicon.svg -define icon:auto-resize=16,32,48 favicon.ico
-```
-
-`og-image.png` is a separate 1200×630 social image.
+### Vite plugin
 
-## Add the favicon to a Vite application
-
-Register the Vite plugin, then reference the stable root URLs from the document head:
+Register the plugin, then reference the stable root URLs from the document head:
 
 ```ts
 import { defineConfig } from "vite";
@@ -83,23 +76,27 @@ export default defineConfig({
 The plugin serves the complete favicon set during development and emits it at the root of the build output. Give `og:image`
 an absolute URL. Chat and social applications fetch it from their own servers, so a relative path does not resolve.
 
-### Other build systems
+### Copy step
+
+Copy the files into the application's static-files directory during its build, then reference them from its HTML the same way
+as above. Resolve the package path rather than hard-coding a path into `node_modules`:
 
-Copy the files into the application's static-files directory during its build. Resolve the package path rather than hard-coding
-a path into `node_modules`.
+```ts
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const faviconDir = dirname(fileURLToPath(import.meta.resolve("@imfusion/web-ui/assets/favicon/favicon.svg")));
+```
 
-## Import a single file in application code
+### Direct import
 
-A bundler can also take one file directly, which is useful for a manifest or an `<img>`:
+A bundler can also take one file directly:
 
 ```ts
 import iconUrl from "@imfusion/web-ui/assets/favicon/icon-512.png";
 ```
 
 The bundler returns the asset's URL for use in application code. Vite also processes `index.html` and rewrites supported
-asset references there. Use the copy step above when the files need stable public filenames.
-
-## Keycloak
+asset references there. Use the plugin or the copy step when the files need stable public filenames.
 
-A Keycloak login theme reads its icons from its own `resources/` directory. Copy the favicon files in when building the theme
-and reference them from the theme's template, the same way as any other application.
+<PageNav>Where behavior comes from, what Web UI adds on top, and why components are split into parts.</PageNav>

package/docs/user-guide/GettingStarted.mdx

@@ -4,28 +4,43 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 # Getting started
 
-## Install
+`@imfusion/web-ui` is the shared React UI library for ImFusion web apps. It provides accessible primitives, ImFusion tokens,
+and one public import surface.
+
+The library is built to be set up and used through a coding agent. The recommended way to wire it up is to ask the agent,
+rather than follow a manual walkthrough.
+
+## 1. Install the package
 
 ```sh
 npm install @imfusion/web-ui
 ```
 
-To try a local checkout instead:
+The package requires React and React DOM 19 or newer.
 
-```sh
-# from the web-ui repository
-npm pack
+## 2. Install the agent skills
 
-# from your application
-npm install /path/to/web-ui-0.0.0.tgz
+```sh
+npx web-ui install skills --harness=all
+npx web-ui install hooks --harness=all
 ```
 
-The package requires React and React DOM 19 or newer. Integrations have their own optional peer dependencies; their pages
-list them.
+This installs the skills an agent uses to work with the library. The hooks point the agent at the right skill for each task
+and ask it to verify the project after it edits source files. [Agent Tooling](./AgentTooling.mdx) covers the flags and what
+each piece does.
+
+## 3. Ask the agent to set up the library
 
-## Add the provider
+Tell your agent, in plain language:
 
-Import the stylesheet and mount `WebUIProvider` once, near the application root:
+> Set up @imfusion/web-ui in this project.
+
+Behind the scenes this runs the setup skill, `/imf-web-ui-setup`. It proposes a plan and writes the wiring only after you
+approve it.
+
+## 4. What the agent writes
+
+For an existing project, the agent adds the stylesheet import and mounts `WebUIProvider` once, near the application root:
 
 ```tsx
 import "@imfusion/web-ui/styles.css";
@@ -42,14 +57,14 @@ export function App() {
 
 Import primitives from `@imfusion/web-ui`. Do not import Base UI components or styles directly.
 
-## Add the favicon
+An existing project that already has UI can also ask the agent for an audit. `/imf-web-ui-audit` checks the project against
+the library's conventions and reports what it finds without changing any file.
+
+For a new project, the same setup skill can also propose routing, an app shell, and other starter pieces. It writes only what
+you approve.
 
-The package also ships the ImFusion favicon set and a social sharing image. See **Brand Assets** for the files and the
-`<link>` tags an application needs.
+## Without an agent
 
-## Explore token controls
+Make the same two changes yourself: install the package, then add the stylesheet import and `WebUIProvider` shown above.
 
-When exploring the library in Storybook, open `Tokens` in the top-right toolbar. The token showcase displays the controls in
-a sidebar on larger screens and a drawer on smaller screens, and changes update the preview live. The controls do not yet
-generate a copyable CSS override block. Apply the values you want in your application CSS, starting with `--imf-ui-*`
-variables.
+<PageNav>Which agents the tooling supports, the skills it installs, and the hooks that point an agent at them.</PageNav>

package/docs/user-guide/HowItsBuilt.mdx

@@ -4,30 +4,110 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 # How it's built
 
-You can use the library without knowing its implementation. This explains the boundary.
+You can use the library without knowing its implementation. The snippets below are simplified from the library source.
 
 ## Behavior comes from an implementation library
 
-Adapted interactive primitives use Base UI for focus management, keyboard behavior, and accessibility details. Web UI owns the public
-props, defaults, tokens, styles, and exports.
+Adapted interactive primitives use Base UI for focus management, keyboard behavior, and accessibility details. Web UI wraps
+each part, takes its props from the upstream type, and adds its own class and identity:
 
-This split lets the implementation change without forcing a consumer migration.
+```tsx
+import { Switch as Upstream } from "@base-ui/react/switch";
+
+export function Root(props: React.ComponentProps<typeof Upstream.Root>) {
+  return <Upstream.Root {...props} data-imf-ui-component="Switch.Root" className={styles.root} />;
+}
+```
+
+Web UI owns the public props, defaults, tokens, styles, and exports. An application imports `Switch` from `@imfusion/web-ui`
+and never sees `@base-ui/react`, so the implementation can change without forcing a consumer migration.
 
 ## Web UI is the styled middle layer
 
-Every primitive adds:
+Between the implementation library and the application, Web UI adds the look. Styles are CSS Modules that read `--imf-ui-*`
+tokens, and two mechanisms pick which rules apply: CVA for the props a consumer sets, and data attributes for the state a
+component is in at runtime.
+
+### Variants with CVA
+
+[class-variance-authority](https://cva.style/docs) (CVA) maps each variant prop to a CSS Module class. The defaults sit in
+the component signature:
+
+```tsx
+import { cva } from "class-variance-authority";
+import classes from "./button.module.css";
+
+const button = cva(classes.root, {
+  variants: {
+    variant: { primary: classes.variantPrimary, outline: classes.variantOutline },
+    size: { sm: classes.sizeSm, md: classes.sizeMd }
+  }
+});
+
+export function Button({ variant = "primary", size = "md", className, ...props }: Props) {
+  return <Upstream {...props} data-imf-ui-component="Button" className={button({ variant, size, className })} />;
+}
+```
+
+A consumer `className` joins the variant classes instead of replacing them.
+
+### Runtime state with data attributes
+
+State that changes while the component runs, such as checked, open, or disabled, is not a prop to map. Base UI sets it as
+[data attributes](https://base-ui.com/react/handbook/styling#style-hooks) on each part, like `data-checked` on
+`Switch.Root`, and the stylesheet selects them:
 
-- `--imf-ui-*` tokens for the visual system.
-- `data-imf-ui-component` for a stable DOM identity.
-- CSS layers that let consumer styles override the defaults.
+```css
+@layer imf-ui.components {
+  .root {
+    background: var(--imf-ui-color-bg-minor);
+  }
+
+  .root[data-checked] {
+    background: var(--imf-ui-color-bg-primary-main);
+  }
+}
+```
+
+Base UI's page for each component lists the attributes its parts expose.
+
+### Layers and tokens
+
+Every rule sits in the `imf-ui.components` cascade layer. Unlayered CSS always beats layered CSS, so an application rule
+wins without `!important`. The token changes the value everywhere; the rule changes one place:
+
+```css
+:root {
+  --imf-ui-color-primary-hue: 30;
+}
+
+[data-imf-ui-component="Switch.Root"] {
+  border-radius: 0;
+}
+```
 
 The wrapper keeps the upstream surface complete. If an upstream part or prop is useful, Web UI exposes it instead of making an
 app reach around the library.
 
 ## Compose parts
 
-Compound components use namespaces such as `Drawer.Root`, `Drawer.Trigger`, and `Drawer.Content`. This keeps behavior and
-layout composable without a component with a prop for every possible arrangement.
+Compound components are namespaces of parts. Instead of one component with a prop for every arrangement, an application
+renders the parts it needs, where it needs them:
+
+```tsx
+// One component, one prop per arrangement:
+<Field label="Study name" description="Shown in the reading queue." descriptionPosition="above" />
+
+// Parts, arranged by the application:
+<Field.Root>
+  <Field.Label>Study name</Field.Label>
+  <Field.Description>Shown in the reading queue.</Field.Description>
+  <Input name="study" />
+</Field.Root>
+```
+
+The first form is pseudo-code; Web UI ships only the second. The
+[library-boundary topic](../../src/llms/skills/imf-web-ui-conventions/topics/library-boundary.md) has the consumer import and
+composition rules.
 
-For consumer import and composition rules, read the packaged
-[library-boundary topic](../../src/llms/skills/imf-web-ui-conventions/topics/library-boundary.md).
+<PageNav>The token families, the control tokens that change them, and how to try them live.</PageNav>

package/docs/user-guide/Tokens.mdx

@@ -1,7 +1,6 @@
 import { Meta } from "@storybook/addon-docs/blocks";
-import { Typo } from "#/components/typo";
 
-<Meta title="User Guide/Tokens" />
+<Meta title="Tokens/Overview" />
 
 # Tokens
 
@@ -36,8 +35,7 @@ Use a semantic token for a one-off role. That changes one result without changin
 | Shape | Radius and corner controls. |
 | Shadow | The shared elevation model. |
 
-The live token controls and exact names are on the
-<Typo.Link href="/?path=/story/user-guide-tokens-reference--reference" kind="internal" target="_top">token reference</Typo.Link>.
+The live token controls and exact names are on the [token reference](../../src/tokens/token-reference.stories.tsx).
 
 ## Use semantic tokens in CSS
 
@@ -74,12 +72,16 @@ brand shape axis. Shadow controls share one lighting model across components:
 - `--imf-ui-shadow-intensity` sets the lowest-level opacity; higher levels add one point each.
 - `--imf-ui-shadow-color` sets the cast color per scheme.
 
-Components consume these values through tokens. The package's `src/llms/tokens.gen.json` lists the shipped token names and
-authored defaults.
+Components consume these values through tokens. `node_modules/@imfusion/web-ui/src/llms/tokens.gen.json` lists the shipped
+token names and authored defaults.
 
 ## Explore
 
-- <Typo.Link href="/?path=/story/user-guide-tokens-showcase--showcase" kind="internal" target="_top">Showcase</Typo.Link>
-  applies the controls to real components.
-- <Typo.Link href="/?path=/story/user-guide-tokens-reference--reference" kind="internal" target="_top">Reference</Typo.Link>
-  lists every generated token.
+In Storybook, the Showcase and Reference pages show the token controls in a side panel on larger screens and behind the
+`Tokens` button in the bottom-right corner on smaller ones. Other stories open the same drawer from that button. Changes
+update the preview live; to keep a value, set that token in your application CSS.
+
+- [Showcase](../../src/tokens/showcase.stories.tsx) applies the controls to real components.
+- [Reference](../../src/tokens/token-reference.stories.tsx) lists every generated token.
+
+<PageNav>What a primitive is, how compound parts compose, and what each component page shows.</PageNav>

package/docs/user-guide/UsagePatterns.mdx

@@ -4,28 +4,70 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 # Usage patterns
 
-## Keep imports behind Web UI
+## Build with components
 
-Use the library's components, icons, styles, and provider. Do not import Base UI or another implementation package directly.
-That keeps the styling and public API consistent.
+Import components and the provider from `@imfusion/web-ui`, and icons from `@imfusion/web-ui/icons`. Multi-part
+primitives are namespaces: render the parts a screen needs, in the order the component documents.
 
-## Compose parts
+```tsx
+import { Field, Input } from "@imfusion/web-ui";
+
+export function StudyName() {
+  return (
+    <Field.Root>
+      <Field.Label>Study name</Field.Label>
+      <Input name="study" />
+      <Field.Description>Shown in the reading queue.</Field.Description>
+    </Field.Root>
+  );
+}
+```
 
-Multi-part primitives are namespaces. Render the parts you need:
+The same pattern scales to an overlay. A drawer is a namespace too, and the field sits inside it unchanged:
 
 ```tsx
-<Drawer.Root>
-  <Drawer.Trigger>Open</Drawer.Trigger>
-  <Drawer.Content>…</Drawer.Content>
-</Drawer.Root>
+import { Button, Drawer, Field, Input, Stack } from "@imfusion/web-ui";
+import { Icon, Settings } from "@imfusion/web-ui/icons";
+
+export function StudySettings() {
+  return (
+    <Drawer.Root>
+      <Drawer.Trigger render={<Button variant="secondary" startIcon={<Icon glyph={Settings} />}>Settings</Button>} />
+      <Drawer.Portal>
+        <Drawer.Backdrop />
+        <Drawer.Viewport>
+          <Drawer.Popup>
+            <Drawer.Content>
+              <Stack gap="4">
+                <Drawer.Title>Study settings</Drawer.Title>
+                <Field.Root>
+                  <Field.Label>Study name</Field.Label>
+                  <Input name="study" />
+                  <Field.Description>Shown in the reading queue.</Field.Description>
+                </Field.Root>
+                <Drawer.Close render={<Button>Save</Button>} />
+              </Stack>
+            </Drawer.Content>
+          </Drawer.Popup>
+        </Drawer.Viewport>
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+}
 ```
 
-All parts come from `@imfusion/web-ui`, including less common ones such as `Indent`, `SwipeArea`, and `Description`.
+Every part comes from `@imfusion/web-ui`, including less common ones such as `Drawer.Indent`, `Drawer.SwipeArea`, and
+`Field.Description`. Do not import Base UI or another implementation package directly; the library's parts carry the styles,
+defaults, and stable identity that the rest of this page relies on.
+
+## Change the look
 
+Start as broad as the change is, then narrow down: a token changes a whole family, a CSS rule changes one place, and a state
+attribute changes one state.
 
-## Change the look with tokens
+### With tokens
 
-When exploring the library in Storybook, use the `Tokens` controls in the top-right toolbar. On the token showcase, they appear as a sidebar on larger screens and a drawer on smaller screens, and changes update the preview live. The controls do not yet generate a copyable CSS override block. Apply the values you want in your application CSS, starting with `--imf-ui-*` variables. A control changes a related family of semantic tokens:
+The theme is a set of `--imf-ui-*` custom properties. A control token changes a related family of semantic tokens at once:
 
 ```css
 :root {
@@ -33,7 +75,11 @@ When exploring the library in Storybook, use the `Tokens` controls in the top-ri
 }
 ```
 
-Use a semantic token for a local role. Consumer CSS outside `@layer imf-ui.components` overrides the library without `!important`:
+[Tokens](./Tokens.mdx) lists the families, the controls, and how to try them live in Storybook.
+
+### With CSS
+
+Consumer CSS outside `@layer imf-ui.components` overrides the library without `!important`:
 
 ```css
 .my-button {
@@ -43,24 +89,19 @@ Use a semantic token for a local role. Consumer CSS outside `@layer imf-ui.compo
 
 Components carry `data-imf-ui-component` on their roots, so it is a stable selector. CSS Module class names are internal.
 
-## Style state with data attributes
+### By state
 
 Components expose runtime state through attributes such as `data-checked`, `data-disabled`, and `data-popup-open`:
 
 ```css
-[data-imf-ui-component="Switch"][data-checked] {
+[data-imf-ui-component="Switch.Root"][data-checked] {
   outline: var(--imf-ui-border-size-2) solid var(--imf-ui-color-fg-positive);
 }
 ```
 
 Use the attribute instead of maintaining a second state class.
 
-## Choose variants locally
-
-A `variant` prop belongs to the component that defines it. `brand` means identity color; `primary` means the action color.
-They may look related, but one component's variant list is not a global list.
-
-## Color schemes
+### By color scheme
 
 `WebUIProvider` sets `data-imf-ui-color-scheme="light"` or `"dark"` on `<html>`. Select it when an application rule needs to
 change with the scheme:
@@ -77,3 +118,5 @@ component colors cannot disagree with them:
 ```tsx
 <WebUIProvider colorScheme="dark">{children}</WebUIProvider>
 ```
+
+<PageNav>The favicon set and social sharing image the package ships, and three ways to put them in an application.</PageNav>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.6.4-dev.55.g47fb2f84",
+  "version": "0.6.4-dev.58.g88c8fcaa",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "homepage": "https://imfusion.com",
@@ -20,7 +20,7 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "bin": {
-    "web-ui-install": "bin/install.js"
+    "web-ui": "dist/web-ui-cli.js"
   },
   "exports": {
     ".": {
@@ -56,14 +56,13 @@
     "src/llms/llms.gen.txt",
     "src/llms/icon-catalog.gen.json",
     "src/llms/tokens.gen.json",
-    "src/llms/skills",
-    "bin/install.js"
+    "src/llms/skills"
   ],
   "scripts": {
     "dev": "tsx scripts/dev.ts",
     "dev:host": "tsx scripts/dev.ts --host",
     "dev:lib": "concurrently -n codegen,lib -c yellow,blue \"npm run codegen:watch\" \"vite build --watch\"",
-    "build": "npm run codegen && rm -rf dist && vite build && npm run codegen:docgen && npm run codegen:llms && npm run codegen:tokens",
+    "build": "npm run codegen && rm -rf dist && vite build && chmod +x dist/web-ui-cli.js && npm run codegen:docgen && npm run codegen:llms && npm run codegen:tokens",
     "build:storybook": "npm run codegen:storybook && storybook build",
     "ci:status": "teamcity run list --job WebSDK_WebUI_BuildTest --limit 3 --json=id,number,status,state,branchName,buildType.name,triggered.type,triggered.user.name,startDate,finishDate,webUrl | tsx scripts/ci-status.ts",
     "storybook": "npm run codegen:storybook && storybook dev -p 6006 --no-open --ci",
@@ -119,6 +118,7 @@
     "@base-ui/react": "1.6.0",
     "@clack/prompts": "1.7.0",
     "class-variance-authority": "0.7.1",
+    "commander": "15.0.0",
     "iconoir-react": "7.12.1"
   },
   "devDependencies": {
@@ -152,6 +152,7 @@
     "jiti": "2.7.0",
     "knip": "6.14.2",
     "lightningcss": "1.32.0",
+    "mermaid": "12.0.0",
     "playwright": "1.60.0",
     "prettier": "3.8.3",
     "react-docgen-typescript": "2.4.0",