@vegastack/design 0.7.6 → 0.7.8
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/bin/doctor.mjs
CHANGED
|
@@ -130,8 +130,9 @@ function readJson(path) {
|
|
|
130
130
|
// fresh consumer before anything else is installed correctly.
|
|
131
131
|
const GUIDE = "https://design.vegastack.com/docs/guides/migrating-shadcn-reset";
|
|
132
132
|
const HEADING_HINT = {
|
|
133
|
-
"text-h1":
|
|
134
|
-
|
|
133
|
+
"text-h1":
|
|
134
|
+
"PageHeader (font-heading text-2xl font-semibold, the page heading)",
|
|
135
|
+
"text-h2": "font-heading text-base font-medium (section heading)",
|
|
135
136
|
"text-h3": "text-lg font-semibold",
|
|
136
137
|
"text-h4": "text-base font-medium (card / dialog title)",
|
|
137
138
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vegastack/design",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.8",
|
|
4
4
|
"description": "VegaStack design system — cn utility, icon runtime, Tailwind v4 preset, and the vegastack-design CLI (tokens ship separately as @vegastack/design-tokens)",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -68,8 +68,8 @@ link` (upstream's set, verbatim). `destructive` is a soft tint, not a solid red
|
|
|
68
68
|
suggestions or multi-select chips.
|
|
69
69
|
- **One view-switch rule.** A form value is a **`radio-group`**. An immediate view or scope switch
|
|
70
70
|
over the same content (Mine | Team, All | Unread, Grid | List) is a single-select
|
|
71
|
-
**`toggle-group`** that always keeps one item pressed —
|
|
72
|
-
`
|
|
71
|
+
**`toggle-group`** that always keeps one item pressed — `deselectable={false}` — with
|
|
72
|
+
`spacing={0}` for 2–5 options inline (`wrap` when they can outgrow the row). Swapping in-page regions is
|
|
73
73
|
**`tabs`**; moving between URLs is navigation — links, not `tabs` (a route-tabs recipe is
|
|
74
74
|
not shipped yet).
|
|
75
75
|
- **Empty is tiered** — nothing yet, no matches ("Clear filters"), couldn't load (`role="alert"`,
|
|
@@ -95,33 +95,37 @@ info`, each an ink on the `card` surface with a required icon; **`announcement-b
|
|
|
95
95
|
|
|
96
96
|
A component's name undersells it. Before composing something by hand, check this list:
|
|
97
97
|
|
|
98
|
-
| Component | What it already does
|
|
99
|
-
| ------------------------------------------------------ |
|
|
100
|
-
| `Command` | Renders inline as well as in `CommandDialog`. An item's check mark is `data-checked` — visual only, so it is not a form value.
|
|
101
|
-
| `Combobox` | `multiple` with `ComboboxChips`; `filter={null}` hands filtering to your server.
|
|
102
|
-
| `SearchableSelect` | The Select-shaped search picker, with `clearable`.
|
|
103
|
-
| `Item` | A link tile with `render={<a />}`; `ItemGroup` gives a set of items list semantics.
|
|
104
|
-
| `DialogContent`
|
|
105
|
-
| `DataList` | Per-column `mobile` (`merge` · `visible` · `hidden`) and `
|
|
106
|
-
| `
|
|
107
|
-
| `
|
|
108
|
-
| `
|
|
109
|
-
| `
|
|
110
|
-
| `
|
|
111
|
-
| `
|
|
112
|
-
| `
|
|
113
|
-
| `
|
|
114
|
-
| `
|
|
115
|
-
| `
|
|
116
|
-
| `
|
|
117
|
-
| `
|
|
118
|
-
| `
|
|
119
|
-
| `
|
|
120
|
-
| `
|
|
98
|
+
| Component | What it already does |
|
|
99
|
+
| ------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
100
|
+
| `Command` | Renders inline as well as in `CommandDialog`. An item's check mark is `data-checked` — visual only, so it is not a form value. |
|
|
101
|
+
| `Combobox` | `multiple` with `ComboboxChips`; `filter={null}` hands filtering to your server. |
|
|
102
|
+
| `SearchableSelect` | The Select-shaped search picker, with `clearable`. `multiple` for several values; `remote` plus `useAsyncSearch` hands search and paging to your server. |
|
|
103
|
+
| `Item` | A link tile with `render={<a />}`; `ItemGroup` gives a set of items list semantics. |
|
|
104
|
+
| `DialogContent` · `SheetContent` | `size`: `sm · default · lg · xl` (a side sheet). Never a width class. |
|
|
105
|
+
| `DataList` | Per-column `mobile` (`merge` · `visible` · `hidden`), `minWidth`, and `mergedRender` so a merged value keeps its context (`4 to review`), `mergedLayout="line"` for one compact meta line. `DataGrid` adds editing, multi-key sort and a column picker; `Table` is static markup. |
|
|
106
|
+
| `DataList` paging and rows | `loadMore` for keyset paging, `getRowHref` for rows that are links, `rowProps` for `data-*` and a `highlighted` new row, `sections` + `getRowSection` for collapsible groups, and `rowActionsColumn` for a per-row menu. |
|
|
107
|
+
| `LoadMore` · `useAsyncSearch` | The Load more footer of a keyset list (keeps its width while loading, "Try again", an end caption) · the server-search engine: debounce, dropped stale responses, cursor paging. |
|
|
108
|
+
| `SortableList` | `layout="grid"` reorders tiles as well as rows. |
|
|
109
|
+
| `FilterBar` / `FilterBuilder` | `FilterBar` is a flat chip row with search, and `FilterBarFacet` is a "Status: Open" facet on `SearchableSelect` (single or `multiple`, local or `remote`); `FilterBuilder` (the `filter-bar-managed` item) edits a nested and/or tree over your field vocabulary. All controlled. |
|
|
110
|
+
| `Stat` | `StatDelta` for change, `StatEmpty` for nothing to report. |
|
|
111
|
+
| `PropertyList` · `DataList` · `SettingsRow` | A record's facts · many records · one setting with its control. |
|
|
112
|
+
| `ActionBar` | The docked bar for bulk selection ("5 selected"), unsaved changes and batch progress. |
|
|
113
|
+
| `TruncatedText` · `IconText` · `TableCellText` | Overflow detection, hover and keyboard reveal, and tap-to-toggle on touch. |
|
|
114
|
+
| `RelativeTime` | `mode="ago"` ("3 minutes ago") or `mode="day"` ("Yesterday"). |
|
|
115
|
+
| `EditableCell` · `AutoSaveInput` · `useInlineEdit` | Click-to-edit in a table (`wrap` + `flush` for a page title) · a field that saves as you type, with its status · the hook `EditableCell` is built on. |
|
|
116
|
+
| `AttachmentGroup` · `Dropzone` · `useFileDrop` | A file list with per-file state · a drop target · the drop and paste engine. |
|
|
117
|
+
| `PageHeader` | Title, description, `breadcrumb`, a back link (`backHref`) and `actions`. |
|
|
118
|
+
| `MultiStepForm` · `Stepper` · `Questionnaire` · `Tabs` | A form in steps · progress display (`navigable` on request) · one question at a time · peer regions. |
|
|
119
|
+
| `NativeSelect` | The platform `<select>`, so a touch device opens its own picker. |
|
|
120
|
+
| `Board` | A column's `lockedReason` explains why it cannot take a card; `itemLinkRender` is a template, the card's `href` wins. |
|
|
121
|
+
| `AudioPlayer` | `mediaRef` to drive playback, a transcript button and a waveform; `docked` pins it to the bottom of a scroll column, `onOpenChange` adds its close button, `actionsRef` seeks it, and `onSourceExpired` renews an expired signed URL once. |
|
|
122
|
+
| `Tabs` | `TabsList variant="line"` and `Tabs orientation="vertical"`; route tabs draw a `nav` from `tabsListVariants`, which scrolls with no `data-orientation`. |
|
|
123
|
+
| `MessageScroller` | `defaultScrollPosition` (`start` · `end` · `last-anchor`), `scrollToMessage` from `useMessageScroller()`, and `useMessageScrollerVisibility()`. |
|
|
121
124
|
|
|
122
125
|
### Which component for X
|
|
123
126
|
|
|
124
|
-
- **A page** → `AppShell` › `AppShellContent` › `
|
|
127
|
+
- **A page** → `AppShell` › `AppShellContent` › `AppShellPage` (`size`: `narrow` for forms and
|
|
128
|
+
settings, `default`, `full`) › `PageHeader` › `FilterBar` › `DataList` (or
|
|
125
129
|
`DataGrid`) › the `Empty` tier that fits. The spacing between them is the page-rhythm recipe
|
|
126
130
|
(<https://design.vegastack.com/docs/foundations/spacing#page-rhythm>).
|
|
127
131
|
- **A record's details** → `PropertyList`, in `Card` sections titled with an `h2` in `CardTitle`.
|
|
@@ -132,6 +136,30 @@ A component's name undersells it. Before composing something by hand, check this
|
|
|
132
136
|
- **A confirmation that interrupts** → `AlertDialog`; a form or detail in an overlay → `Dialog` or
|
|
133
137
|
`Sheet`.
|
|
134
138
|
- **Feedback after an action** → `toast.add({ title })`.
|
|
139
|
+
- **A recording's text beside its player** → `Transcript` (follows `currentTime`, seeks through
|
|
140
|
+
`onSeek`, searches) with a `docked` `AudioPlayer` at the bottom of the column.
|
|
141
|
+
- **A list that pages by cursor** → `DataList` `loadMore` (or `LoadMore` under your own list), with
|
|
142
|
+
`useAsyncSearch` when the search runs on the server.
|
|
143
|
+
|
|
144
|
+
### Starter blocks
|
|
145
|
+
|
|
146
|
+
A block is a page you copy once and then own (`shadcn add @vegastack/<name>`). Start from the
|
|
147
|
+
closest one rather than composing the page from nothing:
|
|
148
|
+
|
|
149
|
+
- **`app-shell-01`** — the shell: landmarks, skip link, a rail with search, inbox count and a user
|
|
150
|
+
menu.
|
|
151
|
+
- **`list-page-01`** — one kind of record: search, a facet, Mine | Team, table or tile grid, Load
|
|
152
|
+
more and three empty tiers.
|
|
153
|
+
- **`board-01`** — lanes of cards under a `FilterBar`, with a paged backlog.
|
|
154
|
+
- **`settings-01`** — one settings page: grouped `SettingsRow` sections and a save bar.
|
|
155
|
+
- **`settings-02`** — the settings hub: grids of linked tiles, grouped by area.
|
|
156
|
+
- **`review-split-01`** — a record reviewed beside a sticky transcript and a docked player; tabs
|
|
157
|
+
when narrow.
|
|
158
|
+
- **`notifications-01`** — the inbox sheet: All | Unread, Today and Earlier, Load older.
|
|
159
|
+
- **`command-search-01`** — the ⌘K search palette: scopes, recents, grouped results and every
|
|
160
|
+
state.
|
|
161
|
+
- **`status-pages-01`** — the 404, 403 and error pages.
|
|
162
|
+
- **`login-01`** — a sign-in page.
|
|
135
163
|
|
|
136
164
|
## Tokens
|
|
137
165
|
|
|
@@ -186,7 +214,8 @@ import { cn, proseClassName } from "@vegastack/design";
|
|
|
186
214
|
`MarkdownView` and `TextEdit` both wear it, so they render identical typography. It is expressed as
|
|
187
215
|
descendant rules (`[&_h1]:…`), which means an element-level class on a child **loses** to it
|
|
188
216
|
(specificity (0,1,0) against (0,1,1)) — restyle by composing `prose` (the per-element record), never
|
|
189
|
-
by setting a class on the rendered element.
|
|
217
|
+
by setting a class on the rendered element. Under the page's own headings, `MarkdownView headingOffset={n}` moves every
|
|
218
|
+
heading down `n` levels (capped at h6) so the outline never skips back up.
|
|
190
219
|
|
|
191
220
|
`muted`, `accent` and `secondary` share one value in this base, and all three are kept: name the one
|
|
192
221
|
whose ROLE you mean, so a consumer can retune one without moving the others.
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<!-- GENERATED — do not hand-edit. Regenerated from the design system's component contract,
|
|
4
4
|
which is the authority for membership and counts. -->
|
|
5
5
|
|
|
6
|
-
**114 components**, plus 467 animated-icon items, 12 hooks (`use-animation-replay`, `use-announcer`, `use-async-search`, `use-drag-reorder`, `use-file-drop`, `use-inline-edit`, `use-list-nav`, `use-media-query`, `use-mobile`, `use-modal-inert`, `use-overflow`, `use-platform`),
|
|
6
|
+
**114 components**, plus 467 animated-icon items, 12 hooks (`use-animation-replay`, `use-announcer`, `use-async-search`, `use-drag-reorder`, `use-file-drop`, `use-inline-edit`, `use-list-nav`, `use-media-query`, `use-mobile`, `use-modal-inert`, `use-overflow`, `use-platform`), 10 starter blocks (`app-shell-01`, `board-01`, `command-search-01`, `list-page-01`, `login-01`, `notifications-01`, `review-split-01`, `settings-01`, `settings-02`, `status-pages-01`), 68 chart blocks across 7 families, and 2 data libs (`geo-data`, `drag-item`) — 673 registry items in total.
|
|
7
7
|
|
|
8
8
|
Install any of them with `shadcn add @vegastack/<name>`. Animated icons install as
|
|
9
9
|
`@vegastack/icon-<name>`; the bare name is reserved for components, so a component whose name
|