@devalok/shilp-sutra 0.44.1 → 0.45.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (131) hide show
  1. package/AGENTS.md +13 -11
  2. package/BREAKING.json +209 -27
  3. package/MIGRATION.md +34 -0
  4. package/README.md +12 -0
  5. package/dist/_chunks/badge-group.js +1 -0
  6. package/dist/_chunks/badge-group.js.map +1 -1
  7. package/dist/_chunks/block-shell.js +25 -0
  8. package/dist/_chunks/block-shell.js.map +1 -0
  9. package/dist/_chunks/chat.js +4 -2
  10. package/dist/_chunks/chat.js.map +1 -1
  11. package/dist/_chunks/document-preview.js +1 -1
  12. package/dist/_chunks/image-preview.js +4 -4
  13. package/dist/_chunks/shared.js +65 -78
  14. package/dist/_chunks/shared.js.map +1 -1
  15. package/dist/_chunks/success.js +108 -106
  16. package/dist/_chunks/success.js.map +1 -1
  17. package/dist/ai/blocks/block-shell.d.ts +19 -0
  18. package/dist/ai/blocks/block-shell.d.ts.map +1 -0
  19. package/dist/ai/blocks/block-table.d.ts.map +1 -1
  20. package/dist/ai/blocks/confirm.d.ts.map +1 -1
  21. package/dist/ai/blocks/error.d.ts.map +1 -1
  22. package/dist/ai/blocks/error.js +5 -5
  23. package/dist/ai/blocks/error.js.map +1 -1
  24. package/dist/ai/blocks/success.d.ts.map +1 -1
  25. package/dist/ai/blocks/text.d.ts.map +1 -1
  26. package/dist/ai/blocks/text.js +4 -3
  27. package/dist/ai/blocks/text.js.map +1 -1
  28. package/dist/composed/activity-feed.d.ts.map +1 -1
  29. package/dist/composed/activity-feed.js +14 -12
  30. package/dist/composed/activity-feed.js.map +1 -1
  31. package/dist/composed/file-preview/audio-preview.d.ts.map +1 -1
  32. package/dist/composed/file-preview/shared.d.ts +10 -0
  33. package/dist/composed/file-preview/shared.d.ts.map +1 -1
  34. package/dist/composed/file-preview/video-preview.d.ts.map +1 -1
  35. package/dist/composed/file-preview.js +149 -188
  36. package/dist/composed/file-preview.js.map +1 -1
  37. package/dist/composed/master-detail.d.ts.map +1 -1
  38. package/dist/composed/master-detail.js +13 -4
  39. package/dist/composed/master-detail.js.map +1 -1
  40. package/dist/composed/schedule-view.d.ts.map +1 -1
  41. package/dist/composed/schedule-view.js +52 -39
  42. package/dist/composed/schedule-view.js.map +1 -1
  43. package/dist/shell/notification-preferences.d.ts.map +1 -1
  44. package/dist/shell/notification-preferences.js +115 -114
  45. package/dist/shell/notification-preferences.js.map +1 -1
  46. package/dist/ui/badge-group.d.ts.map +1 -1
  47. package/dist/ui/card.d.ts +66 -16
  48. package/dist/ui/card.d.ts.map +1 -1
  49. package/dist/ui/card.js +85 -60
  50. package/dist/ui/card.js.map +1 -1
  51. package/dist/ui/chat/message.d.ts.map +1 -1
  52. package/dist/ui/color-input.d.ts.map +1 -1
  53. package/dist/ui/color-input.js +18 -18
  54. package/dist/ui/color-input.js.map +1 -1
  55. package/dist/ui/data-table-body.d.ts.map +1 -1
  56. package/dist/ui/data-table-body.js +94 -64
  57. package/dist/ui/data-table-body.js.map +1 -1
  58. package/dist/ui/data-table-card.d.ts.map +1 -1
  59. package/dist/ui/data-table-card.js +50 -43
  60. package/dist/ui/data-table-card.js.map +1 -1
  61. package/dist/ui/data-table-context.d.ts +0 -4
  62. package/dist/ui/data-table-context.d.ts.map +1 -1
  63. package/dist/ui/data-table-context.js +8 -12
  64. package/dist/ui/data-table-context.js.map +1 -1
  65. package/dist/ui/data-table-header.d.ts.map +1 -1
  66. package/dist/ui/data-table-header.js +2 -2
  67. package/dist/ui/data-table-header.js.map +1 -1
  68. package/dist/ui/data-table.d.ts.map +1 -1
  69. package/dist/ui/data-table.js +185 -182
  70. package/dist/ui/data-table.js.map +1 -1
  71. package/dist/ui/index.d.ts +3 -2
  72. package/dist/ui/index.d.ts.map +1 -1
  73. package/dist/ui/index.js +59 -58
  74. package/dist/ui/index.js.map +1 -1
  75. package/dist/ui/segmented-control.js +4 -4
  76. package/dist/ui/segmented-control.js.map +1 -1
  77. package/dist/ui/separator.d.ts +6 -5
  78. package/dist/ui/separator.d.ts.map +1 -1
  79. package/dist/ui/separator.js +7 -10
  80. package/dist/ui/separator.js.map +1 -1
  81. package/dist/ui/split-button.d.ts.map +1 -1
  82. package/dist/ui/split-button.js +62 -129
  83. package/dist/ui/split-button.js.map +1 -1
  84. package/dist/ui/stat-card.d.ts +7 -0
  85. package/dist/ui/stat-card.d.ts.map +1 -1
  86. package/dist/ui/stat-card.js +144 -126
  87. package/dist/ui/stat-card.js.map +1 -1
  88. package/dist/ui/table-row-link.d.ts +45 -0
  89. package/dist/ui/table-row-link.d.ts.map +1 -0
  90. package/dist/ui/table-row-link.js +16 -0
  91. package/dist/ui/table-row-link.js.map +1 -0
  92. package/dist/ui/table.d.ts +49 -5
  93. package/dist/ui/table.d.ts.map +1 -1
  94. package/dist/ui/table.js +39 -29
  95. package/dist/ui/table.js.map +1 -1
  96. package/dist/ui/toast-types.d.ts +10 -0
  97. package/dist/ui/toast-types.d.ts.map +1 -1
  98. package/dist/ui/toast.d.ts +6 -2
  99. package/dist/ui/toast.d.ts.map +1 -1
  100. package/dist/ui/toast.js +56 -54
  101. package/dist/ui/toast.js.map +1 -1
  102. package/docs/components/composed/content-card.md +2 -0
  103. package/docs/components/ui/button.md +3 -3
  104. package/docs/components/ui/card.md +27 -10
  105. package/docs/components/ui/color-input.md +2 -2
  106. package/docs/components/ui/data-table.md +8 -1
  107. package/docs/components/ui/segmented-control.md +2 -2
  108. package/docs/components/ui/separator.md +3 -1
  109. package/docs/components/ui/split-button.md +3 -0
  110. package/docs/components/ui/stat-card.md +10 -2
  111. package/docs/components/ui/table-row-link.md +41 -0
  112. package/docs/components/ui/table.md +69 -0
  113. package/docs/components/ui/toast.md +10 -6
  114. package/docs/recipes/install-next-app-router.md +1 -1
  115. package/docs/recipes/troubleshoot.md +1 -1
  116. package/llms.txt +159 -781
  117. package/make-kit/components/card.md +54 -16
  118. package/make-kit/components/table.md +45 -7
  119. package/make-kit/foundations/spacing.md +3 -1
  120. package/make-kit/foundations/surfaces.md +1 -1
  121. package/mcp-manifest.json +12349 -0
  122. package/mcp-manifest.schema.json +232 -0
  123. package/package.json +3 -3
  124. package/skill/README.md +0 -1
  125. package/skill/SKILL.md +9 -8
  126. package/skill/references/components.md +159 -781
  127. package/skill/references/setup-next-app-router.md +1 -1
  128. package/skill/references/troubleshoot.md +1 -1
  129. package/llms-full.txt +0 -7198
  130. package/llms-quick.txt +0 -251
  131. package/skill/references/components-full.md +0 -7200
package/llms-quick.txt DELETED
@@ -1,251 +0,0 @@
1
- # @devalok/shilp-sutra — quick reference for AI agents
2
-
3
- > Tailwind 4 + React 19 + CVA design system. 110+ components, OKLCH tokens, framer-motion. **Not shadcn/ui** — APIs diverge in ways noted below.
4
- >
5
- > This file is the ≤15K-token fast-path summary. Reach for `llms.txt` (~27K tokens) or `llms-full.txt` (~140K tokens) only when this isn't enough.
6
-
7
- ## SETUP (consumer install, ~5 min)
8
-
9
- ```bash
10
- pnpm add @devalok/shilp-sutra framer-motion next-themes
11
- pnpm add -D tailwindcss@^4 @tailwindcss/postcss # or @tailwindcss/vite
12
- ```
13
-
14
- Then 4 files:
15
-
16
- ```css
17
- /* globals.css — order matters */
18
- @import "tailwindcss";
19
- @import "@devalok/shilp-sutra/css";
20
- ```
21
-
22
- ```ts
23
- // next.config.ts — only if Next.js
24
- transpilePackages: ["@devalok/shilp-sutra"]
25
- ```
26
-
27
- ```tsx
28
- // app/layout.tsx — Next App Router
29
- <html lang="en" suppressHydrationWarning> {/* required for next-themes */}
30
- <body><Providers>{children}</Providers></body>
31
- </html>
32
- ```
33
-
34
- ```tsx
35
- // app/providers.tsx
36
- 'use client'
37
- import { ThemeProvider } from 'next-themes'
38
- import { Toaster } from '@devalok/shilp-sutra/ui/toaster'
39
- export function Providers({ children }) {
40
- return <ThemeProvider attribute="class" defaultTheme="system" enableSystem>{children}<Toaster /></ThemeProvider>
41
- }
42
- ```
43
-
44
- Per-framework recipes: `node_modules/@devalok/shilp-sutra/docs/recipes/install-<framework>.md` (six recipes — Next App Router, Next Pages, Vite, Astro, Remix, TanStack Start).
45
-
46
- **Theme it in 30 seconds:** https://shilp-sutra.devalok.in/themer — outputs a copy-pasteable CSS block (12-step OKLCH ramp + role tokens). Paste *after* the `@devalok/shilp-sutra/css` import.
47
-
48
- **Lint + migrate:** `pnpm add -D @devalok/eslint-plugin-shilp-sutra`, then `shilpSutra.configs['flat/recommended']`. Catches deprecated APIs, peer-cliff barrel imports, TW3 classes — most autofixable. Use the `migration` preset (`pnpm eslint --fix`) when upgrading across breaking versions.
49
-
50
- **Machine-readable breaks:** `node_modules/@devalok/shilp-sutra/BREAKING.json` lists every breaking change per version as structured data (moves, narrowings, removals). Read this for programmatic upgrade planning instead of parsing CHANGELOG prose. Schema: `BREAKING.schema.json`.
51
-
52
- ## OPTIONAL PEER DEPENDENCIES (install BEFORE first import)
53
-
54
- | When you import… | Install |
55
- |-----------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
56
- | `@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` |
57
- | `@devalok/shilp-sutra/ui/data-table` | `pnpm add @tanstack/react-table @tanstack/react-virtual` |
58
- | `@devalok/shilp-sutra/composed/date-picker` (+ DateRange, DateTime, Calendar) | `pnpm add date-fns` |
59
- | `@devalok/shilp-sutra/composed/rich-text-editor` (+ RichChatInput, RichTextViewer) | `pnpm add @tiptap/react @tiptap/starter-kit @tiptap/extension-placeholder` |
60
- | `@devalok/shilp-sutra/ui/input-otp` | `pnpm add input-otp` |
61
- | `@devalok/shilp-sutra/composed/file-preview` | `pnpm add react-pdf react-zoom-pan-pinch` |
62
- | `@devalok/shilp-sutra/composed/markdown-viewer` | `pnpm add react-markdown react-syntax-highlighter remark-gfm` |
63
- | `@devalok/shilp-sutra/ui/toaster` or `…/ui/toast` | `pnpm add sonner` |
64
- | Tabler icons in `<Icon>`, `<Button startIcon>`, etc. | `pnpm add @tabler/icons-react` |
65
-
66
- ## HARD CONSTRAINTS
67
-
68
- 1. **Tailwind 4 only.** No `tailwind.config.ts presets: [shilpSutra]` — that was removed in 0.38. CSS-only setup as above.
69
- 2. **`framer-motion@^12` required peer.** Single copy — configure pnpm/yarn overrides if you see duplicates.
70
- 3. **`sonner@^2`** required only when you render `<Toaster />` or call `toast.*`. Optional otherwise.
71
- 4. **Per-component imports keep RSC fast AND avoid peer-dep cliffs.** Barrel `@devalok/shilp-sutra/ui` works in client contexts but inflates client bundle and forces optional peers to be installed. Prefer `…/ui/text`, `…/ui/dialog`, etc. The barrel **no longer** re-exports peer-cliff symbols (`Toaster`, `toast`, `InputOTP`, `DatePicker`, `RichTextEditor`, `EmojiPicker`, `FilePreview`, `MarkdownViewer`, `BlockRenderer`, `ErrorBlock`, `TextBlock`) as of 0.40.0 — import per-component.
72
- 5. **Spacing namespace is `--spacing-ds-*`.** `p-ds-04`, `gap-ds-03` — these DO NOT replace TW4 default `p-4`, `gap-2`. Both coexist by design. Pick `p-ds-*` for values that should track DS theme changes, `p-N` for one-off layout values. **Cadence when building layouts:** pick a 3-tier scale, not every adjacent token — `ds-03` (related: label↔field), `ds-05` (grouped: between field-groups), `ds-07` (section: between blocks), optional `ds-08`+ (hero). 3-4 distinct gaps per surface max; 5+ = muddy rhythm. Anti-pattern: `ds-02` + `ds-04` as different signals on one surface (they collapse). Squint test must still show grouping.
73
- 6. **Bare `shadow` class renders no shadow in TW4.** Use `shadow-raised` (cards), `shadow-floating` (dropdowns), `shadow-overlay` (dialogs), `shadow-ring` (focus).
74
- 7. **Variant names must match CVA source exactly** — invented variant names silently no-op (CVA falls back to defaults). Grep `packages/core/src/ui/<component>.tsx` if in doubt.
75
- 8. **Default to `variant="soft"`** over `variant="outline"` for non-primary Button actions. Outline only on colored backgrounds or where primary/secondary hierarchy needs a hard border.
76
-
77
- ## ICON API (one shape across every component, v0.40.0+)
78
-
79
- Every icon-accepting prop (`startIcon`, `endIcon`, `icon`, …) takes `IconInput`:
80
-
81
- ```tsx
82
- import { IconPlus } from '@tabler/icons-react'
83
- import { Icon } from '@devalok/shilp-sutra/ui/icon'
84
-
85
- <Button startIcon={<Icon icon={IconPlus} />}>Add</Button> // canonical
86
- <Button startIcon={<IconPlus />}>Add</Button> // raw Tabler element
87
- <Button startIcon={IconPlus}>Add</Button> // component ref
88
- <Button startIcon={<span>+</span>}>Add</Button> // custom node
89
- ```
90
-
91
- All four work. Size flows from `<IconProvider>` context — don't pass `className="h-4 w-4"`. On 22 components: Button, IconButton, Badge, Combobox, SegmentedControl, Stepper, StatCard, TreeItem, OAuthButton, Chat.Message.*, AIConversation, EmptyState, BulkActionBar, ActivityFeed, CommandPalette, TopBar, Sidebar, BottomNavbar, AppCommandPalette, CommandRegistry.
92
-
93
- ## IMPORT PATH CHEATSHEET (don't guess)
94
-
95
- | Component / API | Exact import path |
96
- |------------------------------------------------|----|
97
- | `FormField`, `FormHelperText`, `useFormField` | `@devalok/shilp-sutra/ui/form` (NOT `ui/form-field`)|
98
- | `Label` | `@devalok/shilp-sutra/ui/label`|
99
- | `AppSidebar` | `@devalok/shilp-sutra/shell/sidebar` (NOT `shell/app-sidebar`)|
100
- | `TopBar`, `TopBar.*` | `@devalok/shilp-sutra/shell/top-bar`|
101
- | `BottomNavbar` | `@devalok/shilp-sutra/shell/bottom-navbar`|
102
- | `AppCommandPalette` | `@devalok/shilp-sutra/shell/app-command-palette`|
103
- | `NotificationCenter` | `@devalok/shilp-sutra/shell/notification-center`|
104
- | `CommandPalette` (lower-level) | `@devalok/shilp-sutra/composed/command-palette`|
105
- | `BarChart`, `LineChart`, `AreaChart`, `PieChart`, `RadarChart`, `GaugeChart`, `Sparkline`, `ChartContainer`, `Legend` | `@devalok/shilp-sutra/ui/charts` (or per-chart subpath `…/ui/charts/bar-chart`) |
106
- | `DataTable` | `@devalok/shilp-sutra/ui/data-table`|
107
- | **`DatePicker`** family | `@devalok/shilp-sutra/composed/date-picker` **(per-component required since 0.40)** |
108
- | **`Toaster`** | `@devalok/shilp-sutra/ui/toaster` **(per-component required since 0.40, pulls `sonner`)** |
109
- | **`toast`** | `@devalok/shilp-sutra/ui/toast` **(per-component required since 0.40)** |
110
- | **`InputOTP`** family | `@devalok/shilp-sutra/ui/input-otp` **(per-component required since 0.40)** |
111
- | **`EmojiPicker`** | `@devalok/shilp-sutra/composed/emoji-picker` **(per-component since 0.40)** |
112
- | **`FilePreview`** | `@devalok/shilp-sutra/composed/file-preview` **(per-component since 0.40)** |
113
- | **`MarkdownViewer`** | `@devalok/shilp-sutra/composed/markdown-viewer` **(per-component since 0.40)** |
114
- | **`RichTextEditor`** / **`RichChatInput`** | `@devalok/shilp-sutra/composed/rich-{text-editor,chat-input}` **(per-component since 0.40)** |
115
- | **`BlockRenderer`**, **`ErrorBlock`**, **`TextBlock`** | `@devalok/shilp-sutra/ai/{block-renderer,blocks/error,blocks/text}` **(per-component since 0.40)** |
116
- | `useColorMode` | `@devalok/shilp-sutra/hooks/use-color-mode`|
117
- | `MotionProvider`, `springs`, `tweens` | `@devalok/shilp-sutra/motion`|
118
-
119
- Components whose import path is the kebab-case of their name (`Button` → `ui/button`, `Card` → `ui/card`, `Avatar` → `ui/avatar`, `Stack` → `ui/stack`, `Text` → `ui/text`) follow the obvious rule. The table above lists the ones that DON'T.
120
-
121
- ## TWO-AXIS VARIANT SYSTEM (vs shadcn's one-axis)
122
-
123
- Many components take BOTH `variant` (shape/surface) AND `color` (intent/semantics):
124
-
125
- ```tsx
126
- <Button variant="solid" color="error">Delete</Button> // red solid
127
- <Button variant="soft" color="warning">Pending</Button> // amber tinted
128
- <Button variant="outline" color="accent">Cancel</Button> // bordered
129
- <Badge variant="solid" color="success">Active</Badge> // green solid
130
- <Alert variant="subtle" color="info" title="Note" /> // tinted blue
131
- ```
132
-
133
- Components with the two-axis system: **Button, Badge, Alert, Banner, Progress, StatusBadge**.
134
-
135
- ## TOP DIFFERENCES FROM SHADCN/UI (will trip you up)
136
-
137
- | shadcn pattern | shilp-sutra equivalent |
138
- |---|---|
139
- | `variant="destructive"` | `color="error"` |
140
- | `size="default"` | `size="md"` (always — never "default") |
141
- | `<Select size="lg">` | `<SelectTrigger size="lg">` (size on trigger, NOT root) |
142
- | `<Chip>` | `<Badge onClick={...}>` (Chip removed 0.32) |
143
- | `useToast() + toast({variant})` | `import { toast }`, then `toast.success('msg')` |
144
- | `Badge variant="destructive"` | `Badge variant="solid" color="error"` |
145
- | `Alert + AlertTitle + AlertDescription` | `<Alert title="..." color="error">` (single component) |
146
- | `Form + FormField + FormItem + FormLabel + FormControl + …` | `<FormField>` + `<Label>` + `<Input>` + `<FormHelperText>` + `useFormField()` hook |
147
-
148
- ## COMMON MISTAKES — DO NOT
149
-
150
- - DO NOT use `variant="destructive"` — use `color="error"`
151
- - DO NOT use `variant="default"` on Button — use `variant="solid"`
152
- - DO NOT use `size="default"` — use `size="md"`
153
- - DO NOT put `size` on `<Select>` — put it on `<SelectTrigger size="md">`
154
- - DO NOT use `<Chip>` — use `<Badge onClick={...}>`
155
- - DO NOT call `useToast()` hook — use `import { toast } from '@devalok/shilp-sutra/ui/toast'`
156
- - DO NOT call `toast({title, color})` object form — use `toast.success('message', { description })`
157
- - DO NOT call `toast()` without `<Toaster />` mounted
158
- - DO NOT use `<Alert><AlertTitle>...</AlertTitle></Alert>` — use `<Alert title="..." />`
159
- - DO NOT codemod `p-4` → `p-ds-04` — both coexist by design
160
- - DO NOT use bare `shadow` class — pick `shadow-raised` / `shadow-floating` / `shadow-overlay`
161
- - DO NOT use `tailwind.config.ts presets: [shilpSutra]` — JS preset removed 0.38
162
- - DO NOT use `bg-surface-1..4` — renamed to `bg-surface-{base,raised,raised-hover,raised-active}` in 0.23
163
- - DO NOT use `shadow-01..05` — renamed to `shadow-{raised,raised-hover,floating,overlay}` in 0.23
164
- - DO NOT use TW3 `bg-gradient-to-*` — use TW4 `bg-linear-to-*` (since 0.37)
165
- - DO NOT use TW3 `w-[--var]` — use TW4 `w-(--var)` (since 0.37)
166
- - DO NOT pass `children` to `<IconButton>` — use the `icon` prop
167
-
168
- ## TOP 30 COMPONENTS QUICK-REF
169
-
170
- ### Inputs & buttons
171
- - **Button**: variant(solid|soft|outline|ghost|link) color(accent|error|success|warning|neutral) size(xs|sm|md|lg|compact-xs|compact-sm|compact-md|icon-xs|icon-sm|icon-md|icon-lg) shape(default|pill) + loading, startIcon, endIcon, asChild, processing, onClickAsync
172
- - **IconButton**: icon(IconInput, required) shape(square|circle) size(sm|md|lg) + aria-label required. Children rejected by type.
173
- - **SplitButton**: `[Action | ▼]` with dropdown. triggerSide, dropdownContent.
174
- - **Input**: size(xs|sm|md|lg) state(default|error|warning|success) + startSection, endSection (auto-typed icon vs label).
175
- - **NumberInput**: value + onValueChange + min/max/step.
176
- - **Textarea**, **SearchInput**, **ColorInput**.
177
- - **Checkbox**: checked, onCheckedChange, indeterminate, error, size.
178
- - **Switch**: checked, onCheckedChange, error, size, color, thumbIcon.
179
- - **RadioGroup > RadioGroupItem**.
180
- - **Select > SelectTrigger(size) > SelectValue; SelectContent > SelectItem**.
181
- - **Combobox**: discriminated union — `multiple?: false` (value: string) | `multiple: true` (value: string[]).
182
- - **Autocomplete**, **Slider**, **Toggle**, **ToggleGroup**, **SegmentedControl**.
183
- - **FormField + Label + Input + FormHelperText + useFormField()** — replaces shadcn's Form + FormItem + FormControl + FormDescription + FormMessage.
184
-
185
- ### Display
186
- - **Text**: variant(heading-2xl..xs, body-lg..xs, label-lg..xs, caption, overline, code). Polymorphic `as` prop.
187
- - **Stack**: direction(vertical|horizontal) gap(SpacingToken) align/justify/wrap.
188
- - **Container**, **Separator**.
189
- - **Card**: variant(default|elevated|outline|flat) accent(left|top|right|bottom). Compound: CardHeader > CardTitle, CardDescription; CardContent; CardFooter.
190
- - **Badge**: variant(subtle|solid|outline|soft) color(default|accent|error|success|warning|info|neutral + 7 categories + custom) size(xs|sm|md|lg) + onClick, onDismiss, dot, startIcon, endIcon, truncate. Compound: Badge.Indicator, Badge.Group.
191
- - **Avatar**: size(xs|sm|md|lg|xl) shape(circle|square|rounded) status, ring, badge.
192
- - **Spinner**, **Progress** (autoColor!), **Skeleton**, **StatCard**, **StatusDot**, **ColorSwatch**.
193
- - **Alert**: variant(subtle|solid|outline) color(info|success|warning|error|neutral) + title, onDismiss. Single component, not compound.
194
- - **Banner**: color(...) + actions, onDismiss. Mobile-responsive.
195
- - **Toast**: imperative `toast.success('msg')` / `.error/.warning/.info/.loading/.message/.promise/.upload/.custom`. Requires `<Toaster />`.
196
-
197
- ### Overlays
198
- - **Dialog**: compound (DialogTrigger; DialogContent > DialogHeader > DialogTitle; …; DialogFooter). Mobile auto-fullscreens.
199
- - **AlertDialog**: same compound, mobile bottom-sheet via `responsive` prop.
200
- - **Sheet**: side(top|bottom|left|right). Mobile auto-bottom + swipe-to-dismiss.
201
- - **Popover**, **Tooltip** (auto-wraps Provider), **HoverCard**, **Collapsible**.
202
-
203
- ### Navigation
204
- - **Tabs**: TabsList(variant: line|contained) > TabsTrigger; TabsContent. color, size, orientation.
205
- - **Accordion**: AccordionItem > AccordionTrigger; AccordionContent.
206
- - **Breadcrumb**, **PaginationRoot**, **DropdownMenu**, **ContextMenu**, **Menubar**, **NavigationMenu**.
207
-
208
- ### Composed (per-component subpaths)
209
- - **DatePicker**, **DateRangePicker**, **DateTimePicker**, **TimePicker**, **CalendarGrid** — `@devalok/shilp-sutra/composed/date-picker`. Needs `date-fns` peer.
210
- - **EmptyState**: icon(IconInput) + title, description, action, compact, iconSize.
211
- - **CommandPalette**, **AppCommandPalette**, **MultiSelectPopover**, **MemberPicker**, **MasterDetail**, **ActivityFeed**, **PageHeader**, **InlineEdit**, **FormSection**, **BulkActionBar**, **DeadlineIndicator**.
212
- - **RichTextEditor**, **RichTextViewer**, **RichChatInput** — needs `@tiptap/*` peers.
213
- - **FilePreview**, **MarkdownViewer**, **EmojiPicker**.
214
-
215
- ### Shell
216
- - **TopBar**: Composition-based. `TopBar.Left/Center/Right/Section/IconButton/Title/UserMenu`.
217
- - **AppSidebar**: `NavItem[]` + `NavGroup[]` + `footer.{links,version,promo,slot}`.
218
- - **BottomNavbar**: mobile.
219
- - **NotificationCenter**, **NotificationPreferences**, **LinkProvider**.
220
-
221
- ### AI module
222
- - **CommandBar**, **AIConversation**, **BlockRenderer** (per-component, pulls `react-markdown`), **AICommandProvider**, **DevadootIcon**.
223
- - AI blocks (barrel-safe): BlockTable, ConfirmBlock, DividerBlock, InfoBlock, LoadingBlock, StatRowBlock, SuccessBlock.
224
- - AI blocks (per-component required): ErrorBlock (`/ai/blocks/error`), TextBlock (`/ai/blocks/text`).
225
-
226
- ## SERVER-SAFE COMPONENTS (`@server-safe` annotation in source)
227
-
228
- UI: `Text`, `Skeleton`, `Stack`, `Container`, `Table` (+ sub), `Code`, `VisuallyHidden`.
229
- Composed: `ContentCard`, `PageHeader`, `LoadingSkeleton`, `PageSkeletons`, `PriorityIndicator`.
230
-
231
- Use per-component subpaths in Server Components: `import { Text } from '@devalok/shilp-sutra/ui/text'`.
232
-
233
- ## TROUBLESHOOTING
234
-
235
- 13 symptoms with diagnosis + fix at `node_modules/@devalok/shilp-sutra/docs/recipes/troubleshoot.md`. Most common:
236
-
237
- - **`Cannot find module 'sonner'` / `'input-otp'` / `'date-fns'`** → missing optional peer; install per the matrix above.
238
- - **Spacing utilities don't apply** → Tailwind not seeing `node_modules/@devalok/shilp-sutra/dist`; ensure `transpilePackages` in `next.config` OR Tailwind 4 auto-discovery.
239
- - **`<Toaster />` mounted but `toast()` silent** → check sonner peer installed + Toaster mounted ONCE at layout root.
240
- - **Hydration warning on every page** → add `suppressHydrationWarning` to `<html>` (needed for next-themes).
241
- - **Bare `shadow` produces no shadow** → TW4 has no `--shadow-DEFAULT`; pick `shadow-raised`/`-floating`/`-overlay`.
242
-
243
- ## NEED MORE?
244
-
245
- - `llms.txt` — full ~27K-token reference (this file is the slice)
246
- - `llms-full.txt` — exhaustive per-component prop tables (~140K tokens)
247
- - `docs/recipes/install-<framework>.md` — per-framework setup with edge cases
248
- - `docs/recipes/customize-brand.md` — token override cookbook
249
- - `MIGRATION.md` — every breaking change since 0.18
250
-
251
- This file regenerates from `llms.txt` when component APIs change; expect it to track v0.40+ closely.