@vegastack/design 0.6.0 → 0.7.0

package/dist/{chunk-42HJ4OYZ.js → chunk-MSOIZXDR.js}

@@ -4,8 +4,22 @@ import { twMerge as tailwindMerge } from "tailwind-merge";
 
 // src/prose.ts
 var prose = {
-  /** The root's own ink and size — every rule below is relative to this. */
-  root: "text-sm text-foreground",
+  /**
+   * The root's own FAMILY, ink and size — every rule below is relative to this.
+   *
+   * `font-sans` is load-bearing and was missing. A prose root has to be self-describing, because
+   * neither of its two consumers sets a family of its own: `MarkdownView` and `TextEdit` both wear
+   * nothing but `proseClassName`. With no family declared here, prose inherited whatever surrounded
+   * it — drop either surface inside a mono container (`terminal-body` is one in this very
+   * registry, and a chat or log panel is the obvious consumer case) and the WHOLE tree went mono:
+   * headings, paragraphs, table cells, and the `1.` / `2.` markers of an ordered list, because
+   * `::marker` inherits font properties from its originating element.
+   *
+   * Geist Mono is now the exception the recipe names explicitly — `code`, `pre` and `pre code` —
+   * rather than something prose falls into by accident. A consumer who genuinely wants mono prose
+   * still says so on the root, where it reads as a decision.
+   */
+  root: "font-sans text-sm text-foreground",
   // Headings. `scroll-m-20` keeps an anchored heading clear of a sticky header; the weight is
   // `font-semibold`, the ordinary Tailwind weight upstream uses — Batch 1 of the shadcn reset
   // deleted both the 400/500 ladder and the `text-h*` roles this comment used to name.

package/dist/create-animated-icon.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   cn
-} from "./chunk-42HJ4OYZ.js";
+} from "./chunk-MSOIZXDR.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-42HJ4OYZ.js";
+} from "../chunk-MSOIZXDR.js";
 
 // src/icons/icon.tsx
 import "react";

package/dist/index.cjs

@@ -33,8 +33,22 @@ var import_tailwind_merge = require("tailwind-merge");
 
 // src/prose.ts
 var prose = {
-  /** The root's own ink and size — every rule below is relative to this. */
-  root: "text-sm text-foreground",
+  /**
+   * The root's own FAMILY, ink and size — every rule below is relative to this.
+   *
+   * `font-sans` is load-bearing and was missing. A prose root has to be self-describing, because
+   * neither of its two consumers sets a family of its own: `MarkdownView` and `TextEdit` both wear
+   * nothing but `proseClassName`. With no family declared here, prose inherited whatever surrounded
+   * it — drop either surface inside a mono container (`terminal-body` is one in this very
+   * registry, and a chat or log panel is the obvious consumer case) and the WHOLE tree went mono:
+   * headings, paragraphs, table cells, and the `1.` / `2.` markers of an ordered list, because
+   * `::marker` inherits font properties from its originating element.
+   *
+   * Geist Mono is now the exception the recipe names explicitly — `code`, `pre` and `pre code` —
+   * rather than something prose falls into by accident. A consumer who genuinely wants mono prose
+   * still says so on the root, where it reads as a decision.
+   */
+  root: "font-sans text-sm text-foreground",
   // Headings. `scroll-m-20` keeps an anchored heading clear of a sticky header; the weight is
   // `font-semibold`, the ordinary Tailwind weight upstream uses — Batch 1 of the shadcn reset
   // deleted both the 400/500 ladder and the `text-h*` roles this comment used to name.

package/dist/index.d.cts

@@ -40,8 +40,22 @@ import * as React from 'react';
  * <div className={cn(prose.root, prose.p, prose.code)} />
  */
 declare const prose: {
-    /** The root's own ink and size — every rule below is relative to this. */
-    readonly root: "text-sm text-foreground";
+    /**
+     * The root's own FAMILY, ink and size — every rule below is relative to this.
+     *
+     * `font-sans` is load-bearing and was missing. A prose root has to be self-describing, because
+     * neither of its two consumers sets a family of its own: `MarkdownView` and `TextEdit` both wear
+     * nothing but `proseClassName`. With no family declared here, prose inherited whatever surrounded
+     * it — drop either surface inside a mono container (`terminal-body` is one in this very
+     * registry, and a chat or log panel is the obvious consumer case) and the WHOLE tree went mono:
+     * headings, paragraphs, table cells, and the `1.` / `2.` markers of an ordered list, because
+     * `::marker` inherits font properties from its originating element.
+     *
+     * Geist Mono is now the exception the recipe names explicitly — `code`, `pre` and `pre code` —
+     * rather than something prose falls into by accident. A consumer who genuinely wants mono prose
+     * still says so on the root, where it reads as a decision.
+     */
+    readonly root: "font-sans text-sm text-foreground";
     readonly h1: "[&_h1]:mt-6 [&_h1]:mb-3 [&_h1]:scroll-m-20 [&_h1]:text-3xl [&_h1]:font-semibold [&_h1]:text-foreground [&_h1]:first:mt-0";
     readonly h2: "[&_h2]:mt-6 [&_h2]:mb-3 [&_h2]:scroll-m-20 [&_h2]:text-2xl [&_h2]:font-semibold [&_h2]:text-foreground [&_h2]:first:mt-0";
     readonly h3: "[&_h3]:mt-5 [&_h3]:mb-2 [&_h3]:scroll-m-20 [&_h3]:text-xl [&_h3]:font-semibold [&_h3]:text-foreground [&_h3]:first:mt-0";

package/dist/index.d.ts

@@ -40,8 +40,22 @@ import * as React from 'react';
  * <div className={cn(prose.root, prose.p, prose.code)} />
  */
 declare const prose: {
-    /** The root's own ink and size — every rule below is relative to this. */
-    readonly root: "text-sm text-foreground";
+    /**
+     * The root's own FAMILY, ink and size — every rule below is relative to this.
+     *
+     * `font-sans` is load-bearing and was missing. A prose root has to be self-describing, because
+     * neither of its two consumers sets a family of its own: `MarkdownView` and `TextEdit` both wear
+     * nothing but `proseClassName`. With no family declared here, prose inherited whatever surrounded
+     * it — drop either surface inside a mono container (`terminal-body` is one in this very
+     * registry, and a chat or log panel is the obvious consumer case) and the WHOLE tree went mono:
+     * headings, paragraphs, table cells, and the `1.` / `2.` markers of an ordered list, because
+     * `::marker` inherits font properties from its originating element.
+     *
+     * Geist Mono is now the exception the recipe names explicitly — `code`, `pre` and `pre code` —
+     * rather than something prose falls into by accident. A consumer who genuinely wants mono prose
+     * still says so on the root, where it reads as a decision.
+     */
+    readonly root: "font-sans text-sm text-foreground";
     readonly h1: "[&_h1]:mt-6 [&_h1]:mb-3 [&_h1]:scroll-m-20 [&_h1]:text-3xl [&_h1]:font-semibold [&_h1]:text-foreground [&_h1]:first:mt-0";
     readonly h2: "[&_h2]:mt-6 [&_h2]:mb-3 [&_h2]:scroll-m-20 [&_h2]:text-2xl [&_h2]:font-semibold [&_h2]:text-foreground [&_h2]:first:mt-0";
     readonly h3: "[&_h3]:mt-5 [&_h3]:mb-2 [&_h3]:scroll-m-20 [&_h3]:text-xl [&_h3]:font-semibold [&_h3]:text-foreground [&_h3]:first:mt-0";

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vegastack/design",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "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": {
@@ -70,7 +70,7 @@
     "test": "node test/compare.test.mjs && node test/check-updates.test.mjs && node test/skills-install.test.mjs"
   },
   "dependencies": {
-    "@vegastack/design-tokens": "workspace:^",
+    "@vegastack/design-tokens": "^0.7.0",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.6.0",
     "tsconfig-paths": "^4.2.0",
@@ -82,7 +82,7 @@
     "lucide-react": "^1.47.0",
     "motion": "^13.2.0",
     "thesvg": "^3.2.6",
-    "tailwindcss": "catalog:"
+    "tailwindcss": "^4.3.3"
   },
   "peerDependenciesMeta": {
     "tailwindcss": {

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

@@ -79,10 +79,22 @@ rg -n 'ring-3\b|ring-\[3px\]|ring-ring/[0-9]+|focus-visible:ring-|shadow-\[0_0_0
 - `React.forwardRef` — React 19 takes `ref` as a normal prop. **error**
 
 **Things that are NOT findings any more**, and reporting them is noise: `rounded-xl`, `shadow-md`,
-`text-4xl`, `font-semibold`, `tracking-tight`, `transition-all`, `transition-colors`,
-`duration-100`, `ease-in-out`, `z-50`, `opacity-50`, a raw `/NN` alpha, `h-8`/`size-4`,
-`cursor-default` on a menu row, an arbitrary `h-[18.4px]`, and a `hover:` with no `active:` beside
-it. Every one of those is upstream's own vocabulary, which this system now adopts.
+`text-4xl`, `font-semibold`, `transition-all`, `transition-colors`, `duration-100`, `ease-in-out`,
+`z-50`, `opacity-50`, a raw `/NN` alpha, `h-8`/`size-4`, `cursor-default` on a menu row, an
+arbitrary `h-[18.4px]`, and a `hover:` with no `active:` beside it. Every one of those is upstream's
+own vocabulary, which this system now adopts.
+
+**`tracking-tight` left that list on 2026-09-22 and IS a finding again.** The `@theme` bridge now
+declares the heading tier's letter-spacing per size, and Tailwind compiles it as
+`letter-spacing: var(--tw-tracking, …)` — so a local `tracking-*` silently beats the ramp and that
+element stops matching the system. Only `tracking-widest` (a keyboard-shortcut hint) is allowed.
+Two more in the same family:
+
+- an arbitrary font size (`text-[13px]`, `text-[0.8rem]`) — it bypasses the `--text-*` namespace and
+  receives neither the ramp's line-height nor its letter-spacing. **error**
+- the `uppercase` utility or a `textTransform: "uppercase"` — this system is sentence case
+  everywhere, and the transform rewrites whatever it is handed (it once turned the token name
+  `--text-lg` into `--TEXT-LG`). If a string is uppercase, write it uppercase. **error**
 
 ## 3b. Names and tokens the shadcn reset removed
 

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

@@ -83,20 +83,20 @@ info`, each an ink on the `card` surface with a required icon; **`announcement-b
 Semantic CSS custom properties from `@vegastack/design-tokens/theme.css` (OKLCH, `:root` + `.dark`),
 on shadcn's `neutral` base. Always use the utility, never a raw value.
 
-| Role     | Utilities                                                                                                                             |
-| -------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| Surface  | `bg-background` (page) · `bg-card` · `bg-popover` · `bg-sidebar`                                                                      |
-| Fill     | `bg-primary` (solid action, every checked control) · `bg-secondary` (soft) · `bg-muted` (well, track, skeleton) · `bg-accent` (hover) |
-| Text     | `text-foreground` · `text-muted-foreground` · `text-{primary,secondary,accent,card,popover}-foreground`                               |
-| Status   | `bg-{destructive,success,warning,info}` · `-foreground` (ink ON the fill) · `-text` (ink on the page or on the family's own tint)     |
-| Border   | `border-border` · `border-input` — there are no rings; focus is one global outline                                                    |
-| Radius   | `rounded-{sm,md,lg,xl,2xl}` — all derived from the single `--radius`                                                                  |
-| Type     | Tailwind's own `text-{xs…7xl}`. `text-sm` is 14px, `text-base` is 16px                                                                |
-| Font     | `font-sans` `font-mono` `font-serif` `font-heading`                                                                                   |
-| Motion   | `duration-{fast,base,slow}` · `ease-{standard,emphasized,exit,spring}` — or Tailwind's own steps                                      |
-| Entrance | `motion-pop-in` `motion-enter-up` `motion-shake` `motion-flash`                                                                       |
-| Docked   | `motion-dock-in` / `motion-dock-out` — a control parked at a viewport edge, 150ms in / 100ms out                                      |
-| Prose    | `proseClassName` from `@vegastack/design` — the whole rendered-rich-text recipe, one class                                            |
+| Role     | Utilities                                                                                                                                                                                                           |
+| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Surface  | `bg-background` (page) · `bg-card` · `bg-popover` · `bg-sidebar`                                                                                                                                                    |
+| Fill     | `bg-primary` (solid action, every checked control) · `bg-secondary` (soft) · `bg-muted` (well, track, skeleton) · `bg-accent` (hover)                                                                               |
+| Text     | `text-foreground` · `text-muted-foreground` · `text-{primary,secondary,accent,card,popover}-foreground`                                                                                                             |
+| Status   | `bg-{destructive,success,warning,info}` · `-foreground` (ink ON the fill) · `-text` (ink on the page or on the family's own tint)                                                                                   |
+| Border   | `border-border` · `border-input` — there are no rings; focus is one global outline                                                                                                                                  |
+| Radius   | `rounded-{sm,md,lg,xl,2xl}` — all derived from the single `--radius`                                                                                                                                                |
+| Type     | Tailwind's own `text-{xs…7xl}`. `text-sm` is 14px, `text-base` is 16px. Line-height and letter-spacing above `text-base` come from the theme — never write `tracking-*`, an arbitrary `text-[13px]`, or `uppercase` |
+| Font     | `font-sans` `font-mono` `font-serif` `font-heading`                                                                                                                                                                 |
+| Motion   | `duration-{fast,base,slow}` · `ease-{standard,emphasized,exit,spring}` — or Tailwind's own steps                                                                                                                    |
+| Entrance | `motion-pop-in` `motion-enter-up` `motion-shake` `motion-flash`                                                                                                                                                     |
+| Docked   | `motion-dock-in` / `motion-dock-out` — a control parked at a viewport edge, 150ms in / 100ms out                                                                                                                    |
+| Prose    | `proseClassName` from `@vegastack/design` — the whole rendered-rich-text recipe, one class                                                                                                                          |
 
 **Hover and pressed are written, not imported.** A component owns its own interaction chrome, the
 way shadcn writes it:

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

@@ -102,11 +102,12 @@ starts with `icon-` is a component and never an icon.
 - **`breadcrumb`** — A hierarchical navigation trail — links, separators, the current page, and ellipsis collapse for long paths.
 - **`command`** — A searchable command palette — filtered, grouped items with keyboard navigation, optionally inside a ⌘K dialog.
 - **`menubar`** — A persistent horizontal bar of menus — application-style File / Edit / View navigation.
+- **`multi-step-form`** — A guarded, branching flow around a Stepper — conditional steps, sync and async advance guards, locking, reachability-derived deep links and resume, and a phone layout chosen from the same predicate. Owns no fields and no validator.
 - **`navigation-menu`** — A collection of links for navigating websites — triggers that open one shared panel, and plain links styled to match.
 - **`page-header`** — The standardized header at the top of a page — back button, breadcrumb trail, title, description, actions, secondary menu, and a favorite star.
 - **`pagination`** — Page navigation — previous/next, numbered page links, an ellipsis for long ranges, and the active page.
 - **`sidebar`** — A composable, themeable and customizable sidebar — a provider, a collapsible panel with header, content and footer, labelled groups, menu rows with actions, badges and submenus, a rail and a trigger.
-- **`stepper`** — A bounded linear process as an ordered list — complete/current/upcoming/error states on StatusIcon's vocabulary, aria-current=step, advance-gating message, focus follows the process.
+- **`stepper`** — A bounded linear process as an ordered list — seven step states on a numbered rail that fills in behind you, aria-current=step, orientation chosen from the step count, and a compact summary below a container width.
 - **`tabs`** — A set of layered sections of content — known as tab panels — that are displayed one at a time.
 
 ## Feedback
@@ -116,7 +117,6 @@ starts with `icon-` is a component and never an icon.
 - **`progress`** — Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
 - **`provider`** — The single app-root wrapper — theme (next-themes), Base UI toasts, tooltip delays, and text direction in one mount-once component.
 - **`skeleton`** — A pulsing placeholder that reserves layout space while content loads.
-- **`sonner`** — The sonner toaster, themed onto the token contract — an alternative notification engine with its own imperative API.
 - **`spinner`** — An indeterminate loading indicator that inherits its host's ink.
 - **`toast`** — Brief, non-blocking notifications — a stacking Base UI Toast surface with typed icons, actions and promise toasts.