@devalok/shilp-sutra 0.38.0 → 0.40.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 (361) hide show
  1. package/AGENTS.md +151 -0
  2. package/MIGRATION.md +255 -0
  3. package/README.md +3 -0
  4. package/dist/_chunks/badge-group.js +76 -75
  5. package/dist/_chunks/badge-group.js.map +1 -1
  6. package/dist/_chunks/chart-container.js +50 -0
  7. package/dist/_chunks/chart-container.js.map +1 -0
  8. package/dist/_chunks/chat.js +236 -228
  9. package/dist/_chunks/chat.js.map +1 -1
  10. package/dist/_chunks/colors.js +30 -0
  11. package/dist/_chunks/colors.js.map +1 -0
  12. package/dist/_chunks/document-preview.js +2 -2
  13. package/dist/_chunks/document-preview.js.map +1 -1
  14. package/dist/_chunks/emoji-data.js +45 -0
  15. package/dist/_chunks/emoji-data.js.map +1 -0
  16. package/dist/_chunks/grid-lines.js +72 -0
  17. package/dist/_chunks/grid-lines.js.map +1 -0
  18. package/dist/_chunks/image-preview.js +2 -2
  19. package/dist/_chunks/image-preview.js.map +1 -1
  20. package/dist/_chunks/mention-suggestion.js +35 -263
  21. package/dist/_chunks/mention-suggestion.js.map +1 -1
  22. package/dist/_chunks/normalize-icon.js +18 -0
  23. package/dist/_chunks/normalize-icon.js.map +1 -0
  24. package/dist/_chunks/oauth-button.js +227 -0
  25. package/dist/_chunks/oauth-button.js.map +1 -0
  26. package/dist/_chunks/popover.js +3 -3
  27. package/dist/_chunks/popover.js.map +1 -1
  28. package/dist/_chunks/primitives.js +107 -107
  29. package/dist/_chunks/primitives.js.map +1 -1
  30. package/dist/_chunks/shared.js +5 -5
  31. package/dist/_chunks/shared.js.map +1 -1
  32. package/dist/_chunks/{text.js → success.js} +26 -63
  33. package/dist/_chunks/success.js.map +1 -0
  34. package/dist/_chunks/tiptap.js +1952 -1949
  35. package/dist/_chunks/tiptap.js.map +1 -1
  36. package/dist/_chunks/tooltip.js +58 -0
  37. package/dist/_chunks/tooltip.js.map +1 -0
  38. package/dist/_chunks/tree-view.js +101 -96
  39. package/dist/_chunks/tree-view.js.map +1 -1
  40. package/dist/_chunks/use-calendar.js +5 -5
  41. package/dist/_chunks/use-calendar.js.map +1 -1
  42. package/dist/ai/ai-command-provider.d.ts +3 -2
  43. package/dist/ai/ai-command-provider.d.ts.map +1 -1
  44. package/dist/ai/ai-command-provider.js.map +1 -1
  45. package/dist/ai/block-renderer.js +11 -9
  46. package/dist/ai/block-renderer.js.map +1 -1
  47. package/dist/ai/blocks/error.js +31 -0
  48. package/dist/ai/blocks/error.js.map +1 -0
  49. package/dist/ai/blocks/index.d.ts +0 -2
  50. package/dist/ai/blocks/index.d.ts.map +1 -1
  51. package/dist/ai/blocks/index.js +2 -2
  52. package/dist/ai/blocks/text.js +19 -0
  53. package/dist/ai/blocks/text.js.map +1 -0
  54. package/dist/ai/command-bar.d.ts.map +1 -1
  55. package/dist/ai/command-bar.js +198 -193
  56. package/dist/ai/command-bar.js.map +1 -1
  57. package/dist/ai/conversation.d.ts +2 -1
  58. package/dist/ai/conversation.d.ts.map +1 -1
  59. package/dist/ai/conversation.js +92 -87
  60. package/dist/ai/conversation.js.map +1 -1
  61. package/dist/ai/index.d.ts +0 -4
  62. package/dist/ai/index.d.ts.map +1 -1
  63. package/dist/ai/index.js +45 -46
  64. package/dist/ai/index.js.map +1 -1
  65. package/dist/composed/activity-feed.d.ts +2 -1
  66. package/dist/composed/activity-feed.d.ts.map +1 -1
  67. package/dist/composed/activity-feed.js +5 -5
  68. package/dist/composed/activity-feed.js.map +1 -1
  69. package/dist/composed/avatar-group.js +4 -4
  70. package/dist/composed/avatar-group.js.map +1 -1
  71. package/dist/composed/bulk-action-bar.d.ts +2 -2
  72. package/dist/composed/bulk-action-bar.d.ts.map +1 -1
  73. package/dist/composed/bulk-action-bar.js +12 -12
  74. package/dist/composed/bulk-action-bar.js.map +1 -1
  75. package/dist/composed/command-palette.d.ts +2 -1
  76. package/dist/composed/command-palette.d.ts.map +1 -1
  77. package/dist/composed/command-palette.js +106 -101
  78. package/dist/composed/command-palette.js.map +1 -1
  79. package/dist/composed/content-card.js +1 -1
  80. package/dist/composed/content-card.js.map +1 -1
  81. package/dist/composed/date-picker/index.js +747 -3
  82. package/dist/composed/date-picker/index.js.map +1 -0
  83. package/dist/composed/emoji-picker.js +4 -4
  84. package/dist/composed/emoji-picker.js.map +1 -1
  85. package/dist/composed/empty-state.d.ts +3 -3
  86. package/dist/composed/empty-state.d.ts.map +1 -1
  87. package/dist/composed/empty-state.js +40 -31
  88. package/dist/composed/empty-state.js.map +1 -1
  89. package/dist/composed/error-boundary.js +3 -3
  90. package/dist/composed/error-boundary.js.map +1 -1
  91. package/dist/composed/extensions/emoji-node.js +81 -0
  92. package/dist/composed/extensions/emoji-node.js.map +1 -0
  93. package/dist/composed/extensions/emoji-suggestion.js +117 -0
  94. package/dist/composed/extensions/emoji-suggestion.js.map +1 -0
  95. package/dist/composed/file-preview.js +498 -2
  96. package/dist/composed/file-preview.js.map +1 -0
  97. package/dist/composed/filter-bar.js +1 -1
  98. package/dist/composed/filter-bar.js.map +1 -1
  99. package/dist/composed/index.d.ts +0 -15
  100. package/dist/composed/index.d.ts.map +1 -1
  101. package/dist/composed/index.js +16 -24
  102. package/dist/composed/inline-edit.js +1 -1
  103. package/dist/composed/inline-edit.js.map +1 -1
  104. package/dist/composed/loading-skeleton.js +9 -9
  105. package/dist/composed/loading-skeleton.js.map +1 -1
  106. package/dist/composed/markdown-viewer.js +3 -3
  107. package/dist/composed/markdown-viewer.js.map +1 -1
  108. package/dist/composed/multi-select-popover.js +1 -1
  109. package/dist/composed/multi-select-popover.js.map +1 -1
  110. package/dist/composed/page-header.js +1 -1
  111. package/dist/composed/page-header.js.map +1 -1
  112. package/dist/composed/page-skeletons.js +15 -15
  113. package/dist/composed/page-skeletons.js.map +1 -1
  114. package/dist/composed/priority-indicator.js +3 -3
  115. package/dist/composed/priority-indicator.js.map +1 -1
  116. package/dist/composed/rich-chat-input.js +2073 -2
  117. package/dist/composed/rich-chat-input.js.map +1 -0
  118. package/dist/composed/rich-text-editor.js +75 -72
  119. package/dist/composed/rich-text-editor.js.map +1 -1
  120. package/dist/composed/schedule-view.js +3 -3
  121. package/dist/composed/schedule-view.js.map +1 -1
  122. package/dist/composed/status-badge.d.ts +3 -2
  123. package/dist/composed/status-badge.d.ts.map +1 -1
  124. package/dist/composed/status-badge.js +58 -53
  125. package/dist/composed/status-badge.js.map +1 -1
  126. package/dist/shell/app-command-palette.d.ts +2 -1
  127. package/dist/shell/app-command-palette.d.ts.map +1 -1
  128. package/dist/shell/app-command-palette.js.map +1 -1
  129. package/dist/shell/bottom-navbar.d.ts +3 -1
  130. package/dist/shell/bottom-navbar.d.ts.map +1 -1
  131. package/dist/shell/bottom-navbar.js +94 -86
  132. package/dist/shell/bottom-navbar.js.map +1 -1
  133. package/dist/shell/command-registry.d.ts +2 -1
  134. package/dist/shell/command-registry.d.ts.map +1 -1
  135. package/dist/shell/command-registry.js.map +1 -1
  136. package/dist/shell/notification-center.js +8 -8
  137. package/dist/shell/notification-center.js.map +1 -1
  138. package/dist/shell/notification-preferences.js +1 -1
  139. package/dist/shell/notification-preferences.js.map +1 -1
  140. package/dist/shell/sidebar.d.ts +7 -4
  141. package/dist/shell/sidebar.d.ts.map +1 -1
  142. package/dist/shell/sidebar.js +148 -134
  143. package/dist/shell/sidebar.js.map +1 -1
  144. package/dist/shell/top-bar.d.ts +4 -3
  145. package/dist/shell/top-bar.d.ts.map +1 -1
  146. package/dist/shell/top-bar.js +116 -108
  147. package/dist/shell/top-bar.js.map +1 -1
  148. package/dist/tokens/semantic.css +82 -9
  149. package/dist/ui/accordion.js +1 -1
  150. package/dist/ui/accordion.js.map +1 -1
  151. package/dist/ui/alert-dialog.js +3 -3
  152. package/dist/ui/alert-dialog.js.map +1 -1
  153. package/dist/ui/alert.js +2 -2
  154. package/dist/ui/alert.js.map +1 -1
  155. package/dist/ui/autocomplete.js +2 -2
  156. package/dist/ui/autocomplete.js.map +1 -1
  157. package/dist/ui/avatar.js +11 -11
  158. package/dist/ui/avatar.js.map +1 -1
  159. package/dist/ui/badge-indicator.js +1 -1
  160. package/dist/ui/badge-indicator.js.map +1 -1
  161. package/dist/ui/badge.d.ts +3 -2
  162. package/dist/ui/badge.d.ts.map +1 -1
  163. package/dist/ui/banner.js +1 -1
  164. package/dist/ui/banner.js.map +1 -1
  165. package/dist/ui/breadcrumb.js +1 -1
  166. package/dist/ui/breadcrumb.js.map +1 -1
  167. package/dist/ui/button.d.ts +5 -4
  168. package/dist/ui/button.d.ts.map +1 -1
  169. package/dist/ui/button.js +66 -65
  170. package/dist/ui/button.js.map +1 -1
  171. package/dist/ui/card.js +5 -5
  172. package/dist/ui/card.js.map +1 -1
  173. package/dist/ui/charts/area-chart.js +177 -0
  174. package/dist/ui/charts/area-chart.js.map +1 -0
  175. package/dist/ui/charts/bar-chart.js +127 -0
  176. package/dist/ui/charts/bar-chart.js.map +1 -0
  177. package/dist/ui/charts/chart-container.js +3 -0
  178. package/dist/ui/charts/gauge-chart.js +72 -0
  179. package/dist/ui/charts/gauge-chart.js.map +1 -0
  180. package/dist/ui/charts/index.js +10 -1035
  181. package/dist/ui/charts/line-chart.js +135 -0
  182. package/dist/ui/charts/line-chart.js.map +1 -0
  183. package/dist/ui/charts/pie-chart.js +111 -0
  184. package/dist/ui/charts/pie-chart.js.map +1 -0
  185. package/dist/ui/charts/radar-chart.js +170 -0
  186. package/dist/ui/charts/radar-chart.js.map +1 -0
  187. package/dist/ui/charts/sparkline.js +119 -0
  188. package/dist/ui/charts/sparkline.js.map +1 -0
  189. package/dist/ui/chat/message.d.ts +3 -3
  190. package/dist/ui/chat/message.d.ts.map +1 -1
  191. package/dist/ui/chat/system-message.d.ts +2 -1
  192. package/dist/ui/chat/system-message.d.ts.map +1 -1
  193. package/dist/ui/checkbox.js +1 -1
  194. package/dist/ui/checkbox.js.map +1 -1
  195. package/dist/ui/code.js +2 -2
  196. package/dist/ui/code.js.map +1 -1
  197. package/dist/ui/color-input.js +10 -10
  198. package/dist/ui/color-input.js.map +1 -1
  199. package/dist/ui/color-swatch.js +3 -3
  200. package/dist/ui/color-swatch.js.map +1 -1
  201. package/dist/ui/combobox.d.ts +2 -1
  202. package/dist/ui/combobox.d.ts.map +1 -1
  203. package/dist/ui/combobox.js +100 -95
  204. package/dist/ui/combobox.js.map +1 -1
  205. package/dist/ui/container.d.ts +6 -1
  206. package/dist/ui/container.d.ts.map +1 -1
  207. package/dist/ui/container.js +2 -1
  208. package/dist/ui/container.js.map +1 -1
  209. package/dist/ui/context-menu.js +6 -6
  210. package/dist/ui/context-menu.js.map +1 -1
  211. package/dist/ui/data-table-body.js +1 -1
  212. package/dist/ui/data-table-body.js.map +1 -1
  213. package/dist/ui/data-table-bulk-actions.js +2 -2
  214. package/dist/ui/data-table-bulk-actions.js.map +1 -1
  215. package/dist/ui/data-table-card.js +2 -2
  216. package/dist/ui/data-table-card.js.map +1 -1
  217. package/dist/ui/data-table-header.js +2 -2
  218. package/dist/ui/data-table-header.js.map +1 -1
  219. package/dist/ui/data-table-pagination.js +3 -3
  220. package/dist/ui/data-table-pagination.js.map +1 -1
  221. package/dist/ui/data-table-toolbar.js +1 -1
  222. package/dist/ui/data-table-toolbar.js.map +1 -1
  223. package/dist/ui/data-table.js +1 -1
  224. package/dist/ui/data-table.js.map +1 -1
  225. package/dist/ui/devalok-grain.d.ts +1 -1
  226. package/dist/ui/devalok-grain.js.map +1 -1
  227. package/dist/ui/dialog.js +2 -2
  228. package/dist/ui/dialog.js.map +1 -1
  229. package/dist/ui/dropdown-menu.js +6 -6
  230. package/dist/ui/dropdown-menu.js.map +1 -1
  231. package/dist/ui/file-upload.js +4 -4
  232. package/dist/ui/file-upload.js.map +1 -1
  233. package/dist/ui/hover-card.js +1 -1
  234. package/dist/ui/hover-card.js.map +1 -1
  235. package/dist/ui/icon-button.d.ts +9 -2
  236. package/dist/ui/icon-button.d.ts.map +1 -1
  237. package/dist/ui/icon-button.js +14 -13
  238. package/dist/ui/icon-button.js.map +1 -1
  239. package/dist/ui/index.d.ts +1 -3
  240. package/dist/ui/index.d.ts.map +1 -1
  241. package/dist/ui/index.js +31 -33
  242. package/dist/ui/index.js.map +1 -1
  243. package/dist/ui/input-otp.js +1 -1
  244. package/dist/ui/input-otp.js.map +1 -1
  245. package/dist/ui/input.js +2 -2
  246. package/dist/ui/input.js.map +1 -1
  247. package/dist/ui/lib/icon-input.d.ts +42 -0
  248. package/dist/ui/lib/icon-input.d.ts.map +1 -0
  249. package/dist/ui/lib/normalize-icon.d.ts +39 -0
  250. package/dist/ui/lib/normalize-icon.d.ts.map +1 -0
  251. package/dist/ui/link.js +1 -1
  252. package/dist/ui/link.js.map +1 -1
  253. package/dist/ui/menubar.js +8 -8
  254. package/dist/ui/menubar.js.map +1 -1
  255. package/dist/ui/navigation-menu.js +3 -3
  256. package/dist/ui/navigation-menu.js.map +1 -1
  257. package/dist/ui/number-input.js +3 -3
  258. package/dist/ui/number-input.js.map +1 -1
  259. package/dist/ui/oauth-button/index.d.ts +3 -0
  260. package/dist/ui/oauth-button/index.d.ts.map +1 -0
  261. package/dist/ui/oauth-button/index.js +3 -0
  262. package/dist/ui/oauth-button/oauth-button.d.ts +208 -0
  263. package/dist/ui/oauth-button/oauth-button.d.ts.map +1 -0
  264. package/dist/ui/pagination.js +1 -1
  265. package/dist/ui/pagination.js.map +1 -1
  266. package/dist/ui/progress.js +2 -2
  267. package/dist/ui/progress.js.map +1 -1
  268. package/dist/ui/radio.js +1 -1
  269. package/dist/ui/radio.js.map +1 -1
  270. package/dist/ui/segmented-control.d.ts +3 -4
  271. package/dist/ui/segmented-control.d.ts.map +1 -1
  272. package/dist/ui/segmented-control.js +53 -45
  273. package/dist/ui/segmented-control.js.map +1 -1
  274. package/dist/ui/select.js +3 -3
  275. package/dist/ui/select.js.map +1 -1
  276. package/dist/ui/sheet.js +2 -2
  277. package/dist/ui/sheet.js.map +1 -1
  278. package/dist/ui/sidebar.js +11 -11
  279. package/dist/ui/sidebar.js.map +1 -1
  280. package/dist/ui/skeleton.js +9 -9
  281. package/dist/ui/skeleton.js.map +1 -1
  282. package/dist/ui/slider.js +2 -2
  283. package/dist/ui/slider.js.map +1 -1
  284. package/dist/ui/split-button.js +7 -7
  285. package/dist/ui/split-button.js.map +1 -1
  286. package/dist/ui/stack.d.ts +6 -1
  287. package/dist/ui/stack.d.ts.map +1 -1
  288. package/dist/ui/stack.js +2 -1
  289. package/dist/ui/stack.js.map +1 -1
  290. package/dist/ui/stat-card.d.ts +2 -3
  291. package/dist/ui/stat-card.d.ts.map +1 -1
  292. package/dist/ui/stat-card.js +118 -116
  293. package/dist/ui/stat-card.js.map +1 -1
  294. package/dist/ui/status-dot.js +2 -2
  295. package/dist/ui/status-dot.js.map +1 -1
  296. package/dist/ui/stepper.d.ts +2 -1
  297. package/dist/ui/stepper.d.ts.map +1 -1
  298. package/dist/ui/stepper.js +74 -69
  299. package/dist/ui/stepper.js.map +1 -1
  300. package/dist/ui/switch.js +2 -2
  301. package/dist/ui/switch.js.map +1 -1
  302. package/dist/ui/tabs.js +3 -3
  303. package/dist/ui/tabs.js.map +1 -1
  304. package/dist/ui/text.d.ts +7 -2
  305. package/dist/ui/text.d.ts.map +1 -1
  306. package/dist/ui/text.js +2 -1
  307. package/dist/ui/text.js.map +1 -1
  308. package/dist/ui/textarea.js +1 -1
  309. package/dist/ui/textarea.js.map +1 -1
  310. package/dist/ui/toast.js +8 -8
  311. package/dist/ui/toast.js.map +1 -1
  312. package/dist/ui/toaster.d.ts +11 -2
  313. package/dist/ui/toaster.d.ts.map +1 -1
  314. package/dist/ui/toaster.js.map +1 -1
  315. package/dist/ui/toggle.js +1 -1
  316. package/dist/ui/toggle.js.map +1 -1
  317. package/dist/ui/tooltip.js +12 -12
  318. package/dist/ui/tooltip.js.map +1 -1
  319. package/dist/ui/tree-view/tree-item.d.ts +3 -2
  320. package/dist/ui/tree-view/tree-item.d.ts.map +1 -1
  321. package/dist/ui/tree-view/use-tree.d.ts +2 -1
  322. package/dist/ui/tree-view/use-tree.d.ts.map +1 -1
  323. package/docs/components/_header.md +90 -1
  324. package/docs/components/ui/oauth-button.md +86 -0
  325. package/docs/recipes/customize-brand.md +100 -4
  326. package/docs/recipes/index.md +5 -1
  327. package/docs/recipes/install-astro.md +15 -0
  328. package/docs/recipes/install-next-app-router.md +21 -5
  329. package/docs/recipes/install-next-pages.md +2 -0
  330. package/docs/recipes/install-remix.md +15 -0
  331. package/docs/recipes/install-tanstack-start.md +15 -0
  332. package/docs/recipes/install-vite.md +15 -0
  333. package/docs/recipes/troubleshoot.md +22 -0
  334. package/llms-full.txt +177 -2
  335. package/llms-quick.txt +247 -0
  336. package/llms.txt +116 -3
  337. package/package.json +80 -2
  338. package/scripts/welcome.mjs +219 -0
  339. package/skill/README.md +99 -0
  340. package/skill/SKILL.md +163 -0
  341. package/skill/install.sh +59 -0
  342. package/skill/references/components-full.md +7083 -0
  343. package/skill/references/components.md +778 -0
  344. package/skill/references/customize-brand.md +314 -0
  345. package/skill/references/server-components.md +211 -0
  346. package/skill/references/setup-astro.md +195 -0
  347. package/skill/references/setup-next-app-router.md +248 -0
  348. package/skill/references/setup-next-pages.md +127 -0
  349. package/skill/references/setup-remix.md +188 -0
  350. package/skill/references/setup-tanstack-start.md +160 -0
  351. package/skill/references/setup-vite.md +187 -0
  352. package/skill/references/troubleshoot.md +241 -0
  353. package/dist/_chunks/date-picker.js +0 -748
  354. package/dist/_chunks/date-picker.js.map +0 -1
  355. package/dist/_chunks/file-preview.js +0 -499
  356. package/dist/_chunks/file-preview.js.map +0 -1
  357. package/dist/_chunks/rich-chat-input.js +0 -2071
  358. package/dist/_chunks/rich-chat-input.js.map +0 -1
  359. package/dist/_chunks/text.js.map +0 -1
  360. package/dist/ui/charts/index.js.map +0 -1
  361. /package/{LICENSE → skill/LICENSE} +0 -0
package/skill/references/setup-astro.md ADDED
@@ -0,0 +1,195 @@
1
+ <!-- Source: packages/core/docs/recipes/install-astro.md — do not edit directly. Regenerate with `node scripts/build-skill.mjs`. -->
2
+
3
+ # Install: Astro
4
+
5
+ > Setup recipe for adding `@devalok/shilp-sutra` to an Astro project with React islands.
6
+
7
+ ## 1. Detect
8
+
9
+ You are in this recipe if:
10
+
11
+ - `astro.config.{ts,mjs,js}` exists at the project root
12
+ - `package.json` lists `"astro"`
13
+ - React is integrated via `@astrojs/react`
14
+
15
+ If `@astrojs/react` is not installed, install it first:
16
+
17
+ ```bash
18
+ pnpm astro add react
19
+ ```
20
+
21
+ ## 2. Install dependencies
22
+
23
+ ```bash
24
+ pnpm add @devalok/shilp-sutra framer-motion
25
+ pnpm add -D tailwindcss@^4 @tailwindcss/vite
26
+ ```
27
+
28
+ Add only if rendering `<Toaster />`:
29
+
30
+ ```bash
31
+ pnpm add sonner
32
+ ```
33
+
34
+ ### 2a. Optional peer dependencies (install ONLY when importing the matching subpath)
35
+
36
+ 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.
37
+
38
+ | When you import… | Install |
39
+ |-----------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
40
+ | `@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` |
41
+ | `@devalok/shilp-sutra/ui/data-table` | `pnpm add @tanstack/react-table @tanstack/react-virtual` |
42
+ | `@devalok/shilp-sutra/composed/date-picker` (+ DateRange, DateTime, Calendar) | `pnpm add date-fns` |
43
+ | `@devalok/shilp-sutra/composed/rich-text-editor` (+ RichChatInput, RichTextViewer) | `pnpm add @tiptap/react @tiptap/starter-kit @tiptap/extension-placeholder` |
44
+ | `@devalok/shilp-sutra/ui/input-otp` | `pnpm add input-otp` |
45
+ | `@devalok/shilp-sutra/composed/file-preview` | `pnpm add react-pdf react-zoom-pan-pinch` |
46
+ | `@devalok/shilp-sutra/composed/markdown-viewer` | `pnpm add react-markdown react-syntax-highlighter` |
47
+ | Any `Icon` / `IconButton` with Tabler icons | `pnpm add @tabler/icons-react` |
48
+
49
+ ## 3. Wire Tailwind 4 in `astro.config`
50
+
51
+ Astro has its own `@astrojs/tailwind` integration, but for Tailwind 4 use the Vite plugin directly (Astro 4.5+ supports this):
52
+
53
+ ```ts
54
+ // astro.config.ts
55
+ import { defineConfig } from "astro/config";
56
+ import react from "@astrojs/react";
57
+ import tailwindcss from "@tailwindcss/vite";
58
+
59
+ export default defineConfig({
60
+ integrations: [react()],
61
+ vite: {
62
+ plugins: [tailwindcss()],
63
+ },
64
+ });
65
+ ```
66
+
67
+ Do **not** also enable `@astrojs/tailwind` — that integration is Tailwind 3 only and will conflict.
68
+
69
+ ## 4. Wire tokens
70
+
71
+ Create `src/styles/globals.css`:
72
+
73
+ ```css
74
+ @import "tailwindcss";
75
+ @import "@devalok/shilp-sutra/css";
76
+ ```
77
+
78
+ Import it from a layout component (e.g., `src/layouts/BaseLayout.astro`):
79
+
80
+ ```astro
81
+ ---
82
+ import "../styles/globals.css";
83
+ const { title = "App" } = Astro.props;
84
+ ---
85
+ <!doctype html>
86
+ <html lang="en" class="">
87
+ <head>
88
+ <meta charset="utf-8" />
89
+ <meta name="viewport" content="width=device-width" />
90
+ <title>{title}</title>
91
+ </head>
92
+ <body>
93
+ <slot />
94
+ </body>
95
+ </html>
96
+ ```
97
+
98
+ ## 5. Theme toggle
99
+
100
+ Add the bootstrap script to `<head>` of `BaseLayout.astro` (before stylesheet imports):
101
+
102
+ ```astro
103
+ ---
104
+ import "../styles/globals.css";
105
+ ---
106
+ <!doctype html>
107
+ <html lang="en">
108
+ <head>
109
+ <script is:inline>
110
+ try {
111
+ var stored = localStorage.getItem("theme");
112
+ var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
113
+ if (stored === "dark" || (!stored && prefersDark))
114
+ document.documentElement.classList.add("dark");
115
+ } catch (e) {}
116
+ </script>
117
+ <!-- ... -->
118
+ </head>
119
+ <body><slot /></body>
120
+ </html>
121
+ ```
122
+
123
+ `is:inline` keeps it out of bundling, so it runs before any other JS.
124
+
125
+ For runtime toggling inside React islands, use the same `useColorMode` hook shown in [install-vite.md § 5](./install-vite.md#5-theme-toggle-no-next-themes-here).
126
+
127
+ ## 6. Use components in islands
128
+
129
+ Shilp Sutra components are **client-only** (they use React hooks). Mount them in islands with a `client:*` directive:
130
+
131
+ ```astro
132
+ ---
133
+ import { Button } from "@devalok/shilp-sutra/ui/button";
134
+ ---
135
+ <Button client:load>Hello</Button>
136
+ ```
137
+
138
+ Static / non-interactive primitives (Text, Stack, Container, Code, VisuallyHidden) work without `client:*` because they render to static markup. Per-component imports are still required.
139
+
140
+ ## 7. Toaster (optional)
141
+
142
+ Mount once in a top-level island. The simplest approach is a small React wrapper component:
143
+
144
+ ```tsx
145
+ // src/components/AppToaster.tsx
146
+ "use client";
147
+ import { Toaster } from "@devalok/shilp-sutra/ui/toaster";
148
+ export default function AppToaster() {
149
+ return <Toaster />;
150
+ }
151
+ ```
152
+
153
+ ```astro
154
+ ---
155
+ import AppToaster from "../components/AppToaster";
156
+ ---
157
+ <AppToaster client:load />
158
+ ```
159
+
160
+ ## 8. Verify
161
+
162
+ Create `src/pages/index.astro`:
163
+
164
+ ```astro
165
+ ---
166
+ import BaseLayout from "../layouts/BaseLayout.astro";
167
+ import { Button } from "@devalok/shilp-sutra/ui/button";
168
+ import { Stack } from "@devalok/shilp-sutra/ui/stack";
169
+ import { Text } from "@devalok/shilp-sutra/ui/text";
170
+ ---
171
+ <BaseLayout title="Home">
172
+ <Stack className="p-ds-08" gap="ds-04">
173
+ <Text variant="heading-2xl">Hello, Shilp Sutra</Text>
174
+ <Stack direction="row" gap="ds-03">
175
+ <Button client:load>Primary</Button>
176
+ <Button client:load variant="soft">Soft</Button>
177
+ </Stack>
178
+ </Stack>
179
+ </BaseLayout>
180
+ ```
181
+
182
+ Run `pnpm dev` and open the URL.
183
+
184
+ ## 9. Astro-specific gotchas
185
+
186
+ - **No `transpilePackages` equivalent — and you do not need one.** Astro's Vite uses native ESM and resolves `@devalok/shilp-sutra` from `node_modules` directly.
187
+ - **Component must be inside a `client:*` island to be interactive.** A button without `client:load` will render but not respond to clicks.
188
+ - **Server-side islands (`server:defer`)** — fine, but RSC import rules apply (per-component imports only). See [server-components.md](./server-components.md).
189
+ - **`@astrojs/tailwind` and `@tailwindcss/vite` conflict.** Pick one. For Tailwind 4 use the Vite plugin.
190
+
191
+ ## 10. What NOT to do
192
+
193
+ - ❌ Use `@astrojs/tailwind` (Tailwind 3 only).
194
+ - ❌ Add `tailwind.config.{ts,js}` — Tailwind 4 is CSS-first.
195
+ - ❌ Import shilp-sutra components into a `.astro` file expecting interactivity without `client:*`.
package/skill/references/setup-next-app-router.md ADDED
@@ -0,0 +1,248 @@
1
+ <!-- Source: packages/core/docs/recipes/install-next-app-router.md — do not edit directly. Regenerate with `node scripts/build-skill.mjs`. -->
2
+
3
+ # Install: Next.js (App Router)
4
+
5
+ > Setup recipe for adding `@devalok/shilp-sutra` to a Next.js 13+ App Router project.
6
+
7
+ ## 1. Detect the framework
8
+
9
+ You are in this recipe if **all** of these are true:
10
+
11
+ - `package.json` lists `"next"` at version `^13.0.0` or higher
12
+ - An `app/` directory exists at the project root or under `src/`
13
+ - An `app/layout.{tsx,jsx}` file exists
14
+
15
+ If a `pages/` directory exists at the project root AND contains route files (not just `_app`/`_document` legacy artifacts from older `create-next-app` versions), use [install-next-pages.md](./install-next-pages.md). `create-next-app@16+` no longer scaffolds `pages/` for App Router projects.
16
+
17
+ ## 2. Install dependencies
18
+
19
+ Pick the package manager that matches the project's lockfile.
20
+
21
+ ```bash
22
+ # pnpm (lockfile: pnpm-lock.yaml)
23
+ pnpm add @devalok/shilp-sutra framer-motion next-themes
24
+ pnpm add -D tailwindcss@^4 @tailwindcss/postcss
25
+
26
+ # npm (lockfile: package-lock.json)
27
+ npm install @devalok/shilp-sutra framer-motion next-themes
28
+ npm install -D tailwindcss@^4 @tailwindcss/postcss
29
+
30
+ # yarn (lockfile: yarn.lock)
31
+ yarn add @devalok/shilp-sutra framer-motion next-themes
32
+ yarn add -D tailwindcss@^4 @tailwindcss/postcss
33
+
34
+ # bun (lockfile: bun.lockb)
35
+ bun add @devalok/shilp-sutra framer-motion next-themes
36
+ bun add -d tailwindcss@^4 @tailwindcss/postcss
37
+ ```
38
+
39
+ Add only if you will render `<Toaster />`:
40
+
41
+ ```bash
42
+ pnpm add sonner
43
+ ```
44
+
45
+ Add brand assets package if you need Devalok or Karm logos:
46
+
47
+ ```bash
48
+ pnpm add @devalok/shilp-sutra-brand
49
+ ```
50
+
51
+ ### 2a. Optional peer dependencies (install ONLY when importing the matching subpath)
52
+
53
+ 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.).
54
+
55
+ | When you import… | Install |
56
+ |-----------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
57
+ | `@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` |
58
+ | `@devalok/shilp-sutra/ui/data-table` | `pnpm add @tanstack/react-table @tanstack/react-virtual` |
59
+ | `@devalok/shilp-sutra/composed/date-picker` (+ DateRange, DateTime, Calendar) | `pnpm add date-fns` |
60
+ | `@devalok/shilp-sutra/composed/rich-text-editor` (+ RichChatInput, RichTextViewer) | `pnpm add @tiptap/react @tiptap/starter-kit @tiptap/extension-placeholder` |
61
+ | `@devalok/shilp-sutra/ui/input-otp` | `pnpm add input-otp` |
62
+ | `@devalok/shilp-sutra/composed/file-preview` | `pnpm add react-pdf react-zoom-pan-pinch` |
63
+ | `@devalok/shilp-sutra/composed/markdown-viewer` | `pnpm add react-markdown react-syntax-highlighter` |
64
+ | Any `Icon` / `IconButton` use with Tabler icons | `pnpm add @tabler/icons-react` |
65
+
66
+ > 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.
67
+
68
+ ## 3. Configure PostCSS
69
+
70
+ Create or update `postcss.config.mjs` at the project root:
71
+
72
+ ```js
73
+ export default {
74
+ plugins: {
75
+ "@tailwindcss/postcss": {},
76
+ },
77
+ };
78
+ ```
79
+
80
+ If a `postcss.config.{js,cjs,json}` already exists, merge the plugin in. Do not delete the existing file.
81
+
82
+ ## 4. Wire Tailwind 4 + design tokens
83
+
84
+ Locate the global CSS file. Common paths in priority order:
85
+
86
+ - `app/globals.css`
87
+ - `src/app/globals.css`
88
+ - `app/global.css`
89
+
90
+ If none exists, create `app/globals.css`. Set the file contents to (or merge into):
91
+
92
+ ```css
93
+ @import "tailwindcss";
94
+ @import "@devalok/shilp-sutra/css";
95
+ ```
96
+
97
+ **Order matters.** `tailwindcss` MUST come first. The shilp-sutra `/css` entry registers `@theme` blocks that the Tailwind import must process.
98
+
99
+ If the project has its own theme overrides, place them AFTER both imports:
100
+
101
+ ```css
102
+ @import "tailwindcss";
103
+ @import "@devalok/shilp-sutra/css";
104
+
105
+ @theme {
106
+ --color-brand: oklch(0.65 0.2 280);
107
+ }
108
+ ```
109
+
110
+ Import the CSS file once from `app/layout.tsx` (it should already be imported in a fresh `create-next-app` project):
111
+
112
+ ```tsx
113
+ import "./globals.css";
114
+ ```
115
+
116
+ ## 5. Configure `transpilePackages`
117
+
118
+ Edit `next.config.{ts,js,mjs}`. Add the `transpilePackages` field:
119
+
120
+ ```ts
121
+ import type { NextConfig } from "next";
122
+
123
+ const nextConfig: NextConfig = {
124
+ transpilePackages: ["@devalok/shilp-sutra", "@devalok/shilp-sutra-brand"],
125
+ };
126
+
127
+ export default nextConfig;
128
+ ```
129
+
130
+ If a `transpilePackages` array already exists, append to it. Do not replace.
131
+
132
+ Without `transpilePackages`, Next will refuse to load our pre-built `dist/*.js` because it ships native ESM that does not match Next's CJS-leaning loader for `node_modules`.
133
+
134
+ ## 6. Scaffold the Providers wrapper
135
+
136
+ Create `app/providers.tsx`:
137
+
138
+ ```tsx
139
+ "use client";
140
+
141
+ import type { ReactNode } from "react";
142
+ import { ThemeProvider } from "next-themes";
143
+ import { Toaster } from "@devalok/shilp-sutra/ui/toaster";
144
+
145
+ export function Providers({ children }: { children: ReactNode }) {
146
+ return (
147
+ <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
148
+ {children}
149
+ <Toaster />
150
+ </ThemeProvider>
151
+ );
152
+ }
153
+ ```
154
+
155
+ `next-themes` is already in the install list from § 2 — no extra install step needed here. If `<Toaster />` is not used:
156
+
157
+ - Drop the `Toaster` import and its JSX usage
158
+ - Skip installing `sonner`
159
+
160
+ Mount `<Providers>` from `app/layout.tsx`:
161
+
162
+ ```tsx
163
+ import "./globals.css";
164
+ import { Providers } from "./providers";
165
+
166
+ export default function RootLayout({ children }: { children: React.ReactNode }) {
167
+ return (
168
+ <html lang="en" suppressHydrationWarning>
169
+ <body>
170
+ <Providers>{children}</Providers>
171
+ </body>
172
+ </html>
173
+ );
174
+ }
175
+ ```
176
+
177
+ `suppressHydrationWarning` on `<html>` is required because `next-themes` writes the `class` attribute before React hydrates. Without it, every page logs a hydration warning.
178
+
179
+ ## 7. Verify the install
180
+
181
+ Replace the contents of `app/page.tsx`:
182
+
183
+ ```tsx
184
+ import { Button } from "@devalok/shilp-sutra/ui/button";
185
+ import { Stack } from "@devalok/shilp-sutra/ui/stack";
186
+ import { Text } from "@devalok/shilp-sutra/ui/text";
187
+
188
+ export default function Home() {
189
+ return (
190
+ <Stack className="p-ds-08" gap="ds-04">
191
+ <Text variant="heading-2xl">Hello, Shilp Sutra</Text>
192
+ <Stack direction="row" gap="ds-03">
193
+ <Button>Primary</Button>
194
+ <Button variant="soft">Soft</Button>
195
+ <Button variant="outline">Outline</Button>
196
+ </Stack>
197
+ </Stack>
198
+ );
199
+ }
200
+ ```
201
+
202
+ Run the dev server:
203
+
204
+ ```bash
205
+ pnpm dev
206
+ ```
207
+
208
+ Open `http://localhost:3000`. You should see:
209
+
210
+ - The heading rendered in **Ranade** (display font), the buttons in **Inter** (body font)
211
+ - The primary button on a saturated accent background, the soft button with a tinted background and no border, the outline button with a border and transparent background
212
+ - No hydration warning in the browser console
213
+ - No 404 for fonts (fonts are bundled inside the package; `next/font` is not required)
214
+
215
+ If anything is off, see [troubleshoot.md](./troubleshoot.md).
216
+
217
+ ## 8. Common gotchas
218
+
219
+ - **CSS import order.** `tailwindcss` BEFORE `@devalok/shilp-sutra/css`. Reversing the order silently produces a build with no design-system utilities.
220
+ - **Multiple `framer-motion` copies.** Run `pnpm why framer-motion`. If it shows more than one resolved version, contexts (`MotionConfig`, `LayoutGroup`, `AnimatePresence`) silently break. Fix:
221
+ ```jsonc
222
+ // package.json
223
+ {
224
+ "pnpm": {
225
+ "overrides": {
226
+ "framer-motion": "^12"
227
+ }
228
+ }
229
+ }
230
+ ```
231
+ For npm/yarn/bun equivalents, see [troubleshoot.md](./troubleshoot.md).
232
+ - **Per-component imports keep RSC fast AND avoid peer-dep cliffs.** Inside Server Components, prefer `@devalok/shilp-sutra/ui/text`, `…/composed/page-header`, etc. The barrel `@devalok/shilp-sutra/ui` re-exports many client components — including some with hard peer-dep imports (e.g. `input-otp`) — so it both inflates the client bundle and forces those peers to be installed even when you never render those components. See [server-components.md](./server-components.md) for the full RSC-safety matrix.
233
+ - **`p-3` vs `p-ds-03` — both are valid.** DS spacing uses the `--spacing-ds-*` namespace (`p-ds-04`, `gap-ds-03`); Tailwind 4's default numeric scale (`p-4`, `gap-2`) coexists by design. Pick `p-ds-*` for values that should track DS theme changes (card padding, form gaps); pick `p-N` for one-off layout values (section breathing room). Do NOT mass-codemod `p-4` → `p-ds-04` — that is not what the package intends.
234
+ - **Bare `shadow` is dead.** Tailwind 4 has no `--shadow-DEFAULT`. Use `shadow-raised`, `shadow-overlay`, or `shadow-floating`.
235
+
236
+ ## 9. What you should NOT do
237
+
238
+ - ❌ Create `tailwind.config.ts` with `presets: [shilpSutra]` — the JS preset was removed in 0.38.
239
+ - ❌ Add `@plugin "@devalok/shilp-sutra/tailwind"` — also removed.
240
+ - ❌ Wrap the whole app in `<MotionConfig reducedMotion="...">` unless the user explicitly asks for a global motion override; Shilp Sutra components already respect `prefers-reduced-motion`.
241
+ - ❌ Import from `@devalok/shilp-sutra/tailwind` — the export was removed in 0.38.
242
+ - ❌ Run `pnpm add @radix-ui/react-*` — Radix is vendored; no @radix-ui runtime deps are required.
243
+
244
+ ## 10. Optional next steps
245
+
246
+ - **Brand customization** — swap accent color, radius scale, or fonts: see [customize-brand.md](./customize-brand.md).
247
+ - **App shell** — add a sidebar + topbar layout: read `llms-full.txt` sections for `AppSidebar` and `TopBar`.
248
+ - **Server-safe components** — push as much rendering as possible into Server Components: see [server-components.md](./server-components.md).
package/skill/references/setup-next-pages.md ADDED
@@ -0,0 +1,127 @@
1
+ <!-- Source: packages/core/docs/recipes/install-next-pages.md — do not edit directly. Regenerate with `node scripts/build-skill.mjs`. -->
2
+
3
+ # Install: Next.js (Pages Router)
4
+
5
+ > Setup recipe for adding `@devalok/shilp-sutra` to a Next.js project that uses the Pages Router (`pages/_app.tsx` as the entry).
6
+
7
+ ## 1. Detect
8
+
9
+ You are in this recipe if:
10
+
11
+ - `package.json` lists `"next"` (any version `>= 12`)
12
+ - A `pages/` directory exists at the project root or under `src/` and contains `_app.{js,tsx}` (and optionally `_document.{js,tsx}`)
13
+ - `app/` directory does NOT exist, OR exists but is unused
14
+
15
+ If both `app/` and `pages/` exist, prefer [install-next-app-router.md](./install-next-app-router.md) and treat the Pages Router as legacy.
16
+
17
+ ## 2. Install
18
+
19
+ 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).
20
+
21
+ **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.
22
+
23
+ ## 3. PostCSS
24
+
25
+ Same as App Router — see [§ 3](./install-next-app-router.md#3-configure-postcss).
26
+
27
+ ## 4. Wire Tailwind 4 + tokens
28
+
29
+ Common CSS entry paths in priority order:
30
+
31
+ - `styles/globals.css`
32
+ - `src/styles/globals.css`
33
+ - `pages/_app.css` (rare)
34
+
35
+ If none exists, create `styles/globals.css` with:
36
+
37
+ ```css
38
+ @import "tailwindcss";
39
+ @import "@devalok/shilp-sutra/css";
40
+ ```
41
+
42
+ Import it from `pages/_app.tsx`:
43
+
44
+ ```tsx
45
+ import "../styles/globals.css";
46
+ ```
47
+
48
+ ## 5. `transpilePackages`
49
+
50
+ Identical to App Router — see [§ 5](./install-next-app-router.md#5-configure-transpilepackages).
51
+
52
+ ## 6. Providers in `_app.tsx`
53
+
54
+ Replace or merge into `pages/_app.tsx`:
55
+
56
+ ```tsx
57
+ import "../styles/globals.css";
58
+ import type { AppProps } from "next/app";
59
+ import { ThemeProvider } from "next-themes";
60
+ import { Toaster } from "@devalok/shilp-sutra/ui/toaster";
61
+
62
+ export default function App({ Component, pageProps }: AppProps) {
63
+ return (
64
+ <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
65
+ <Component {...pageProps} />
66
+ <Toaster />
67
+ </ThemeProvider>
68
+ );
69
+ }
70
+ ```
71
+
72
+ For `next-themes` to avoid hydration warnings, add a `_document.tsx` with `suppressHydrationWarning` on the `<html>`:
73
+
74
+ ```tsx
75
+ // pages/_document.tsx
76
+ import { Html, Head, Main, NextScript } from "next/document";
77
+
78
+ export default function Document() {
79
+ return (
80
+ <Html lang="en" suppressHydrationWarning>
81
+ <Head />
82
+ <body>
83
+ <Main />
84
+ <NextScript />
85
+ </body>
86
+ </Html>
87
+ );
88
+ }
89
+ ```
90
+
91
+ ## 7. Verify
92
+
93
+ Replace `pages/index.tsx`:
94
+
95
+ ```tsx
96
+ import { Button } from "@devalok/shilp-sutra/ui/button";
97
+ import { Stack } from "@devalok/shilp-sutra/ui/stack";
98
+ import { Text } from "@devalok/shilp-sutra/ui/text";
99
+
100
+ export default function Home() {
101
+ return (
102
+ <Stack className="p-ds-08" gap="ds-04">
103
+ <Text variant="heading-2xl">Hello, Shilp Sutra</Text>
104
+ <Stack direction="row" gap="ds-03">
105
+ <Button>Primary</Button>
106
+ <Button variant="soft">Soft</Button>
107
+ </Stack>
108
+ </Stack>
109
+ );
110
+ }
111
+ ```
112
+
113
+ Run `pnpm dev` and open `http://localhost:3000`. Expected output is the same as the App Router recipe — see [§ 7](./install-next-app-router.md#7-verify-the-install).
114
+
115
+ ## 8. Pages Router specifics
116
+
117
+ - **No React Server Components.** Every component runs on the client. Per-component imports still help tree-shaking but are not required for RSC safety.
118
+ - **`getServerSideProps` / `getStaticProps`** — do not import shilp-sutra components inside these (they run server-side and won't render JSX). Components are imported and used in the page module's default export, as usual.
119
+ - **`pages/_document.tsx` runs server-only.** Do not import shilp-sutra components there.
120
+
121
+ ## 9. Gotchas
122
+
123
+ Same as App Router — see [§ 8](./install-next-app-router.md#8-common-gotchas).
124
+
125
+ ## 10. What NOT to do
126
+
127
+ Same as App Router — see [§ 9](./install-next-app-router.md#9-what-you-should-not-do).