@vegastack/design 0.7.24 → 0.7.26

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vegastack/design",
3
- "version": "0.7.24",
3
+ "version": "0.7.26",
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": {
@@ -134,7 +134,7 @@ A component's name undersells it. Before composing something by hand, check this
134
134
  | `PageHeader` | Title, description, `breadcrumb`, a back link (`backHref`) and `actions`. |
135
135
  | `MultiStepForm` · `Stepper` · `Questionnaire` · `Tabs` | A form in steps · progress display (`navigable` on request) · one question at a time · peer regions. |
136
136
  | `NativeSelect` | The platform `<select>`, so a touch device opens its own picker. |
137
- | `Board` | A column's `lockedReason` explains why it cannot take a card; `itemLinkRender` is a template, the card's `href` wins. |
137
+ | `Board` | `height` (`fill` · `auto` · a length), `onAdd` + `addLabel`, `collapsedColumns` + `onCollapsedChange`, `getColumnActions`, `readOnly`, `moveErrorToast`; a column's `lockedReason` explains why it cannot take a card; `itemLinkRender` is a template, the card's `href` wins. |
138
138
  | `AudioPlayer` | `mediaRef` to drive playback, a transcript button and a waveform; `docked` pins it to the bottom of a scroll column, `variant="floating"` is the centred pill, `onOpenChange` adds its close button, `actionsRef` seeks it, and `onSourceExpired` renews an expired signed URL once. `AudioPlayerProvider` + `GlobalAudioPlayer` + `useGlobalPlayer()` keep one recording playing across routes. |
139
139
  | `Tabs` | `TabsList variant="line"` and `Tabs orientation="vertical"`; route tabs draw a `nav` from `tabsListVariants` and `tabsTriggerVariants`, which need no `data-orientation`. `useTabsSwipe` adds a touch swipe between controlled tabs. |
140
140
  | `MessageScroller` | `defaultScrollPosition` (`start` · `end` · `last-anchor`), `scrollToMessage` from `useMessageScroller()`, and `useMessageScrollerVisibility()`. |
@@ -176,7 +176,17 @@ A component's name undersells it. Before composing something by hand, check this
176
176
  lanes with `onMove` and a per-section `loading` / `loadMore` / `emptyState`. Record images are a
177
177
  column `thumbnail` + `thumbnailFallback` (the app mark) — never a hand-rolled card grid, card or
178
178
  `<img>`. A count needing attention is `<Badge variant="warning"><TriangleAlert />n</Badge>`, and
179
- groups in a ⋯ menu are split by `{ type: "separator" }` entries.
179
+ groups in a ⋯ menu are split by `{ type: "separator" }` entries; an action with `items` is a
180
+ submenu ("Change status ›", "Assign ›").
181
+ - **A task or pipeline board** → `DataList view="board"` (or `Board` directly) with `BoardCard`
182
+ content: `boardCard={(row) => ({ title, context, due, priority, assignee, done, onDoneChange,
183
+ source })}` — never a hand-rolled card. The board fills the viewport below the toolbar
184
+ (`boardHeight="fill"`, cards scroll inside lanes, no page scroll); `onAddToSection` adds "+ Add
185
+ {item}" per lane with the lane's status pre-filled; lanes collapse from their header ⋯
186
+ (`collapsedSections` to remember it). `onMove` is optimistic — return a promise and a rejection
187
+ snaps back with a toast, so never re-sort lanes yourself while it is pending. Drag, touch
188
+ long-press, keyboard (Space · arrows · Space · Esc), the Move menu and the phone's one-lane view
189
+ are built in; card actions go in `rowActions`/`getItemActions`, not on the `BoardCard`.
180
190
  - **A task's status or priority** → `StatusIcon` (todo, progress — static unless `animated`,
181
191
  blocked, done, cancelled) and `PriorityIcon` (urgent, high, medium, low, none flags). To change
182
192
  them, use the Status menu / Priority menu recipes on their docs pages — a ghost icon-button
@@ -193,9 +203,11 @@ closest one rather than composing the page from nothing:
193
203
 
194
204
  - **`app-shell-01`** — the shell: landmarks, skip link, a rail with search, inbox count and a user
195
205
  menu.
196
- - **`list-page-01`** — one kind of record: search, a facet, Mine | Team, table or tile grid, Load
197
- more and three empty tiers.
198
- - **`board-01`** — lanes of cards under a `FilterBar`, with a paged backlog.
206
+ - **`list-page-01`** — one kind of record: a `DataList` with a `FilterBar` toolbar (search, facets,
207
+ Mine | Team scope, the list's own Grid | List toggle), grouped by industry, Load more and three
208
+ empty tiers.
209
+ - **`board-01`** — a `DataList` board of `BoardCard`s under a `FilterBar`: a backlog that pages as it
210
+ scrolls, "+ Add task" per lane, a locked lane and a submenu in each card's ⋯.
199
211
  - **`settings-01`** — one settings page: grouped `SettingsRow` sections and a save bar.
200
212
  - **`settings-02`** — the settings hub: grids of linked tiles, grouped by area.
201
213
  - **`review-split-01`** — a record reviewed beside a sticky transcript and a docked player; tabs
@@ -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
- **123 components**, plus 467 animated-icon items, 13 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`, `use-tabs-swipe`), 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 3 data libs (`date-time`, `geo-data`, `drag-item`) — 684 registry items in total.
6
+ **124 components**, plus 467 animated-icon items, 13 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`, `use-tabs-swipe`), 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 3 data libs (`date-time`, `geo-data`, `drag-item`) — 685 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
@@ -79,6 +79,7 @@ starts with `icon-` is a component and never an icon.
79
79
 
80
80
  ## Data
81
81
 
82
+ - **`board-card`** — A work item as a board card — a round completion tick, a two-line title, a muted context line, and a bottom row with the due chip (destructive when overdue, warning when due today), the priority chip, a source icon and the assignee's avatar.
82
83
  - **`data-grid`** — The full-parity grid — TanStack-sorted multi-key sort, column picker with responsive revelation, collapsible grouping, keyboard-continuous load-more, opt-in virtualization, and an APG grid keyboard layer with inline cell editing.
83
84
  - **`data-list`** — A generic, typed data table — configurable columns, row selection, sortable columns (indicator, custom compare and first direction, client or manual), a standard rowActions ⋯ column always last, untinted-link rows (no underline), loading, and Empty-based emptyState and noResults states.
84
85
  - **`data-list-pager`** — A controlled paging footer for DataList — a tabular-numeral range summary, a rows-per-page Select, and a windowed Pagination that hides on a single page.
@@ -134,7 +135,7 @@ starts with `icon-` is a component and never an icon.
134
135
 
135
136
  - **`app-shell`** — The shared dashboard layout — a skip-linked sidebar + header + scrollable main region, composing Sidebar/SidebarTrigger into one reusable, hash-tracked shell.
136
137
  - **`aspect-ratio`** — Constrains its children to a given width-to-height ratio.
137
- - **`board`** — Kanban columns over use-drag-reorder — content/chrome split (host renders card content only), pointer drag, keyboard move mode + roving focus, lossless per-card Move menu with lock reasons, server-refusable moves, named lanes with a muted total count, loading and custom empty lanes, collapsed lanes, cards as real links, Empty-bordered drop targets.
138
+ - **`board`** — Kanban lanes — full-height lanes that scroll their cards inside, sticky headers with a collapse menu, + Add at each lane's foot, Nothing here / Drop here empty zones, per-lane skeletons and load-on-scroll paging; live pointer and touch drag (lift, make room, settle, edge auto-scroll), a keyboard pick-up/move/drop model, a lossless per-card Move menu, optimistic moves with rollback and a toast, and one lane at a time on a phone.
138
139
  - **`direction`** — Base UI's DirectionProvider and useDirection — the text-direction context components read.
139
140
  - **`record-layout`** — A record page's main column beside a sticky right rail of cards, with an ⓘ Details sheet in its place on small screens.
140
141
  - **`resizable`** — Accessible resizable panel groups and layouts with keyboard support — horizontal or vertical, nestable, with an optional visible grip.