@devalok/shilp-sutra 0.48.0 → 0.49.0

package/docs/components/ui/radio.md

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

package/docs/components/ui/select.md

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

package/docs/components/ui/switch.md

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

package/docs/components/ui/table.md

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

package/llms.txt

@@ -1,6 +1,6 @@
 # @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.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).
 
@@ -65,6 +65,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)
@@ -83,7 +84,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)
@@ -98,7 +99,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)
@@ -141,6 +141,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)
@@ -157,6 +158,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/make-kit/components/form.md

@@ -69,7 +69,7 @@ Use inside a custom control to consume FormField context.
 
 | Control | Manual wiring needed |
 |---|---|
-| `<Select>` / `<SelectTrigger>` | Set `color="error"` on `SelectTrigger` from your validation state. |
+| `<Select>` / `<SelectTrigger>` | Set `state="error"` on `SelectTrigger` from your validation state. |
 | `<Checkbox>`, `<Radio>`, `<Switch>` | Pair `<Label htmlFor>` manually. State is visual on the control. |
 
 ## Examples
@@ -134,7 +134,7 @@ The Input receives `aria-describedby` (linked to FormHelperText), `aria-invalid=
     <FormField state={errors.role ? 'error' : 'helper'}>
       <Label htmlFor="role">Role</Label>
       <Select>
-        <SelectTrigger id="role" color={errors.role ? 'error' : 'default'}>
+        <SelectTrigger id="role" state={errors.role ? 'error' : 'default'}>
           <SelectValue placeholder="Choose a role" />
         </SelectTrigger>
         <SelectContent>

package/make-kit/components/icon.md

@@ -14,7 +14,7 @@ For the broader icon system (which icons exist, how to register custom ones, the
 - Any inline SVG icon — inside Button slots, IconButton, Badge slots, table cells, list rows.
 - Need an interactive icon button? Use `<IconButton>`, not Icon wrapped in `<button>`.
 - Need a static cluster of related icons? Use `<IconGroup>`.
-- Need a status indicator? Use `<StatusDot>` or `<Badge dot>` — they're optimized for that.
+- Need a status indicator? Use `<Dot>` or `<Badge dot>` — they're optimized for that.
 
 Tabler-only. Don't mix icon libraries — see `foundations/icons.md` for the rationale.
 
@@ -129,7 +129,7 @@ Input's IconProvider sets size by input size: `xs` / `sm` input → `sm` icon, `
 </Stack>
 ```
 
-For most status displays prefer `<StatusDot>` — purpose-built. Use this pattern only when you need a specific icon shape.
+For most status displays prefer `<Dot>` — purpose-built. Use this pattern only when you need a specific icon shape.
 
 ## Composability
 

package/make-kit/components/overview.md

@@ -77,7 +77,7 @@ Permanent inline message?
 Status of an item?
   → <Badge>          — pill label (status / tag)
   → <StatusBadge>    — colored dot + label (discriminated union: status="online"/"away"/...)
-  → <StatusDot>      — just the colored dot
+  → <Dot>            — just the colored status/indicator dot
 
 Temporary notification?
   → toast.success / error / warning / info (imperative) — must have <Toaster /> mounted
@@ -256,7 +256,7 @@ Code?
 | Skeleton | `/ui/skeleton` |
 | Badge | `/ui/badge` |
 | StatusBadge | `/composed/status-badge` |
-| StatusDot | `/ui/status-dot` |
+| Dot | `/ui/dot` |
 | EmptyState | `/composed/empty-state` |
 
 ### Layout

package/make-kit/components/select.md

@@ -98,7 +98,7 @@ Styling lives on the **Trigger**, not on `Select` root. Setting `<Select size="l
 <FormField state={errors.role ? 'error' : 'helper'}>
   <Label htmlFor="role">Role</Label>
   <Select value={role} onValueChange={setRole}>
-    <SelectTrigger id="role" color={errors.role ? 'error' : 'default'}>
+    <SelectTrigger id="role" state={errors.role ? 'error' : 'default'}>
       <SelectValue placeholder="Choose a role" />
     </SelectTrigger>
     <SelectContent>

package/make-kit/components/table.md

@@ -233,7 +233,7 @@ Table + Badge (server-safe via Badge.Group context — verify per use) + Avatar
 
 - **Server-safe:** Table and its sub-components are pure HTML semantic wrappers. No state, no context. Use in RSC trees without `'use client'`.
 - **TableHead scope:** Headers automatically get `scope="col"` for screen-reader navigation. Don't override it.
-- **Composes with primitives:** Drop `<Badge>`, `<Avatar>`, `<IconButton>`, `<StatusDot>` inside cells. Check each component's server-safety if you need RSC compatibility.
+- **Composes with primitives:** Drop `<Badge>`, `<Avatar>`, `<IconButton>`, `<Dot>` inside cells. Check each component's server-safety if you need RSC compatibility.
 - **TableCaption:** Renders as HTML `<caption>` — screen readers announce it before content. Use it for any non-trivial table.
 
 See `foundations/typography.md` for the body / label variants inside cells, `foundations/surfaces.md` for table-in-card surface guidance.