@vegastack/design 0.7.13 → 0.7.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vegastack/design",
-  "version": "0.7.13",
+  "version": "0.7.15",
   "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

@@ -51,6 +51,11 @@ link` (upstream's set, verbatim). `destructive` is a soft tint, not a solid red
   an icon in a bare `<button>` is off-system. An icon-only LINK stays an `<a>` styled with
   `buttonVariants({ variant, size: "icon" })` — never a `Button`, which would put `role="button"`
   on navigation. `loading` is ours: it holds the label's box and sets `aria-busy`.
+- **Leading icons are muted and follow the row** — menus, select/combobox/command items, sidebar
+  buttons, nav links, toggles, ghost/outline buttons, breadcrumb links and item media mute a
+  leading icon and turn it full colour on hover, focus, highlight, selection, active, open and
+  pressed. Never add `text-muted-foreground` (or any colour) to those icons; only intentional
+  status colours belong there. Destructive rows keep `text-destructive`.
 - **Control sizes are upstream's names: `default · xs · sm · lg`**, plus
   `icon · icon-xs · icon-sm · icon-lg` where a square tier exists. The old `md` default is gone, and
   most of the components that are ours dropped their `size` prop entirely and take their height from
@@ -276,6 +281,19 @@ contract.
   element, so navigation announces as an action. `buttonVariants` comes from a module with no
   `'use client'`, so a Server Component uses it directly.
 
+- **Dates & times come from one module** — `@/lib/date-time` (plain functions, server + client)
+  and the `RelativeTime` / `DateTime` / `Duration` / `DueLabel` components in
+  `@/components/ui/relative-time`. Never `toLocaleString`, a hand-rolled "minutes ago", or a date
+  library. Pick by surface: updated/last-activity columns → `formatRelative` ("2m"); created/due
+  dates → `formatDate` ("Today", "Mon", "Sep 25"); detail/audit rows → `formatDateTime`
+  ("Sep 25 · 2:30 PM", `separator: "comma"` inside sentences); hover tooltips → the components'
+  built-in `formatTooltip` ("Sep 25, 2026 · 2:30 PM IST"); due chips → `formatDueLabel` /
+  `<DueLabel>` (tone overdue/soon/normal); lengths → `formatDuration` ("1h 15m", `clock` for
+  players); schedules → `formatDateRange` / `formatTimeOfDay`; feed/inbox headers → `groupByDay`.
+  Pass the viewer's `timeZone` (the `tz` cookie via `getTimeZone(cookie, orgZone)` on the server,
+  `useTimeZone()` on the client; render `TimeZoneScript` + `TimeZoneProvider` once at the root).
+  API/JSON output stays ISO.
+
 ## Do / Don't
 
 **Do**

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. -->
 
-**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.
+**115 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 3 data libs (`date-time`, `geo-data`, `drag-item`) — 675 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
@@ -68,7 +68,7 @@ starts with `icon-` is a component and never an icon.
 - **`item`** — A composable row for list and feed content — media, title, description, actions.
 - **`kbd`** — A keyboard-key chip, and a group that lays several of them out inline.
 - **`markdown-view`** — Render a markdown string to safe, token-styled HTML — headings, lists, code, blockquotes, links, GFM tables — XSS-safe, no raw HTML.
-- **`relative-time`** — Render a date as a human-relative string ("2 hours ago", "yesterday") with native Intl.RelativeTimeFormat — self-updating, with an absolute-date tooltip.
+- **`relative-time`** — One Intl-based dates & times module — formatRelative, formatDuration, formatDate, formatDateTime, formatDateRange, formatTimeOfDay, formatDueLabel, groupByDay, time-zone cookie + provider — and the RelativeTime, DateTime, Duration and DueLabel components with absolute-time tooltips.
 - **`status-icon`** — A small status indicator icon — todo, in progress, blocked, done — each mapping to a lucide icon and semantic color.
 - **`table`** — A responsive table component — caption, header, body, footer, row, head and cell parts over semantic table markup.
 - **`timeline`** — Rail geometry for chronological records — a continuous connector with a node per entry. Rows compose Item parts; separators render through Marker; entries carry content-visibility render skipping.
@@ -138,6 +138,7 @@ starts with `icon-` is a component and never an icon.
 
 - **`audio-player`** — A custom audio transport with play/pause, skip, seek, a tappable speed control, and keyboard shortcuts (mute on the M key); a single line on a wide player, two lines with an optional transcript control on a narrow, mobile-width player. Docks to the bottom of a scroll column with a close, resolves a lazy source on first play, and seeks from outside through actionsRef.
 - **`image`** — A presentational framed image with aspect-ratio, rounding, a loading skeleton, and an error fallback.
+- **`inbox`** — The notification Inbox: frame with header actions, All | Unread chips, sticky day groups, full-bleed rows with avatar or icon, rich titles, action chips, hover read toggle and menu, and empty, loading and error states.
 - **`media-player-controls`** — The shared media transport — play/pause, skip, seek, elapsed/duration, mute + volume, playback speed, and one keyboard shortcut map (useMediaShortcuts) — composed by Audio Player and Video Player.
 - **`notification-bell`** — A bell icon button with an unread-count badge overlay, plus the shared NotificationDot unread marker. Presentational — the app supplies the count.
 - **`video-player`** — A framed video player with the same grouped custom transport controls as Audio Player.