Changelog

What Vinyaas has shipped.

v1.5.0

v1.5.0 adds 4 components (Beam, Fuse Button, Multi Input, and User Cursor), raises the date picker and other popovers above dialogs, tightens table row hover so buttons inside rows stay readable, and fixes the chevron alignment in Combobox and Select.

Components

  • Beam — an animated connector between two elements with a glowing ray or dot pulse that travels along a dotted, dashed, or solid arc or S-curve. BeamNode provides ready-made round icon endpoints.
  • Fuse Button — a button whose lit state is a burning-border countdown. Pressing while the fuse burns calls onUndo; burning out calls onFire. Supports rect and circle shapes and all Button sizes including icon.
  • Multi Input — one field that collects several values as removable chips. Entries commit on Enter, on a separator character while typing or pasting, or on blur; `max`, `validate`, and `allowDuplicates` control what lands in the list, and `name` submits one hidden input per value. Pass `options` to turn it into a multi-select with a filtered dropdown (arrow keys and Enter included), and `allowCustomValues={false}` to accept listed values only. Part of the form catalog.
  • User Cursor — a Figma-style collaborative cursor: an arrow pointer with a rounded pill label showing the user's name. Color-coded per user; purely presentational so it works with any multiplayer or canvas setup.

Component improvements

  • Data Table: `pageSizeOptions` renders a toggle group beside the pager so the reader picks how many rows a page holds; `pagination` still sets the starting size and `pageSizeLabel` names the group. Picking a size returns to page 1. Data Table now depends on the toggle-group registry item.
  • Resizable: in `variant="blocks"` the three-dot grip is opt-in through `withHandle`, matching the default variant. Blocks groups that relied on the grip appearing on its own now need `withHandle` on the handle.
  • Popover: z-index raised from 50 to 60 so date pickers and comboboxes open above dialog overlays (Dialog is z-50).
  • Table: row hover uses bg-accent/40 instead of bg-accent, so interactive elements (buttons, icons) inside rows keep their own hover state visible.
  • Combobox: the display span inside ComboboxTrigger now carries min-w-0 flex-1 so long option labels truncate correctly and the chevron always stays at the far right.
  • Native Select, Select, Combobox: chevron reliably appears at the right edge regardless of text length.
  • Hover Card, Popover, Dropdown Menu, and Select: overlay content no longer reaches for `document` when it renders on the server. With `defaultOpen` the content rendered on the first pass, so prerendering a page that used it crashed the build with `ReferenceError: document is not defined`; the portal now waits for the client, as Dialog, Sheet, and Drawer already did.
  • Calendar: the selected range band is now a tint of the selection color instead of `accent`. In themes where `accent` sits close to `background` the band blended into the calendar surface, so a selected range was invisible between its end points; the tint reads against the surface in every preset and still contrasts with the solid circles on the range's first and last day.

Docs & site

  • Component demos were rebuilt around a toolbar that sits above the frame: Preview and Code are now toggled views rather than a stacked preview-plus-source, with desktop, tablet, and mobile width presets, a refresh control, and a drag handle on the right edge that resizes the frame down to 320px while showing the current width.
  • Demos can now expose a Customize panel below the frame. Controls (color, text, long text, range, toggle, and select) drive the preview and the generated source at the same time, so a single interactive demo replaces several near-identical static examples. Beam is the first page to use it.
  • Customize panels now cover Button, Badge, Fuse Button, Calendar, Combobox, Drag & Drop, and Data Table. Button, Badge, and Fuse Button gained Text and Icon controls — the icon is placed leading or trailing, and on an icon-only size or a circle the text control drops out of the panel, since those render the icon alone. Calendar exposes mode, caption layout, month count, and grid options; Combobox its alignment, placeholders, and a disabled option; Drag & Drop its orientation and activator; Data Table its row-count choices.
  • Controls can be conditional: a control declares when it applies and leaves the panel, and the generated source, while it does not.
  • Empty State: the free-text `Empty className` control is no longer in the Customize panel; it stays documented in the API table.
  • Themes: the preset and radius selector gained Apply Theme and Reset. A selection stays a preview — the strip reads "Preview only" until it is applied, then "Applied to site" — and Apply is disabled once the selection matches what the site is wearing. Applying sets every theme token (surfaces, borders, accents, rings, charts, sidebar, and radius) on the document and keeps it through navigation and refreshes; Reset drops the override and returns the selector to its defaults. As with the saved light/dark choice, the first paint after a hard refresh shows the shipped tokens until the saved theme is re-applied.
  • Themes and Typeset galleries moved from CSS multi-column to a measured Pinterest-style masonry: each card is placed in the column that is currently shortest, so all columns share a top edge, cards keep their natural heights, and the ragged tails `column-fill: balance` used to leave are gone. Column count (1 → 2 → 3 → 4) now follows the gallery's own width rather than the viewport, and the gutter is a consistent 24–32px on both axes.
  • Documentation pages widened from 48rem to 52rem, giving examples, API tables, and code blocks more room without stretching body copy; demo code blocks render at 12px.
  • Installation is now a CLI/Manual toggle group on every component page. The CLI tab keeps the `npx vinyaas add` command, and the Manual tab holds the dependency and file-placement notes followed by the component source — so the source moved out of the trailing Source section and into the step that asks for it. Section order is Preview, Installation, Usage, Examples.
  • Homepage showcase cards now demonstrate a use case instead of the bare component: Fuse Button is a project danger zone with an undo window, Drag & Drop is a sprint backlog that reprioritises, Resizable is an inbox list beside a reading pane, and User Cursor is a design frame with presence on the element being edited.
  • Textarea: the `showCount` counter is now pinned just under the field's bottom-right corner and taken out of flow, instead of being a right-aligned block in the wrapper that could drift wide of the field. Set width through `containerClassName` when `showCount` is on, since the counter is anchored to the wrapper.
  • Code blocks now follow the active theme. The frame background, header, language toggle, and line-number gutter derive from `--card`, `--border`, `--card-foreground`, and `--muted-foreground` instead of fixed neutral greys, so a preset applied or previewed from /themes reaches the code frame too. Syntax hues stay tuned per light and dark mode, and the pre-hydration system-dark fallback now carries them.
  • Companion Animations: the clip and move tables now use the shared Table component, so they pick up the same bordered card, muted uppercase headers, and row hover as every other table on the site instead of their own bare markup.
  • The dot marking a new component is now the primary color in both the sidebar and the components index, where it used to be a muted foreground tint.
  • Themes playground: the previewed theme now reaches overlay content. Popover, Select, Dialog, Dropdown Menu and Tooltip portal into `body`, outside the wrapper that carries the preview variables, so an opened Select, Combobox or Date Picker rendered in the site theme while the page behind it showed the preset — and `--popover`, which only portalled layers read, could not be previewed at all. Sidebar tokens are also derived for the preview now, so what the preview shows matches both Apply to site and the copied CSS.

CLI

  • Install tracking moved from `.vinyaas/manifest.json` into `components.json` (under the `installedComponents` key). Vinyaas no longer creates or needs the `.vinyaas/` folder. The config file that `vinyaas init` already writes is now the single source of truth for both project config and installed-component tracking.
  • JSX support: when `tsx` is `false` in `components.json`, Vinyaas now writes component files as `.jsx` (and `.js`) instead of `.tsx`. Projects using Babel with `@babel/preset-typescript` or other transpile setups that handle JSX work as before.

Release

  • Minor release. No breaking changes. All packages versioned 1.5.0.
  • Migration: if you have a `.vinyaas/manifest.json` from a previous install, it is no longer read. Run `vinyaas add --force` on your components to re-track them in `components.json`, then delete `.vinyaas/`.