@devalok/shilp-sutra 0.47.0 → 0.49.0

package/docs/components/ui/progress.md

@@ -4,38 +4,76 @@
 - Server-safe: No
 - Category: ui
 
+A linear progress bar. Use the smart all-in-one `<Progress value={70} />` for the
+common cases, or the compound parts (`Progress.Root` / `Track` / `Indicator` /
+`Segment` / `Label` / `Value`) for full layout control and multi-segment bars.
+
 ## Props
-    value: number (0-100) — omit for indeterminate
+    value: number | null (0–max) — omit or null for an indeterminate bar
+    max: number (scale maximum, default 100)
     size: "sm" | "md" | "lg" (track height)
-    color: "default" | "success" | "warning" | "error" (indicator color)
-    autoColor: boolean (auto-shifts color by value: 0-59=default, 60-84=warning, 85-100=success, >100=error)
-    showLabel: boolean (shows percentage text)
-    indicatorClassName: string
+    color: "accent" | "success" | "warning" | "error" (indicator color)
+    autoColor: boolean (auto-shift color by value: 0-59=accent, 60-84=warning, 85-100=success, >100=error)
+    label: ReactNode (descriptive label rendered before the bar; names the bar for a11y)
+    showValue: boolean (shows the "{n}%" readout after the bar)
+    segments: { value: number; color?: "accent" | "success" | "warning" | "error" }[] (multi-segment bar; overrides the single indicator)
+    trackClassName: string (class for the Track element)
+    indicatorClassName: string (class for the single Indicator; ignored when segments set)
+
+## Compound Components
+    Progress (smart all-in-one — value/size/color/label/showValue/autoColor/segments)
+    Progress.Root (layout container + context; owns value/max/size)
+      Progress.Label (descriptive label; give it id + point Track's aria-labelledby at it)
+      Progress.Track (the aria progressbar + track visual; holds Indicator or Segments)
+        Progress.Indicator (single fill; color, or auto-color by value)
+        Progress.Segment (one slice of a multi-segment bar — value + color)
+      Progress.Value (the "{n}%" readout; custom via children or a `format` fn)
 
 ## Defaults
     size: "md"
-    color: "default"
+    color: "accent"
+    max: 100
 
 ## Example
 ```jsx
-<Progress value={75} color="success" showLabel />
-<Progress size="sm" />  {/* indeterminate */}
+// Simple:
+<Progress value={75} color="success" showValue />
+<Progress size="sm" />                                 {/* indeterminate */}
+<Progress value={80} autoColor showValue />            {/* color follows value */}
+
+// Multi-segment (Mantine-style):
+<Progress segments={[{ value: 40, color: 'success' }, { value: 30, color: 'warning' }]} />
+
+// Compound — full control:
+<Progress.Root value={62} size="lg">
+  <Progress.Label id="storage-lbl">Storage</Progress.Label>
+  <Progress.Track aria-labelledby="storage-lbl">
+    <Progress.Indicator color="warning" />
+  </Progress.Track>
+  <Progress.Value format={(pct) => `${pct}% of 50 GB`} />
+</Progress.Root>
 ```
 
 ## Composability
-- **Radix Progress** underneath — `value` (determinate) or absent (indeterminate). Standard ARIA: role=progressbar, aria-valuenow/min/max.
-- **autoColor semantic signal:** Maps value thresholds to color so consumers don't have to manually compute: 0–59=default, 60–84=warning, 85–100=success, >100=error. Useful for storage meters, budget trackers, goal progress.
-- **Indeterminate:** Omit `value` to get a continuous animated indeterminate bar. Use for unknown-duration loads.
-- **Progress vs ProgressRing:** Progress is a linear bar (horizontal). ProgressRing is circular. ProgressRing offers multi-ring stacked variants; Progress doesn't.
-- **Inside Card/StatCard:** StatCard has a `progress` prop that renders a thin inline version — use that inside StatCards instead of a separate Progress.
+- **Two APIs, one component.** The smart `<Progress>` composes the parts for you; reach for the compound parts when you need a custom layout (label above the bar, value inside, multiple bars) or multi-segment fills. Structure follows Ark UI / Chakra; `Progress.Segment` follows Mantine.
+- **`Progress.Track` is the accessible progressbar** (role=progressbar, aria-valuenow/min/max from `Root`'s value). Give it a name via `aria-label`, or a `Progress.Label` + matching `aria-labelledby`. The smart form wires this from the `label` prop / a passed `aria-label` automatically.
+- **autoColor semantic signal:** maps value thresholds to color (0–59 accent · 60–84 warning · 85–100 success · >100 error) — storage meters, budget trackers, goal progress. Pass an explicit `color` to opt out.
+- **Segments** render side-by-side, each `value` as a % of `max`; the Track's aria value still reflects `Root`'s `value`.
+- **Indeterminate:** omit `value` (or pass `null`) for the continuous sweep. Motion-reduced users get a static bar.
+- **Progress vs ProgressRing:** Progress is linear; `ProgressRing` is circular (with multi-ring stacked variants).
 
 ## Gotchas
-- Omit value (or pass undefined) for indeterminate animation
-- `autoColor` overrides `color` when `value` is set — do not pass both unless you want autoColor to win
+- Omit `value` (or pass `null`) for indeterminate.
+- Pass an explicit `color` to override `autoColor`.
+- Compound `Progress.Track` needs a name — an `aria-label`, or a `Progress.Label` whose `id` the Track's `aria-labelledby` points to. A Track with neither is an unnamed progressbar (axe will flag it).
+- `Progress.Indicator` / `Segment` / `Value` throw if rendered outside `Progress.Root`.
 
 ## Changes
+### v0.49.0
+- **BREAKING** Progress redesigned as a compound component. Renamed `showLabel` → `showValue`. The `color` neutral value `"default"` → `"accent"` (the type is now `"accent" | "success" | "warning" | "error"`). Added compound parts (`Progress.Root/Track/Indicator/Segment/Label/Value`), a `label` prop, a `max` prop, a `segments` prop (multi-segment bars), and `trackClassName`. Migrate `showLabel` → `showValue` and `color="default"` → `color="accent"` (or drop it — accent is the default).
+
 ### v0.29.0
-- **Added** `autoColor` prop — automatically shifts indicator color based on value thresholds (0-59 default, 60-84 warning, 85-100 success, >100 error)
+- **Added** `autoColor` prop — automatically shifts indicator color based on value thresholds
 
 ### v0.1.0
 - **Added** Initial release with `size`, `color`, `indeterminate` variants and optional label slot

package/docs/components/ui/radio.md

@@ -12,6 +12,7 @@
     disabled: boolean (propagates to all items)
     orientation: "horizontal" | "vertical"
     name: string (form name for all items)
+    state: "default" | "error" | "warning" | "success" (validation; sets aria-invalid on the group + tints item borders. Inherited from FormField when omitted)
 
 ### RadioGroupItem
     value: string (REQUIRED — what's selected when this item is checked)
@@ -44,14 +45,17 @@
 - **RadioGroup propagates** `disabled` to every RadioGroupItem; items can opt back in with `disabled={false}` for granular control (rare).
 - **Labels:** RadioGroupItem has no intrinsic label — pair each with `<Label htmlFor="x" />` + `<RadioGroupItem id="x" value="..." />`. Screen readers announce the group label (from FormField or aria-labelledby on RadioGroup) plus each item's label.
 - **Form libraries:** RadioGroup works with react-hook-form via Controller (onValueChange maps to field.onChange). The `name` prop puts a hidden form input per item for native form serialization.
-- **FormField integration:** RadioGroup does NOT auto-consume FormField error state. For error visuals, style the RadioGroup surround (e.g. via aria-invalid on a wrapping fieldset) — individual radios don't show red borders the way Inputs do.
+- **FormField integration:** RadioGroup now consumes FormField state (or set `state` explicitly). It sets `aria-invalid` on the group and tints each item's border to match — unified with the other form controls via the shared `FieldState` type. An explicit `state` prop wins over FormField context.
 
 ## Gotchas
 - Each RadioGroupItem needs a unique `value` prop
 - Pair each item with a Label for accessibility
-- RadioGroup does NOT auto-inherit FormField error state — handle error styling at the group level
+- RadioGroup inherits FormField state; pass `state` explicitly to override
 
 ## Changes
+### v0.49.0
+- **Added** `state` prop on RadioGroup (`FieldState = "default" | "error" | "warning" | "success"`) — unified field-state API. Sets `aria-invalid` + tints item borders, and now inherits from `FormField` context.
+
 ### v0.4.2
 - **Added** `RadioGroupProps`, `RadioGroupItemProps` type exports
 

package/docs/components/ui/select.md

@@ -7,12 +7,12 @@
 ## Props
 ### SelectTrigger
     variant: "default" | "outline" | "ghost"
-    color: "default" | "error" | "success" | "warning" (sets aria-invalid when error)
+    state: "default" | "error" | "warning" | "success" (validation; sets aria-invalid when error. Inherited from FormField when omitted)
     size: "xs" | "sm" | "md" | "lg"
 
 ## Compound Components
     Select (root — value, onValueChange, defaultValue)
-      SelectTrigger (variant/color/size go HERE, not on Select root)
+      SelectTrigger (variant/state/size go HERE, not on Select root)
         SelectValue (placeholder)
       SelectContent
         SelectGroup (optional grouping)
@@ -21,7 +21,7 @@
         SelectSeparator
 
 ## Defaults
-    SelectTrigger variant="default", color="default", size="md"
+    SelectTrigger variant="default", state="default", size="md"
 
 ## Example
 ```jsx
@@ -38,10 +38,10 @@
 
 ## Composability
 - **Radix Select** underneath — `value`/`onValueChange`/`defaultValue`/`open`/`onOpenChange` standard state.
-- **Styling props live on SelectTrigger, not Select root.** The Select root owns value/state; the Trigger owns appearance (variant/color/size). Setting `<Select size="lg">` silently does nothing — TypeScript won't catch it.
+- **Styling props live on SelectTrigger, not Select root.** The Select root owns value/state; the Trigger owns appearance (variant/state/size). Setting `<Select size="lg">` silently does nothing — TypeScript won't catch it.
 - **SelectItem requires `value`** — unique within the Select. Labels are the children of SelectItem.
 - **SelectGroup + SelectLabel:** Organize options into sections with a non-interactive section heading.
-- **FormField integration:** Set `color="error"` on SelectTrigger for error visuals. Not auto-consumed from FormField (same as Checkbox/Radio — form-library convention for select controls).
+- **FormField integration:** Set `state="error"` on SelectTrigger for error visuals, or omit it inside a `<FormField state="error">` — SelectTrigger now inherits the field state from context (explicit `state` prop wins). Unified with Input/Textarea/Checkbox/Radio/Switch/Combobox via the shared `FieldState` type.
 - **Portal + z-popover (1400):** content portals to body, stacks above Dialog/Sheet/other overlays.
 - **Select vs Combobox vs Autocomplete:** Select = short fixed list, click-to-open, no typeahead. Combobox = searchable, forced selection. Autocomplete = searchable, free text. Pick by list size and search need.
 
@@ -50,6 +50,10 @@
 - `<Select size="lg">` is silently ignored (no TypeScript error)
 
 ## Changes
+### v0.49.0
+- **BREAKING** Renamed the SelectTrigger `color` prop → `state` (unified field-state API across all form controls; type `FieldState = "default" | "error" | "warning" | "success"`). Migrate `<SelectTrigger color="error">` → `<SelectTrigger state="error">`.
+- **Added** SelectTrigger now inherits validation state from `FormField` context (was manual-only before).
+
 ### v0.31.0
 - **Added** `variant` prop on SelectTrigger: `default | outline | ghost`
 - **Added** `color` prop on SelectTrigger: `default | error | success | warning`. Sets `aria-invalid` when error.

package/docs/components/ui/switch.md

@@ -7,7 +7,7 @@
 ## Props
     checked: boolean
     onCheckedChange: (checked: boolean) => void
-    error: boolean (shows red border/bg)
+    state: "default" | "error" | "warning" | "success" (validation border/checked-track tint; error sets aria-invalid. Inherited from FormField when omitted. Distinct from `color`, the ON-track tint)
     disabled: boolean
     size: "sm" | "md" | "lg"
     color: "accent" | "success" | "warning"
@@ -35,6 +35,9 @@
 - Switch does NOT auto-consume FormField — pass `error` explicitly inside a FormField
 
 ## Changes
+### v0.49.0
+- **BREAKING** Removed the `error: boolean` prop; use `state` (`FieldState = "default" | "error" | "warning" | "success"`). Migrate `<Switch error />` → `<Switch state="error" />`. Gains `warning`/`success` and inherits from `FormField`. (`color` is unchanged — it's the ON-track tint, not validation.)
+
 ### v0.29.0
 - **Added** `size` prop: `"sm"` (18px track) | `"md"` (24px, default) | `"lg"` (28px track)
 - **Added** `color` prop: `"accent"` (default) | `"success"` | `"warning"` for checked-state color

package/docs/components/ui/table-row-link.md

@@ -18,7 +18,7 @@
   <TableCell><Badge color="success">Active</Badge></TableCell>
   <TableCell>
     <TableRowActions>
-      <IconButton className="relative z-[1]" size="xs" variant="ghost" aria-label={`Actions for ${name}`} icon={<IconDots />} />
+      <IconButton className="relative z-[1]" size="sm" variant="ghost" aria-label={`Actions for ${name}`} icon={<IconDots />} />
     </TableRowActions>
   </TableCell>
 </TableRow>

package/docs/components/ui/table.md

@@ -16,7 +16,8 @@
     Reveal is opacity-based: buttons stay in the tab order permanently, appear on row hover AND :focus-within, and are always visible on touch (pointer-coarse). Give the column a visually-hidden header.
 
 ### TableRowLink (separate import: ui/table-row-link — client component)
-    href: string (required); stretch: boolean (default true)
+    href: string (required)
+    stretch: boolean (default: true)
     A real anchor placed in the row's primary cell (`<TableCell className="relative">`), stretched across the row via a pseudo-element — cmd/ctrl+click, middle-click, and context menu work, unlike onClick-on-row. Keyboard focus draws a row-level ring. Other interactive elements in the row need `className="relative z-[1]"`. `stretch={false}` = title-only link (keeps row text selectable).
 
 ## Compound Components

package/docs/recipes/index.md

@@ -21,7 +21,7 @@ Pick the recipe that matches your framework. Detection criteria are listed at th
 | Vite + React | [install-vite.md](./install-vite.md) | `vite.config.*` exists; SPA or MPA |
 | Astro | [install-astro.md](./install-astro.md) | `astro.config.*` exists |
 | Remix | [install-remix.md](./install-remix.md) | `remix.config.*` or Remix v2 with Vite |
-| TanStack Start | [install-tanstack-start.md](./install-tanstack-start.md) | `app.config.*` with `@tanstack/start` |
+| TanStack Start | [install-tanstack-start.md](./install-tanstack-start.md) | `@tanstack/react-start` + `vite.config.*` (the current Vite-plugin setup; the retired Vinxi `app.config.*` + `@tanstack/start` must migrate first) |
 
 If the framework is not listed, start with [install-vite.md](./install-vite.md) and adapt — most React+Tailwind setups follow the same shape.
 

package/docs/recipes/install-astro.md

@@ -31,18 +31,21 @@ pnpm add sonner
 
 ### 2a. Optional peer dependencies (install ONLY when importing the matching subpath)
 
-Some components ship hard peers as optional. **Install BEFORE first import** or Astro's Vite build will fail with `Failed to resolve import`. Skip if you only use core components.
-
-| When you import…                                          | Install                                                                                                |
-|-----------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
-| `@devalok/shilp-sutra/ui/charts/*`                         | `pnpm add d3-array d3-axis d3-format d3-interpolate d3-scale d3-selection d3-shape d3-time-format d3-transition` |
-| `@devalok/shilp-sutra/ui/data-table`                       | `pnpm add @tanstack/react-table @tanstack/react-virtual`                                                |
-| `@devalok/shilp-sutra/composed/date-picker` (+ DateRange, DateTime, Calendar) | `pnpm add date-fns`                                                                       |
-| `@devalok/shilp-sutra/composed/rich-text-editor` (+ RichChatInput, RichTextViewer) | `pnpm add @tiptap/react @tiptap/starter-kit @tiptap/extension-placeholder`            |
-| `@devalok/shilp-sutra/ui/input-otp`                        | `pnpm add input-otp`                                                                                    |
-| `@devalok/shilp-sutra/composed/file-preview`               | `pnpm add react-pdf react-zoom-pan-pinch`                                                               |
-| `@devalok/shilp-sutra/composed/markdown-viewer`            | `pnpm add react-markdown react-syntax-highlighter`                                                      |
-| Any `Icon` / `IconButton` with Tabler icons                | `pnpm add @tabler/icons-react`                                                                          |
+Some components ship hard peers as optional. **Install BEFORE first import.** ⚠ On Vite / Rolldown a missing peer may **not** fail the build — the bundler can silently replace the import with a stub that throws `Could not resolve "…"` in the browser at runtime, while the build still exits 0. A green build is therefore **not** proof the app works. Confirm coverage with the MCP `verify_setup` / `preflight` tools or the table below. Skip only if you use core components.
+
+| When you import… | Install |
+|---|---|
+| `@devalok/shilp-sutra/composed/date-picker` | `pnpm add date-fns` |
+| `@devalok/shilp-sutra/composed/file-preview` | `pnpm add react-pdf react-zoom-pan-pinch` |
+| `@devalok/shilp-sutra/composed/markdown-viewer` | `pnpm add react-markdown react-syntax-highlighter remark-gfm` |
+| `@devalok/shilp-sutra/composed/schedule-view` | `pnpm add date-fns` |
+| `@devalok/shilp-sutra/ui/charts` | `pnpm add d3-axis d3-scale d3-selection d3-shape` |
+| `@devalok/shilp-sutra/ui/data-table` | `pnpm add @tanstack/react-table @tanstack/react-virtual` |
+| `@devalok/shilp-sutra/ui/data-table-toolbar` | `pnpm add @tanstack/react-table` |
+| `@devalok/shilp-sutra/ui/input-otp` | `pnpm add input-otp` |
+| `@devalok/shilp-sutra/ui/toast` | `pnpm add sonner` |
+| `@devalok/shilp-sutra/ui/toaster` | `pnpm add sonner` |
+| Any `Icon` / `IconButton` with Tabler icons (near-universal — most components use icons internally, so it is a base-install peer) | `pnpm add @tabler/icons-react` |
 
 ## 3. Wire Tailwind 4 in `astro.config`
 

package/docs/recipes/install-next-app-router.md

@@ -46,16 +46,19 @@ pnpm add sonner
 
 Some components depend on third-party libraries that ship as optional peers. **Install BEFORE first import** of the matching component, or `next build` will exit with `Module not found`. Skip entirely if you only use core components (`Button`, `Text`, `Stack`, `Dialog`, `Toast`, `Form*`, `Input`, `Card`, etc.).
 
-| When you import…                                          | Install                                                                                                |
-|-----------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
-| `@devalok/shilp-sutra/ui/charts/*` (BarChart, LineChart, …)| `pnpm add d3-array d3-axis d3-format d3-interpolate d3-scale d3-selection d3-shape d3-time-format d3-transition` |
-| `@devalok/shilp-sutra/ui/data-table`                       | `pnpm add @tanstack/react-table @tanstack/react-virtual`                                                |
-| `@devalok/shilp-sutra/composed/date-picker` (+ DateRange, DateTime, Calendar) | `pnpm add date-fns`                                                                       |
-| `@devalok/shilp-sutra/composed/rich-text-editor` (+ RichChatInput, RichTextViewer) | `pnpm add @tiptap/react @tiptap/starter-kit @tiptap/extension-placeholder`            |
-| `@devalok/shilp-sutra/ui/input-otp`                        | `pnpm add input-otp`                                                                                    |
-| `@devalok/shilp-sutra/composed/file-preview`               | `pnpm add react-pdf react-zoom-pan-pinch`                                                               |
-| `@devalok/shilp-sutra/composed/markdown-viewer`            | `pnpm add react-markdown react-syntax-highlighter`                                                      |
-| Any `Icon` / `IconButton` use with Tabler icons            | `pnpm add @tabler/icons-react`                                                                          |
+| When you import… | Install |
+|---|---|
+| `@devalok/shilp-sutra/composed/date-picker` | `pnpm add date-fns` |
+| `@devalok/shilp-sutra/composed/file-preview` | `pnpm add react-pdf react-zoom-pan-pinch` |
+| `@devalok/shilp-sutra/composed/markdown-viewer` | `pnpm add react-markdown react-syntax-highlighter remark-gfm` |
+| `@devalok/shilp-sutra/composed/schedule-view` | `pnpm add date-fns` |
+| `@devalok/shilp-sutra/ui/charts` | `pnpm add d3-axis d3-scale d3-selection d3-shape` |
+| `@devalok/shilp-sutra/ui/data-table` | `pnpm add @tanstack/react-table @tanstack/react-virtual` |
+| `@devalok/shilp-sutra/ui/data-table-toolbar` | `pnpm add @tanstack/react-table` |
+| `@devalok/shilp-sutra/ui/input-otp` | `pnpm add input-otp` |
+| `@devalok/shilp-sutra/ui/toast` | `pnpm add sonner` |
+| `@devalok/shilp-sutra/ui/toaster` | `pnpm add sonner` |
+| Any `Icon` / `IconButton` with Tabler icons (near-universal — most components use icons internally, so it is a base-install peer) | `pnpm add @tabler/icons-react` |
 
 > These aren't in core deps so consumers who never render a chart, OTP input, or rich-text editor don't pay the install / bundle cost. One-time decision at install.
 
@@ -164,9 +167,14 @@ export function Providers({ children }: { children: ReactNode }) {
 }
 ```
 
-`next-themes` is already in the install list from § 2 — no extra install step needed here. If `<Toaster />` is not used:
+> ⚠ **This default `Providers` renders `<Toaster />`, which imports `sonner`.** Install it now or `next build` fails with `Module not found: Can't resolve 'sonner'`:
+> ```bash
+> pnpm add sonner
+> ```
 
-- Drop the `Toaster` import and its JSX usage
+`next-themes` is already in the install list from § 2 — no extra install step needed here. If you do **not** want toasts:
+
+- Drop the `Toaster` import and its JSX usage from `Providers`
 - Skip installing `sonner`
 
 Mount `<Providers>` from `app/layout.tsx` (or `src/app/layout.tsx`). **Replace the scaffold's layout** with the version below — the scaffold imports `next/font/google` (Geist) and applies font-variable classes to `<html>`, which you don't need when shilp-sutra ships its own fonts:

package/docs/recipes/install-next-pages.md

@@ -16,7 +16,7 @@ If both `app/` and `pages/` exist, prefer [install-next-app-router.md](./install
 
 Same dependencies as the App Router recipe — see [install-next-app-router.md § 2](./install-next-app-router.md#2-install-dependencies). Replace `next-themes`'s `attribute="class"` setup with the same on Pages Router (it works identically).
 
-**Optional peer dependencies** — if you'll render `<DataTable>`, any chart, `<DatePicker>`, `<RichTextEditor>`, `<InputOTP>`, `<FilePreview>`, `<MarkdownViewer>`, or use Tabler icons, install the matching peers BEFORE first import. Full table at [install-next-app-router.md § 2a](./install-next-app-router.md#2a-optional-peer-dependencies-install-only-when-importing-the-matching-subpath) — identical for Pages Router.
+**Optional peer dependencies** — if you'll render `<DataTable>`, any chart, `<DatePicker>`, `<ScheduleView>`, `<InputOTP>`, `<FilePreview>`, `<MarkdownViewer>`, or `<Toaster>`, install the matching peers BEFORE first import. (The emoji picker and rich-text editors bundle their deps — no install needed; `@tabler/icons-react` auto-installs as a required peer.) Full table at [install-next-app-router.md § 2a](./install-next-app-router.md#2a-optional-peer-dependencies-install-only-when-importing-the-matching-subpath) — identical for Pages Router.
 
 ## 3. PostCSS
 
@@ -67,6 +67,8 @@ export default function App({ Component, pageProps }: AppProps) {
 }
 ```
 
+> ⚠ **This renders `<Toaster />`, which imports `sonner`.** Install it or `next build` fails with `Module not found: Can't resolve 'sonner'`: `pnpm add sonner`. If you don't want toasts, drop the `Toaster` import + usage and skip `sonner`.
+
 For `next-themes` to avoid hydration warnings, add a `_document.tsx` with `suppressHydrationWarning` on the `<html>`:
 
 ```tsx

package/docs/recipes/install-remix.md

@@ -10,7 +10,7 @@ You are in this recipe if:
 - `vite.config.{ts,js}` exists with the `vitePlugin` from `@remix-run/dev`
 - `app/root.tsx` exists with `<Outlet />` inside `<Document>` shell
 
-For React Router v7 (the spiritual successor to Remix), use the [install-vite.md](./install-vite.md) recipe — it works the same way.
+> **New projects scaffold as React Router v7, not Remix.** `create-remix` is deprecated and redirects to `create-react-router`; Remix v2 was upstreamed into React Router (maintenance mode). If you ran `create-react-router`, you have an RR7 **framework-mode** app (`@react-router/dev` + `react-router build` + `app/root.tsx` + `ssr: true`) — verified cold with shilp-sutra (SSR render, HTTP 200). Its wiring is the same shape as this recipe: `@tailwindcss/vite` plugin, `@import "@devalok/shilp-sutra/css"` in `app/app.css`, and **no `transpilePackages`** (Vite resolves our ESM). Ignore the SPA-only steps in [install-vite.md](./install-vite.md) (`index.html` bootstrap, `main.tsx` `createRoot`) — RR7 framework mode has its own `root.tsx` shell, like this recipe.
 
 ## 2. Install
 
@@ -27,18 +27,21 @@ pnpm add sonner   # only if rendering <Toaster />
 
 ### 2a. Optional peer dependencies (install ONLY when importing the matching subpath)
 
-Some components ship hard peers as optional. **Install BEFORE first import** or Remix's Vite build will fail with `Failed to resolve import`. Skip if you only use core components.
-
-| When you import…                                          | Install                                                                                                |
-|-----------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
-| `@devalok/shilp-sutra/ui/charts/*`                         | `pnpm add d3-array d3-axis d3-format d3-interpolate d3-scale d3-selection d3-shape d3-time-format d3-transition` |
-| `@devalok/shilp-sutra/ui/data-table`                       | `pnpm add @tanstack/react-table @tanstack/react-virtual`                                                |
-| `@devalok/shilp-sutra/composed/date-picker` (+ DateRange, DateTime, Calendar) | `pnpm add date-fns`                                                                       |
-| `@devalok/shilp-sutra/composed/rich-text-editor` (+ RichChatInput, RichTextViewer) | `pnpm add @tiptap/react @tiptap/starter-kit @tiptap/extension-placeholder`            |
-| `@devalok/shilp-sutra/ui/input-otp`                        | `pnpm add input-otp`                                                                                    |
-| `@devalok/shilp-sutra/composed/file-preview`               | `pnpm add react-pdf react-zoom-pan-pinch`                                                               |
-| `@devalok/shilp-sutra/composed/markdown-viewer`            | `pnpm add react-markdown react-syntax-highlighter`                                                      |
-| Any `Icon` / `IconButton` with Tabler icons                | `pnpm add @tabler/icons-react`                                                                          |
+Some components ship hard peers as optional. **Install BEFORE first import.** ⚠ On Vite 8 / Rolldown a missing peer does **not** fail the build — Rolldown silently replaces the import with a stub that throws `Could not resolve "…"` in the browser at runtime, while the build still exits 0. A green build is therefore **not** proof the app works. Confirm coverage with the MCP `verify_setup` / `preflight` tools or the table below. Skip only if you use core components.
+
+| When you import… | Install |
+|---|---|
+| `@devalok/shilp-sutra/composed/date-picker` | `pnpm add date-fns` |
+| `@devalok/shilp-sutra/composed/file-preview` | `pnpm add react-pdf react-zoom-pan-pinch` |
+| `@devalok/shilp-sutra/composed/markdown-viewer` | `pnpm add react-markdown react-syntax-highlighter remark-gfm` |
+| `@devalok/shilp-sutra/composed/schedule-view` | `pnpm add date-fns` |
+| `@devalok/shilp-sutra/ui/charts` | `pnpm add d3-axis d3-scale d3-selection d3-shape` |
+| `@devalok/shilp-sutra/ui/data-table` | `pnpm add @tanstack/react-table @tanstack/react-virtual` |
+| `@devalok/shilp-sutra/ui/data-table-toolbar` | `pnpm add @tanstack/react-table` |
+| `@devalok/shilp-sutra/ui/input-otp` | `pnpm add input-otp` |
+| `@devalok/shilp-sutra/ui/toast` | `pnpm add sonner` |
+| `@devalok/shilp-sutra/ui/toaster` | `pnpm add sonner` |
+| Any `Icon` / `IconButton` with Tabler icons (near-universal — most components use icons internally, so it is a base-install peer) | `pnpm add @tabler/icons-react` |
 
 ## 3. Wire Tailwind 4 in `vite.config.ts`
 

package/docs/recipes/install-tanstack-start.md

@@ -14,6 +14,8 @@ You are in this recipe if:
 
 If instead you see `app.config.ts` + `@tanstack/start`, that is the legacy Vinxi setup — this recipe does not apply until you migrate.
 
+> **Scaffolded with `create-start` and got a Router SPA?** As of `@tanstack/create-start` 0.59, the default template is a TanStack **Router** SPA — Vite + `@tanstack/react-router` + an `index.html` + `src/main.tsx` (client `createRoot`), with **no** `@tanstack/react-start` and no SSR server entry. That is NOT the Start SSR setup this recipe covers — use [install-vite.md](./install-vite.md) instead (it is router-agnostic and covers TanStack Router SPAs cleanly). This recipe applies only when `@tanstack/react-start` is a dependency.
+
 ## 2. Install
 
 ```bash
@@ -34,18 +36,21 @@ pnpm add sonner   # only if rendering <Toaster />
 
 ### 2a. Optional peer dependencies (install ONLY when importing the matching subpath)
 
-Some components ship hard peers as optional. **Install BEFORE first import** or the TanStack Start dev/build will fail with `Failed to resolve import`. Skip if you only use core components.
-
-| When you import…                                          | Install                                                                                                |
-|-----------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
-| `@devalok/shilp-sutra/ui/charts/*`                         | `pnpm add d3-array d3-axis d3-format d3-interpolate d3-scale d3-selection d3-shape d3-time-format d3-transition` |
-| `@devalok/shilp-sutra/ui/data-table`                       | `pnpm add @tanstack/react-table @tanstack/react-virtual`                                                |
-| `@devalok/shilp-sutra/composed/date-picker` (+ DateRange, DateTime, Calendar) | `pnpm add date-fns`                                                                       |
-| `@devalok/shilp-sutra/composed/rich-text-editor` (+ RichChatInput, RichTextViewer) | `pnpm add @tiptap/react @tiptap/starter-kit @tiptap/extension-placeholder`            |
-| `@devalok/shilp-sutra/ui/input-otp`                        | `pnpm add input-otp`                                                                                    |
-| `@devalok/shilp-sutra/composed/file-preview`               | `pnpm add react-pdf react-zoom-pan-pinch`                                                               |
-| `@devalok/shilp-sutra/composed/markdown-viewer`            | `pnpm add react-markdown react-syntax-highlighter`                                                      |
-| Any `Icon` / `IconButton` with Tabler icons                | `pnpm add @tabler/icons-react`                                                                          |
+Some components ship hard peers as optional. **Install BEFORE first import.** ⚠ On Vite 8 / Rolldown a missing peer does **not** fail the build — Rolldown silently replaces the import with a stub that throws `Could not resolve "…"` in the browser at runtime, while the build still exits 0. A green build is therefore **not** proof the app works. Confirm coverage with the MCP `verify_setup` / `preflight` tools or the table below. Skip only if you use core components.
+
+| When you import… | Install |
+|---|---|
+| `@devalok/shilp-sutra/composed/date-picker` | `pnpm add date-fns` |
+| `@devalok/shilp-sutra/composed/file-preview` | `pnpm add react-pdf react-zoom-pan-pinch` |
+| `@devalok/shilp-sutra/composed/markdown-viewer` | `pnpm add react-markdown react-syntax-highlighter remark-gfm` |
+| `@devalok/shilp-sutra/composed/schedule-view` | `pnpm add date-fns` |
+| `@devalok/shilp-sutra/ui/charts` | `pnpm add d3-axis d3-scale d3-selection d3-shape` |
+| `@devalok/shilp-sutra/ui/data-table` | `pnpm add @tanstack/react-table @tanstack/react-virtual` |
+| `@devalok/shilp-sutra/ui/data-table-toolbar` | `pnpm add @tanstack/react-table` |
+| `@devalok/shilp-sutra/ui/input-otp` | `pnpm add input-otp` |
+| `@devalok/shilp-sutra/ui/toast` | `pnpm add sonner` |
+| `@devalok/shilp-sutra/ui/toaster` | `pnpm add sonner` |
+| Any `Icon` / `IconButton` with Tabler icons (near-universal — most components use icons internally, so it is a base-install peer) | `pnpm add @tabler/icons-react` |
 
 ## 3. Wire Tailwind 4 in `vite.config.ts`
 
@@ -115,6 +120,8 @@ function RootComponent() {
 }
 ```
 
+> **Newer scaffolds use `shellComponent`.** As of `@tanstack/create-start` 0.59 the generated `__root.tsx` uses `shellComponent: RootDocument` (which receives `{ children }`) instead of `component: RootComponent` with `<Outlet />`. Both wire up the same way for shilp-sutra — put the `{ rel: "stylesheet", href: appCss }` link in `head()` and keep `<HeadContent />` + `<Scripts />`. If your `__root.tsx` already has a `shellComponent`, add the stylesheet link to its existing `head()` rather than replacing the component. (Verified cold: shilp-sutra components — Button, Text, MarkdownViewer, EmojiPickerPopover — SSR-render cleanly under TanStack Start, HTTP 200.)
+
 ## 5. Theme toggle
 
 Add a pre-hydration bootstrap so there is no flash of the wrong theme. The cleanest place is a `scripts` entry on the root route (runs before hydration); a static `public/theme-bootstrap.js` referenced from `<head>` also works and is CSP-friendly.

package/docs/recipes/install-vite.md

@@ -42,18 +42,21 @@ pnpm add sonner
 
 ### 2a. Optional peer dependencies (install ONLY when importing the matching subpath)
 
-Some components ship hard peers as optional. **Install BEFORE first import** or `vite dev` / `vite build` will fail with `Failed to resolve import`. Skip if you only use core components.
-
-| When you import…                                          | Install                                                                                                |
-|-----------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
-| `@devalok/shilp-sutra/ui/charts/*`                         | `pnpm add d3-array d3-axis d3-format d3-interpolate d3-scale d3-selection d3-shape d3-time-format d3-transition` |
-| `@devalok/shilp-sutra/ui/data-table`                       | `pnpm add @tanstack/react-table @tanstack/react-virtual`                                                |
-| `@devalok/shilp-sutra/composed/date-picker` (+ DateRange, DateTime, Calendar) | `pnpm add date-fns`                                                                       |
-| `@devalok/shilp-sutra/composed/rich-text-editor` (+ RichChatInput, RichTextViewer) | `pnpm add @tiptap/react @tiptap/starter-kit @tiptap/extension-placeholder`            |
-| `@devalok/shilp-sutra/ui/input-otp`                        | `pnpm add input-otp`                                                                                    |
-| `@devalok/shilp-sutra/composed/file-preview`               | `pnpm add react-pdf react-zoom-pan-pinch`                                                               |
-| `@devalok/shilp-sutra/composed/markdown-viewer`            | `pnpm add react-markdown react-syntax-highlighter`                                                      |
-| Any `Icon` / `IconButton` with Tabler icons                | `pnpm add @tabler/icons-react`                                                                          |
+Some components ship hard peers as optional. **Install BEFORE first import.** ⚠ On Vite 8 / Rolldown a missing peer does **not** fail the build — Rolldown silently replaces the import with a stub that throws `Could not resolve "…"` in the browser at runtime, while `vite build` still exits 0. A green build is therefore **not** proof the app works. Confirm coverage with the MCP `verify_setup` / `preflight` tools or the table below. Skip only if you use core components.
+
+| When you import… | Install |
+|---|---|
+| `@devalok/shilp-sutra/composed/date-picker` | `pnpm add date-fns` |
+| `@devalok/shilp-sutra/composed/file-preview` | `pnpm add react-pdf react-zoom-pan-pinch` |
+| `@devalok/shilp-sutra/composed/markdown-viewer` | `pnpm add react-markdown react-syntax-highlighter remark-gfm` |
+| `@devalok/shilp-sutra/composed/schedule-view` | `pnpm add date-fns` |
+| `@devalok/shilp-sutra/ui/charts` | `pnpm add d3-axis d3-scale d3-selection d3-shape` |
+| `@devalok/shilp-sutra/ui/data-table` | `pnpm add @tanstack/react-table @tanstack/react-virtual` |
+| `@devalok/shilp-sutra/ui/data-table-toolbar` | `pnpm add @tanstack/react-table` |
+| `@devalok/shilp-sutra/ui/input-otp` | `pnpm add input-otp` |
+| `@devalok/shilp-sutra/ui/toast` | `pnpm add sonner` |
+| `@devalok/shilp-sutra/ui/toaster` | `pnpm add sonner` |
+| Any `Icon` / `IconButton` with Tabler icons (near-universal — most components use icons internally, so it is a base-install peer) | `pnpm add @tabler/icons-react` |
 
 ## 3. Wire Tailwind 4 in `vite.config.ts`
 
@@ -136,7 +139,7 @@ If you installed `sonner`, mount the Toaster once near the app root:
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { Toaster } from "@devalok/shilp-sutra/ui/toaster";
-import { App } from "./App";
+import App from "./App";
 import "./index.css";
 
 createRoot(document.getElementById("root")!).render(
@@ -149,14 +152,14 @@ createRoot(document.getElementById("root")!).render(
 
 ## 7. Verify
 
-Replace `src/App.tsx`:
+Replace `src/App.tsx` (keep the **default export** — the `create-vite` template's `main.tsx` imports it as `import App from "./App"`, so a named export would break the build with `TS2613: Module has no default export`):
 
 ```tsx
 import { Button } from "@devalok/shilp-sutra/ui/button";
 import { Stack } from "@devalok/shilp-sutra/ui/stack";
 import { Text } from "@devalok/shilp-sutra/ui/text";
 
-export function App() {
+export default function App() {
   return (
     <Stack className="p-ds-08" gap="ds-04">
       <Text variant="heading-2xl">Hello, Shilp Sutra</Text>

package/docs/recipes/troubleshoot.md

@@ -95,26 +95,25 @@ Add:
 transpilePackages: ["@devalok/shilp-sutra"],
 ```
 
-## Symptom: Build error `Cannot find module 'sonner' / 'input-otp' / 'date-fns' / '@tiptap/react' / 'react-pdf' / 'react-markdown' / '@emoji-mart/react'`
+## Symptom: Build error `Cannot find module 'sonner' / 'input-otp' / 'date-fns' / 'react-pdf' / 'react-markdown'` — OR (on Vite 8) a runtime `Could not resolve "…"` from a green build
 
-**Diagnosis:** an optional peer dependency is missing. Each component below has a peer it pulls only when imported. Install the matching peer (always BEFORE the first import):
+**Diagnosis:** an optional peer dependency is missing. Each component below has a peer it pulls only when imported. Install the matching peer (always BEFORE the first import). On Vite 8 / Rolldown this does **not** fail the build — it throws at runtime — so run the MCP `verify_setup` tool to catch it early.
 
 | You imported (per-component subpath) | Install                                                                                       |
 |--------------------------------------|-----------------------------------------------------------------------------------------------|
 | `…/ui/toaster` or `…/ui/toast`       | `pnpm add sonner`                                                                             |
 | `…/ui/input-otp`                     | `pnpm add input-otp`                                                                          |
-| `…/composed/date-picker`             | `pnpm add date-fns`                                                                           |
-| `…/composed/emoji-picker`            | `pnpm add @emoji-mart/data @emoji-mart/react`                                                 |
-| `…/composed/extensions/emoji-node` or `…/extensions/emoji-suggestion` | `pnpm add @tiptap/react @tiptap/starter-kit @tiptap/extension-placeholder`                    |
-| `…/composed/rich-text-editor`        | `pnpm add @tiptap/react @tiptap/starter-kit @tiptap/extension-placeholder`                    |
-| `…/composed/rich-chat-input`         | `pnpm add @tiptap/react @tiptap/starter-kit @tiptap/extension-placeholder`                    |
+| `…/composed/date-picker` or `…/composed/schedule-view` | `pnpm add date-fns`                                                         |
+| `…/ui/data-table` or `…/ui/data-table-toolbar` | `pnpm add @tanstack/react-table @tanstack/react-virtual`                            |
 | `…/composed/file-preview`            | `pnpm add react-pdf react-zoom-pan-pinch`                                                     |
 | `…/composed/markdown-viewer`         | `pnpm add react-markdown react-syntax-highlighter remark-gfm`                                 |
 | `…/ai/block-renderer`, `…/ai/blocks/text`, `…/ai/blocks/error` | `pnpm add react-markdown remark-gfm`                                                          |
-| Any `…/ui/charts/*`                  | `pnpm add d3-array d3-axis d3-format d3-interpolate d3-scale d3-selection d3-shape d3-time-format d3-transition` |
+| Any `…/ui/charts/*`                  | `pnpm add d3-axis d3-scale d3-selection d3-shape`                                             |
 
 These ship as **optional** peers so consumers who never render the matching component don't pay the install cost. Once you import the component, the peer becomes required. Each affected component's JSDoc carries the same install hint — hover the import in your editor to see it inline.
 
+**No longer peers (bundled since the frimousse migration):** the emoji picker (`…/composed/emoji-picker`) and the rich-text editors (`…/composed/rich-text-editor`, `…/composed/rich-chat-input`) bundle their dependencies (frimousse, `@emoji-mart/data`, TipTap) into a lazy chunk — you do **not** install anything for them. `@tabler/icons-react` is a required peer that most package managers auto-install.
+
 **Catch this at edit time, not build time:** install `@devalok/eslint-plugin-shilp-sutra` (`pnpm add -D @devalok/eslint-plugin-shilp-sutra`, then `shilpSutra.configs['flat/recommended']`). Its `prefer-per-component-import` rule flags peer-cliff symbols imported from a barrel and autofixes the path — surfacing the cliff in your editor before the bundler ever fails.
 
 For the full table in your framework's install recipe, see `install-<framework>.md → §2a. Optional peer dependencies`.