@vegastack/design 0.7.19 → 0.7.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vegastack/design",
-  "version": "0.7.19",
+  "version": "0.7.20",
   "description": "VegaStack design system — cn utility, icon runtime, Tailwind v4 preset, and the vegastack-design CLI (tokens ship separately as @vegastack/design-tokens)",
   "license": "MIT",
   "repository": {

package/skills/vegastack-design-system/SKILL.md

@@ -85,10 +85,10 @@ link` (upstream's set, verbatim). `destructive` is a soft tint, not a solid red
   filters" wired to the FilterBar's `onClear`) — never hand-roll empty markup.
 - **List toolbars are one recipe** — `FilterBar`: search (~320px) left; right, the Filters (n)
   toggle, then views as `Tabs` (default variant, `TabsList size="sm"`, optional leading icons), then
-  the layout switch as an icon `ToggleGroup`, furthest right. Filters are `FilterBarFacet` /
+  the layout switch (`ViewToggle`), furthest right. Filters are `FilterBarFacet` /
   `DateRangeFilter` chips (compact, rounded-md, tinted when set) on the toggled row; people facets
-  take `itemToSecondaryLabel={(p) => p.email}`. Use Tabs for scope/views, an icon ToggleGroup for
-  List/Board. Tables are `DataList` with `sortable` columns (`compare`, `sortFirst`,
+  take `itemToSecondaryLabel={(p) => p.email}`. Use Tabs for scope/views, `ViewToggle` for
+  Grid | List | Board. Tables are `DataList` with `sortable` columns (`compare`, `sortFirst`,
   `sortMode="client"`) and `rowActions` (the ⋯ column, always last); row links are never underlined.
 - **`alert`** for an in-content notice — `variant` is `default · destructive · success · warning ·
 info`, each an ink on the `card` surface with a required icon; **`announcement-banner`** only for
@@ -169,6 +169,14 @@ A component's name undersells it. Before composing something by hand, check this
   for its processing state (progress, or an error with its reason and Retry inline). The body is
   default `Tabs` stretched full width (`TabsList className="w-full"`) with `useTabsSwipe` on the
   panels, and no cards around the panels.
+- **A list page with a grid, list or board view** → one `DataList` with `view` + `onViewChange`
+  (it mounts `ViewToggle` in the `FilterBar` `view` slot and remembers the view for the session) and
+  `views` for the ones the page allows. The grid renders a `MediaCard` per row (whole card is the
+  link, ⋯ on hover/focus/touch) with `sections` as headings; `view="board"` makes `sections` Board
+  lanes with `onMove` and a per-section `loading` / `loadMore` / `emptyState`. Record images are a
+  column `thumbnail` + `thumbnailFallback` (the app mark) — never a hand-rolled card grid, card or
+  `<img>`. A count needing attention is `<Badge variant="warning"><TriangleAlert />n</Badge>`, and
+  groups in a ⋯ menu are split by `{ type: "separator" }` entries.
 - **A list that pages by cursor** → `DataList` `loadMore` (or `LoadMore` under your own list), with
   `useAsyncSearch` when the search runs on the server.
 

package/skills/vegastack-design-system/references/components.md

@@ -3,7 +3,7 @@
 <!-- GENERATED — do not hand-edit. Regenerated from the design system's component contract,
      which is the authority for membership and counts. -->
 
-**118 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`) — 679 registry items in total.
+**121 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`) — 682 registry items in total.
 
 Install any of them with `shadcn add @vegastack/<name>`. Animated icons install as
 `@vegastack/icon-<name>`; the bare name is reserved for components, so a component whose name
@@ -85,8 +85,11 @@ starts with `icon-` is a component and never an icon.
 - **`filter-bar`** — The two-row toolbar above a list or table — search (~320px) left; a Filters (n) toggle, scope Tabs and the view switch right; compact rounded-md filter chips (FilterBarFacet, DateRangeFilter with presets) on a toggled row 12px below that scrolls sideways on a phone.
 - **`filter-bar-managed`** — The controlled nested and/or filter builder — host-injected field grammar (vocabulary + per-type value editors), depth and condition caps, focus-managed removal, and a removable FilterChip summary.
 - **`load-more`** — The shared Load more footer for keyset lists — an outline button that keeps its width while loading, an error line with Try again, and an optional end caption.
+- **`media-card`** — A record as a card — an image, the title, a meta line, a badge and a ⋯ menu — where the whole card is one link.
 - **`property-list`** — Record-facts rows: an icon+label column beside a value column, as an accessible definition list.
 - **`sortable-list`** — Reorderable rows or tiles on ItemGroup/Item via use-drag-reorder — pointer drag with drop indicators, keyboard move mode, a lossless row menu, locked rows, inline actions, a grid layout, and server-refusable moves. Controlled; the host owns the order.
+- **`thumbnail`** — A small rounded, cover-fit image, 32 or 48px, with a fallback for records that have no image.
+- **`view-toggle`** — The Grid | List | Board icon switch for a list page, labels hidden on a phone.
 
 ## Overlay