@hearthscale/app-ui 0.1.0 → 0.2.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/README.md +21 -2
- package/dist/CLASSES.md +283 -216
- package/dist/TOKENS.md +138 -20
- package/dist/chunks/chunk-SFZCPZQD.js +335 -0
- package/dist/editor.d.ts +32 -0
- package/dist/editor.js +69 -0
- package/dist/index.d.ts +322 -12
- package/dist/index.js +1093 -379
- package/dist/markdown.d.ts +25 -0
- package/dist/markdown.js +365 -0
- package/dist/ui.css +2451 -569
- package/package.json +28 -3
package/dist/CLASSES.md
CHANGED
|
@@ -21,105 +21,114 @@ Model presentation uses `.hs-model-avatar` for publisher artwork,
|
|
|
21
21
|
`.hs-model-capabilities-labeled` for icon-and-label capability chips. The compact
|
|
22
22
|
capability variant retains `.hs-model-capabilities` / `.hs-model-capability`.
|
|
23
23
|
|
|
24
|
-
| Class
|
|
25
|
-
|
|
|
26
|
-
| `hs-shell`
|
|
27
|
-
| `hs-shell-frame`
|
|
28
|
-
| `hs-side`
|
|
29
|
-
| `hs-plugrow`
|
|
30
|
-
| `hs-projrow`
|
|
31
|
-
| `hs-sess`, `hs-sessrow`, `hs-stitle`
|
|
32
|
-
| `hs-session-row`
|
|
33
|
-
| `hs-helper-mark`
|
|
34
|
-
| `hs-project-row`, `hs-app-row`
|
|
35
|
-
| `hs-sidebar-plus`, `hs-sidebar-spacer`
|
|
36
|
-
| `hs-sidebar-rail-mark`
|
|
37
|
-
| `hs-
|
|
38
|
-
| `hs-
|
|
39
|
-
| `hs-
|
|
40
|
-
| `hs-
|
|
41
|
-
| `hs-
|
|
42
|
-
| `hs-picker`, `hs-
|
|
43
|
-
| `hs-picker
|
|
44
|
-
| `hs-picker-
|
|
45
|
-
| `hs-
|
|
46
|
-
| `hs-
|
|
47
|
-
| `hs-
|
|
48
|
-
| `hs-
|
|
49
|
-
| `hs-
|
|
50
|
-
| `hs-
|
|
51
|
-
| `hs-
|
|
52
|
-
| `hs-
|
|
53
|
-
| `hs-
|
|
54
|
-
| `hs-
|
|
55
|
-
| `hs-
|
|
56
|
-
| `hs-
|
|
57
|
-
| `hs-
|
|
58
|
-
| `hs-view-
|
|
59
|
-
| `hs-view-
|
|
60
|
-
| `hs-view-
|
|
61
|
-
| `hs-view-
|
|
62
|
-
| `hs-
|
|
63
|
-
| `hs-
|
|
64
|
-
| `hs-
|
|
65
|
-
| `hs-
|
|
66
|
-
| `hs-
|
|
67
|
-
| `hs-
|
|
68
|
-
| `hs-
|
|
69
|
-
| `hs-
|
|
70
|
-
| `hs-
|
|
71
|
-
| `hs-confirm
|
|
72
|
-
| `hs-
|
|
73
|
-
| `hs-
|
|
74
|
-
| `hs-
|
|
75
|
-
| `hs-
|
|
76
|
-
| `hs-walk
|
|
77
|
-
| `hs-walk-
|
|
78
|
-
| `hs-walk-
|
|
79
|
-
| `hs-
|
|
80
|
-
| `hs-
|
|
81
|
-
| `hs-walk-
|
|
82
|
-
| `hs-walk-
|
|
83
|
-
| `hs-
|
|
84
|
-
| `hs-
|
|
85
|
-
| `hs-
|
|
86
|
-
| `hs-
|
|
87
|
-
| `hs-
|
|
88
|
-
| `hs-
|
|
89
|
-
| `hs-
|
|
90
|
-
| `hs-
|
|
91
|
-
| `hs-
|
|
92
|
-
| `hs-
|
|
93
|
-
| `hs-
|
|
94
|
-
| `hs-
|
|
95
|
-
| `hs-
|
|
96
|
-
| `hs-
|
|
97
|
-
| `hs-
|
|
98
|
-
| `hs-
|
|
99
|
-
| `hs-
|
|
100
|
-
| `hs-
|
|
101
|
-
| `hs-
|
|
24
|
+
| Class | Marks |
|
|
25
|
+
| --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
26
|
+
| `hs-shell` | the theme root carrying the token set |
|
|
27
|
+
| `hs-shell-frame` | a window's frame; its `data-*` carry the desktop frame's states |
|
|
28
|
+
| `hs-side` | the side column: the rail |
|
|
29
|
+
| `hs-plugrow` | one app row in the sidebar |
|
|
30
|
+
| `hs-projrow` | a project row in the sidebar |
|
|
31
|
+
| `hs-sess`, `hs-sessrow`, `hs-stitle` | a session list, one session row, its title |
|
|
32
|
+
| `hs-session-row` | a session or helper row; `data-filed` in a project, `data-child` for a helper, `data-dragged` while carried |
|
|
33
|
+
| `hs-helper-mark` | the helper mark at the end of a helper row |
|
|
34
|
+
| `hs-project-row`, `hs-app-row` | a project row, an app row; `data-over` while a drag hovers it |
|
|
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
|
+
| `hs-sidebar-rail-mark` | an app's mark on its rail plate |
|
|
37
|
+
| `hs-rail-plate-bypass` | the warning mark on the rail plate of an app at Bypass all permissions |
|
|
38
|
+
| `hs-rowact` | the actions that appear on a hovered row |
|
|
39
|
+
| `hs-pinned` | the pin mark on a pinned session row |
|
|
40
|
+
| `hs-spin` | a mark that turns while work runs, on an HTML box |
|
|
41
|
+
| `hs-profile-glyph` | the account mark on the ladder |
|
|
42
|
+
| `hs-model-picker`, `hs-model-trigger`, `hs-model-trigger-name`, `hs-model-trigger-chevron` | the composer's models, one trigger per kind, its name and chevron |
|
|
43
|
+
| `hs-picker`, `hs-picker-search` | the model picker, its search |
|
|
44
|
+
| `hs-picker-list`, `hs-picker-empty` | the models, "No model matches." or why none can run |
|
|
45
|
+
| `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-check` | the place of the mark of the model in use, which every row keeps |
|
|
48
|
+
| `hs-provider-mark` | a provider's place or cloud mark |
|
|
49
|
+
| `hs-rview`, `hs-ptab`, `hs-tabscroll` | a tab's own box, a tab of a strip, the tab strip |
|
|
50
|
+
| `hs-app-surface` | an app's own tab in a row: the shell's chat of a conversation or the enable card; an app's view lays its `hs-sidebar-column` beside its chat in it |
|
|
51
|
+
| `hs-page` | a page of the shell's own in a tab: its navigation, a hairline, and `hs-page-main` |
|
|
52
|
+
| `hs-page-main` | a page's own column: Settings', the documentation's, the Marketplace's or the account's; `data-crowded` while the documentation's column reaches under its Ask press |
|
|
53
|
+
| `hs-window-notice`, `hs-window-notice-text` | a stopped platform's card over the inner window, and its sentence |
|
|
54
|
+
| `hs-window-wrap` | the inner window's box beside the rail |
|
|
55
|
+
| `hs-window-tiles` | the workspace's box, which the requests and notices of the window lie over |
|
|
56
|
+
| `hs-level`, `hs-level-control`, `hs-level-name`, `hs-level-chevron` | the permission level control and its name, which a narrow composer hides; `data-level` names the level in force, `data-open` marks its open menu |
|
|
57
|
+
| `hs-chat-body` | the transcript's box under whatever sits above it |
|
|
58
|
+
| `hs-view-frame`, `hs-view-iframe`, `hs-view-failure` | a hosted view in a view row, or a view surface that fills its tab; its sandboxed frame; `data-mode` is `inline` under its result, `tab` in a tab of its own or for a view surface, `modal` in a modal over its tile, `overlay` over other programs, `popover` at the tray icon; `data-border` is `false` for a view that draws its own edge |
|
|
59
|
+
| `hs-view-modal` | a view in a modal over its tile: the scrim that dims the tile, under the view's clear frame and under the requests that float over the tile |
|
|
60
|
+
| `hs-view-sheet` | the plate a view’s frame sits on |
|
|
61
|
+
| `hs-view-place` | the place of a result’s view under its result; `data-away` while it shows in a tab of its own |
|
|
62
|
+
| `hs-view-bar`, `hs-view-bar-head` | the host's bar of a result's view, under its result and in its modal: the app's mark and name, then the presses that move the view; `data-mode` is `inline` or `modal` |
|
|
63
|
+
| `hs-view-home` | the element a result's view renders into, which moves between its place, its tab and its modal and adds no box |
|
|
64
|
+
| `hs-view-modal-plate` | the plate of a result's view the person moved over the chat, inset from the tile's edges |
|
|
65
|
+
| `hs-ask-float` | a request floating over the inner window, over the soft scrim |
|
|
66
|
+
| `hs-slot-layer`, `hs-slot`, `hs-slot-part` | the layer over a view that fills its tab, `data-animate` while its parts glide to new places; one slot the view reserved, anchored by its insets, `data-kind` its kind (`chat`, `composer`, `cards`, `terminal`, `model`) and `data-slot` its id; the part the shell draws there |
|
|
67
|
+
| `hs-url`, `hs-urlin`, `hs-urlgo`, `hs-urlph` | a browser's address field and its parts |
|
|
68
|
+
| `hs-scroll` | a scroll container with the shell's scrollbar |
|
|
69
|
+
| `hs-menu`, `hs-mitem` | a floating menu surface and one item |
|
|
70
|
+
| `hs-waytile`, `hs-orb` | a colourway tile and one of its orbs; `data-sel` marks the pick |
|
|
71
|
+
| `hs-confirm` | the backdrop of a confirmation dialog, or of a wait with no control, over the shell |
|
|
72
|
+
| `hs-confirm-box` | that dialog; `hs-confirm-title`, `hs-confirm-body` its two lines |
|
|
73
|
+
| `hs-confirm-notes` | the scrolling text under a dialog's body: a release's notes |
|
|
74
|
+
| `hs-confirm-cancel`, `hs-confirm-action` | its two buttons: the way out, and the action it asks for |
|
|
75
|
+
| `hs-sheet-shell` | a small text sheet over the shell |
|
|
76
|
+
| `hs-walk` | a walkthrough; `data-host` is `dialog` (a plate over the shell, on a veil) or `window` (the whole window) |
|
|
77
|
+
| `hs-walk-card`, `hs-walk-close` | its card; the close mark at the card's top right |
|
|
78
|
+
| `hs-walk-image` | the picture band across the top of a card |
|
|
79
|
+
| `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 |
|
|
80
|
+
| `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 |
|
|
81
|
+
| `hs-walk-main` | the region under the picture that holds the words, the rows and the live content; `data-image` under one |
|
|
82
|
+
| `hs-walk-title`, `hs-walk-sub` | a card's title and the line under it |
|
|
83
|
+
| `hs-walk-rows`, `hs-walk-row` | a card's list (`data-layout` is `list`, `open` or `grid`), and one row of it |
|
|
84
|
+
| `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 |
|
|
85
|
+
| `hs-walk-body` | the bordered plate a card's live content sits in |
|
|
86
|
+
| `hs-walk-foot`, `hs-walk-dots`, `hs-walk-dot` | the foot, the page dots, one dot; `data-sel` marks the card shown |
|
|
87
|
+
| `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 |
|
|
88
|
+
| `hs-onboarding-body`, `hs-onboarding-prose` | the live part of a first-run card; a line of words in it |
|
|
89
|
+
| `hs-onboarding-row` | a glass row that starts an act (`data-press`) or says it is done (`data-ticked`) |
|
|
90
|
+
| `hs-onboarding-row-mark`, `hs-onboarding-row-label`, `hs-onboarding-row-done` | the row's mark, its words, and the check and word of a done act |
|
|
91
|
+
| `hs-onboarding-fine`, `hs-onboarding-problem`, `hs-onboarding-retry` | a quiet line under a press; a failure; the press that tries again |
|
|
92
|
+
| `hs-onboarding-link` | a link in a card's words, in the words' own colour |
|
|
93
|
+
| `hs-titlebar` | the title bar of a window that draws its own caption buttons (the Server, the installer) |
|
|
94
|
+
| `hs-caption-glyph` | a caption glyph under the system's own caption button; `data-hovered` while that button is hovered |
|
|
95
|
+
| `hs-caption-rule` | the hairline between the top lane and the system's caption buttons |
|
|
96
|
+
| `hs-submenu-chevron` | the chevron of a menu row that opens a flyout |
|
|
97
|
+
| `hs-browser-step-off` | a browser's Back or Forward with no page to go to |
|
|
98
|
+
| `hs-tip`, `hs-tipwrap` | a tooltip and the element that anchors one |
|
|
99
|
+
| `hs-tog` | a toggle switch |
|
|
100
|
+
| `hs-in`, `hs-ta`, `hs-ph-icon` | a text input, a textarea, a placeholder with a leading icon |
|
|
101
|
+
| `hs-navhead`, `hs-setrow`, `hs-chip` | a settings nav section label, a settings row, a choice chip |
|
|
102
|
+
| `hs-sethead` | a settings detail page's header: its mark, its name and its sub |
|
|
103
|
+
| `hs-grantrow` | one grant in the access list, a `hs-list-row` with its Revoke; an approval surface |
|
|
104
|
+
| `hs-range`, `hs-tile` | a settings slider; a scheme or colourway tile |
|
|
105
|
+
| `hs-flash` | the row a settings search hit landed on |
|
|
106
|
+
| `hs-mask` | a drop-in icon set's mark, drawn as a mask in the text colour |
|
|
102
107
|
|
|
103
108
|
## The frame: rail, tiles and surfaces
|
|
104
109
|
|
|
105
|
-
| Class
|
|
106
|
-
|
|
|
107
|
-
| `hs-rail`
|
|
108
|
-
| `hs-rail-top`, `hs-rail-plate`
|
|
109
|
-
| `hs-
|
|
110
|
-
| `hs-ladder
|
|
111
|
-
| `hs-
|
|
112
|
-
| `hs-workspace
|
|
113
|
-
| `hs-
|
|
114
|
-
| `hs-lane
|
|
115
|
-
| `hs-lane-
|
|
116
|
-
| `hs-lane-
|
|
117
|
-
| `hs-lane-
|
|
118
|
-
| `hs-
|
|
119
|
-
| `hs-
|
|
120
|
-
| `hs-
|
|
121
|
-
| `hs-
|
|
122
|
-
| `hs-
|
|
110
|
+
| Class | Marks |
|
|
111
|
+
| ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
112
|
+
| `hs-rail` | the rail at the window's left edge, with `hs-sidebar-rail`; `data-lifting` while a plate is dragged |
|
|
113
|
+
| `hs-rail-top`, `hs-rail-plate` | the mark's zone at the top, an app's plate; `data-lifted` during a drag, `data-slide` while it moves |
|
|
114
|
+
| `hs-fan`, `hs-fan-item`, `hs-fan-arrow`, `hs-fan-dot`, `hs-fan-item-dot` | buttons folded into the place of the last one (`data-axis` is `row` or `column`; `data-open` while unfolded), one button, the arrow on the side it opens to, the dot while a button waits, the dot on the button that waits |
|
|
115
|
+
| `hs-ladder` | the system ladder, a column `hs-fan` at the rail's foot |
|
|
116
|
+
| `hs-ladder-rung` | one rung, an `hs-fan-item`; `data-solid`, `data-active`, `data-pressed` |
|
|
117
|
+
| `hs-workspace` | the tiles' box; `data-drag` is `row`, `column` or `tab` |
|
|
118
|
+
| `hs-workspace-tile`, `hs-tile-panel` | a tile (`data-tile`), its panel |
|
|
119
|
+
| `hs-lane` | a tile's lane; `data-row` is `top` or `low`, `data-caption` where it ends under the caption buttons |
|
|
120
|
+
| `hs-lane-crumb`, `hs-lane-crumb-app`, `hs-lane-crumb-title` | a lone tab's breadcrumb (`data-fit` is `full`, `cut`, `app` or `mark`), which ends with the tab's `hs-tab-close` under the pointer, its app's name, its title; `data-cut` on words cut at their end |
|
|
121
|
+
| `hs-lane-tabs`, `hs-lane-tab`, `hs-lane-tab-mark` | the strip from the second tab on, with the panel tab classes; a tab (`data-fit` is `full`, `cut` or `mark`; `data-hover`; `data-leaving` while it closes; `data-cut` on its cut `hs-tab-label`), its mark |
|
|
122
|
+
| `hs-lane-tabs-wrap`, `hs-lane-tabs-arrow` | the strip with its arrows; the arrow over an end with more tabs past it, which scrolls the strip there (`data-side` is `start` or `end`) |
|
|
123
|
+
| `hs-lane-fan`, `hs-lane-button` | the tile's controls, a row `hs-fan` at the lane's right end; one control (`data-control`; `data-open` on the menu's while the menu is open) |
|
|
124
|
+
| `hs-lane-plus`, `hs-lane-title-field`, `hs-lane-probe` | the plus after the last tab, shown while the lane is hovered; a title edited in place; the unseen measure of the least of a cut title |
|
|
125
|
+
| `hs-lane-rule` | the hairline between two lanes side by side |
|
|
126
|
+
| `hs-tab-card`, `hs-tab-card-title`, `hs-tab-card-preview` | the hover card under a strip's tab (`data-open`), its title, its picture |
|
|
127
|
+
| `hs-divider` | the invisible divider of a split; `data-axis` is `row` or `column` |
|
|
128
|
+
| `hs-tile-drop` | where a dragged tab would land |
|
|
129
|
+
| `hs-surfaces`, `hs-surface` | the stable layer (`data-drag`), one surface (`data-surface`; `data-state` is `live` or `warm`) |
|
|
130
|
+
| `hs-web-page` | an app's web surface: its page, which fills its surface |
|
|
131
|
+
| `hs-page-failed` | a page of an app that did not load: over it, why, and Try again (`data-covered` while a view covers the page) |
|
|
123
132
|
|
|
124
133
|
## Shell interaction states
|
|
125
134
|
|
|
@@ -133,79 +142,82 @@ capability variant retains `.hs-model-capabilities` / `.hs-model-capability`.
|
|
|
133
142
|
|
|
134
143
|
## Transcript
|
|
135
144
|
|
|
136
|
-
| Class | Marks
|
|
137
|
-
| ------------------------------------------------------------------------------------------------------------- |
|
|
138
|
-
| `hs-transcript`, `hs-transcript-spacer`
|
|
139
|
-
| `hs-turn` | one prompt or one answer, with the actions that show on hover
|
|
140
|
-
| `hs-md`, `hs-md-link`, `hs-md-picture`, `hs-md-missing` | an answer's markdown; a link in it; a picture of the turn it names; a named picture that is not there
|
|
141
|
-
| `hs-abar` | the actions under a prompt or an answer
|
|
142
|
-
| `hs-chat-action`, `hs-chat-time`, `hs-chat-pager` | one of those actions; the moment on hover; the branch pager
|
|
143
|
-
| `hs-copy`, `hs-copy-tip` | the Copy action and the "Copied" tip over it
|
|
144
|
-
| `hs-work-row` | one call; `data-status` is `running`, `waiting`, `completed`, `failed`, `declined`, `stopped`, `skipped` or `unknown`
|
|
145
|
-
| `hs-work-head` | a line with an action beside it, such as Stop; a row's `data-cell` names a program that runs on
|
|
146
|
-
| `hs-work-line`, `hs-work-mark`, `hs-work-label`, `hs-work-time`, `hs-work-chevron` | a row's line, its mark, its words, the time the call took (on hover), its chevron (`data-open`)
|
|
147
|
-
| `hs-work-body` | what an opened call did
|
|
148
|
-
| `hs-work-nested` | the calls made while a call ran, under its line
|
|
149
|
-
| `hs-work-command`, `hs-work-path`, `hs-work-text`, `hs-work-output` | its blocks: the command, the path, the prompt or text, the output
|
|
150
|
-
| `hs-work-decision`, `hs-work-note`, `hs-work-more` | who let it run or refused it (`data-refused`); a quiet line; the raw details' disclosure
|
|
151
|
-
| `hs-work-live` | the row that names the live turn's running call
|
|
152
|
-
| `hs-work-toggle`, `hs-work-sentence` | a finished run of calls as one sentence; `data-failure` marks a run that ended in a failure
|
|
153
|
-
| `hs-work-group` | an opened run; `data-fade` is `top`, `bottom` or `both` where more calls lie beyond its edge
|
|
154
|
-
| `hs-activity`, `hs-activity-list` | thoughts and calls of one turn (`data-active` while live), and its opened list
|
|
155
|
-
| `hs-thought`, `hs-thought-preview`, `hs-reasoning` | one thought, its one-line preview, its text
|
|
156
|
-
| `hs-spawn`, `hs-spawn-members`, `hs-spawn-member` | the helpers a turn handed work to (`data-failure`), their list, one helper
|
|
157
|
-
| `hs-spawn-head`, `hs-spawn-title`, `hs-spawn-agent`, `hs-spawn-preview` | a helper's line, its title, its agent, its latest words
|
|
158
|
-
| `hs-working`, `hs-working-clock` | the live turn's header and its clock
|
|
159
|
-
| `hs-turn-fold` | a settled turn's work behind one line
|
|
160
|
-
| `hs-thread-mark`, `hs-thread-mark-line`, `hs-thread-mark-text` | a line across the transcript with a caption in it
|
|
161
|
-
| `hs-fork-origin`, `hs-tail-mark` | where a fork came from; where the model reads word for word again
|
|
162
|
-
| `hs-
|
|
163
|
-
| `hs-
|
|
164
|
-
| `hs-
|
|
165
|
-
| `hs-
|
|
166
|
-
| `hs-
|
|
167
|
-
| `hs-
|
|
168
|
-
| `hs-
|
|
169
|
-
| `hs-
|
|
170
|
-
| `hs-
|
|
171
|
-
| `hs-audio-
|
|
172
|
-
| `hs-
|
|
173
|
-
| `hs-
|
|
174
|
-
| `hs-user-
|
|
175
|
-
| `hs-user-
|
|
176
|
-
| `hs-
|
|
177
|
-
| `hs-
|
|
178
|
-
| `hs-
|
|
179
|
-
| `hs-
|
|
180
|
-
| `hs-
|
|
181
|
-
| `hs-
|
|
182
|
-
| `hs-composer
|
|
183
|
-
| `hs-
|
|
184
|
-
| `hs-composer-
|
|
185
|
-
| `hs-
|
|
186
|
-
| `hs-
|
|
187
|
-
| `hs-composer-
|
|
188
|
-
| `hs-
|
|
189
|
-
| `hs-shelf-
|
|
190
|
-
| `hs-shelf-
|
|
191
|
-
| `hs-
|
|
192
|
-
| `hs-
|
|
193
|
-
| `hs-ring
|
|
194
|
-
| `hs-
|
|
195
|
-
| `hs-
|
|
196
|
-
| `hs-ask-
|
|
197
|
-
| `hs-ask-
|
|
198
|
-
| `hs-ask-
|
|
199
|
-
| `hs-ask-
|
|
200
|
-
| `hs-ask-
|
|
201
|
-
| `hs-ask-
|
|
202
|
-
| `hs-ask-
|
|
203
|
-
| `hs-
|
|
204
|
-
| `hs-
|
|
205
|
-
| `hs-
|
|
206
|
-
| `hs-
|
|
207
|
-
| `hs-
|
|
208
|
-
| `hs-
|
|
145
|
+
| Class | Marks |
|
|
146
|
+
| ------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
147
|
+
| `hs-transcript`, `hs-transcript-spacer`, `hs-transcript-rows`, `hs-transcript-row` | the column of rows, and the room under it that holds a sent prompt near the top; the list of the rows drawn near the view, as tall as all of them, and one row placed in it |
|
|
148
|
+
| `hs-turn` | one prompt or one answer, with the actions that show on hover |
|
|
149
|
+
| `hs-md`, `hs-md-link`, `hs-md-picture`, `hs-md-missing` | an answer's markdown (`data-streaming` is `tokens` or `blocks` while it arrives); a link in it; a picture of the turn it names; a named picture that is not there |
|
|
150
|
+
| `hs-abar` | the actions under a prompt or an answer |
|
|
151
|
+
| `hs-chat-action`, `hs-chat-time`, `hs-chat-pager` | one of those actions; the moment on hover; the branch pager |
|
|
152
|
+
| `hs-copy`, `hs-copy-tip` | the Copy action and the "Copied" tip over it |
|
|
153
|
+
| `hs-work-row` | one call; `data-status` is `running`, `waiting`, `completed`, `failed`, `declined`, `stopped`, `skipped` or `unknown` |
|
|
154
|
+
| `hs-work-head` | a line with an action beside it, such as Stop; a row's `data-cell` names a program that runs on |
|
|
155
|
+
| `hs-work-line`, `hs-work-mark`, `hs-work-label`, `hs-work-time`, `hs-work-chevron` | a row's line, its mark, its words, the time the call took (on hover), its chevron (`data-open`) |
|
|
156
|
+
| `hs-work-body` | what an opened call did |
|
|
157
|
+
| `hs-work-nested` | the calls made while a call ran, under its line |
|
|
158
|
+
| `hs-work-command`, `hs-work-path`, `hs-work-text`, `hs-work-output` | its blocks: the command, the path, the prompt or text, the output |
|
|
159
|
+
| `hs-work-decision`, `hs-work-note`, `hs-work-more` | who let it run or refused it (`data-refused`); a quiet line; the raw details' disclosure |
|
|
160
|
+
| `hs-work-live` | the row that names the live turn's running call |
|
|
161
|
+
| `hs-work-toggle`, `hs-work-sentence` | a finished run of calls as one sentence; `data-failure` marks a run that ended in a failure |
|
|
162
|
+
| `hs-work-group` | an opened run; `data-fade` is `top`, `bottom` or `both` where more calls lie beyond its edge |
|
|
163
|
+
| `hs-activity`, `hs-activity-list` | thoughts and calls of one turn (`data-active` while live), and its opened list |
|
|
164
|
+
| `hs-thought`, `hs-thought-preview`, `hs-reasoning` | one thought, its one-line preview, its text |
|
|
165
|
+
| `hs-spawn`, `hs-spawn-members`, `hs-spawn-member` | the helpers a turn handed work to (`data-failure`), their list, one helper |
|
|
166
|
+
| `hs-spawn-head`, `hs-spawn-title`, `hs-spawn-agent`, `hs-spawn-preview` | a helper's line, its title, its agent, its latest words |
|
|
167
|
+
| `hs-working`, `hs-working-clock` | the live turn's header and its clock |
|
|
168
|
+
| `hs-turn-fold` | a settled turn's work behind one line |
|
|
169
|
+
| `hs-thread-mark`, `hs-thread-mark-line`, `hs-thread-mark-text` | a line across the transcript with a caption in it |
|
|
170
|
+
| `hs-fork-origin`, `hs-tail-mark` | where a fork came from; where the model reads word for word again |
|
|
171
|
+
| `hs-level-mark` | where the level a conversation's turns run at changes, with the level's mark and name; `data-level` is `manual`, `auto`, `skip` or `bypass` |
|
|
172
|
+
| `hs-compaction`, `hs-compaction-line`, `hs-compaction-body`, `hs-compaction-where` | the separator of compacted messages, its line, the summary, who wrote it |
|
|
173
|
+
| `hs-notice-row`, `hs-notice-text` | something that went wrong or stopped; `data-tone` is `bad` or `warn` |
|
|
174
|
+
| `hs-app-entry` | an app's own entry |
|
|
175
|
+
| `hs-changed`, `hs-changed-head`, `hs-changed-title`, `hs-changed-files` | the files a turn changed, its head, its title, the file chips |
|
|
176
|
+
| `hs-diff-count` | a line count beside a changed file; `data-kind` is `add` or `del` |
|
|
177
|
+
| `hs-view-row` | a result's view in the transcript |
|
|
178
|
+
| `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 |
|
|
179
|
+
| `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 |
|
|
180
|
+
| `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 |
|
|
181
|
+
| `hs-audio-time`, `hs-audio-save` | the player's times and its Save |
|
|
182
|
+
| `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 |
|
|
183
|
+
| `hs-user-bubble`, `hs-user-text`, `hs-user-more` | a prompt, its text (`data-folded`), "Show full message" |
|
|
184
|
+
| `hs-user-tiles`, `hs-user-tile-cell`, `hs-user-tile`, `hs-user-tile-name` | a prompt's pictures, one cell, the tile, the name of one that did not load |
|
|
185
|
+
| `hs-user-caption`, `hs-user-caption-toggle`, `hs-user-caption-text` | what a model read in a picture, its disclosure, its words |
|
|
186
|
+
| `hs-user-file`, `hs-user-file-name` | another file a prompt carried, and its name |
|
|
187
|
+
| `hs-turn-rail`, `hs-turn-rail-mark`, `hs-turn-rail-line`, `hs-turn-preview` | the rail of prompts, one mark, its line (`data-bright` for the turns on screen), the hover preview |
|
|
188
|
+
| `hs-jump-place`, `hs-jump` | where the "Scroll to end" pill sits, and the pill |
|
|
189
|
+
| `hs-chat` | the chat; `data-layout` is `composer` where it draws the composer alone |
|
|
190
|
+
| `hs-compose-position`, `hs-compose-box`, `hs-chat-fade` | the composer's column (`data-empty` on the opening screen), its box, the fade at the top |
|
|
191
|
+
| `hs-composer`, `hs-composer-dock`, `hs-composer-main` | the composer (`data-answering` while a request waits, `data-narrow` in its narrow form), the drawers on its top edge, its glass box |
|
|
192
|
+
| `hs-composer-field`, `hs-composer-editor`, `hs-composer-placeholder` | the editor's box, the editor, its placeholder |
|
|
193
|
+
| `hs-composer-footer`, `hs-composer-fill`, `hs-composer-tool`, `hs-composer-stop`, `hs-composer-send` | the footer, its spacer, a tool such as attach (`data-state` on Dictate is `opening`, `listening` or `transcribing`), Stop, Send |
|
|
194
|
+
| `hs-drawer`, `hs-drawer-dot`, `hs-drawer-fill`, `hs-drawer-text` | a drawer on the composer (`data-tone` is `info` or `menu`), its dot, its spacer, its sentence |
|
|
195
|
+
| `hs-composer-menu`, `hs-composer-menu-list`, `hs-composer-menu-row` | the `/` and `@` menu, its list, one row (`data-active`) |
|
|
196
|
+
| `hs-composer-menu-mark`, `hs-composer-menu-label`, `hs-composer-menu-sub`, `hs-composer-menu-status` | a row's mark, name and description; the searching or none-found words |
|
|
197
|
+
| `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 |
|
|
198
|
+
| `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 |
|
|
199
|
+
| `hs-shelf-file`, `hs-shelf-file-name`, `hs-shelf-file-size` | another file on the shelf, its name, its size |
|
|
200
|
+
| `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 |
|
|
201
|
+
| `hs-shelf-refused` | a file the composer could not attach, or a level change the platform refused, in words |
|
|
202
|
+
| `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 |
|
|
203
|
+
| `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 |
|
|
204
|
+
| `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 |
|
|
205
|
+
| `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" |
|
|
206
|
+
| `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 |
|
|
207
|
+
| `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 |
|
|
208
|
+
| `hs-ask-tools`, `hs-ask-tool`, `hs-ask-tool-name`, `hs-ask-tool-text` | a connector's tools, one tool, its name, its description |
|
|
209
|
+
| `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 |
|
|
210
|
+
| `hs-ask-scroll`, `hs-ask-message`, `hs-ask-form` | a form's words, fields and preview, which scroll as one inside the card; its words, which keep their lines; its fields |
|
|
211
|
+
| `hs-ask-field`, `hs-ask-field-head`, `hs-ask-field-title`, `hs-ask-field-switch` | one field (`data-kind` names its kind, `data-problem` while it holds a value it may not send), its head, its title, the switch of a yes or no |
|
|
212
|
+
| `hs-ask-problem`, `hs-ask-refusal` | why a field cannot be sent; the platform's words when it refused the form |
|
|
213
|
+
| `hs-ask-chips`, `hs-ask-add` | a field's choices, the presses of its suggestions or words; the row that adds a word or a file |
|
|
214
|
+
| `hs-ask-picks`, `hs-ask-pick`, `hs-ask-pick-press`, `hs-ask-picture`, `hs-ask-pick-title`, `hs-ask-pick-mark` | a list of choices with pictures or of resources, one row (`data-sel` while chosen), its press, its picture, its title, the mark of whether it is chosen |
|
|
215
|
+
| `hs-chat-destination` | the project the first message of an opening screen goes into |
|
|
216
|
+
| `hs-drop-overlay`, `hs-drop-pill` | files dragged over the chat, and the words over them |
|
|
217
|
+
| `hs-user-blocks`, `hs-user-queued` | the terminal lines a prompt carried; the words under a message that waits (`data-queued` on its turn) |
|
|
218
|
+
| `hs-shine` | a live label's shine |
|
|
219
|
+
| `hs-unknown-part` | a transcript part no registered view claims |
|
|
220
|
+
| `hs-unknown-part-head`, `hs-unknown-part-context`, `hs-unknown-part-data` | its disclosure line; the text it fed the model; its raw data |
|
|
209
221
|
|
|
210
222
|
| Primitive | Marks |
|
|
211
223
|
| ------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
|
|
@@ -233,19 +245,21 @@ capability variant retains `.hs-model-capabilities` / `.hs-model-capability`.
|
|
|
233
245
|
|
|
234
246
|
## Diff
|
|
235
247
|
|
|
236
|
-
| Class | Marks
|
|
237
|
-
| -------------------------------------------- |
|
|
238
|
-
| `hs-diff` | the diff view, carrying the mono face its rows are set in
|
|
239
|
-
| `hs-diff-bar` | its bar: the counts, collapse-all, and a raw patch's reason
|
|
240
|
-
| `hs-diff-act` | a control on that bar
|
|
241
|
-
| `hs-diff-reason`, `hs-diff-picked` | a raw patch's reason on the bar; the number of lines selected
|
|
242
|
-
| `hs-diff-counts` | the added and deleted counts, each a `hs-diff-count`
|
|
243
|
-
| `hs-diff-chevron`, `hs-diff-status` | a file header's chevron; its state: added, deleted or renamed
|
|
244
|
-
| `hs-diff-file`, `hs-diff-path` | one file's header, sticky over that file's rows; the path on it
|
|
245
|
-
| `hs-diff-row` | one unified row; `data-kind` is `add`, `del` or `ctx`, and `data-sel` marks it selected
|
|
246
|
-
| `hs-diff-no`, `hs-diff-sign`, `hs-diff-text` | a row's two line-number gutters, its marker column, its text
|
|
247
|
-
| `hs-diff-
|
|
248
|
-
| `hs-diff-
|
|
248
|
+
| Class | Marks |
|
|
249
|
+
| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
250
|
+
| `hs-diff` | the diff view, carrying the mono face its rows are set in; `data-wrap` wraps its rows |
|
|
251
|
+
| `hs-diff-bar` | its bar: the counts, collapse-all, and a raw patch's reason |
|
|
252
|
+
| `hs-diff-act` | a control on that bar |
|
|
253
|
+
| `hs-diff-reason`, `hs-diff-picked` | a raw patch's reason on the bar; the number of lines selected |
|
|
254
|
+
| `hs-diff-counts` | the added and deleted counts, each a `hs-diff-count` |
|
|
255
|
+
| `hs-diff-chevron`, `hs-diff-status` | a file header's chevron; its state: added, deleted or renamed |
|
|
256
|
+
| `hs-diff-file`, `hs-diff-path` | one file's header, sticky over that file's rows; the path on it |
|
|
257
|
+
| `hs-diff-row` | one unified row; `data-kind` is `add`, `del` or `ctx`, and `data-sel` marks it selected |
|
|
258
|
+
| `hs-diff-no`, `hs-diff-sign`, `hs-diff-text` | a row's two line-number gutters, its marker column, its text |
|
|
259
|
+
| `hs-diff-split`, `hs-diff-side` | a split row, `data-sel` marking it selected; its old or new half, `data-kind` `add`, `del`, `ctx` or `none` for an empty one, each with one gutter, a marker and a text |
|
|
260
|
+
| `hs-diff-tok` | a coloured token of a row's text, in `--shiki-light` or `--shiki-dark` by the scheme |
|
|
261
|
+
| `hs-diff-gap`, `hs-diff-hunk` | an unmodified run that expands in place; the hunk header beside it |
|
|
262
|
+
| `hs-diff-raw` | a patch the parser did not read, shown as text |
|
|
249
263
|
|
|
250
264
|
## Product components (`packages/ui/src`)
|
|
251
265
|
|
|
@@ -255,34 +269,57 @@ One class per component, named after it: `hs-button`, `hs-card`, `hs-chart`,
|
|
|
255
269
|
`hs-mono`, `hs-notice`, `hs-page-title`,
|
|
256
270
|
`hs-terminal`, `hs-text-field`.
|
|
257
271
|
|
|
258
|
-
| Class
|
|
259
|
-
|
|
|
260
|
-
| `hs-button`
|
|
261
|
-
| `hs-icon-button`
|
|
262
|
-
| `hs-card`
|
|
263
|
-
| `hs-label`
|
|
264
|
-
| `hs-lockup-box`, `hs-lockup-mark`, `hs-lockup-word`
|
|
265
|
-
| `hs-model-avatar-initial`
|
|
266
|
-
| `hs-mono`
|
|
267
|
-
| `hs-page-title`, `hs-page-lead`
|
|
268
|
-
| `hs-fact-row`, `hs-fact-label`, `hs-fact-value`
|
|
269
|
-
| `hs-link-row`, `hs-link-row-chevron`
|
|
270
|
-
| `hs-list-row`, `hs-list-row-actions`
|
|
271
|
-
| `hs-grant-groups`, `hs-grant-group-head`, `hs-grant-group-name`, `hs-grant-group-summary`, `hs-grant-group-chevron`
|
|
272
|
-
| `hs-grant-group-bypass`
|
|
273
|
-
| `hs-segmented`, `hs-segmented-option`
|
|
274
|
-
| `hs-market-install-note`
|
|
275
|
-
| `hs-
|
|
276
|
-
| `hs-
|
|
277
|
-
| `hs-
|
|
278
|
-
| `hs-
|
|
279
|
-
| `hs-
|
|
280
|
-
| `hs-
|
|
281
|
-
| `hs-
|
|
282
|
-
| `hs-
|
|
283
|
-
| `hs-
|
|
284
|
-
| `hs-
|
|
285
|
-
| `hs-
|
|
272
|
+
| Class | Marks |
|
|
273
|
+
| ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
274
|
+
| `hs-button` | a text button; `data-variant` is `primary`, `secondary`, `ghost` or `danger`, `data-size` is `sm`, `md` or `lg`, `data-full` stretches it |
|
|
275
|
+
| `hs-icon-button` | a mark-only button; `data-size` is `sm`, `md` or `lg` |
|
|
276
|
+
| `hs-card` | a grouped surface; `data-variant` is `solid`, `glass` or `gate` (opaque), `data-tone` `warn` or `info` for one that asks |
|
|
277
|
+
| `hs-label` | a caption in the interface font |
|
|
278
|
+
| `hs-lockup-box`, `hs-lockup-mark`, `hs-lockup-word` | the lockup's 38px box, the mark on its floor, the wordmark beside it |
|
|
279
|
+
| `hs-model-avatar-initial` | a publisher's first letter where it has no picture |
|
|
280
|
+
| `hs-mono` | machine text inside a sentence or a row |
|
|
281
|
+
| `hs-page-title`, `hs-page-lead` | a page's heading (`data-hero` centres and enlarges it) and the line under it |
|
|
282
|
+
| `hs-fact-row`, `hs-fact-label`, `hs-fact-value` | a row of an information table, its label and its wrapping value |
|
|
283
|
+
| `hs-link-row`, `hs-link-row-chevron` | a row that opens its own page, and its chevron |
|
|
284
|
+
| `hs-list-row`, `hs-list-row-actions` | a row of a managed list, and the actions at its end |
|
|
285
|
+
| `hs-grant-groups`, `hs-grant-group-head`, `hs-grant-group-name`, `hs-grant-group-summary`, `hs-grant-group-chevron` | the access list, one card per app: its folding head, the app's name, the summary of what it holds, the chevron |
|
|
286
|
+
| `hs-grant-group-bypass` | the warning mark on the head of an app at Bypass all permissions |
|
|
287
|
+
| `hs-segmented`, `hs-segmented-option` | a choice of a few options, all in sight, and one option; `aria-checked` marks the chosen one |
|
|
288
|
+
| `hs-market-install-note` | why an install cannot start, or why it failed; `data-tone` is `warn` or `bad` |
|
|
289
|
+
| `hs-market-rate`, `hs-market-rate-star` | the site's rating control, and one of its five stars; `data-lit` on the stars up to the one the reader gave |
|
|
290
|
+
| `hs-market-rate-in`, `hs-market-rate-failed` | the press that sends a reader who is not signed in to sign in; the words where a rating cannot be read or saved |
|
|
291
|
+
| `hs-row-mark` | the mark before a row's label |
|
|
292
|
+
| `hs-nav-rail-press` | a press of the collapsed settings nav, a mark whose name floats beside it; `data-sel` on the page on screen |
|
|
293
|
+
| `hs-overlay-scroll`, `hs-overlay-thumb` | a scroller whose bar lies over the right end of its rows (`OverlayScroll`), and that bar; `data-shown` is `false` while the rows fit, `data-drag` is `true` while it is dragged |
|
|
294
|
+
| `hs-glyph-side-wide`, `hs-glyph-side-narrow` | with `hs-icon`, Hearthscale's own marks of a sidebar open wide and folded narrow, in the text colour |
|
|
295
|
+
| `hs-fact-lines` | a fact whose value is a list, one line per item |
|
|
296
|
+
| `hs-app-review` | the facts an update added, listed on an app's settings page |
|
|
297
|
+
| `hs-archive-facts` | an archived conversation's date and its number of entries |
|
|
298
|
+
| `hs-link` | a link that runs a handler instead of carrying an address |
|
|
299
|
+
| `hs-code-head`, `hs-code-language`, `hs-code-reason` | a code block's header bar, its language and the reason the code is shown as text |
|
|
300
|
+
| `hs-code-copy`, `hs-code-pre` | a code block's copy control and its text |
|
|
301
|
+
| `hs-modal-head`, `hs-modal-title` | a dialog's header and its title |
|
|
302
|
+
| `hs-report-body` | a dialog of what is sent: usage events as they leave, and performance reports in words with the text that is sent behind a press |
|
|
303
|
+
| `hs-report-exact` | the press of a report that shows the text that is sent, and that text |
|
|
304
|
+
| `hs-field-label`, `hs-field-input`, `hs-field-note`, `hs-field-hint` | a text field's label, input, the note beside the label, the line under the input |
|
|
305
|
+
| `hs-overlay-note`, `hs-overlay-note-title`, `hs-overlay-note-text` | an app's note over the person's other programs (`OverlayNote`), its title and its text |
|
|
306
|
+
| `hs-overlay-page` | with `hs-shell`, the theme root of the window an app's note shows in, which shows the programs behind it |
|
|
307
|
+
| `hs-view-window-page` | on the `html` of the page of the window an app's view shows in: a clear page with no margin |
|
|
308
|
+
| `hs-view-window` | with `hs-shell`, the theme root of the window an app's view shows in, over other programs or at the tray icon, which shows the programs behind it |
|
|
309
|
+
| `data-swatch` | on any element, a colour of the category palette by name (`rose` to `slate`): it sets `--swatch`, `--swatch-tint` and `--swatch-ink` for the element and what it holds |
|
|
310
|
+
| `hs-tinted` | an item of a category colour (`data-swatch`): its soft fill with its text in the colour's ink; `data-selected` fills it with the colour |
|
|
311
|
+
| `hs-swatch-dot` | the colour of an item in a row of text |
|
|
312
|
+
| `hs-swatch-picker`, `hs-swatch-choice` | the choice of a category colour (`SwatchPicker`), and one colour in it; `aria-checked` marks the chosen one |
|
|
313
|
+
| `hs-slider`, `hs-slider-value` | a slider's row (`Slider`): its `hs-range` track, and the value in words after it |
|
|
314
|
+
| `hs-popover` | a small panel beside the element it opens from (`Popover`) |
|
|
315
|
+
| `hs-toast-place`, `hs-toast`, `hs-toast-text` | where a toast shows: at the bottom of the window, or above an element with `data-above`; the toast (`Toast`) and its words |
|
|
316
|
+
| `hs-picker-field` | with `hs-input`, the field of a date or a time picker; `data-empty` while nothing is chosen |
|
|
317
|
+
| `hs-date-grid`, `hs-date-grid-head`, `hs-date-grid-month` | a month of days to choose from (`DateGrid`), its head and the month's name |
|
|
318
|
+
| `hs-date-grid-days`, `hs-date-grid-row`, `hs-date-grid-weekday`, `hs-date-grid-day` | the days' grid, one week, a weekday's name and one day; `data-today`, `data-outside` (of the month) and `aria-selected` on the day |
|
|
319
|
+
| `hs-person-mark` | a person's picture or initials (`PersonMark`); `data-size` is `sm`, `md` or `lg` |
|
|
320
|
+
| `hs-virtual-list`, `hs-virtual-list-rows`, `hs-virtual-list-row` | a list that draws only the rows in sight (`VirtualList`), the box of all its rows, and one row |
|
|
321
|
+
| `hs-picture-compare`, `hs-picture-compare-after`, `hs-picture-compare-handle`, `hs-picture-compare-knob`, `hs-picture-compare-name` | two pictures split by a line (`PictureCompare`): the second picture, the line's handle and its knob, and a picture's name (`data-side`) |
|
|
322
|
+
| `hs-rich-text` | with `hs-md`, the page of the rich text editor (`RichTextEditor`); `[data-model]` marks words a model wrote |
|
|
286
323
|
|
|
287
324
|
## Server dashboard and installer
|
|
288
325
|
|
|
@@ -308,6 +345,29 @@ and add these:
|
|
|
308
345
|
| `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 |
|
|
309
346
|
| `hs-installer-picks`, `hs-installer-pick`, `hs-installer-tick` | the receipt's rows, one row (`data-ticked`, `data-fixed`), its tick box |
|
|
310
347
|
|
|
348
|
+
## The usage dashboard
|
|
349
|
+
|
|
350
|
+
The pages the api draws at `admin.` (`DashboardFrame`, `Bento`, `BentoTile`,
|
|
351
|
+
`Figures`, `BarSeries`, `DataTable`, `WorldMap`):
|
|
352
|
+
|
|
353
|
+
| Class | Marks |
|
|
354
|
+
| --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
355
|
+
| `hs-dashboard` | a dashboard page on the shell's colour field, with the frame's grain over it |
|
|
356
|
+
| `hs-dashboard-bar`, `hs-dashboard-plate` | the bar at the top of the window, and its floating glass plate |
|
|
357
|
+
| `hs-dashboard-brand` | the lockup at the start of the bar |
|
|
358
|
+
| `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 |
|
|
359
|
+
| `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 |
|
|
360
|
+
| `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 |
|
|
361
|
+
| `hs-bento` | the grid of tiles: twelve columns on a wide screen, one on a narrow one |
|
|
362
|
+
| `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 |
|
|
363
|
+
| `hs-bento-title`, `hs-bento-body`, `hs-bento-aside` | a tile's name, what it holds, and the narrower part beside that, which scrolls |
|
|
364
|
+
| `hs-figures`, `hs-figure`, `hs-figure-value`, `hs-figure-label` | headline numbers: their row of glass tiles, one tile, its number, the name of what it counts; inside a tile, the figures lie on it one under the other |
|
|
365
|
+
| `hs-bar-series`, `hs-bar-series-top`, `hs-bar-series-plot`, `hs-bar-series-bar`, `hs-bar-series-fill`, `hs-bar-series-axis` | counts over time: the chart, its largest count, the bars, one period's bar and its gold fill, the first and last periods |
|
|
366
|
+
| `hs-data-table`, `hs-data-table-empty` | a table of figures flush with its tile, `data-numeric` on the cells of a column of figures; the words in place of no rows |
|
|
367
|
+
| `hs-world-map`, `hs-world-map-plot`, `hs-world-map-country` | a map of counts by country, its picture, one country (`data-counted` where it has a count, its strength in `--share`) |
|
|
368
|
+
| `hs-world-map-hi`, `hs-world-map-lo` | the stops of the gold a counted country is filled with |
|
|
369
|
+
| `hs-world-map-scale`, `hs-world-map-ramp` | the scale under the map: the smallest and largest counts, and the gold between them |
|
|
370
|
+
|
|
311
371
|
## Rules
|
|
312
372
|
|
|
313
373
|
- A theme overrides token values and selects on these names; it never
|
|
@@ -340,6 +400,7 @@ named shell presentation hooks. They follow these component families:
|
|
|
340
400
|
| Marketplace | `hs-market*` |
|
|
341
401
|
| Models | `hs-model-*`, `hs-picker-*` |
|
|
342
402
|
| Server dashboard | `hs-server-*` |
|
|
403
|
+
| Usage dashboard | `hs-dashboard-*`, `hs-bento-*`, `hs-figure*`, `hs-bar-series-*`, `hs-data-table*`, `hs-world-map-*` |
|
|
343
404
|
| Forms | `hs-select*`, `hs-toggle-*`, `hs-code-*` (a code block, and the one-time code's slots) |
|
|
344
405
|
| Overlays | `hs-menu-*`, `hs-submenu-*`, `hs-confirm-*`, `hs-sheet-*`, `hs-tooltip*` |
|
|
345
406
|
|
|
@@ -351,7 +412,8 @@ value beside a slider, `hs-size-step` a step of a size stepper,
|
|
|
351
412
|
`hs-push-end` an element pushed to the end of its row.
|
|
352
413
|
Prefer these hooks to selectors coupled to child order or inline styles.
|
|
353
414
|
|
|
354
|
-
Hooks outside the families: `hs-main-view` is an app's own surface in a tile,
|
|
415
|
+
Hooks outside the families: `hs-main-view` is an app's own surface in a tile,
|
|
416
|
+
`data-covered` while its view covers the tab's parts, and
|
|
355
417
|
`hs-empty-view` with `hs-empty-view-title` a place with nothing in it yet
|
|
356
418
|
(`EmptyState`), such as the view of a window with no app; `hs-view` the root
|
|
357
419
|
of a packaged view's document, beside `hs-shell`;
|
|
@@ -394,7 +456,10 @@ Settings grouping: `hs-settings-card` (`SettingsCard`) owns the outer border;
|
|
|
394
456
|
`hs-settings-card-header` aligns collapsible group labels with row content.
|
|
395
457
|
`--content-width` sets the shared composer/settings column width.
|
|
396
458
|
`hs-settings-management` is the separate, right-aligned management footer.
|
|
397
|
-
`hs-menu-position` owns popup placement
|
|
459
|
+
`hs-menu-position` owns popup placement. While a menu that closes when the
|
|
460
|
+
pointer leaves it is open, its popup root (`hs-shell` or `hs-modal`) carries
|
|
461
|
+
`data-hover-popup="true"`, and no `iframe` or `webview` inside takes the
|
|
462
|
+
pointer.
|
|
398
463
|
`hs-modal` is a positioned popup root with visible overflow; scrolling belongs
|
|
399
464
|
to its content so menus and help tips stay above the dialog without clipping.
|
|
400
465
|
|
|
@@ -444,10 +509,11 @@ the controls below a 470px card width without changing other settings layouts.
|
|
|
444
509
|
- `.hs-settings-plate` — the 52px plate beside an app's name on its settings page.
|
|
445
510
|
- `.hs-connector-unattached` — the words on a connector's row while no app has it attached.
|
|
446
511
|
- `.hs-skill-text` — a skill's own text on its settings page.
|
|
447
|
-
- `.hs-key-control` — a
|
|
448
|
-
the press that holds its
|
|
449
|
-
|
|
450
|
-
mark; `.hs-key-clash` is the line that names a key another
|
|
512
|
+
- `.hs-key-control` — a `KeyRecorder`'s controls, on the Keybindings page and an app's
|
|
513
|
+
hotkeys: `.hs-key-binding`, the press that holds its keys and starts the recorder
|
|
514
|
+
(`data-set` is `false` for keys not set), `.hs-key-record`, the recorder, and
|
|
515
|
+
`.hs-key-remove`, the remove mark; `.hs-key-clash` is the line that names a key another
|
|
516
|
+
shortcut holds.
|
|
451
517
|
- `.hs-provider-title` — a provider's name behind its mark; `.hs-provider-offer` and
|
|
452
518
|
`.hs-provider-offer-name`, a computer on the account the Providers page offers to add,
|
|
453
519
|
and its name.
|
|
@@ -492,6 +558,7 @@ Removed or renamed classes, with what replaces them:
|
|
|
492
558
|
| `hs-filechip` | `hs-shelf-file`, `hs-shelf-chip`, `hs-inline-chip` |
|
|
493
559
|
| `hs-live`, `hs-shimmer`, `hs-shimmer-hi` | `hs-shine` |
|
|
494
560
|
| `hs-model-label` | `hs-model-trigger-name` |
|
|
561
|
+
| `hs-app-state` | `StatusWord` |
|
|
495
562
|
| `hs-provider-field` | `hs-input` |
|
|
496
563
|
| `hs-colourway-name-input` | `hs-input` |
|
|
497
564
|
| `data-soon` on `hs-toggle-row` | nothing |
|