@imfusion/web-ui 0.6.1-dev.6.g4adc5c3e → 0.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.txt +30 -0
- package/README.md +104 -171
- package/THIRD_PARTY_NOTICES.md +34 -0
- package/bin/install.js +28 -10
- package/dist/code-BFMQnmu9.js +147 -0
- package/dist/codegen/gen-code-highlight-theme.d.ts +1 -0
- package/dist/components/code/code.d.ts +5 -4
- package/dist/components/stack/stack.d.ts +1 -1
- package/dist/components/toast/index.d.ts +2 -0
- package/dist/components/toast/toast.d.ts +200 -0
- package/dist/components/toast/toast.meta.d.ts +2 -0
- package/dist/components/typo/typo.d.ts +23 -22
- package/dist/icons/icon-config.d.ts +12 -0
- package/dist/{icons-wBmF0U2x.js → icons-Cy1HAosO.js} +1 -1
- package/dist/icons.js +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1278 -1069
- package/dist/integrations/code-highlight/highlighter.d.ts +24 -0
- package/dist/integrations/code-highlight.js +80 -47
- package/dist/integrations/image-display-options.js +2 -2
- package/dist/provider/web-ui-provider.d.ts +3 -3
- package/dist/style.css +1 -1
- package/dist/{tabs-CMKvMF4E.js → tabs-DIe1Utiy.js} +2 -0
- package/docs/assets/imfusion-banner.svg +16 -0
- package/package.json +15 -8
- package/src/docgen/doc.gen.json +515 -1
- package/src/llms/install-templates/AGENTS.md +15 -18
- package/src/llms/llms.gen.txt +39 -33
- package/src/llms/skills/imf-web-ui/SKILL.md +30 -39
- package/src/llms/skills/imf-web-ui-audit/SKILL.md +50 -102
- package/src/llms/skills/imf-web-ui-components/SKILL.md +47 -104
- package/src/llms/skills/imf-web-ui-conventions/SKILL.md +44 -52
- package/src/llms/skills/imf-web-ui-conventions/templates/AUDIT_CHECKLIST.md +1 -0
- package/src/llms/skills/imf-web-ui-conventions/topics/agent-tooling.md +40 -62
- package/src/llms/skills/imf-web-ui-conventions/topics/assets.md +11 -12
- package/src/llms/skills/imf-web-ui-conventions/topics/authentication.md +31 -46
- package/src/llms/skills/imf-web-ui-conventions/topics/class-names.md +18 -23
- package/src/llms/skills/imf-web-ui-conventions/topics/components.md +20 -69
- package/src/llms/skills/imf-web-ui-conventions/topics/data.md +50 -146
- package/src/llms/skills/imf-web-ui-conventions/topics/docs-structure.md +17 -23
- package/src/llms/skills/imf-web-ui-conventions/topics/git.md +15 -20
- package/src/llms/skills/imf-web-ui-conventions/topics/library-boundary.md +28 -19
- package/src/llms/skills/imf-web-ui-conventions/topics/library-setup.md +20 -16
- package/src/llms/skills/imf-web-ui-conventions/topics/npm-project.md +28 -42
- package/src/llms/skills/imf-web-ui-conventions/topics/project-structure.md +28 -30
- package/src/llms/skills/imf-web-ui-conventions/topics/react.md +28 -74
- package/src/llms/skills/imf-web-ui-conventions/topics/styling.md +65 -62
- package/src/llms/skills/imf-web-ui-conventions/topics/testing.md +12 -14
- package/src/llms/skills/imf-web-ui-conventions/topics/tokens.md +9 -4
- package/src/llms/skills/imf-web-ui-conventions/topics/tooling.md +40 -68
- package/src/llms/skills/imf-web-ui-conventions/topics/typescript.md +26 -50
- package/src/llms/skills/imf-web-ui-conventions/topics/validation.md +19 -25
- package/src/llms/skills/imf-web-ui-setup/SKILL.md +45 -64
- package/src/llms/skills/imf-web-ui-update/SKILL.md +48 -114
- package/src/llms/skills/imf-web-ui-ux/SKILL.md +64 -92
- package/src/llms/skills/imf-web-ui-ux/references/forms.md +16 -36
- package/src/llms/skills/imf-web-ui-ux/references/usability-heuristics.md +14 -27
- package/src/llms/skills/imf-web-ui-ux/references/visual-design.md +22 -38
- package/src/llms/tokens.gen.json +5 -5
- package/bin/install.test.ts +0 -329
- package/dist/code-Blo48PGr.js +0 -136
- package/dist/icons/icon-config-provider.d.ts +0 -8
- package/dist/icons/icon-context.d.ts +0 -4
package/LICENSE.txt
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
END USER LICENSE AGREEMENT
|
|
2
|
+
|
|
3
|
+
The following agreement regarding Web UI - referred to as "software" - is made between ImFusion GmbH - referred to as "licensor" - and anyone who is installing, accessing or in any other way using the software - referred to as "user".
|
|
4
|
+
|
|
5
|
+
1. The licensor and as such issuer of the license and bearer of the worldwide exclusive usage rights including the rights to reproduce, distribute and make the software available to the public in any form is ImFusion GmbH, Ridlerstrasse 57, 80339 Munich, Germany.
|
|
6
|
+
|
|
7
|
+
2. The software is distributed "as is". No warranty of any kind is expressed or implied. You use it at your own risk. Neither the author, the licensor nor the agents of the licensor will be liable for data loss, damages, loss of profits or any other kind of loss while using or misusing this software.
|
|
8
|
+
|
|
9
|
+
3. The software is provided under an evaluation license and a commercial license.
|
|
10
|
+
3.1 Evaluation: For evaluation purposes users may use the evaluation version of this software on all computers and mobile devices (USB drive, external hard drive, etc.) which are property of the license owner.
|
|
11
|
+
|
|
12
|
+
3.2 Commercial license: Commercial users require one license per computer or mobile device on which the software is installed.
|
|
13
|
+
|
|
14
|
+
A user who purchased a license, is granted a non-exclusive right to use the software on as many computers as defined by the licensing terms above according to the number of licenses purchased, for any legal purpose. Batch operation (in particular on a server or inside a virtual machine) is not permitted. Batch operation is defined as processing data without the end user directly interacting with the software with the software being controlled by another application or script. If such a use case is desired please contact ImFusion GmbH at info@imfusion.de for further details.
|
|
15
|
+
|
|
16
|
+
4. The software shares nonpersonally identifiable data with the licensor, including computer configuration, software usage, and peripherals connected for purposes of improving products and services, providing services to the user, facilitating the provision of software updates, dynamically served content and product support as well as communicating with the user.
|
|
17
|
+
|
|
18
|
+
5. The licensed software may not be rented or leased but may be permanently transferred, in its entirety, if the recipient agrees to the terms of this license.
|
|
19
|
+
|
|
20
|
+
6. To buy a license, please send an inquiry to info@imfusion.com for details or visit http://www.imfusion.com
|
|
21
|
+
|
|
22
|
+
7. You may not use, copy, emulate, clone, rent, lease, sell, modify, decompile, disassemble, otherwise reverse engineer, or transfer the licensed software, or any subset of the licensed software, except as provided for in this agreement. Any such unauthorized use shall result in immediate and automatic termination of this license and may result in criminal and/or civil prosecution.
|
|
23
|
+
|
|
24
|
+
The software may be using components developed and/or copyrighted by third parties. Please read THIRD_PARTY_NOTICES.md for details.
|
|
25
|
+
|
|
26
|
+
8. This license agreement is construed solely and exclusively under German law. The courts at the registered office of ImFusion GmbH in Munich, Germany shall have exclusive jurisdiction for any and all disputes arising in connection with this license agreement or its validity.
|
|
27
|
+
|
|
28
|
+
9. Installing and using the software signifies acceptance of these terms and conditions of the license. If you do not agree with the terms of this license, you must remove all software files from your storage devices and cease to use the software.
|
|
29
|
+
|
|
30
|
+
10. The Web UI is currently not certified as a medical product. It has neither FDA approval nor does it bear a CE marking and must not be used for diagnostic purposes.
|
package/README.md
CHANGED
|
@@ -1,227 +1,160 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @imfusion/web-ui
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
<p align="center">
|
|
4
|
+
<img src="./docs/assets/imfusion-banner.svg" alt="ImFusion" width="100%" />
|
|
5
|
+
</p>
|
|
4
6
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
- [Development](#development) — working on the library itself, including the Agent Skills
|
|
8
|
-
- [Releasing](#releasing) — how versions are derived and how to cut one
|
|
7
|
+
> [!WARNING] **Pre-1.0:** This library is under active development. APIs may change without notice, and it is not intended
|
|
8
|
+
> for production use.
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
The shared React UI library for ImFusion web apps. It provides accessible primitives, ImFusion tokens, and one public import
|
|
11
|
+
surface. Base UI supplies behavior for the primitives that need it; consumers do not depend on Base UI directly.
|
|
11
12
|
|
|
12
|
-
|
|
13
|
+
- [Use the library](#use-the-library)
|
|
14
|
+
- [Read the docs](#read-the-docs)
|
|
15
|
+
- [Work on the library](#work-on-the-library)
|
|
16
|
+
- [Release it](#release-it)
|
|
13
17
|
|
|
14
|
-
|
|
15
|
-
[Test Licenses](https://imfusion.atlassian.net/wiki/spaces/DEV/pages/255590402/Test+Licenses) page on Confluence and add it
|
|
16
|
-
to your user-level `.npmrc`:
|
|
18
|
+
## Use the library
|
|
17
19
|
|
|
18
|
-
|
|
19
|
-
npm config set //registry.npmjs.org/:_authToken=<token> --location=user
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
Then:
|
|
20
|
+
Install the latest release:
|
|
23
21
|
|
|
24
|
-
```
|
|
22
|
+
```sh
|
|
25
23
|
npm install @imfusion/web-ui
|
|
26
24
|
```
|
|
27
25
|
|
|
28
|
-
|
|
26
|
+
To follow builds from `master`, use the `dev` dist-tag:
|
|
29
27
|
|
|
30
|
-
```
|
|
28
|
+
```sh
|
|
31
29
|
npm install @imfusion/web-ui@dev
|
|
32
30
|
```
|
|
33
31
|
|
|
34
|
-
Import the stylesheet and
|
|
32
|
+
Import the stylesheet and mount the provider once at your app root:
|
|
35
33
|
|
|
36
34
|
```tsx
|
|
37
35
|
import "@imfusion/web-ui/styles.css";
|
|
38
36
|
import { WebUIProvider } from "@imfusion/web-ui";
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
### LLM integration
|
|
42
|
-
|
|
43
|
-
The `web-ui` package does offer first-class support for LLMs, but it's not wired up by default.
|
|
44
|
-
|
|
45
|
-
To install the skills, run this command after the package is installed:
|
|
46
37
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
The binary asks which LLM client you use and installs everything it needs. Run it again after a version bump and it refreshes
|
|
52
|
-
the directories it already installed into, without asking again — `--reconfigure` re-opens that choice.
|
|
53
|
-
|
|
54
|
-
The optional `--hooks` flag also installs the agent lifecycle hooks and registers them for both hosts, in
|
|
55
|
-
`.claude/settings.json` (Claude Code) and `.codex/hooks.json` (Codex). Three hooks inject one fixed line each: `SessionStart`
|
|
56
|
-
and `SubagentStart` point the agent at the `imf-web-ui` skills router, and `UserPromptSubmit` names the companion skills to
|
|
57
|
-
consult per task. A fourth, the `Stop` gate, blocks a turn that edited source files once, until the agent has addressed the
|
|
58
|
-
project's verification. Re-running the installer refreshes the scripts and prunes retired ones along with their
|
|
59
|
-
registrations. Without `--hooks`, the skills are still available but no lifecycle hook runs. The full flow is documented in
|
|
60
|
-
the shipped [`agent-tooling` topic](./src/llms/skills/imf-web-ui-conventions/topics/agent-tooling.md) of the conventions
|
|
61
|
-
skill.
|
|
62
|
-
|
|
63
|
-
**Available consumer skills - `/imf-web-ui-*`**
|
|
64
|
-
|
|
65
|
-
| Skill | What it does |
|
|
66
|
-
| ------------------------- | ------------------------------------------------------------------------------ |
|
|
67
|
-
| `/imf-web-ui` | The router: decides whether guidance is needed, then which companion to open. |
|
|
68
|
-
| `/imf-web-ui-setup` | Plan and, after approval, bootstrap a consumer project by topic. |
|
|
69
|
-
| `/imf-web-ui-components` | Component and icon reference — what exists and how it's meant to be used. |
|
|
70
|
-
| `/imf-web-ui-ux` | UX guidance for building interfaces with the library. |
|
|
71
|
-
| `/imf-web-ui-conventions` | The frontend conventions baseline, including the sanctioned styling seams. |
|
|
72
|
-
| `/imf-web-ui-audit` | Read-only health check for a consumer project, ending in a plan you approve. |
|
|
73
|
-
| `/imf-web-ui-update` | Update the library, skills, and optional hooks, then verify before committing. |
|
|
74
|
-
|
|
75
|
-
Start at `/imf-web-ui` — it routes to the rest. Storybook's **User Guide → AI Agents** page covers the whole family.
|
|
76
|
-
|
|
77
|
-
### Versions and updates
|
|
78
|
-
|
|
79
|
-
Every merge to master publishes a new build under the `dev` dist-tag. Which spec you install decides how you pick those up:
|
|
80
|
-
|
|
81
|
-
| Spec in `package.json` | Gets | Update with |
|
|
82
|
-
| ---------------------------------- | -------------------------- | ------------------------------ |
|
|
83
|
-
| `"@imfusion/web-ui": "^0.5.0"` | matching releases | `npm update @imfusion/web-ui` |
|
|
84
|
-
| `"@imfusion/web-ui": "latest"` | the newest release | `npm update @imfusion/web-ui` |
|
|
85
|
-
| `"@imfusion/web-ui": "dev"` | the newest build of master | `npm update @imfusion/web-ui` |
|
|
86
|
-
| `"@imfusion/web-ui": "file:….tgz"` | a packed tarball, frozen | re-pack and re-install by hand |
|
|
87
|
-
|
|
88
|
-
- **Two dist-tags.** `latest` moves when a release is tagged, `dev` on every build of master (and onto the release when one
|
|
89
|
-
is cut).
|
|
90
|
-
- **A range like `^0.5.0` is the usual choice.** It tracks releases and states which major you expect; bare `latest` follows
|
|
91
|
-
releases across majors, breaking changes included.
|
|
92
|
-
- **Dist-tag specs stay literal.** npm keeps `dev` or `latest` as-is in `package.json` and re-resolves on every `npm update`.
|
|
93
|
-
The concrete version lands in `package-lock.json`, so builds stay reproducible until you update.
|
|
94
|
-
- **Track `dev` while building against the library**, to get new components as they land. Use a release spec for anything you
|
|
95
|
-
cut a production release from, since `dev` moves whenever someone merges.
|
|
96
|
-
- **A `file:` tarball never updates.** npm copies the archive into `node_modules` and re-copies the same one on every
|
|
97
|
-
install. Switch to `dev` or a version range to get updates.
|
|
98
|
-
|
|
99
|
-
## Documentation
|
|
100
|
-
|
|
101
|
-
**[Storybook](https://storybook.js.org/)** is the documentation platform — the component catalog, every prop, and the setup
|
|
102
|
-
guides. It isn't hosted yet, so run it locally:
|
|
103
|
-
|
|
104
|
-
```bash
|
|
105
|
-
npm run dev # builds the library, then Storybook + a rebuild watcher
|
|
38
|
+
export function App() {
|
|
39
|
+
return <WebUIProvider>{/* app */}</WebUIProvider>;
|
|
40
|
+
}
|
|
106
41
|
```
|
|
107
42
|
|
|
108
|
-
|
|
43
|
+
### Agent skills
|
|
109
44
|
|
|
110
|
-
|
|
45
|
+
The package can install optional skills for agents working in a consumer project:
|
|
111
46
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
```bash
|
|
115
|
-
npm install
|
|
116
|
-
npm run git:config # hooks path + rebase-only pull/merge
|
|
47
|
+
```sh
|
|
48
|
+
npx web-ui-install
|
|
117
49
|
```
|
|
118
50
|
|
|
119
|
-
|
|
51
|
+
Run the command again after updating the package. It refreshes the skills already installed in the project. Use
|
|
52
|
+
`--reconfigure` to choose a different target. Add `--hooks` to install the lifecycle hooks for Claude Code and Codex.
|
|
120
53
|
|
|
121
|
-
|
|
54
|
+
Start with `/imf-web-ui`. It routes a task to the companion skills it needs, or tells the agent to work without extra
|
|
55
|
+
guidance.
|
|
122
56
|
|
|
123
|
-
|
|
124
|
-
|
|
57
|
+
| Skill | Use it for |
|
|
58
|
+
| ------------------------- | ------------------------------------------------------------ |
|
|
59
|
+
| `/imf-web-ui` | Route UI work to the right companion. |
|
|
60
|
+
| `/imf-web-ui-setup` | Plan library wiring, project setup, or tooling changes. |
|
|
61
|
+
| `/imf-web-ui-components` | Look up component and icon APIs. |
|
|
62
|
+
| `/imf-web-ui-ux` | Choose components and shape screens and flows. |
|
|
63
|
+
| `/imf-web-ui-conventions` | Follow the frontend conventions and token seams. |
|
|
64
|
+
| `/imf-web-ui-audit` | Inspect an existing frontend without changing it. |
|
|
65
|
+
| `/imf-web-ui-update` | Update the package, skills, and hooks in a consumer project. |
|
|
125
66
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
| `/documentation-writer` | External `npx skills` workflow for Diátaxis documentation. |
|
|
129
|
-
| `/web-ui-dev-getting-started` | Interactive intro — gauges your experience, works out your goal, routes you. |
|
|
130
|
-
| `/web-ui-dev-start` | Starting ritual for any task: Jira context, `master` vs. a worktree, context summary. |
|
|
131
|
-
| `/web-ui-dev-new-component` | Scaffolds an architecture-compliant primitive (adapted or absorbed). |
|
|
132
|
-
| `/web-ui-dev-update-component` | Pointers to every file a prop, variant, or sub-component change touches. |
|
|
133
|
-
| `/web-ui-dev-design-component` | Brand design pass for a component that works but isn't styled yet. |
|
|
134
|
-
| `/web-ui-dev-story` | Author or update a Storybook story. |
|
|
135
|
-
| `/web-ui-dev-commit` | Commit workflow: changelog skill, staged docs audit, CI-parity checks, house commit format. |
|
|
136
|
-
| `/web-ui-dev-release` | Prepare release notes, commit them, and ship the approved release. |
|
|
137
|
-
| `/web-ui-dev-changelog` | Generate and validate the required one-line CHANGELOG.md entry for a web-ui change, including direct commits to master. |
|
|
138
|
-
| `/web-ui-dev-audit-docs` | Audit docs against staged or recent changes for staleness, gaps, and drift. |
|
|
139
|
-
| `/web-ui-dev-audit-pass-through-defaults` | Check `@default` annotations on pass-through props against Base UI upstream. |
|
|
140
|
-
| `/web-ui-dev-teardown-worktree` | Tear down a worktree, wherever it lives — merging its branch first or dropping it. |
|
|
141
|
-
| `/web-ui-dev-refresh-design-reference` | Refresh the committed brand snapshots in `design/` from the Figma styleguide. |
|
|
142
|
-
| `/web-ui-dev-mcp` | Set up or recover Storybook, DevTools, Atlassian, or Figma MCP access. |
|
|
67
|
+
The shipped [`agent-tooling` topic](./src/llms/skills/imf-web-ui-conventions/topics/agent-tooling.md) explains the hook
|
|
68
|
+
installation and Codex trust step.
|
|
143
69
|
|
|
144
|
-
|
|
70
|
+
### Versions
|
|
145
71
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
exceptions. Each entry ends with its author as ` — Name <email>`, taken from the committer's git config.
|
|
72
|
+
Use a release version or range for normal development. Follow `master` through the `dev` dist-tag while building against the
|
|
73
|
+
library:
|
|
149
74
|
|
|
150
|
-
|
|
75
|
+
| Dependency spec | Resolves to | Update with |
|
|
76
|
+
| --------------- | -------------------------------- | ----------------------------- |
|
|
77
|
+
| `^0.6.0` | compatible releases | `npm update @imfusion/web-ui` |
|
|
78
|
+
| `latest` | newest release | `npm update @imfusion/web-ui` |
|
|
79
|
+
| `dev` | newest build of `master` | `npm update @imfusion/web-ui` |
|
|
80
|
+
| `file:…tgz` | the packed archive you installed | pack and install again |
|
|
151
81
|
|
|
152
|
-
|
|
153
|
-
|
|
82
|
+
`latest` and `dev` are dist-tags. npm records the resolved version in `package-lock.json`; the tag stays in `package.json`
|
|
83
|
+
until you update it. A bare `latest` can cross major versions, while a range keeps the expected major. A file tarball is a
|
|
84
|
+
copy, so it never updates by itself.
|
|
154
85
|
|
|
155
|
-
|
|
86
|
+
## Read the docs
|
|
156
87
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
Given the tag `web-ui/v0.5.0`:
|
|
160
|
-
|
|
161
|
-
| Where HEAD sits | Published version | dist-tag |
|
|
162
|
-
| -------------------------- | ----------------------- | -------- |
|
|
163
|
-
| Exactly on `web-ui/v0.5.0` | `0.5.0` | `latest` |
|
|
164
|
-
| 5 commits after that tag | `0.5.1-dev.5.gb4de52d7` | `dev` |
|
|
165
|
-
|
|
166
|
-
The off-tag string breaks down as:
|
|
88
|
+
[Storybook](https://storybook.js.org/) is the project documentation. It contains the setup guide, usage patterns, token
|
|
89
|
+
reference, and component examples. It currently runs locally from this repository:
|
|
167
90
|
|
|
168
|
-
```
|
|
169
|
-
|
|
170
|
-
└─┬─┘ └┬┘ │ └───┬────┘
|
|
171
|
-
│ │ │ └── commit hash, abbreviated; the leading g means "git"
|
|
172
|
-
│ │ └──────── commits since the tag
|
|
173
|
-
│ └─────────── pre-release marker, which is what puts it on the dev tag
|
|
174
|
-
└──────────────── the tag's version, patch bumped
|
|
91
|
+
```sh
|
|
92
|
+
npm run dev
|
|
175
93
|
```
|
|
176
94
|
|
|
177
|
-
|
|
95
|
+
The source for the contributor docs is [`docs/README.md`](./docs/README.md). Start there if you are changing the library.
|
|
178
96
|
|
|
179
|
-
|
|
97
|
+
## Work on the library
|
|
180
98
|
|
|
181
|
-
```
|
|
182
|
-
|
|
99
|
+
```sh
|
|
100
|
+
npm install
|
|
101
|
+
npm run git:config
|
|
183
102
|
```
|
|
184
103
|
|
|
185
|
-
|
|
104
|
+
`git:config` sets the tracked hooks path, enables rebase pulls, and requires fast-forward merges. The
|
|
105
|
+
[`web-ui-dev-getting-started`](./.agents/skills/web-ui-dev-getting-started/SKILL.md) skill can route a first task.
|
|
186
106
|
|
|
187
|
-
The
|
|
188
|
-
approval gate. Then ship that prepared commit:
|
|
107
|
+
The main development skills are:
|
|
189
108
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
109
|
+
| Skill | Use it for |
|
|
110
|
+
| ----------------------------------------- | ------------------------------------------------ |
|
|
111
|
+
| `/web-ui-dev-getting-started` | Route a first task based on experience and goal. |
|
|
112
|
+
| `/web-ui-dev-start` | Establish task context and working location. |
|
|
113
|
+
| `/web-ui-dev-new-component` | Add a primitive. |
|
|
114
|
+
| `/web-ui-dev-update-component` | Change an existing primitive. |
|
|
115
|
+
| `/web-ui-dev-design-component` | Apply the ImFusion brand to a component. |
|
|
116
|
+
| `/web-ui-dev-story` | Author a Storybook story. |
|
|
117
|
+
| `/web-ui-dev-commit` | Verify and commit a change. |
|
|
118
|
+
| `/web-ui-dev-release` | Prepare and ship a release. |
|
|
119
|
+
| `/web-ui-dev-audit-docs` | Check docs for drift before a commit. |
|
|
120
|
+
| `/web-ui-dev-audit-pass-through-defaults` | Check adapted prop defaults against Base UI. |
|
|
121
|
+
| `/web-ui-dev-refresh-design-reference` | Refresh the committed brand snapshots. |
|
|
122
|
+
| `/web-ui-dev-teardown-worktree` | Remove a finished worktree. |
|
|
123
|
+
| `/web-ui-dev-mcp` | Recover one optional MCP capability. |
|
|
193
124
|
|
|
194
|
-
|
|
195
|
-
version (e.g. `web-ui/v0.5.1`), and pushes the tag. TeamCity builds that tag, publishes the version as `latest`, and points
|
|
196
|
-
`dev` at the same version. The release skill uses the optional `teamcity` CLI when it is installed and authenticated to check
|
|
197
|
-
the tagged build and publish log; otherwise it directs you to the same checks in TeamCity.
|
|
125
|
+
## Release it
|
|
198
126
|
|
|
199
|
-
The
|
|
200
|
-
|
|
127
|
+
The published version comes from git tags. The repository keeps `package.json` at `0.0.0`; CI writes the real version into
|
|
128
|
+
the build copy.
|
|
201
129
|
|
|
202
|
-
|
|
130
|
+
For a tag such as `web-ui/v0.6.0`:
|
|
203
131
|
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
132
|
+
| HEAD is | Published version | Tag |
|
|
133
|
+
| --------------------- | --------------------- | -------- |
|
|
134
|
+
| `web-ui/v0.6.0` | `0.6.0` | `latest` |
|
|
135
|
+
| five commits after it | `0.6.1-dev.5.g<hash>` | `dev` |
|
|
207
136
|
|
|
208
|
-
|
|
209
|
-
brew install jetbrains/utils/teamcity
|
|
210
|
-
# or: npm install -g @jetbrains/teamcity-cli
|
|
137
|
+
Check the version for the current checkout without changing files:
|
|
211
138
|
|
|
212
|
-
|
|
213
|
-
|
|
139
|
+
```sh
|
|
140
|
+
npx tsx scripts/version.ts
|
|
214
141
|
```
|
|
215
142
|
|
|
216
|
-
|
|
217
|
-
keyring. Use `teamcity auth login --no-browser` when browser login is unavailable.
|
|
143
|
+
Use `/web-ui-dev-release <version>` to prepare release notes and get the release commit approved. The final command is:
|
|
218
144
|
|
|
219
|
-
|
|
145
|
+
```sh
|
|
146
|
+
npm run release
|
|
147
|
+
```
|
|
220
148
|
|
|
221
|
-
|
|
149
|
+
It requires a clean tree, runs the full verification, creates `web-ui/v<version>`, and pushes the tag. TeamCity builds that
|
|
150
|
+
tag and publishes npm. The tag must match that shape exactly.
|
|
222
151
|
|
|
223
|
-
|
|
224
|
-
|
|
152
|
+
To build a local tarball with a real version:
|
|
153
|
+
|
|
154
|
+
```sh
|
|
155
|
+
npx tsx scripts/version.ts --write
|
|
225
156
|
npm run build
|
|
226
|
-
git checkout package.json
|
|
157
|
+
git checkout package.json
|
|
227
158
|
```
|
|
159
|
+
|
|
160
|
+
The release skill covers the optional TeamCity CLI checks and the publication verification.
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
# Third-party notices
|
|
2
|
+
|
|
3
|
+
## Mantine
|
|
4
|
+
|
|
5
|
+
- Project: [Mantine](https://github.com/mantinedev/mantine)
|
|
6
|
+
- License: [MIT](https://github.com/mantinedev/mantine/blob/master/LICENSE)
|
|
7
|
+
|
|
8
|
+
Portions of the `useMediaQuery` hook and the AppShell, Row, and Stack primitives are derived from Mantine source code.
|
|
9
|
+
|
|
10
|
+
The following license text applies only to those Mantine-derived portions and is reproduced verbatim:
|
|
11
|
+
|
|
12
|
+
```text
|
|
13
|
+
MIT License
|
|
14
|
+
|
|
15
|
+
Copyright (c) 2021 Vitaly Rtishchev
|
|
16
|
+
|
|
17
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
18
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
19
|
+
in the Software without restriction, including without limitation the rights
|
|
20
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
21
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
22
|
+
furnished to do so, subject to the following conditions:
|
|
23
|
+
|
|
24
|
+
The above copyright notice and this permission notice shall be included in all
|
|
25
|
+
copies or substantial portions of the Software.
|
|
26
|
+
|
|
27
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
28
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
29
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
30
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
31
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
32
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
33
|
+
SOFTWARE.
|
|
34
|
+
```
|
package/bin/install.js
CHANGED
|
@@ -13,10 +13,9 @@
|
|
|
13
13
|
// .claude/skills/ symlinks it (this repo's own convention) so the two
|
|
14
14
|
// can't drift apart.
|
|
15
15
|
//
|
|
16
|
-
// Flags: bare =
|
|
17
|
-
//
|
|
18
|
-
// --target claude|agents
|
|
19
|
-
// (repeatable) selects scripted install targets,
|
|
16
|
+
// Flags: bare = help; --hooks adds the agent lifecycle hooks after the consumer
|
|
17
|
+
// checks the repo's existing hooks and still installs the skills.
|
|
18
|
+
// --target claude|agents|all (repeatable) selects scripted install targets,
|
|
20
19
|
// --reconfigure to re-open the target prompt on an existing install.
|
|
21
20
|
|
|
22
21
|
import {
|
|
@@ -285,26 +284,45 @@ function upsertAgentsBlock() {
|
|
|
285
284
|
return existing ? "updated" : "added";
|
|
286
285
|
}
|
|
287
286
|
|
|
288
|
-
// --target claude|agents (repeatable) selects targets without the
|
|
287
|
+
// --target claude|agents|all (repeatable) selects targets without the
|
|
289
288
|
// interactive prompt — for CI and scripted installs.
|
|
290
289
|
function parseTargetFlags(argv) {
|
|
291
290
|
const targets = [];
|
|
292
291
|
for (let i = 0; i < argv.length; i++) {
|
|
293
292
|
if (argv[i] !== "--target") continue;
|
|
294
293
|
const value = argv[i + 1];
|
|
295
|
-
if (!value || !(value in TARGETS)) {
|
|
296
|
-
console.error(`--target expects one of: ${Object.keys(TARGETS).join(", ")}`);
|
|
294
|
+
if (!value || (value !== "all" && !(value in TARGETS))) {
|
|
295
|
+
console.error(`--target expects one of: ${Object.keys(TARGETS).join(", ")}, all`);
|
|
297
296
|
process.exit(1);
|
|
298
297
|
}
|
|
299
|
-
targets.push(value);
|
|
298
|
+
targets.push(...(value === "all" ? ["agents", "claude"] : [value]));
|
|
300
299
|
i++;
|
|
301
300
|
}
|
|
302
|
-
return targets;
|
|
301
|
+
return [...new Set(targets)];
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
function printHelp() {
|
|
305
|
+
console.log(`Usage: web-ui-install [options]
|
|
306
|
+
|
|
307
|
+
Install @imfusion/web-ui agent skills into a consumer project.
|
|
308
|
+
|
|
309
|
+
Options:
|
|
310
|
+
--target agents|claude|all Install into selected skill target(s).
|
|
311
|
+
Repeat --target to select multiple targets.
|
|
312
|
+
--hooks Install agent lifecycle hooks.
|
|
313
|
+
--reconfigure Re-open target selection prompt.
|
|
314
|
+
-h, --help Show this help.
|
|
315
|
+
`);
|
|
303
316
|
}
|
|
304
317
|
|
|
305
318
|
async function main() {
|
|
306
|
-
const skills = discoverSkills();
|
|
307
319
|
const argv = process.argv.slice(2);
|
|
320
|
+
if (argv.length === 0 || argv.includes("-h") || argv.includes("--help")) {
|
|
321
|
+
printHelp();
|
|
322
|
+
return;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
const skills = discoverSkills();
|
|
308
326
|
const flagTargets = parseTargetFlags(argv);
|
|
309
327
|
const reconfigure = argv.includes("--reconfigure");
|
|
310
328
|
// Every install includes the skill bundle. Hooks are opt-in via --hooks —
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import { t as e } from "./chunk-DmhlhrBa.js";
|
|
2
|
+
import { t } from "./meta-CySnRuVp.js";
|
|
3
|
+
import { Ma as n, Qt as r, Xo as i, hn as a, r as o } from "./icons-Cy1HAosO.js";
|
|
4
|
+
import { cx as s } from "class-variance-authority";
|
|
5
|
+
import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
|
|
6
|
+
import { useCallback as d, useEffect as f, useRef as p, useState as m } from "react";
|
|
7
|
+
import { mergeProps as h } from "@base-ui/react/merge-props";
|
|
8
|
+
import { useRender as g } from "@base-ui/react/use-render";
|
|
9
|
+
//#region src/hooks/use-clipboard.ts
|
|
10
|
+
function _({ timeout: e = 1500 } = {}) {
|
|
11
|
+
let [t, n] = m(!1), r = p(void 0);
|
|
12
|
+
return f(() => () => clearTimeout(r.current), []), {
|
|
13
|
+
copied: t,
|
|
14
|
+
copy: d((t) => {
|
|
15
|
+
navigator.clipboard.writeText(t).then(() => {
|
|
16
|
+
n(!0), clearTimeout(r.current), r.current = setTimeout(() => n(!1), e);
|
|
17
|
+
});
|
|
18
|
+
}, [e])
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
var v = {
|
|
22
|
+
block: "imf-ui-code-module-block",
|
|
23
|
+
copy: "imf-ui-code-module-copy",
|
|
24
|
+
icon: "imf-ui-code-module-icon",
|
|
25
|
+
inline: "imf-ui-code-module-inline",
|
|
26
|
+
inlineCopy: "imf-ui-code-module-inlineCopy",
|
|
27
|
+
inlineLink: "imf-ui-code-module-inlineLink",
|
|
28
|
+
language: "imf-ui-code-module-language",
|
|
29
|
+
pre: "imf-ui-code-module-pre",
|
|
30
|
+
separator: "imf-ui-code-module-separator"
|
|
31
|
+
}, y = /* @__PURE__ */ e({
|
|
32
|
+
Block: () => S,
|
|
33
|
+
Inline: () => b,
|
|
34
|
+
InlineLink: () => x
|
|
35
|
+
});
|
|
36
|
+
function b({ className: e, copyable: t = !1, children: r, render: a, ...d }) {
|
|
37
|
+
let { copied: f, copy: m } = _(), y = p(null), b = f ? n : i;
|
|
38
|
+
return g({
|
|
39
|
+
defaultTagName: "code",
|
|
40
|
+
render: a,
|
|
41
|
+
props: {
|
|
42
|
+
...h(d, {
|
|
43
|
+
className: s(v.inline, e),
|
|
44
|
+
children: /* @__PURE__ */ u(c, { children: [
|
|
45
|
+
/* @__PURE__ */ l("span", {
|
|
46
|
+
ref: y,
|
|
47
|
+
children: r
|
|
48
|
+
}),
|
|
49
|
+
t && /* @__PURE__ */ l("span", { className: v.separator }),
|
|
50
|
+
t && /* @__PURE__ */ l("button", {
|
|
51
|
+
type: "button",
|
|
52
|
+
className: v.inlineCopy,
|
|
53
|
+
"data-copied": f || void 0,
|
|
54
|
+
"aria-label": f ? "Copied" : "Copy",
|
|
55
|
+
onClick: () => m(y.current?.textContent ?? ""),
|
|
56
|
+
children: /* @__PURE__ */ l(o, {
|
|
57
|
+
glyph: b,
|
|
58
|
+
size: 12,
|
|
59
|
+
strokeWidth: 2,
|
|
60
|
+
"aria-hidden": !0
|
|
61
|
+
})
|
|
62
|
+
})
|
|
63
|
+
] })
|
|
64
|
+
}),
|
|
65
|
+
"data-imf-ui-component": "Code.Inline"
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
b.displayName = "Code.Inline";
|
|
70
|
+
function x({ className: e, kind: t = "external", children: n, render: i, ...d }) {
|
|
71
|
+
let f = t === "external" ? a : r;
|
|
72
|
+
return g({
|
|
73
|
+
defaultTagName: "a",
|
|
74
|
+
render: i,
|
|
75
|
+
props: {
|
|
76
|
+
...h(t === "external" ? {
|
|
77
|
+
target: "_blank",
|
|
78
|
+
rel: "noreferrer"
|
|
79
|
+
} : {}, d, {
|
|
80
|
+
className: s(v.inline, v.inlineLink, e),
|
|
81
|
+
children: /* @__PURE__ */ u(c, { children: [
|
|
82
|
+
n,
|
|
83
|
+
/* @__PURE__ */ l("span", { className: v.separator }),
|
|
84
|
+
/* @__PURE__ */ l("span", {
|
|
85
|
+
className: v.icon,
|
|
86
|
+
"aria-hidden": !0,
|
|
87
|
+
children: /* @__PURE__ */ l(o, {
|
|
88
|
+
glyph: f,
|
|
89
|
+
size: 12,
|
|
90
|
+
strokeWidth: 2
|
|
91
|
+
})
|
|
92
|
+
})
|
|
93
|
+
] })
|
|
94
|
+
}),
|
|
95
|
+
"data-imf-ui-component": "Code.InlineLink",
|
|
96
|
+
"data-kind": t
|
|
97
|
+
}
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
x.displayName = "Code.InlineLink";
|
|
101
|
+
function S({ className: e, language: t, hideCopy: r = !1, children: a, ...c }) {
|
|
102
|
+
let { copied: d, copy: f } = _(), m = p(null), h = d ? n : i;
|
|
103
|
+
return /* @__PURE__ */ u("div", {
|
|
104
|
+
"data-imf-ui-component": "Code.Block",
|
|
105
|
+
className: s(v.block, e),
|
|
106
|
+
children: [
|
|
107
|
+
t != null && /* @__PURE__ */ l("span", {
|
|
108
|
+
className: v.language,
|
|
109
|
+
children: t
|
|
110
|
+
}),
|
|
111
|
+
!r && /* @__PURE__ */ l("button", {
|
|
112
|
+
type: "button",
|
|
113
|
+
className: v.copy,
|
|
114
|
+
"data-copied": d || void 0,
|
|
115
|
+
"aria-label": d ? "Copied" : "Copy",
|
|
116
|
+
onClick: () => f(m.current?.textContent ?? ""),
|
|
117
|
+
children: /* @__PURE__ */ l(o, {
|
|
118
|
+
glyph: h,
|
|
119
|
+
size: 12,
|
|
120
|
+
strokeWidth: 2,
|
|
121
|
+
"aria-hidden": !0
|
|
122
|
+
})
|
|
123
|
+
}),
|
|
124
|
+
/* @__PURE__ */ l("pre", {
|
|
125
|
+
...c,
|
|
126
|
+
className: v.pre,
|
|
127
|
+
children: /* @__PURE__ */ l("code", {
|
|
128
|
+
ref: m,
|
|
129
|
+
children: a
|
|
130
|
+
})
|
|
131
|
+
})
|
|
132
|
+
]
|
|
133
|
+
});
|
|
134
|
+
}
|
|
135
|
+
S.displayName = "Code.Block";
|
|
136
|
+
//#endregion
|
|
137
|
+
//#region src/components/code/code.meta.ts
|
|
138
|
+
var C = {
|
|
139
|
+
name: "Code",
|
|
140
|
+
category: t.display,
|
|
141
|
+
status: "stable",
|
|
142
|
+
namespace: !0,
|
|
143
|
+
description: "Displays source code inline or in a block, with optional language labels and copying. Also called a code snippet or code block.",
|
|
144
|
+
origin: "native"
|
|
145
|
+
};
|
|
146
|
+
//#endregion
|
|
147
|
+
export { y as a, x as i, S as n, _ as o, b as r, C as t };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function writeCodeHighlightTheme(): void;
|