@devalok/shilp-sutra 0.48.0 → 0.49.1

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.48.0",
+  "version": "0.49.1",
   "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>",
@@ -204,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",
@@ -369,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",
@@ -639,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",

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.48.0"
+  version: "0.49.1"
   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,7 +2,7 @@
 
 # @devalok/shilp-sutra
 
-> Radix UI + Tailwind 4 (CSS-first) + CVA design system for Devalok apps, v0.48.0.
+> Radix UI + Tailwind 4 (CSS-first) + CVA design system for Devalok apps, v0.49.1.
 > 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).
 
@@ -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/dist/ui/status-dot.d.ts

@@ -1,27 +0,0 @@
-"use client";
-import * as React from 'react';
-type Status = 'healthy' | 'warning' | 'critical' | 'neutral' | 'inactive';
-/**
- * A semantic health/presence indicator dot with optional pulse animation and inline label.
- *
- * @example
- * <StatusDot status="healthy" />
- * <StatusDot status="critical" label="Service down" pulse />
- * <StatusDot status="warning" size="lg" label="Elevated load" />
- */
-export interface StatusDotProps extends React.HTMLAttributes<HTMLSpanElement> {
-    status: Status;
-    /** @default 'md' */
-    size?: 'sm' | 'md' | 'lg';
-    /** @default 'filled' */
-    variant?: 'filled' | 'ring';
-    /** Pulse animation. Defaults to true for 'healthy', false for others. */
-    pulse?: boolean;
-    /** Inline label text rendered after the dot */
-    label?: string;
-    labelClassName?: string;
-}
-declare const StatusDot: React.ForwardRefExoticComponent<StatusDotProps & React.RefAttributes<HTMLSpanElement>>;
-export { StatusDot };
-export type { Status as StatusDotStatus };
-//# sourceMappingURL=status-dot.d.ts.map

package/dist/ui/status-dot.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"status-dot.d.ts","sourceRoot":"","sources":["../../src/ui/status-dot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,CAAA;AAwCzE;;;;;;;GAOG;AACH,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC3E,MAAM,EAAE,MAAM,CAAA;IACd,oBAAoB;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,wBAAwB;IACxB,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IAC3B,yEAAyE;IACzE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,QAAA,MAAM,SAAS,wFAmCd,CAAA;AAGD,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,MAAM,IAAI,eAAe,EAAE,CAAA"}

package/dist/ui/status-dot.js

@@ -1,68 +0,0 @@
-"use client";
-import { cn as e } from "./lib/utils.js";
-import * as t from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-//#region src/ui/status-dot.tsx
-var i = {
-	healthy: "bg-success-9",
-	warning: "bg-warning-9",
-	critical: "bg-error-9",
-	neutral: "bg-neutral-8",
-	inactive: "bg-neutral-6"
-}, a = {
-	healthy: "text-success-11",
-	warning: "text-warning-11",
-	critical: "text-error-11",
-	neutral: "text-surface-fg-muted",
-	inactive: "text-surface-fg-subtle"
-}, o = {
-	healthy: "border-success-9",
-	warning: "border-warning-9",
-	critical: "border-error-9",
-	neutral: "border-neutral-8",
-	inactive: "border-neutral-6"
-}, s = {
-	healthy: "bg-success-9/40",
-	warning: "bg-warning-9/40",
-	critical: "bg-error-9/40",
-	neutral: "bg-neutral-8/40",
-	inactive: "bg-neutral-6/40"
-}, c = {
-	sm: {
-		dot: "h-1.5 w-1.5",
-		pulse: "h-1.5 w-1.5",
-		text: "text-ds-xs"
-	},
-	md: {
-		dot: "h-2 w-2",
-		pulse: "h-2 w-2",
-		text: "text-ds-sm"
-	},
-	lg: {
-		dot: "h-2.5 w-2.5",
-		pulse: "h-2.5 w-2.5",
-		text: "text-ds-sm"
-	}
-}, l = t.forwardRef(({ status: t, size: l = "md", variant: u = "filled", pulse: d, label: f, labelClassName: p, className: m, "aria-label": h, ...g }, _) => {
-	let v = d ?? t === "healthy", y = c[l], b = f ? `${f} \u2014 ${t}` : `Status: ${t}`, x = u === "ring" ? e("relative inline-flex rounded-pill border-[1.5px]", y.dot, o[t], "bg-transparent") : e("relative inline-flex rounded-pill", y.dot, i[t]);
-	return /* @__PURE__ */ r("span", {
-		ref: _,
-		role: "status",
-		"aria-label": h ?? b,
-		className: e("inline-flex items-center gap-ds-02", m),
-		...g,
-		children: [/* @__PURE__ */ r("span", {
-			className: "relative inline-flex shrink-0",
-			children: [v && /* @__PURE__ */ n("span", {
-				"data-pulse": "",
-				className: e("absolute inline-flex rounded-pill animate-ping motion-reduce:animate-none", y.pulse, s[t])
-			}), /* @__PURE__ */ n("span", { className: x })]
-		}), f && /* @__PURE__ */ n("span", {
-			className: e(y.text, a[t], "font-sans", p),
-			children: f
-		})]
-	});
-});
-l.displayName = "StatusDot";
-//#endregion
-export { l as StatusDot };

package/dist/ui/status-dot.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"status-dot.js","names":[],"sources":["../../src/ui/status-dot.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\ntype Status = 'healthy' | 'warning' | 'critical' | 'neutral' | 'inactive'\n\nconst dotColorMap: Record<Status, string> = {\n  healthy: 'bg-success-9',\n  warning: 'bg-warning-9',\n  critical: 'bg-error-9',\n  neutral: 'bg-neutral-8',\n  inactive: 'bg-neutral-6',\n}\n\nconst textColorMap: Record<Status, string> = {\n  healthy: 'text-success-11',\n  warning: 'text-warning-11',\n  critical: 'text-error-11',\n  neutral: 'text-surface-fg-muted',\n  inactive: 'text-surface-fg-subtle',\n}\n\nconst ringBorderColorMap: Record<Status, string> = {\n  healthy: 'border-success-9',\n  warning: 'border-warning-9',\n  critical: 'border-error-9',\n  neutral: 'border-neutral-8',\n  inactive: 'border-neutral-6',\n}\n\nconst pulseColorMap: Record<Status, string> = {\n  healthy: 'bg-success-9/40',\n  warning: 'bg-warning-9/40',\n  critical: 'bg-error-9/40',\n  neutral: 'bg-neutral-8/40',\n  inactive: 'bg-neutral-6/40',\n}\n\nconst sizeMap = {\n  sm: { dot: 'h-1.5 w-1.5', pulse: 'h-1.5 w-1.5', text: 'text-ds-xs' },\n  md: { dot: 'h-2 w-2', pulse: 'h-2 w-2', text: 'text-ds-sm' },\n  lg: { dot: 'h-2.5 w-2.5', pulse: 'h-2.5 w-2.5', text: 'text-ds-sm' },\n} as const\n\n/**\n * A semantic health/presence indicator dot with optional pulse animation and inline label.\n *\n * @example\n * <StatusDot status=\"healthy\" />\n * <StatusDot status=\"critical\" label=\"Service down\" pulse />\n * <StatusDot status=\"warning\" size=\"lg\" label=\"Elevated load\" />\n */\nexport interface StatusDotProps extends React.HTMLAttributes<HTMLSpanElement> {\n  status: Status\n  /** @default 'md' */\n  size?: 'sm' | 'md' | 'lg'\n  /** @default 'filled' */\n  variant?: 'filled' | 'ring'\n  /** Pulse animation. Defaults to true for 'healthy', false for others. */\n  pulse?: boolean\n  /** Inline label text rendered after the dot */\n  label?: string\n  labelClassName?: string\n}\n\nconst StatusDot = React.forwardRef<HTMLSpanElement, StatusDotProps>(\n  ({ status, size = 'md', variant = 'filled', pulse, label, labelClassName, className, 'aria-label': ariaLabelProp, ...props }, ref) => {\n    const shouldPulse = pulse ?? status === 'healthy'\n    const s = sizeMap[size]\n    const autoAriaLabel = label ? `${label} \\u2014 ${status}` : `Status: ${status}`\n\n    const dotClasses = variant === 'ring'\n      ? cn('relative inline-flex rounded-pill border-[1.5px]', s.dot, ringBorderColorMap[status], 'bg-transparent')\n      : cn('relative inline-flex rounded-pill', s.dot, dotColorMap[status])\n\n    return (\n      <span\n        ref={ref}\n        role=\"status\"\n        aria-label={ariaLabelProp ?? autoAriaLabel}\n        className={cn('inline-flex items-center gap-ds-02', className)}\n        {...props}\n      >\n        <span className=\"relative inline-flex shrink-0\">\n          {shouldPulse && (\n            <span\n              data-pulse=\"\"\n              className={cn('absolute inline-flex rounded-pill animate-ping motion-reduce:animate-none', s.pulse, pulseColorMap[status])}\n            />\n          )}\n          <span className={dotClasses} />\n        </span>\n        {label && (\n          <span className={cn(s.text, textColorMap[status], 'font-sans', labelClassName)}>\n            {label}\n          </span>\n        )}\n      </span>\n    )\n  },\n)\nStatusDot.displayName = 'StatusDot'\n\nexport { StatusDot }\nexport type { Status as StatusDotStatus }\n"],"mappings":";;;;;AAQA,IAAM,IAAsC;CAC1C,SAAS;CACT,SAAS;CACT,UAAU;CACV,SAAS;CACT,UAAU;CACX,EAEK,IAAuC;CAC3C,SAAS;CACT,SAAS;CACT,UAAU;CACV,SAAS;CACT,UAAU;CACX,EAEK,IAA6C;CACjD,SAAS;CACT,SAAS;CACT,UAAU;CACV,SAAS;CACT,UAAU;CACX,EAEK,IAAwC;CAC5C,SAAS;CACT,SAAS;CACT,UAAU;CACV,SAAS;CACT,UAAU;CACX,EAEK,IAAU;CACd,IAAI;EAAE,KAAK;EAAe,OAAO;EAAe,MAAM;EAAc;CACpE,IAAI;EAAE,KAAK;EAAW,OAAO;EAAW,MAAM;EAAc;CAC5D,IAAI;EAAE,KAAK;EAAe,OAAO;EAAe,MAAM;EAAc;CACrE,EAuBK,IAAY,EAAM,YACrB,EAAE,WAAQ,UAAO,MAAM,aAAU,UAAU,UAAO,UAAO,mBAAgB,cAAW,cAAc,GAAe,GAAG,KAAS,MAAQ;CACpI,IAAM,IAAc,KAAS,MAAW,WAClC,IAAI,EAAQ,IACZ,IAAgB,IAAQ,GAAG,EAAM,UAAU,MAAW,WAAW,KAEjE,IAAa,MAAY,SAC3B,EAAG,oDAAoD,EAAE,KAAK,EAAmB,IAAS,iBAAiB,GAC3G,EAAG,qCAAqC,EAAE,KAAK,EAAY,GAAQ;AAEvE,QACE,kBAAC,QAAD;EACO;EACL,MAAK;EACL,cAAY,KAAiB;EAC7B,WAAW,EAAG,sCAAsC,EAAU;EAC9D,GAAI;YALN,CAOE,kBAAC,QAAD;GAAM,WAAU;aAAhB,CACG,KACC,kBAAC,QAAD;IACE,cAAW;IACX,WAAW,EAAG,6EAA6E,EAAE,OAAO,EAAc,GAAQ;IAC1H,CAAA,EAEJ,kBAAC,QAAD,EAAM,WAAW,GAAc,CAAA,CAC1B;MACN,KACC,kBAAC,QAAD;GAAM,WAAW,EAAG,EAAE,MAAM,EAAa,IAAS,aAAa,EAAe;aAC3E;GACI,CAAA,CAEJ;;EAGZ;AACD,EAAU,cAAc"}

package/docs/components/ui/status-dot.md

@@ -1,35 +0,0 @@
-# StatusDot
-
-- Import: @devalok/shilp-sutra/ui/status-dot
-- Server-safe: Yes
-- Category: ui
-
-## Props
-    status: "healthy" | "warning" | "critical" | "neutral" | "inactive"
-    size: "sm" | "md" | "lg"
-    pulse: boolean (ping animation; defaults to true for "healthy", false for others)
-    label: string (inline text rendered after the dot)
-    labelClassName: string (extra classes on the label span)
-
-## Defaults
-    size="md", pulse={status === "healthy"}
-
-## Example
-```jsx
-<StatusDot status="healthy" />
-<StatusDot status="critical" label="Service down" pulse />
-<StatusDot status="warning" size="lg" label="Elevated load" />
-```
-
-## Composability
-- **Server-safe presentational dot** — simple status indicator, pairs with inline text.
-- **Status semantics map to color:** healthy=success, warning=warning, critical=error, neutral=muted surface, inactive=dimmed. The pulse animation calls attention to "healthy" by default (active presence); you can flip it for other statuses by setting pulse explicitly.
-- **StatusDot vs BadgeIndicator vs StatusBadge:**
-  - StatusDot = tiny presence/status indicator with optional inline label (e.g. "Service online")
-  - BadgeIndicator = overlay on another element (notification dot on a bell icon)
-  - StatusBadge (composed) = full pill-style badge with colored bg and label text (e.g. ticket status)
-- **Label composability:** If you pass `label`, it renders inline after the dot. Use `labelClassName` for custom typography (e.g. font-mono for status codes).
-
-## Gotchas
-- The `pulse` prop auto-enables for "healthy" status — pass `pulse={false}` to suppress
-- Status type is exported as `StatusDotStatus` if you need it in consumer code