@imfusion/web-ui 0.9.1-dev.9.gdfff1530 → 0.10.1-dev.2.gb6347f49

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.
Files changed (3) hide show
  1. package/CHANGELOG.md +41 -22
  2. package/package.json +1 -1
  3. package/src/llms/skills/imf-web-ui-update/SKILL.md +20 -10
package/CHANGELOG.md CHANGED
@@ -1,40 +1,59 @@
1
1
  # Changelog
2
2
 
3
- ## [Unreleased]
3
+ ## `0.10.0`          2026.10.15
4
+
5
+ ### Highlights
6
+
7
+ #### New and updated components
8
+
9
+ - `RichLink` is new. It is a link that fills a row: an optional icon on a tile tinted in the primary color, a label, an
10
+ optional description, and a trailing arrow that `endGlyph` replaces. It renders a plain anchor, so TanStack Router's
11
+ `createLink` can wrap it. `imf-web-ui-ux` picks it for a link that fills its own row, and `ChipLink` for one inside text
12
+ ([WEBSDK-272](https://imfusion.atlassian.net/browse/WEBSDK-272)).
13
+
14
+ ![RichLink in a stack, light](docs/assets/changelog/0.10.0-rich-link-light.webp)
15
+ ![RichLink in a stack, dark](docs/assets/changelog/0.10.0-rich-link-dark.webp)
16
+
17
+ - `Skeleton.Root` takes `loading` and fades the data in over the bones when it turns false.
18
+
19
+ - The `variant="position"` `Slider` thumb is primary at rest and gray on hover. It is opaque, so a `Slider.Indicator` under
20
+ it stays hidden. Every Slider thumb now draws its focus ring on keyboard focus.
21
+
22
+ ![Slider position variant, light](docs/assets/changelog/0.10.0-slider-position-light.webp)
23
+ ![Slider position variant, dark](docs/assets/changelog/0.10.0-slider-position-dark.webp)
24
+
25
+ #### A type hierarchy that holds at every width
26
+
27
+ Every fluid font size grows across the same viewport range, 360px to 1920px, so a heading never ends up smaller than the one
28
+ below it. `--imf-ui-font-size-fluid-0` to `fluid-2` follow one ratio scale above `--imf-ui-font-size-body`: `fluid-0` runs
29
+ from 19.2px to 25px, `fluid-1` from 23px to 31.25px, and `fluid-2` from 27.6px to 39px.
30
+
31
+ Headings change with it, so check your pages. `Typo.H3` uses `fluid-1` and `Typo.H4` uses `fluid-0`, both at the regular
32
+ weight. `Typo.H2` is medium weight, `Typo.Blockquote` uses `fluid-0`, and `--imf-ui-font-lineheight-title` follows the larger
33
+ H2 range. The Typo page has a Hierarchy story that shows every member at 360px, 768px, 1440px, and 1920px side by side.
4
34
 
5
35
  ### Added
6
36
 
7
- - `RichLink` is a link that fills a row: an optional icon on a tile tinted in the primary color, a label, an optional
8
- description line, and a trailing arrow for where it leads, which `endGlyph` replaces. It renders a plain anchor, so
9
- TanStack Router's `createLink` can wrap it
10
- ([WEBSDK-272](https://imfusion.atlassian.net/browse/WEBSDK-272)) — Nikolaus Brunner <brunner@imfusion.com>
11
37
  - Agent skills — Nikolaus Brunner <brunner@imfusion.com>
12
38
  - `imf-web-ui-conventions` puts a stand-in for a missing Web UI component in `components/web-ui-pending/`, built as
13
39
  the library would ship it and deleted once it does.
14
- - Components — Nikolaus Brunner <brunner@imfusion.com>
15
- - `Skeleton.Root` takes `loading` and fades the data in over the bones when it turns false.
40
+ - Storybook — Nikolaus Brunner <brunner@imfusion.com>
41
+ - A click on a screenshot in a docs carousel opens it full width in a dialog.
16
42
 
17
43
  ### Changed
18
44
 
19
45
  - Agent skills — Nikolaus Brunner <brunner@imfusion.com>
20
- - `imf-web-ui-ux` picks `ChipLink` for a link inside text or a row of chips and `RichLink` for a link that fills its own
21
- row ([WEBSDK-272](https://imfusion.atlassian.net/browse/WEBSDK-272)).
22
- - Components — Nikolaus Brunner <brunner@imfusion.com>
23
- - The `variant="position"` Slider thumb is primary at rest and gray on hover, with an outline ring on keyboard focus. It is
24
- opaque, so a `Slider.Indicator` under it stays hidden.
25
- - Typography — Nikolaus Brunner <brunner@imfusion.com>
26
- - Every fluid font size grows across the same viewport range, 360px to 1920px, so the type hierarchy keeps its order at
27
- every width. `--imf-ui-font-size-fluid-0` to `fluid-2` follow one ratio scale above `--imf-ui-font-size-body`:
28
- `fluid-0` runs from 19.2px to 25px, `fluid-1` from 23px to 31.25px, and `fluid-2` from 27.6px to 39px.
29
- - `Typo.H3` uses `--imf-ui-font-size-fluid-1` and `Typo.H4` uses `--imf-ui-font-size-fluid-0`, both at the regular
30
- weight. `Typo.H2` uses the medium weight, and `Typo.Blockquote` uses `--imf-ui-font-size-fluid-0`.
31
- - `--imf-ui-font-lineheight-title` follows the larger H2 range.
32
- - The Typo page has a Hierarchy story that renders every member at 360px, 768px, 1440px, and 1920px side by side.
46
+ - The `web-ui-dev-new-component` interview asks where the design comes from: a new Claude Design canvas, a local HTML
47
+ sketch when the session has no Claude Design, an existing design or placeholder, or a sibling to copy. The plan links
48
+ the design source, and verification checks the built stories against it.
49
+ - `web-ui-dev-update-component` and `web-ui-dev-design-component` ask how to preview a visual change when the session has
50
+ Claude Design, and recommend a canvas for a bigger change. A canvas is made in the Claude app before plan mode.
51
+ - Documentation — Nikolaus Brunner <brunner@imfusion.com>
52
+ - `docs/design-system.md` says to start new designs in the Claude app and when an agent session has Claude Design. The
53
+ standalone project's README marks it as legacy.
33
54
 
34
55
  ### Fixed
35
56
 
36
- - Components — Nikolaus Brunner <brunner@imfusion.com>
37
- - Slider thumbs draw their focus ring on keyboard focus.
38
57
  - Storybook — Nikolaus Brunner <brunner@imfusion.com>
39
58
  - The Slider `All` story renders the position variant without an indicator, as the `Position` story does.
40
59
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@imfusion/web-ui",
3
- "version": "0.9.1-dev.9.gdfff1530",
3
+ "version": "0.10.1-dev.2.gb6347f49",
4
4
  "description": "The official Web UI component library for ImFusion web apps",
5
5
  "author": "ImFusion GmbH",
6
6
  "homepage": "https://imfusion.com",
package/src/llms/skills/imf-web-ui-update/SKILL.md CHANGED
@@ -10,8 +10,8 @@ allowed-tools: Bash Read Grep Skill
10
10
 
11
11
  # Update Web UI
12
12
 
13
- This workflow has two possible commits: the package/tooling update, then an optional consumer migration. Keep them separate.
14
- Never overwrite user changes or commit without fresh approval.
13
+ This workflow has two possible commits: the package/tooling update with the fixes its `Breaking` entries require, then an
14
+ optional consumer migration. Keep them separate. Never overwrite user changes or commit without fresh approval.
15
15
 
16
16
  ## Before you start
17
17
 
@@ -20,7 +20,8 @@ Invoke `imf-web-ui-user-profile` first and explain at its levels throughout.
20
20
  Open with a short orientation, before any command runs, so the person knows the route and when they will be asked:
21
21
 
22
22
  1. **Preflight**: check the project and stop on uncommitted work.
23
- 2. **Base update**: install the new package, refresh the skills and hooks, verify, then ask to commit.
23
+ 2. **Base update**: install the new package, refresh the skills and hooks, fix what the `Breaking` entries require, verify,
24
+ then ask to commit.
24
25
  3. **Migration check**: read what the new releases changed and report what this project needs; changes and their separate
25
26
  commit wait for approval.
26
27
  4. **Full audit**: offer `imf-web-ui-audit full`, a read-only check of the whole project against the conventions, wider than
@@ -88,16 +89,23 @@ installer-owned entries idempotently into the registration file for the chosen h
88
89
  do not stack an event the project already covers.
89
90
 
90
91
  After the installer command, inspect the installed skill diffs and briefly report any guidance changes; version-marker
91
- changes alone do not count. Re-read changed skills and references relevant to the remaining work, including this update skill
92
- if it changed. Continue from the current step using the updated guidance, keeping the original baseline, user choices, and
93
- completed changes in mind. Check for newly required steps without repeating completed mutations or expanding the approved
94
- scope.
92
+ changes alone do not count.
93
+
94
+ Then re-read, in full, every changed skill and reference the remaining work uses, starting with this update skill when it
95
+ changed. A diff shows what moved, not the step order you continue under, so it does not replace the re-read. Continue from
96
+ the current step using the updated guidance, keeping the original baseline, user choices, and completed changes in mind.
97
+ Check for newly required steps without repeating completed mutations or expanding the approved scope.
95
98
 
96
99
  ## Verify the base update
97
100
 
98
101
  After every mutating command, compare the status with the preflight snapshot. Stop on an unexpected path or overlapping
99
102
  change.
100
103
 
104
+ Read every `Breaking` entry and migration step in `node_modules/@imfusion/web-ui/CHANGELOG.md` between the pre-update and the
105
+ new version, keeping for a prerelease baseline only the ones the dist diff in the migration check confirms, and map each to
106
+ its call sites here. Fix the ones with matching code in the base update, so the update commit leaves the app consistent;
107
+ tests do not catch a removed custom property or a moved scroll container.
108
+
101
109
  Run the consumer's documented full verification. Read its scripts first; prefer an aggregate check, otherwise run the
102
110
  non-watch format, lint, typecheck, test, and build commands that exist.
103
111
 
@@ -110,8 +118,10 @@ Report before the first commit:
110
118
  @imfusion/web-ui update report
111
119
  Package : <old> -> <new>
112
120
  Skills : <status>
121
+ Re-read : <changed skills read in full, or none changed>
113
122
  Hooks : <status>
114
123
  Verification : <status>
124
+ Breaking : <entries fixed here, not applicable, or none>
115
125
  Update files : <paths>
116
126
  Held back : <paths or none>
117
127
  Conflicts : <paths or none>
@@ -137,9 +147,9 @@ diff was already in the baseline; report it as present.
137
147
  This phase reads and reports: every file stays as it is until the person approves the migration. Open the report with the
138
148
  releases read, then report separately:
139
149
 
140
- - migrations: every `Breaking` entry and migration step, mapped to the call sites it affects here and the fix the changelog
141
- shows; a step with no matching code is reported as not applicable. A style-only change, such as a removed margin, raises no
142
- type error: find its call sites by component usage;
150
+ - migrations: every `Breaking` entry and migration step the base update left open, mapped to the call sites it affects here
151
+ and the fix the changelog shows; a step with no matching code is reported as not applicable. A style-only change, such as a
152
+ removed margin, raises no type error: find its call sites by component usage;
143
153
  - compatibility fixes required by changed imports or types that the changelog does not cover;
144
154
  - existing uses affected by a changed API or documented behavior;
145
155
  - suggestions: new features from the highlights and `Added` entries that fit what the project already builds, each with the