@imfusion/web-ui 0.10.1-dev.61.g9d1000b8 → 0.11.0
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/CHANGELOG.md +215 -49
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,32 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## `0.11.0` 2026.10.20
|
|
4
4
|
|
|
5
5
|
### Highlights
|
|
6
6
|
|
|
7
|
+
#### A navbar that carries the brand and the account
|
|
8
|
+
|
|
9
|
+
`AppShell.Navbar` lays out its rail itself. It takes `logo` and `account`: the logo row sits on top, on the baseline of
|
|
10
|
+
Main's first heading, the nav items stack below it, and the account card fills the foot in line with the items. Leave out
|
|
11
|
+
`logo` for the ImFusion logo in the variant that fits the rail. The current `NavItem` is underlined while the others dim.
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
<AppShell.Navbar account={<AccountCard.Root>…</AccountCard.Root>}>
|
|
15
|
+
<AppShell.NavItem href="/projects" aria-current="page">
|
|
16
|
+
Projects
|
|
17
|
+
</AppShell.NavItem>
|
|
18
|
+
</AppShell.Navbar>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Below `md` the shell draws its own bar with the navbar's logo and the drawer toggle, so apps render no burger. The header
|
|
22
|
+
shows at every width and follows the navbar's `variant`. The aside has a close button in its drawer, both drawers keep
|
|
23
|
+
their own state through `defaultOpen`, and Main and both drawers scroll in the new `ScrollArea`. One gutter,
|
|
24
|
+
`--imf-ui-appshell-padding`, lines up the rail, the header, Main, and the aside.
|
|
25
|
+
[AppShell](src/components/app-shell/app-shell.mdx) ([WEBSDK-247](https://imfusion.atlassian.net/browse/WEBSDK-247))
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
7
30
|
#### Paper Mono is the mono font
|
|
8
31
|
|
|
9
32
|
[Paper Mono](https://paper.design/mono) replaces CoFo Sans Mono as the default `--imf-ui-font-family-mono`. It is licensed
|
|
@@ -25,6 +48,188 @@ never changes the character width, so columns stay aligned. CoFo Sans Mono still
|
|
|
25
48
|
|
|
26
49
|
|
|
27
50
|
|
|
51
|
+
#### Skills that notice when they fall behind
|
|
52
|
+
|
|
53
|
+
The `SessionStart` hook compares the installed `imf-web-ui` skills with the copy in `node_modules/@imfusion/web-ui`. When
|
|
54
|
+
they differ, the agent hears about it and offers `/imf-web-ui-update`. The installed skills carry no version marker, so a
|
|
55
|
+
package update that leaves the skills alone touches only `package.json` and the lockfile.
|
|
56
|
+
|
|
57
|
+
#### New and updated components
|
|
58
|
+
|
|
59
|
+
- [`Dialog`](src/components/dialog/dialog.mdx) is new: a modal window over a dimmed page, with every Base UI part.
|
|
60
|
+
`Dialog.Simple` builds one from props, `Dialog.Inline` opens one from a term in running text, and `Dialog.Status` adds a
|
|
61
|
+
tinted status column. The body scrolls while the header and footer stay in view
|
|
62
|
+
([WEBSDK-247](https://imfusion.atlassian.net/browse/WEBSDK-247)).
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
- [`ScrollArea`](src/components/scroll-area/scroll-area.mdx) is new. Its slim primary thumb floats over the content, and an
|
|
68
|
+
edge fades where more content waits behind it. `ScrollArea.Auto` covers the usual case.
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
- [`ColorSchemeToggle`](src/components/color-scheme-toggle/color-scheme-toggle.mdx) is new. It lets the user pick Light,
|
|
74
|
+
System, or Dark, stores the choice through `useColorScheme`, and needs no props.
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
- [`ProductLogo`](src/components/logo/product/product.stories.tsx#Products) is new. It renders the ImFusion Labels, Suite,
|
|
80
|
+
and SDK logos on the `Logo` sizes and colors; `cutout` cuts the name out of the plate.
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
- [`AccountCard`](src/components/account-card/account-card.mdx) is a compact row: the avatar in a lead column, the text
|
|
86
|
+
beside it, organization and role under the subtitle. `withBreakHints` breaks a long email at its `@` and dots.
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
- [`Select`](src/components/select/select.mdx) items take a muted second line through `Select.ItemDescription`, such as
|
|
92
|
+
what a role allows. `Select.Root` takes a `width` of `auto`, `wide`, or `full`, and the popup sits 4px off its trigger.
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
- [`Table`](src/components/table/table.stories.tsx#Density) reads lighter: muted mono labels over a 1px rule, no row
|
|
98
|
+
rules, and a neutral selected row. `Table.Root` takes a `density`, and `action` shrinks a column of buttons to its
|
|
99
|
+
content.
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
- [`ToggleGroup`](src/components/toggle-group/toggle-group.mdx) and `Toggle` take a `size` of `sm` or `md`. A small group
|
|
105
|
+
is a tight row of 1.5rem toggles with a 1px border.
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
- [`Separator`](src/components/separator/separator.stories.tsx#All) takes `tone="minor"` for a neutral line, a quiet
|
|
111
|
+
break inside a page.
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
- [`Typo.UnorderedList`](src/components/typo/typo.mdx) marks its items with a short dash, primary on the main, support,
|
|
117
|
+
and minor variants ([WEBSDK-270](https://imfusion.atlassian.net/browse/WEBSDK-270)).
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
#### Important fixes
|
|
123
|
+
|
|
124
|
+
- `Typo.Hero`, `Typo.H3`, `Typo.H4`, `Typo.Lead`, and `Typo.Blockquote` keep letter pairs such as "rt" and "ty" apart:
|
|
125
|
+
their tracking scales with the viewport.
|
|
126
|
+
- An empty `Select.ItemIndicator` draws the `Check` icon in the item's text color. Base UI fell back to a ✔️ emoji.
|
|
127
|
+
- The docked aside ends where `AppShell.Main` begins at every width; at 1024px it covered up to 13px of Main.
|
|
128
|
+
- `Chip` stays on one line and ends in an ellipsis when its label doesn't fit.
|
|
129
|
+
- `imf-web-ui-setup` and `imf-web-ui-audit` keep tsconfig `paths` away from Vite. `vite-tsconfig-paths` loaded the React
|
|
130
|
+
types package as React and broke builds that install Web UI from the registry.
|
|
131
|
+
|
|
132
|
+
#### Migrating from 0.10
|
|
133
|
+
|
|
134
|
+
Pass the brand and the account card to `AppShell.Navbar` and drop the Sections that held them. A card passed as `account`
|
|
135
|
+
lines up with the nav items without the 8px inset:
|
|
136
|
+
|
|
137
|
+
```diff
|
|
138
|
+
- <AppShell.Navbar>
|
|
139
|
+
- <AppShell.Section><MyLogo /></AppShell.Section>
|
|
140
|
+
+ <AppShell.Navbar logo={<MyLogo />} account={<AccountCard.Root>…</AccountCard.Root>}>
|
|
141
|
+
<AppShell.NavItem href="/projects">Projects</AppShell.NavItem>
|
|
142
|
+
- <AppShell.Section><AccountCard.Root>…</AccountCard.Root></AppShell.Section>
|
|
143
|
+
</AppShell.Navbar>
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
Remove the burger and your own logo from `AppShell.Header`; `AppShell.Burger` is no longer exported, and phones would
|
|
147
|
+
show two logos:
|
|
148
|
+
|
|
149
|
+
```diff
|
|
150
|
+
<AppShell.Header>
|
|
151
|
+
- <AppShell.Burger />
|
|
152
|
+
- <MyLogo />
|
|
153
|
+
<UserMenu />
|
|
154
|
+
</AppShell.Header>
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
Remove a header color that matched a branded navbar; the header takes the navbar's `variant`. A custom surface goes in
|
|
158
|
+
`--imf-ui-appshell-header-bg`:
|
|
159
|
+
|
|
160
|
+
```diff
|
|
161
|
+
- .header { background: var(--imf-ui-color-bg-primary); }
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
The header wraps its children in a row aligned to the inline end. Give your own row full width to span it:
|
|
165
|
+
|
|
166
|
+
```diff
|
|
167
|
+
.headerRow {
|
|
168
|
+
+ width: 100%;
|
|
169
|
+
}
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
Restyle the current nav item through the dim and underline properties; it has no background surface:
|
|
173
|
+
|
|
174
|
+
```diff
|
|
175
|
+
- .nav { --navitem-current: var(--imf-ui-color-bg-support); }
|
|
176
|
+
+ .nav { --imf-ui-appshell-navitem-dim: 60%; }
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
`--imf-ui-appshell-padding` now runs from 1.25rem to 3rem, the navbar is one gutter wider, and the aside pads on every
|
|
180
|
+
side. Set the properties on `AppShell.Root` to keep the old aside padding, and re-check pages tuned to the old values:
|
|
181
|
+
|
|
182
|
+
```diff
|
|
183
|
+
+ --imf-ui-appshell-aside-padding: var(--imf-ui-size-6) var(--imf-ui-appshell-padding);
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
`AppShell.Main`, the aside drawer, and `Drawer.Content` pad their content inside a `ScrollArea`. A `padding` on Main or
|
|
187
|
+
the aside adds to the gutter, so remove it. On `Drawer.Content`, set the padding through its property; a `padding`,
|
|
188
|
+
`gap`, or grid set on the part does not reach the children:
|
|
189
|
+
|
|
190
|
+
```diff
|
|
191
|
+
- .main { padding: var(--imf-ui-size-6); }
|
|
192
|
+
- .drawerContent { padding: 1rem; }
|
|
193
|
+
+ .drawerContent { --imf-ui-drawer-content-padding: 1rem; }
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
The navbar drawer opens from the inline start. Move CSS placed against its right edge to the left edge:
|
|
197
|
+
|
|
198
|
+
```diff
|
|
199
|
+
- inset-inline-end: 0;
|
|
200
|
+
+ inset-inline-start: 0;
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
`AccountCard` is a row, not a link. Move the Link's children into `AccountCard.Root` and put navigation on a button in
|
|
204
|
+
`AccountCard.Action`. Pass `size="md"` to keep the larger avatar. An account switcher on `AccountCard.Group` has no
|
|
205
|
+
replacement yet, so stay on 0.10 for it:
|
|
206
|
+
|
|
207
|
+
```diff
|
|
208
|
+
<AccountCard.Root>
|
|
209
|
+
- <AccountCard.Link href="/account">
|
|
210
|
+
- <AccountCard.Avatar>NB</AccountCard.Avatar>
|
|
211
|
+
+ <AccountCard.Avatar size="md">NB</AccountCard.Avatar>
|
|
212
|
+
<AccountCard.Title>Nik</AccountCard.Title>
|
|
213
|
+
- </AccountCard.Link>
|
|
214
|
+
+ <AccountCard.Action>
|
|
215
|
+
+ <IconButton variant="ghost" size="sm" aria-label="Account settings">…</IconButton>
|
|
216
|
+
+ </AccountCard.Action>
|
|
217
|
+
</AccountCard.Root>
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
Remove the staleness script from your pre-commit hook, then refresh the agent tooling. Keep `.agents/skills/imf-web-ui*`
|
|
221
|
+
out of your formatter, or the reformatted skills read as stale:
|
|
222
|
+
|
|
223
|
+
```diff
|
|
224
|
+
node_modules/.bin/vp staged
|
|
225
|
+
- .agents/hooks/imf-web-ui/baseline-staleness.sh
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
```sh
|
|
229
|
+
npx web-ui install skills
|
|
230
|
+
npx web-ui install hooks
|
|
231
|
+
```
|
|
232
|
+
|
|
28
233
|
### Breaking
|
|
29
234
|
|
|
30
235
|
- **Breaking:** `AppShell.Main`, the AppShell aside drawer, and `Drawer.Content` scroll in a `ScrollArea` and pad their
|
|
@@ -65,70 +270,39 @@ never changes the character width, so columns stay aligned. CoFo Sans Mono still
|
|
|
65
270
|
|
|
66
271
|
### Added
|
|
67
272
|
|
|
273
|
+
- [AppShell](src/components/app-shell/app-shell.mdx) — Nikolaus Brunner <brunner@imfusion.com>
|
|
274
|
+
- The shell's navigation toggle sets `aria-controls` from the navbar, and reads the `id` the navbar generates. A consumer `id` on the Navbar is what it points at.
|
|
275
|
+
- `AppShell.Navbar` and `AppShell.Aside` take `defaultOpen` and keep their own open state when `open` is omitted, and close an uncontrolled drawer when they dock. A controlled `open` is never changed by docking.
|
|
276
|
+
- An `AppShell.Aside` opens from the consumer's state, such as a row selection, through `open` and `onOpenChange`.
|
|
277
|
+
- `AppShell.Main` content is a flex column at least as tall as Main, so a child with `flex: 1` fills the rest.
|
|
278
|
+
- `AppShell.Aside` content wraps long words such as emails and IDs inside a narrow panel, in the docked aside and the drawer.
|
|
279
|
+
- An `AppShell.NavItem` followed inside the navbar drawer closes it, unless its `onClick` calls `event.preventDefault()`.
|
|
280
|
+
- `--imf-ui-appshell-heading-*`, `--imf-ui-appshell-navitem-dim`, `--imf-ui-appshell-navitem-underline-thickness`, and `--imf-ui-appshell-navitem-underline-offset` tune the logo row's strut and the NavItem underline.
|
|
281
|
+
- `AppShell.Aside` shows a close button in its drawer below `lg`, labelled by `closeLabel` (`Close panel` by default).
|
|
68
282
|
- `--imf-ui-size-backdrop-edge` (`38%`) and `--imf-ui-size-backdrop-band-height` (`30dvh`) are the public backdrop's geometry tokens. The `imf-web-ui-ux` skill describes the handover. — Nikolaus Brunner <brunner@imfusion.com>
|
|
69
|
-
- `ProductLogo` renders the ImFusion Labels, Suite, and SDK product logos on the `Logo` sizes and color variants. The name is solid by default and cut out of the plate with `cutout`. [Product](src/components/logo/product/product.stories.tsx#Default) — Nikolaus Brunner <brunner@imfusion.com>
|
|
70
283
|
- `imf-web-ui-update` proposes and `imf-web-ui-audit` reports aligning the core runtime packages (React, Base UI, Vite+) with the versions Web UI builds with. — Nikolaus Brunner <brunner@imfusion.com>
|
|
71
284
|
- `localWebUILink()` and a `paths` block in `tsconfig.json` let an app run against a symlinked web-ui checkout with one React and one set of types. `imf-web-ui-setup` proposes both and `imf-web-ui-audit` reports a missing one. — Nikolaus Brunner <brunner@imfusion.com>
|
|
72
|
-
- The shell's navigation toggle sets `aria-controls` from the navbar, and reads the `id` the navbar generates. A consumer `id` on the Navbar is what it points at. — Nikolaus Brunner <brunner@imfusion.com>
|
|
73
|
-
- `Separator` takes `tone="minor"` for a neutral line, a quiet break inside a page; the default stays primary. — Nikolaus Brunner <brunner@imfusion.com>
|
|
74
|
-
- `Select.ItemDescription` sets a muted second line under an item's text, such as what a role allows; the trigger shows only the item text, and the list keeps the trigger's width so descriptions wrap. — Nikolaus Brunner <brunner@imfusion.com>
|
|
75
|
-
- `Table.Root` takes `density` (`compact`, `comfortable`, `spacious`) for the cell padding. — Nikolaus Brunner <brunner@imfusion.com>
|
|
76
|
-
- `Table.HeaderCell` and `Table.Cell` take `action` for a column of buttons: it shrinks to its content, so the data columns keep the width. — Nikolaus Brunner <brunner@imfusion.com>
|
|
77
285
|
- [`useDisclosure`](src/hooks/use-disclosure.stories.tsx#UseDisclosure) keeps an open state that works controlled or uncontrolled, and returns `open`, `setOpen`, and `toggle`. — Nikolaus Brunner <brunner@imfusion.com>
|
|
78
|
-
- `AppShell.Navbar` and `AppShell.Aside` take `defaultOpen` and keep their own open state when `open` is omitted, and close an uncontrolled drawer when they dock. A controlled `open` is never changed by docking. — Nikolaus Brunner <brunner@imfusion.com>
|
|
79
|
-
- An `AppShell.Aside` opens from the consumer's state, such as a row selection, through `open` and `onOpenChange`. — Nikolaus Brunner <brunner@imfusion.com>
|
|
80
|
-
- `AppShell.Main` content is a flex column at least as tall as Main, so a child with `flex: 1` fills the rest. — Nikolaus Brunner <brunner@imfusion.com>
|
|
81
|
-
- `AppShell.Aside` content wraps long words such as emails and IDs inside a narrow panel, in the docked aside and the drawer. — Nikolaus Brunner <brunner@imfusion.com>
|
|
82
|
-
- An `AppShell.NavItem` followed inside the navbar drawer closes it, unless its `onClick` calls `event.preventDefault()`. — Nikolaus Brunner <brunner@imfusion.com>
|
|
83
|
-
- [`ColorSchemeToggle`](src/components/color-scheme-toggle/color-scheme-toggle.mdx) lets the user pick Light, System, or
|
|
84
|
-
Dark. It stores the choice through `useColorScheme` and needs no props; `label`, `lightLabel`, `systemLabel`, and
|
|
85
|
-
`darkLabel` replace the English text — Nikolaus Brunner <brunner@imfusion.com>
|
|
86
|
-
- [`ToggleGroup`](src/components/toggle-group/toggle-group.mdx) and `Toggle` take a `size` of `sm` or `md`. A small group
|
|
87
|
-
has no inset or gap, a 1px border, and 1.5rem toggles; a toggle takes its group's size unless it sets its own
|
|
88
|
-
— Nikolaus Brunner <brunner@imfusion.com>
|
|
89
286
|
- `Skeleton.Suspense` takes a `fallback` of bones, a `label`, and the content. It is a Suspense boundary whose fallback is a
|
|
90
287
|
busy `Skeleton.Root`; when the content mounts after the fallback showed, it fades in, and content that was
|
|
91
288
|
ready at mount appears without a fade. Use it for data loaded through Suspense, and `Skeleton.Root` for data loaded with
|
|
92
289
|
`useQuery` — Nikolaus Brunner <brunner@imfusion.com>
|
|
93
|
-
- `ScrollArea` is a scrolling region with a slim primary-colored thumb that floats over the content and shows while the
|
|
94
|
-
area is hovered or scrolled, and a fade at each edge with more content behind it. `ScrollArea.Auto` wraps children with
|
|
95
|
-
the scrollbars for `orientation` (`vertical`, `horizontal`, `both`, or `none`); the parts compose by hand for anything else
|
|
96
|
-
([WEBSDK-247](https://imfusion.atlassian.net/browse/WEBSDK-247)) — Nikolaus Brunner <brunner@imfusion.com>
|
|
97
|
-
- `Dialog` is a modal window over a dimmed page, adapted from Base UI with all its parts. `Dialog.Header` takes a
|
|
98
|
-
`variant` (`main`, `support`, `minor`, or `primary` with light text); `Dialog.Title` renders as `Typo.H2` and
|
|
99
|
-
`Dialog.Description` as `Typo.P`. `Dialog.Body` scrolls in a `ScrollArea` while header and footer stay in view.
|
|
100
|
-
`Dialog.Popup` comes in `sm`, `md`, `lg`, and `full`, and stops at 40rem high (`--imf-ui-dialog-max-height`) except in
|
|
101
|
-
`full`. `Dialog.Status` adds a tinted status column like `Card.Status`, on top of the width the size sets.
|
|
102
|
-
`Dialog.Simple` builds the whole dialog from props, and `Dialog.Inline` opens it from a term inside running text. Both
|
|
103
|
-
show the × close button only without `actions`; with them, the footer is the way out
|
|
104
|
-
([WEBSDK-247](https://imfusion.atlassian.net/browse/WEBSDK-247)) — Nikolaus Brunner <brunner@imfusion.com>
|
|
105
290
|
- Storybook — Nikolaus Brunner <brunner@imfusion.com>
|
|
106
291
|
- The token drawer offers Paper Mono as a mono font.
|
|
107
292
|
- Docs links open a single story when they name its export after the stories file:
|
|
108
293
|
`[Inline](src/components/code/code.stories.tsx#Inline)`.
|
|
109
|
-
- `withBreakHints` is exported. It inserts a break before each `@` and after each `.` in an email's string children, so the address wraps at its seams. [Account card](src/components/account-card/account-card.mdx) — Nikolaus Brunner <brunner@imfusion.com>
|
|
110
294
|
- `--imf-ui-accountcard-lead` and `--imf-ui-accountcard-padding-inline` set an `AccountCard`'s avatar column and inline padding, so a container can line it up with its own rows. [Account card](src/components/account-card/account-card.mdx) — Nikolaus Brunner <brunner@imfusion.com>
|
|
111
|
-
- `AppShell.Navbar` takes `logo` and `account`; the logo defaults to the ImFusion logo and lines up with the baseline of Main's first heading. [AppShell](src/components/app-shell/app-shell.mdx) — Nikolaus Brunner <brunner@imfusion.com>
|
|
112
|
-
- `--imf-ui-appshell-heading-*`, `--imf-ui-appshell-navitem-dim`, `--imf-ui-appshell-navitem-underline-thickness`, and `--imf-ui-appshell-navitem-underline-offset` tune the logo row's strut and the NavItem underline. [AppShell](src/components/app-shell/app-shell.mdx) — Nikolaus Brunner <brunner@imfusion.com>
|
|
113
|
-
- `AppShell.Aside` shows a close button in its drawer below `lg`, labelled by `closeLabel` (`Close panel` by default). [AppShell](src/components/app-shell/app-shell.mdx) — Nikolaus Brunner <brunner@imfusion.com>
|
|
114
|
-
- `Select.Root` takes a `width` of `auto`, `wide`, or `full`: `auto` keeps the 10rem trigger minimum, `wide` raises it to
|
|
115
|
-
15rem, and `full` fills the parent. `--imf-ui-select-trigger-min-width` on `Select.Root` sets the minimum from CSS.
|
|
116
|
-
[Select](src/components/select/select.mdx) — Nikolaus Brunner <brunner@imfusion.com>
|
|
117
295
|
|
|
118
296
|
### Changed
|
|
119
297
|
|
|
120
298
|
- The `project-structure` topic sets when a single-route part is inlined into its route file: a component under 50 lines, with no `use*` hook, no stylesheet or test of its own, leaving the route file under 250 lines. `imf-web-ui-audit` reports a breach as a Deviation. — Nikolaus Brunner <brunner@imfusion.com>
|
|
121
299
|
- The `Meter` track is translucent ink (8% `fg-main`), so it stays visible on tinted surfaces such as a selected table row. — Nikolaus Brunner <brunner@imfusion.com>
|
|
122
|
-
- `Table` reads lighter: the header has no band, its mono labels are muted with a 1px rule under them, body rows have no rules, and cells get more vertical padding. A selected row sits one neutral step darker than a hovered row, in place of the primary tint. — Nikolaus Brunner <brunner@imfusion.com>
|
|
123
300
|
- [`AppShell.Header`](src/components/app-shell/app-shell.mdx) is a page row that shows at every width, below the shell's bar on mobile. — Nikolaus Brunner <brunner@imfusion.com>
|
|
124
301
|
- The header pads its inline sides with `--imf-ui-appshell-padding`, so its content lines up with Main's.
|
|
125
302
|
- AppShell — Nikolaus Brunner <brunner@imfusion.com>
|
|
126
303
|
- The navbar rail, `AppShell.Main`, and the aside share `--imf-ui-appshell-padding` as their inline gutter, so their text lines up with no consumer CSS. [Docs](src/components/app-shell/app-shell.mdx)
|
|
127
304
|
- `--imf-ui-appshell-navbar-padding` defaults to `--imf-ui-appshell-padding`, and `--imf-ui-appshell-aside-padding` defaults to `--imf-ui-appshell-padding`. Both stay overridable.
|
|
128
305
|
- Agent skills — Nikolaus Brunner <brunner@imfusion.com>
|
|
129
|
-
- `npx web-ui install skills` writes no `.imf-web-ui-skill-version.json` marker into each skill and removes existing ones.
|
|
130
|
-
Both install commands read the harness back from the Claude skill links and the installer's hook registrations, and
|
|
131
|
-
take it from an old marker when one is still there.
|
|
132
306
|
- `imf-web-ui-audit` checks that `@imfusion/web-ui` is installed before it dispatches, and asks whether to install first,
|
|
133
307
|
since token, version, and type checks need the installed package. Its investigators search with whatever read-only
|
|
134
308
|
file search the host offers.
|
|
@@ -161,20 +335,12 @@ never changes the character width, so columns stay aligned. CoFo Sans Mono still
|
|
|
161
335
|
fades.
|
|
162
336
|
- Removed default padding from `Popover.Trigger` such that it keeps a neutral style.
|
|
163
337
|
- A ghost `Button` or `IconButton` hovers by fading its label or glyph, with no fill or edge, on main and oncolor surfaces alike, instead of inverting to a solid fill. `Dialog.Close` and the `AppShell.Aside` drawer close follow. [Button](src/components/button/button.mdx) — Nikolaus Brunner <brunner@imfusion.com>
|
|
164
|
-
- `Typo.UnorderedList` marks its items with a short primary-coloured dash on the main, support, and minor variants, and with a dash in the text colour on the others. It sets `role="list"` by default. [Typo](src/components/typo/typo.mdx) ([WEBSDK-270](https://imfusion.atlassian.net/browse/WEBSDK-270)) — Nikolaus Brunner <brunner@imfusion.com>
|
|
165
338
|
|
|
166
339
|
### Fixed
|
|
167
340
|
|
|
168
|
-
- `Typo.Hero`, `Typo.H3`, `Typo.H4`, `Typo.Lead`, and `Typo.Blockquote` no longer crowd their letters: `--imf-ui-font-letterspacing-hero` and `--imf-ui-font-letterspacing-brand` scale with the viewport, from about -0.0225em and -0.01em at 360px to -0.025em and -0.02em at 1920px, so pairs like "rt" and "ty" stay apart — Nikolaus Brunner <brunner@imfusion.com>
|
|
169
|
-
- The `Select` popup sits 4px below its trigger by default (`sideOffset` on `Select.Positioner`) and casts a hard shadow (`--imf-ui-shadow-4`). — Nikolaus Brunner <brunner@imfusion.com>
|
|
170
|
-
- An empty `Select.ItemIndicator` draws the `Check` icon in the item's text colour, so it stays visible on the highlighted item. Base UI's fallback was a `✔️` emoji in its own colour. — Nikolaus Brunner <brunner@imfusion.com>
|
|
171
|
-
- The `tooling` topic, `imf-web-ui-setup` and `imf-web-ui-audit` keep tsconfig `paths` away from Vite: `resolve.tsconfigPaths` or `vite-tsconfig-paths` loaded the React types package as React and broke a build that installs Web UI from the registry. The `#/` alias comes from `imports` in `package.json`. — Nikolaus Brunner <brunner@imfusion.com>
|
|
172
|
-
- The skill staleness hook stays quiet when `@imfusion/web-ui` is a symlinked checkout, whose version never matches the installed skills. — Nikolaus Brunner <brunner@imfusion.com>
|
|
173
341
|
- `Drawer.Popup` draws no focus ring around the whole panel when it takes focus on open; the controls inside keep theirs. — Nikolaus Brunner <brunner@imfusion.com>
|
|
174
|
-
- `Chip` stays on one line within its container's width and ends in an ellipsis when the label doesn't fit. [Chip](src/components/chip/chip.mdx) — Nikolaus Brunner <brunner@imfusion.com>
|
|
175
342
|
- Only the navbar drawer's own close shows while it is open; the header burger steps back until the drawer closes — Nikolaus Brunner <brunner@imfusion.com>
|
|
176
343
|
- `Skeleton.Root` fades only its own content in when loading ends; the rest of the page stays still, and no `AbortError` reaches the console — Nikolaus Brunner <brunner@imfusion.com>
|
|
177
|
-
- `AppShell`'s docked aside no longer leaves `AppShell.Main` up to 13px under it at 1024px: Main ends where the aside begins at every docked width — Nikolaus Brunner <brunner@imfusion.com>
|
|
178
344
|
- The Stop hook's verify gate blocks only a turn that edited files. An edit from an earlier turn no longer blocks later turns that only answer questions while the tree stays dirty — Nikolaus Brunner <brunner@imfusion.com>
|
|
179
345
|
- `imf-web-ui-ux` describes patterns and points to `imf-web-ui-components` for which components exist, instead of claiming which ones do not — Nikolaus Brunner <brunner@imfusion.com>
|
|
180
346
|
|
package/package.json
CHANGED