@vegastack/design 0.7.4 → 0.7.6

package/dist/{chunk-MSOIZXDR.js → chunk-OHGNXG5G.js}

@@ -70,6 +70,12 @@ var TIMINGS = {
   feedbackRevertMs: 1500,
   /** Debounce before auto-persisting a text field (AutoSaveInput). */
   autoSaveDebounceMs: 800,
+  /**
+   * Debounce before a typed search query is sent (SearchInput's settled value, FilterBar
+   * search, `useAsyncSearch`). Short enough to feel like type-ahead, long enough that one
+   * word is one request; {@link TIMINGS.autoSaveDebounceMs} is too slow for this role.
+   */
+  searchDebounceMs: 300,
   /** Hover delay before a rich preview (HoverCard) opens — guards accidental opens. */
   hoverOpenDelayMs: 700,
   /** Hover delay before a rich preview closes — lets the pointer travel into the card. */

package/dist/create-animated-icon.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   cn
-} from "./chunk-MSOIZXDR.js";
+} from "./chunk-OHGNXG5G.js";
 
 // src/icons/create-animated-icon.tsx
 import * as React from "react";

package/dist/icons/index.js

@@ -1,6 +1,6 @@
 import {
   cn
-} from "../chunk-MSOIZXDR.js";
+} from "../chunk-OHGNXG5G.js";
 
 // src/icons/icon.tsx
 import "react";

package/dist/index.cjs

@@ -99,6 +99,12 @@ var TIMINGS = {
   feedbackRevertMs: 1500,
   /** Debounce before auto-persisting a text field (AutoSaveInput). */
   autoSaveDebounceMs: 800,
+  /**
+   * Debounce before a typed search query is sent (SearchInput's settled value, FilterBar
+   * search, `useAsyncSearch`). Short enough to feel like type-ahead, long enough that one
+   * word is one request; {@link TIMINGS.autoSaveDebounceMs} is too slow for this role.
+   */
+  searchDebounceMs: 300,
   /** Hover delay before a rich preview (HoverCard) opens — guards accidental opens. */
   hoverOpenDelayMs: 700,
   /** Hover delay before a rich preview closes — lets the pointer travel into the card. */

package/dist/index.d.cts

@@ -132,6 +132,12 @@ declare const TIMINGS: {
     readonly feedbackRevertMs: 1500;
     /** Debounce before auto-persisting a text field (AutoSaveInput). */
     readonly autoSaveDebounceMs: 800;
+    /**
+     * Debounce before a typed search query is sent (SearchInput's settled value, FilterBar
+     * search, `useAsyncSearch`). Short enough to feel like type-ahead, long enough that one
+     * word is one request; {@link TIMINGS.autoSaveDebounceMs} is too slow for this role.
+     */
+    readonly searchDebounceMs: 300;
     /** Hover delay before a rich preview (HoverCard) opens — guards accidental opens. */
     readonly hoverOpenDelayMs: 700;
     /** Hover delay before a rich preview closes — lets the pointer travel into the card. */

package/dist/index.d.ts

@@ -132,6 +132,12 @@ declare const TIMINGS: {
     readonly feedbackRevertMs: 1500;
     /** Debounce before auto-persisting a text field (AutoSaveInput). */
     readonly autoSaveDebounceMs: 800;
+    /**
+     * Debounce before a typed search query is sent (SearchInput's settled value, FilterBar
+     * search, `useAsyncSearch`). Short enough to feel like type-ahead, long enough that one
+     * word is one request; {@link TIMINGS.autoSaveDebounceMs} is too slow for this role.
+     */
+    readonly searchDebounceMs: 300;
     /** Hover delay before a rich preview (HoverCard) opens — guards accidental opens. */
     readonly hoverOpenDelayMs: 700;
     /** Hover delay before a rich preview closes — lets the pointer travel into the card. */

package/dist/index.js

@@ -5,7 +5,7 @@ import {
   mergeRefs,
   prose,
   proseClassName
-} from "./chunk-MSOIZXDR.js";
+} from "./chunk-OHGNXG5G.js";
 export {
   FLOATING,
   TIMINGS,

package/package.json

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

@@ -212,11 +212,12 @@ contract.
 
 ## Composition patterns
 
-- **Forms are composed, not configured** — `Field` is layout and copy: `FieldLabel` bound with
-  `htmlFor`, the control, then `FieldDescription` and `FieldError` as CHILDREN. There is no `label`,
-  `description` or `error` prop, and no context that reaches into the control. State is written where
-  it belongs: `aria-invalid` on the control (for assistive tech), `data-invalid` / `data-disabled` on
-  the `Field` (for the block's styling). `FieldError` is `role="alert"`, carries a leading icon so an
+- **Forms are composed, not configured** — `Field` is layout and copy: `FieldLabel`, the control,
+  then `FieldDescription` and `FieldError` as CHILDREN. There is no `label`, `description` or `error`
+  prop. `Field` wires the control through Base UI Field — the label's `for`, the description and
+  error ids in `aria-describedby`, and `aria-invalid` from the Field's `data-invalid` — so pass ids
+  only to override; an explicit `aria-*` prop on the control merges with the Field's, it does not
+  replace it. Write `data-invalid` / `data-disabled` on the `Field`, not by hand on the control. `FieldError` is `role="alert"`, carries a leading icon so an
   error is never colour alone, and takes either children or an `errors` array it de-duplicates.
   react-hook-form's `register` wires straight to the control; there is no `Controller` indirection.
 - **A set of related checkboxes is a `FieldSet` + `FieldLegend` + one `Field` per option** — that is

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. -->
 
-**112 components**, plus 467 animated-icon items, 11 hooks (`use-animation-replay`, `use-announcer`, `use-drag-reorder`, `use-file-drop`, `use-inline-edit`, `use-list-nav`, `use-media-query`, `use-mobile`, `use-modal-inert`, `use-overflow`, `use-platform`), 4 starter blocks (`app-shell-01`, `board-01`, `login-01`, `settings-01`), 68 chart blocks across 7 families, and 2 data libs (`geo-data`, `drag-item`) — 664 registry items in total.
+**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`), 7 starter blocks (`app-shell-01`, `board-01`, `login-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`) — 670 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
@@ -82,8 +82,9 @@ starts with `icon-` is a component and never an icon.
 - **`data-table-parts`** — The chrome DataList and DataGrid share — sort header, selection cells, skeleton rows, the empty row, column class rules, and the selection/sort/controlled-state hooks.
 - **`filter-bar`** — A row of removable filter chips, an "Add filter" dropdown, and an optional search input — for list and table filter toolbars.
 - **`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.
 - **`property-list`** — Record-facts rows: an icon+label column beside a value column, as an accessible definition list.
-- **`sortable-list`** — Reorderable rows on ItemGroup/Item via use-drag-reorder — pointer drag with drop indicators, keyboard move mode, a lossless Move menu, and server-refusable moves. Controlled; the host owns the order.
+- **`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.
 
 ## Overlay
 
@@ -126,7 +127,7 @@ starts with `icon-` is a component and never an icon.
 
 - **`app-shell`** — The shared dashboard layout — a skip-linked sidebar + header + scrollable main region, composing Sidebar/SidebarTrigger into one reusable, hash-tracked shell.
 - **`aspect-ratio`** — Constrains its children to a given width-to-height ratio.
-- **`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, collapsed lanes, Empty-bordered drop targets.
+- **`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.
 - **`direction`** — Base UI's DirectionProvider and useDirection — the text-direction context components read.
 - **`resizable`** — Accessible resizable panel groups and layouts with keyboard support — horizontal or vertical, nestable, with an optional visible grip.
 - **`scroll-area`** — Augments native scroll functionality for custom, cross-browser styling — a viewport, an auto-hiding scrollbar, and a corner.
@@ -135,10 +136,10 @@ starts with `icon-` is a component and never an icon.
 
 ## Media
 
-- **`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.
+- **`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.
 - **`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. Presentational — the app supplies the count.
+- **`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.
 
 ## Rich text
@@ -151,12 +152,13 @@ starts with `icon-` is a component and never an icon.
 
 ## Communication
 
-- **`attachment`** — A file chip / thumbnail card for chat and message-compose surfaces — media slot, name + meta, idle/uploading/processing/error/done states, an actions row and a full-bleed trigger.
+- **`attachment`** — A file chip / thumbnail card for chat, record-file and upload-queue surfaces — media slot, name + meta, idle/uploading/processing/error/done states, determinate progress, a muted tile, an actions row, a full-bleed trigger, and a scrolling or grid group.
 - **`bubble`** — A chat speech bubble - 7 token-driven variants (incl. brand-tinted), start/end alignment, interactive content, and a floating reactions chip.
 - **`marker`** — An inline conversation marker - status lines, system notes, and labelled dividers. 3 variants, Base UI render-polymorphic.
 - **`message`** — Layout primitives for a conversation row - avatar anchoring, content column, header/footer slots, start/end alignment. Server-safe.
 - **`message-scroller`** — An auto-scrolling conversation viewport (not virtualised) - pins to the latest message, preserves position on prepend, tracks the anchor, and a floating scroll-to-end button.
 - **`questionnaire`** — A guided one-question-at-a-time form — choices, freeform answers, skip, shortcuts, validation, resume and conditional items, built on the @shadcn/react questionnaire state machine.
+- **`transcript`** — A timestamped, speaker-labelled transcript on MessageScroller's primitive - marks the line playing at currentTime, follows it, pauses on a user scroll with a Back to current line button, seeks from each timestamp, and searches with highlighted, announced matches.
 
 ## Marketing