@devalok/shilp-sutra 0.47.0 → 0.49.0

package/mcp-manifest.schema.json

@@ -70,6 +70,24 @@
           "description": "Convenience mirror of each prop's defaultValue for props with defaults (from the doc's Defaults section).",
           "additionalProperties": { "type": ["string", "number", "boolean"] }
         },
+        "subComponents": {
+          "type": "object",
+          "description": "Props owned by compound subcomponents, parsed from `### Subpart` headings inside the doc's Props section. Keeps a child's props OFF the root entry: a `numeric` prop belonging to TableCell must not read as a prop of <Table>, or an agent writes `<Table numeric>` and hits TS2322 (#132). Keyed by subcomponent display name.",
+          "patternProperties": {
+            "^[A-Za-z][A-Za-z0-9.]*$": {
+              "type": "object",
+              "additionalProperties": false,
+              "properties": {
+                "note": { "type": "string", "description": "Parenthetical from the subpart heading — e.g. a separate import path for a subcomponent shipped under its own subpath export." },
+                "props": {
+                  "type": "object",
+                  "additionalProperties": { "$ref": "#/$defs/prop" }
+                }
+              }
+            }
+          },
+          "additionalProperties": false
+        },
         "examples": {
           "type": "array",
           "items": { "type": "string" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devalok/shilp-sutra",
-  "version": "0.47.0",
+  "version": "0.49.0",
   "description": "Devalok Design System — accessible React components, OKLCH design tokens, and Tailwind 4 CSS-first setup. Ships with AI-agent setup recipes.",
   "license": "MIT",
   "author": "Devalok Design & Strategy Studios <shilp-sutra@devalok.in>",
@@ -52,8 +52,10 @@
     "provenance": true
   },
   "dependencies": {
+    "@emoji-mart/data": "^1.2.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "frimousse": "^0.3.0",
     "tw-animate-css": "^1.4.0",
     "use-sync-external-store": "^1.5.0"
   },
@@ -202,6 +204,11 @@
       "import": "./dist/ui/devalok-grain.js",
       "default": "./dist/ui/devalok-grain.js"
     },
+    "./ui/dot": {
+      "types": "./dist/ui/dot.d.ts",
+      "import": "./dist/ui/dot.js",
+      "default": "./dist/ui/dot.js"
+    },
     "./ui/dropdown-menu": {
       "types": "./dist/ui/dropdown-menu.d.ts",
       "import": "./dist/ui/dropdown-menu.js",
@@ -367,11 +374,6 @@
       "import": "./dist/ui/stat-card.js",
       "default": "./dist/ui/stat-card.js"
     },
-    "./ui/status-dot": {
-      "types": "./dist/ui/status-dot.d.ts",
-      "import": "./dist/ui/status-dot.js",
-      "default": "./dist/ui/status-dot.js"
-    },
     "./ui/stepper": {
       "types": "./dist/ui/stepper.d.ts",
       "import": "./dist/ui/stepper.js",
@@ -637,6 +639,11 @@
       "import": "./dist/composed/priority-indicator.js",
       "default": "./dist/composed/priority-indicator.js"
     },
+    "./composed/responsive-modal": {
+      "types": "./dist/composed/responsive-modal.d.ts",
+      "import": "./dist/composed/responsive-modal.js",
+      "default": "./dist/composed/responsive-modal.js"
+    },
     "./composed/rich-text-editor": {
       "types": "./dist/composed/rich-text-editor.d.ts",
       "import": "./dist/composed/rich-text-editor.js",
@@ -839,8 +846,6 @@
     ]
   },
   "peerDependencies": {
-    "@emoji-mart/data": "^1.0.0",
-    "@emoji-mart/react": "^1.0.0",
     "@tabler/icons-react": "^3.0.0",
     "@tanstack/react-table": "^8.0.0",
     "@tanstack/react-virtual": "^3.0.0",
@@ -873,12 +878,6 @@
     "@tanstack/react-virtual": {
       "optional": true
     },
-    "@emoji-mart/data": {
-      "optional": true
-    },
-    "@emoji-mart/react": {
-      "optional": true
-    },
     "d3-array": {
       "optional": true
     },
@@ -985,6 +984,9 @@
     "build:tokens": "node scripts/copy-tokens.mjs",
     "build:docs": "node scripts/build-component-docs.mjs",
     "build:docs:check": "node scripts/build-component-docs.mjs --check",
+    "peers:check": "node scripts/derive-peer-map.mjs --check",
+    "smoke:cold": "node scripts/cold-install-smoke.mjs",
+    "smoke:cold:next": "node scripts/cold-install-smoke.mjs --framework next-app-router",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src/",
     "test": "vitest run",

package/skill/SKILL.md

@@ -3,7 +3,7 @@ name: shilp-sutra
 description: Add, configure, and use components from Devalok's shilp-sutra design system (@devalok/shilp-sutra) — a Tailwind 4 + React 19 + CVA library with 110+ accessible components, OKLCH design tokens, framer-motion animations, and per-component RSC-safe entry points. Use this skill whenever the user mentions shilp-sutra, Devalok, the @devalok npm scope, or asks to install/add/style/theme UI in any React project that already depends on the package — even if they don't name it explicitly. Use it instead of generic shadcn/ui, MUI, or Chakra knowledge when shilp-sutra is in the project. Covers Next.js (App + Pages), Vite, Astro, Remix, TanStack Start setup playbooks; component API and variant reference; brand token customization; Server Component import patterns; and a troubleshoot tree for the thirteen most common breakages.
 license: MIT
 metadata:
-  version: "0.47.0"
+  version: "0.49.0"
   author: Devalok Design & Strategy Studios
   homepage: https://github.com/devalok-design/shilp-sutra
   npm: https://www.npmjs.com/package/@devalok/shilp-sutra

package/skill/references/components.md

@@ -2,13 +2,13 @@
 
 # @devalok/shilp-sutra
 
-> Radix UI + Tailwind 4 (CSS-first) + CVA design system for Devalok apps, v0.47.0.
+> Radix UI + Tailwind 4 (CSS-first) + CVA design system for Devalok apps, v0.49.0.
 > Built on the same primitives as shadcn/ui but with DIFFERENT prop APIs — never guess from shadcn knowledge; verify every prop.
 > This file is a ROUTER: it tells you what exists and where to get details. Do not look for prop tables here — fetch them per component (MCP tool or per-component doc file below).
 
 ## How to get component details (in priority order)
 
-1. **shilp-sutra MCP** (if connected): `get_component(name)` — version-exact props/variants/examples/composition as JSON. Also: `find_component(query)`, `get_tokens(category)`, `get_setup(framework)`, `upgrade(from, to)`, `search_docs(query)`. Pass your installed version (`node_modules/@devalok/shilp-sutra/package.json`) as `version` on every call.
+1. **shilp-sutra MCP** (if connected): `get_component(name)` — version-exact props/variants/examples/composition as JSON. Also: `find_component(query)`, `get_tokens(category)`, `get_setup(framework)`, `upgrade(from, to)`, `search_docs(query)`. **Setting up in a project?** `detect_framework(packageJson)` → `get_setup(framework)` → `preflight(framework, imports)` (peer installs) → `validate_snippet(code)` before writing → `verify_setup(...)`. Pass your installed version (`node_modules/@devalok/shilp-sutra/package.json`) as `version` on every call.
    Connect: `claude mcp add --transport http shilp-sutra https://shilp-sutra.devalok.in/mcp`
 2. **No MCP?** Read the single per-component file linked in the index below (`node_modules/@devalok/shilp-sutra/docs/components/...`, ~3K tokens each). Read only the components you need — never bulk-read the directory.
 3. **Machine-readable everything**: `mcp-manifest.json` at the package root (all props/tokens/composition as JSON, react-docgen shape). Prefer targeted reads of it over any prose.
@@ -67,6 +67,7 @@ Format: `[name](doc path): summary`. Import paths follow `@devalok/shilp-sutra/<
 - [data-table-toolbar](docs/components/ui/data-table-toolbar.md)
 - [devalok-grain](docs/components/ui/devalok-grain.md)
 - [dialog](docs/components/ui/dialog.md)
+- [dot](docs/components/ui/dot.md): A small semantic status/indicator dot — the low-level primitive behind status pills, presence indicators, legend swatches, and `StatusDot`
 - [dropdown-menu](docs/components/ui/dropdown-menu.md)
 - [file-upload](docs/components/ui/file-upload.md)
 - [form](docs/components/ui/form.md)
@@ -85,7 +86,7 @@ Format: `[name](doc path): summary`. Import paths follow `@devalok/shilp-sutra/<
 - [oauth-button](docs/components/ui/oauth-button.md)
 - [pagination](docs/components/ui/pagination.md)
 - [popover](docs/components/ui/popover.md)
-- [progress](docs/components/ui/progress.md)
+- [progress](docs/components/ui/progress.md): A linear progress bar
 - [progress-ring](docs/components/ui/progress-ring.md)
 - [radio](docs/components/ui/radio.md)
 - [search-input](docs/components/ui/search-input.md)
@@ -100,7 +101,6 @@ Format: `[name](doc path): summary`. Import paths follow `@devalok/shilp-sutra/<
 - [stack](docs/components/ui/stack.md)
 - [stat-card](docs/components/ui/stat-card.md)
 - [stat-flash](docs/components/ui/stat-flash.md)
-- [status-dot](docs/components/ui/status-dot.md)
 - [stepper](docs/components/ui/stepper.md)
 - [surface](docs/components/ui/surface.md): The low-level elevated container primitive
 - [switch](docs/components/ui/switch.md)
@@ -143,6 +143,7 @@ Format: `[name](doc path): summary`. Import paths follow `@devalok/shilp-sutra/<
 - [page-header](docs/components/composed/page-header.md)
 - [page-skeletons](docs/components/composed/page-skeletons.md): Exports: DashboardSkeleton, ProjectListSkeleton, TaskDetailSkeleton
 - [priority-indicator](docs/components/composed/priority-indicator.md)
+- [responsive-modal](docs/components/composed/responsive-modal.md)
 - [rich-chat-input](docs/components/composed/rich-chat-input.md): Compact rich text chat input for unified human+AI workspaces
 - [rich-text-editor](docs/components/composed/rich-text-editor.md): Exports: RichTextEditor, RichTextViewer
 - [schedule-view](docs/components/composed/schedule-view.md)
@@ -159,6 +160,13 @@ Format: `[name](doc path): summary`. Import paths follow `@devalok/shilp-sutra/<
 - [sidebar](docs/components/shell/sidebar.md)
 - [top-bar](docs/components/shell/top-bar.md)
 
+### ai
+- [ai-command-provider](docs/components/ai/ai-command-provider.md): Context provider for the AI command system
+- [block-renderer](docs/components/ai/block-renderer.md): Renders an ordered list of typed AI "blocks" — the structured chunks an assistant/ server emits instead of plain text
+- [command-bar](docs/components/ai/command-bar.md): A unified AI command input with three layout variants
+- [conversation](docs/components/ai/conversation.md): A scrollable AI conversation thread: user + assistant turns, streaming processing steps, an agent header, and structured content blocks (rendered via BlockRenderer) with confirm/cancel/undo action support
+- [devadoot-icon](docs/components/ai/devadoot-icon.md): The animated Devalok chakra glyph — the visual identity for the AI command system
+
 ## Tokens
 
 Categories: color, spacing (`ds-01`…), typography (`text-ds-*`), radius (`rounded-ds-*`), shadow (`shadow-raised`/`shadow-overlay`/…), motion, z-layers. Full reference: `get_tokens(category)` via MCP, or the `tokens` object in `mcp-manifest.json`.

package/skill/references/setup-astro.md

@@ -33,18 +33,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/skill/references/setup-next-app-router.md

@@ -48,16 +48,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.
 
@@ -166,9 +169,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/skill/references/setup-next-pages.md

@@ -18,7 +18,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
 
@@ -69,6 +69,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/skill/references/setup-remix.md

@@ -12,7 +12,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
 
@@ -29,18 +29,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/skill/references/setup-tanstack-start.md

@@ -16,6 +16,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
@@ -36,18 +38,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`
 
@@ -117,6 +122,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/skill/references/setup-vite.md

@@ -44,18 +44,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`
 
@@ -138,7 +141,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(
@@ -151,14 +154,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/skill/references/troubleshoot.md

@@ -97,26 +97,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`.

package/dist/_chunks/emoji-data.js

@@ -1,45 +0,0 @@
-"use client";
-import { emojiDataLoaders as e } from "../composed/emoji-picker.js";
-//#region src/composed/extensions/emoji-data.ts
-var t = (e) => `https://cdn.jsdelivr.net/npm/emoji-datasource-${e}@15.0.1/img/${e}/sheets-256/64.png`, n = null, r = null;
-async function i(t) {
-	if (n === t && r) return r;
-	let i = await (e[t] ?? e.native)();
-	return r = i.default ?? i, n = t, r;
-}
-function a(e, t) {
-	let n = e.emojis[t];
-	if (!n) return null;
-	let r = n.skins[0];
-	return r ? {
-		id: n.id,
-		name: n.name,
-		native: r.native,
-		x: r.x ?? 0,
-		y: r.y ?? 0
-	} : null;
-}
-function o(e, t, n = 8) {
-	let r = Object.values(e.emojis);
-	if (!t) return r.slice(0, n).map((e) => ({
-		id: e.id,
-		name: e.name,
-		native: e.skins[0]?.native ?? "",
-		x: e.skins[0]?.x ?? 0,
-		y: e.skins[0]?.y ?? 0
-	}));
-	let i = t.toLowerCase(), a = [];
-	for (let e of r) {
-		if (a.length >= n) break;
-		(e.id.includes(i) || e.name.toLowerCase().includes(i) || e.keywords?.some((e) => e.includes(i))) && a.push({
-			id: e.id,
-			name: e.name,
-			native: e.skins[0]?.native ?? "",
-			x: e.skins[0]?.x ?? 0,
-			y: e.skins[0]?.y ?? 0
-		});
-	}
-	return a;
-}
-//#endregion
-export { o as i, i as n, a as r, t };

package/dist/_chunks/emoji-data.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"emoji-data.js","names":[],"sources":["../../src/composed/extensions/emoji-data.ts"],"sourcesContent":["import { emojiDataLoaders } from '../emoji-picker'\n\n// Spritesheet constants — must match emoji-mart's rendering (emoji-datasource v15.0.1)\nexport const SPRITESHEET_URL = (set: string) =>\n  `https://cdn.jsdelivr.net/npm/emoji-datasource-${set}@15.0.1/img/${set}/sheets-256/64.png`\nexport const SHEET_COLS = 61\nexport const SHEET_ROWS = 61\n\ninterface EmojiSkin {\n  unified: string\n  native: string\n  x?: number\n  y?: number\n}\n\ninterface EmojiEntry {\n  id: string\n  name: string\n  keywords?: string[]\n  skins: EmojiSkin[]\n}\n\nexport interface EmojiDataset {\n  emojis: Record<string, EmojiEntry>\n  sheet?: { cols: number; rows: number }\n}\n\nexport interface ResolvedEmoji {\n  id: string\n  name: string\n  native: string\n  x: number\n  y: number\n}\n\nlet cachedSet: string | null = null\nlet cachedData: EmojiDataset | null = null\n\nexport async function loadEmojiData(set: string): Promise<EmojiDataset> {\n  if (cachedSet === set && cachedData) return cachedData\n  const loader = emojiDataLoaders[set] ?? emojiDataLoaders.native\n  const mod = await loader()\n  cachedData = (mod.default ?? mod) as EmojiDataset\n  cachedSet = set\n  return cachedData\n}\n\nexport function lookupEmoji(data: EmojiDataset, id: string): ResolvedEmoji | null {\n  const entry = data.emojis[id]\n  if (!entry) return null\n  const skin = entry.skins[0]\n  if (!skin) return null\n  return {\n    id: entry.id,\n    name: entry.name,\n    native: skin.native,\n    x: skin.x ?? 0,\n    y: skin.y ?? 0,\n  }\n}\n\nexport function searchEmoji(data: EmojiDataset, query: string, limit = 8): ResolvedEmoji[] {\n  const entries = Object.values(data.emojis)\n  if (!query) {\n    return entries.slice(0, limit).map((e) => ({\n      id: e.id,\n      name: e.name,\n      native: e.skins[0]?.native ?? '',\n      x: e.skins[0]?.x ?? 0,\n      y: e.skins[0]?.y ?? 0,\n    }))\n  }\n  const q = query.toLowerCase()\n  const results: ResolvedEmoji[] = []\n  for (const e of entries) {\n    if (results.length >= limit) break\n    if (\n      e.id.includes(q) ||\n      e.name.toLowerCase().includes(q) ||\n      e.keywords?.some((k) => k.includes(q))\n    ) {\n      results.push({\n        id: e.id,\n        name: e.name,\n        native: e.skins[0]?.native ?? '',\n        x: e.skins[0]?.x ?? 0,\n        y: e.skins[0]?.y ?? 0,\n      })\n    }\n  }\n  return results\n}\n"],"mappings":";;AAGA,IAAa,KAAmB,MAC9B,iDAAiD,EAAI,cAAc,EAAI,qBA+BrE,IAA2B,MAC3B,IAAkC;AAEtC,eAAsB,EAAc,GAAoC;AACtE,KAAI,MAAc,KAAO,EAAY,QAAO;CAE5C,IAAM,IAAM,OADG,EAAiB,MAAQ,EAAiB,SAC/B;AAG1B,QAFA,IAAc,EAAI,WAAW,GAC7B,IAAY,GACL;;AAGT,SAAgB,EAAY,GAAoB,GAAkC;CAChF,IAAM,IAAQ,EAAK,OAAO;AAC1B,KAAI,CAAC,EAAO,QAAO;CACnB,IAAM,IAAO,EAAM,MAAM;AAEzB,QADK,IACE;EACL,IAAI,EAAM;EACV,MAAM,EAAM;EACZ,QAAQ,EAAK;EACb,GAAG,EAAK,KAAK;EACb,GAAG,EAAK,KAAK;EACd,GAPiB;;AAUpB,SAAgB,EAAY,GAAoB,GAAe,IAAQ,GAAoB;CACzF,IAAM,IAAU,OAAO,OAAO,EAAK,OAAO;AAC1C,KAAI,CAAC,EACH,QAAO,EAAQ,MAAM,GAAG,EAAM,CAAC,KAAK,OAAO;EACzC,IAAI,EAAE;EACN,MAAM,EAAE;EACR,QAAQ,EAAE,MAAM,IAAI,UAAU;EAC9B,GAAG,EAAE,MAAM,IAAI,KAAK;EACpB,GAAG,EAAE,MAAM,IAAI,KAAK;EACrB,EAAE;CAEL,IAAM,IAAI,EAAM,aAAa,EACvB,IAA2B,EAAE;AACnC,MAAK,IAAM,KAAK,GAAS;AACvB,MAAI,EAAQ,UAAU,EAAO;AAC7B,GACE,EAAE,GAAG,SAAS,EAAE,IAChB,EAAE,KAAK,aAAa,CAAC,SAAS,EAAE,IAChC,EAAE,UAAU,MAAM,MAAM,EAAE,SAAS,EAAE,CAAC,KAEtC,EAAQ,KAAK;GACX,IAAI,EAAE;GACN,MAAM,EAAE;GACR,QAAQ,EAAE,MAAM,IAAI,UAAU;GAC9B,GAAG,EAAE,MAAM,IAAI,KAAK;GACpB,GAAG,EAAE,MAAM,IAAI,KAAK;GACrB,CAAC;;AAGN,QAAO"}

package/dist/composed/extensions/emoji-suggestion.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"emoji-suggestion.js","names":[],"sources":["../../../src/composed/extensions/emoji-suggestion.tsx"],"sourcesContent":["import { Extension } from '@tiptap/core'\nimport Suggestion, { type SuggestionKeyDownProps,type SuggestionProps } from '@tiptap/suggestion'\nimport { PluginKey } from 'prosemirror-state'\nimport * as React from 'react'\nimport { createRoot, type Root } from 'react-dom/client'\n\nimport { cn } from '../../ui/lib/utils'\nimport { loadEmojiData, type ResolvedEmoji, searchEmoji, SHEET_COLS, SHEET_ROWS,SPRITESHEET_URL } from './emoji-data'\n\n// Re-export for external consumers\nexport type { ResolvedEmoji as EmojiSuggestionItem }\n\nfunction EmojiImage({ emoji, set, size = '1.2em' }: { emoji: ResolvedEmoji; set: string; size?: string }) {\n  if (set === 'native') {\n    return <span style={{ fontSize: size }}>{emoji.native}</span>\n  }\n  return (\n    <span\n      role=\"img\"\n      aria-label={emoji.native}\n      className=\"inline-block\"\n      style={{\n        width: size,\n        height: size,\n        backgroundImage: `url(${SPRITESHEET_URL(set)})`,\n        backgroundSize: `${100 * SHEET_COLS}% ${100 * SHEET_ROWS}%`,\n        backgroundPosition: `${(100 / (SHEET_COLS - 1)) * emoji.x}% ${(100 / (SHEET_ROWS - 1)) * emoji.y}%`,\n      }}\n    />\n  )\n}\n\ninterface EmojiListRef {\n  onKeyDown: (props: SuggestionKeyDownProps) => boolean\n}\n\ninterface EmojiListProps {\n  items: ResolvedEmoji[]\n  set: string\n  command: (item: ResolvedEmoji) => void\n}\n\nconst EmojiList = React.forwardRef<EmojiListRef, EmojiListProps>(\n  ({ items, set, command }, ref) => {\n    const [selectedIndex, setSelectedIndex] = React.useState(0)\n\n    React.useEffect(() => setSelectedIndex(0), [items])\n\n    React.useImperativeHandle(ref, () => ({\n      onKeyDown: ({ event }: SuggestionKeyDownProps) => {\n        if (event.key === 'ArrowUp') {\n          setSelectedIndex((i) => (i + items.length - 1) % items.length)\n          return true\n        }\n        if (event.key === 'ArrowDown') {\n          setSelectedIndex((i) => (i + 1) % items.length)\n          return true\n        }\n        if (event.key === 'Enter') {\n          if (items[selectedIndex]) command(items[selectedIndex])\n          return true\n        }\n        return false\n      },\n    }))\n\n    if (!items.length) return null\n\n    return (\n      <div role=\"listbox\" aria-label=\"Emoji suggestions\" className=\"z-popover max-h-[200px] overflow-x-hidden overflow-y-auto rounded-control bg-surface-overlay shadow-raised-hover\">\n        {items.map((item, index) => (\n          <button\n            key={item.id}\n            type=\"button\"\n            role=\"option\"\n            aria-selected={index === selectedIndex}\n            onClick={() => command(item)}\n            className={cn(\n              'flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left text-ds-sm',\n              index === selectedIndex ? 'bg-surface-raised text-surface-fg' : 'text-surface-fg-muted hover:bg-surface-raised',\n            )}\n          >\n            <EmojiImage emoji={item} set={set} size=\"1.25em\" />\n            <span className=\"truncate\">:{item.id}:</span>\n          </button>\n        ))}\n      </div>\n    )\n  },\n)\nEmojiList.displayName = 'EmojiList'\n\nfunction createEmojiSuggestionRenderer(set: string) {\n  return () => {\n    let root: Root | null = null\n    let container: HTMLDivElement | null = null\n    let componentRef: EmojiListRef | null = null\n\n    return {\n      onStart: (props: SuggestionProps<ResolvedEmoji>) => {\n        container = document.createElement('div')\n        container.style.position = 'absolute'\n        container.style.zIndex = '1400'\n        const rect = props.clientRect?.()\n        if (rect) {\n          container.style.left = `${rect.left}px`\n          container.style.top = `${rect.bottom + 4}px`\n        }\n        document.body.appendChild(container)\n        root = createRoot(container)\n        root.render(\n          <EmojiList\n            ref={(r) => { componentRef = r }}\n            items={props.items as ResolvedEmoji[]}\n            set={set}\n            command={(item) => props.command(item)}\n          />,\n        )\n      },\n\n      onUpdate: (props: SuggestionProps<ResolvedEmoji>) => {\n        if (!root || !container) return\n        const rect = props.clientRect?.()\n        if (rect) {\n          container.style.left = `${rect.left}px`\n          container.style.top = `${rect.bottom + 4}px`\n        }\n        root.render(\n          <EmojiList\n            ref={(r) => { componentRef = r }}\n            items={props.items as ResolvedEmoji[]}\n            set={set}\n            command={(item) => props.command(item)}\n          />,\n        )\n      },\n\n      onKeyDown: (props: SuggestionKeyDownProps) => {\n        if (props.event.key === 'Escape') {\n          if (container) {\n            root?.unmount()\n            container.remove()\n            container = null\n            root = null\n          }\n          return true\n        }\n        return componentRef?.onKeyDown(props) ?? false\n      },\n\n      onExit: () => {\n        if (container) {\n          root?.unmount()\n          container.remove()\n          container = null\n          root = null\n        }\n      },\n    }\n  }\n}\n\n/** Factory: call with the emoji set to get a configured extension. */\nexport function createEmojiSuggestion(set = 'native') {\n  return Extension.create({\n    name: 'emojiSuggestion',\n\n    addProseMirrorPlugins() {\n      return [\n        Suggestion({\n          pluginKey: new PluginKey('emojiSuggestion'),\n          editor: this.editor,\n          char: ':',\n          items: async ({ query }) => {\n            const data = await loadEmojiData(set)\n            return searchEmoji(data, query, 8)\n          },\n          command: ({ editor, range, props: item }) => {\n            const emoji = item as ResolvedEmoji\n            editor\n              .chain()\n              .focus()\n              .deleteRange(range)\n              .insertContent({\n                type: 'emojiNode',\n                attrs: { id: emoji.id, native: emoji.native, set, x: emoji.x, y: emoji.y },\n              })\n              .run()\n          },\n          render: createEmojiSuggestionRenderer(set),\n        }),\n      ]\n    },\n  })\n}\n"],"mappings":"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"}