@hearthscale/app-ui 0.2.3 → 0.3.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.
Files changed (12) hide show
  1. package/README.md +15 -15
  2. package/dist/CLASSES.md +31 -14
  3. package/dist/TOKENS.md +14 -12
  4. package/dist/brand/linux-tux.svg +438 -0
  5. package/dist/brand/windows-tile.svg +13 -0
  6. package/dist/chunks/{chunk-SFZCPZQD.js → chunk-UDXTR7UW.js} +2 -0
  7. package/dist/fonts/InterVariable-latin.woff2 +0 -0
  8. package/dist/index.d.ts +153 -83
  9. package/dist/index.js +272 -181
  10. package/dist/markdown.js +24 -2
  11. package/dist/ui.css +427 -174
  12. package/package.json +2 -2
package/README.md CHANGED
@@ -43,19 +43,19 @@ A label names its action. Where a reason is needed, give it in a tooltip
43
43
 
44
44
  ## The parts
45
45
 
46
- | Kind | Parts |
47
- | -------------- | ------------------------------------------------------------------------------------------ |
48
- | Actions | `Button`, `IconButton` |
49
- | Surfaces | `Card`, `SettingsCard`, `SettingsSection`, `EmptyState`, `Notice` |
50
- | Scrolling | `OverlayScroll` |
51
- | Rows | `ListRow`, `InfoRow`, `LinkRow`, `FactRow`, `ToggleRow` |
52
- | Fields | `TextField`, `TextInput`, `Toggle`, `SegmentedControl`, `SettingsSearch`, `SettingsSelect` |
53
- | Tabs | `SettingsTabs` |
54
- | Status | `Chip`, `StatusWord` |
55
- | Text | `PageTitle`, `Label`, `Mono` |
56
- | Menus and tips | `MenuSurface`, `MItem`, `MSub`, `MDivider`, `MSection`, `anchorFrom`, `useFloatingTips` |
57
- | Dialogs | `ShellConfirm` |
58
- | Icons | `Icon` |
46
+ | Kind | Parts |
47
+ | -------------- | ------------------------------------------------------------------------------------------------- |
48
+ | Actions | `Button`, `IconButton` |
49
+ | Surfaces | `Card`, `SettingsCard`, `SettingsSection`, `EmptyState`, `Notice` |
50
+ | Scrolling | `OverlayScroll` |
51
+ | Rows | `ListRow`, `InfoRow`, `LinkRow`, `FactRow`, `ToggleRow` |
52
+ | Fields | `TextField`, `TextInput`, `Toggle`, `SegmentedControl`, `SettingsSearch`, `SettingsSelect` |
53
+ | Tabs | `SettingsTabs` |
54
+ | Status | `Chip`, `StatusWord` |
55
+ | Text | `PageTitle`, `Label`, `Mono` |
56
+ | Menus and tips | `MenuSurface`, `MItem`, `MSub`, `MDivider`, `MSection`, `anchorFrom`, `spaces`, `useFloatingTips` |
57
+ | Dialogs | `ShellConfirm` |
58
+ | Icons | `Icon` |
59
59
 
60
60
  Each part draws the same `hs-*` classes as the same part in Hearthscale, so a
61
61
  theme reaches it as it reaches the shell.
@@ -117,7 +117,7 @@ import '@hearthscale/app-ui/remixicon.css';
117
117
 
118
118
  ## The rail icon
119
119
 
120
- The rail shows the `icon` of your `app.json` 18 pixels square, beside
120
+ The rail shows the `icon` of your `app.json` 20 pixels square, beside
121
121
  Hearthscale's own marks. Draw it to sit among them:
122
122
 
123
123
  - **A 20 px grid.** A square `viewBox="0 0 24 24"` with the shape inside the
@@ -153,7 +153,7 @@ from the font's sheet. It does not build `@hearthscale/ui`:
153
153
  `pnpm --filter @hearthscale/app-ui... build` builds both, the design system
154
154
  first. The parts come from the design system's `kit` entry
155
155
  (`packages/ui/src/kit.ts`): a part is added there, never copied here. The
156
- platform's build stages the sheets and fonts of this `dist/` beside the
156
+ platform's build stages the sheets, fonts and marks of this `dist/` beside the
157
157
  daemon, with the MCP Apps SDK's browser build as `mcp-apps.js`, which the
158
158
  build writes to `dist/host/` without the SDK's `console.debug` of every
159
159
  message and the package does not publish, and the
package/dist/CLASSES.md CHANGED
@@ -35,6 +35,7 @@ capability variant retains `.hs-model-capabilities` / `.hs-model-capability`.
35
35
  | `hs-sidebar-plus`, `hs-sidebar-spacer` | a row's new-session mark; the room the windowed list keeps for rows it does not draw |
36
36
  | `hs-sidebar-rail-mark` | an app's mark on its rail plate |
37
37
  | `hs-rail-plate-bypass` | the warning mark on the rail plate of an app at Bypass all permissions |
38
+ | `hs-badged`, `hs-badged-badge` | a mark with a smaller mark on its lower right corner, or a few letters (`data-letters`), as the rail’s rung of a Server on another device wears the first letters of its name; the smaller mark |
38
39
  | `hs-rowact` | the actions that appear on a hovered row |
39
40
  | `hs-pinned` | the pin mark on a pinned session row |
40
41
  | `hs-spin` | a mark that turns while work runs, on an HTML box |
@@ -43,7 +44,7 @@ capability variant retains `.hs-model-capabilities` / `.hs-model-capability`.
43
44
  | `hs-picker`, `hs-picker-search` | the model picker, its search |
44
45
  | `hs-picker-list`, `hs-picker-empty` | the models, "No model matches." or why none can run |
45
46
  | `hs-picker-row`, `hs-picker-row-text`, `hs-picker-row-name`, `hs-picker-row-sub` | one model (`data-state` is `ready`, `absent`, `downloading` or `unavailable`; `data-download` where a press downloads it or asks a paired Server for it), its name and where it runs |
46
- | `hs-picker-row-action` | the Download on the row of a model this computer's Server has not downloaded, or the Ask on the row of one a paired Server has not |
47
+ | `hs-picker-row-action` | the Download on the row of a model this device's Server has not downloaded, or the Ask on the row of one a paired Server has not |
47
48
  | `hs-picker-row-check` | the place of the mark of the model in use, which every row keeps |
48
49
  | `hs-provider-mark` | a provider's place or cloud mark |
49
50
  | `hs-rview`, `hs-ptab`, `hs-tabscroll` | a tab's own box, a tab of a strip, the tab strip |
@@ -77,14 +78,14 @@ capability variant retains `.hs-model-capabilities` / `.hs-model-capability`.
77
78
  | `hs-walk` | a walkthrough; `data-host` is `dialog` (a plate over the shell, on a veil) or `window` (the whole window) |
78
79
  | `hs-walk-card`, `hs-walk-close` | its card; the close mark at the card's top right |
79
80
  | `hs-walk-image` | the picture band across the top of a card |
80
- | `hs-server-picture`, `hs-apps-picture`, `hs-picture-mesh`, `hs-picture-tile`, `hs-picture-line`, `hs-heatmap-picture` | an onboarding card's picture over its mesh: the Server and a computer, the wall of apps; the mesh, a glass tile in it, a line between tiles; the heat picture of the hearth mark |
81
+ | `hs-server-picture`, `hs-apps-picture`, `hs-picture-mesh`, `hs-picture-tile`, `hs-picture-line`, `hs-heatmap-picture` | an onboarding card's picture over its mesh: the Server and a device, the wall of apps; the mesh, a glass tile in it, a line between tiles; the heat picture of the hearth mark |
81
82
  | `hs-tour`, `hs-tour-part`, `hs-tour-card`, `hs-tour-title`, `hs-tour-text`, `hs-tour-actions`, `hs-tour-fill` | a tour over the window: the veil, the part it lights, the card (`data-placed` once it stands beside the part), the stop's title and words, its buttons and the room that sets Back and Next apart from Close |
82
83
  | `hs-walk-main` | the region under the picture that holds the words, the rows and the live content; `data-image` under one |
83
84
  | `hs-walk-title`, `hs-walk-sub` | a card's title and the line under it |
84
85
  | `hs-walk-rows`, `hs-walk-row` | a card's list (`data-layout` is `list`, `open` or `grid`), and one row of it |
85
86
  | `hs-walk-row-mark`, `hs-walk-row-text`, `hs-walk-row-title`, `hs-walk-row-sub` | a row's mark, its words, its title and the line under the title |
86
87
  | `hs-walk-body` | the bordered plate a card's live content sits in |
87
- | `hs-walk-foot`, `hs-walk-dots`, `hs-walk-dot` | the foot, the page dots, one dot; `data-sel` marks the card shown |
88
+ | `hs-walk-foot`, `hs-walk-dots`, `hs-walk-dot` | the foot, the page dots, one dot; `data-sel` marks the card shown, `data-back` a card before it, the only dots a press moves to |
88
89
  | `hs-walk-foot-start`, `hs-walk-next-off` | Back and a second way off the card; the forward press on a card the reader cannot move past |
89
90
  | `hs-onboarding-body`, `hs-onboarding-prose` | the live part of a first-run card; a line of words in it |
90
91
  | `hs-onboarding-row` | a glass row that starts an act (`data-press`) or says it is done (`data-ticked`) |
@@ -96,7 +97,7 @@ capability variant retains `.hs-model-capabilities` / `.hs-model-capability`.
96
97
  | `hs-caption-rule` | the hairline between the top lane and the system's caption buttons |
97
98
  | `hs-submenu-chevron` | the chevron of a menu row that opens a flyout |
98
99
  | `hs-browser-step-off` | a browser's Back or Forward with no page to go to |
99
- | `hs-tip`, `hs-tipwrap` | a tooltip and the element that anchors one |
100
+ | `hs-tip` | a tooltip |
100
101
  | `hs-tog` | a toggle switch |
101
102
  | `hs-in`, `hs-ta`, `hs-ph-icon` | a text input, a textarea, a placeholder with a leading icon |
102
103
  | `hs-navhead`, `hs-setrow`, `hs-chip` | a settings nav section label, a settings row, a choice chip |
@@ -139,6 +140,9 @@ capability variant retains `.hs-model-capabilities` / `.hs-model-capability`.
139
140
  | `hs-hovink`, `hs-hovmut` | hover that brightens ink only / mutes |
140
141
  | `hs-boxact`, `hs-boxsel` | the active plate, the selected plate |
141
142
  | `hs-glassbtn` | a glass button |
143
+ | `hs-glass-turn` | an arrow over pictures that turns a carousel or a strip of pictures |
144
+ | `hs-carousel`, `hs-carousel-track` | a carousel, one slide across its width at a time, and its track |
145
+ | `hs-carousel-dots` | the dots at a carousel's foot, one per slide |
142
146
  | `hs-inktext`, `hs-inkmut`, `hs-inkdim`, `hs-inkbad` | the ink an element rests at, so a hover or selection rule can reach it |
143
147
 
144
148
  ## Transcript
@@ -177,7 +181,7 @@ capability variant retains `.hs-model-capabilities` / `.hs-model-capability`.
177
181
  | `hs-diff-count` | a line count beside a changed file; `data-kind` is `add` or `del` |
178
182
  | `hs-view-row` | a result's view in the transcript |
179
183
  | `hs-media`, `hs-media-pictures`, `hs-media-actions` | what a call made; its pictures (`data-count` is `one` or `many`); the actions over a picture |
180
- | `hs-chat-image`, `hs-chat-image-name` | a picture a call made, in a frame of its size; the name of one that did not load |
184
+ | `hs-chat-image`, `hs-chat-image-name` | a picture or a video a call made, in a frame of its size; the name of a picture that did not load |
181
185
  | `hs-audio`, `hs-audio-play`, `hs-audio-name`, `hs-audio-bar`, `hs-audio-fill` | a sound's player, its play and pause, its name, its bar and the part played |
182
186
  | `hs-audio-time`, `hs-audio-save` | the player's times and its Save |
183
187
  | `hs-media-text`, `hs-media-text-head`, `hs-media-text-name`, `hs-media-text-save`, `hs-media-text-body` | a text a call made, such as a transcript; its head, its name, its Save, its words |
@@ -198,13 +202,14 @@ capability variant retains `.hs-model-capabilities` / `.hs-model-capability`.
198
202
  | `hs-inline-chip`, `hs-inline-chip-mark` | a file, a folder, a skill or an app's item in the editor or a sent prompt (`data-kind` is `file`, `folder`, `skill` or `mention`), its mark |
199
203
  | `hs-composer-shelf`, `hs-shelf-tiles`, `hs-shelf-tile`, `hs-shelf-tile-open`, `hs-shelf-remove` | what rides the next prompt; its pictures, one tile, the tile's opener, a remove button |
200
204
  | `hs-shelf-file`, `hs-shelf-file-name`, `hs-shelf-file-size` | another file on the shelf, its name, its size |
201
- | `hs-shelf-chips`, `hs-shelf-chip`, `hs-shelf-chip-note` | the chips (`data-kind` is `folder`, `terminal`, or `context` for what a view adds, with `data-chip` its id), the "read only" note |
205
+ | `hs-shelf-chips`, `hs-shelf-chip`, `hs-shelf-chip-note`, `hs-shelf-chip-text` | the chips (`data-kind` is `folder`, `terminal`, or `context` for what a view adds, with `data-chip` its id), the "read only" note, a context chip's words |
202
206
  | `hs-shelf-refused` | a file the composer could not attach, or a level change the platform refused, in words |
203
207
  | `hs-ring`, `hs-ring-panel`, `hs-ring-title`, `hs-ring-share`, `hs-ring-note` | the context ring, its popover, the popover's title, the share used, its sentence |
204
208
  | `hs-ring-actions`, `hs-ring-answer`, `hs-ring-details-toggle`, `hs-ring-details` | Compact and the daemon's answer; the Details disclosure and what it holds |
205
209
  | `hs-ring-fact`, `hs-ring-layer`, `hs-ring-layer-line`, `hs-ring-cost`, `hs-ring-text` | a fact of the prompt; one layer, its line (`data-static` for a tool's), its cost, its text |
206
210
  | `hs-ask`, `hs-ask-head`, `hs-ask-mark`, `hs-ask-title`, `hs-ask-app`, `hs-ask-count` | a request (`data-placement` is `docked` or `floating`, `data-narrow` in its narrow form), its head, mark, title, app, and "1 of 3" |
207
211
  | `hs-ask-body`, `hs-ask-note`, `hs-ask-data`, `hs-ask-command` | its sentence, a warning under it, a path or a code in it, the command it would run or what a tool call would do |
212
+ | `hs-ask-fold` | the press that shows the input of an app's tool |
208
213
  | `hs-ask-change`, `hs-ask-hunk`, `hs-ask-line`, `hs-ask-sign` | the lines an edit would change, one edit, one line (`data-kind` is `del` or `add`), its sign |
209
214
  | `hs-ask-tools`, `hs-ask-tool`, `hs-ask-tool-name`, `hs-ask-tool-text` | a connector's tools, one tool, its name, its description |
210
215
  | `hs-ask-actions`, `hs-ask-keys`, `hs-ask-options`, `hs-ask-option` | the request's buttons and the keys that answer it; a question's options, one option |
@@ -227,6 +232,7 @@ capability variant retains `.hs-model-capabilities` / `.hs-model-capability`.
227
232
  | `hs-kbd` | a key the person can press |
228
233
  | `hs-input` | a one-line field with a box; `data-variant` is `text`, `number` or `password` |
229
234
  | `hs-chip`, `hs-chip-mark`, `hs-chip-text` | a small named thing; `data-tone` is `neutral`, `info`, `ok`, `warn` or `bad`; a choice chip carries `data-sel` and no tone |
235
+ | `hs-cut` | a one-line label that fades out at its end where its box cuts it |
230
236
  | `hs-app-icon` | an app's own icon, or the mark of an app or a plugin |
231
237
  | `hs-system-icon` | the machine's own icon for a file or a folder |
232
238
  | `hs-file-kind` | a file's kind as a coloured mark until its system icon arrives; `data-kind` names the kind |
@@ -278,7 +284,7 @@ One class per component, named after it: `hs-button`, `hs-card`, `hs-chart`,
278
284
  | `hs-label` | a caption in the interface font |
279
285
  | `hs-lockup-box`, `hs-lockup-mark`, `hs-lockup-word` | the lockup's 38px box, the mark on its floor, the wordmark beside it |
280
286
  | `hs-model-avatar-initial` | a publisher's first letter where it has no picture |
281
- | `hs-mono` | machine text inside a sentence or a row |
287
+ | `hs-mono` | machine text inside a sentence or a row, in the interface font with even digits |
282
288
  | `hs-page-title`, `hs-page-lead` | a page's heading (`data-hero` centres and enlarges it) and the line under it |
283
289
  | `hs-fact-row`, `hs-fact-label`, `hs-fact-value` | a row of an information table, its label and its wrapping value |
284
290
  | `hs-link-row`, `hs-link-row-chevron` | a row that opens its own page, and its chevron |
@@ -331,6 +337,7 @@ and add these:
331
337
  | Class | Marks |
332
338
  | ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
333
339
  | `hs-caption-button` | a caption button a window with no system caption draws; `data-danger` on the close button |
340
+ | `hs-titlebar-drag` | the layer under a drawn title bar that drags the window |
334
341
  | `hs-server-nav`, `hs-server-nav-pages`, `hs-server-nav-footer` | the dashboard's navigation column, its page list, its power action |
335
342
  | `hs-server-window` | the box of the dashboard's page panel beside its navigation column |
336
343
  | `hs-server-waiting` | the words a dashboard page shows while the Server is not running or not reached |
@@ -341,8 +348,9 @@ and add these:
341
348
  | `hs-installer-stage` | one stage of a run; `data-state` is `done`, `current`, `pending` or `failed` |
342
349
  | `hs-installer-slot`, `hs-installer-dot` | a mark's slot at the start of a row; the dot of the current or a waiting stage |
343
350
  | `hs-installer-label`, `hs-installer-detail` | a row's words, and the quiet detail at its end |
344
- | `hs-installer-stopped`, `hs-installer-stopped-text` | a stopped run's sentence and its Retry; the sentence |
345
- | `hs-installer-folder` | the install folder, a glass press that opens the folder dialog |
351
+ | `hs-installer-stopped`, `hs-installer-stopped-text` | a stopped run's sentence and its presses; a sentence, `data-tone="bad"` for a failed one |
352
+ | `hs-installer-stopped-actions` | a stopped run's presses: Retry and the failure's report |
353
+ | `hs-installer-folder` | the install or models folder, a glass press that opens the folder dialog |
346
354
  | `hs-installer-offer`, `hs-installer-specs`, `hs-installer-spec`, `hs-installer-spec-mark` | the set-up's offer, the machine's facts, one fact, its mark |
347
355
  | `hs-installer-picks`, `hs-installer-pick`, `hs-installer-tick` | the receipt's rows, one row (`data-ticked`, `data-fixed`), its tick box |
348
356
 
@@ -358,6 +366,7 @@ The pages the api draws at `admin.` (`DashboardFrame`, `Bento`, `BentoTile`,
358
366
  | `hs-dashboard-brand` | the lockup at the start of the bar |
359
367
  | `hs-dashboard-nav`, `hs-dashboard-link` | the links to the pages, and one link; `aria-current="page"` on the page on screen, whose plate shows |
360
368
  | `hs-dashboard-menu-toggle`, `hs-dashboard-menu`, `hs-dashboard-menu-open`, `hs-dashboard-menu-close` | on a narrow screen: the box that holds whether the sheet of links is open, the menu button, and its two marks |
369
+ | `hs-dashboard-short` | with `hs-input`, a field as wide as its `size`, in a table's cell |
361
370
  | `hs-dashboard-main`, `hs-dashboard-title`, `hs-dashboard-note` | the page under the bar (`data-centered` on a page that says one thing), its title, a sentence that says why it shows no figures |
362
371
  | `hs-bento` | the grid of tiles: twelve columns on a wide screen, one on a narrow one |
363
372
  | `hs-bento-tile` | a glass tile; `data-span` is its share of the twelve columns, `data-tall` two rows high, `data-aside` with a part beside what it holds |
@@ -407,7 +416,8 @@ named shell presentation hooks. They follow these component families:
407
416
 
408
417
  Selection uses `data-sel="true"`; settings buttons expose `data-strong` and
409
418
  `data-danger`, menu items expose `data-disabled`, and selects expose `data-open`.
410
- `hs-floating-tip` is a help tip placed beside its mark, `hs-range-value` the
419
+ `hs-select-note` is the quiet word at the end of a select, after its value.
420
+ `hs-floating-tip` is the box a tooltip floats in beside its mark, `hs-range-value` the
411
421
  value beside a slider, `hs-size-step` a step of a size stepper,
412
422
  `hs-row-anchor` a row that positions a mark over its corner, and
413
423
  `hs-push-end` an element pushed to the end of its row.
@@ -447,13 +457,18 @@ A file's preview in a view: `hs-document-view` holds Markdown, a CSV, a
447
457
  diagram or a chart drawn from the file's text, a CSV as a Markdown table;
448
458
  `hs-file-partial` says that only the head of a long file shows.
449
459
 
450
- Model browsing uses `hs-model-browser*`, `hs-model-header*`, `hs-model-tile`,
460
+ The test of a speech model uses `hs-speech-test`, the box of the words it heard, and
461
+ `hs-speech-test-end`, its time and its press at the end. The menu of a multi-select uses
462
+ `hs-multi-select-menu`, `hs-multi-select-list` and `hs-menu-search`, and a word beside
463
+ a model's name in its picker `hs-picker-row-word`. A list setting uses
464
+ `hs-list-setting*`. Model browsing uses `hs-model-browser*`, `hs-model-header*`, `hs-model-tile`,
451
465
  `hs-model-stat`, `hs-model-stats`, `hs-model-capabilities`, `hs-model-capability`
452
466
  and `hs-model-card`. Selected rows use `aria-pressed="true"`.
453
467
 
454
468
  Settings grouping: `hs-settings-card` (`SettingsCard`) owns the outer border;
455
469
  `hs-settings-group` / `hs-settings-group-title` divide its content.
456
470
  `hs-settings-note` and `hs-settings-actions` inset descriptions and buttons;
471
+ `hs-setting-controls` holds several things at the end of a row;
457
472
  `hs-settings-card-header` aligns collapsible group labels with row content.
458
473
  `--content-width` sets the shared composer/settings column width.
459
474
  `hs-settings-management` is the separate, right-aligned management footer.
@@ -478,9 +493,10 @@ hover actions; `.hs-model-hover-action` becomes visible on row hover or focus.
478
493
  `hs-settings-tabs` uses `aria-selected` to paint its active glass button.
479
494
  `hs-settings-breadcrumbs` and `hs-settings-crumb*` name inner-window locations.
480
495
  Compact controls use `hs-settings-input`, `hs-settings-file` and
481
- `hs-settings-textarea`. Model settings use
496
+ `hs-settings-textarea`; `hs-settings-text` is a field for words, at one length on
497
+ every row. Model settings use
482
498
  `hs-model-settings-*`; runtime controls use `hs-model-runtime-*`; downloads use
483
- `hs-model-download*`, and a companion picker's label and repository field
499
+ `hs-model-download*`, `hs-model-offer-actions` under an offer of models, and a companion picker's label and repository field
484
500
  `hs-model-companion-*`; generated image/audio previews use `hs-model-media-output`.
485
501
  `hs-model-error` carries inline request failures. These selectors live in
486
502
  `src/shell.css` and read the shared theme tokens.
@@ -516,7 +532,7 @@ the controls below a 470px card width without changing other settings layouts.
516
532
  `.hs-key-remove`, the remove mark; `.hs-key-clash` is the line that names a key another
517
533
  shortcut holds.
518
534
  - `.hs-provider-title` — a provider's name behind its mark; `.hs-provider-offer` and
519
- `.hs-provider-offer-name`, a computer on the account the Providers page offers to add,
535
+ `.hs-provider-offer-name`, a device on the network the Providers page offers to add,
520
536
  and its name.
521
537
 
522
538
  ## Breaks
@@ -573,3 +589,4 @@ Removed or renamed classes, with what replaces them:
573
589
  | `hs-browser-pages`, `hs-browser-page` | `hs-tab-page` of a view's tab, `hs-web-page` of a web surface |
574
590
  | `hs-panel-view-slot`, `hs-panel-action`, `hs-file-guest`, `hs-changed-show` | nothing: the window draws no Files, Diff, Terminal or browser tab of its own |
575
591
  | `hs-app-bypass` | nothing |
592
+ | `hs-tipwrap`, `hs-provider-ask` | `hs-floating-tip` (`useFloatingTips`); nothing |
package/dist/TOKENS.md CHANGED
@@ -188,6 +188,7 @@ one family apart.
188
188
  | `--scroll-size` | `calc(var(--space) * 2.75)` | | yes | no | `11px` at the default `--space` |
189
189
  | `--w-rail` | `calc(var(--space) * 14)` | | yes | no | `56px` at the default `--space` |
190
190
  | `--icon-ctl-rail` | `calc(var(--space) * 10)` | | yes | no | `40px` at the default `--space` |
191
+ | `--h-badge` | `calc(var(--space) * 3)` | | yes | no | `12px` at the default `--space` |
191
192
  | `--gap-rail` | `var(--space)` | | yes | no | `4px` at the default `--space` |
192
193
  | `--edge` | `calc(var(--space) * 2)` | | yes | no | `8px` at the default `--space` |
193
194
  | `--h-lane` | `42px` | | yes | no | |
@@ -196,7 +197,7 @@ one family apart.
196
197
  | `--tabcard-w` | `calc(var(--space) * 80)` | | yes | no | `320px` at the default `--space` |
197
198
  | `--tabcard-dip` | `0.82` | | yes | no | |
198
199
  | `--tab-text-min` | `calc(var(--space) * 12)` | | yes | no | `48px` at the default `--space` |
199
- | `--tab-fade` | `calc(var(--space) * 4)` | | yes | no | `16px` at the default `--space` |
200
+ | `--cut-fade` | `calc(var(--space) * 4)` | | yes | no | `16px` at the default `--space` |
200
201
  | `--lane-arrow-w` | `calc(var(--space) * 5)` | | yes | no | `20px` at the default `--space` |
201
202
  | `--h-lane-rule` | `calc(var(--space) * 6)` | | yes | no | `24px` at the default `--space` |
202
203
  | `--lane-rule-alpha` | `0.22` | | yes | no | |
@@ -310,6 +311,7 @@ one family apart.
310
311
  | `--press` | `none` | | yes | no | |
311
312
  | `--press-fade` | `1` | | yes | no | |
312
313
  | `--hov-lift` | `none` | | yes | no | |
314
+ | `--fs-badge` | `8.5px` | | yes | no | |
313
315
  | `--fs-mono-xs` | `10.5px` | | yes | no | |
314
316
  | `--fs-mono` | `11px` | | yes | no | |
315
317
  | `--fs-cap` | `11.5px` | | yes | no | |
@@ -401,14 +403,14 @@ one family apart.
401
403
  The selectors whose corner reads each token. A theme reshapes a role
402
404
  through its token; it selects a class only to set one family apart.
403
405
 
404
- | Token | Selectors |
405
- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
406
- | `--r-card` | `.hs-setrow:where(:not(.hs-setrow + .hs-setrow))`, `.hs-setrow:where(:not(:has(+ .hs-setrow)))`, `.hs-menu`, `.hs-tip`, `.hs-md img`, `.hs-settings-plate`, `.hs-shelf-tile`, `.hs-shelf-file`, `.hs-ring-text`, `.hs-ask-preview-view`, `.hs-user-edit`, `.hs-user-bubble`, `.hs-user-tile`, `.hs-work-body`, `.hs-compaction-body`, `.hs-unknown-part`, `.hs-changed`, `.hs-chat-image`, `.hs-audio`, `.hs-media-text`, `.hs-md-picture`, `.hs-terminal-paste`, `.hs-tour-part`, `.hs-view-frame`, `.hs-appearance-tile`, `.hs-theme-preview`, `.hs-colourway-tile`, `.hs-colourway-editor`, `.hs-notice`, `.hs-overlay-note`, `.hs-chart, .hs-diagram`, `.hs-code-block`, `.hs-shell .hs-code-slot`, `.hs-card`, `.hs-model-tile`, `.hs-model-stat`, `.hs-settings-card`, `.hs-settings-card > .hs-setrow:first-child`, `.hs-settings-card > .hs-setrow:last-child`, `.hs-settings-card-header`, `.hs-docs-image`, `.hs-docs-image-link:focus-visible`, `.hs-docs-table`, `.hs-docs-code`, `.hs-docs-callout`, `.hs-docs-card`, `.hs-docs-tabs`, `.hs-docs-accordion`, `.hs-shell .hs-docs-pager-card`, `.hs-market-hero::before`, `.hs-market-feature`, `.hs-market-row, .hs-market-recommended-row`, `.hs-market-shots img`, `.hs-model-media-output img`, `.hs-model-runtime-row`, `.hs-server-log`, `.hs-dashboard-plate, .hs-bento-tile, .hs-figure`, `.hs-tab-card`, `.hs-popover`, `.hs-toast`, `.hs-picture-compare`, `.hs-rich-text pre` |
407
- | `--r-ctl` | `.hs-glassbtn`, `.hs-sessrow`, `.hs-projrow`, `.hs-plugrow`, `.hs-chip`, `.hs-mitem`, `.hs-url`, `.hs-level-control`, `.hs-model-trigger`, `.hs-picker-row`, `.hs-nav-rail-item`, `.hs-search-result`, `.hs-turn-rail:focus-visible`, `.hs-composer-menu-row`, `.hs-ask-command`, `.hs-ask-option`, `.hs-ask-pick`, `.hs-ask-pick-press`, `.hs-input`, `.hs-user-file`, `.hs-work-line, .hs-work-toggle`, `.hs-spawn-member`, `.hs-media-actions button`, `.hs-audio-save`, `.hs-media-text-save`, `.hs-lightbox-button, .hs-lightbox-step`, `.hs-lightbox-reread`, `.hs-panel-button`, `.hs-browser-address`, `.hs-panel-picker`, `.hs-file-row`, `.hs-ta.hs-sheet-input`, `.hs-sidebar-rail-item`, `.hs-sidebar-drag`, `.hs-panel-field`, `.hs-button`, `.hs-icon-button`, `.hs-field-input`, `.hs-model-browser-row`, `.hs-selection-option`, `.hs-docs-code-copy`, `.hs-docs-card-icon`, `.hs-docs-tab`, `.hs-market-search`, `.hs-market-menu-button`, `.hs-shell .hs-signin-method`, `.hs-settings-tabs button`, `.hs-settings-input`, `.hs-settings-textarea textarea`, `.hs-settings-crumb-item button`, `.hs-segmented`, `.hs-segmented-option`, `.hs-shell .hs-dashboard-link`, `.hs-dashboard-menu`, `.hs-lane-crumb:focus-visible`, `.hs-lane-tabs-arrow` |
408
- | `--r-icon` | `.hs-picture-tile`, `.hs-model-avatar`, `.hs-market-logo`, `.hs-market-logo img`, `.hs-app-icon` |
409
- | `--r-pill` | `.hs-shell::-webkit-scrollbar-thumb, .hs-shell ::-webkit-scrollbar-thumb`, `.hs-sessrow[data-ins]::before`, `.hs-shell .hs-tabscroll::-webkit-scrollbar-thumb`, `.hs-range`, `.hs-jump`, `.hs-picker-row-action`, `.hs-overlay-thumb`, `.hs-turn-rail-line`, `.hs-shelf-chip`, `.hs-drop-pill`, `.hs-copy-tip`, `.hs-audio-bar`, `.hs-meter[data-variant='bar']`, `.hs-chip[data-tone]`, `.hs-menu-chip, .hs-tooltip-chip`, `.hs-colour-slider`, `.hs-colour-slider-thumb`, `.hs-model-detail-chip, .hs-model-capabilities-labeled .hs-model-capability`, `.hs-docs-callout-rail`, `.hs-docs-step::before`, `.hs-market-feature-dots`, `.hs-market-feature-dots button`, `.hs-shell .hs-signin-method small`, `.hs-model-fit`, `.hs-model-execution progress::-webkit-progress-bar`, `.hs-model-execution progress::-webkit-progress-value`, `.hs-installer-bar`, `.hs-world-map-ramp`, `.hs-picture-compare-name` |
410
- | `--r-round` | `.hs-range::-webkit-slider-thumb`, `.hs-drawer-dot`, `.hs-composer-tool`, `.hs-composer-stop, .hs-composer-send`, `.hs-shelf-remove`, `.hs-ring`, `.hs-audio-play`, `.hs-tab-dot`, `.hs-walk-dot`, `.hs-orb`, `.hs-orb[data-sel='true']::after`, `.hs-colourway-check, .hs-colourway-custom-check`, `.hs-installer-dot`, `.hs-rail-plate-bypass`, `.hs-lane-tab[data-fit='mark'] > .hs-tab-close`, `.hs-fan-dot, .hs-fan-item-dot`, `.hs-swatch-dot`, `.hs-swatch-choice`, `.hs-date-grid-day`, `.hs-person-mark`, `.hs-picture-compare-knob` |
411
- | `--r-sm` | `.hs-md code`, `.hs-diff-act`, `.hs-inline-chip`, `.hs-ring-layer-line`, `.hs-ask-data`, `.hs-ask-picture`, `.hs-kbd`, `.hs-chat-action`, `.hs-user-edit`, `.hs-user-bubble`, `.hs-md-missing`, `.hs-panel-favicon`, `.hs-tab-close`, `.hs-site-button`, `.hs-browser-menu-button`, `.hs-path-segment`, `.hs-panel-path`, `.hs-theme-remove`, `.hs-panel-small-button`, `.hs-browser-zoom-reset`, `.hs-icon-button[data-size='sm']`, `.hs-code-copy`, `.hs-docs-prose code`, `.hs-shell .hs-market-rate-star`, `.hs-settings-number-steps button`, `.hs-key-binding`, `.hs-key-record`, `.hs-bar-series-bar`, `.hs-bar-series-fill`, `.hs-tab-card-preview`, `.hs-divider:focus-visible`, `.hs-tinted` |
412
- | `--r-tile` | `.hs-window`, `.hs-drawer`, `.hs-composer-main`, `.hs-drop-overlay`, `.hs-composer-dock > .hs-ask > .hs-card`, `.hs-tour-card`, `.hs-confirm-box`, `.hs-walk[data-host='dialog'] .hs-walk-card`, `.hs-walk-image`, `.hs-sheet-box`, `.hs-view-modal-plate`, `.hs-modal`, `.hs-selection-dialog`, `.hs-tile-drop`, `.hs-surface` |
413
- | `--switch-radius` | `.hs-tog` |
414
- | `--switch-thumb-radius` | `.hs-tog .hs-toggle-thumb` |
406
+ | Token | Selectors |
407
+ | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
408
+ | `--r-card` | `.hs-setrow:where(:not(.hs-setrow + .hs-setrow))`, `.hs-setrow:where(:not(:has(+ .hs-setrow)))`, `.hs-menu`, `.hs-tip`, `.hs-md img`, `.hs-settings-plate`, `.hs-shelf-tile`, `.hs-shelf-file`, `.hs-ring-text`, `.hs-ask-preview-view`, `.hs-user-edit`, `.hs-user-bubble`, `.hs-user-tile`, `.hs-work-body`, `.hs-compaction-body`, `.hs-unknown-part`, `.hs-changed`, `.hs-chat-image`, `.hs-audio`, `.hs-media-text`, `.hs-md-picture`, `.hs-terminal-paste`, `.hs-tour-part`, `.hs-view-frame`, `.hs-appearance-tile`, `.hs-theme-preview`, `.hs-colourway-tile`, `.hs-colourway-editor`, `.hs-notice`, `.hs-overlay-note`, `.hs-chart, .hs-diagram`, `.hs-code-block`, `.hs-shell .hs-code-slot`, `.hs-card`, `.hs-model-tile`, `.hs-model-stat`, `.hs-settings-card`, `.hs-settings-card > .hs-setrow:first-child`, `.hs-settings-card > .hs-setrow:last-child`, `.hs-settings-card-header`, `.hs-docs-image`, `.hs-docs-image-link:focus-visible`, `.hs-docs-table`, `.hs-docs-code`, `.hs-docs-callout`, `.hs-docs-card`, `.hs-docs-tabs`, `.hs-docs-accordion`, `.hs-shell .hs-docs-pager-card`, `.hs-market-hero::before`, `.hs-market-feature`, `.hs-market-row, .hs-market-recommended-row`, `.hs-market-shots img`, `.hs-model-media-output video, .hs-model-media-output img`, `.hs-model-runtime-row`, `.hs-server-log`, `.hs-dashboard-plate, .hs-bento-tile, .hs-figure`, `.hs-tab-card`, `.hs-popover`, `.hs-toast`, `.hs-picture-compare`, `.hs-rich-text pre` |
409
+ | `--r-ctl` | `.hs-glassbtn`, `.hs-sessrow`, `.hs-projrow`, `.hs-plugrow`, `.hs-chip`, `.hs-mitem`, `.hs-url`, `.hs-level-control`, `.hs-model-trigger`, `.hs-picker-row`, `.hs-nav-rail-item`, `.hs-search-result`, `.hs-turn-rail:focus-visible`, `.hs-composer-menu-row`, `.hs-ask-command`, `.hs-ask-option`, `.hs-ask-pick`, `.hs-ask-pick-press`, `.hs-input`, `.hs-user-file`, `.hs-work-line, .hs-work-toggle`, `.hs-spawn-member`, `.hs-media-actions button`, `.hs-audio-save`, `.hs-media-text-save`, `.hs-lightbox-button, .hs-lightbox-step`, `.hs-lightbox-reread`, `.hs-panel-button`, `.hs-browser-address`, `.hs-panel-picker`, `.hs-file-row`, `.hs-ta.hs-sheet-input`, `.hs-sidebar-rail-item`, `.hs-sidebar-drag`, `.hs-panel-field`, `.hs-button`, `.hs-icon-button`, `.hs-field-input`, `.hs-model-browser-row`, `.hs-selection-option`, `.hs-docs-code-copy`, `.hs-docs-card-icon`, `.hs-docs-tab`, `.hs-market-search`, `.hs-market-menu-button`, `.hs-shell .hs-signin-method`, `.hs-settings-tabs button`, `.hs-settings-input`, `.hs-speech-test`, `.hs-settings-textarea textarea`, `.hs-settings-crumb-item button`, `.hs-segmented`, `.hs-segmented-option`, `.hs-shell .hs-dashboard-link`, `.hs-dashboard-menu`, `.hs-lane-crumb:focus-visible`, `.hs-lane-tabs-arrow` |
410
+ | `--r-icon` | `.hs-picture-tile`, `.hs-model-avatar`, `.hs-market-logo`, `.hs-market-logo img`, `.hs-app-icon` |
411
+ | `--r-pill` | `.hs-shell::-webkit-scrollbar-thumb, .hs-shell ::-webkit-scrollbar-thumb`, `.hs-sessrow[data-ins]::before`, `.hs-shell .hs-tabscroll::-webkit-scrollbar-thumb`, `.hs-range`, `.hs-jump`, `.hs-picker-row-action`, `.hs-overlay-thumb`, `.hs-turn-rail-line`, `.hs-shelf-chip`, `.hs-drop-pill`, `.hs-copy-tip`, `.hs-audio-bar`, `.hs-meter[data-variant='bar']`, `.hs-chip[data-tone]`, `.hs-menu-chip, .hs-tooltip-chip`, `.hs-colour-slider`, `.hs-colour-slider-thumb`, `.hs-model-detail-chip, .hs-model-capabilities-labeled .hs-model-capability`, `.hs-docs-callout-rail`, `.hs-docs-step::before`, `.hs-carousel-dots`, `.hs-carousel-dots button`, `.hs-carousel-dots button::before`, `.hs-shell .hs-signin-method small`, `.hs-model-fit`, `.hs-model-execution progress::-webkit-progress-bar`, `.hs-model-execution progress::-webkit-progress-value`, `.hs-installer-bar`, `.hs-world-map-ramp`, `.hs-picture-compare-name` |
412
+ | `--r-round` | `.hs-range::-webkit-slider-thumb`, `.hs-drawer-dot`, `.hs-composer-tool`, `.hs-composer-stop, .hs-composer-send`, `.hs-shelf-remove`, `.hs-ring`, `.hs-audio-play`, `.hs-tab-dot`, `.hs-walk-dot`, `.hs-orb`, `.hs-orb[data-sel='true']::after`, `.hs-colourway-check, .hs-colourway-custom-check`, `.hs-installer-dot`, `.hs-badged-badge`, `.hs-rail-plate-bypass`, `.hs-lane-tab[data-fit='mark'] > .hs-tab-close`, `.hs-fan-dot, .hs-fan-item-dot`, `.hs-swatch-dot`, `.hs-swatch-choice`, `.hs-date-grid-day`, `.hs-person-mark`, `.hs-picture-compare-knob` |
413
+ | `--r-sm` | `.hs-md code`, `.hs-diff-act`, `.hs-inline-chip`, `.hs-ring-layer-line`, `.hs-ask-data`, `.hs-ask-picture`, `.hs-kbd`, `.hs-chat-action`, `.hs-user-edit`, `.hs-user-bubble`, `.hs-md-missing`, `.hs-panel-favicon`, `.hs-tab-close`, `.hs-site-button`, `.hs-browser-menu-button`, `.hs-path-segment`, `.hs-panel-path`, `.hs-theme-remove`, `.hs-panel-small-button`, `.hs-browser-zoom-reset`, `.hs-icon-button[data-size='sm']`, `.hs-code-copy`, `.hs-docs-prose code`, `.hs-shell .hs-market-rate-star`, `.hs-settings-number-steps button`, `.hs-key-binding`, `.hs-key-record`, `.hs-bar-series-bar`, `.hs-bar-series-fill`, `.hs-tab-card-preview`, `.hs-divider:focus-visible`, `.hs-tinted` |
414
+ | `--r-tile` | `.hs-window`, `.hs-drawer`, `.hs-composer-main`, `.hs-drop-overlay`, `.hs-composer-dock > .hs-ask > .hs-card`, `.hs-tour-card`, `.hs-confirm-box`, `.hs-walk[data-host='dialog'] .hs-walk-card`, `.hs-walk-image`, `.hs-sheet-box`, `.hs-view-modal-plate`, `.hs-modal`, `.hs-selection-dialog`, `.hs-tile-drop`, `.hs-surface` |
415
+ | `--switch-radius` | `.hs-tog` |
416
+ | `--switch-thumb-radius` | `.hs-tog .hs-toggle-thumb` |