1.7.0: one site, new studio shell and home, tiles; React 18 and accent fixes

The one-site release. Every chapter and gallery example is a native, pre-rendered studio page in one tile language, with its own head; old links land in the studio. The studio has a new shell (search, one-button mode, custom color, icon rail, sticky side nav, On this page) and a new home (live product hero, ambient Get started). Package changes: .badge.bloom is neutral; the React parts run on React 18 and 19 (react/inert.ts); LiveActivity gains optional emptyAction and onOpenChange; verseva add warns below React 18; the console and landing blocks hold at phone width. No class or token is renamed.

Added

• design.verseva.com is pre-rendered. Every route in the studio routes table ships its own HTML: real headings
  without JS, a unique title and description, a canonical on design.verseva.com, Open Graph and Twitter tags, and
  JSON-LD (BreadcrumbList, plus WebSite on home). Pages hydrate in place, and client navigation keeps the whole head
  in step. The SPA rewrites in vercel.json are gone: each route is a file.
• SEO kit, generated at build time from the emblem and the dark canvas tokens at full clear space: favicon.ico,
  icon.svg, apple-touch-icon.png, 192 and 512 icons plus a maskable one, the og.png social card,
  site.webmanifest, robots.txt and sitemap.xml (every route).
• A studio 404 page. Unknown paths return 404 with the studio shell and a way back to Overview (noindex).
• The gallery lives in the studio. /gallery is a native page, and each example opens at /gallery/<slug>
  (the example in a frame that fits its document and follows the studio theme and brand) with its source at
  /gallery/<slug>/code (pre-rendered, with Copy). Links inside an example route through
  the studio. /examples/*.html still serve as files.
• Components links to Widgets from its header.
• Old site links land in the studio. /code.html?f=examples/<slug>.html (and /site/code.html?f=) 308s to
  /gallery/<slug>/code; any other code.html request goes to /gallery. Every /site/<page>.html 308s to its
  studio route (/site/index.html to /, /site/examples.html to /gallery), as the root copies already did. The
  registry JSON (/r/*, /site/r/*), /examples/**, /site/examples/**, site.css and theme.js stay files.
• Studio command bar. The top bar search (⌘K / Ctrl K) opens the package command bar over every route and
  every chapter and page section, built from the routes table and the section ids. A result navigates in the shell
  and lands focus on its section. Below 900px the search is an icon button and the bar is a full-height sheet.
• Custom accent. The color dot opens a popover with the five presets and Custom: a hue control and a hex field.
  Any pick is derived to --accent, --accent-hover, --accent-ink and --focus for dark and light, gated live
  (ink on accent and hover at 4.5:1, the accent and its hover on bg at 3:1, the accent on both surfaces at 3:1, text on the
  accent tint at 4.5:1; hover steps away from the page, as the presets do), and
  moved in OKLCH lightness to the nearest passing value when it fails, with the adjusted value and a pass or fail per
  check shown. The hue control changes only the hue of the original pick, so stepping back returns it. The popover
  traps focus while open. A chunk that fails to load shows a Retry in place. The choice persists and applies before first paint. Copy theme copies a ready
  [data-brand="custom"] theme file in the presets' shape (contrast-gate clean).
• Icon rail. The sidebar collapses to a 72px rail: one icon per Studio page and one per group, a tooltip on each,
  and a keyboard-operable flyout per group (arrows, Home, End, Enter, Esc back to the icon). The rail state persists
  and applies before first paint.
• On this page. Chapter and Foundations pages carry a right rail of their sections from 1200px, with scroll-spy
  (aria-current="location") and focus moved on click.

Changed

• Top bar. The studio header is the package three-column .tbar: lockup and version, the search trigger,
  then color, mode, pause motion and GitHub. Mode is one icon button that cycles light, dark and system, named
  "Theme: current. Switch to next", announced politely, and drawn from the head script's data-mode so it never
  shows a wrong icon. The five brand chips and the Light / Dark / System segmented control left the top bar (the
  Overview hero keeps its theme picker). The npm link left the bar.
• Sidebar. Studio, Chapters and Gallery are collapsible groups (open state persists; the group holding the
  active item stays open), Gallery lists its examples, counts stay neutral badges, and the active item carries the
  nav bloom. Per-chapter section anchors left the sidebar for the On this page rail and the command bar.
• Phone shell from 900px. The page and section select and the stacked header now apply below 900px (was 760px).
• Lazy chunks. The command bar (studio and /widgets), the color panel and the search commands load on first
  intent; their triggers stay in the main chunk, which measures 147.1 kB gzip under the unchanged 150 kB budget.
• Studio home (/) is a live product hero. "One source. Every surface" with one primary action, Get started
  (copies npm i @verseva/design, shows Copied, then lands on /components#install), and a quieter Browse
  (/components). Beside it, a real widget home on the package parts (.wgrid tiles): the smart stack rotates with
  its visible pause, a demo job ticks in the live activity capsule, and the focus widget's chart settles. Only the
  focus widget carries the accent. At phone widths the home drops to two tiles and the CTA stays above the fold.
• Ambient motion on the home. Get started carries a slow catch-light sweep inside its matte body (transform only,
  no glow, no outer shadow), held on hover and focus. A neutral drift (text-ladder and surface tones, no accent)
  moves behind the hero. Both start after mount and stop under Pause motion and under reduced motion.
• Entry tiles into Components, Widgets, Foundations and Gallery, labels and counts only, in the /widgets tile
  language, routed in the shell. The theme picker, token readout, frame stage and counts row leave the home (the
  header's color popover and Foundations carry them); the home no longer loads the 3D stage.
• Studio specimen tiles. Components and Foundations take the /widgets tile language: the package .wgrid
  bento and .wtile glass at --r-lg, with a header (category icon, name, neutral meta count), the live specimen
  in the body, and Show code with Copy in the footer. Tiles size to their content (S, M, L, XL; rows hug the
  specimen), XL drops to the M span under 1100px and every tile to one column under 560px. The tile carries the
  loading, empty and error states, and is one component (studio/src/tiles/SpecimenTile.tsx) for the chapters
  and the gallery to follow.
• Components: 50 sections as tiles. Section ids, deep links, the On this page rail and the demos are
  unchanged; each code panel shows the generated, byte-checked sample from chapter-code.mjs.
• Foundations: each token family is a tile, with its declarations (:root and the light flip) as its code.
• Gallery: a bento of example tiles. /gallery shows the 8 mock sites as XL, M and S tiles: the name and its
  tags as neutral badges in the header, a live thumbnail in the body, Live (/gallery/<slug>) and Code
  (/gallery/<slug>/code) in the footer. The tag filter chips stay, as neutral selection, with a count on each.
  Thumbnails are the example files scaled from 1280px: inert, aria-hidden, no pointer events, themed and branded
  with the studio. They load lazily (IntersectionObserver), at most 6 at once, 3 on phones, and sit still (CSS
  animations at their end state, the example's animation-frame loop held) until their tile is hovered or holds
  focus; never under Pause motion or reduced motion. Details and inspiration shots are tiles too.
• Gallery example and code routes in the tile language. /gallery/<slug> puts its frame in a tile (the file
  and tags in the header, Code in the footer) and /gallery/<slug>/code its source (Open live and Copy in the
  footer, Retry in the body on a failed chunk). Height fitting, theme and brand following, one scrollbar, the
  pre-rendered source, the breadcrumb JSON-LD and the 404s for unknown slugs are unchanged.
• Retired: gallery parity. /gallery and the code route no longer match site/examples.html and
  site/code.html element for element; both are logged in studio/test/redesigned.ts and held by
  gallery-tiles.test.tsx and the served gallery.test.mjs instead.
• Web UI, Distribute and Docs + PDF as tiles. Web UI: the ladders, type trio and radius tables, then the four
  contract specimens (Buttons, Status, Card + stat, Segmented + field) under their section. Distribute: the command
  blocks, the agent tool table and the theme presets. Docs + PDF: the memo in one XL tile. Section ids, cold deep links
  and the On this page rail are unchanged; the bento has no holes at 4 and 2 columns. The legacy doctrine sublabels
  above the Web UI specimens are gone (labels and counts only). These pages have no generated code samples, so their
  tiles show no code.
• Data viz, Motion and Decks as tiles. Data viz keeps law 3 the way a product must: one focus tile (Line + area)
  spends the data accent and the other nine charts draw on the text ladder. Motion's Replay, Roll it, Point at it,
  Resolve it and Open it sit in their tiles' footers; the theme wipe, the curves race and the Pause motion control
  work as before. Decks: the slide and the structure table side by side. The Data viz and Motion samples load on
  first intent (main chunk 141.22 to 137.56 kB gzip).
• Data viz recipes follow the data-intensity rule. Bar magnitude goes through...

1.6.0: widgets, live activity capsule, command bar

A widget home, a live activity capsule and a command bar, each as CSS recipes, React parts (npx verseva add) and a pure state module, with live specimens at design.verseva.com/widgets. No 1.5 class or token is renamed; two visible changes are listed under Changed and Fixed.

Added

• Widget grid .wgrid and tile .wtile[data-size]. 4 columns, 2 under 1100px, 1 under 560px; S 1x1, M 2x1,
  L 2x2, XL 4x2, each tile rendering the view for its fitted size (XL drops to L at 2 columns, L and XL to M at 1).
  Glass at --r-lg; hover, focus-visible, press, disabled, loading (.skel copy), error with Retry, empty grid and
  reduced-motion states. Accent budget: charts in a tile draw on the text ladder; only the one focus widget keeps
  the accent.
• Edit mode. Rotation-only jiggle, remove with Undo, aria-pressed size buttons (sizes that do not fit stay,
  aria-disabled), reorder by drag, a touch handle, Move up and Move down, or Alt+Arrow; 44px hit areas; polite
  announcements; Esc leaves.
• Smart stack .wstack with a visible pause; the timer stops on hover, focus and under reduced motion.
• Gallery drawer content .wgal for adding widgets.
• React parts widget-grid, smart-stack, widget-gallery and the pure widget-state (npx verseva add widget-grid).
• New global classes: .wgrid, .wgrid-empty, .wgrid-add, .wgrid-undo, .wtile, .wtile-body, .wtile-hd,
  .wtile-meta, .wtile-num, .wtile-sub, .wtile-foot, .wtile-rows, .wtile-row, .wtile-val, .wtile-skel,
  .wtile-skel-num, .wtile-skel-plot, .wtile-err, .wtile-errline, .wtile-x, .wtile-edit, .wtile-handle,
  .wtile-sizes, .wtile-move, .wstack, .wstack-pages, .wstack-page, .wstack-nav, .wstack-dot,
  .wstack-pause, .wstack-step, .wgal, .wgal-item, .wgal-icon, .wgal-name, .wgal-sizes. Keyframes: wtile-jiggle.
• Live activity capsule .lact and panel .lact-panel. A glass capsule for long jobs in the top bar's
  .tbar-end, before the bell: the running job closest to done with its ring and percent, +n running. Ring and
  bar are --text-1 while running, --success done, --danger on error (no accent). The panel lists every job
  with its step, bar, Cancel, and Retry on error; a bottom sheet under 900px. Done jobs leave after 6 seconds, never
  while the panel is open, and hand off to a notification; errors stay. Polite announcements at start, done, cancel
  and 25% steps; failures as alerts. React: npx verseva add live-activity (activity-state holds the rules).
  New global classes: .lact, .lact-wrap, .lact-ring, .lact-track, .lact-arc, .lact-ti, .lact-tx,
  .lact-name, .lact-pc, .lact-more, .lact-panel, .lact-list, .lact-item, .lact-top, .lact-bar,
  .lact-step, .lact-err, .lact-acts. New keyframes: dc-lact-turn, dc-lact-slide.
• Command bar .cmdk (React command-bar + command-state). Meta+K / Ctrl+K opens actions,
  go-to and recent items filtered as you type; with onAsk, a question becomes an Ask row and the
  answer streams in place, with an optional widget preview and Pin to Home. Listbox semantics,
  focus trap, Escape returns focus, aria-busy while streaming and one announcement when done,
  no-results and Ask-failure states, a full-height sheet on phone. Contract: "Command bar".
  New global classes: .cmdk, .cmdk-ovl, .cmdk-field, .cmdk-input, .cmdk-mode,
  .cmdk-kbd, .cmdk-list, .cmdk-group, .cmdk-opt (modifier .ask), .cmdk-label,
  .cmdk-hint, .cmdk-empty, .cmdk-ans, .cmdk-q, .cmdk-a, .cmdk-caret, .cmdk-load,
  .cmdk-widget, .cmdk-acts, .cmdk-err, .cmdk-ft, .cmdk-trigger, .cmdk-close; keyframes cmdk-in,
  cmdk-blink.
• Three-column top bar. .tbar is a grid (breadcrumb, centred search, actions) only when it
  holds a .searchbox; every other top bar keeps the 1.3 layout.

Changed

• Console top bars with a search now centre it. Every .tbar that holds a .searchbox
  (including 1.3 consoles built on ConsoleTopbar with ConsoleSearch) takes the three-column
  layout; on phone the search fills the space the hidden breadcrumb leaves.

Fixed

• Counts and unread dots are neutral (law 3). .ibtn .num, .ibtn .dot, .notif .udot and .mhint .newdot
  painted the accent, out of line with the law 3 budget since 1.4.0 (counts and info badges are neutral). They now
  draw on the text ladder: --text-1, with --bg ink on the count.

1.5.0

Added

• Neutral checkbox .chk. A native checkbox that fills with --text-1 when checked, so selection inside content spends
  no accent (law 3 budget). Focus ring, disabled state.
• Picker row .pickrow and .pickgroup. Checkbox, a title over a mono key and a meta line, an optional trailing tag;
  centred, 44px minimum, the checked row on --surface-2.
• Search block .searchblock. A search field and its filter chips as one evenly spaced unit (16px padding, 12px gap),
  chips on one scrolling line.
• Tag chip .tchip. A read-only label with optional icon and count; .on marks the active one.

Changed

• Table cells centre vertically (.table th, .table td { vertical-align: middle }).

1.4.0

Changed

• Accent budget (law 3). One primary action plus the active nav item or tab per view. --accent-active-glow is now
  none in both modes (law 3 already banned a colored outer glow; the bloom stays as the named device). Pressed filter
  chips (.fchip[aria-pressed="true"]) and hot nav counts (.snav .cnt.hot, and the collapsed-rail dot) are neutral.
  Products that COPY recipes (for example a vendored .fchip or console-shell CSS) re-copy these rules.

Added

• Two-line choice .sel.two-line. A native radio or checkbox beside a label and a .metaline, 44px minimum height.
• Table identity cell .table .ident. Name (b, 600, --text-1, one line) over email (small, --text-2, wraps anywhere, never truncates).

1.3.1: console shell fixes

1.3.1 · 2026-10-27

Fixed

• Console sidebar foot. .cside-ft gets a minmax(0,1fr) column, so a long account email
  ellipsizes inside the capsule instead of pushing the capsule and the collapse row past the
  sidebar's glass edge (measured 268.9px against a 264px sidebar on the console block).
• Console phone nav from 768px to 899px. The sidebar hides below 900px but .navshell hid
  from 768px, leaving no nav in that band. A .navshell placed after .cshell now stays through
  899px; every other .navshell keeps the 768px rule.

1.3.0: console shell

1.2.0 never reached npm. It ships inside 1.3.0: everything under 1.2.0 below is new on npm with this release.

Upgrading copied parts: npx verseva add keeps files you already have, so re-add menu first
(npx verseva add menu --force); the console shell parts need the 1.3.0 Menu.

Added

• Console shell. The console frame as parts you adopt one at a time: a floating glass
  sidebar (.cshell, .cside, .cside-nav, .cside-ft) with an org switcher on top
  (.switcher: logo, wordmark or initials, your role, a checked org list and the org actions),
  grouped icon rows, a collapse row ([ toggles) above the account capsule (.capsule:
  avatar, name, email, account menu, settings gear) and the platform stamp (.platform: mark
  and version). A top bar (.tbar) carries the breadcrumb, search with the ⌘K / Ctrl K chord,
  notifications (.ibtn with a count, .notif rows in a non-modal panel) and a guides menu.
  What's new opens as a right sheet (.drawer over .scrim): releases newest first, each
  change tagged New, Improved or Fixed (.badge.bloom is new), unread until opened. The
  sidebar collapses to a 72px icon rail (.cside[data-collapsed]) whose labels show on hover
  and on keyboard focus (.railtip); urgent counts become dots. Every part carries hover,
  focus-visible, press, disabled and reduced-motion states. Contract: "Console shell".
• React parts (npx verseva add <name>): console-shell, org-switcher,
  account-capsule, console-topbar, whats-new, and console-state (the pure rules:
  SemVer compare, the What's new unread rule, collapse persistence, shortcut guards). Storage
  keys: verseva.whatsnew.seen, verseva.shell.collapsed.
• templates/releases.json: the release-notes shape (version, date, changes[] of
  kind and text) with example data.
• Specimens: console shell, rail, org switcher, account capsule, top bar, notifications,
  What's new, and the loading, empty and error states of the panel and the drawer.
• New global class names in components.css (check your app for clashes before
  upgrading): .cshell, .cside, .cside-nav, .cside-ft, .cmain, .cbody, .switcher,
  .otile, .oname, .oword, .capsule, .acct, .collapse-row, .ibtn, .platform,
  .pmark, .tbar, .tbar-end, .panel-hd, .notifs, .notif, .udot, .panel-empty,
  .panel-ft, .scrim, .drawer, .drawer-hd, .drawer-bd, .vchip, .railtip, .mhint,
  .newdot, .nl, .ni, .badge.bloom. Release internals (.rel, .relhead, .chgs, .chg)
  apply inside .drawer only, and .who inside .acct only.
• npm run typecheck: the React parts under the studio's strict TypeScript (needs
  studio/node_modules).
• The console block and gallery example rebuilt on the shell, with a fictional org and
  platform.

Changed

• ConsoleNav gains collapsed (rail rendering) and icons; labels render in .nl.
  Menu gains checkable items (checked), hints, disabled items, renderTrigger, label,
  listClassName, align and onOpenChange. Both stay backward compatible: 1.1.0 and 1.2.0
  copies compile and render unchanged.

Deprecated

• .orgchip: use .switcher. Kept for existing copies, removed in 2.0.

Fixed

• .snav .cnt.hot had no rule although the React nav emitted the class. It now renders as
  the accent bloom, and as a dot in the rail.

VERSEVA Design 1.1.0

Full Changelog: v0.1.1...v1.1.0

VERSEVA 3D library 2026.10

30 procedural 3D objects and 6 animated loops from the VERSEVA Design studio (design.verseva.com/assets).

Objects: GLB + 1536px alpha PNG render. Loops: GLB with animation, WebM (alpha), MP4, PNG poster. Every model's accent material is named VERSEVA crimson; rebind it to your accent, or download any object already themed from the studio.

License: CC BY 4.0 (LICENSE-ASSETS). The VERSEVA name, wordmark and emblem are not licensed. Checksums: SHA256SUMS.txt.

v0.1.1: @verseva/design

Renamed: the package is now @verseva/design (was @verseva/design-core), matching the
repo (verseva/design) and the product name, VERSEVA Design. No token, contract, or CSS
value changes; this release is the same v0.1.0 system under its final name.

Consumers

• Dependency: "@verseva/design": "^0.1.1" (GitHub Packages, .npmrc with the @verseva
  scope) or git+ssh://git@github.com/verseva/design.git#v0.1.1.
• Imports: @verseva/design/tokens.css · @verseva/design/components.css ·
  @verseva/design/tailwind.css · require('@verseva/design/preset').
• The CLI name is unchanged: verseva-hex-gate.
• The old GitHub Packages entry @verseva/design-core@0.1.0 is superseded and can be
  deleted from the org's Packages tab.

v0.1.0: the signature, packaged

The VERSEVA design signature, packaged. First stable baseline: everything below is the
ratified system as extracted on 2026-08-22, with zero visual change from the pre-package
Baseline. Pin this tag; main moves ahead of it.

What ships

• tokens.css: the signature. Craft roles (canvas/hairline/text ladders, type trio,
  4px spacing scale, radius, elevation, motion, data-viz) plus the soft-glass material
  tokens (glass fills, navshell tiers, accent bloom). Dark default, one [data-theme="light"]
  flip block.
• components.css: the component contract as framework-light CSS, every contract state,
  navshell ported 1:1.
• tailwind.css (v4 @theme inline bridge) and tailwind.preset.cjs (v3 preset).
• verseva-hex-gate: builds fail on any hex not drawn from tokens (hex-ok marks
  ratified exceptions, --allow skips vendored paths).
• docs/: tokens.md, component-contract.md (including view-first-edit-on-intent),
  laws.md (the 13 signature laws), theming.md (brand themes, the onboarding checklist).
• board/ (repo clone only): the live render of the whole system with per-theme
  switching and live WCAG ratios; npm run board, then open /board/.

Install (pinned)

npm i -D "git+ssh://git@github.com/xhunn/verseva-design-core.git#v0.1.0"

Documented in the README

Quick starts (Tailwind v4/v3, no-build surfaces, fonts), 24 screenshots of the rendered
system, theming guide, hex-gate wiring, and the versioning discipline.

Known constraints

• Fonts are named, not shipped: load Archivo/Manrope/JetBrains Mono (variable weights) or
  the system falls back to platform faces.
• The board runs from a repo clone, not from node_modules; brand themes pull from a
  machine-local manifest and machines without one render the signature Baseline.
• Next.js/Turbopack panics on symlinked file: installs; install from git or a packed
  tarball.